Problem

For our responsive design project, 0:00 we're going to create a team members page for 0:03 an imaginary architecture studio called Wilson & Henderson architects. 0:06 Take a look at the project files associated with this video. 0:12 And you'll see I've provided an assets file that includes design assets 0:17 like a logo, a color palette and two Google fonts. 0:21 The Wilson and Henderson site will have five primary navigation links. 0:28 Projects, Services, Approach, Our Team, and Connect. 0:33 Our Team is the page we'll be building. 0:40 I've also provided content to place in the website footer. 0:43 Finally, I've included a hero image, as well as 0:48 four images plus a body copy describing the Wilson & Henderson team. 0:53 All five images came from a stock photography site called Unsplash. 0:59 For this exercise, it's important to create at least two views. 1:06 One as the website would be viewed on a phone 1:10 and one for a larger screen like a desktop. 1:14 A larger screen will likely use multiple grid columns while a phone 1:17 usually has space for only one column. 1:22 Let's start a new document in Figma to get set up. 1:26 I'm going to create two new frames. 1:32 I'll start with Figma's desktop frame measuring 1440 by 1024 pixels. 1:37 And next to it, I'll create an iPhone 11 1:45 frame measuring 375 by 812 pixels. 1:49 Now let's explore how we can use Figma's layout grid feature 1:54 to structure our design. 1:58 I'm clicking on the desktop frame, 2:01 since that's where we really need guidance from a grid. 2:04 Under the main Figma menu, I'm choosing View, 2:08 Layout Grids to make sure our grids can be seen. 2:11 And then in my Properties panel 2:16 I'll press the plus sign next to Layout grid. 2:18 The default grid is a tiny ten pixel grid. 2:22 But what I really need are columns to help me align horizontal content. 2:25 I'll choose columns from the drop down menu. 2:31 12 column grids are pretty popular with designers and 2:34 developers, since 12 divides by 2, 3, 4 and 6. 2:39 So it gives you more options than something like a 10 column grid. 2:45 Figma provides a grid that stretches 2:50 all the way across the screen by default, but I 2:51 could end up with unmanageably wide columns of text that way. 2:55 I'll switch the grid to center. 3:00 In terms of measurements, this might take a bit of trial and error, 3:03 but I'm going to go with 64 pixels for 3:08 each grid column with a 32 pixel gutter. 3:11 I'd like the space between columns to stay fairly generous. 3:18 Setting up a layout grid for mobile is optional, 3:25 depending on whether you find a one column grid helpful. 3:29 If I'm planning on allowing at least 16 pixels 3:35 of margin on the edge of my device, 3:39 then one column at 343 pixels wide should do. 3:43 The last thing I'll do to get started 3:49 is paste in the responsive design assets frame 3:53 so I can borrow assets as I go. 3:57 As you design, remember what we learned in our first few videos. 4:01 Questions to ask yourself are 4:06 How will I fit my navigation on the mobile screen? 4:08 Have I designed my columns of body copy for optimum legibility? 4:12 Do I need to art direct any of my images 4:17 providing different aspect ratios for different screens? 4:20 Have fun with this. We'll take a look at my solution in the next video. 4:25