Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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
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