Do you know what's the easiest way to tell good design from bad one? 1
It's through consistency. 2
Looking at the website and noticing how consistent the layout, typography, colors and all of that is. 3
Inconsistency is very easy to tell. 4
We are wired to recognize patterns in everything we look at. And noticing breaks in those patterns is 5
very easy for us to tell. 6
Breaking the pattern is sort of like a glitch in the Matrix. And sometimes it's hard to tell exactly 7
what's breaking the pattern, yet it's always easily noticeable. 8
Often it's better to use poor design and be consistent with it, than have nice design and be not consistent. 9
Consistency isn't really a trick but more like a design principle. 10
So I'm cheating here a little bit by including this as one of the design tricks. Consistency applies to 11
everything. 12
But I've broken it down in several categories for easier understanding. 13
First and most obvious one is layout consistency. 14
This is exactly the purpose of the grid. The grid is a great way to create consistency in layout. When 15
alignment repeats on the page users notice it and start expecting things to be laid out in a certain 16
way. 17
When this expectation is met, the users have a joyful experience of the site and they trust the site 18
a bit more. 19
One way I see web designers often break layout consistency is by mixing different text alignments together. 20
All three elements on this frame are aligned in the center with each other. Or at least their containing 21
boxes are. 22
But paragraph text is left aligned. 23
This is breaking the layout consistency and making the design look sloppy. 24
We have to choose one style of alignment and stick with it. 25
Either we center align everything. Or left-aligned them. Either of these options are fine, as long as we 26
stick with one alignment. 27
This is an evident example. 28
More subtle and non-evident 29
example is when we have inconsistency between different sections of the page. 30
For instance, the middle section has the content left-aligned, but other sections have its center aligned. 31
This would be completely fine if this was a different type of text 32
A secondary headline, or other. But its the same headline, but with a different alignment. 33
This is quite subtle, as it spread between different sections. As we scroll through a page we only see 34
one section at a time, so such a subtle inconsistency isn't too big of a crime. 35
But it's a good habit, to stick to one style across different sections and even across different pages 36
of the website. 37
Creating consistency in typography is quite simple. 38
We just need to create specific font styles for each occasion and then stick with it. 39
A website has several different types of text. 40
There are main headlines. 41
Those are usually the biggest size. 42
Then you have smaller level headlines, like titles and subtitles. 43
You have obviously the paragraph text and you have buttons. 44
You can have more. For example, tiny captions and footnote text, menu links and so on. 45
The key is to define a single style for each occasion and stick with it. 46
For example, having one paragraph style and keep with it across sections, pages and everywhere on the 47
site. In Figma and in Webflow 48
this text styling is actually one of the features. So we will practice creating text styles in our real projects. 49
Colour consistency almost doesn't need any explanation. 50
It is the most evident and simplest to see. Most of the time we are working with the existing brand and 51
a logo. 52
This means colors have been defined for the company. And these colors have to be consistent not just within 53
the website but across 54
it's all a representation. Flyers, business cars, PDF's, front office and so on. 55
In times where we don't have defined brand colours, then we do this ourselves. 56
We usually choose one or two primary colors, like the blue and green in this example. And the rest of 57
the colors are monotone blacks, greys and whites. 58
One way we might break consistency is by mixing different shapes on the page. On a page like this that 59
has this smooth, rounded wavy edge. 60
Introducing an angled shape like this would break the consistency. Making it look very odd. But keeping 61
with the same smooth shapes, would create the consistency across the page. 62
It doesn't have to be same exact shape. As long as the shape has similar characteristics. 63
This inconsistency with shapes can actually happen in very unexpected places. 64
For example, when we use cutouts like this. They create smooth edges on the page. 65
They are not evident, but they are there. And when we place a none-cutout, regular boxed photo on 66
the next section. We are introducing a new conflicting shape. All of a sudden from smooth, natural edges, it went 67
to very strict, straight, hard lines. 68
And it even created this new shape that wasn't there before. 69
Just like I mentioned in optical illusion lesson. Placing objects and shapes on a black canvas, will 70
affect that canvas and create new shapes. 71
This is especially true to straight lines and rectangles. But if we use cutout again, then those hard 72
lines and foreign shapes disappear and the section becomes consistent with the above, hero section. 73
When it comes to photos, 74
we have to be consistent with the style of photos as well. By style 75
I mean sort of a photographic style. Like colors, filters, the way models look and so on. 76
In this example, for instance, I didn't do a good job at choosing same style photos. 77
The left one has more polished look. Whereas the second is more natural. 78
The camera works seems quite different too. 79
I'm not a photographer, but I can notice that this is not taken in the same studio, nor by same photographer. 80
Most of these photos will have very different style between them. Because they are taken by different 81
photographers and in different scenarios. 82
It can be quite tricky to maintain consistency, but there is a way. One way is to pick images from the 83
same contributor. 84
I've mentioned this before many stock sites will have this option - to see photos from the same contributor. 85
Meaning from the same photo studio or photographer. And if we pick photos from the same contributor then 86
we will more or less get the same results. Because the same photographer will have sort of same style, 87
same camera and same habits of taking photos. Although not 100% stays the same because sometimes 88
they will have just different shoots, and different ways of shooting in different scenarios. So, also 89
their styles can change from year to year. 90
This is a very simple and excellent way to make your design consistent and show that it's a high quality 91
design. 92
I know this sounds like an insane detail to pay attention to, but when it comes to design, devil is in 93
details. Attention to these tiny details is what differentiates a mediocre designer from a top-notch one. 94
One final place I want to discuss consistency is icons and illustrations. Web is full of icons and illustrations. 95
They are an excellent way to show different actions, demonstrate some complicated concept or simply to 96
give a design a unique look. Just like photography, combining icons with different styles would create 97
a very inconsistent and unpolished look. Not fun! 98
As a matter of fact, icons and illustrations are even more unforgiving than regular photos. 99
In this example, the third icon is a different style than first two. 100
It's the same color palette, similar rounded shapes, but it still looks out of place. 101
The difference is only in one small detail in fact. 102
First two icons have outline stroke on them. 103
It's that black line that outlines each object in the drawing. 104
But third one doesn't have it. 105
And it creates a completely different look. 106
In this example, all three icons are from the same pack and have the same exact style. Although the same 107
size, the first two have thinner lines, when the last one is a little thicker. 108
Third icon is poking my eyes. A non-designer client won't notice exactly what's wrong with it. 109
They might not be able to put a finger on it, but they will pick up such inconsistencies and will not 110
feel like the design is very good. To avoid such inconsistencies in icons and illustrations, 111
just like with stock photos, 112
pick them from the same source. 113
My favorite place to get icons is Flaticon.com. 114
Icons here and elsewhere are usually organized by packs. All icons within the same pack 115
are going to have the same style, sizes, thickness of lines and all that. 116
When picking icons for your projects look for packs rather than individual icons from different packs. 117
This will give you a look that is consistent and polished. And will have you designing like a pro.