A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question →
Wes Bos

Wes Bos

XL5G3 Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, NX2V1, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 196: Design Foundations For Developers



Nov 13th, 2019

Design Foundations For Developers

👇 Download Show✏️ Edit Show Notes

In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better!

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.

Show Notes

6:35 - Our backgrounds in design

12:41 - Foundations

  • Consistency makes a big difference
  • Use "training wheel" tools until you are confident
  • Always work within a system
  • Less is more - subtle is better

19:39 - Color

  • Color theory
  • Complementary colors and shades
  • Stick to color pallet generators until you are good enough

28:51 - Spacing

  • More spacing than you think you need
  • Vertical rhythm
  • Letter spacing: -1px
  • Consistent margin and padding

34:47 - Typography

  • Sans vs serifs
  • Finding fonts
  • Use proven combinations until you know your way around

41:49 - Interaction

  • Design for all states (e.g. standard, visited, active, hover, etc.)
  • Animations should be quick
  • Interactions should make sense

45:04 - Concerns beyond visuals

  • Accessibility via color contrast
  • Thin fonts and light grey are awful
  • Think about the poor Windows users

48:47 - Inspiration + Resources


Shameless Plugs

Tweet us your tasty treats!