🧗 How to catch edge cases in your designs (#53)

August 31, 2021

Happy Tuesday!

I'll be sending out more job opportunities on Thursday! If your company is hiring (and you think it's a great company that you'd tell your friends to work at), fill out this form!


Yesterday, @joeyabanks tweeted:

Engineers are really incredible at being able to quickly spot all of the edge cases within a design that may have been overlooked.

Since design systems work requires a lot of collaboration between designers and developers, I came up with a set of cases that designers can think through before sharing their designs.

  • All potential color variants
  • All potential sized variants
  • Accessible contrast for colors
  • Accessible text sizes
  • Responsive designs across all required breakpoints
  • Focus states
  • Hover states
  • Active states
  • Representations of each theme or mode (if applicable)
  • What happens in different app states? (ex: is user logged in)
  • What happens if something goes wrong?
  • For how long should something be visible?
  • What are the desired animations, if any?
  • What are the max/min rules (and what happens beyond them)
  • Icon and image assets

What do you think? Did I miss anything? Reply to this email and let me know!


If you like this newsletter it would really help me if you shared it with your friends. Tweet about it, post on LinkedIn, and share in slack channels. Building this community can lead all of us to more job opportunities, guest posts, and connections.

Talk soon,

Mae

Do you want design systems tips and tricks sent to your inbox?