Order

456 views

Published on

Order concepts for web designers

Published in: Design
  • Be the first to comment

  • Be the first to like this

Order

  1. 1. Mater of Arts in Communication Design WEB DESIGN Order & equilibrium
  2. 2. "Order." Merriam-Webster.com. Merriam-Webster, n.d. Web. 12 Feb. 2014. <http://www.merriam-webster.com/dictionary/order>. Order "Disorder." Merriam-Webster.com. Merriam-Webster, n.d. Web. 12 Feb. 2014. <http://www.merriam-webster.com/dictionary/disorder>. WEB DESIGN NABA 2014 Roberto DADDA 2
  3. 3. Disorder gives the idea of complexity Order WEB DESIGN NABA 2014 Roberto DADDA 3
  4. 4. Ordered complexity! Order WEB DESIGN NABA 2014 Roberto DADDA 4
  5. 5. We need order AND simplicity! Order WEB DESIGN NABA 2014 Roberto DADDA 5
  6. 6. Order Albert Einstein, 14 March 1879 – 18 April 1955) Everything Should Be Made as Simple as Possible, But Not Simpler WEB DESIGN NABA 2014 Roberto DADDA 6
  7. 7. Order WEB DESIGN NABA 2014 Roberto DADDA 7
  8. 8. Order WEB DESIGN NABA 2014 Roberto DADDA 8
  9. 9. Information density too low usefull info total info EQUILIBRIUM! too high Order • Waste of precious screen space • Two many click • Impession of loosing time • STM needed to understand correlation between pages and pages elements WEB DESIGN NABA 2014 Roberto DADDA • Impression of confusion • STM needed to undertand page elements • Difficult to remember • Download time rises 9
  10. 10. Grid usage, clean design & test with user’s Order WEB DESIGN NABA 2014 Roberto DADDA 10
  11. 11. Let’s learn from video makers http://userinterfaced.com/designing-video-information-density-for-optimum-audience-engagement/ Order WEB DESIGN NABA 2014 Roberto DADDA 11
  12. 12. Joan MIRO, Stars in Snails' Sexes 1925 Contrast & user’s focus Order With color, dimension, shape… contrast we may attract the user attention on elements and information flow direction. WEB DESIGN NABA 2014 Roberto DADDA 12
  13. 13. Order WEB DESIGN NABA 2014 Roberto DADDA 13
  14. 14. In page design… • Identify element’s correlation, connection and order using the laws of Gestalt • Use de facto general standards • Use reasonable local standards • Evoid useless information • Minimize cognitive load Order WEB DESIGN NABA 2014 Roberto DADDA 14
  15. 15. Design effort deep trivial Balanced design TOO MUCH NONEXISTENT CAOS simple Order CORRECT complex WEB DESIGN NABA 2014 Roberto DADDA Rules 15
  16. 16. Graphics for usability, the goals • Be easy to read (text and images) for all the expected users • Help to understand structure of page giving to the user a sensation of simplicity • Help to associate homogeneous content elements • Use visual codes usual for the expected users and coherent • Use coherent visual codes inside the pages ecosystem • Avoid redundancy • Avoid ambiguity Order WEB DESIGN NABA 2014 Roberto DADDA 16
  17. 17. Noise and chaos • Noise • Avoid the usage of useless visual elements that divert the attention from the meaningful ones • Chaos • Avid putting too many elements together, they will interfere! Order WEB DESIGN NABA 2014 Roberto DADDA 17
  18. 18. Order Dada or Dadaism was an art movement of the European avant-garde in the early 20th century. WEB DESIGN NABA 2014 Roberto DADDA 18
  19. 19. Order WEB DESIGN NABA 2014 Roberto DADDA 19
  20. 20. Contrast, alikeness, stratification • Contrast • Use it to differentiate elements and make the user focus where needed • Alikeness • Group with this gestalt law correlated and homologous elements • Stratification • Visual layers help users to identify logical correlation and background Order WEB DESIGN NABA 2014 Roberto DADDA 20
  21. 21. Structure and visual journey • Structure • Use graphics elements, shape and position to make content structure and elements correlations evident (Grid, alignment, panes…) • Visual journey • Give to the customer the possibility of perceiving interaction as a logical journey easy to find and to remember. Order WEB DESIGN NABA 2014 Roberto DADDA 21
  22. 22. Order WEB DESIGN NABA 2014 Roberto DADDA 22
  23. 23. Consistence & contest • Consistence • Let’s call the same elements with the same names, symbols, colors, shapes… • Context • Adapt symbols to the contest and to the attended user’s Order WEB DESIGN NABA 2014 Roberto DADDA 23
  24. 24. Roberto Dadda www.dadda.it roberto@dadda.it +39 338 775 22 03 Twitter, facebook, linkedin: robertodadda Order WEB DESIGN NABA 2014 Roberto DADDA 24

×