BROADCASTS.com

Published: Aug. 22, 2018, 1 p.m.

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\xa0- Sponsor

Sanity.io\xa0is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing\xa0npm i -g @sanity/cli && sanity init\xa0in your command line. Get an awesome supercharged free developer plan on\xa0sanity.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 \u2192\xa0https://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\u2019t 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\u2019s no fun, but way better than it\u2019s ever been

40:22 - UX Design & Animation

• Don\u2019t use animations when not necessary

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

• Particles.js

• Patagonia\u2019s 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

\xd7\xd7\xd7 SIIIIICK \xd7\xd7\xd7 PIIIICKS \xd7\xd7\xd7

• Scott:\xa0Louis Cole
• Wes:\xa0r/posthardcore Spotify Playlist

Shameless Plugs

• Scott\u2019s React Testing Course
• Wes\u2019 Courses

Tweet us your tasty treats!

• Scott\u2019s Instagram
• LevelUpTutorials Instagram
• Wes\u2019 Instagram
• Wes\u2019 Twitter
• Wes\u2019 Facebook
• Scott\u2019s Twitter
• Make sure to include\xa0@SyntaxFM\xa0in your tweets