In this section we're going to look at some ideas surrounding composition and structure in the user interface. How you arrange the elements of the interface can really shape what kind of experience you want the user to have. Again we're talking about how to shape content specific design here. So these rules won't apply for every single app or website you design. So let's take a brief look at some of these overarching concerns. We've looked at some issues concerning the individual elements of your user interface, but these overall issues tend to have a trickle down effect. So it's worth thinking about structure and composition rather than getting lost in the design details of any single element. Let's use a pragmatic example, something with functional content so it's a little less objective when we try and analyze how it works. So let's look at how we might build a simple calendar as an app. Since we have functional content we're probably going to need a functional structure. So the content and the users priorities are going to drive our composition. We might need a small space for the title but we're probably going to need a much larger space for the calendar itself where most of the action is going to happen. But then we'll also need a space where a user can see the events that they're choosing from that calendar and a small space for menu options at the bottom. So you can see our compositional structure is being totally driven by the content. Let's take one of these sections say the calendar section and develop it a little bit more and we'll see how functionality is really going to drive all of our design decisions. We have a small fixed space to work with so we want our type to take up as much of the space as possible but still be very legible. It also has to be at a size where it can easily be touched and the events have to be easy to read. We probably want to know what time our events are happening, and we'd also want them to be clearly separate from each other so we don't get confused. So we're already creating a kind of visual hierarchy even in a very limited way within this functional landscape. Because our design palette is quite limited any small changes really do make a difference. Small changes in scale or weight or lines can be used to create our hierarchy. We might need something that's visually more dramatic for a larger event so we could use color for instance to show the selected date and extend that visual system a little bit more to show other dates that might have events hidden on them. We could use color in a more subtle way as well, for instance we could make the days of the week gray in order to push them back since they're a static element that's always there in the same place. We could use color to build a simple two-color system where the static information is in black and gray and the active information is in green for instance. Or we could keep extending that system to show more information for instance the amount of events that we might have on any given day. If we needed to create even more hierarchy we could use a subtle color to show the divisions the sections that we started out with to divide the title from the calendar from the events. We could also add ancillary icons and symbols to make our app feel a little more believable. It's always useful when you're making mock-ups to try and make the app look like it actually works. So we could add some navigation symbols, we could add down in the bottom some icons that give the app the appearance of functionality. At this stage we're really looking at the user interface design we're not thinking about the functionality of this app so much. It's really just a visual exercise, but that exercise can feel a little more real when we put real elements in there. So let's also change the language so that again it looks like it's an active working app. We can give it a name, and we can add real events to our calendar. So functionality has been driving all of our design decisions for this calendar. But also familiarity because this calendar doesn't look that different from any other calendar that might appear on your phone. Because the basic structure of it has already been figured out so there's no point in reinventing that. But what we can do is hopefully either improve on it or make our own aesthetic version of it. In this example the composition and the structure is really being driven by the content and that content, the filter that we use to temper our design is really about functionality. So the content is functional, the structure, the hierarchy, everything that we're looking at is really to do with function. So while that affects a larger user interface decisions it also affects our smaller decisions about design. So when we look at color and typography, icons and symbols they're also being tempered by the content by that functionality. A calendar is quite an extreme example it's the functional end of the spectrum entirely. So let's see what happens if we pick a different kind of experience something that's much less about functionality and much more maybe about emotion or a bad experience itself. Rather than building this interface step-by-step, let's look at a finished example that one of my students made. This is for an app called sense where with a hardware extension added to your phone you can record smells and mix and match those smells to create sensory experiences. Because the content is based around experience and exploration, the interface follows the same direction. It becomes a much more poetic experience for the user rather than a purely functional pragmatic one. The interface's image-based and somewhat ambiguous. It has to be tried out by the user in order for them to figure it out. It becomes a learned experiential interface rather than a fixed functional interface. It's less concerned with looking like an existing operating system and more concerned with creating a strong idiosyncratic individual visual experience. So even when there are functional components to the interface they don't look the same as what you would expect from the regular operating system. The visual language of this particular app takes over every aspect of the design. A lot of the communication of the interface elements is delivered through imagery, which means that the imagery has to be meticulously controlled and composed. Instead of four fronting functionality, this user interface design prioritizes experience, mood and tone. In these two different examples you can see how the overarching design concerns trickle down to really affect every aspect of the user interface design. They affect decisions about content, about composition and about structure. What they have in common is the UI design solution is related to the content, it's contextually appropriate, it's context specific design.
