This story is less around plan patterns and design, and more around foundational plan standards, which are regularly overlooked. Here could be a list of standards to assist to make strides your plan .

1. Typography

It would be good to start with the statement that you shouldn’t use more than 2 fonts, as well as their multiple styles, in one project, but I believe that this has become too obvious, and I hope that everyone follows this principle anyways. Let’s talk about more specific matters.

Uppercase Tracking.

Each time you use text that consists entirely of capital letters, don’t forget to set up letter spacing. This will prevent characters from sticking to one another and will make the text more readable.

Uppercase tracking example

Light, Thin and Hair Font Styles.

You need to be careful with these styles. Light can be used, but it depends on the font. If you are making a product that users will eventually see on screens, it is better to forget about Thin and Hair styles.They are extremely hard to read and can create the effect of broken half-pixels on some screens.

Light, thin and hair font styles Example

Headings and Main Text Font Sizes.

Let’s talk about web typography. There are six levels of headings (h1 — h6). First you should make sure you have no more than four in your project and control their logic and consistency. The largest heading (may occur in the first block of the main page) of a website or a landing page may be as large as you wish: current trends encourage expressive typography. However, make sure not to go too far with the rest of your headings, because too large text is as difficult to read as a too small. Now for the main text. A browser default settings (let’s use Google Chrome as reference) will display every text in 16px size. This size is quite comfortable to read, but I tend to use not less than 17px for the main text and 14px for additional text. Reserve 12px as the least possible size while lesser sizes become barely readable due to eyesight issues or bad monitors. Remember to avoid close range sizes. Don’t use 16px and 17px in the same segments: this brings confusion and visual untidiness to the appearance of the product and is just entirely unreasonable.

Line Height.

You could rarely leave line height setting in auto value. Usually you’d have to increase it a little to improve readability. This is especially true for large text blocks: blogs, articles and info blocks of websites or mobile apps. The same approach is justified for headings: make sure that letter’s tails don’t touch each other.

Line height example

Text and Headings Hierarchy.

Bold text should be used to highlight important parts of a text. This includes headings, links and buttons and sometimes emphasized segments of the text. If bold style is used for the entire text, it will become unclear where to look, and what is more important. Put the emphasis correctly: everything may not be equally important.

Text and heading hierarchy example

Text Contrast.

Pay special attention to the color of text in your design. It should have enough contrast so the text is readable on any type of monitor. This is especially important for placeholders in input fields where light grey is often used.

Text contrast example

2. Spacing and Margins.

Negative space (the “air” between elements ) is essential for a good design. Space helps to clarify relations between elements, provides rhythm and balance.

Get Rid of Extra Frames and Lines.

The easiest way to separate one semantic block from another is to use a frame or a 1px line. This is not always the best approach though. I’ve seen design pieces where there was a box inside a box and with several more boxes inside, each box had it’s own 1px frame. In such situations, you need to stop and think: is this really appropriate and necessary? Today’s interfaces tend to have cards everywhere: card at an online store, card in an animal care application, card of a restaurant which delivers your favourite pizza in a delivery app. Sometimes it’s reasonable to use a 1px frame, but there are other ways of distinguishing such elements, like shadows or spacing. The main thing is that margins between cards should be greater than paddings inside them. Disposal of frames on any element could save space for content as long as you won’t need extra space for inner margins. After all, it is the content that is the most important part of any product, so do not unjustifiably cut off the space reserved for it.

Extra borders example

What Belongs Where?

Margins help visually determine whether one element belongs to another. Let’s consider the layout of an article on a news site. Let’s say it consists of one picture, a heading, 3–4 lines of preview text and the date of publishing. The heading should “marry” the text and make up a solid element. The date should have a slightly larger margin than the margin between the heading and text. Finally, the picture should be moved as far from the heading-text unit as the date is, or even farther. Sounds confusing? Better look at the related picture below.

Elements re;ations example

Less is More.

There’s always a client or a manager who demands that all information has to be fitted in one block or a one mobile app screen. So the title, and the phone, and the entire menu, and the special offer will fit. And don’t forget a big-big logo. I’m not much of a negotiator and can’t come up with an easy trick how to make them change their mind. But at least you could say this: the less information a user receives at once, the easier for him it would be to take action (for example, make a phone call). Gradual information intake ensures easier and more pleasing customer experience. A customer should never have a hard time deciphering your interface layout — no one ever wants that. And a pile of tightly grouped elements is unaesthetic and in the end, ugly.

Uneven Screen Edge Margins.

If you work on a poster, a banner or our favourite card, then pay attention to margins from the edges. If you lay the content out in a classic way — from top left to bottom right corner — make the top margin a little bigger than the left one. This looks more appealing than even margins on all sides.

Screen margins example

3. Color and Images.

Images, icons and backgrounds set the product mood. Images should demonstrate exactly what a company, an app or a website offers.

Some Logo Thoughts.

I don’t do logos too often, I’ve made like 20 of them during my career, and here is what I’ve learned: a good logo is very difficult to make. However, a designer can surely create a decent logo, just following basic rules and principles. For example, careful color selection. Once I saw a fishing store called “VIP catch” with a purple logo. The combination of purple and the word “VIP” doesn’t really create an association with fishing. In general, you can use any color for any industry, unless there is a clear disconnect such as the “XXX VIP Catch” purple scenario. Another logo tip: if you are having a hard time putting an image (a symbol) to a logo — just don’t do it. Try to make it a font-only logo, do less and do better. Spare this world another legal office with a seal or scales on their logo.


The shadow under an object should never be black. It will always be a darker shade of the surface on which it is cast. Objects usually have several shadows: one is small and bright, directly below it (if it is standing or lying on something), and the second one is more blurry and transparent. Avoid “dirty”, unnatural shadows in your project.

Shadows example

Icons and Images.

Anything that can be vector should be vector. All pictograms, arrows and logos should be given to developers in SVG format (PDF for iOS development). PNG icons have blurry edges and look bad, especially on retina displays. Besides, vector images occupy less memory.

More About Icons.

If you are working on a set of icons for a website or an app, make sure all of them belong to one “Family”. That means equal stroke width, equal border radius. Check to ensure each icon fits into same size square and has equal mass. If some icons have circles in it, make sure these circles have the same diameter. Icons should have a consistent style.

Icons example

4. Common Sense.

There are a few more things I’d like to tell about, but I didn’t figure out how to categorize them, so I put them in this section.

Avoid Weird Layouts.

Let’s go back to the news preview example we studied in the Space and Margins section. If we arrange the elements (image, title, text and date) in an unconventional order, it may become confusing. Try sticking to familiar interface layouts. Familiar does not necessarily mean boring, you could always display creativity in other parts of the project. Avoid experimental positioning of elements on a screen / page / card without good reason. Otherwise the user may get confused and leave your site or delete the application. Remember that a designer and an artist are different professions. In design we create a product for people, which means your personal creative impulses can be applied only where it will not interfere with the user experience.