Saturday, 10 January 2015

Practical Development

For the practical side of the module I will be designing an e-commerce website that sells vinyl records. I have chosen an e-commerce website as I think it will best allow me to incorporate the theories of perception into the layout. 

Initial Ideas / Planning 

I have made some notes and sketches to help work out the content, architecture, and structure of the site.

Because it will be selling vinyl records, the best way to display the sleeve artwork will be in a tiled layout. This will make good use of space and allow proximity and continuity principles to come into affect to create a structured layout that has movement.

The principles of perception will need to be considered when designing UI elements such as pagination, search bars, buttons, navigation, drop-down menus, social media icons....and so on. 

The website will consist of four links: About / New Releases / Artists / Contact

The Homepage will be the main template for the layout and will be the same layout for the new releases page. 


I have made a logo for the company above. I didn't want to spend to much time on this as the point of the synthesis is in the layout. However the concept of the name 'Dusty records' is it has the best collection of rare house vinyls.


In order to see if the layout looks balanced with the elements on the page I have created some scamps with the figure-ground principle. This is a good way to check that the page has unity between the groupings of sections.

The image above will be the homepage and linking page when one of the record sleeves is clicked on the homepage, this will show more information about the record and give the option to add it to the shopping cart.

The about page will just have some information on the company and will use an image as the focal point.

The contact page will have a question box for the user to send to the company. 


Now I have the basic structure of the site I have made some scamps with more detail on such as UI elements to make it easier when I come to designing. I have placed the two main search bars in close proximity to suggest the related grouping as they are both search bars. This is the same case for other points of interaction such as the buttons at the top od the page and the pagination has been grouped with the sleeves. 

The contact page has been operated into the information required for a question box. The names (first/surname) are on the same line as they are related. The rest of the info has been keep at the same width so it leads the eye with continuity down to the call to action, or submit button. 


I have started to size the record sleeve images to the template. The images will be roll-overs which will reveal the track info. I have applied a drop shadow to the images to make them stand out from the background to create contrast. This will signal to the user that they are part of the hierarchy and can be interacted with.

The pagination buttons need to be equal in proximity to communicate they are art of a group and also part of the pagination for the records.


I have made the amount of buttons larger because its more practical for the large amount of pages to search through. 

I have changed the colour to a grey because I think it needs to be more subtle so it doesn't clash with the other buttons that are more dominant in the visual hierarchy.

The navigation will be to the right of the logo so continuation will occur leading the users eye to it. I did try it underneath the logo and it was apparent that the principle was need. Also, I have used similarity by only having the links in upper case.

To make the distinction clearer I have separated it with a line that follow the same angle as the Y in the logo. Im not sure if this is the best way yet so I will analyse it as a whole later when more of the design is complete.

Search Bars:

The main search bar will be for searching everything. The section on the right will bo for the vinyl size. 

I have added a dense drop shadow on the drop down so it stands out from the rest of the page.

The section menu will be for searching genres and will drop down when hovered over.

As both options are for searching I have used the same colours for similarity and aligned them side by side in close proximity to suggest they are related as a group.


The buttons on the page will have a flat darker shade of blue for a 3d style to communicate to the user its affordances of clicking.

The shopping basket button has a further affordance with the shopping basket symbol to machete link between the real world object. The red speech bubble uses continuity by leading the eye to show how many items are in the basket.

These will be the three buttons on the top right hand side of the page.

The basket button will have a drop down menu that automatically drop down when rolled over with the mouse. It will show whats in the basket and give the option to remove them or go to check out. The record details have been grouped with the image and the price uses continuation to lead the eye to the X if it needs removing.

Below is all the drop-downs, search bars and buttons.

I have made the page heading much larger than other text to aid the hierarchy. The record sleeves would be the focal point and first point of interest, then the title will follow in sequence leading the eye across the top of the following the 'Z' pattern layout.


There is a lot of square shapes on the page so I have decided to use circle social media icons for contrast.

The layout of the footer has been done the follow the 'Z' shape pattern. The diagonal leads the eye to the bottom left hand corner where the call to action is, then from left to right across the information. I have also done this because of continuity. The increase in width from left to right between the elements creates nice movement.

To finish the footer I have added a line with a gradient and rounded variable width to create texture.


The record artwork will reveal the info and have a hyper link that will lead the user the the linking page.

Final Design for Homepage:

After analysing the design I have adjusted the colours of the buttons as they need to look different as they have different purposes.

Linking page:

The next page will be the linking page when a record image is clicked on the homepage. 

This is where there will be the option to add the product to the basket or the wish list so the buttons have been given plenty of space to make them stand out but still belong to part of the group.

For the Body copy I have used the lightest weight font and a heavier font for the track list. This adds to the hierarchy and creates contrast between the text. 

For the similar artists section I have used a bounding box. I think it needs this to balance out the layout as the left id visually heavier. I have changed the colour to black as the grey didn't fill the space.

Final Design for Linking Page:

I have positioned the call to actions on the diagonal of the Z pattern so it clear to the user what the interaction is. 

About Page:

The about page is rather text heavy so I have used different weights of font to add to the hierarchy and help separate the info so its easier to digest.

Where the image is I am going to create a carousel slideshow as I think this is best solution as they will only be a limited selection of images.

I am creating a vinyl inspired navigation for the carousel to show the user what image is being viewed. Proximity will be the main principle used here.

The empty section looked confusing being lined circles so I have implemented similarity and keep them the same but used colour to penetrate the user perception as it tends to over ride shape and size.

I wanted to make the edges of the image look as if they are framed and slightly indented into the page to suggest the image is a slideshow. I have done this by adding an inner glow to the image.

To finish the slideshow I have created some buttons that use the same characteristics as the pagination.

I wanted to further enhance the hierarchy within the text so I have made the sub-heading bigger to work better with the main heading and create a better eye movement and direction by leading the eye from the heading down. 

Final Design for About Page:

New Releases Page:

The new releases page uses the same layout as the home page. The only difference is if the amount of new releases doesn't fill the tiles it will be left blank with the black boxes. 

Final Design for New Releases Page:

Artists Page:

The artists page will be an A-Z list that will link to a page that would be the same as 'about this item' page.

I have underlined the artists names to make it clear that their affordance is for clicking and is a link.

I thought about keeping the pagination the same as before but decided to use an a-z style one instead as it makes it clearer and quicker to use. I have used the same shape and colour as the pagination to use similarity to communicate they are both part of the pagination grouping.

Final Design for Artists Page:

Contact Page:

The contact page will be really simply and have a contact box.

I have used the proximity between the sections to separate the information but still work as a whole.

Finally, I have made a call to action that uses the same characteristics as the other interaction points for the submit button.

Final Design for Contact Page:

No comments:

Post a Comment