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. 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!
  2. 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.
  3. 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.
  4. 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.
  5. SANS-SERIF Open Sans Proxima Nova Lato Avenir Brandon Grotesque Fira

    Sans SERIF Garamond Georgia Freight Text Merriweather Kepler Libre Baskerville
  6. 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
  7. 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
  8. 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.
  9. 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
  10. 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.
  11. 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
  12. 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.
  13. 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
  14. 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.
  15. 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
  16. 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
  17. 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
  18. 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
  19. This is a box with
 a shadow. This is a

    box with
 a slight, vertical offset shadow.