Visual Design. It isn’t (just) about making things look pretty.

Transcript

1. Visual Design. It isn’t (just) about
   making things look pretty.
   Julia Jamieson
   ATOMIC
   CON
   

   View Slide

2. Make this pretty.
   W H AT W E H E A R
   

   View Slide

3. ATOMIC
   CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
   Increase credibility
   
   Effectively communicate features
   
   Demonstrate “taste”
   
   Increase usability
   VISUAL DESIGN & YOUR CUSTOMER
   Strong visual design can:
   

   View Slide

4. MORE USERS +
   SATISFIED CUSTOMERS
   = BETTER BUSINESS
   

   View Slide

5. ATOMIC
   CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
   Not about trendy fonts or swashes
   
   Not about decorating or making things look better
   
   Not about likes or dislikes
   WHAT VISUAL DESIGN IS NOT
   The ranty part of this talk
   

   View Slide

6. ATOMIC
   CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
   

   View Slide

7. Defending aesthetics is not just about
   the value of buttons or visual
   treatments. But rather, how people
   respond emotionally.
   I N D E F E N S E O F A E S T H E T I C S
   

   View Slide

8. ATOMIC
   CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
   f o r h i g h u t i l i t a r i a n s a n d h i g h a e s t h e t i c s !
   T H E
   R E S E A R C H
   

   View Slide

9. ATOMIC
   CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
   1 DO ATTRACTIVE THINGS WORK BETTER?
   An Exploration of Search Tool Visualisations
   A study on the role of aesthetics concludes that, though
   attractive things may not score higher in performance,
   people perceive attractive things as more usable.
   

   View Slide

10. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    2 STANFORD CREDIBILITY PROJECT
    How users perceive credibility
    Stanford University conducted a study with 2500+
    participants on how people assess the credibility of a
    website.
    

    View Slide

11. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    3 CONSUMER REPORTS
    According to this 2002 study, the “appeal of the overall
    visual design of a site, including layout, typography, font
    size, and color schemes,” is the number one factor we use to
    evaluate a website’s credibility.
    

    View Slide

12. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    4 ATMS IN JAPAN
    Two machines, same functionality, different layout
    Researchers in Japan setup two ATMs, identical in function,
    the number of buttons, and how they worked.
    
    Researchers observed that subjects encountered fewer
    difficulties with the more attractive machine.
    

    View Slide

13. Why is visual design important, and
    more than just making things pretty?
    T H I S C H A N G E S O U R Q U E S T I O N F R O M
    

    View Slide

14. How does visual design influence
    behavior and emotion?
    T O :
    

    View Slide

15. “Good design is aesthetic—The aesthetic
    quality of a product is integral to its
    usefulness because products we use every
    day affect our person and our well-being.
    But only well-executed objects can be
    beautiful.”
    Dieter Rams
    

    View Slide

16. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    t o o l s t o c r e a t e v i s u a l l y
    S O , W H AT
    N O W ?
    

    View Slide

17. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    Have a clear typographic and visual hierarchy
    
    Follow consistent patterns
    
    Solve problems with the simplest solution possible
    
    Communicate a brand personality
    FOCUS ON CREATING PRODUCTS THAT
    From a high level:
    

    View Slide

18. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    LEARNING TO
    SEE
    SIMPLICITY BE THE BORING
    DESIGNER
    Three Concepts
    1 2 3
    

    View Slide

19. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    L E A R N I N G
    T O S E E
    

    View Slide

20. “Learning to design is, first of all, learning to see.
    Designers see more, and more precisely.”
    Oliver Reichenstein, Information Architects
    

    View Slide

21. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    Seek out examples of design & study them
    
    Mimic great designs to understand them better
    LEARNING TO SEE
    

    View Slide

22. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    Atomic Con
    Yarrow Golf Resort
    November 20-22, 2014
    A time for all the Atoms in the molecule to enjoy
    some covalent bonding.
    

    View Slide

23. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    Atomic Con
    Yarrow Golf Resort
    November 20-22, 2014
    A time for all the Atoms in the molecule to enjoy some
    covalent bonding.
    

    View Slide

24. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    Atomic Con
    Yarrow Golf Resort
    November 20-22, 2014
    A time for all the Atoms in the molecule to enjoy some
    covalent bonding.
    

    View Slide

25. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    Atomic Con
    Yarrow Golf Resort
    November 20-22, 2014
    A time for all the Atoms in the molecule to enjoy
    some covalent bonding.
    

    View Slide

26. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    Atomic Con
    November 20-22, 2014 | Yarrow Golf Resort
    A time for all the Atoms in the
    molecule to enjoy some covalent
    bonding.
    

    View Slide

27. “To clarify, add detail.”
    Edward Tufte
    

    View Slide

28. “Good design is thorough down to the last
    detail—Nothing must be arbitrary or left to
    chance. Care and accuracy in the design
    process show respect towards the user.”
    
    Dieter Rams
    

    View Slide

29. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    S I M P L I C I T Y
    

    View Slide

30. “Less, but better”
    Dieter Rams
    

    View Slide

31. L E S S B U T B E T T E R
    

    View Slide

32. “Good design is as little design as possible
    —Less, but better— because it concentrates
    on the essential aspects, and the products
    are not burdened with non-essentials. Back
    to purity, back to simplicity.”
    Dieter Rams
    

    View Slide

33. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    T H E B O R I N G
    D E S I G N E R
    b l o g . c a p w a t k i n s . c o m / t h e - b o r i n g - d e s i g n e r
    

    View Slide

34. “If designers get too adventurous with usability, the result is
    generally a mishmash of quirky and hidden functions. When I
    say that good design is invisible, obviously I don’t mean
    obfuscating the use of a product by hiding the interface.”
    Oliver Reichenstein, Information Architects
    

    View Slide

35. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    Boring designers always choose consistency
    
    He or she will choose obvious over clever
    
    They are practical
    THE BORING DESIGNER
    Article by Cap Watkins | blog.capwatkins.com/the-boring-designer
    

    View Slide

36. ATOMIC
    CON VISUAL DESIGN ISN'T (JUST) ABOUT MAKING THINGS LOOK PRETTY
    Start with a type system (Sketch Wireframes)
    
    Keep track of common rules of thumb
    
    Recycle ideas when you can
    TOOLS TO START BEING BORING
    To ensure client adoration
    

    View Slide

37. Form follows function.
    1 9 0 0 ’ S
    

    View Slide

38. Form and function should be one,
    joined in spiritual union.
    F R A N K L L O Y D W R I G H T
    

    View Slide

39. http://uxmyths.com/post/1161244116/myth-25-aesthetics-are-not-important-if-you-have-good-us
    http://uxmag.com/articles/eye-candy-vs-bare-bones-in-ui-design
    http://conversionxl.com/first-impressions-matter-the-importance-of-great-visual-design/#.

    http://alistapart.com/article/indefenseofeyecandy
    http://www-users.cs.york.ac.uk/~pcairns/papers/ChawdaCraftCairns.pdf
    https://ia.net/blog/learning-to-see/
    http://blog.capwatkins.com/the-boring-designer
    S O U R C E S
    

    View Slide