0
1
00:00:00,570 --> 00:00:06,030
Now next, we're again going to talk about a really fundamental aspect of user interface design or indeed
1

2
00:00:06,570 --> 00:00:08,010
any sort of graphic design.
2

3
00:00:08,070 --> 00:00:13,190
And this is something that is relatively low effort but makes a huge amount of difference.
3

4
00:00:13,230 --> 00:00:18,030
And in fact it's a very easy way to turn something that looks undesigned to something that has purpose
4

5
00:00:18,120 --> 00:00:19,620
and has been designed.
5

6
00:00:19,740 --> 00:00:26,850
So if we take a look at the comparison below if you compare this blogging website with this blogging
6

7
00:00:26,850 --> 00:00:34,050
website, there's one minute difference. But that single difference changes how the entire website looks.
7

8
00:00:34,050 --> 00:00:41,280
And that is of course alignment. Alignment is key in any sort of graphical design but also incredibly
8

9
00:00:41,280 --> 00:00:42,980
important in digital design.
9

10
00:00:43,230 --> 00:00:48,960
So when you have a look over here, you can see that if you follow along the left side of all of these
10

11
00:00:49,020 --> 00:00:55,860
elements and text you can see a single line that pretty much touches all the edges whereas when you
11

12
00:00:55,860 --> 00:01:01,890
look over here you've got a line that touches that edge and then another line that touches this edge.
12

13
00:01:01,890 --> 00:01:09,270
And this is a fundamental principle of graphical design is that you want to try and minimize the number
13

14
00:01:09,360 --> 00:01:11,550
of alignment lines.
14

15
00:01:11,550 --> 00:01:15,150
So let me show you. There's two fundamental types of alignment.
15

16
00:01:15,210 --> 00:01:22,440
One is called Edge alignment where you have all the elements having one side lining up with a single
16

17
00:01:22,440 --> 00:01:24,480
line just as over here.
17

18
00:01:24,720 --> 00:01:29,790
And there's another thing called center line which is where you line up all the elements by their midpoint
18

19
00:01:29,880 --> 00:01:33,520
and depending on use case you will choose to use one or the other.
19

20
00:01:33,630 --> 00:01:39,660
But in terms of user interface design, edge alignment is what we want. But this isn't strictly limited
20

21
00:01:39,960 --> 00:01:45,180
to digital design. Say if you're creating a business card for somebody as a design
21

22
00:01:45,420 --> 00:01:52,200
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

23
00:01:52,200 --> 00:01:56,070
designer and their address, they line up with a single line.
23

24
00:01:56,070 --> 00:02:02,160
Now if we go through this document and add all the lines next to these different edge alignment points
24

25
00:02:02,430 --> 00:02:10,350
you can see there is a whole lot of lines and that to the human brain looks messy and uncoordinated.
25

26
00:02:10,770 --> 00:02:16,710
Whereas if you look at the example on the right you have far fewer edge alignment point and that results
26

27
00:02:16,830 --> 00:02:20,180
in a cleaner design that looks more pleasing to the eye.
27

28
00:02:20,250 --> 00:02:24,100
So this is actually quite easy to do when you're creating things say in Photoshop.
28

29
00:02:24,120 --> 00:02:30,450
You can simply drag along a guide from the ruler on the left on the top and then you can line up all
29

30
00:02:30,450 --> 00:02:35,130
of your elements with that guide and they snap into place.
30

31
00:02:35,130 --> 00:02:40,870
So when you're designing your user interfaces for mobile in Photoshop or in sketch or in Illustrator,
31

32
00:02:41,010 --> 00:02:48,150
make sure that you pay attention to edge alignment and try to reduce the number of guides that you find
32

33
00:02:48,150 --> 00:02:49,200
yourself using.