A number of interesting issues with relation to good web design were covered during the second lecture.
- Page Layout
- Web Navigation
- Eye Movement
- Gestalt in Web Design
- HTML coding
Page layout deals with the header, the body, the side bar and the footer of a website. These four areas are clearly identifiable in almost all successful web pages.
Web navigation deals primarily with menus. Navigation via menu options needs to be clear and logical, it should be consistent and persistent.
Eye movement can be vergence, where both retina’s work in cooperation providing a singular image in focus. It can be saccadic, where the eye scans quickly. It can be pursuit movement where the eye allows motion to be followed. Web browsing has been shown to involve saccadic movement which when studied is shown to follow an F pattern across the screen.
Gestalt design theories, the exemplar being Bauhaus designs in 1920’s Berlin, where a number of artists, academics and industrialists developed theories concerning human perception of art and materiality. This design philosophy emphasises function over form. For web design four gestalt laws are of great use. Law of proximity, navigation menus closely grouped. Law of similarity and symmetry menus have the same shape. Law of good continuation, menus follow a line. Law of uniform connections, menus are bound with a standard shape.
Example of Bauhaus design. Teapot by Marianne Brandt, 1924. Image reproduced under student use guide from artstor.com
HTML, hyper text markup language, is a standarised markup language used to describe web pages in terms of colour, font, graphic output and hyperlinks. In this post all the words in bold, the underlined words and the link below have had html tags added thereby creating a more rich and varied layout. The following link is a handy one in all site for people wishing to develop their web design skills, HTML tutorial.
Finally it was fun to look at the fixed v fluid aspect of webpage design. Fixed ratio dependent on pixel size whilst fluid uses percentages. Below are some screen shots of this . web entry. Image on left is sized for a desktop/laptop, image in the centre is for a tablet, and image on the right is for a mobile phone.