Your App is Ugly

Your App is Ugly

• 1.
  Your App isUgly. Andrew Miller Jeremy Osborn Mike Bifulco
• 5.
  There is no difference between science and art when it comes to creativeness…. and scientists can be just as creative as an artist” Joseph Albers On Art andScience
• 6.
  design (v.) 1540s, fromLatin 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 agood design?
• 8.
  Dieter Rams’ TenPrinciples 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’ TenPrinciples 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 seemsvery 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 Aestheticmore 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-UsabilityEffect is a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs.”
• 16.
  Go ahead, pickan 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 designerssometimes 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 designerssometimes 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 YouSerious?
• 23.
  Golden Ratio A ratiowithin elements of a form approximating 1.618
• 24.
  Golden Ratio a b
• 25.
  Golden Ratio
• 26.
  Golden Ratio b a ba
• 27.
  Golden Ratio
• 28.
  The Rule ofThirds
• 29.
  The Rule ofThirds
• 30.
  But seriously…
• 31.
  The Rule ofThirds
• 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 AboutYour Brain
• 35.
  A Gross Oversimplification CognitivePsychology: How your brain perceivesstimuli Gestalt Psychology: How your brain makes sense of it all
• 36.
  Law of Proximity
• 37.
  Law of Similarity
• 38.
  Law of Continuity
• 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 DesignMovement
• 43.
  -Josef Müller-Brockmann On Art andScience
• 45.
  That Swiss DesignMovement
• 46.
  Grids, Grids, Grids!
• 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”
• 50.
  More than just a pretty color
• 51.
  More than just a pretty color
• 52.
  More than just a pretty color colour
• 53.
  On the Lawsof 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 tertiarytertiary 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
• 55.
  Color and emotion https://thelogocompany.net/blog/infographics/psychology-color-logo-design/
• 56.
  Colour can: • Carrycultural meaning • Impact accessibility • Convey brand, emotion • Emphasize interface elements
• 57.
  Colour and Context
• 58.
  An Example
• 60.
  Colour and context
• 61.
  colour and cultural context SomeWestern interpretations of colour
• 64.
  Use colour toyour advantage
• 65.
  But don’t abuseit
• 66.
  Saturation for Contrast
• 67.
  Putting it alltogether Simple design in practice
• 68.
  A Quick Example…
• 71.
  Simple Rules forBetter 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 acontext hierarchy
• 74.
  3. Facilitate Unitization UseGestalt principles to imply and clarify groups Use familiar objects and fonts Avoid ambiguity (be consistent!)
• 75.
  4. Take Advantageof Mental Models
• 76.
  5. A Picture’sWorth 1,000 Words • There are loads of open-licensed icon and image libraries available for use
• 77.
  6. Be mindfulof colour choices • The colourblind will thank you • Cultural Differences • Try not to use 100% black or white
• 78.
  There are manytools available to help
• 79.
  7. Use Gridswhen possible
• 80.
  References • Cognition andPriming: 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 ofDesign William Lidwell et al. 100 Things Every Designer Needs to Know About People Susan Weinschenk
• 83.
  Books Don’t Make MeThink Steve Krug TheDesign of Everyday Things Don Norman
• 84.
  Dieter Rams’ TenPrinciples 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… Freeonline courses
• 87.
  About the courses…
• 89.
  Assignments Assessments PDF Handouts Code Samples DiscussionForums