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 full-size slide

  2. Location
    History
    Architecture
    Haunted rooms

    View full-size slide

  3. &
    Surprise
    Delight

    View full-size slide

  4. &
    Surprise
    Delight

    View full-size 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 full-size slide

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

    View full-size slide

  7. Don’t be afraid
    to experiment

    View full-size slide

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

    View full-size slide

  9. Don’t rely solely on color 

    to convey information

    View full-size slide

  10. Don’t rely solely on color 

    to convey information

    View full-size slide

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

    View full-size slide

  12. Acme Website Home About Pricing Blog Contact

    View full-size slide

  13. Acme Website Home About Pricing Blog Contact

    View full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. filter: grayscale(100%);

    View full-size slide

  32. This is a box with

    a shadow.
    This is a box with

    a slight, vertical
    offset shadow.

    View full-size slide

  33. 1 Layout
    Color
    Type
    Details
    2
    3
    4

    View full-size slide

  34. &
    Surprise
    Delight

    View full-size slide

  35. Amber Hewitt
    amberhewitt.com
    @amberrhewitt

    View full-size slide