This design-centric course examines the broad question of what an interface is and what role a designer plays in creating a user interface. Learning how to design and articulate meaning using color, type, and imagery is essential to making interfaces function clearly and seamlessly. Through a series of lectures and visual exercises, you will focus on the many individual elements and components that make up the skillset of an interface designer. By the end of this course, you will be able to describe the key formal elements of clear, consistent, and intuitive UI design, and apply your learned skills to the design of a static screen-based interface. This is the first course in the UI/UX Design Specialization, which brings a design-centric approach to user interface (UI) and user experience (UX) design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone. These courses are ideal for anyone with some experience in graphic or visual design and who would like to build their skill set in UI or UX for app and web design. It would also be ideal for anyone with experience in front- or back-end web development or human-computer interaction and want to sharpen their visual design and analysis skills for UI or UX.
Look and Feel
Loading...
From the course by California Institute of the Arts
Visual Elements of User Interface Design
606 ratings
From the lesson
Formal Elements of Interface Design
This week we are going to examine the various formal elements that make up an interface. We’ll start out with the larger questions of content, context and audience that frame any UI/UX project. In other words: What is it? Who is it for? And, where does it live? And we’ll look at the big picture of overall design direction, what is often referred to as “look and feel”. From there we’ll go into detail of how the basic components of how visual design works in the context of interface design: language, shape, color, imagery, typography, and icons. These areas will be the formal building blocks you will use to create the more complex visual structure of a screen-based user interface.
Meet the Instructors
Michael WorthingtonFaculty, Program in Graphic Design
School of Art
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.
Explore our Catalog
Join for free and get personalized recommendations, updates and offers.
Coursera provides universal access to the world’s best education,
partnering with top universities and organizations to offer courses online.
© 2019 Coursera Inc. All rights reserved.
