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.
