In this section we're going to look at some ideas
surrounding composition and structure in the user interface.
How you arrange the elements of the interface can really
shape what kind of experience you want the user to have.
Again we're talking about how to shape content specific design here.
So these rules won't apply for every single app or website you design.
So let's take a brief look at some of these overarching concerns.
We've looked at some issues concerning the individual elements of your user interface,
but these overall issues tend to have a trickle down effect.
So it's worth thinking about structure and composition rather than
getting lost in the design details of any single element.
Let's use a pragmatic example,
something with functional content so it's a little less
objective when we try and analyze how it works.
So let's look at how we might build a simple calendar as an app.
Since we have functional content we're probably going to need a functional structure.
So the content and the users priorities are going to drive our composition.
We might need a small space for the title but we're probably going to need
a much larger space for the calendar itself where most of the action is going to happen.
But then we'll also need a space where a user can see the events that they're
choosing from that calendar and a small space for menu options at the bottom.
So you can see our compositional structure is being totally driven by the content.
Let's take one of these sections say the calendar section and develop it a little bit
more and we'll see how functionality is
really going to drive all of our design decisions.
We have a small fixed space to work with so we want our type
to take up as much of the space as possible but still be very legible.
It also has to be at a size where it can easily be
touched and the events have to be easy to read.
We probably want to know what time our events are happening,
and we'd also want them to be clearly separate from each other so we don't get confused.
So we're already creating a kind of visual hierarchy
even in a very limited way within this functional landscape.
Because our design palette is quite limited
any small changes really do make a difference.
Small changes in scale or weight or lines can be used to create our hierarchy.
We might need something that's visually more dramatic for
a larger event so we could use color for instance to show
the selected date and extend that visual system a
little bit more to show other dates that might have events hidden on them.
We could use color in a more subtle way as well,
for instance we could make the days of the week gray in order to push them
back since they're a static element that's always there in the same place.
We could use color to build a simple two-color system where
the static information is in black and gray
and the active information is in green for instance.
Or we could keep extending that system to show
more information for instance the amount of events that we might have on any given day.
If we needed to create even more hierarchy we could use a subtle color to show
the divisions the sections that we started out with
to divide the title from the calendar from the events.
We could also add ancillary icons and
symbols to make our app feel a little more believable.
It's always useful when you're making mock-ups
to try and make the app look like it actually works.
So we could add some navigation symbols,
we could add down in the bottom
some icons that give the app the appearance of functionality.
At this stage we're really looking at the user interface design
we're not thinking about the functionality of this app so much.
It's really just a visual exercise,
but that exercise can feel a little more real when we put real elements in there.
So let's also change the language so that again it looks like it's an active working app.
We can give it a name,
and we can add real events to our calendar.
So functionality has been driving all of our design decisions for this calendar.
But also familiarity because this calendar doesn't look
that different from any other calendar that might appear on your phone.
Because the basic structure of it has already been
figured out so there's no point in reinventing that.
But what we can do is hopefully either improve on
it or make our own aesthetic version of it.
In this example the composition and the structure
is really being driven by the content and that content,
the filter that we use to temper our design is really about functionality.
So the content is functional, the structure,
the hierarchy, everything that we're looking at is really to do with function.
So while that affects
a larger user interface decisions it also affects our smaller decisions about design.
So when we look at color and typography,
icons and symbols they're also being tempered by the content by that functionality.
A calendar is quite an extreme example it's the functional end of the spectrum entirely.
So let's see what happens if we pick a different kind of
experience something that's much less about
functionality and much more maybe about emotion or a bad experience itself.
Rather than building this interface step-by-step,
let's look at a finished example that one of my students made.
This is for an app called sense where with a hardware extension added to your phone you
can record smells and mix and match those smells to create sensory experiences.
Because the content is based around experience and exploration,
the interface follows the same direction.
It becomes a much more poetic experience for
the user rather than a purely functional pragmatic one.
The interface's image-based and somewhat ambiguous.
It has to be tried out by the user in order for them to figure it out.
It becomes a learned experiential interface rather than a fixed functional interface.
It's less concerned with looking like an existing operating system and more
concerned with creating a strong idiosyncratic individual visual experience.
So even when there are functional components to the interface they don't
look the same as what you would expect from the regular operating system.
The visual language of this particular app takes over every aspect of the design.
A lot of the communication of the interface elements is delivered through imagery,
which means that the imagery has to be meticulously controlled and composed.
Instead of four fronting functionality,
this user interface design prioritizes experience, mood and tone.
In these two different examples you can see how
the overarching design concerns trickle down
to really affect every aspect of the user interface design.
They affect decisions about content,
about composition and about structure.
What they have in common is the UI design solution is related to the content,
it's contextually appropriate, it's context specific design.
