Over the years, I’ve encountered a number of cheat sheets that have helped me with design as a Full Stack developer and a UX design student.
These are my top 5, but if you’re looking for more handy bookmarks, such as a list of test credit card numbers to test a payment system’s frontend, a regex validator, or a pixel-to-em converter, take a look at 15 Handy Bookmarks to Help You With Front-end Web Development.
Let’s get started!
1. Laws of UX
Adhering to these laws helps you to understand the effects that certain design aspects have on the user.
Laws of UX is a collection of UX best practices for you to consider when creating designs. It also comes in the form of a book and a card deck.
How I use this...
I reference this site frequently to pick and choose which laws I want to focus on when designing. Adhering to these laws helps you to understand the effects that certain design aspects have on the user.
Explore the site and think about which laws you’re already adhering to and which laws are new to you.
Visit https://lawsofux.com
2. Deceptive Patterns
Just because another (more popular) company is doing it doesn’t mean it’s ok.
Deceptive Patterns (formally darkpatterns.org) is a reference site that lists deceptive or manipulative UX patterns.
How I use this...
This is a great site to check what not to do when creating designs. It’s also a good resource to point people to when you want to show them why they shouldn’t do something, especially when big names are doing it. Just because another (more popular) company is doing it doesn’t mean it’s ok. It doesn’t mean a smaller company wouldn’t take a bigger hit when it comes to users losing trust in their products or brand.
Check out these deceptive patterns to make sure you’re not tricking your users.
Visit https://www.deceptive.design/
3. Nielsen’s 10 Usability Heuristics
You can use these heuristics whenever you need to conduct a Heuristic Evaluation or to use them as a rule of thumb when creating user-friendly designs.
The 10 Usability Heuristics of User Interface Design are principles created by Jakob Nielsen to help create intuitive and user-friendly designs. They were developed after years of experience in the field of human-computer interaction and are a reliable set of guidelines to follow.
How I use this...
I use this site to help me validate the usability of my designs. You can use these heuristics whenever you need to conduct a Heuristic Evaluation or to use them as a rule of thumb when creating user-friendly designs.
View the 10 usability heuristics. Which do you already incorporate in your designs? Which ones can you use to make your current designs better?
Visit https://www.nngroup.com/articles/ten-usability-heuristics/
4. W3 School’s CSS Selectors Reference
This site has been my companion for decades when I need a quick reference about anything regarding CSS and HTML.
W3 School’s CSS Selectors Reference is my go-to site to remind me of all the CSS selectors and pseudo selectors.
How I use this...
W3 Schools is…so old school. This site has been my companion for decades when I need a quick reference about anything regarding CSS and HTML. I’ve bookmarked the CSS Selector Reference page because I often forget the exact syntax for excluding a class name or selecting an attribute whose value begins with “something”.
Examples:
Excluding a class with the :not selector:
:not(p.foo) { }
// Selects every element
// that is not a <p> element
// with the class "foo"
Selecting an element with a data attribute whose value starts with animation-:
[data-query^="animation-"] { }
// Selects every element
// with a data-query attribute
// whose value starts with "animation-"
Bookmark this page and go back to review it every now and then. You’ll find some you haven’t used before.
Visit https://www.w3schools.com/cssref/css_selectors.php
5. A Visual Type Scale
Typography isn’t my strong suit, and using a site like this helps to take a good chunk of the math out of finding harmony between the varying font sizes of my designs.
A Visual Type Scale is a super useful site inspired by Tim Brown’s Modular Scale, that allows you to create a type scale based on music scales. You can add your settings and get a visual of your typography before adding the specs to your design system.
How I use this...
A Visual Type Scale is a tremendous help when figuring out the typography for my projects. Typography isn’t my strong suit, and using a site like this helps to take a good chunk of the math out of finding harmony between the varying font sizes of my designs.
Check out the site if you haven’t already and let me know if it’s as life-changing for you as it was for me.
Visit https://typescale.com/
Conclusion: But wait, there’s more!
If I listed all the cheat sheets I have bookmarked, I’d never finish this article 😅. Have a look at the honorable mentions below.
Additional Cheat Sheets
Speaking of Deceptive Patterns, learn about what they are and how you can regain your users’ trust by applying the Peek-End Rule in your designs.
Read How to Build Long-Term User Trust: Avoid Deceptive UX and Lead Manipulation.
Hey, I’m Tarise Singletary, but you can call me Nikki. With 10+ years of experience in Full Stack Development and a Master's in UX Design, I offer insights into web development, design, and UX.
Follow me for more related content at https://blog.heynikki.dev/subscribe.