Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Level Up Your Web Design Skills

Amber Hewitt
April 14, 2018

How to Level Up Your Web Design Skills

Want to take your web design to the next level? In this session, Amber will show you the concepts to improve your visual design skills. Learn how to use color, contrast, layouts, typography, and graphics to create visually interesting websites that will impress your users.

Presented at WordCamp San Diego 2018 // April 14, 2018

Amber Hewitt

April 14, 2018
Tweet

More Decks by Amber Hewitt

Other Decks in Design

Transcript

  1. Level Up
    How to
    your
    Web Design Skills

    View Slide

  2. Location
    History
    Architecture
    Haunted rooms

    View Slide

  3. &
    Surprise
    Delight

    View Slide

  4. &
    Surprise
    Delight

    View Slide

  5. Logo goes here Home About Pricing Blog Contact
    Headline goes here
    Click me!
    Another headline
    Hey, thanks for visiting my website. It took me all Saturday to make this. Pretty cool, huh! That stock photo of the
    pumpkins makes me want a pumpkin spice latte, but I can’t get one in April (insert sad face emoji).
    Sign Up!
    Email Address
    Join Our Community!
    Stay in touch by subscribing to our free
    daily newsletter—so you won’t miss a
    single super awesome post!

    View Slide

  6. Layout
    1

    View Slide

  7. Breathing room
    (a.k.a. white space)

    View Slide

  8. View Slide

  9. Too busy

    View Slide

  10. View Slide

  11. View Slide

  12. Just right

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. Don’t be afraid
    to experiment

    View Slide

  19. …but make sure
    there’s a logical reason
    for your design.

    View Slide

  20. Color
    2

    View Slide

  21. Don’t rely solely on color 

    to convey information

    View Slide

  22. Don’t rely solely on color 

    to convey information

    View Slide

  23. View Slide

  24. View Slide

  25. Subscribe
    hsl(194, 100%, 100%)
    hsl(194, 100%, 80%)
    Subscribe
    hsl(194, 100%, 100%)
    hsl(208, 100%, 100%)

    View Slide

  26. Acme Website Home About Pricing Blog Contact

    View Slide

  27. Acme Website Home About Pricing Blog Contact

    View Slide

  28. Documentation
    API reference
    API status
    Open source
    DEVELOPERS
    About
    Customers
    Jobs
    Blog
    COMPANY
    Support
    Contact
    Privacy & Terms
    RESOURCES
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.

    View Slide

  29. Documentation
    API reference
    API status
    Open source
    DEVELOPERS
    About
    Customers
    Jobs
    Blog
    COMPANY
    Support
    Contact
    Privacy & Terms
    RESOURCES
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.

    View Slide

  30. Documentation
    API reference
    API status
    Open source
    DEVELOPERS
    About
    Customers
    Jobs
    Blog
    COMPANY
    Support
    Contact
    Privacy & Terms
    RESOURCES
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.

    View Slide

  31. Type
    3

    View Slide

  32. SANS-SERIF
    Open Sans
    Proxima Nova
    Lato
    Avenir
    Brandon Grotesque
    Fira Sans
    SERIF
    Garamond
    Georgia
    Freight Text
    Merriweather
    Kepler
    Libre Baskerville

    View Slide

  33. The best kind of originality is that
    which comes after a sound
    apprenticeship, that which shall prove
    to be the blending of a firm conception
    of useful precedent and the progressive
    tendencies of an able mind.
    The best kind of originality is that
    which comes after a sound
    apprenticeship, that which shall prove
    to be the blending of a firm conception
    of useful precedent and the progressive
    tendencies of an able mind.
    #000 #FFF

    View Slide

  34. The best kind of originality is that
    which comes after a sound
    apprenticeship, that which shall prove
    to be the blending of a firm conception
    of useful precedent and the progressive
    tendencies of an able mind.
    The best kind of originality is that
    which comes after a sound
    apprenticeship, that which shall prove
    to be the blending of a firm conception
    of useful precedent and the progressive
    tendencies of an able mind.
    #333 #CCC

    View Slide

  35. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in tempus metus, sit amet aliquam nunc. Ut pharetra condimentum diam quis
    eleifend. Nunc fringilla quam magna, sit amet gravida elit malesuada varius. Aenean justo neque, lobortis at nisi id, cursus dapibus odio. Nunc
    sed fermentum elit, nec pharetra sapien. Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem. Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
    Vivamus pharetra facilisis congue. Etiam sit amet felis placerat, vehicula nibh ut, blandit eros. Phasellus malesuada elementum diam et
    commodo.

    View Slide

  36. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in tempus metus, sit amet aliquam nunc. Ut pharetra condimentum diam quis
    eleifend. Nunc fringilla quam magna, sit amet gravida elit malesuada varius. Aenean justo neque, lobortis at nisi id, cursus dapibus odio. Nunc
    sed fermentum elit, nec pharetra sapien. Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem. Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
    Vivamus pharetra facilisis congue. Etiam sit amet felis placerat, vehicula nibh ut, blandit eros. Phasellus malesuada elementum diam et
    commodo.
    Text is too small

    View Slide

  37. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in tempus metus, sit amet aliquam nunc. Ut
    pharetra condimentum diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit malesuada varius.
    Aenean justo neque, lobortis at nisi id, cursus dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem. Aenean eleifend arcu vitae varius pretium.
    Proin ac tempor purus. Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada elementum diam et commodo.

    View Slide

  38. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in tempus metus, sit amet aliquam nunc. Ut
    pharetra condimentum diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit malesuada varius.
    Aenean justo neque, lobortis at nisi id, cursus dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem. Aenean eleifend arcu vitae varius pretium.
    Proin ac tempor purus. Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada elementum diam et commodo.
    Line length is too long

    View Slide

  39. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.

    View Slide

  40. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.
    Line height is too close

    View Slide

  41. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.

    View Slide

  42. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.
    Hello World

    View Slide

  43. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.
    Hello World

    View Slide

  44. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.
    Hello World
    #848484
    #656565

    View Slide

  45. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in
    tempus metus, sit amet aliquam nunc. Ut pharetra condimentum
    diam quis eleifend. Nunc fringilla quam magna, sit amet gravida elit
    malesuada varius. Aenean justo neque, lobortis at nisi id, cursus
    dapibus odio. Nunc sed fermentum elit, nec pharetra sapien.
    Praesent fermentum diam a purus rutrum tristique.
    Fusce posuere sodales pellentesque. Praesent nec tempus sem.
    Aenean eleifend arcu vitae varius pretium. Proin ac tempor purus.
    Vestibulum sed tortor eu velit sollicitudin tincidunt. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Vivamus pharetra facilisis congue. Etiam sit amet felis
    placerat, vehicula nibh ut, blandit eros. Phasellus malesuada
    elementum diam et commodo.
    Hello World
    #656565
    #656565

    View Slide

  46. Details
    4

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. filter: grayscale(100%);

    View Slide

  51. stripe.com

    View Slide

  52. View Slide

  53. This is a box with

    a shadow.
    This is a box with

    a slight, vertical
    offset shadow.

    View Slide

  54. 1 Layout
    Color
    Type
    Details
    2
    3
    4

    View Slide

  55. &
    Surprise
    Delight

    View Slide

  56. Thank you!

    View Slide

  57. Amber Hewitt
    amberhewitt.com
    @amberrhewitt

    View Slide