In this last class of our course,
we're going to look at the stage in our process where we might be
finished with our static designs and handing them over to a programmer.
The programmer might cut these pieces up and put them into a working prototype.
So far, in our classes,
we've been thinking about interactivity,
but we haven't really been designing interactively.
If anything, we've been designing inactively or statically.
We've been trying to envision interactivity and represent it in our designs,
but they've all been pretty static,
and that design first process has been deliberate.
Were coming at user interface design from a visual perspective,
from a design centric process and focus.
We're really thinking about design first.
In many ways we've prioritized the role of
the user interface designer over the user experience designer.
As we saw in our very first week,
these two specializations are intrinsically connected to each other,
and have a lot of overlap.
Our methodology in this course is to isolate the UI so that we can focus on it,
so that we can spend more time looking at the issues to do
with formal design within the UI/UX process.
But even if we isolate the UI from UX,
they have to meet at some point.
Now is the time in that process we're making a connection between our forced division.
But that happens in the real world sometimes as well when a designer has to
supply a programmer with a bunch of visual assets for them to make a prototype.
So, when I'm working with my students on UI projects,
we often create as finished a mock-up as we possibly can,
and as many screens showing as many different options as we can make as well.
I'm trying to have them retain their focus on graphic design and the user interface,
but also trying to look at the context of how their app for instance,
is going to be used.
So, here's an app designed by one of my students that's a tool for analyzing composition.
In order to create a realistic representation of their interface design,
they have to design many screens showing all the different stages of interaction,
and these designs could go on to be the basis for creating a digital prototype.
A point of making so many screens,
is that we're trying to show interaction,
and motion, and engagement with the user through static means,
through a series of static images.
As I said before,
we're prioritizing the graphic design aspect of the user interface.
So, let's use this project as a way to recap and
revisit some of the things that we've learned about the user interface.
Let's take a couple of these screens and make them
larger and then we can deconstruct how they work.
Our overall division of the screen is quite familiar.
At the top of the screen,
we have an area to reinforce our branding,
but also to have some navigation elements,
some elements that would remain in
the same place throughout pretty much any screen of our app.
We could refer to these as our global navigation.
At the side of our screen,
we have a text-based menu,
and you can imagine that that appears and disappears as needed.
We have an area for content where our main activity is going to take place,
or where we're going to see the results of the choices we make in the menus.
At the bottom of the screen,
we have another menu that provides a set of tools
that could be specific to whatever content is happening in that area.
So, you can see that we've already established our main elements here.
We've got a grid, a structure,
and a set of rules to work with.
We've partitioned and organized our interface.
Even though we're working with static screens here,
we're not designing any kind of motion.
We can think about how our interface is going to work,
how our menu is going to come in and out of the screen,
how are we going to move through content?
All of these things can be considered and part of
our design plan without necessarily implementing them in these stages.
We can figure out what the rules are for our interface.
By dividing some of the sample screens,
we can get knowledge that we can use almost like a template to create other screens.
So, any kind of division that we might have in our menu,
any kind of composition and spacing arrangement to do with
images or content could be consistent through a number of screens.
In the same way that our movement and
our motion in the interface could also be consistent.
We can go a little bit deeper in analyzing our interface here.
If we take each of our sections,
we can look at how the graphic elements in each of those sections works.
We have a logo type that exists in our branding area,
and that's going to give us several design considerations to think about.
Not just the logo type itself,
but its size, position, and color.
If we look at our typographic menu again,
we have several design decisions to make.
First of all, how much space is our menu going to take up?
What kind of size should it be?
What kind of shape?
How are we going to divide that up?
What typeface do we use?
How do we use color, dividers?
There's plenty of design decisions here to give a
generic menu a very specific look and feel.
In our content areas,
most of the visual work is being done by the content itself.
The thing that is inside the box, inside the frame,
but we still have to think about the size,
position, color, and spacing of that content.
If we go back up top to our navigation and branding bar and think about our navigation,
we've got plenty to think about here even though it's a small area.
We have to think about our icons,
what color they are,
the size, and spacing of them.
Those considerations are also going to be the same ones,
in our menu at the bottom, our content-specific menu,
and here because the tasks that we're carrying out a more specific,
we might have to design some more specific or custom icons.
If we take all the various screens that the student
designed for this app and lay them all out at once,
we can see that they really work as a set.
There's a level of consistency there from screen to screen that's really important.
So, what we end up with,
is a ready great map of all our user interface elements,
and all the different ways that they could be used.
At this stage, we might not have figured out
all the different ways that the user is going to interact with them,
and all the different ways that the interface is going to change.
We really still investigating the graphic design and aesthetics of the interface.
So, the next stages are going to be;
to think much more about how the menus might move,
how buttons or elements might change states,
what kind of areas are going to be active, and generally,
to think about how are we going to bring our designs to life.
We're going to look at that much more in our next course where UI meets UX,
and our emphasis changes from being much more on graphic design and the user interface,
to much more on structure and how the user experiences the interface.
But UI and UX will continue to inform each other at every stage of the process.
But from now on, our focus is going to shift a little bit more,
so that user experience becomes the emphasis.
We're not abandoning our design-centric process here,
we're just taking it to the next stage, to the next level.
Once again, combining your UI and your UX knowledge
together is what's going to make you a great UI/UX designer.
Michael WorthingtonFaculty, Program in Graphic Design
