Design Tips for Developers

In this episode Wes and Scott dive into designing for developers - tips and tricks for improving your designs, and how to up your game in small ways that will have a big impact on your projects. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com. Show Notes 6:18 - General Design Tips •

Spacing is important • •

Using patterns and textures •

Subtle Patterns Hero Patterns Heroicons FlatIcon True Grit Texture Supply Steve Schoger • •

Use subtle gradients •

ColorSpace • •

Use subtle drop shadows •

• Multiple shadows on one element can have a nice effect • •

Don’t use true black and white (e.g. #000 or #fff) - use softer variation of black and white •

• Use CSS Variables for custom blacks and whites • CSS default colors are almost always too harsh • •

Default browser UI is almost never the best UI •

• Select elements, radio buttons, checkboxes, etc. can all be styled - it’s no fun, but way better than it’s ever been • 40:22 - UX Design & Animation •

Don’t use animations when not necessary • •

Subtle scale/transitions on hover can be a nice effect • •

Particles.js • •

Patagonia’s Bears Ears • •

CSS transitions vs Physics based • 51:30 - How To Get Better •

Follow UI-themed Instagram accounts • •

siteInspire • •

Dribbble • •

UISources • •

Follow Steve Schoger • •

Find a free mockup and build it out pixel for pixel • •

Take time to challenge what you think is possible or doable technically and creatively • ××× SIIIIICK ××× PIIIICKS ××× • Scott: Louis Cole • Wes: r/posthardcore Spotify Playlist Shameless Plugs Scott’s React Testing Course Wes’ Courses 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