1 00:00:04,760 --> 00:00:07,370 This layout is better than when we started but 2 00:00:07,370 --> 00:00:10,640 it's unclear how some elements relate to one another. 3 00:00:10,640 --> 00:00:13,580 Some fonts are too large, others are too small and 4 00:00:13,580 --> 00:00:17,500 their placement could be better to indicate a visual hierarchy. 5 00:00:18,780 --> 00:00:21,810 At the top, let's get this login 6 00:00:21,810 --> 00:00:26,820 link to line up with the other links in the nav bar. 7 00:00:26,820 --> 00:00:31,720 When text like this shares vertical alignment and has the same colors and 8 00:00:31,720 --> 00:00:36,660 fonts, it can implicitly indicate a relationship without the use 9 00:00:36,660 --> 00:00:42,160 of a literal bar or box that separates them from other page elements. 10 00:00:42,160 --> 00:00:48,051 So let's select this and I'm just going to move it up, and 11 00:00:48,051 --> 00:00:55,763 that looks like it is lined up with write a review and forums, so there we go. 12 00:00:57,291 --> 00:01:00,830 We'll work on the horizontal alignment a little bit later. 13 00:01:01,850 --> 00:01:06,741 Next, I feel like the font size on these is a little bit large, 14 00:01:06,741 --> 00:01:11,554 their links and they're not labeling anything below them. 15 00:01:11,554 --> 00:01:16,130 But, they're large enough that they could look like headers. 16 00:01:16,130 --> 00:01:22,624 So, let's reduce the size of these from it looks like they're 18 down to about 16. 17 00:01:22,624 --> 00:01:28,233 So, all change this to 16 and inspector, 18 00:01:28,233 --> 00:01:34,758 and I'll select forms there, and write a review. 19 00:01:36,387 --> 00:01:42,327 And then finally, we'll select sign up there, make that a little smaller and 20 00:01:42,327 --> 00:01:49,170 then let's make sure it still is perfectly centered inside of its button there. 21 00:01:49,170 --> 00:01:50,240 There we go. 22 00:01:50,240 --> 00:01:55,233 Another way to indicate hierarchical relationships with text is 23 00:01:55,233 --> 00:01:58,054 to have a difference in font weight. 24 00:01:58,054 --> 00:02:03,741 Along the search bar, the example text is the same color and 25 00:02:03,741 --> 00:02:06,640 font weight as the label. 26 00:02:06,640 --> 00:02:12,262 So, let's change them from bold to just regular, 27 00:02:12,262 --> 00:02:17,640 so we'll do that on both pieces of example text, 28 00:02:20,353 --> 00:02:24,485 And, we'll adjust the colors later on. 29 00:02:24,485 --> 00:02:28,420 Working our way down the page, there is two headers, 30 00:02:28,420 --> 00:02:30,900 New in Your City and From the Blog. 31 00:02:30,900 --> 00:02:35,350 Which barely look like headers at all because of their placement and 32 00:02:35,350 --> 00:02:36,520 font weight. 33 00:02:36,520 --> 00:02:43,180 On the right side, From the Blog, should be bold, and the texts should be larger. 34 00:02:43,180 --> 00:02:50,158 So, let's select that text and let's set it too bold, 35 00:02:50,158 --> 00:02:55,654 and also the font size to 18 and hit enter. 36 00:02:57,317 --> 00:03:01,848 That's much better, now it matches the New in Your City text, 37 00:03:02,950 --> 00:03:07,781 Which is also size 18 in bold. 38 00:03:07,781 --> 00:03:12,585 And with the New in Your City text selected, let's move that up. 39 00:03:12,585 --> 00:03:16,604 And to the left, So 40 00:03:16,604 --> 00:03:23,880 that it sits on the same horizontal line as From the blog. 41 00:03:23,880 --> 00:03:30,074 Now looks like I'm not getting a smart guide here, so I'm going to zoom out. 42 00:03:31,521 --> 00:03:37,303 And, one thing we can do in Adobe XD is we can drag guides from the top and 43 00:03:37,303 --> 00:03:40,080 left side of the art board. 44 00:03:40,080 --> 00:03:45,140 So I'm going to drag a guide from the top, and 45 00:03:45,140 --> 00:03:47,820 I'm going to zoom in really close to From the Blog. 46 00:03:48,950 --> 00:03:53,435 Just to try to get that guide right on the baseline of the font. 47 00:03:53,435 --> 00:03:58,160 And then I'll zoom back into New in Your City and 48 00:03:58,160 --> 00:04:02,420 we can move that down until it sits on the same line there. 49 00:04:02,420 --> 00:04:05,630 There we go, that looks good to me. 50 00:04:05,630 --> 00:04:10,024 And now, we can just drag that guide back to the top to get rid of it. 51 00:04:11,380 --> 00:04:18,345 Finally this, Review text in each one of these boxes needs to be smaller. 52 00:04:18,345 --> 00:04:23,425 Right now, it's even larger than the name of the restaurant, 53 00:04:23,425 --> 00:04:26,335 which is the most important piece of information. 54 00:04:26,335 --> 00:04:30,205 Generally, the most important thing should be the largest. 55 00:04:30,205 --> 00:04:36,260 And to create a visual hierarchy, your font sizes and weights should start larger 56 00:04:36,260 --> 00:04:41,880 at the top of a content section, and get smaller as they work their way down. 57 00:04:41,880 --> 00:04:47,890 Just like the relationship between From the Blog and the actual blog post text. 58 00:04:47,890 --> 00:04:52,880 So, let's put into that Review text, and 59 00:04:52,880 --> 00:04:56,910 lets set the font size to 13. 60 00:04:56,910 --> 00:04:57,937 So I'll change that. 61 00:04:59,518 --> 00:05:03,245 And I'll change, That. 62 00:05:04,826 --> 00:05:06,746 And of course, normally, 63 00:05:06,746 --> 00:05:12,008 you would have to do some realignment when you adjust font sizes like this. 64 00:05:12,008 --> 00:05:16,470 But I've actually aligned these already and 65 00:05:16,470 --> 00:05:22,235 we just had to change a font size, so let's zoom back out. 66 00:05:23,880 --> 00:05:26,800 And, I think this is looking a lot better. 67 00:05:26,800 --> 00:05:29,710 So, that's it for our font adjustments. 68 00:05:29,710 --> 00:05:31,423 When you're done, save your work. 69 00:05:33,511 --> 00:05:36,730 Some of the most obvious design issues are resolved. 70 00:05:36,730 --> 00:05:39,610 But, as we'll see in the next video, there's 71 00:05:39,610 --> 00:05:44,000 actually more problems with this layout and one of them is actually quite major.