How to Wireframe a Homepage3:48 with Allison Grayce Marshall
In this video, Allison Grayce shows us how she wireframed the home page for Lunchpals, an iOS app that helps you find friends to have lunch with.
[Code/Racer - Wireframing the Homepage with Allison Grayce] 0:00 Before jumping into the homepage design for Code/Racer, 0:05 we first had to decide what information was most important and enticing 0:09 to feature on the homepage. 0:13 We also had to determine how to break this information down 0:15 to create a visual hierarchy. 0:18 To give you a peak into our process, we're going to create a landing page together 0:20 for a fictitious client who created an iPhone application called Lunchpals. 0:24 You'll most likely be provided content for the homepage by either 0:29 the client or a representative of the client like a marketing director or creative director. 0:32 After determining what information is more or less important, 0:37 we can break this list up into a primary and secondary list. 0:40 All ready, with just our simple, bulleted list we're getting an idea of hose this information 0:44 could be blocked out visually on our homepage. 0:48 I always create my first wireframe on a plain or grided piece of paper. 0:51 Refer to your list of primary and secondary items 0:55 and sketch out a generally idea of how you want the homepage design to look. 0:58 Now is the time to experiment. 1:11 Using design techniques like sizing, placement, and spacing, 1:13 we can create the same information hierarchy as our bulleted list, 1:17 only in a visual format. 1:21 Once we have a solid plan of action, we can move forward with our design. 1:30 Depending on the complexity of the website, 1:34 it may be a good idea to use resources like Mockingbird or OmniGraffle 1:36 to make a digital or interactive version of the wireframe. 1:40 For an interface as simple as this one, 1:44 I would just dive right in and start designing in Photoshop 1:46 after sketching your wireframe. 1:48 [??] 1:50 Here is our completed design. 3:02 We've used design techniques like scale, placement, spacing, and color 3:04 to draw the eye around the page and focus in on primary information. 3:09 We've used the same techniques in the opposite way 3:13 to make sure our secondary information appears as such. 3:15 Making an image or text larger, like the screenshot of the iPhone app and the headline, 3:20 takes up more real estate in the layout, so naturally it stands out more. 3:25 Reserving bright colors for primary call to actions, like the "download now" button, 3:29 stands out against the subtle color of the surrounding text and background. 3:33 Using white space is also an effective way to draw attention to important elements 3:37 and ensure legibility. 3:41 Keep these design techniques in mind as you work on future homepage designs. 3:43
You need to sign up for Treehouse in order to download course files.Sign up