Building and maintaining a consistent experience in your designs, products, and systems can have great consequences for your customers and their experience.
Customers become accustomed to specific interface objects and even the location of those objects on a screen. This makes the experience familiar, and your product becomes more straightforward to use.
This includes establishing the colors, typefaces, and tone of a product that can be used across many types of layouts and interfaces. Design consistency is what ties UI elements together with distinguishable and predictable actions, which is key for great product experience and an important thing to consider for UX designers.
As you establish a mood and tone for your designs, you’ll want them to feel consistent as well. A continuation from one screen or product to the next, as if one voice is talking to your customer. If I click on a link on your website and the next page feels radically different, I may think that hyperlink took me to another website and not another page of the same site. If your homepage is airy with a lot of white space, your product page shouldn’t be dense and content-heavy with little breathing room. As your audience discovers new elements, they should instantly know that they are still using your product.
A rule of thumb is to use two or three styles of type across an entire product, like a website or app. Using more than that can make a product feel unstructured or busy, and can be distracting. For colors, a great starting place is one primary color, one secondary color, and a few tones of those colors, plus black and white. Using more colors in complex systems can work successfully, but it becomes more difficult with each addition.
One of the easiest ways to make a document or interface look and feel well-designed is consistency in where objects sit in space.
Say your app screen has a title and it is 100px from the top of the frame or screen. You want all the other app screens with similar titles to have those titles in the same place.
Consider the left side, or left vertical margin, of a website, poster, app screen, infographic, etc., containing a logo, an image, a header, and some body text. Aligning these elements to each other will make it easier for the eye to move down the page, but also makes the layout of this content seem considered and intentional.
—