Design Foundations For Developers
source link: https://syntax.fm/show/196/design-foundations-for-developers
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
××× SIIIIICK ××× PIIIICKS ×××
Shameless Plugs
Tweet us your tasty treats!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK