PLAY PODCASTS
Design Foundations For Developers

Design Foundations For Developers

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 is a real-time headless CMS with a fully customizable Content Studio built in React....

Syntax - Tasty Web Development Treats · Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

November 13, 20191h 1m

Audio is streamed directly from the publisher (traffic.megaphone.fm) as published in their RSS feed. Play Podcasts does not host this file. Rights-holders can request removal through the copyright & takedown page.

Original episode page

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

Links ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Tweet us your tasty treats!
← All episodes of Syntax - Tasty Web Development Treats