Return to Video

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
    he's already one step ahead, which is fine.
  • 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

English subtitles

Felülvizsgálatok Compare revisions