Syntax - Tasty Web Development Treats

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

Podden och tillhörande omslagsbild på den här sidan tillhör Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers. Innehållet i podden är skapat av Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers och inte av, eller tillsammans med, Poddtoppen.

Populärt på poddtoppen just nu