• Like
Order
Upcoming SlideShare
Loading in...5
×

Order

  • 105 views
Uploaded on

Order concepts for web designers

Order concepts for web designers

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
105
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mater of Arts in Communication Design WEB DESIGN Order & equilibrium
  • 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. Disorder gives the idea of complexity Order WEB DESIGN NABA 2014 Roberto DADDA 3
  • 4. Ordered complexity! Order WEB DESIGN NABA 2014 Roberto DADDA 4
  • 5. We need order AND simplicity! Order WEB DESIGN NABA 2014 Roberto DADDA 5
  • 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. Order WEB DESIGN NABA 2014 Roberto DADDA 7
  • 8. Order WEB DESIGN NABA 2014 Roberto DADDA 8
  • 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. Grid usage, clean design & test with user’s Order WEB DESIGN NABA 2014 Roberto DADDA 10
  • 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. 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. Order WEB DESIGN NABA 2014 Roberto DADDA 13
  • 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. Design effort deep trivial Balanced design TOO MUCH NONEXISTENT CAOS simple Order CORRECT complex WEB DESIGN NABA 2014 Roberto DADDA Rules 15
  • 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. 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. 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. Order WEB DESIGN NABA 2014 Roberto DADDA 19
  • 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. 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. Order WEB DESIGN NABA 2014 Roberto DADDA 22
  • 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. 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