Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Responsive Design

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Problem

4:30 with Anwar Montasir

For our responsive design project, we’re going to create a team members page for an imaginary architecture studio called Wilson & Henderson Architects.

Using the Project Files

The project file download is a .fig file. For instructions on importing into Figma, see Import Files Into Figma.

Further Reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up