Deesign of the interface

This week we learnt about the visual design process and principles when it comes to designing a web page. 

Research! This is obviously the first step. You cant create something amazing without looking at whats out on the market and whats new and hip.

Making concept sketches, developing a few of those concepts that you find work the best and present those 1 or 2 finals to the client to choose from. Giving the client too much to decide between can result in a monstrous web page with terrible design.

We also went over the different ways of finding a good layout for content and overall structure of the web page

• Card sort
• This is making cutouts for each piece of information that is needed to be on the page and playing around with them for layout and positioning on the page.
• Wire frame
• Get an online wire frame layout and then put content on there to see layout options
• Paper Prototype
• Making a paper prototype of the website to see if its working correctly. By 'clicking' on a link you can ensure that its travelling to the correct page. Cheeaaappp to make.
• Clickable Prototype
• Online tool of a plain background with clickable buttons to test the page and links are working correctly. 

Homepages are usually the first to be designed with a main theme and only a couple of variations are made as explained above to present to the client. But involving the client in the design of the web page gives them a feeling that they have contributed to it and personalising it for them. A client who hasn't had much input in the design might feel it doesn't speak the correct message or feels impersonal. 

Using Template Designs  can save a lot of time and money by not having to redesign each page. Only the key pages are designed such as the Home page and Blog page.

Philippa also went over the concept of Skeuomorphism which is the idea of making buttons and web pages more user friendly by making items look like actual objects.

ie. apple making the notepad look like an actual notepad or some web pages have coffee stains and stickers on them 

The Design Principles

• Dominance
• The heirachy of the page and its content
• Directional Line
• The direction in which the eye follows ie. using a person pointing in an image to direct the eye towards a certain place
• Contrast
• Difference ie. colour, hue, texture
• Consistency
• To make viewer feel as though still on same site even when many pages in
• Repetition
• Repeating things for usability and to keep viewer comfortable

Usability is a biggie. How usable is the website for the viewers?

The points for this are

• Learnability
• Efficiency
• Memorability
• Errors
• Satisfaction

Using these ideas we went on to redesign a web page with a theme of our choice from a basic structure which Philippa provided. We will be continuing on with it next week and actually building it in HTML

Wish me luck