presentation8
TRANSCRIPT
![Page 1: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/1.jpg)
Web design principles
![Page 2: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/2.jpg)
Surface plane:Visual Design
![Page 3: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/3.jpg)
Strategy plane
Scope plane
Structure plane
Skeleton plane
Surface plane
![Page 4: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/4.jpg)
gestalt laws, layout of design comps, page grids, consistency, style guides, usability issues
![Page 5: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/5.jpg)
Laws of gestalt theory
![Page 6: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/6.jpg)
Law of proximity
• Items in close proximity to one another tend to be grouped in a similar way.
![Page 7: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/7.jpg)
![Page 8: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/8.jpg)
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.
![Page 9: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/9.jpg)
![Page 10: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/10.jpg)
Law of symmetry
• we tend to perceive objects as symmetrical shapes that form around a centre.
CSC Finland's logo
![Page 11: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/11.jpg)
Symmetric balance
![Page 12: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/12.jpg)
Asymmetric balance
![Page 13: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/13.jpg)
![Page 14: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/14.jpg)
Law of continuity
• Items arranged on the page in alignment are perceived as belonging together.
![Page 15: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/15.jpg)
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.
![Page 16: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/16.jpg)
![Page 17: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/17.jpg)
No contrast
Key elementsstand out
cluttered
Use of contrast
![Page 18: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/18.jpg)
Use of whitespace
![Page 19: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/19.jpg)
Law of closure
• the brain tends to fill in missing information when it perceives an object as missing some of its pieces
![Page 20: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/20.jpg)
![Page 21: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/21.jpg)
Law of common fate
• Objects that move together are grouped together by the brain.
http://vimeo.com/2020930
Walking Person ->
![Page 22: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/22.jpg)
3 basic layouts
![Page 23: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/23.jpg)
1: Left column navigation
![Page 24: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/24.jpg)
![Page 25: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/25.jpg)
Looking room
![Page 26: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/26.jpg)
2: Right column navigation
![Page 27: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/27.jpg)
2: Right column navigation
![Page 28: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/28.jpg)
3: Three column layout
Header
Footer
![Page 29: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/29.jpg)
![Page 30: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/30.jpg)
Page grids
![Page 31: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/31.jpg)
Page grids
![Page 32: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/32.jpg)
Page grids
![Page 33: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/33.jpg)
Grid based layouts can allow for flexibility whilst ensuring uniformity across the site
![Page 34: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/34.jpg)
Page grids
Advantages:• Ease of organization• Economy• Ease of communication
![Page 35: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/35.jpg)
Iterative design
Squared can be the grid
Example:
![Page 36: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/36.jpg)
Alternative: rule of thirds
![Page 37: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/37.jpg)
often the most interesting and dynamic compositions are those where the primary
element is off center
![Page 38: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/38.jpg)
Using triangles to move elements off centre
![Page 39: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/39.jpg)
maintaining visual balance between the corner elements
![Page 40: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/40.jpg)
consistency
![Page 41: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/41.jpg)
external consistency: the site is consistent with the client’s other [off-line] products
![Page 42: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/42.jpg)
internal consistency: different parts of the site adhere to the same design approach
![Page 43: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/43.jpg)
“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
![Page 44: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/44.jpg)
Style guide =A document that defines every aspect
of a site’s visual design
![Page 45: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/45.jpg)
• 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
![Page 46: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/46.jpg)
Example:
http://www.bbc.co.uk/guidelines/futuremedia/desed/visual_language.shtml
![Page 47: Presentation8](https://reader035.vdocuments.net/reader035/viewer/2022062513/556765d8d8b42a4f528b4635/html5/thumbnails/47.jpg)
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