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