Playing: 196: Design Foundations For Developers
LOUDNESS
Episode 574
|Feb 10th, 2023
Supper Club Γ Qwik framework from MiΕ‘ko Hevery, the Creator of Angular
Episode 393
|Oct 4th, 2021
Hasty Treat - Spicy Takeout - PHP Is Good and Weβre Just Re-Creating It
Nov 13th, 2019
Design Foundations For Developers
π Download ShowβοΈ Edit Show NotesIn 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 ΓΓΓ
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