0:00:00.790,0:00:03.370 What we've been doing here are the first steps of 0:00:03.370,0:00:06.220 what is called low fidelity prototyping. This is where we 0:00:06.220,0:00:09.730 take paper to make simple representations of our designs. We 0:00:09.730,0:00:14.020 create paper prototypes for communication, and to demonstrate our ideas. 0:00:14.020,0:00:16.490 And to find out what works for a user. We 0:00:16.490,0:00:19.340 don't want to invest too much into it, sketching is 0:00:19.340,0:00:23.330 cheap and engineering is expensive. You said the word wire-frames. 0:00:23.330,0:00:25.970 Can you I've heard that word a lot. Can you explain 0:00:25.970,0:00:26.475 what that is? 0:00:26.475,0:00:29.287 >> Well, actually Clifton has a great example of a wire-frame. 0:00:29.287,0:00:34.640 A wire-frame shows the basic information and placement of different elements. 0:00:34.640,0:00:38.950 So he's got a little token here that kind of represents an 0:00:38.950,0:00:41.430 image. You know, and I think that's become so familiar to 0:00:41.430,0:00:43.510 us that we know that that's like a picture of somebody, 0:00:43.510,0:00:45.670 even though it doesn't look like anybody I know. In fact, 0:00:45.670,0:00:47.780 it looks kind of like a question mark with a little hump. 0:00:47.780,0:00:50.970 And then this is text, placement for text. And he's out 0:00:50.970,0:00:53.600 it within this frame, which is actually very similar to this frame. 0:00:53.600,0:00:54.273 >> Mm-hm. 0:00:54.273,0:00:58.170 >> Right? Of our device. So and then he's got some 0:00:58.170,0:01:01.960 call outs and labels. So this, essentially, is wire frames, all 0:01:01.960,0:01:04.595 these are wire frames. And the difference, say, between his wire 0:01:04.595,0:01:06.930 frames and yours is that he's constrained them by a frame. 0:01:06.930,0:01:07.240 >> Oh. 0:01:07.240,0:01:10.840 >> [COUGH] He's sort of put that around and he's thought a little bit about 0:01:10.840,0:01:13.690 how things are positioned within this constraint. So, 0:01:13.690,0:01:15.770 he's already one step ahead, which is fine. 0:01:16.970,0:01:19.370 >> Wire frames show placement in an actual frame 0:01:19.370,0:01:22.480 of a device. And flows are sequences of wire 0:01:22.480,0:01:26.480 frames. Flows work to create a user interface story, 0:01:26.480,0:01:29.070 in much the same way as a comic strip tells 0:01:29.070,0:01:32.490 a story. Now, let's actually make some wire frames 0:01:32.490,0:01:35.780 and flows, using those conceptual models that we made earlier. 0:01:35.780,0:01:38.770 In fact, let's bring all the elements you generated 0:01:38.770,0:01:42.190 before, including the conceptual models, the discoverable signifiers, and the 0:01:42.190,0:01:44.650 feedback, into our wire frames and story board.