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

• Take inspiration from the best — you’ll find your own voice after enough work
• Go easy on trends - blobby characters with purple hair
• Take a trip around the world wide web
• Stripe
• Dribbble
• Site Inspire
• codrops
• Refactoring UI

Links * Designer Starter Pack - Andrea Crofts * LastPass * Colour Lovers * Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google * Bloomberg * Dropbox * FontPair * FontJoy * Figma - Google Font Pairings * Type Scale * Creative Market * Radnika Next * Stripe * Dribbble * Syntax 72: Accessibility * Firefox * Site Inspire * codrops * Refactoring UI * Adam Wathan * Steve Schoger

××× SIIIIICK ××× PIIIICKS ××× * Scott: Reelgood * Wes: Magnesium

Shameless Plugs * Scott: FullStack React with NextJS - Sign up for the year and save 25%! * Wes: Beginner Javascript

Tweet us your tasty treats! * Scott’s Instagram * LevelUpTutorials Instagram * Wes’ Instagram * Wes’ Twitter * Wes’ Facebook * Scott’s Twitter * Make sure to include @SyntaxFM in your tweets