Take a look at this hero section design. This design isn't bad at all, but there is one thing wrong 1
with it. 2
See if you can notice. Individually, each element is very well designed, but composition together looks 3
somewhat off. 4
If I were to draw lines on the edges of each element, you'll see that elements aren't really lined up. 5
Fixing this is quite easy. 6
We just line things up, as much as we can. 7
A simple trick changed the same design looking from clumsy, to orderly and polished. 8
Now, if I was to draw lines on the edges, you'd see a simplistic grid with two main vertical axes. 9
Why does aligning objects make a composition look better? 10
It's exactly the same reason why this room, looks better than this room. 11
It's the order. We avoid chaos and seek order. And everything that is orderly, symmetric and organized, will 12
be perceived as more beautiful, than anything that is chaotic and disorderly. 13
Some of the most important design rules are about layout. 14
It's a question of where to put things, how to arrange them, what comes after what. 15
In the upcoming lessons, we'll be talking about all the design techniques and rules, related to a layout. 16
This one is about alignment. 17
Probably one of the simplest, the most basic, but one of the most powerful design rules out there. 18
Just a simple alignment, can make something look designed, on the other hand, misalignment will make it 19
look sloppy and amateur work. 20
Many web developers, who don't have a background in design, will just drop elements on the page randomly 21
wherever they fit. 22
This makes the page look messy and not attractive at all. 23
But, if we take every chance to align objects with each other, then we create something that looks aesthetically 24
more attractive. 25
There are six ways you can align objects. Left alignment. 26
This is the most natural way of aligning things, because the way we read in Western languages, from left 27
to right. It feels the most natural to our eyes, to start scanning for objects, from top left corner. 28
Then you have the center alignment. 29
This is frequently seen in web design, less in print design. 30
If you're designing for Arabic, Hebrew and other right-to-left languages, then most natural alignment 31
would be right alignment. Not just for text, but for other objects too. 32
And there are three, similar ways, to align objects on the horizontal axis. Top alignment, center alignment 33
again but horizontal axis, and the bottom alignment. 34
Almost all design software will have alignment action buttons and they will use these exact icons to 35
represent each. Figma uses 36
these icons too and I'll show you where they are. 37
In this example, you can see that we've aligned objects on their left edges. 38
Alignment is the first step for a good layout. 39
When you start lining things up, you'll see that the layout starts to form some sort of a structure. 40
This is called the grid. 41
It's the way of organizing elements on the page, to put them in a recognizable structure. 42
But what design really likes: the grid, that is divided in equal sizes. 43
So, if we were to draw eight equal-width columns, that are spaced out evenly. And we took all our objects 44
and aligned them with these columns. Then we would get a layout, that feels so much more balanced and 45
designed. 46
And the final step in this process is to reuse the same values as much as possible. 47
The vertical gaps between objects are all 30 pixels, but the horizontal gap is 60 pixels. 48
Right move here would be, to make that horizontal gap 30 as well. 49
Now we have a truly balanced layout. Why is the grid so important? 50
It gives the audience the sense of clarity. The grid lines aren't actually drawn. Right? You know, they are implied. 51
And they are there. And audience sort of feels it. 52
And when something looks predictable and familiar, because of the repeating grid, the audience and 53
the viewer, will trust the website more. And they'll understand that, you know, this is the website that 54
is not going to waste their time. 55
The grid rule is flexible, I don't always design inside the grid. 56
Sometimes I do, sometimes I ignore it. Sometimes I have a grid and then you know, I let things sometimes 57
go out of the constraints. And I know many designers do exact the same, which is you know, they might not 58
use the grid completely, or they might somehow have it, but you know, use it more in a flexible manner. 59
But for you, in the beginning, I want you to use the grid, because for the beginning and when you're learning 60
how to design, it's just a really amazing way how to, kinda, ingrain this great design habit inside 61
of you. 62
And then, later on, you can kinda go about it, a bit you know, more flexible way. 63
We're going to do a practice exercise after this lesson. And I'm going to show you how to easily create 64
a grid inside Figma, and how to design within the grid. 65
Most of the design rules, that we're going to be speaking in this course, can be broken. Although if we're 66
breaking a design rule, we have to do it with an intention. Because if we're not doing it with an intention, 67
and if we're not really thinking about it, probably we're being sloppy. 68
One very common design layout to use, in web design, is a center layout. Which doesn't really fall under 69
a proper grid. 70
Let's take a look at this example. 71
There is no prominent grid on this section, the art is free-flowing, and the elements in the middle aren't 72
creating any sort of grid. 73
However, it still looks good and doesn't look sloppy at all. Because at least there is an alignment. 74
You can break grid, but you can rarely break an alignment. 75
We can feel the imaginary vertical line, these elements, are aligned with. In print design, they rarely use 76
center alignment. 77
However, unlike print the website can be viewed on hundreds of different screen sizes, anywhere from 78
our tiny smartphone to a large TV screen. 79
Because of this our websites have become responsive. 80
The content can shrink or expand, depending on the screen it's being viewed on. In print, 81
the designer would mold the elements to his absolute will, whatever is printed, isn't going to change 82
shape or size. So, you know, he would achieve an optimal result. 83
This is why you see crazy layouts in magazines, but not in web. 84
So that's alignment and grid in theory. 85
Up next we're going to practice alignment and grid, so you can make it as part of your design process.