1
00:00:00,000 --> 00:00:05,000
[Code/Racer - Wireframing the Homepage with Allison Grayce]

2
00:00:05,000 --> 00:00:09,000
Before jumping into the homepage design for Code/Racer,

3
00:00:09,000 --> 00:00:13,000
we first had to decide what information was most important and enticing 

4
00:00:13,000 --> 00:00:15,000
to feature on the homepage.

5
00:00:15,000 --> 00:00:18,000
We also had to determine how to break this information down

6
00:00:18,000 --> 00:00:20,000
to create a visual hierarchy.

7
00:00:20,000 --> 00:00:24,000
To give you a peak into our process, we're going to create a landing page together

8
00:00:24,000 --> 00:00:29,000
for a fictitious client who created an iPhone application called Lunchpals.

9
00:00:29,000 --> 00:00:32,000
You'll most likely be provided content for the homepage by either 

10
00:00:32,000 --> 00:00:37,000
the client or a representative of the client like a marketing director or creative director.

11
00:00:37,000 --> 00:00:40,000
After determining what information is more or less important,

12
00:00:40,000 --> 00:00:44,000
we can break this list up into a primary and secondary list.

13
00:00:44,000 --> 00:00:48,000
All ready, with just our simple, bulleted list we're getting an idea of hose this information 

14
00:00:48,000 --> 00:00:51,000
could be blocked out visually on our homepage.

15
00:00:51,000 --> 00:00:55,000
I always create my first wireframe on a plain or grided piece of paper.

16
00:00:55,000 --> 00:00:58,000
Refer to your list of primary and secondary items 

17
00:00:58,000 --> 00:01:02,000
and sketch out a generally idea of how you want the homepage design to look.

18
00:01:11,000 --> 00:01:13,000
Now is the time to experiment.

19
00:01:13,000 --> 00:01:17,000
Using design techniques like sizing, placement, and spacing,

20
00:01:17,000 --> 00:01:21,000
we can create the same information hierarchy as our bulleted list,

21
00:01:21,000 --> 00:01:23,000
only in a visual format.

22
00:01:30,000 --> 00:01:34,000
Once we have a solid plan of action, we can move forward with our design.

23
00:01:34,000 --> 00:01:36,000
Depending on the complexity of the website,

24
00:01:36,000 --> 00:01:40,000
it may be a good idea to use resources like Mockingbird or OmniGraffle 

25
00:01:40,000 --> 00:01:44,000
to make a digital or interactive version of the wireframe.

26
00:01:44,000 --> 00:01:46,000
For an interface as simple as this one,

27
00:01:46,000 --> 00:01:48,000
I would just dive right in and start designing in Photoshop

28
00:01:48,000 --> 00:01:50,000
after sketching your wireframe.

29
00:01:50,000 --> 00:03:02,000
[??]

30
00:03:02,000 --> 00:03:04,000
Here is our completed design.

31
00:03:04,000 --> 00:03:09,000
We've used design techniques like scale, placement, spacing, and color

32
00:03:09,000 --> 00:03:13,000
to draw the eye around the page and focus in on primary information.

33
00:03:13,000 --> 00:03:15,000
We've used the same techniques in the opposite way

34
00:03:15,000 --> 00:03:20,000
to make sure our secondary information appears as such.

35
00:03:20,000 --> 00:03:25,000
Making an image or text larger, like the screenshot of the iPhone app and the headline,

36
00:03:25,000 --> 00:03:29,000
takes up more real estate in the layout, so naturally it stands out more.

37
00:03:29,000 --> 00:03:33,000
Reserving bright colors for primary call to actions, like the "download now" button,

38
00:03:33,000 --> 00:03:37,000
stands out against the subtle color of the surrounding text and background.

39
00:03:37,000 --> 00:03:41,000
Using white space is also an effective way to draw attention to important elements 

40
00:03:41,000 --> 00:03:43,000
and ensure legibility.

41
00:03:43,000 --> 00:03:49,000
Keep these design techniques in mind as you work on future homepage designs.