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 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

Release date

Lydbog: 13. november 2019