by Anna 4erepawko Mészáros

Fundamental design principles for non-designers

1*FOsR41GXae-KPlvQM1vWpg

This one is for all the content creators out there who can’t afford to pay a professional designer, as well as for non-designers on a team where designers are always too busy to help. If you can follow these simple steps, I guarantee your designs will look better.

This list was born out of years of observing my non-designer friends, family and colleagues struggle with designing things they need in their everyday life. Personal newsletters, CVs and portfolios, pictures for posts on Facebook or Instagram, video thumbnails for YouTube and so on.

All of these people came to me for help and advice on how to make things look better. I’m a firm believer in the whole “teach a person to fish” idea, so rather than designing things FOR them, I tried to give them valuable advice that could help with similar issues in the future.

As time went on, I realised I’ve been giving people all the same tips over and over again. I have worded them differently each time, but all of my advice I can distill down to these four principles.

I am aware that there are thousands of lists just like this one out there, but I find these lists to be too excessive. You can’t really consistently follow a list of 25 “simple” (nothing containing 25 parts can be truly “simple”) steps as a non-designer. And you don’t have to.

Will this help you create shiny beautiful designs? No. Will this help you create great, clear and comprehensible designs that everyone can easily understand and interact with? Absolutely. So, without further ado, I present to you:

4 Fundamental Design Principles Anyone Can Follow To Achieve Great Results

Contrast

Make sure there is enough contrast between all elements.

Why? Because things that are slightly different, but not different enough, create a kind of Uncanny Valley. They feel eerie and repulsive to a human eye, and/or are difficult to comprehend. Now we don’t want that in our designs, do we?

Elements of your design should be either exactly the same, or significantly different.

Issues with contrast mostly manifest themselves in 4 different ways:

1. Colour: use dark on light colours and vice versa.

Example: Never use combinations like grey on a slightly darker grey or light pink on light blue — they are extremely difficult to read/interact with.

1*1c9lIQ_y0Cz82vs4uF05ZA

2. Size: only put elements next to each other that are either exactly the same size, or a considerably different size.

Example: Don’t put 32pt and 36pt text lines next to each other. 18pt and 36pt, on the other hand, will work great together.

1*Vy_CjoiJ4s3_U3jNW9JZlA

3. Weight: same as with Size, only put elements next to each other that are either exactly the same weight, or a considerably different weight.

Example: Don’t put “Bold” and “Black” weights of the same typeface next to each other — because they look too similar. “Light” and “Bold” weights, on the other hand, will work great together.

1*WibV_UOHFJxjD1EUbs2sxQ

4. Style: don’t put one italic type next to another italic type, or one serif typeface next to another serif typeface. Combine things that are different.

Example: Don’t put “Times New Roman” and “Georgia” next to each other — they look too similar. Combine fonts that have considerably different styles.

1*kYKhe2rzZkyB8Oi84a6euQ

Consistency

Make sure similar elements appear in similar ways.

Why? First of all, by keeping things consistent (and, therefore, simple), you allow people to focus their attention on important aspects of your design rather than being distracted by things changing all the time.

Second, consistency increases trust and makes things look actually designed, rather than just quickly thrown together.

Things to stick to once you have selected them:

  • Typeface/font
  • Colour palette/shade of colour
  • Grid
  • Alignment
  • Style of decorative elements

And so on...

1*W843TWXVVLson0ME-6crWQ
Placeholder text courtesy of Batman Ipsum

When you are working on many different pieces that appear next to each other (for example, video thumbnails for your YouTube channel, or covers for your Medium articles), choose one overall style for all of them and stick to it as well.

Occam’s Razor

aka Reduce Visual Noise

The fewer the number of elements you use in your design, the better.

Why? It’s hard for the human brain to process information and make decisions with an overload of input. Use as few decorative elements (typefaces, colours, shadows, frames, strokes, icons, patterns and so on) as possible.

Apply a design version of Occam’s Razor to everything:

If something can be achieved with just 2 elements, don’t use 3. If something can be achieved with 10 elements, don’t use 20. You get it.

1*Bjh-mMQ5VQ99TvHPyCCmNQ
Placeholder text courtesy of Batman Ipsum

If you don’t like old English scholastic philosophers and prefer things you can see on Netflix, sure: be the Marie Kondo of your own designs. Whatever doesn’t spark joy (or isn’t a useful part of a design), has to go.

Space

The way things are positioned sends a meta-level message about their meaning.

Why is this important? Because minding how you position things and how much space you add around them helps reduce the complexity of a design, and, therefore, makes it both more pleasing to look at AND easier to interact with.

To use space in your design to convey meaning mind these 3 things:

1. Proximity = Relatedness

Things that are closer to each other than to the other elements, are perceived as being related more to each other than to the other elements.

This one is the most important because I feel like it’s being ignored too often (even by some people claiming to be professional designers, not to name any names).

It can be applied in many different ways, for example:

  • There should be more space between the lines than between each word in a line — and, similarly, more space between different paragraphs than between the lines inside a paragraph.
1*HQyTLidmveDLqN7su2evmg
  • Elements of a design should have less space between each other than between those elements and the edges of the composition.
1*Wb5mwX_UEIn0Wwsp7ObCNQ
  • Labels and supporting information should be positioned near the elements that they describe/relate to.
1*zNbzNX9H9GBkfNz2EO5qww

2. Negative Space

In combination with Occam’s Razor, give your designs as much negative space as you possibly can, to declutter them and make their meaning more obvious.

Putting too many elements into a limited amount of space is like trying to listen to three different songs at once. It’s hard to understand what is being said.

1*mNNmcsVmOooLRgtF3CJw1g
Look at Apple’s website. One can very clearly understand what is being said (or, rather, sold).

3. Importance and order

This one is extremely common sense but I feel like I still have to mention it here.

Things that matter most, you put first, and/or make them take up the most amount of space. Use sequences of things to convey order. Et cetera. You can definitely figure out the rest.

The End

Congrats! If you have followed all these steps while making whatever it is you are making, it most likely looks very good by the industry standards.

For everything else, there is always a designer.

***

My name is Mészáros Anna, I’m a graphic/UI designer turned UX/UI designer with an academic background in philosophy and interest in all things design ethics. I’d love to connect with more like-minded individuals, so feel free to drop me a message and follow me on either Medium or Twitter.