Step 3 - Wireframes & Flows - Intro to the Design of Everyday Things

• 0:01 - 0:03
What we've been doing here are the first steps of
• 0:03 - 0:06
what is called low fidelity prototyping. This is where we
• 0:06 - 0:10
take paper to make simple representations of our designs. We
• 0:10 - 0:14
create paper prototypes for communication, and to demonstrate our ideas.
• 0:14 - 0:16
And to find out what works for a user. We
• 0:16 - 0:19
don't want to invest too much into it, sketching is
• 0:19 - 0:23
cheap and engineering is expensive. You said the word wire-frames.
• 0:23 - 0:26
Can you I've heard that word a lot. Can you explain
• 0:26 - 0:26
what that is?
• 0:26 - 0:29
>> Well, actually Clifton has a great example of a wire-frame.
• 0:29 - 0:35
A wire-frame shows the basic information and placement of different elements.
• 0:35 - 0:39
So he's got a little token here that kind of represents an
• 0:39 - 0:41
image. You know, and I think that's become so familiar to
• 0:41 - 0:44
us that we know that that's like a picture of somebody,
• 0:44 - 0:46
even though it doesn't look like anybody I know. In fact,
• 0:46 - 0:48
it looks kind of like a question mark with a little hump.
• 0:48 - 0:51
And then this is text, placement for text. And he's out
• 0:51 - 0:54
it within this frame, which is actually very similar to this frame.
• 0:54 - 0:54
>> Mm-hm.
• 0:54 - 0:58
>> Right? Of our device. So and then he's got some
• 0:58 - 1:02
call outs and labels. So this, essentially, is wire frames, all
• 1:02 - 1:05
these are wire frames. And the difference, say, between his wire
• 1:05 - 1:07
frames and yours is that he's constrained them by a frame.
• 1:07 - 1:07
>> Oh.
• 1:07 - 1:11
>> [COUGH] He's sort of put that around and he's thought a little bit about
• 1:11 - 1:14
how things are positioned within this constraint. So,
• 1:14 - 1:16
• 1:17 - 1:19
>> Wire frames show placement in an actual frame
• 1:19 - 1:22
of a device. And flows are sequences of wire
• 1:22 - 1:26
frames. Flows work to create a user interface story,
• 1:26 - 1:29
in much the same way as a comic strip tells
• 1:29 - 1:32
a story. Now, let's actually make some wire frames
• 1:32 - 1:36
and flows, using those conceptual models that we made earlier.
• 1:36 - 1:39
In fact, let's bring all the elements you generated
• 1:39 - 1:42
before, including the conceptual models, the discoverable signifiers, and the
• 1:42 - 1:45
feedback, into our wire frames and story board.
Cím:
Step 3 - Wireframes & Flows - Intro to the Design of Everyday Things
Leírás:

more » « less
Video Language:
English
Team:
Udacity
Projekt:
Design101: Design of Everyday Things
Duration:
01:46
 Udacity Robot edited Angol subtitles for 03-08 Step 3: Wireframes & Flows Udacity Robot edited Angol subtitles for 03-08 Step 3: Wireframes & Flows Cogi-Admin edited Angol subtitles for 03-08 Step 3: Wireframes & Flows

English subtitles

Felülvizsgálatok Compare revisions

• API
Udacity Robot
• API
Udacity Robot
• API