In this section, we're going to look at how to use imagery in interface design.
The most common use of imagery is as content in your app or on your website,
but we can also use imagery to create a mood,
or we can use imagery as part of our navigation,
or part of our interface system.
So, let's start out by looking at imagery as content.
We live in an image based society where we're constantly surrounded by images.
But on our screens,
most of those images are contained.
If you think about videos, or search engines,
or the images that we look at online,
they're nearly always images in boxes.
So, they really content that's being shown in a frame here.
That content can be anything.
It's really not about being part of the interface,
it's being the thing that we're delivering to the audience.
So, if we're doing the search for instance,
for something that we want to buy,
we want to visually see all the different variations that we could possibly have,
and the fastest way to do that is through imagery.
That imagery is contained and organized.
When images break out of the box,
and become their own world,
they act as immersive imagery.
You see this much more often in games,
sometimes in apps, but in animations as well,
where the imagery creates a whole universe,
a whole world, where things don't have to live in boxes anymore.
The way we use contained images,
is much more based on traditional graphic design.
It's really based on print layout,
where you have a grid, and you put things into a box.
But in the immersive world,
was a little bit more fluidity,
it's based much more on video games,
and animation, and film.
You tend to have more of a correlation between what the interface looks like,
and what the content looks like.
Both contained imagery, and immersive imagery,
come in all different styles.
So, there can be illustration,
that can be photography,
3D renderings, pretty much any style that you want to make an image in.
The benefit of the contained image is that, it's very pragmatic.
You can put anything into a box,
and have it sit side-by-side with anything else.
So, you could take illustrations and drawings,
have them sit next to photographs,
and the grid, the boxes that you're putting them in,
levels across all the content.
So, becomes a very functional comparative structure
for you to use in an interface design.
So, you see it especially when you need to
work across a lot of content that needs to be searched,
or work across a lot of different sized platforms.
When imagery isn't there as the content,
it's often there to create a mood.
You might be designing an interface for an app that doesn't
have a service that is image-based.
So, for instance, Uber doesn't want to show somebody getting in and out of a cab,
but they'd rather show a stylish illustration that makes it feel a certain way.
Feel a little bit up market to set a tone for what the service is.
You can see images working really hard to create moods.
If you look at stock photo sites,
the whole purpose of the photography here is to actually be non specific,
and most of the time to create a feeling,
or a mood that the audience is going to relate to,
rather than having a specific content in the image.
Sometimes when you look at mock-ups for websites that quite often using
stock images to try and create the right ambience or mood,
that's going to appeal to that particular audience or relate to that content.
Due to good old aesthetics,
imagery can't just be content.
Imagery always has a visual form,
and that visual form always has some style or aesthetic attached to it,
so thereby, it creates a mood.
Here's some images from CalArts website.
While they're trying to depict the events that are happening at the school,
they're also trying to have a visual form that expresses the energy,
and exuberance of the school.
Color, composition, and visual aesthetics,
can be really important in creating an image that's going to engage an audience.
That might be done in an overt way,
where the image looks very constructed and clearly has a concept behind it,
as in this example here.
Or it can also be done in a way that's a little more invisible.
These images from Apple, are very carefully
constructed to show the products often their best slide,
but to also sell a lifestyle,
and sell an aesthetic that goes along with the Apple products.
So, they're selling you both content,
and mood lifestyle at the same time.
Imagery can also be used as a tool for navigation,
but most often, this happens in a very reduced form.
Partly because the image has to work at a small size,
but it also has to be very recognizable.
But imagery can do much more than just being a symbol or an icon.
Imagery can be a more integral part of the interface.
Images can work really well as buttons as part of your navigation system.
This is partly because they accurately
represent exactly what you're going to get when you click on them,
there's no ambiguity there.
They can also work really well if the thing you're trying to
represent is very difficult to describe with words,
but easy to show with an image.
As we already talked about every time you use an image,
as well as doing whatever function you've assigned to it,
it's also going to have an aesthetic function,
there's also going to be mood and tone there.
So, for instance, a map on Waze looks very different to a map on Google Maps.
Waze is trying to create a visual aesthetic
that suits its user base, suits its audience.
It's trying to be more youthful,
more fun, and perhaps,
a little bit relevant.
But along with the aesthetics,
the map still functions in a pragmatic way.
The symbols and the interface all work perfectly.
So, our imagery is doing multiple things at the same time.
It's acting as mood,
it's acting is part of the interface,
but it's also the content in this case as well,
because it's the map itself,
and the cars and the accidents,
and everything that we want to see.
So, you can see that happening here in this interface designed by one of my students,
where it's purely an image based interface.
So, the content, the navigation,
and the aesthetics, are all being driven by the same imagery.
That imagery is controlled and aestheticised to make a beautiful interface.
So, you can have imagery as content,
imagery that's there just for mood,
or imagery that's there for navigation,
but you can never avoid the aesthetics of the image.
You can actually never avoid the mood.
So, even if your content is the only place that you have imagery,
it's going to have some implications for
what the app or the website looks and feels like,
and the same for your navigation.
You can isolate the content and
the navigation from the aesthetics and the mood of the imagery.
You're always going to have to deal with it in one way or another.
What this is acknowledging,
is that we're creating visual interfaces here.
What used to be called, Graphical User Interfaces.
We're not creating just lists of words for our content,
or we're not creating just words for our navigation.
Everything has a form,
and because it has a form,
it has an aesthetic value,
it can create a mood.
There's no way of escaping that.
Your content will always have mood,
and your navigation, or interface design will always have mood as well.
So, it's really worth thinking about the visual aesthetics,
and how you use imagery,
and the quality of the imagery that you have,
because you can't escape the fact that it's going to have an effect on the user.
Michael WorthingtonFaculty, Program in Graphic Design
