Now, that we've got a design brief, our project described in words, we can begin to think about making some design, we can begin to think about the broader sense of how design works in a UI project, the look and feel of the project. Another way to think about it is to think about the style and the mood of a project. So, if you look at it in terms of style frames, for instance, you could think about what would it be like if a single slice of this project was to be finished and that's often done in motion projects. In print projects there's also a thing called a mood board where you try and paint a broad picture of research and the look and feel of a project. What all of these things are trying to do, and they're fairly interchangeable expressions, in that they're trying to envision the overall design direction and this is still part of pre-design. We're not really working with words now but we're working with very broad visual strokes. It gets us into a mode of pre-production and it's before we've really produced anything, it's pre-commitment as well. It's before we've really made any design decisions that we have to stick to and what that means is it's before you've really spent any money. You have to get all the components right before a project goes into production and might cost millions of dollars where thousands of people might be using it and hundreds of people better testing it. So, it's important to get these things right before you go into production and this gets at the core of what a lot of UI design really is. It's about envisioning the design, it's about imagining that design, trying to give it a visual form even though it doesn't really exist. A lot of ways UI designer is trying to visualize the invisible and this is one of the most important skills that UI designers have. One of the easiest ways to start to do that is to start to look at style boards. So, if we go back to our original idea of a digital microscope for amateur scientists to operate on your phone, we could start to think about what that might look like. So, to begin with we could do some visual research, which is easy to do nowadays where you can go online, you can find copyright-free images, for instance, and we could look at what kind of images might look like they're seeing through a digital microscope. We could look at scientific images, we could look at how the phone could be used as a microscope and this will give us a range of what the imagery might feel like. We could pick a typeface as well that might have a suitable feeling or suitable style for this particular mood in this particular app. likewise, we could pick colors so we can have a color palette that we might use and these are all very very broad design elements that we're choosing. For instance, here I'm picking a color palette just out of the imagery that I've already found to try and get a relationship between the color palette and the imagery. As you start to put these things together and do research, it means that you're creating a mood and a feeling of imagery, of color, of typography. So, if we take those research images that we found, we could actually use those and we could build a single piece of work that has a mood and a tone that tries to reflect what we're trying to get at with our app. So, I could take some of the microscopic images, for instance, and blow them up, create some gradations, have them feel very scientific and because this is for amateur scientists, I might want to depict exactly who it is that the app is for who's going to use it. I can also use certain kinds of shapes, for instance. Perhaps in this case circular shapes that might indicate looking through a microscope and have a visual reference to that. I could show what it's like to actually use the app. So, you can see somebody holding a phone, for instance, and looking at a close up of something through the microscope. So, I'm trying to get at what is the visual look and feel of this app but I'm also trying to get at what is the experience of it, what's going to feel like when it's finished product without really doing very much work at all, without making the finished product at all. I'm really just taking a group of images and trying to paint a very broad picture of what it might feel like to use this app without any details at all. So here, for instance, I could also look at some test type, I could look at a certain kind of topography, put the color palette back in there again. I'm ready building up a style frame that I could show to somebody and they could look at this and they could have an idea of what my intentions were and what the feeling of the app might be. As I mentioned, it's this apparent way of trying to envision something that is invisible. So, we started from one sentence that was described in text and we're trying to end up with something that is purely visual and has a lot of mood and a lot of feeling to it. So, let's try doing that again but this time let's take a different visual approach. Let's take our same starting sentence. In other words, we're going to use our same prompt our same brief but we're going to take it in a different visual direction. So, here we're going to use much more vector-based imagery. It's going to look less hardcore scientific, it's going to look a little bit more fun, it might have a slightly younger audience. So, already even just from our initial visual research, it looks very different. So, even though we're taking the same visual brief, the same prompt of visual representation of it is very very different because we've made design decisions that have changed that. So we're going to put these images together in a very similar way that we put the scientific photographic images together, so we can compare the two and see how they feel different. So, let's take some of these vector drawings of scientific instruments and we will blow these up very large. They'll be much more friendly, a little more cartoon-based, we can have a more cartoon like Avatar to lead us through the project, for instance. We can look at some color palettes that are perhaps a bit more fun, again for more youthful audience. We could keep the circular motif that worked quite well from before, that seems to represent the idea of looking through the microscope. We can build this image in a very similar way but it has a totally different feeling than the more serious photographic scientific version we had before. This version now feels like it's a lot more fun, it could be for a younger audience and that might have some implications for how that might work, what it might do and how you might use it. We could throw some smaller free form elements in there as well to fill in some of the gaps. We can pick a different typeface for this one, it's a lot more fun. So, let's pick something that's perhaps a bit more contemporary, less scientific. How about something that is a geometric sanserif, for instance, something that is quite neutral but quite contemporary as well. We'll do the same exercise where we'll take parts of the color palette and we'll use those so we'll pull that out of the imagery to make a color palette. So, you can see if we slot together these two different screens that we'd made, you can see how they feel very different even though they're using a lot of the same compositional elements, they're using a lot of the same ideas in terms of their content. So, to reiterate, it's really about the look and the feel and that has a strong relationship to who might use this kind of app. So, we're back to our original questions about what is the app exactly? Who is it for and where does it live? These two screens might take those questions into slightly different places. For instance, the one on the left might be much more scientific and serious and again the one on the right much more playful. If we take our two screens, we can analyze those and start to come up with some adjectives to describe them and that'll help us push that direction that we want to go in even further. So, we've made things that exist in a purely visual form in a very emotive and a very mood-based way, but we could actually turn that on its head and pull it back towards language in order to describe what we've done.
