WEBVTT 00:00:07.880 --> 00:00:11.054 It's important – I'll say this multiple times – 00:00:11.054 --> 00:00:14.200 that you *don't just think about individual screens*. 00:00:14.200 --> 00:00:18.340 You realize that you're working within an application and think about the *broader structure*. 00:00:18.340 --> 00:00:23.164 It's very easy to get focused on screen-by-screen design. 00:00:23.164 --> 00:00:28.560 However, that said, of course each screen also is really crucial. 00:00:28.560 --> 00:00:34.123 So, *screen design* is one of the important aspects that you have as a designer. 00:00:35.210 --> 00:00:39.643 So, there are lots of details. And for some of these, 00:00:39.643 --> 00:00:42.560 particularly if you've done a graphic design background, 00:00:42.560 --> 00:00:46.880 you might have knowledge of esthetics way beyond anything that I could do. 00:00:46.880 --> 00:00:51.668 And so, your ability to do this is almost certainly going to be better than mine. 00:00:52.240 --> 00:00:55.360 However, there are *fundamental principles* that can help, 00:00:55.360 --> 00:01:00.697 and this is true probably of every kind of layout and screen. 00:01:00.960 --> 00:01:06.000 So, the first is to ask yourself, *what's the user doing*? 00:01:06.175 --> 00:01:09.840 So, when they are looking at the screen in front of them, when they're looking 00:01:09.840 --> 00:01:15.228 at this control panel on the device, *what is it* that they're trying to do? 00:01:16.320 --> 00:01:19.280 Then think to yourself, what is the information? 00:01:19.280 --> 00:01:22.428 What are the comparisons? What's the order of things? 00:01:22.720 --> 00:01:26.160 So, if it's an information system, if it's something that's showing data, 00:01:26.160 --> 00:01:29.520 what do they want to see, what decisions do they want to make based on that data? 00:01:29.520 --> 00:01:33.120 If it's showing buttons to do stuff, what order do they want 00:01:33.120 --> 00:01:36.793 to be able to press those buttons in? What do they want to be able to *achieve*? 00:01:38.320 --> 00:01:43.095 And then the design basically flows out from that. 00:01:43.280 --> 00:01:47.069 If you think about that old adage *form follows function*, 00:01:47.069 --> 00:01:53.635 once you understand what the user's doing, then you can create the view of that, the visual form. 00:01:53.635 --> 00:01:58.000 It might be the controls on something, the physical form. 00:01:58.000 --> 00:02:04.000 But in a way which follows the function, the things the user wants to achieve. 00:02:04.800 --> 00:02:10.160 In order to do that for a screen, for the visual screen, you have a number of tools available to you. 00:02:11.196 --> 00:02:15.760 You can group things together. You can order them in different ways, 00:02:15.760 --> 00:02:19.200 decoration, adding lines, colors and things like that. 00:02:19.200 --> 00:02:23.366 Alignment and also white space. 00:02:23.366 --> 00:02:28.512 But you have a whole variety of tools. So, what you have is a series of *visual tools* 00:02:28.512 --> 00:02:33.800 in the sense of things that you can do visually, that help you to allow the user 00:02:33.800 --> 00:02:38.847 – who has some purpose in mind – to achieve that by matching 00:02:38.847 --> 00:02:43.840 what's available to the *kinds of things the user wants to do with it*.