Podcasts Technology Syntax - Tasty Web Development Treats Design Foundations For Developers

Design Foundations For Developers

Published: Nov. 13, 2019, 2 p.m.

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

Sanity - Sponsor

Sanity.io\xa0is 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\xa0sanity.io/create. Get an awesome supercharged free developer plan on\xa0sanity.io/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at\xa0freshbooks.com/syntax\xa0and put SYNTAX in the \u201cHow did you hear about us?\u201d section.

Show Notes

6:35 - Our backgrounds in design

12:41 - Foundations

  • Consistency makes a big difference
  • Use \u201ctraining wheel\u201d 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 \xd7\xd7\xd7 SIIIIICK \xd7\xd7\xd7 PIIIICKS \xd7\xd7\xd7 Shameless Plugs Tweet us your tasty treats!