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

Transcript

1. Level Up How to your Web Design Skills
2. Location History Architecture Haunted rooms
3. & Surprise Delight
4. & Surprise Delight
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!
6. Layout 1
7. Breathing room (a.k.a. white space)
9. Too busy
12. Just right
18. Don’t be afraid to experiment
19. …but make sure there’s a logical reason for your design.
20. Color 2
21. Don’t rely solely on color 
 to convey information
22. Don’t rely solely on color 
 to convey information
25. Subscribe hsl(194, 100%, 100%) hsl(194, 100%, 80%) Subscribe hsl(194, 100%, 100%) hsl(208, 100%, 100%)
26. Acme Website Home About Pricing Blog Contact
27. Acme Website Home About Pricing Blog Contact
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.
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.
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.
31. Type 3
32. SANS-SERIF Open Sans Proxima Nova Lato Avenir Brandon Grotesque Fira Sans SERIF Garamond Georgia Freight Text Merriweather Kepler Libre Baskerville
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
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
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.
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
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.
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
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.
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
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.
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
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
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
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
46. Details 4
50. filter: grayscale(100%);
51. stripe.com
53. This is a box with
 a shadow. This is a box with
 a slight, vertical offset shadow.
54. 1 Layout Color Type Details 2 3 4
55. & Surprise Delight
56. Thank you!
57. Amber Hewitt amberhewitt.com @amberrhewitt