This is how my pet shop website/store, Pet Paradise, is currently looking.
I have designed this website inline with my branding guidelines, and the store’s mission statement, my photography, social networking links, and the sidebar menu I created from a photo.
Homepage
Toys page
Food page
Contact page
I changed the logo for my pet shop - Pet Paradise. This was how it looked before…
Not much different, but this is how it looks now. I have changed it by changing the paths using the direct selection tool, and adding effects to the paw and circle, to make it look less robotic, and to blend it better with the font I used (MTF Peach Cobbler)…
This is the business card for Pet Paradise.
Design for Web & Mobile devices
24/02/12
In the session today, we’ve been looking at branding guidelines. I found the Bath Spa University guidelines.
Branding guidelines include things like;
Branding guidelines also have very neat, modern and professional looking layouts too. Some feature background information about the company at the start.
Picture Below… a screenshot from the Bath Spa University branding guidelines, which can be found online - http://www.bathspa.ac.uk/services/marketing/branding-new/bsu-brand-guidelines-2012-01-12.pdf
Design for Screen & Mobile Devices
…also in the brief, was the task to create 6 icons. My theme was social networking/social media icons. I created an icon for Facebook, Twitter, Tumblr, Wordpress, YouTube and email, for websites to use to share content, and to link to accounts on other websites.
To create the top 4 icons in this post, I used the stamp tool in Photoshop.
Tumblr
Wordpress
YouTube
With this icon, I have attempted at making it look like a computer screen (buttons/lights in the bottom right), and have created a red triangle which acts as a play button symbol. I’ve kept it to the YouTube colour scheme - red, black, and white.
For email, I created an @ sign using a font from dafont.com called “new facebook”, and a photo I took of a keyboard.
I didn’t want to edit or mess around with the top 4 icons too much because I didn’t want them to look too different to other social networking icons, and I didn’t want it to not look like an icon/symbol for those sites, so they’re looking rather basic. Other than looking basic, I’m fairly pleased how they look.
I created a new look for the YouTube icon because I wouldn’t have been able to create the same effect as the other icons because of the logo and the amount of lettering it contains.
Design for Screen & Mobile Devices
For our Design for Screen & Mobile Devices sessions, we were given a brief to create 6 wallpapers. I created mine using six photographs, and some typography.
Bath architecture
This is a photo of Bath Bus Station. Although it doesn’t represent Bath, I chose to create a wallpaper from it due to it’s composition and the shapes and lines on the building. I edited the photograph to make it black and white to give it only one main colour scheme. On it’s original photo, I was going to add text saying “Bus Station. Bath, Somerset”, but didn’t because to anyone who isn’t from, or doesn’t know Bath, it doesn’t look like a bus station, and the photograph is just showing architecture… not buses.
Clifton Suspension Bridge
For this wallpaper, I used one of my photos of the Clifton Suspension Bridge (Bristol), and added text onto the photo with a theme of the bridge… I added words like “Concorde” because Concorde flew over the bridge on it’s last journey, and words like “BS8” because that is the postcode. I gave the words/typography the shape of the bridge - the Clifton & Bridge being the towers, the Suspension being the bottom of the bridge, and the rest, the chains.
Design / Architecture
For this wallpaper, I used my photo of the architecture of Cabot Circus shopping centre. I added a piece of text saying “Design Is…” as just something which could be extended… someone could say; Design Is… Architecture, Beautiful, Horrid, Cool, Neat, Amazing. I put the text up higher so if the wallpaper were to be used on a Mac, the Dock wouldn’t be in the way of the text.
Kitten
From two of my photographs, I created two wallpapers of my kitten!
British
I created a British-themed wallpaper from my photograph of a red postbox. Using the layer filters in Photoshop, I added a Union flag onto it.
Design for Screen & Mobile Devices
For our Iconification website, although premium, I found a possible theme on Wordpress.
It’s called “Media Store” and allows you to add widgets, has a nice theme and layout, has a ‘Top Downloads’ section, Login field, a Download button, as well as a comments and review area. The theme also contains a blog, and social networking buttons/links at the bottom of the page.
Screenshot
Design for Screen & Mobile Devices
For the Design for Screen & Mobile Devices sessions, I designed icons. I had two themes in mind - one being social networks, and the other, my kitten!
Kitten
To create the icon below, I found a (royalty free) picture from sxc.hu of a rubbish bin with rubbish falling out of it - I was starting my kitten theme by creating a possible icon for a Recycle Bin/Trash to go on a desktop, or in the Mac dock. I then cut around an image of my cat in Photoshop, imported it into Ilustrator, and live traced it.
I thought it looked alright, but it’s more of a picture than an icon because of how detailed the image is - if it was the smallest icon at 16x16 pixels, it wouldn’t work. Due to this, I think i’m moving away from the kitten theme.
Social Networks
I designed six other icons with a theme of ‘Social Networks’ (which could be icons that appear on websites to share content on social networks). I designed one for Facebook, Twitter, Tumblr, Wordpress, YouTube, and for email. Although they look simple, I went for a funky/tidy look.
Top (left to right): Facebook, Twitter & Tumblr.
Bottom (left to right): Wordpress, YouTube, and email.
When I designed the six icons above, I was pleased with them because I think they go well together as they all look rather funky, and something different to how social network icons usually look. The only things I wasn’t too sure about - Twitter & Tumblr because they are both t’s, and YouTube because although I’ve tried keeping it with the theme of the YouTube logo (red, white and black), it doesn’t really look like it should be for YouTube. On these icons, I kept the same colour schemes for the social networking websites so they would be recognised much easier compared to if I did random colours, or a same colour throughout the icon set - to do this, I print screened bits of the websites, opened them into Photoshop, and got the colour using the Eyedropper Tool.
Different designs…
I thought the above six icons looked a bit simple, not highly interesting (although I think they’d work), and not very original. I then had a go at different designs of the Twitter icon, this time, using the Twitter “t” and Twitter bird…
Top (left to right): Stencil Twitter birds over the “t”, Twitter birds cut into the shape of the “t”, and Twitter birds surrounding the “t”.
Bottom (left to right): A black Twitter “t”, and Twitter birds surrounding it, and Twitter bird stamps in a “t”.
Instead of the Twitter icon in the top finished set, I’ll use one of these. I may also change some of the other icons and personalise them with their look.
18/11/2011
Design for Screen & Mobile Devices
In the lesson today, I completed 5 main designs for my wallpapers. I’ve based all the wallpapers around photography, but haven’t yet thought of a theme, or which wallpaper I should pick as my theme, to then create others in a similar way.
With this first wallpaper, I added typography on top of one of my photographs of the Clifton Suspension Bridge, in the shape of the bridge itself. The words I added to make up the typography are all in the subject of the bridge.
I designed this wallpaper with a “British” theme in mind. It contains one of my photographs of a postbox. I found a royalty free image of a Union flag, and added it on top of the photo layer in Photoshop. I then added a “Darken” effect to the Union flag layer to create this…
This could be a part of a “British” theme where I also create more wallpapers with the same design, but changing the photograph to something like a red London bus or an old red telephone box.
This is a screenshot from when I was creating the above wallpaper.
Here’s a wallpaper containing a photo of my kitten!
…and another!
This is a wallpaper containing my photograph of the architecture/design of Cabot Circus shopping centre.
Browser wars!
In the lesson, we also looked at different browsers, and which is best.
From research via the w3schools website, I found that Microsoft Internet Explorer was the most used web browser in October 2011. In second place was Firefox, then Chrome, followed by Safari, and then Opera.
I also discovered that the best web browser for developers, was Firefox, because you can download an add-on called ‘Firebug’ for it. Smashing Magazine website.
We also used a website called BrowserShots.org to take a look at website browser compatibility. I looked up my Tumblr URL. This is how it looks in a version of Opera…
The fonts don’t load correctly!
Like Opera, in ‘Iceape’, the fonts don’t load correctly, the buttons/links underneath the header are out of place, and the search bar is missing…
In Dillo… it looks awful. However, unlike on the ‘Iceape’ browser, it contains a search bar!
For our Design for Web & Mobile Devices session, we are creating our own wallpapers.
From research, I found that widescreen wallpapers can be created with a resolution of 1280 x 800 pixels, 1440 x 900, 1680 x 1050, 1920 x 1200, and 2560 x 1600. I’m interested in creating a wallpaper for the iPhone. To do this, I’d need to create one at 960 x 640 (high resolution screen version for the iPhone 4 or the latest iPod touch). On an iPad, you can rotate the screen, so the background will change from vertical to horizontal. I found that horizontally, the screen pixels are 1024 x 768, and vertically, 768 x 1024. However, to create a wallpaper for an iPad, it’d need to be 1024 x 1024, or even 1500 x 1500 as this website suggests.
For the project, I’d like to create a photographic wallpaper, or a wallpaper based on typography. Or something between the two.
After browsing this website; http://www.junkiee.net/design/70-of-the-best-desktop-wallpapers , I found some great typography-based wallpapers which I liked…
Today in Photoshop, I’ve been coming up with possible ideas for my wallpapers. I used an Autumnal looking photograph, and I used a sans-serif font called ‘Babas Neue’ (which looks rather modern) which I found on dafont.com.
In action, it looks like this…
This is the original photo…
Photography
Looking more at photography, I used an image of the architecture on Bath Bus Station. I changed the photograph to black and white because it makes it look calmer - something you wouldn’t mind looking at every time you turn the computer on.
I’m not sure about the piece of text I added, but I placed it higher up, because if you were to use it on a Mac, the dock wouldn’t be in the way. Here it is in action…
Working with a photograph and typography again, I came up with this possible idea for a wallpaper. I used one of my photographs of Bristol Harbourside as it’s rather calm looking, and I took it on a pleasant day. I brought down the Opacity on the photograph layer in Photoshop so the text would work, and if any files were on the desktop, it’d be clearer to navigate around, compared to if it was a normal photograph.
Here is another idea, but of just using one of my photographs - no type. It’s a rather calm photo of Weymouth beach which I photographed early in the morning. This could work well as a wallpaper because many people like the beach, the Sea is calming, and it’s in black-and-white.
I created the wallpaper below with the ‘Earth’ wallpaper (above) in mind. I used one of my photographs of the Clifton Suspension Bridge, and added text to it. I placed “Clifton”, “Suspension”, “Bridge” in a larger font, and rotated the text. I then added text around the main “Clifton Suspension Bridge” text which is in the subject of the Clifton Suspension Bridge - such as “Brunel”, and dates.
On the image below, I tried creating the main shape of the bridge - the “Clifton” and “Bridge” being the pillars, the “Suspension” being the bottom, and other words, in the subject of the Clifton Suspension Bridge, to make up the curved shape of it.
Here is another photography-based wallpaper. It’s one of my photographs of a building near the Bristol Harbourside.
21/10/2011: In the Design for Screen and Mobile devices session on Friday (21st), I chose a theme I liked, added pages, added widgets, some of my photographs, and added a blog post about the Mac OS X user interface to my Wordpress.com blog - scottsalter0.wordpress.com.
I chose the ‘Skeptical’ theme (created by ‘WooThemes’). Although it may look a bit dull, I liked it’s modern, neat and tidy look. I added a Twitter widget so visitors to the site could follow me and read my tweets, and a Flickr widget for visitors to view a stream of my photographs.
In the session, we also looked at Twitter. If you’d like to follow me, my Twitter is @scottsalter5.
