Let us start out with something that will be quite easy to remember:
Not all elements that you put down on a page have the same importance. And the importance that they have is always determined by how much information they carry.
01
Text is always number one in any graphic design project since it is the primary carrier of information.
02
Visuals are number two in any graphic design project since they are the secondary carriers of information.
03
Backgrounds and Shapes are helper elements in any graphic design project since they do not carry any information themselves. They only help the first two, which makes them number 3.
Assemble
hierarchy of components
KEEP IT SIMPLE!
"Less is More." This is something that was said by the famous modernist architect Mies van der Rohe, who was not only an architect but also a spectacular furniture designer.
What did van der Rohe mean by this?
You should use only the things that add to your design, without which the existential purpose of your object, or in the case of graphic design, the purpose of your informational content would be incomplete. Everything that is unneeded will take away, rather than add to your work.
So - always ask yourself, with every action that you take, "is this needed?"
In most cases your answer will be "no". Did that frame that you just put around your image add to it? Did it strengthen its message? Did that color that you just put behind something increase its impact? Is it really necessary to make that piece of text bigger? Or bolder? Was it necessary to use that animation? That effect? Put a shadow behind that box? Probably not... Always, always ask these questions. In almost all cases your design will be greatly enhanced by what you didn't put on it, rather than by what you did.
Mies van der Rohe, Barcelona Chair, 1929.
CONSISTENCY
-
Use the same elements: Fonts, colors, similar visual material, similar shapes.
-
It is a mistake to think that you have to always find different things to put together in order to be considered creative.
-
The idea is to show your creativity through the many ways in which you can combine the same elements differently.
-
-
-
And possibly the most important of these elements is alignment, which is the heading that follows this one.​
Design Tip: Align rectangular things from the top, circular things from the middle. In a circular shape the top and the bottom are not strong enough to give you an alignment, which is why we use the middle.
-
Align! Align Align!
-
Create vertical rules that are based upon your header elements
-
Align things on your pages to these.
-
Achieve alignment across your entire site through this simple trick.
-
-
Things that belong together should be close to each other. And things that belong together should have a "boss", which in the case of text is a headline, and also "boss assistants", which for text are subheads. With visuals, again it will hugely help if some things are more prominent than others - in other words are larger, provide more focus.
-
Do not to place pictures and texts that belong together too far apart.
-
Make correct paragraph breaks; in other words do not make paragraph breaks by pressing "enter" twice on key board since this will result in a very big break between the sentences, disrupting your cluster.
HIERARCHY
-
Give the "boss" the best place.
-
You can think about this as a "real life" situation: Would the boss of a company sit in the corner of the room, or the middle? Would his or her employees have their backs turned to them? No, right?
-
The boss is usually at the center of things, and in the case of design elements is usually also bigger.
-
-
-
Pictures: the rule that the boss is in the best place holds. When we have three pictures, and one is the boss, it will be smart to place that one in the center and group the others around it. And again, in the case of pictures too, the boss picture will benefit from being bigger.
-
Leave space between clusters.
-
Empty areas are as important as full ones. In Graphic Design they are called "negative space" and they are considered to be essential for the viewer's eye to distinguish between one group of information and the other.
-
If we do not have empty areas between content groups we become confused and very quickly abandon reading or viewing.
-
Challenge: On a website it will be difficult to make horizontal space since the format is a long and narrow one that the viewer scrolls down.
-
This will lengthen the page and create unwanted scrolling.
-
We can resolve this issue by using separators that allow us to place things directly below one another while still giving clear demarcations of content. You can use
-
Boxes: This is what I have been doing on almost all pages of this website. If you go to most pages other than the one that you are on now, you will see that I have placed content inside "boxes".
-
These can be strips
-
or container boxes
-
-
Strokes: I have purposely used these on this page that you are on right now in order to show you how you can place different types of informational content very close to the grouping above or below it and still allow the eye to see the distinction between one batch and another if you place a stroke between the two groupings.
-
Since the introduction "keep it simple" stands apart from the rest which is essentially just a listing of things you need to keep in mind, I have also created a distinction between that and all that follows it by increasing the thickness of the stroke as well as its width which separates it even more strongly.
-
Do not go for half measures when you are putting together visual material. Your actions should be deliberate and strong so that there is no confusion of hierarchy:
-
Align things exactly.
-
But when you want to place something in an unaligned way (it can happen), then make sure it is visibly unaligned, and not just a bit unaligned.
-
-
Make things either exactly the same size, or noticeably different sizes.
-
This is especially important for texts. A difference of one point between two pieces of texts is ambiguous - we may not consciously notice it but it is still a subliminally confusing ambiguity. If you want to make texts in different sizes then make sure that the difference is clearly recognizable.
-
Same for visuals. Make things either exactly the same size (same height, same width) or very different sizes. Different or identical enough to be noticeable right away.
-
-
Place clusters deliberately apart.