Your App is Ugly
•2 likes•1,017 views
Report
Share
Download to read offline
A rehash of a talk on the basics of design and aesthetics, covering color theory, swiss design, and some of the historical roots of modern design. Authored with Andrew Miller, Jeremy Osborn, and Leah Cunningham
More Related Content
What's hot
What's hot(9)
Viewers also liked
Viewers also liked(17)
Similar to Your App is Ugly
Similar to Your App is Ugly(20)
![My take on Design [Thinking]](https://cdn.slidesharecdn.com/ss_thumbnails/dttalkforslideshare-141110074412-conversion-gate02-thumbnail.jpg?width=768&fit=bounds)
Recently uploaded
Recently uploaded(20)
Your App is Ugly
- 1. Your App is Ugly. Andrew Miller Jeremy Osborn Mike Bifulco
- 6. design (v.) 1540s, from Latin designare "mark out, devise, choose, designate, appoint," from de- "out" + signare "to mark," from signum "a mark, sign". design (n.) 1580s, from Middle French desseign "purpose, project, design," from Italian disegno, from disegnare "to mark out," from Latin designare "to mark out".
- 7. What is a good design?
- 8. Dieter Rams’ Ten Principles of “Good Design” Good Design is innovative Good Design makes a product useful is aesthetic Good Design makes a product understandable Good Design is unobtrusive Good Design is honest Good Design is long-lasting Good Design is thorough down to the last detail Good Design is environmentally friendly Good Design is as little design as possible
- 9. Dieter Rams’ Ten Principles of “Good Design” Good Design is innovative Good Design makes a product useful is aesthetic Good Design makes a product understandable Good Design is unobtrusive Good Design is honest Good Design is long-lasting Good Design is thorough down to the last detail Good Design is environmentally friendly Good Design is as little design as possible
- 10. Aesthetic? “of, relating to, or dealing with or the beautiful” “pleasing in appearance” “attractive” “appreciative of, responsive to, or about the beautiful” “responsive to or appreciative of what is pleasurable to the senses”
- 11. Wait, that seems very subjective… “of, relating to, or dealing with or the beautiful” “pleasing in appearance” “attractive” “appreciative of, responsive to, or about the beautiful” “responsive to or appreciative of what is pleasurable to the senses”
- 12. How is Aesthetic more than just personal taste? Can we evaluate a design in a way that is not just subjective? How do we know when something has aesthetic value?
- 13. …and why bother?
- 14. Aesthetic-Usability Effect The Aesthetic-Usability Effect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs.”
- 16. Go ahead, pick an orange juicer…
- 17. Elements of Design • Colour • Shape • Texture • Space • Form
- 18. Principles • Unity/Harmony • Balance • Hierarchy • Scale/Proportion • Dominance/Emphasis • Similarity/Contrast
- 19. “The best designers sometimes disregard the principles of design. When they do so, however, there is usually some compensating merit attained at the cost of the violation. Unless you are certain of doing as well, it is best to abide by the principles.” – William Lidwell
- 20. “The best designers sometimes disregard the principles of design. When they do so, however, there is usually some compensating merit attained at the cost of the violation. Unless you are certain of doing as well, it is best to abide by the principles.” – William Lidwell
- 21. Gestalt Psychology Cognitive Psychology Design Principles in Early Art and Architectur e Formal Design Principles Swiss Design Movement Colour Theory 1861 – Paul Broca’s brain research 1890 – Christian Von Ehrenfels 1940s – Cybernetics 1920 – Itten – “The Art of Colour” 1963 – Albers – “Interaction of Colour” 1896 – Akzidenz-Grotesk published 1908– School of Designteaches formally teaches grid-based design 432 BC – Parthenon Completed
- 22. …Parthenon? Are You Serious?
- 23. Golden Ratio A ratio within elements of a form approximating 1.618
- 24. Golden Ratio a b
- 25. Golden Ratio
- 27. Golden Ratio
- 28. The Rule of Thirds
- 29. The Rule of Thirds
- 30. But seriously…
- 31. The Rule of Thirds
- 33. Gestalt Psychology Cognitive Psychology Design Principles in Early Art and Architectur e Formal Design Principles Swiss Design Movement Colour Theory 1861 – Paul Broca’s brain research 1890 – Christian Von Ehrenfels 1940s – Cybernetics
- 34. Let’s Talk About Your Brain
- 35. A Gross Oversimplification Cognitive Psychology: How your brain perceivesstimuli Gestalt Psychology: How your brain makes sense of it all
- 36. Law of Proximity
- 39. Law of Closure
- 40. Law of Prägnanz
- 41. Gestalt Psychology Cognitive Psychology Design Principles in Early Art and Architectur e Formal Design Principles Swiss Design Movement Colour Theory 1896 – Akzidenz-Grotesk published 1908– School of Designteaches formally teaches grid-based design
- 42. That Swiss Design Movement
- 43. -Josef Müller-Brockmann On Art and Science
- 45. That Swiss Design Movement
- 47. Go read this:
- 49. Gestalt Psychology Cognitive Psychology Design Principles in Early Art and Architectur e Formal Design Principles Swiss Design Movement Colour Theory 1920 – Itten – “The Art of Colour” 1963 – Albers – “Interaction of Colour”
- 53. On the Laws of Colour The objective laws of form and colour help to strengthen a person's powers and to expand his creative gift. ” Johannes Itten
- 54. primary primary primary secondary secondary secondary tertiary tertiary tertiary tertiary tertiary tertiary warm cool Complementary “Opposite colours” on the wheel Analogous “Adjacent colours” on the wheel Saturation “Purity” of a colour as it relates to white or gray
- 56. Colour can: • Carry cultural meaning • Impact accessibility • Convey brand, emotion • Emphasize interface elements
- 58. An Example
- 61. colour and cultural context Some Western interpretations of colour
- 64. Use colour to your advantage
- 65. But don’t abuse it
- 67. Putting it all together Simple design in practice
- 68. A Quick Example…
- 71. Simple Rules for Better Design
- 72. 1. Be Consistent Everything - Font sizes, colours, spacing, alignment should be universal for agiven interface. Users will waste time trying to figure out why something is minutely different.
- 73. 2. Create a context hierarchy
- 74. 3. Facilitate Unitization Use Gestalt principles to imply and clarify groups Use familiar objects and fonts Avoid ambiguity (be consistent!)
- 75. 4. Take Advantage of Mental Models
- 76. 5. A Picture’s Worth 1,000 Words • There are loads of open-licensed icon and image libraries available for use
- 77. 6. Be mindful of colour choices • The colourblind will thank you • Cultural Differences • Try not to use 100% black or white
- 78. There are many tools available to help
- 79. 7. Use Grids when possible
- 80. References • Cognition and Priming: http://www.yale.edu/acmelab/articles/bargh_chen_burrows_1996.pdf • Apparent Usability vs. Inherent Usability: http://dl.acm.org/citation.cfm?id=223680
- 81. References • Material Design, Google: http://www.google.com/design/spec/material- design/introduction.html
- 82. Books Universal Principles of Design William Lidwell et al. 100 Things Every Designer Needs to Know About People Susan Weinschenk
- 83. Books Don’t Make Me Think Steve Krug TheDesign of Everyday Things Don Norman
- 84. Dieter Rams’ Ten Principles of “Good Design” Good Design is innovative Good Design makes a product useful Good Design is aesthetic Good Design makes a product understandable Good Design is unobtrusive Good Design is honest Good Design is long-lasting Good Design is thorough down to the last detail Good Design is environmentally friendly Good Design is as little design as possible
- 86. In a nutshell… Free online courses