Transcript
Web design principles
Surface plane:Visual Design
Strategy plane
Scope plane
Structure plane
Skeleton plane
Surface plane
gestalt laws, layout of design comps, page grids, consistency, style guides, usability issues
Laws of gestalt theory
Law of proximity
• Items in close proximity to one another tend to be grouped in a similar way.
Law of similarity
• Items of similar size, shape or color tend to be grouped together by the brain, and a semantic relationship between the items is formed.
Law of symmetry
• we tend to perceive objects as symmetrical shapes that form around a centre.
CSC Finland's logo
Symmetric balance
Asymmetric balance
Law of continuity
• Items arranged on the page in alignment are perceived as belonging together.
Law of figure and ground separation
• (= Law of prägnanz, or emergence): for a figure or concept to be perceived it must stand apart from the background. Thus some objects must take a prominent role, others fade into the background. In this way, a clear hierarchy amongst page elements can be established.
No contrast
Key elementsstand out
cluttered
Use of contrast
Use of whitespace
Law of closure
• the brain tends to fill in missing information when it perceives an object as missing some of its pieces
Law of common fate
• Objects that move together are grouped together by the brain.
http://vimeo.com/2020930
Walking Person ->
3 basic layouts
1: Left column navigation
Looking room
2: Right column navigation
2: Right column navigation
3: Three column layout
Header
Footer
Page grids
Page grids
Page grids
Grid based layouts can allow for flexibility whilst ensuring uniformity across the site
Page grids
Advantages:• Ease of organization• Economy• Ease of communication
Iterative design
Squared can be the grid
Example:
Alternative: rule of thirds
often the most interesting and dynamic compositions are those where the primary
element is off center
Using triangles to move elements off centre
maintaining visual balance between the corner elements
consistency
external consistency: the site is consistent with the client’s other [off-line] products
internal consistency: different parts of the site adhere to the same design approach
“A successful design is not merely a collection of small well-designed objects; rather, the
objects should form a system that operates as a cohesive, consistent whole.”
Jesse James Garrett, p.150
Style guide =A document that defines every aspect
of a site’s visual design
• Global definitions: design grids, colour palettes, typography and logo specifications
• Local definitions: standards for parts the site (e.g. ‘product catalogue’)
• …• …• Interface elements• Navigation elements
Example:
http://www.bbc.co.uk/guidelines/futuremedia/desed/visual_language.shtml
Sources
• http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html
• http://articles.sitepoint.com/article/develop-style-guide-site• http://www.alistapart.com/articles/writingainterfacestyleguide/
• Mullet, K. and Sano D. (1994) Designing Visual Interfaces: Communication Oriented Techniques, Prentice Hall
top related