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.
Not Buttons
Loading...
From the course by California Institute of the Arts
Visual Elements of User Interface Design
440 ratings
From the lesson
Active Elements of Interface Design
This week we are going to take our static interface elements and begin to think about how a user interacts with them. In other words, how to bring these elements a stage closer to having a life on the screen. We’ll be looking at navigational conventions, such as menus, buttons, and icons in different states. Our focus will move from what the graphic interface looks like, to include how it works and how it responds to the user. By adding interactivity to our static designs, the idea is to think more deeply about the role the designer plays in shaping a user’s interactive experience.
Meet the Instructors
Michael WorthingtonFaculty, Program in Graphic Design
School of Art
In the last segment,
we looked at buttons and how to work with buttons and now we're
going to look at all the other things that aren't buttons in our interface.
So, how else do we navigate through our digital content,
if we don't use buttons.
Well, we have other systems in place, menus, links, fields.
On all of these different systems have to be designed by a UI designer.
They're all simple fast functional means of interaction.
Unlike buttons, they rely on design conventions that we're very familiar with.
There's no point reinventing all of these,
we actually have to work within the conventions that already exist,
because those conventions are there for a reason.
They're very successful.
There's some fundamental principles of graphic design
that we can consider in order to keep our simple,
fast, functional interface working.
We can use shape, scale, contrast, clarity,
and economy in order to reinforce and emphasize the goals of speed and function.
So, let's look at how we might apply some of
these design criteria to some simple interface elements.
Let's start out by looking at one of the simplest things of all, a text field.
On the surface of things,
it just looks like a rectangle with some contrast from the background,
but it can still have design decisions applied to it.
So, the shape and the scale of it could change for instance and
become functional or dysfunctional depending on what kind of move we make.
So, as a designer,
we can change the functionality of the text field,
but we can also change the aesthetics of it as well.
By small moves, we can make it feel different and give
the user a foreshadowing of the functionality of the field.
So, by giving it ran corners for instance we could
make it feel much more like it's a window for texting in.
Once we introduce that functionality to hold text,
we've suddenly got a relationship between the text in the box and now,
we really do have to consider our shape and our scale because the box now has a function.
So, we could make the text too big or too small or
we might have to consider how much text does the box have to contain.
Is it just for sending a very tiny amount of text
or is it going to have the capacity to send a whole paragraph.
So, again function and aesthetics are intertwined.
We could also think about whether the field has the ability to change
its own shape and respond to the amount of text that's filling it.
As we look at the relationship between the text and the field,
we have to now start to think about ideas of clarity and economy.
We don't want to waste space and we also
want to have the text to be as legible as possible.
So, we might alter the size and letting of the type but we might also alter,
the shapes and proportions of the box.
Even when we have a good relationship
between the size of the type and the size in the box,
we have to decide on the overall size of that element within our interface.
Once again, we would need
more contextual information about how this is going to work on a screen.
How much text is there going to be,
what kind of background is it going to have.
Is it a single message or part of a conversation.
Once we know a little bit more about the function of the design,
we can go back to our design criteria shape, scale, contrast, clarity,
and economy and start to let those things inform the user interface design.
Right now, the placement of these speech bubbles isn't very economical.
There's too much white space between them,
and if there's two people having a conversation,
how do we know which person is which.
We could use color to show that.
We could use other design conventions to
accentuate one voice coming from the left and one from the right.
By adding tails to the rectangles.
We turn them into speech bubbles,
which is also another convention that we're very familiar with.
So, even in a design that were very, very familiar with,
you can see how many small decisions there are to be made by the interface designer.
These micro decisions all contribute to the ultimate look and feel of the interface.
Let's look at another example of a really basic interface element.
Let's say that we have a text field for entering data,
where the data is very limited.
For instance, entering your first and last name.
When I go to enter my name,
there's immediately a problem.
My first name might fit,
but I have quite a long last name,
so we're definitely going to need a bigger box.
Once more as the interface designer,
we're having to negotiate that balance between aesthetics and functionality.
In this case, we have two pieces of information.
One typographic piece acting as a label and the other acting as the data that we enter.
This is not a very economical way for us to build our interface.
So, we could think about combining those two things into the text field itself.
Now, we have to think a little bit more about
the relationship between the text and the text field,
because they're sitting on top of each other.
Also, the text is now going to have to have a dual function,
in that it's a label and it's also going to change into editable text.
We could create a number of different design directions,
that look at the relationship between the background,
the text field and the text itself.
One of the things you can see here,
is that we've created different levels of contrast.
So, in some of these examples,
the text really stands out and in other examples,
the text field is the thing that is more visible.
It's not that any one of these examples is a better solution than any of the others,
it would again be contextual depending on the other components that we had,
and the kind of content that we were working with.
Some of these solutions might work better than others because they're more familiar.
They use existing design conventions
and those conventions aren't always the best solution,
but sometimes they really are.
For instance, if we think about a visual convention from the digital world,
we can look at some examples that are very, very successful.
So, if you think about links for instance,
there's a clear and simple way to show a link.
The simplest way is just to underline a piece of text and
this is so prevalent and so ubiquitous and just
the simplest way to do something complex that it's become
an absolute convention that we all use and understand very, very quickly.
So, when we're trying to create some of these interface elements,
there's no point reinventing the wheel.
We don't need to come up with a different language to show a link,
for example, it already exists.
We don't need to reinvent functionality but what we can do,
is change the visual aesthetics,
the style of those interface elements.
So, let's take another example to look at.
Let's look at a simple text menu.
We take simple text menus for granted because we use them all the time on our computers,
but they're actually a very economical and very clever way
of getting information to the user.
So, let's try and analyze what they do that work so well,
so, we can maybe use it for other things.
Our text menu allows us to have a dropdown type list and we can
go through that list and highlight whatever it is that we want to choose from that list,
but you can also have nested subcategories.
So, we can compact a lot of information into
that menu and make it be visible and invisible whenever we want.
So, it's a highly economical system.
Our text menus always live at the top of our user interface,
so we know where to go whenever we need them.
Because they're text-based, they can carry
any kind of function that can be described by text.
It's also a very economical system in terms of space,
because we can contain the sub menus and only make them be visible when we need them.
They work on a need to know basis.
They remain hidden and compact,
until we decide that we need to access that information.
Drop-down text menus are hyper functional.
We can contain a lot of information in them and a wide variety of information,
but we can nest that information and keep it hidden,
until we need it.
So, you can see it's the main way that we get a lot of our information within
the operating systems when we're using them on a computer
because it's so functional and so flexible.
That flexibility means, they can be used for almost anything,
no matter what the content.
All they're really using as graphic devices, are words,
some muted color, the odd symbol,
and a few lines.
With this very minimal palette,
you can do almost anything, but of course,
you might not want your app or website to look exactly the same as the operating system.
So, you can take some of those same principles of
functionality and compactness and redesign them,
to get them to work with the aesthetic of your app or website.
So, here's the website for the CalArts poster archive online.
It was designed by a couple of my students and it needed to have
some drop-down menus that fit the aesthetic of the website,
bu, also maintained the functionality of regular drop-down menus.
So, they kept the same kind of interaction,
but changed all the graphic elements in the menu.
So, the typography, the shape of the box,
how it appears and disappears are all different from the standard operating system.
It's such a simple element of interface design but
we often don't think about what we can do with it,
as a design component.
So, let's look at what some of the variables are for our dropdown text menu.
We could change the shape and the proportions of the box.
We could change the scale of the box in relationship to the background elements.
We can change the color,
we can think about its relationship to the other elements on the page.
While none of these design changes change the functionality,
they do change the look but they also change the feeling that a user is going to have,
when they use this menu.
We can go into a little more detail and look at some of
the micro decisions that might shape the look of our menu.
We can think about the typeface,
what kind of weight it is,
what kind of size, the leading,
space between the lines,
whether it's upper or lowercase.
The color of the type and how we're going to indicate a change
of state when the user selects one of the items from the menu.
In this case, there's no nested subcategories to think about,
but we might want to think about how the category might look,
when we've exited the drop down menu.
So, if you look in the top right hand corner here,
it's showing us what our selection was.
So, even in something as simple and familiar as a drop-down menu,
we've made many design decisions.
We've looked at shape, scale, contrast, clarity,
and economy, but none of these aspects of design exist on their own.
They're all interrelated.
You can't just fix one and expect all the other problems to resolve themselves.
Shape is related to scale,
is related to contrast and clarity et cetera.
Any one change you make in one of these areas,
will have effects on the other.
You can't change the scale without affecting the clarity, for instance.
What this means, is that interface design is a relational activity.
All of these different design decisions that you're making, are all interconnected.
Each design decision works in relationship with every other design decision.
So, you have to consider the more when you're designing each element of your interface,
but then you also have to think about how each of
those elements is going to have a relationship to every other element,
as well, to form your complete interface.
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.
