Layout: After3:48 with Hope Armstrong
Watch one approach to improving the design of a screen for an iOS app.
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 up