ui-ux-design-cheatsheet


Banner

UI / UX Design Cheatsheet

Tips, resources and guidance to help you develop application interfaces.
Explore the docs »

Romanian · Report a Problem · Contribute · Live Page

Table of Contents
  1. About The Project
  2. Basic Design Principles
  3. General Tips
  4. Resources

About The Project

This repository was created with the purpose of assisting you with either tips or resources to create fantastic UIs.

What to expect

This repository contains information and resources to help you create good UIs for your projects.

As I do not have any experience with applications outside of the web, I recommend you to stick to general tips and guidance and apply them to your projects in the way you find suitable.

For example, for the UI of a desktop application, if you’d like to add an icon to a button, I suppose you’d save the image of the icon, add it to your project folder and use some kind of class methods to display that icon within the button.

You can use the Table of Contents to navigate to each section of interest.

Feel free to contribute with anything you think it’s missing to help other developers or students.

(back to top)

Basic Design Principles

Contrast

Defined as the difference between elements within a design that makes them stand out from each other, contrast plays an important role in the visibility of each element.

You should (almost) never put a blue text on a slightly lighter blue background. It affects the text’s readability.

Of course, you could bring the color of text closer to the background color to suggest that the text is secondary, informational and doesn’t play a very important role in transmitting a message, but even it this situation, it should still be visible and readable for the user.

Proportion

Refers to the size of the elements in relation to each other. Proportion and scale are important in hierarchy as well, as larger elements tend to appear more important.

Use proportion and scale in your advantage and define important elements, such as CTAs (Call to Actions) using scale, color, or shape.

Hierarchy

We place elements accordingly based on levels of importance. You should also provide a visual solutions to this. A simple example would be making the title large (24px) in contrast to the paragraph of text (12px).

White-Space

White-space is an important element in most designs. We can define empty spaces on a page on each side, left and right, and keep all the content in the center. For a blog post, this would allow the user to focus on the text, the most important element of an article, and it could be a solution to shorter lines of text, which are easier to follow.

For example, it’s easier to read lines that are 8-12 words in length. We can easily follow to the next line and keep track of where we are in the article. It’s harder to read text which has lines that are, for example, 24-28 words in length.

White space can also be a good separator between elements or clusters of elements (see Unity).

Unity

Defining clusters of elements that are related to each other offers a solid structure to your interface. For example, you should always stick all important elements related to navigation to the navbar / header menu, or, usually, you would keep the Login / Sign Up buttons together, not spread apart from each other.

__

These are 5 principles which I think you can easily apply to your projects for fast and clear improvements to the UI. There are 12 principles in total, and if you’d like to learn more about them, I strongly recommend to research the subject more in your free time.

All of these principles are:

  1. Contrast
  2. Balance
  3. Emphasis
  4. Proportion
  5. Hierarchy
  6. Repetition
  7. Rhythm
  8. Pattern
  9. White space
  10. Movement
  11. Variety
  12. Unity

(back to top)

General Tips

Keep things simple and consistent

This is one of the most important tip I can provide. Be consistent throughout your entire application. This refers to colors, fonts, sizes, shapes and more.

Create a default look and feel for your application

Font recommendation

I suggest exploring Google Fonts and finding a font that fits your needs. It offers users the possibility of using imports in stylesheets or link elements to add to the head of your HTML document. You can also download an entire family or only specific font weights. Make sure to check the license before you use the font.

There are other websites to help you find good fonts, but I’d recommend sticking to Google Fonts, as they provide very good solutions for fast implementation of fonts in your projects.

I recommend implementing only 2-3 weights of a font family for your project. Stick to Regular and Bold / Extra-Bold / Black.

I also recommend, as mentioned before, to maintain consistency throughout your project. Use the same font size for paragraphs, the same font size for buttons (also the same heights / colors, depending of their use-case)

__

Personal font preferences

These choices are subjective and are fonts which I am familiar with and have used throughout various web projects. Consider taking this with a grain of salt.

These are a handful of fonts to use in your projects. Feel free to explore more. All of these are sans-serif fonts. I strongly recommend not opting for serif fonts, unless you have a specific reason to do so.

Either way, a good choice of serif fonts:

Visuals

Humans are lazy. All of us hate thinking too much when we try to achieve a simple thing. As a developer, you should ensure that your elements are easily recognizable. Offer users ways to understand instantly what they see.

You can easily achieve this with icons. Add icons to your buttons to send a better message across. Even a small arrow makes the difference. Proceed with care, as over-using icons can also break your UI. Find balance and be consistent.

If you know what you’re doing and you planned ahead, make sure to use illustrations or other graphic elements. There are various platforms which offer free or cheap illustrations which can improve your landing or send a stronger message to the user. They’re also pretty cool.

“This UI looks great” - Me, to myself, or you, to yourself

Throughout experimenting with various designs and applications, I always get used to my UI. It looks good, but is it usable? Sometimes we need to let others test out what we build and *gasp*, they’ll tell us it’s really bad. I tell friends or family to look over what I’ve done. Sometimes I provide them information, sometimes I just let them explore and see what they come up with. Many times I manage to observe thinks I didn’t even think about.

The best tester to your application is somebody who has never seen your application before. Ask your friends for feedback on your design. If possible, let them test out your application, see how’s the UX for them. Tell them to break it as well, maybe you have some security issues or your code simply doesn’t work the way you want it to.

Provide feedback to the user

You might think it makes absolute sense for the page of articles of a user to be completely empty if they haven’t posted any articles, right? No, it shouldn’t. Make sure to add placeholder text to offer additional information as to what is going on. The page is empty? Explain why it’s empty.

No search results? “Uh oh, couldn’t find anything for How to become a god-like web developer and earn $160k / year”

__

Sometimes the user just wants all the 905 records of available Pokémon, in one single page. Such a request is quite heavy and it will take a while until the client receives all of this data.

Another form of feedback is when the user is waiting to receive or see something. If you have a very heavy operation in your application which takes a long time to load or execute, make sure to provide the user a feedback to know that the application didn’t freeze or break. A loading icon should do the job.

Anticipate mistakes

Users are almost all the time humans. And humans make mistakes.

Make sure to prevent these mistakes before they happen. Disable the submit button while the user completes the form. As soon as they’re done, enable it.

But somtimes we simply cannot prevent all mistakes. Atleast anticipate them and provide the user feedback to know what’s gone wrong.

If they want to make their password verysecurepassword123, tell them in an easy to understand way that you have configured the form validation to accept only passwords which are 12 characters long, must contain atleast a number, an uppercase character and a symbol.

Display a container below the password field as an error which mentions all of the above.

(back to top)

Resources

Fonts

Most of these websites provide fonts for free, but some of them offer limited weights of the family or a large majority are paid. I will let you explore, but will leave a mention to each website if the fonts are paid.

Icons

There are various ways of implementing all of these libraries of fonts in your projects. Make sure to take a look at the documentation of the library you’d like to use.

This site is open source. Improve this page.