Archive for the ‘Project 3 – Research’ Category

e-commerce homepage

e-commerce homepage

For this project we had to produce a homepage for an e-commerce site. I have created a page for a friend who renovates and sells vintage furniture and accessories. After looking at various sites I decided I wanted a clean crisp look with retro overtones. Mid century vintage furniture is very fashionable and features in many lifestyle magazines such as Elle Decoration, so I felt that the page should try and reflect the tone of such magazines.

I have hopefully included all the elements needed for an e-commerce homepage such as call to action buttons, simple navigation bar, a large photo to reflect the content of the website, a section for any brief introdcutory text, contact details plus search, account, register and cart links, foot details including delivery and returns plus methods of payment.


Read Full Post »

For this classroom project we had to produce an interface with a more minimal and clean look. I have chosen quite a stripped back look with a serif type face (Perpetua). The interface is mostly blacks and greys with a splash of bright yellow for the header and footer to ‘lift’ the design. I have used a single large single colour image for impact and quite a large footer to contain links to large amounts of important information. A minimal drop shadow was added to the page to lift it away from the background.

Read Full Post »

This was a vector based project produced in Illustrator. We had to produce an Octopus following downloaded instructions. The main tool we used was pathfinder.

Read Full Post »

The aim of this project was to design a grunge style homepage for a site named Skateboard Sussex.

The page needed to contain a header, footer, side bar, navigation menu and  information around related topics.

The page was set up in photoshop – 1600 x 1000pxs. The actual page was set up to 960 x 600pxs. The extra space was to allow for a related illustrative background so that visitors viewing on high res or large monitors do not see the web page sitting on a white background.

I produced a background by creating a brush from images of graffiti. I used pavement colours – greys, pinks and black. These have been sampled within the webpage to anchor it to the background.

I have tried to keep the design quite clean even though it contains grungy elements. I want visitors to be able to locate what they are looking for quickly.

I have used one single image to sum up what the site is about. It contains lots of ‘white space’ so that additional info could be added if needed without adding too much clutter. If this was a live webpage – the image could be updated and changed regularly to keep it fresh. The photo was originally colour, I  have desaturated and tinted it with a pink sampled from the background image.

I thought that the main text could be a main news story with minimal introductory text with a link (more…) to take the visitor to a page containing the extended story, additional information, relevant links, images, etc…

The header, footer and sidebar are in a sampled grey. The edges have been softened by using a brush texture in the same colour and overlaid with an image of 5% opacity to add texture which doesn’t compete too much with other elements.

I have used two fonts – Verdana for body text – a recommended web font; for the header and subtitle I have used a hand drawn font called Green Pillow.

The navigation bar has been pushed to the top right of the header, it has lots of white space around it so it is easy to locate. It doesn’t take up too much space.

In the side bar I considered what other elements may appear on the homepage. Looking at existing sites there seems to be lots of news items which are often linked to videos, so I have added these in, along with registration and log-in buttons as well as links to Twitter and Facebook which also seem to be common items.

The footer contains information such as copyright, contacts, submission policy and others.

Read Full Post »

Mood boards representing different elements of interface design


The first thing a visitor to a website will notice is the header, It is the chance to make a great first impression, draw the visitor in and set the tone for the website.

Main navigation

Primary navigation are elements which are present on most pages of a site in a consistent format. These elements or controls should allow users to get anywhere on the site.

Well designed navigation is essential as it is key to the usability of a website. Navigation should strive to be visually appealing but not at the expense of functionality. It is a good idea to try and keep primary navigation minimal to avoid cluttering the page.

Secondary navigation

Secondary navigation is normally included on a few specific pages. It appears in the main section of a page, where it can provide detail about contents and provide fast routes to information.


Backgrounds are another important element to add impact to the overall design and tone of a website. With increased monitor sizes and resolution plus faster internet speed there is more scope to create impact with big bold illustrations, graphics or photos.


Sidebars, while not the main focus of a website are still important in terms of usability and appearance. A well-designed sidebar can make it easier for visitors to quickly find what they want, which helps to keep them at your site longer and improve the overall effectiveness of the site.


Footers on web pages are sections where important additional information such as copyright or customer service information are sited. They can also contain additional site features such as twitter updates, a short biography of the author, e-mail sign up links and other information that does not belong in the main content of the site.

Read Full Post »