Now next, we're again going to talk about a really fundamental aspect of user interface design or indeed 1
any sort of graphic design. 2
And this is something that is relatively low effort but makes a huge amount of difference. 3
And in fact it's a very easy way to turn something that looks undesigned to something that has purpose 4
and has been designed. 5
So if we take a look at the comparison below if you compare this blogging website with this blogging 6
website, there's one minute difference. But that single difference changes how the entire website looks. 7
And that is of course alignment. Alignment is key in any sort of graphical design but also incredibly 8
important in digital design. 9
So when you have a look over here, you can see that if you follow along the left side of all of these 10
elements and text you can see a single line that pretty much touches all the edges whereas when you 11
look over here you've got a line that touches that edge and then another line that touches this edge. 12
And this is a fundamental principle of graphical design is that you want to try and minimize the number 13
of alignment lines. 14
So let me show you. There's two fundamental types of alignment. 15
One is called Edge alignment where you have all the elements having one side lining up with a single 16
line just as over here. 17
And there's another thing called center line which is where you line up all the elements by their midpoint 18
and depending on use case you will choose to use one or the other. 19
But in terms of user interface design, edge alignment is what we want. But this isn't strictly limited 20
to digital design. Say if you're creating a business card for somebody as a design 21
if you have a look at the one on the left if we line up the left edge of these two bits of text, graphic 22
designer and their address, they line up with a single line. 23
Now if we go through this document and add all the lines next to these different edge alignment points 24
you can see there is a whole lot of lines and that to the human brain looks messy and uncoordinated. 25
Whereas if you look at the example on the right you have far fewer edge alignment point and that results 26
in a cleaner design that looks more pleasing to the eye. 27
So this is actually quite easy to do when you're creating things say in Photoshop. 28
You can simply drag along a guide from the ruler on the left on the top and then you can line up all 29
of your elements with that guide and they snap into place. 30
So when you're designing your user interfaces for mobile in Photoshop or in sketch or in Illustrator, 31
make sure that you pay attention to edge alignment and try to reduce the number of guides that you find 32
yourself using.