In this section, we're going to look at structures and grids and how those work in user interface design. Graphic design isn't very familiar with using grids. They use them as an invisible way to align elements in order to get them to work together. In the last section, we looked at how the real estate of a mobile device differs greatly from that of a computer screen and how this affects the kind of design and elements that we might have on those screens. For the most part, this meant having a lot of single tasks on multiple screens for a mobile device, a lot of multiple tasks on a single screen for say a website on a computer screen. This is going to have an effect on how we think about structure and what kind of grids we might use for these two different devices. A grid can be used for any size screen and any amount of screens. It's really just a useful way for the user interface designer to organize the elements of their interface on the screen and to structure content so that it works for the user. So, let's see what kind of organization system and what kind of grid works for these two different screens. Let's start out by looking at a website and let's say the main place that that's going to live is on a larger computer screen. We've already established we're going to have multiple tasks on a single screen and that means we're going to have more elements to organize. Of course, we have a larger space to work with. Some basic principles of graphic design composition will really help us: how to use grids, spacing, scale, come up with a system and be consistent within that system. All of these tools are very familiar to graphic designers because they're the same tools we've been using for print design for many years. While these ideas don't translate necessarily directly into the digital space, it's pretty close. They're really fundamental tools for arranging elements within a space and we're going to stick to this as our design centric process where we're really focusing on how things look and feel and letting the visual nature of the interface really drive some of these big decisions that we're making at the start of our design process. Let's take a real world example and try to see how some of these design principles have been applied. Let's go back to the CalArts poster archive website and let's try and deconstruct it a little bit, take it apart and try and figure out how it was built. It has an overall structure that's very familiar from general web design and from our last class as well where the two main parts of the interface are divided into the header and the body and even though there's no clear dividing line between the two, they occupy different spaces for different kinds of content and different kinds of interaction by the user. The header is the place for navigation and the place where the user goes to make decisions about what they want to see and what they want to do. The body is the place where the content lives and the place where the user sees the result of any changes that they've instigated in the navigation area. Basically, the controls are at the top of the screen and the results of those controls show up at the bottom. For a site like this, we've got a lot of different components to organize and this is quite good because it gives us a chance to really see the grid. We can make it visible quite easily. All the grid really is, is a series of lines that obey a certain mathematical structure and these allow you to organize a lot of disparate content together. So, you can see here that all of the images align at the uppermost edge. You can also see that there's an equal space between all of the images, or the vertical images go from the top to the bottom of the grid space that we've created for them but because they're different proportions, they sometimes leave some blank space to the right or to the top and the bottom if it's a horizontal image. But we basically have quite a simple grid for organizing both images and text. The grid can be divided up into certain sections as well. We have rows that run horizontally and these are separated by the captions for each image. We have columns that run vertically. And once we've set a fixed value for our columns and our rows, it's a system that is very modular so we could use this on a number of different size screens with a number of different columns or a number of different rows. The space in between the columns is left blank and that's called a gutter, and the space on the outside edge, that's called the margins. Here I've left that a little wider so that all the content seems to cling together a little bit more. When we combine the gridlines for our rows and columns, we end up with two separate areas. The largest area is our image area and even though that's defined by the grid as being even, our content that fits into it as you can see here, might not always exactly fit the image area unless we wanted to enlarge and crop the image of course. So even though we're creating a modular and mathematical system, there are still a number of variables within that system so we have to make design decisions and rules about how those variables are going to work. We can see the same thing in the caption area. The space that we've created underneath the image area where we might have a different amount of text from one caption to another. So, this is going to create another set of variables. So in this case, you can see it's creating some variation in our grid, the height of the caption areas is not always the same. Let's zoom in a little bit and see how some of these variables work in the image area and in the caption area. When we zoom into our grid, we can see that the images in the image area go all the way to the edges and fill the space and this is great when the proportions are right for the image to do that. But that's not always going to be the case. Every image has a height and a width and that height and width isn't always going to match the height and the width that we've made with our grid. We have to decide how images with other proportions are going to fit into our image space and we're going to have to come up with a set of rules to make that consistent. In this case, I'm deciding that images have to either fill the width or the height of our image space. So if I have a square image, it's going to fit the width but it's going to leave even space at the top and the bottom. But if I have a differently proportioned image, perhaps one that is taller and skinnier, it's going to leave space at the left and the right side and this is going to visually affect my grid because my text aligns to the left, I'm going to decide to align my images to the left as well to try and create a strong visual line and keep my grid intact. While I'm allowing my images some responsiveness to my grid, I'm basically trying to keep everything as even and as systematic as possible. If I can, I want to try and keep all my horizontal and vertical spaces to be even, so the height of the image, the width of the image and the height and width of the space between the images as well. This basically creates boxes for me to work within. So, I have a box where I'm going to place my images and figure out a system for how the images sit in that box. But I'm also going to have a box for text and I'm going to have to figure out a system for how the text sits in that box. As soon as we have text, we have to think about typography. Getting topography to look good is really about making a number of micro-decisions that collectively contribute to good typography. So, the first thing that you can ask yourself is, what about the typeface? Should I set it in Helvetica or Times or Comic Sans perhaps? Think about what kind of mood you want to have, what connotations you want the typeface to have, but also think about functionality, which typeface is going to be the most readable at the right size. We can't decide that until we try out some different sizes. So, you can see here even though the typeface is the same, by changing the size, it changes its relationship to the text box. Also, when the type's bigger, we see the form of the type so we get more of its character. When it's smaller, it just becomes functional text for reading only. So, let's say we choose the medium-size text. We still have to figure out its relationship to the text box. Where is it going to sit? At the top, in the middle, or at the bottom and how much space is it going to have around it? All of these small decisions affect what the type looks like but also how readable the type is. But there's a secondary effect as well. Depending on how we organize the type, we change the amount of negative space that we're creating, and so we build a different relationship in our grid between the text and the image. If you're working on a website that has a lot of content and really needs a grid, it can be quite useful to start out with that grid even if you're just using it with dummy content. Here's an early wireframe sketch of the CalArts poster archive website for instance and it's before we even have any images or have any information to plug-in there. What we're trying to do here is figure out our grid and our system. We're looking at the scale and proportion of images, we're looking at how our captions are going to work, how our spacing between the images might work. We're also deciding which pieces of information go where. So, we're making some content and organizational decisions as well as making some formal design decisions, and we're doing all this without any real content. So, once we've come up with the design that we like, we can actually fill it full of content to see if it's really going to work or not. So, just by putting images into our grid and into our design, we can get a much better idea if it's really going to function or not. Remember, this is just a stepping stone towards a final design. We're really just looking at big design decisions here. We're trying to get an idea if we can create a grid, spacing, scale, some kind of consistent system that's going to work for our content, and we can do that without really having the actual content.
