Interface Design – Web 2.0

I am going to do my final interface design incorporating the Web 2.0 style design and use. Web 2.0 is not a style but a website that is more interactive than a static page. It is also a term used for online communities online. But baring all this in mind there are some common themes of interface design that are used in Web 2.0 such as rounded corners, gradients, reflections, letterpress, a lot of empty space, user friendly, easy to read big type using a rounded font such as Sans serif, big logo and also it must be simplistic. So baring all this in mind I am going to draw out the wire frame first.

Wire Framing

For the wire frame I have included only the completely nessesary elements in the web page, this is in aid of keeping the design as simple and easy to use as possible (user friendly). wire frame workshop example photoshop web design interface web 2.0

I have also kept the design symmetrical as I think that this makes it easier to read for the viewer. Because online communities are so important for social networking online the social media icons are very important in the design of Web 2.0 and must be placed somewhere obvious to the viewer.

Interface Design

Starting with the background and working outwards/upwards I am going to make a gradient, see the screen shot belowweb design interface photoshop example web 2.0

The gradient tool allows you to make a colour blend with another colour, or get lighter or darker. As rule of thumb I have made my background 1600 x 1000 pixels, then to get a understanding of the main body area I have made a rectangle that is 960 x 760 pixels. I make this box white and turn the opacity down to just around 10%, this means I can see it, but it has not altered my colour choice much.

I have decided that this Web 2.0 style of design does not really work very well in my mind for the theme behind my edited images. When designing the previous two interface designs I felt I could get the right kind of website style to suit my photographs and the branding for my exhibition, but this Web 2.0 is not the right style. So any way, I have to do it, so I am going to attempt to make it fit the Web 2.0 even if it does not show my images off well. I am going to include a image as well as a photograph. I have found this lovely drawing which I think will set the tone of my

web design interface photoshop example web 2.0

Western theme website off quite well. This copy is hand drawn, so I am going to alter it in Illustrator the same way I altered a photograph into a vector image before.

So I took this drawing into Illustrator and made it into a 3 colour image. But I felt that this was still too detailed and I wanted just a silhouette of the horse and man, so I did this, then pressing ‘expand’ to make sure it would be easy to resize big or small when I took it into Photoshop.

So I took it into Photoshop and started designing the header, the logo. This was tricky because the style of Web 2.0 fonts which i typically a San serif was not a Western themed novelty that I had used before so I searched and found one that I feel works well for Web 2.0, called Lobster, although it is a little fancy it is curved but still very easy to read which is what I want for the interface style. See screen shot belowweb design interface photoshop example web 2.0

For my vector image I have chosen a off-black, as I feel that black is does not fit in with the Web 2.0 colourful pastel style. I have done my logo with the font Lobster and included a gradient in that a well, using s thin stroke to bring out the letters from the background subtly. I have also used a rounded rectangle box for the logo to go on top of. I have used the ‘FX’ options to alter the text and the box and make them Web 2.0 using the tools like gradients, inner glow and stroke.

Now still working on the hero image area I am going to add in a photograph of mine, but instead of making it the centre feature and only image I am going to make it into a link to the gallery as this is the most important part of the website. Here is the link to the gallery:web design interface photoshop example web 2.0

So to create this banner I have used the rectangle shape too and used the ‘other shape’ options. This gave me a huge range of options for random shapes and I felt that this banner works quite well laid over my image, it is also big enough to make it quite obvious as this is what I want it to be because the gallery will show all my exhibition photographs.

Lastly I have done the footer which includes the © Alice Volk 2012 copyright and also the very important for Web 2.0 social media links. For this interface I have made them slightly bigger than in other designs as they are a important part of the online community and networking that promotes Web 2.0. Below is my final interfaceweb design interface photoshop example web 2.0As I mentioned already, I felt that Web 2.0 was not going to promote my photographs the best of all 3 different interface styles I have done, so I decided to keep it as simple as possible. I have used simple two main colours and quite pastely ones with darker text colours for the navigation and gallery link on the banner so bring them out and prominent from the coloured background. I’m not sure if its web 2.0 or not but I am happy with my vector image of the horse and cowboy because I feel that it speaks as part of my branding for the website.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s