Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Responsive Design!
You have completed Responsive Design!
Preview
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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up