The Desktop Screen9:36 with Anwar Montasir
Now we’re ready to turn the mobile version of our architecture studio site into a desktop version.
Now we're ready to turn the mobile version of our architecture 0:00 studio site into a desktop version. 0:03 I'm mostly planning to respect the layout grid we established earlier. 0:06 But with header bars and hero images 0:11 it can be visually striking to make use of the entire screen. 0:15 So I'll try that first. 0:21 I'm positioning the logo 16 pixels from my upper left and 0:23 top edge and I'll distribute my five nav links toward the right edge. 0:29 With Our Team, once again, this our current page. 0:58 So I'm going to make the link bold as well as underline it. 1:04 Now you might be wondering, How about a breakpoint? 2:08 Where is that place that the mobile version of the navigation 2:12 can switch to the expanded version? 2:16 I can test this out by moving elements around. 2:19 It looks like somewhere around 670 pixels, the logo and 2:28 horizontal navigation still fit comfortably side by side. 2:34 Any smaller and the two elements start colliding. 2:39 So a breakpoint might be used around 670 pixels 2:43 to switch from the burger nav icon to the full menu. 2:48 But, this isn't something you need to specify in your Figma file 2:53 since the breakpoint is usually implemented by the developer. 2:57 My hero image, I'll make full screen to match my header bar. 3:04 Starting with the body copy I'll follow the grid. 4:02 I can create a bit of visual interest and keep my columns of body 4:15 copy from getting too wide by not using all 12 columns at once. 4:20 For my heading, I'll use only the nine grid columns on the left, 4:25 leaving the remaining three columns blank. 4:29 And I have room to make my text as large as 48 pixels. 4:32 While this gives me around 50 characters per line, 4:39 and I have room to go smaller, I think the 4:43 large text will make an impression on a large monitor. 4:45 For my introductory copy, I'll leave three columns blank 4:56 on the left side. And increase the font to 32. 5:01 I'll hyphenate the word materials to improve the text flow a bit. 5:12 And looks like I forgot to change the word 5:20 Careers to blue as it's a hyperlink. 5:25 For my images of employees I have room 5:44 for two columns side by side. 5:49 I will increase my body copy size slightly. 6:06 Going with 28 for the person's 6:20 name and 24 for her title. 6:26 As well as 20 for my body copy. 6:40 Which means the line height needs to be increased to 30. 6:52 As I finish this section, I should zoom in to 100% 7:24 to make sure the gutter between columns is sufficient. 7:28 As I want it to be visually obvious that these are separate blocks of copy. 7:31 The footer is less challenging on the desktop since I have more room. 8:00 I'll start with the social navigation on the left. 8:07 Then, after allowing some space, 8:14 I'll include the address and phone on the right. 8:18 As well as About Us, which I might consider stacking vertically 8:30 rather than horizontally, given the amount of space I have. 8:35 And that concludes the desktop view. 9:01 My next step, once I've created a prototype 9:06 and tested on some users, would be communication 9:10 with the development team to make sure 9:12 the body copy remains legible at a variety of screen widths. 9:15 I hope you've enjoyed this workshop on responsive design. 9:21 Considering multiple screen widths in your design 9:24 isn't always easy. But it's a fun challenge 9:28 and an important skill to demonstrate in your portfolio. 9:31
You need to sign up for Treehouse in order to download course files.Sign up