Cheat Sheets for UX
You’re going to want to bookmark these!
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!
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.
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
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.
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/
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.
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/
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.
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
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.
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/
If I listed all the cheat sheets I have bookmarked, I’d never finish this article 😅. Have a look at the honorable mentions below.
Comments are closed.