The Mobile Screen15:33 with Anwar Montasir
Welcome back. This was a tough challenge! Were you able to design at least two views for the team members page? Let’s take a look at how I solved the problem.
Welcome back. 0:00 This was a tough challenge. 0:01 Were you able to design at least two views for the team members page? 0:03 Let's take a look at how I solved the problem. 0:07 Let's take a look at my finished design. 0:12 Here is how it looks on mobile, 0:16 Both with the navigation menu expanded and collapsed. 0:19 And here's the desktop version. 0:25 On the mobile screen, I went with a burger nav after all. 0:33 And it's not that you'll never use this pattern. 0:38 It's just important to weigh the pros and cons before implementing it. 0:40 I thought my primary navigation was a bit too lengthy 0:46 to work as a tab bar. 0:49 And the Priority Plus pattern didn't make sense to me 0:52 as there weren't obvious links to prioritize. 0:55 If you went with a different navigation solution, 0:58 that's more than fine. 1:01 Design problems rarely have only one effective solution. 1:03 All right, so backing up to my empty frames featuring layout grids. 1:09 How did I create my mobile screen? 1:14 The header bar is pretty straightforward. 1:17 I just need to make sure the interface elements 1:20 are at least 44 pixels in size. 1:23 I'll draw a dark rectangle and paste the logo into the upper left corner. 1:27 My mobile icon, I'll get using the bars icon from Font Awesome. 1:34 Then I'll convert my header into a component. 1:55 The hero image I've provided is a pretty extreme landscape image, 2:04 which might look great on a large screen. 2:08 But I suspect I'll have to crop it differently for mobile. 2:11 If I make this image 375 pixels tall, 2:21 the image will appear square since my viewport is 375 pixels wide. 2:25 And Figma crops any part of the image off the artboard. 2:33 Now I'd like to create a heading that says Our Team. 2:38 But that will likely be hard to read on top of this image. 2:42 So I'll first draw a dark square 2:46 using the almost black provided in my color palette 2:52 and set the opacity to 50%. 2:58 As I create my text using Libre Franklin Black, 3:03 I'll add a drop shadow to set the text apart from the background a bit more. 3:17 Now for the body copy. 3:30 Hopefully you'll remember the rules we covered earlier. 4:01 Minimum of 16 pixels in size, 4:04 with a line height at least 1.5 times the font size, 4:14 and paragraph spacing at least 2.25 times the font size. 4:19 Don't justify the copy, 4:26 and no more than 80 characters per line. 4:28 I'm using multiples of 4 in creating my type size. 4:34 So I'll try 28 pixels for my heading. 4:38 I'm not going to increase the vertical spacing in my heading. 4:48 If headings have too much vertical space, 4:53 the individual lines start to read as separate headings. 4:56 I'll use my darker orange color 5:01 to make part of the sentence pop out. 5:04 And to make the text fit a bit better within the allotted horizontal space, 5:10 I'm hyphenating the word people. 5:16 Unfortunately, Figma doesn't offer an automatic hyphenation feature. 5:19 Although turning hyphenation on in CSS 5:24 is pretty easy for developers. 5:27 The employee photos are square and 5:32 don't really require art direction the way the hero image does. 5:34 I'll round the corners a bit and 5:51 make the image 343 pixels wide. 5:54 Perhaps adding a bit of a stroke. 6:01 You're hopefully noticing that I've been following the style guide from 6:17 the assets file, which specified Libre Franklin for headings 6:22 And Libre Baskerville for body copy. 6:32 I'll continue that pattern as I create body copy for each employee. 6:35 All right, so I've created content for all four employees 7:41 following the same pattern as the first employee. 7:45 And the layout overall has been pretty straightforward so far, 7:49 one column with all my content extending across the screen. 7:54 The footer gets a little more challenging though, 8:03 since I'm working with links rather than columns of body copy. 8:06 While these links shouldn't attract a ton of visual attention, 8:10 since footer links are usually of lesser importance 8:14 than the primary navigation, 8:18 I still want each link to be tappable with a finger. 8:20 Columns of footer links next to each other 8:25 likely won't work on a small phone screen. 8:28 So let's stack this content vertically, 8:31 starting with Connect With Wilson & Henderson. 8:35 For the links for Twitter, 9:34 Instagram, Pinterest and email 9:36 I'll use Font Awesome icons 9:39 since users tend to recognize the Twitter bird logo 9:42 faster than they recognize the word Twitter. 9:46 I'll make sure these icons are at least 44 pixels wide, 9:58 and space them horizontally, so the left and right edges 10:13 align with the heading above. 10:18 Now for the links under About Us. 11:14 I have room to make two columns of links. 11:23 One for Blog and News, 11:26 and the other for Careers and Philanthropy. 11:28 I want to make sure I've provided generous vertical space and 12:10 test to make sure users can press each link individually. 12:14 And once I lay out the body copy for the address and phone, 12:20 that completes the footer. 13:04 Which means my mobile view is close to finished 13:07 with one important exception. 13:10 I haven't determined what happens when you 13:13 press the Mobile Menu button. 13:15 I'll make a new iPhone 11 artboard 13:24 to create the expanded menu design. 13:27 I'll start by changing the burger nav icon to an X 13:46 to indicate this is where to tap to close the mobile menu. 13:53 Then I'll distribute my five links vertically. 14:11 Projects, Services, Approach, Our Team, and Connect. 14:42 Our Team I'll make bold and 15:08 underlined to indicate this is the currently active page. 15:10 So that's the mobile view. 15:25 In our final video, we'll create a desktop version of the same content. 15:26
You need to sign up for Treehouse in order to download course files.Sign up