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

See All 1030 Episodes of "Syntax - Tasty Web Development Treats"