Website Research

Principles Applied to Design

This figure-ground technique is used in the beginning of the design process to work out the structure of the site and to see of it looks visually balanced. I could use this technique when creating scamps to work out proportions and so i can utilise space.

Proximity will be an important principle to consider when designing as it can used to form groups of relating information. If this is used in correct it can confuse the user and make the actions unclear.

The list above need considering with the similarity principle. I could apply this to things like links, buttons, or general interaction points.

E-commerce Website Resarch

I will be designing a e-commerce website that sells vinyl records so I want to have a look at what kind of elements will be needed in the design and how existing sites display content effectively.

The beatport website is a similar concept to the one i will be proposing as it sells digital music. This layout has all the content in the center section that is divided into clear groups for different categories on information. I like he use of tiles to shoe each song or artist. Having the image of the music makes it more dynamic and easy to relate to a real cd or vinyl.

The design above is good example of the principles in affect. It has a clear hierarchy between the elements. The eye is drawn towards the snowboards first which is the main product of the site and the grouping of the elements into three sections makes it easy to process and access the right information quickly.

This website is really simple and easy to use. The top three symbols on the right hand side offer the affordance of searching, logging in and shopping cart. This is something my website will need to have.

Drop down menus are an effective way of displaying content for the cart and log-in as it keeps relating elements grouped and easy to access. 

The examples above all make good use of the principles. A consistent observation across designs is the effective use of space to separate and group information in a clear logical structure that allows information to be scanned quickly and processed.

Grids

A grid system will be needed in order to have good continuation throughout the page and will aid in grouping sections of relating information by using a column system. 

Because I want to have the vinyl record sleeves on show I think a tile layout might be the most affective way of utilising space whilst keeping the layout structured and organised by implementing the proximity and continuance, whilst keeping a good figure-ground relationship.

This is another example of how I could use a tile layout.




I wanted to have a look at different UI Techniques i can use to display information:

Search Bar

 

This style of search bar might be affective for my design because it would allow for an artist search as well as a vinyl size search for convenience.

Pagination

A pagination system will be needed to display the high volume of vinyl records.The example above could be the best option because of the 

Login basket

The example above using affordances and continuation with the symbol and the connecting shape to communicate there is one item in the basket. I think this is a good example of the principles being applied as it communicates instantly. The only down side is the hidden affordance of a drop down menu but that shouldn't matter as it affords to be clicked because when its hovered over the menu would appear anyway.

The example above is a possible solution to display the shopping cart information. Similarity is used to show the relationship between the colours of the songs.Its the same colour as the shopping chart heading to suggest the items are in the cart, and therefore part of a group.


Footers 

I wanted to have a look what information is on an e-commerce website footer. It will need to have trust ware images, payment system image, contact details ....

Social Media icons

Social media icons could be a way of implementing the affordance of clicking, which would take the user to the linking page. The visual aspect is much more effective than type for links.