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 Before and After: Layout!
You have completed Before and After: Layout!
Preview
Watch one approach to improving the design of a screen for an iOS app.
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
How did you do,
were you able rework the layout?
0:00
Let me show you what I did.
0:05
While some of the visual design is nicely
done, the layout is certainly confusing.
0:06
I'll start at the top.
0:13
The Add a Class button is prominent
since it's at the top of the screen.
0:16
Yet I imagine the teachers use that button
0:21
only a couple of times a year when
they set up classes each semester.
0:23
I move that button to
the bottom of the class list.
0:28
Then I realized the hierarchy is unclear.
0:33
Which cards should I pay
attention to the most?
0:36
I'm assuming that teachers will update
their class, either during the class or
0:40
during a break after a class.
0:44
So I made the first card more dominant by
adding a dark grey rectangle behind it,
0:46
and increasing the opacity of
the drop shadow from 6% to 16%.
0:53
This layering makes the top card
stand out and adds up to the design.
0:59
Notice that I swap the status bar for
1:04
the dark theme as well to make it
blend into the dark grey rectangle.
1:07
As for the class cards,
1:12
the staggered text alignment is causing
my eyes to dart around the screen.
1:14
So I left align the text to make it
easier to scan the content on the screen.
1:20
Now all the class info is in
the same spot for every card.
1:25
I right align the icons to
balance out the card layout,
1:30
and provide enough white space for
a longer class names.
1:33
Now notice how each class card has
a suggested action or status, which
1:37
is great, but it's difficult to know if it
belongs to the class above it or below it.
1:43
So I solidified the relationship
between that text and
1:51
the card by turning the card
into a two tiered card.
1:54
The suggestion text appears on
the bottom of each colored section
1:58
in a white background section.
2:02
This is looking great, but
I noticed the suggested actions and
2:04
statuses were difficult to differentiate.
2:09
They get muddy since there isn't
much variation between the layouts,
2:12
beyond the subtle icon change.
2:16
I decided to add a student photo
whenever it reference as a person.
2:19
This adds visual interest to the card and
gives it a personalized touch.
2:23
The action is more likely to
resonate with the teacher
2:28
now that she identify the student's face.
2:31
Lastly, I knew the navigation
needed to be improved.
2:34
All of the pages are linked to the bottom
of the screen as a stack of buttons.
2:38
That makes it difficult to navigate
in the app as the user has to
2:43
always scroll to the bottom of
the page to reach the navigation.
2:47
To make the pages easily accessible,
2:52
I added a tab bar which sticks
to the bottom of the screen.
2:54
The tabs are ever present,
2:58
making an easy to quickly switch
between different sections of an app.
3:00
The active tab is signified
by an accent color,
3:05
while the other tabs are a subdued gray.
3:08
This meant I could remove the classes
header at the top of the page.
3:12
And allow that space to fill with more
important content such as the class cards.
3:16
In it's place, I added a divider line to
clarify that the following cards are for
3:21
upcoming classes.
3:26
If my design looked really
different from yours, don't worry.
3:27
Remember, there are a lots of
different solutions to this.
3:32
And the important thing is to just
keep iterating and practicing.
3:36
Once you get a grasp on designing layouts,
3:41
the products that you work on will
be more intuitive and easier to use.
3:43
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