BASICS

INTERACTIVE DESIGN Dave Wood

INTERFACE
DESIGN
AN INTRODUCTION TO VISUAL COMMUNICATION IN

UI DESIGN

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 Fairchild Books
An imprint of Bloomsbury Publishing Plc

50 Bedford Square 1385 Broadway

London New York
WC1B 3DP NY 10018
UK USA

www.bloomsbury.com

Bloomsbury is a registered trade mark of Bloomsbury Publishing Plc

First published 2014

© Bloomsbury Publishing Plc, 2014

All rights reserved. No part of this publication may be reproduced or transmitted

in any form or by any means, electronic or mechanical, including photocopying,
recording, or any information storage or retrieval system, without prior permission in
writing from the publishers.

Dave Wood has asserted his right under the Copyright, Designs and Patents Act,
1988, to be identified as author of this work.

No responsibility for loss caused to any individual or organization acting on or

refraining from action as a result of the material in this publication can be accepted
by Bloomsbury or the author.

British Library Cataloguing-in-Publication Data

A catalogue record for this book is available from the British Library.

ISBN
PB: 978-2-9404-1199-3
ePDF: 978-2-9404-4757-2

Library of Congress Cataloging-in-Publication Data

Wood, David, 1963-
Interface design: an introduction to visual communication in UI design / David Wood
pages cm. — (Basics interactive design)
Includes bibliographical references and index.
ISBN 978-2-940411-99-3 (alk. paper) – ISBN 978-2-940447-57-2
1. User interfaces (Computer systems)—Design—Case studies.
2. Computer programmers—interviews. I. Title.
QA76.9.U83W658 2014
005.4’437—dc23
2013038749

Printed and bound in China

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018
4 Contents

Introduction 6
Chapter 1

Visual communication: 8
A standard in designing interaction

Communicating the UI 10
Designing for interactive flow 16
Users are king (you are not) 20
Interview: Steve Krug 28
Case study: We Print Paper website 32

Chapter 2

Finding the flow: Designing interaction 36

Graphical user interfaces 38

Information architecture 42
Global and contextual navigation in IA 46
Hierarchical structures 48
Testing, testing: Early design iterations 52
Interview: Greg Gibson 58
Case study: Testing of VedderPrice.com’s 60
visual hierarchy
Exercise: Finding the flow 64
Chapter 3

Graphic design for digital media 66

Gridding interactivity 68
Type as interface 74
Colouring the screen 80
Imagery and the pixel 86
Iconography and metaphor 90
Going with the motion 96
Interview: Mike Kus 100
Case study: Designing a Blu-ray UI 102
Exercise: Visually 106
communicating interactivity

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 5
Chapter 4

Designing the aesthetic 110

user experience

Design and the user 112

Content copy and the user 116
UI semiotics 118
Internationalization 122
Interview: Kristin Kramer 126
Case study: WorldSkills interactive kiosk 128
Exercise: Deconstructing UI semiotics 134
Chapter 5

Collaborating with the developer 138

The principles of designing modularity 140

The view from Mars and the 142
view from Venus
Modularizing the aesthetic 144
What the designer provides 148
Interview: Alan Bridge 150
Case study: Preparing a website design 152
for a developer
Exercise: Outlining modularity 156

Chapter 6

Augmenting human capabilities 158

through interfaces

QR codes – print meets interaction 160

Augmented interaction 164
The touch-screen world 168
Interview: Kate Ho 172
Case study: The Macallan Microsoft 174
Surface at Schiphol Airport
Exercise: Concept design for an AR 178
smartphone app

Glossary 182
Index 186
Picture credits 190
Acknowledgements 191

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 6 Introduction

An interface is the contact point The driver of a car doesn’t

between humans and machines. want to read a hefty manual,
A user interface (UI) on a or understand the complex
computer, smartphone, tablet or mechanical engineering that sits
game console consists of a ‘front- behind the sleek bodywork, or be
end’ visually interactive face that confused by an overcomplicated
communicates with a programmed dashboard. When they get in the
delivery system ‘back end’. These driver’s seat they want to turn the
‘front-end’ interfaces are known as ignition key and drive. Similarly,
graphical user interfaces (GUIs). anyone confronted with a new
UI for the first time wants the
A successful UI design blends outcome of their interaction to be
good usability, functionality quickly facilitated by good design.
and aesthetics to facilitate a This means that the aesthetic
successful outcome, based on and the functional features of the
the user’s requirements and interface must combine to produce
expectations. UI designs should a fantastic user experience.
therefore focus on a user’s needs
and expectations, not on what a
programmer or designer thinks is
logical or cool.

Online resources to accompany this title are

available at:

http://tinyurl.com/examplegrid.

Please type the URL into your web browser

and follow the instructions to access the
Companion Website. If you experience any
problems, please contact Bloomsbury at:
[email protected]

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 7

Aims The chapters

This book aims to do three fresh things Chapter 1 focuses on establishing

for interface design: visual communication’s key importance
in interface design and the designer’s
Firstly, it will take you through the
responsibility to the user.
hows, the whys and the wherefores
of designing user interfaces – from a Chapter 2 delves into designing for
graphic design perspective. interaction across a range of different
graphical user interfaces, before
Secondly, it will be an express journey
examining information architecture.
through the importance of user
experience and how to design better Chapter 3 creates a useful
interactions for humans, not machines. framework of important key points
on graphic design for digital media –
Thirdly, this book explores design
layout, colour, iconography, imagery
principles and stresses the importance
and typography.
of usability and aesthetics working
together – and shows how this can Chapter 4 builds upon this
be done. It is not a technical UI framework and applies these visual
book; instead, it provides a visual communication basics to effectively
communication grounding and facilitate a successful interactive
champions graphic design as a valid user experience.
standard in interface design.
Chapter 5 provides practical
Most importantly, the book will help for designers to improve their
demonstrate that designing for communication with the developer by
dynamic user experience means exploring each other’s needs.
exciting opportunities for creative
Finally, in Chapter 6 the book will
facilitation of user-control. Designing
conclude by looking at designing for
better interactions for a user does not
interactivity within our senses and
mean the designer losing control of
our environment.
their aesthetic – far from it.

The terms ‘visual designer’ and

‘visual design’ are avoided in this
book, although they are often used
to describe roles and outputs within
interface design. The terms miss the
richness of visual communication that
a designer from such a background
brings to designing interfaces.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

1
8

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 9

Visual communication:
A standard in designing
interaction
User interface (UI) design brings together
a team of specialists in order to create a
successful interactive experience for the
user. Jorge Frascara, an internationally
renowned professor of communication
design, explains visual communication
as emphasizing the method (design), the
objective (communication) and the medium
(visual) through the manipulation of text and
image into a graphical outcome. As such,
a graphic designer’s visual communication
skills are vital in ensuring a UI’s aesthetic
accessibility. This is done throughout the
entire UI design process.

This chapter looks at visual communication

as part of the design discipline and also
as a standard in designing interaction within
a collaborating UI design team.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 10 Communicating the UI

Interface design is a complex Graphic designers in the UI team

process involving the UI design
There are often misunderstandings
team, the target users and the
about what a graphic designer can and
client. It is an iterative process,
will contribute to UI design, a common
with phases of user research,
idea being that graphic design simply
ideation, testing, building, and
involves creating graphics to ‘skin’ the
further testing, all contributing
UI code. This ‘visual design’ decorating
to the design of an interactive
phase is expected to come at the end
user experience. The graphic
of the project, once the rest of the team
designer is important to the design
has done the ‘real work’.
process, but is very much part
of a team of other specialists. This misconception of what a
Graphic designers must be graphic designer contributes to the
confident in their own specialist UI design, and at what point, stems
knowledge to successfully design from an unfortunate focus on the
the UI’s aesthetic, but also have word ‘graphic’. Graphic design is
a wider contextual knowledge not about designing a graphic; it
to communicate with the rest of is about designing effective visual
the team. This communication communication. This communication
begins at the ideation stage of the is crafted by the graphic designer,
project, well before any code or through manipulation of text and
designs have been developed. image, into an aesthetic that is suitable
for a particular audience.

Aesthetics is an integral part of the

users’ experience of any interface.
It guides them towards key interactions
in the UI, allowing them to achieve
their goals. It communicates action
and content, making connections
between the users’ hearts and heads in
facilitating their interactive outcomes.
Through the graphic designer, visual
communication becomes an important
standard in UI design, ultimately
‘A good designer sees the leading to the design of a better user
organic process where experience. The aesthetic of the UI
others are chained to engages and holds the attention of
the perceived technical the user before any link is clicked or
limitations or perceived any code is processed. Therefore the
possibilities of a system.’ graphic designer’s skills should be
– Anon utilized throughout the entire design
process, not just at the end.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 11

1.1

1.1
Innovative navigation
The synthesis of strong visual
communication and engaging
coding can create a fantastic
user experience. Canadian
design company GRIP knows
it works. Their website is
innovative in its navigation and
content delivery, and the strong
visual communication attracts
and separates the content.
www.griplimited.com

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 12 Communicating the UI

Neither Mars nor Venus It takes effort to see a project from

each other’s viewpoint, but effective
Each specialist in a UI design team
collaboration is a crucial part of
has a different contribution to make.
designing a successful UI.
Information architects create the
interactive structure. User experience A great designer will work within the
(UX) designers create the experience. constraints of the brief – such as
Developers create clean UI code. budget, accessibility, target user, and
Graphic designers communicate the available technology – shaping the
UI’s visual hierarchy, functionality visual elements of text and image
and interaction. to communicate the content and
navigation. Constraints fuel designers
In any team, tension between
to create successful UI design
specialists can exist. Within a UI
solutions through collaboration with the
design team, this often comes down
rest of the UI design team.
to cost implications, different specialist
languages and varying perspectives The combined work of both designer
on how to design an interface. If and developer will be a UI that is
many online forum debates are to be coded well and has an aesthetic that
believed, there is particular tension attracts, retains attention and is usable.
between UI designers and developers. The UI will undergo some form of user
So much that designers could be from testing throughout the design process
Mars and developers from Venus. to ensure this. Usability expert Steve
Krug suggests a variety of methods
to do this (see his interview on
pages 28–31).

The UI design team

A UI design team will ideally include at least:

— An information architect defining the

interactive structure 1.2 
Mars and Venus
— A user experience designer making the UI Not all design teams succumb
usable for both the client and user to the conflicted view of
— A graphic designer shaping the UI’s designers vs developers.
aesthetic accessibility Companies such as Athlon
Productions believe in close
— A developer writing the front-end mark-up collaboration to achieve
and the back-end code successful designs.
www.athlonproduction.com

1.3 
User experience
German developer Martin Gauer
uses great coding and quality
visual communication to create
innovative and successful
user experiences.
http://attackemart.in

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 13

1.2
www.athlonproduction.com

1.3
www.attackemart.in

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 14 Communicating the UI

1.4
www.designs-on.com

T-shaped designers But deep specialist knowledge is not

the end of a T-shaped designer’s skill
A useful metaphor to describe great
set. They also develop a secondary
designers used by the international
contextual knowledge of how other
design consultancy IDEO is ‘T-shaped’
disciplines work, and a broader tertiary
designers. T-shaped designers have
understanding of socio-cultural,
deep specialist knowledge of their own
political, ethical, ecological, economic
discipline. This enables them to be
and technological contexts. After all,
confident in explaining what they do to
design doesn’t exist in a vacuum.
different specialist team members. The
In the T metaphor, these secondary
vertical body of a capital ‘T’ represents
and tertiary levels of non-specialist
this specialist knowledge.
knowledge form the top bar of the
capital T.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 15

1.5

Breadth of knowledge

Depth of
‘We are what we call
expertise
‘T-shaped’ people. You
need a deep knowledge of
your expertise area, like 1.4
interactive design, but also IDEO T-shaped
designers at work
a broad understanding of
IDEO’s work in designing
many different disciplines. for interaction covers more
And you need to be humble than just interfaces and they
to be able to collaborate actively engage in teams of
T-shaped designers working
with people with different
with developers, psychologists
kinds of knowledge.’ and engineers to create great
– Juho Parviainen, interactive user experiences.
IDEO designer www.ideo.com

1.5
T-shaped design
The idea of ‘T-shaped’ design
knowledge emphasizes the
importance of deep specialist
knowledge alongside a broad
awareness of contextual factors.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 16 Designing for interactive flow

The scope of the graphic This flow is immersive as the user

designer’s contribution to the team doesn’t always consciously realize
throughout the design process is they are in it. If the UI is well designed,
broad before it becomes specific. the user’s experience is a positive
Designing for interaction is really and subconscious enjoyment of the
designing the ‘flow’ through the interaction. But if the UI’s design
interactive process in a way causes problems, the flow is disturbed
that creates an enjoyable and and the user is jolted out of that
aesthetic experience for the immersion. So to design a successful
user. Interaction itself is a loop of flow the following questions must be
cause/effect/feedback, and the kept in mind:
user experiences a flow through
these steps. The UI is the visible — Does the user KNOW what to
control of that flow, and usability do in the UI?
is the outcome of a flow designed
with the user in mind. — Can they DO what they want
to do?

— Do they FEEL they have achieved

something when an action
is completed?

‘Interaction designers
answer three questions:
How do you do? How
do you feel? How do
you know?’
– Bill Verplank, designer
and researcher

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 17

1.6

...feel?

...know? Tactile
Aural
Visual

?
map
control

path
...DO?

1.6
Interaction loop
If a user knows what to do
then they also need to feel
they’ve achieved it. That means
a mental map, control and
feedback – a loop of interaction
(the illustration is based on a
diagram by Bill Verplank).

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 18 Designing for interactive flow

The graphic designer in the flow information architecture, wireframing

and paper prototypes of the UI. They
The UI design process follows a
can shape the hierarchy, navigation
common path, whether the project
and content, helping to identify
has a short or long deadline. In the
and address visual communication
existing conceptual framework of the
problems that affect usability at an
UI design process, there is a tendency
early stage, before they become too
to place the graphic designer at the
costly to correct.
end of the flow under a title of ‘visual
design’. However, the graphic designer
can make valuable contributions to
the look and feel of the UI right from
the beginning of a UI project. This
can be in the production of personas,

1.7

UI Objectives
UI Objectives UI Specifications
UI Specifications Information
Information
Architecture
Architectu

Client Objectives
Client Objectives ContentContent
(ROI) (ROI) Personas
Personas

User Needs
User Needs Functionality
Functionality Wireframes
Wireframes
& Paper& Paper
and Goals
and Goals Prototyping
Prototyping
CONCEPTION

CONCEPTION

VISUALVISUAL
COMMUNICATION
COMMUNICATION
UI FRONT-
UI FRONT- & BACK-END
& BACK-END CODINGCODING
INFORMATION
INFORMATION ARCHITECTURE
ARCHITECTURE
USER EXPERIENCE
USER EXPERIENCE

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 19

1.7
Graphic design positioned
In this diagram, the height of the
coloured circles reflects which
design specialism takes the
lead for that part of the process,
and which are in support. This
diagram demonstrates where
graphic designers’ visual
communication roles should be
utilized. As can be seen, it is not
at the very end of the UI
design process.

UI Design
ure UI Design UI Design
UI Design UI Design
UI Design

Front-end
Front-end Back-end
Back-end Final Design
Final Design
COMPLETION

COMPLETION

(main responsibility
(main responsibility
of the graphic
of the graphic
designer)
designer)
(main responsibility
(main responsibility
of the developer)
of the developer)
(main responsibility
(main responsibility
of the information
of the information
architect)
architect)
(main responsibility
(main responsibility
of the UX
of the
designer)
UX designer)

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 20 Users are king (you are not)

We are all users. We all know

the frustration we feel when
an interface gives us a terrible
experience, but a member of the
design team is not a typical user
– they know too much, preventing
objectivity in UI design projects.
User frustration is blamed on
either themselves and/or the UI.
But when the UI performs well and
a user can achieve their goals with
ease, the delight that ensues is
attributed to the user experience.
In short, a good UI is an
‘invisible’ UI.

The user, whether male or female,

young or old, has certain personal
goals when engaging with a UI. These
may be to play the movie (Blu-ray
UI), select a character (game UI), buy
a book (eCommerce UI), or find out
tomorrow’s weather (app UI). These
goals are not necessarily the same as
those of the developer, the designer
or even the client. The user may be
the client’s paying customer, but their
interest is in achieving a satisfying
outcome to their own interaction. It is
this that the design team must
make happen.

‘Making the simple

complicated is
commonplace. Making
the complicated simple,
awesomely simple,
that’s creativity.’
– Charles Mingus

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 21

1.8

1.8
Overloading the user
The user may not be as
interactive savvy as the design
team. Don’t overstress them
with feature overload. Find out
what their flow is and design
for them. This ensures that the
user is a constant focus in the
design of the UI. In this example
from Baldur’s Gate, the use of
contextual ‘greyed out’ calls
to action indicates unavailable
options at that point in
the interaction.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 22 Users are king (you are not)

Balancing the needs of client This can be achieved by conducting

and user deeper user research, involving the
user at each stage of the design
A smooth interactive flow is the result
process in one way or another.
of thorough research, implemented
Focusing on designing the user’s
into clear information architecture.
experience places design decisions
The client is not the actual end user.
within a context that forces everyone to
If research is based only on the client’s
be empathic to another human being
marketing research, the resulting flow
– the user. This empathy encourages
will reflect only what they would like
the design team and client to create
to feature in the UI. The desires of the
a UI that helps the users achieve their
client and the needs of the user must
individual goals.
be balanced so that the client gets a
return on their investment (ROI), and
the user is provided with a
satisfying interface.

1.9

UI Objectives UI Specifications Information Architecture U

Client Objectives (ROI) Content Personas F

User Needs Functionality Wireframes & Paper

and Goals Prototyping
CONCEPTION

Research Data Testing

UI FRONT- & BACK-END CODING (ma
THE USER
INFORMATION ARCHITECTURE (main res

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 23

1.9
Users are king
Building upon the diagram on
page 19, which demonstrated
the repositioning of the graphic
designer in the UI design
process, this diagram focuses
on where the user fits into the
design process. Visualized in a
white overlay, it is clear where
the user ‘is’. The user needs
to be a constant focus in the
design of a UI.

eUI Design
UI Design UI Design
UI Design UI Design
UI Design

Front-end
Front-end Back-end
Back-end Final Design
Final Design
COMPLETION

COMPLETION

ing TestingTesting TestingTesting TestingTesting

NG
ain responsibility
(main responsibility
of the developer)
of the developer)
sponsibility
ain responsibility
of the information
of the information
architect)
architect)

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 24 Users are king (you are not)

Defining the user So, who is a user, in terms of UIs?

They all differ in experience levels in
The term ‘user’ is very generic and
different parts of their lives. They each
abstract. Marketing people have long
have differing needs and expectations
tried to define which demographic
of the modes of interaction they
categories consumers fit into.
encounter on a daily basis. Product
What age, gender, religion, sexual
designer Philippe Starck has a method
orientation, height, weight are we?
of re-humanizing the people that his
Where do we live, shop, exercise, or
team designs for. He insists that his
work? What is our income level? These
designers refer to them not as ‘users’,
sterile facts help clients effectively
but with terms such as ‘my friend’, ‘my
target their products and services at
partner’, ‘my mother’ or ‘my father’.
the most relevant demographic groups,
By personalizing the user in this way,
but as humans, we are more than this.
Starck forces his designers to instil in
the otherwise abstract user a human
persona. In this way, designing for their
goals will be easier, as their personality
can be catered for. A user persona
embodies this.

1.10

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 25

1.10
Anatomy of a profile
Ciaran Duffy, in his profiling of
different types of Twitter users,
creates personality archetypes
featuring (1) an image, (2) name,
(3) background information, (4)
goals, and (5) challenges faced.
These fun profiles are similar to
the user information used within
a persona.

1.11
Game profiles
Players of computer games will
be familiar with game character
profiles. To enrich the playing
experience, each character has
a detailed profile and backstory.
It may help to think of a user
persona profile like a playable
game character.

1.11

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 26 Users are king (you are not)

Designing personas Persona components

A user persona is an important tool in Personas contain a narrative based on the

the designer’s toolkit. It is an archetype user research:

(not a stereotype) created to represent A photo to personalize the persona

the target user(s) in a form that will Name and descriptive title
inspire the design team. It takes the
Background information
form of a profile with a name, an image
and various amounts of information Goals

on each type of user. The creation of Quote to summarize expectations

personas for a project really requires Breakdown of challenges faced
a graphic designer’s involvement to
make it valuable.

Personas are essentially a character

sheet created from information
gathered during research into the UI’s
typical users. They can be thought of
as an interface between the designer
and a much deeper understanding
of each type of user. This approach
humanizes an abstract part of the
design process, helping designers
to generate realistic ideas in order to
drive a user to a valuable goal and
understand how the UI should fulfil
them. When in doubt, the design team
should ask, ‘What would persona A or
B want at this point?’.

‘The design team should

ask, “What would persona 1.12
A or B want at this point?”.’ User persona
The use of personas at the
ideation stage helps the design
team identify their target
audience, summarizing user
motivations, expectations,
experience, knowledge
and desires.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 27

1.12

Berenice Morella
UX Convert

Country: Italy
Age: 26

About Berenice
Berenice shares an apartment with two
friends in Milan. She is a first year
postgraduate student studying interaction
design at the Domus Academy. She had
worked previously as a junior graphic
designer in Rome before returning to
university to study user experience.

Berenice’s Goals
Wants to reposition Visual Communication
as a stronger influence on the design of
interactions away from the misconception
“I’d like to think that that she can only do the ‘aesthetic bit’ at
my design skills will the end of the project.
help people to have
more enjoyable user Challenges
It can be tedious to analyse the results
experiences” from research on the target user and she
feels that there must be some tool or
technique that will streamline the process.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 28 Interview: Steve Krug Role
Web Usability
Consultant,
You have said that there You mentioned that Boston, USA
is a common sense element sophisticated designers still
to usability. Can you get UI design wrong. In your Experience
Author of Don’t
explain that? book you say, ‘There’s not a
Make Me Think:
right or wrong way of doing
Jakob Nielsen said that usability A Common Sense
it, but what works or Approach to
is based on human nature.
doesn’t work.’ Can you Web Usability
Technology changes really fast,
expand on that?
but human nature changes
Web
really slowly. So the things that I believe in being very pragmatic
www.sensible.com
confused us ten years ago still that way. You can implement
confuse us now. almost any design notion. You
can implement it well, or you
I do think that designers
can implement it badly.
have become much more
sophisticated about usability. That’s the thing with
Ten years ago it was very interface design. Not every
uneven, and a lot of people user is the same user. Not
were still transitioning from every interface you design
print and hadn’t gotten over it. is exactly the same as the
They’d never seen a usability last one that you’ve done.
test. They’d never worked with So this pragmatic stance
anybody who had worked with is something that I think a
user experience. There was designer needs to take on
nobody in the loop who was the board, because you can’t
user advocate. But since then, design the right thing all the
I think graphic designers have time, can you?
come a long way.
Right, and what you have to
So I think, overall, the level of keep you from having disasters
awareness that you have to is usability testing. I think you
have the user in mind when go in and you do your best shot
designing has increased fairly based on your instincts. But
dramatically. It’s rare that you then you’ve got to watch some
see somebody who’s just kind people try and use it. That’s
of completely blissfully ignorant when you find out if you’ve got
of it. They still make all kinds it right or not. Other than that,
of mistakes, because it is very you don’t know.
hard to get it all right. Even
sophisticated designers who
have a lot of experience still
make mistakes. Which is why
I’m such a big advocate for
doing some usability testing, no
matter who you are, because
there are things you’re not going
to be aware of until you actually
watch somebody try and use it.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 29

1.13

The observer takes notes, The user will be given a The test equipment may
or ideally views the test task to perform using the be a laptop, a desktop, a
remotely via a video link. interface. TV or games console.

Task 1
GO

1.13
Usability testing
A simple UI usability test can
be done using a laptop (or
a desktop, a TV or games
console) and a video camera.
Steve Krug suggests testing
about three or four people
(not design staff) to reveal
any UI problems that need
addressing. Prepare a task to
test the UI design, ask each
user to perform that task. An
observer should take notes (or,
ideally, view the test remotely
via a video link) and debrief the
design team afterwards.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 30 Interview: Steve Krug

1.14

The user can be given

a task to perform on a
tablet or a smart phone.

Task 2
GO Simple video camera
to remotely view the
touchscreen.

Camera mounted on a
tripod or some other
mounting.

1.14
Observation
Watching the user remotely
from another room via a video
link allows the design team to
observe how the UI is working.
User testing with a camera
mounted on a tripod (or some
other mounting) allows for
more natural behaviour to be
observed. A user can even be
given a task to perform on a
tablet or a smartphone and it
can be observed.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 31

If you design for people with Would you say that a good
disabilities you’re obviously interface is essentially
going to be more inclusive. Is something that would become
there anything you’ve picked ‘invisible’ because the user
up from your workshops to experience allows people
get the accessibility message to effortlessly get what they
across to young designers? want from the UI?

I remember reading about In many cases if you’re using

students being made to put a thing and you’re not aware
on the wrong strength reading of it having an interface, then it
glasses to use a website. It probably means the interface
seemed like a pretty good has been tuned so well that it
approach. I do still believe the is meeting your expectations
best thing you can do is to constantly. That’s why you’re
make the UI usable. Get rid of not aware of it – because it’s
the worst problems, because meeting your expectations. So
if you’ve ever watched anyone obviously that’s a really good
with a disability in a usability thing. It can be as great looking
test running into a problem that as you want to make it as long
is a problem for everybody, it’s as the looks don’t get in the
like ten times worse for them. way of the user doing what
they want to do. I’m very
In chapter 2 of this book I
much in favour of stylishly
discuss hierarchy, wireframes
designed apps.
and paper prototyping. Within
usability testing, what’s your Is there any advice you
opinion on paper prototyping would give directly to a
your early UI designs, before designer, as opposed to
any code or branding has advice to a developer?
been applied?
Hard as it may be to treat all
Well, it’s a great thing to do. It these people as your friends,
works really well, and the thing try and find a way to respect
I always tell people is they can what the rest of the design team
test anything. But the truth is does. It may not look like it to
that there’s not a whole lot you you, but their job is just as hard
can test with wireframes. You as yours. They’re scared and
can test the navigation, you can intimidated at the start of each
test some of your hierarchy and new project – even though they
that kind of thing, but it’s not may not look it. Developers are
going to get very far. But with just as scared as designers; and
the roughest paper prototype project managers are just as
you can. It’s hard to get scared as developers.
people to do it though, unless
they’ve seen it done and had
experience with it.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

32 Case study Project
We Print Paper website www.
weprintpaper.
co.uk

Design team
The project elloDave,
Staffordshire, UK
elloDave is a young creative agency
based in the UK, with a focus on
Client
designing online and printed marketing We Print Paper
campaigns. This extends to designing
web presences, especially for new
start-up businesses. One such
company, We Print Paper, wanted help
developing a website through which
they could sell their affordable, online
automated printing services. As the
client was a start-up, elloDave had the
benefit of a flexible deadline lasting
over six months.

Among elloDave’s staff was final

year graphic design student Ben
Pritchard, who took on responsibility
for the design and art direction of the
website as an employed designer. Ben 1.15
conducted research, exploring what Original ideas
When Ben began working at
the client’s competitors provided and elloDave, the website’s original
what visitors to the website would design wasn’t working for the
actually want. It became clear to client. He began a total redesign
of the entire website from the
elloDave that the client’s order process ground up. The final design
was a unique selling point to the user, of the website took six design
which could be subtly exploited in the iterations. The first iteration of
the redesign began by giving
client’s favour. the interface clearly defined
horizontal content areas, and
Ben’s research also revealed that the removing the candy-coloured
customer base would be tech-savvy icons in favour of a more
people with digital artwork ready subtle approach.

to print online. This understanding 1.16

provided clear user needs and goals to Third version comp
design for. Ben, through each of his design
iterations, composited the
UI design together in Adobe
Photoshop and Illustrator ready
to be converted into CSS3. He
labelled each element’s layer
so that it could seamlessly be
exported for the developer to
use in the code.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 33

1.15
www.weprintpaper.co.uk

1.16

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

34 Case study
We Print Paper website

1.17
Final version: Illustrator rough
The design of the final UI
aesthetic was first compiled
in Illustrator. The UI elements
were aligned to a grid, with
the accuracy that the vector
program can give.

1.17 1.18
Final version:
Photoshop comp
Finally, the design was
transferred into Photoshop
to separate into modular UI
components. These were set
pixel-perfect, and labelled
ready for coding.

1.18

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 35

The graphic designer’s contribution A T-shaped Ben

Through early planning meetings, the The project took six months. In that
design team explored and defined time the user experience went through
the site’s information architecture six iterations before elloDave were
(IA). From the IA, they checked which satisfied. The decisions Ben made on
designs would and wouldn’t work for the visual communication gave visual
the user, and what the client needed affordances (clues or signposts) to the
as a return on their investment. They developer’s code. A suitably restricted
then agreed the technical and aesthetic colour palette emerged to subtly
requirements that would be needed to appeal to the client’s customers.
make the best user experience, and
By working closely with the developer,
therefore sell the client’s product and
Ben broke his final designs down
service. Originally, the website was to
into component parts ready for the
be coded in-house. But with the order
developer to code. Some parts of
process being the main user-centred
the design would be images (labelled
function behind the client’s business
for the developer), others would be
model, more specialist help was
visualized in the code via CSS.
needed from a freelance developer.
Ben clearly demonstrated his
Working hand-in-hand with the
development into a ‘T-shaped’
developer, Ben collaborated on
designer during this project (see page
shaping the aesthetic and code to
15). He began the project as a final
create the desired user experience.
year undergraduate design student,
Through continued dialogue, the
working as a professional graphic
graphic designer and developer
designer for elloDave on day release.
found different ways to design the
Through engaging with each team
aesthetic and push the code. Using
member during the project, he learned
HTML, CSS markup and server-side
exactly what a graphic designer can
programming, the developer
contribute to a complex design project.
connected the file uploader to a
back-end ordering system.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

2
36

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 37

Finding the flow:

Designing interaction
We have seen how the design of a
successful interface is a complex iterative
process, and that visual communication
is an important part of it. To illustrate
how the designer’s role contributes to
interface design, the subjects of information
architecture, navigation, wireframes and
paper prototyping will be discussed in this
chapter. These all take place during the early
ideation and scoping phases of designing
interfaces, before any branding has begun.

This chapter will take you beneath

the surface of the graphical user interface
(GUI) to reveal how to design the flow
of interactivity.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 38 Graphical user interfaces

Humans were not programmed Windows, icons, menus,

for computer use. Therefore pointer (WIMP)
computers (in all their many
We are familiar with WIMP GUIs in
guises) have to be programmed to
the software we use every day in
deal with humans, and it is the UI
our personal and professional lives
that enables interaction between
(such as Adobe InDesign, Illustrator
the two. It is the UI that makes the
and Photoshop). We are used to
interaction more intuitive, through
the working metaphors of opening
direct input and immediate
computer windows on our desktop,
feedback. In screen-based media,
selecting menu options with a
the UI is referred to as a graphical
cursor pointer, and clicking on icons
user interface (GUI). GUIs create
to perform tasks on our personal
visual affordances (‘clues’
computers, DVDs, TVs and in computer
to the purpose of particular
games. GUIs can be found on the
elements within a design) through
Web, accessed through browsers.
the graphic design, which
They are on our TVs in cable/satellite
communicate the navigation,
channel programme guides, on our
the interaction and the content
DVD and Blu-ray (BD) players, video
in an interface through the use
game consoles, and in our hands with
of visual metaphor. Traditionally,
portable media devices. A WIMP GUI
GUIs have been designed with
relies on input predominantly controlled
WIMPs – windows, icons, menus
by a computer mouse. Alternative input
and a pointer. Through these
devices for WIMP GUIs also include
visual components the user can
a stylus, a remote control, a game
interact and achieve their desired
controller/joystick/steering wheel or
outcomes. GUIs now also take a
a trackpad on a laptop.
variety of post-WIMP forms
across a variety of digital,
screen-based media.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 39

2.1

2.1 
WIMP
Windows, icons, menus and
pointers (WIMP) GUIs rely on
input devices, such as a mouse,
to make selections from menus
and icons using the mouse’s
cursor as a pointer. The content
is displayed in windows. WIMPs
are visual affordances for users
to interact with the computer.
Although not as quick as
command lines, these GUIs
are much easier to use for
those of us who are not
computer scientists.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 40 Graphical user interfaces

Post-WIMP Interaction using post-WIMP GUIs in

these new apps and digital devices
The personal computer is no longer
happens through both tactile
bound to the desktop. The GUI is also
(finger/thumb tips) and gestural
on our smartphones, tablets and now
(hand/body movements) sensory
the interaction is inputted in a more
inputs. To successfully design for this
tactile and direct way. We are now in a
form of interaction, the design team
post-WIMP world where input through
needs to understand the:
a GUI to access content has become
much more direct. The inputs of post- — psychology of the user and
WIMP interfaces have moved beyond their requirements
a mouse’s pointer, allowing us to
— technology to be used
navigate windows, select menus and
click icons through touch and gestures. — desires of the client and
This means that the designer can no their stakeholders
longer rely on just designing a variation
on a metaphorical WIMP interface
solution. The design team needs to
design for the user experience in new
and exciting ways, where the user is
the input controller.

2.2

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 41

2.3

2.2 
Touch interaction
Within a post-WIMP interface
the design of the interactions
must consider a more direct
input to access the content via
touch.

2.3 
Kinect-embodied interaction
Post-WIMP interface design
also needs to incorporate
embodied interaction.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 42 Information architecture

An integral part of designing for Functionality and usability

interaction is to first understand
Information architecture follows a
which elements need to interact
process of research, analysis and
with each other. Therefore it
evaluation to communicate to the
is important to know what the
UI design team how the target users
content will be, who it is aimed
will obtain their goals. It ensures
at and what technology it will be
the interactive structure reflects an
available on.
appropriate user experience. It is not
Whichever form and media the enough to have functionality; that
interface takes, whether it is functionality needs to work for the
a website, DVD, mobile app or person using it in a way that makes
a game interface, interaction sense to them.
flow needs to be revealed and
The IA focuses on making the UI
structured. By understanding what
structure usable, and this is of primary
needs to be connected through
importance to the user. Usability begins
a GUI, the optimum interactive
when design facilitates the user’s
structure can be devised. The
goals. This builds a user’s confidence
responsibility for this mainly falls
and raises their comfort level. In turn,
on the shoulders of an information
the client can capitalize on a positive
architect, in consultation with
user experience by converting this user
the design team. On behalf of
satisfaction into sales or leads.
the design team, the information
architect designs a navigation Information architecture, just like
pathway through the UI’s content. traditional building architecture,
The resulting interactive structure comes before anything is built. By
and navigation pathway is referred the same token, graphic design also
to as the information architecture comes before the finished build.
(IA). This informs the functional Graphic designers can contribute to
form a graphical UI will take, from the production of the IA alongside an
which the designer and developer information architect. But what does an
conceptualize the most effective information architect actually do?
aesthetic user experience.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 43

2.4

Ease of use

Users of all abilities fail interactive tests

that are confusing. Too often, design teams
overestimate the amount of complexity
that users can easily handle. They also
underestimate the extent to which using a
new interface can be a strain and barrier to
learning. This is compounded if design teams
assume all users are equally capable. Attention
to UI accessibility issues early on, through
research and testing, will reach more users
with or without disabilities. This will make the
2.4 UI more successfully effortless to use.
Navigation pathway
Information architecture reveals
an optimum navigation pathway
through the content to ensure
goals are met prior to creating a
UI roadmap diagram.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 44 Information architecture

The architect of flow X on the website’s homepage, because

they think that it is ‘at the right price’
Information architecture helps the
for their customers. But the customer
graphic designer, the developer and
(user) is not just concerned about the
the design team comprehend the
price – they might care more about
breadth and depth of the interactivity
colour reproduction. The information
that the UI needs to facilitate. The IA
architect will appreciate this and
maps a flow through the content before
will ensure that both these pieces of
any design or code has been created.
information are clearly communicated
An information architect’s role consists by finding the intersection of client
of several tasks: creating a content (want to sell printer) and customer/user
inventory, defining user personas, (want to buy printer).
revealing the interactive flow and
The architect will understand these
hierarchy, creating a UI roadmap
conflicts and prioritize a flow solution
diagram, and labelling all the relevant
based on user behaviour. This solution
parts with ‘user-facing’ names.
is based on research that is gathered
The architect first examines the client’s to understand both the audience and
‘as-is’ status (their current position) and the client’s needs. The main outcome
their ‘to-be’ status (the new position of IA is a diagram of these relationships
the UI intends to occupy). This exposes between content areas. This diagram
any content gaps, dependencies, has many alternative names, such
or content changes, allowing the as site map, site hierarchy map, site
architect to assess how far the client’s diagram, blueprint, or web map. The
desired position is from their current term we’ll use throughout this book is
position. This gap analysis suggests ‘UI roadmap’.
a business strategy within which the
UI will exist; the desired goals that the
users of the UI will expect; and how
the UI will make a return on the client’s
investment (ROI).

An example to explain this is

suggested by UX designer Kristin
Kramer. If a stationery supply company
uses an e-commerce website to sell
printers, the company’s ‘to-be’ position
would reflect their need to sell more
printers through their UI. So as the
design team’s client, the stationery
company would want to feature printer

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 45

2.5

Visualization tools

The software from Microsoft, Omnigroup,

Assure and Adobe all do similar things: draw
boxes and links between boxes. Software is
useful to cleanly visualize the relationships
between content areas; but pens, string, paper
and a wall do exactly the same thing. Some
favoured IA software includes:

— Microsoft Visio

2.5  — Omnigroup OmniGraffle

Communication tools
The clear communication — Assure Axure
of important content will be — Adobe Illustrator
managed by an information
architect to ensure that the — Pens, sticky notes, string and a wall
important content is accessible
and that flow is maintained.
This can be achieved with
software such as Vision or
OmniGraffle – or with low-tech
pen and paper.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 46 Global and contextual navigation in IA

The IA reveals complexity of Mapping the UI

relationships between content,
A UI roadmap diagram allows the
and how the navigation needs
design team to instantly see the
to work. There are two forms
content and navigation hierarchy and
that navigation takes: global
all ‘parent/child’ relationships between
and contextual.
associated content areas. It also shows
whether the navigation is linear (screen
Global navigation is available from
following screen consecutively) or non-
every page of the UI. Examples include
linear (jumping from screen to screen in
links to the homepage, to help, to print,
any order that the user chooses). This
and so on. Contextual navigation may
will show where global or contextual
only be available in a particular area
navigation is required, and what needs
of the UI, or on a particular subject
to link to what.
page. An example of this would be the
options on each window of a software
installation where the buttons change
their action-calls depending on what
step of the process has been reached.
Good global navigation allows the
possibility of transporting the user
across the UI structure to content
of their choice in a non-linear way.
Contextual navigation, on the other
hand, allows exploration within Main Entry Point
specifically associated content.

Home
(Level 1)

Subject 1
(Level 2)

External Link

Subject 1 Subject 1 Subject 1

Page 1 Page 2 Page 3
(Level 3) (Level 3) (Level 3) 2.6

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 47

The layout of the IA as a diagram

can be shown in a variety of ways.
Two common methods are to use a
hierarchical gridded structure, showing
each level in neat rows, or to use
a navigation contextual structure,
showing associations. Either way,
the IA content hierarchy will show
the levels of association, which can
be summarized as (1) main level, (2)
subject groupings, and (3) subject
group sub-content.

This content hierarchy mirrors similar

thought processes that a graphic
designer considers when designing
a visual hierarchy for the UI. It is
essential for a graphic designer to
understand the IA process, as they can
then appreciate the rationale behind
the interactive structure.

2.6
Website and DVD
Information architecture is not
just for the Web, it’s for any
interface, such as an app, a
game, a DVD or Blu-ray.

— Level 1
Level 1 of the interaction
includes the main entry point
and immediate subject areas.
Dotted lines indicate navigation
and boxes indicate screens.

— Level 2
The subject areas are often on
the second level of interaction.
Subject 2
(Level 2) — Level 3
The third level of content is
often the specific content within
each subject area. Therefore,
Level 3 offers clear areas for
subject-specific content. In
non-linear navigation, the
connections between levels are
Subject 2 Subject 2 Subject 2 quite complex and need to be
Page 1 Page 2 Page 3 visually communicated simply
(Level 3) (Level 3) (Level 3) through the interface design to
hide the complexity.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 48 Hierarchical structures

The user needs to be able to Therefore, every visual element that

differentiate navigation from is designed for the UI should be
content and all the interactive there to reveal important information.
options available to them. A Any elements that are given greater
hierarchical structure is used prominence should be doing that for a
to separate all the UI’s distinct reason, otherwise user confusion and
and group-related elements. frustration ensues.
This begins with defining a
There are standards and conventions
visual hierarchy of important UI
to structuring the visual hierarchy that
elements – from high importance,
should be followed. This still allows a
to secondary and then tertiary
designer plenty of scope for design
importance. Consistency is crucial
innovation if they consult their user
in achieving this. But context
research and the user personas to
also has an important part to
support their design decisions. If the
play. The visual hierarchy of
personas suggest a conservative user,
headers, navigation and content is
then conventional standards should
contextual and layered depending
be followed. But if the personas
on which page or section of
reveal otherwise, the designer has an
content the user is currently
opportunity to innovate a more exciting
in. A hierarchy affords the user
user experience, while still ensuring the
an effortless flow through the
user can achieve their goals.
interface by communicating what
is accessible, what is interactive,
and what to do next.

Interface hierarchies 2.7 

UI hierarchy 1
Graphic designers have a rich visual This is a visual hierarchy within
language that has been developed a selection screen from the
game Sim City:
over the last century through design (1) Screen title.
for print. Since the advent of the Web (2) Global navigation.
in the 1990s, this visual language has (3) Contextual navigation.
(4) Main content.
been adapted to embrace interactivity. (5) Contextual content.
An interface should be usable, and (6) Contextual information.
graphic designers – with a solid training
2.8 
in visual communication – understand UI hierarchy 2
that visual hierarchy helps reduce any The hierarchy of navigational
miscommunication ‘noise’. content within a limited screen
space needs to also focus on
Hierarchy helps communicate the principal goals a user will
want to achieve. But within
important information about interface limited screen space locations
navigation so that the user knows will vary from a desktop version:
when navigation is global, and (1) Screen title.
(2) Global navigation.
when it is only available within (3) Contextual navigation.
a specific context. (4) Main content.
(5) Contextual content.
(6) Contextual information.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 49

2.7

2.8

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 50 Hierarchical structures

Clarity through graphic design The use of a visual hierarchy

acknowledges that part of the design
The underlying hierarchical scaffold
process is designing a positive
a designer uses to structure the
emotional response in the user to
visual elements is a grid structure.
the UI. If the interface is designed
With grids come decisions on formal
well, users will attribute their sense
(highly structured) or informal (more
of delight with using the UI to a
fluid) composition of visual elements.
satisfying user experience. But any
The graphic designer will manipulate
frustration with the UI will be blamed
and balance these elements using
on the design of the interface itself. If
symmetry, visual rhythm and frequency
designers have done a good
of repetition to help the user to
job, then their interface will be
understand what is being indicated as
invisible to the user. An invisible
their next possible step.
interface is an interface that attracts
This manipulation and balancing is and retains user attention, with the
reliant on visual weighting, allowing aesthetic and functionality working
the eye to pass over and pause on harmoniously together.
important visual elements. Patterns,
colour and textures can help identify
changes in content areas. The balance
of spacing and proximity of elements,
the variance of line, shape, image,
typography and form all help to avoid
visual clutter. This crafting of the visual
communication by the graphic designer
creates unhindered movement and
paths through the content. By building
a visual hierarchy on an underlying
grid, the user can be guided to those
parts of the current UI screen that they
are looking for.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 51

2.9
athome.nfb.ca/#/athome/home

2.9 
Every element
Every visual element placed on
a UI screen should be there for
a reason. Even in this dynamic
data-driven UI from a website
by The National Film Board of
Canada the visual hierarchy
remains clear: the user knows
the title, the navigation and
the content, while the site still
retains a playful edge.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 52 Testing, testing: Early design iterations

There is a great deal of research Testing the navigation

into human-computer interaction,
Whether the interface is for a website,
in terms of what works in an
an app, a BD (Blu-ray disc) or video
interface design and what
game, navigation usually takes the
does not.
form of tabs, menus, buttons, or
People think ‘top-down’, so hypertext links. Tabs and menus
to enhance interactivity you have come to indicate the navigation
should make navigation obvious, locations, while buttons and links
convenient and easy to use. The indicate action. This helps the user to
labelling of navigation should use understand where they are within the
succinct ‘user-facing’ terms that interactive structure, and know where
they will understand. This will they can proceed to next.
ensure that users have a logical
If the user has no idea how to use
path to follow through the UI.
the navigation, they will leave the UI
On smaller screens and tablets,
in frustration. So testing is crucial,
the navigational information
and that means testing the proposed
hierarchy should be restrained.
UI design with ‘real’ users – not the
To implement these conventions,
design team. It is important that
it is important to test the design
testing is conducted early – even at the
solutions early and often.
ideation stage before any branding or
coding has been done.

Examples of UI design guidelines all

available in the public domain:

— GEL (Global Experience Language)

the BBC’s web UI guidelines for designing
their interactive services
www.bbc.co.uk/gel

— Mozilla’s Brand Toolkit for open source

developers of the Firefox browser
www.mozilla.org/en-US/styleguide

— Apple’s Human Interface Guidelines for

iPhone, iPad and MAC OS interfaces
developer.apple.com

— Alertbox website – Usability expert Jakob

Nielsen’s website on web usability
www.nngroup.com/articles

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 53

2.10

2.10 
Vote Band wireframes
Global and contextual
navigational flow to content are
clearly indicated in these early
wireframe diagrams for the
VoteBand™ app. The flow from
one area to the next is indicated
by the handwritten annotations
(wireframes will be discussed in
the next section).

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 54 Testing, testing: Early design iterations

Wireframing Wireframes show only boxes and

minimal text devoid of any aesthetic
Wireframes are a useful tool with which
or code, just to give a feel for what
to test the design team’s assumptions
the UI needs to feature. As such,
early in the design phase. They reveal
wireframing has been seen as primarily
the underlying logic, behaviour and
an information architect’s task, but
functionality of each UI screen. The
the team’s graphic designer should
information architecture will have
certainly advise as early as possible on
shown the designer what content goes
the visual communication aspects of a
where and what needs to link to what.
wireframe. This will balance the advice
This information needs to ultimately
on the coding and user experience
become a usable, intuitive interface.
requirements, and won’t restrict later
But how can this be communicated
design phases.
to the user visually? This lies within
the skill of the graphic designer, in Wireframing all the important UI
collaboration with the design team. screens is crucial to communicate
possible solutions, referring back to
The wireframe is not the finished UI
the personas (see page 27) when
design; it is a method for deciding what
decisions need to be agreed. Sketched
will need to be included. It takes the IA
at full-pixel scale for the digital media
and considers the technical platforms
it will be used on, a wireframe can be
that the UI will be accessed from. The
tested very quickly with real users in
wireframe also considers the input
a very informal conversation. This is
from the user (finger, thumb, mouse or
a quick and positive way to test the
gestural). In itself, a wireframe is simply
functionality of the UI so that the visual
a proposed layout using nothing more
communication of it can be optimized.
than lines, boxes and basic text. In this
very basic way it can show possible Although the aesthetic is absent from
frameworks for the visual hierarchy, a wireframe, it is still important to
navigation priorities and suitable indicate in full scale the location of
content areas. headers, footers, sidebars, navigation,
content areas, and secondary links.
This highlights the number of variations
and reusable elements that would be
needed in the final design.
Wireframes do not work when:

— they are confused with a finished design –

keep them as outlines with no branding.

— they dictate an absolute layout to a

designer – wireframes should still
be flexible.

— a graphic designer is not engaged in a

wireframe design – involve a designer.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 55

2.11

2.11
Wireframe development
Wireframes are not the final
design that just needs ‘colouring
in’. It is an active dialogue that
will guide the designer in their
design iterations. When user
flow is understood, a designer in
consultation with the information
architect can help sketch a
wireframe of all that needs
to feature on each interface
screen. This shows the scope
of the elements that need to
be included in the final graphic
design for the interface.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 56 Testing, testing: Early design iterations

Paper prototyping Testing during this early design phase

generates valuable communication
Paper prototyping adds another and synergy between the design team,
dimension to what wireframing client and intended users. Any problem
achieves. Based on the wireframe solving comes from this observation
outlines, whole sections of the UI can of each user and helps a designer
be quickly tested for functionality, understand user thought processes.
revealing any design problems. Testing a proposed UI solution in such
The paper prototype is not meant a lo-fi way is a valuable and cost-
to test the code or any visual efficient way to convince a client of the
communication beyond the basic validity of the final design solution.
interactive structure. The UI is To get the most out of the test, it is
sketched on paper – again without any important that the design team only
branding or identity (only navigation observes and lets the user dictate their
labels and headers will be written in flow through the interface. If possible,
full). Lines of scribbles are drawn to the design team should use video
indicate where body text will go, boxes cameras to observe the user from a
with crosses indicate images or video. distance, so they do not unintentionally
This rough ‘low-fidelity’ (lo-fi) paper influence them.
prototype focuses the user’s feedback
on the UI’s functionality and interactive
flow. To ensure it presents enough to
test, all the main UI parts need to be
drawn, such as variants of screens and
elements. Users are presented with the
first paper ‘screen’ and will be given a
task to achieve. Testing around a given
task in this way generates questions
that demand solutions.

The testing of a paper prototype

proceeds one sheet of paper at a time,
with each sheet representing a window,
menu, action and so on. The user will
use their finger to point to ‘click’ where
they believe links to be. With each
click, the paper screen is changed to
represent the next interactive step.
Any additional elements, or changes
needed to existing ones, can quickly
be made to the paper prototype, often
right in front of the user testing it.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 57

2.12

2.12
Hi-fi wireframing
Once the wireframing dialogue
in the team has happened, and
consensus has been reached
as to the optimum layout that
will help the user achieve
their goals, a more polished
wireframe can be produced to
ensure clarity of communication.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 58 Interview: Greg Gibson Role
Honours
undergraduate
As an undergraduate student is the main difference between student, Glasgow,
working on your Honours the layout of print and web. It’s Scotland, UK
project you’re exploring mainly to do with the coding
Experience
website visual hierarchy. and that you have to consider
BA(Hons) Graphic
What is it about web hierarchy using percentages now.
Design for
that is useful to you as a Digital Media
So you saw the relevance
graphic design student?
between traditional print-
Well, the reason I chose visual based graphic design Web
www.greggibson.
hierarchy is to see how to guide techniques and applying it for
co.uk
the user around an interface the Web?
using visual elements. I think
Yeah. The grid has been around
I began to delve into it when I
for ages. But the Web is new,
was on exchange in Finland and
and constantly advancing so I
learning about the theories of
was able to just adapt it to this
Jakob Nielsen and Steve Krug.
new medium.
I always knew I wanted to do
web design. I really wanted to So far in your Honours project
find out what these theories you began by looking at
really mean. wireframing to understand
interactive structure. Why did
I have categorized the hierarchy
you think it was important to
into three different visual
do that?
elements: colour, layout and
typography. Different typefaces I had to design a website for
you can use obviously give a a client in another degree
tone of voice for the website. module. The first stage of this
A sans serif could be used for meant analysing websites that
titles and then a serif for the were similar to what the client
content areas. Colour is used to was proposing, which was
link important areas. In layout, an architectural website. So
especially in Western cultures, I looked into seven or eight
we read left to right. So the different websites to understand
most important area is the top how they laid out the content,
left, and the least important the why they did it that way and find
bottom right. There are a lot of the most interesting examples.
technical aspects about layout I did that using wireframes to
within web design. When you’re really break down the content
coding you have to lay out the without the distraction of actual
content so that it will work in images. That then led me on
different browsers. to a layout for my own website
design. It improved the overall
The way people interact with
website and how the user would
the Internet now is with mobile
interact with it. The feedback
phones and tablets, so you
from the client was really good.
have to really consider layout
for all these devices. I think that

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 59

With laying out the content, I From an early stage you’ve

could quickly see where things had an interest in eye-tracking
were wrong, and didn’t look usability tests. What was it
good, or a user couldn’t interact about that particular type of
with it. I printed out screenshots usability test that appealed
of each site, and put tracing to you?
paper over it and drew each bit.
When you’re showing a design
I boxed out all the navigation,
to a client who does not have
the main content areas, and
a graphic design background,
then tried to figure out what
they do not really understand
sort of grid system they used.
the layout of the content. So
It’s surprising how many people
eye-tracking tests (see page
don’t really think about it. But
61) is a way of proving the
when designers do actually use
methods, and giving the client
a grid system, you can work it
facts and figures that they can
out and see how they laid out
understand. I can show them
the content. I guess it proved
that if they do the design one
that the grid system made
way it won’t work, but if they do
things look consistent, but there
it another way it will. Having the
was also room for variation.
physical evidence is one of the
Have you looked into making main things I want to achieve.
the website dynamic to scale
So how many people do you
across any browser, on any
think you will need to test?
platform, on any machine?
I’m thinking about five to six
Yes. I think what they do in
people will be enough to have
the coding is use percentages
a variation on how people
so the content can fluctuate,
interact with it. I’ll revise the
but they also have different
design using the results and
stylesheets for different
hopefully come up with an even
platforms. So if you are using
better design. I’ll then have
it on a mobile device, it will
the results to show why I have
change to a different layout.
implemented the design in that
Only a certain amount of
sort of way. I’ll then redo it and
information will be displayed on
see if the users interact with it
the small screen compared to
in a better way, and are more
a laptop.
satisfied with it. I think with
design you’re always learning,
especially in web design.
You always have to keep
pushing yourself.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

60 Case study Project
Testing of VedderPrice.com’s visual hierarchy Hats or icons
www.vedderprice.
com/london/

Design team
Finding the flow Fishman
Marketing Inc.,
In a recent marketing campaign for the
Illinois, USA
Chicago-based law firm Vedder Price’s
new London office, Fishman Marketing Client
used eye-tracking technology to test Vedder Price LLP,
two shortlisted website designs. Eye- London, UK
tracking uses cameras to trace a user’s
eye movements around a screen.
The data it generates can be used to
determine how effective a website’s
visual hierarchy is.

The two designs, ‘Hats’ and ‘Icons’,

were intended to help Vedder
Price’s new London office convey
the same strategic message – that
they’re supporting their aviation
finance practice from London, UK.
The company had a complex target
audience who would require different
information and amounts of detail from 2.13
the website. It was important for the Hats and Icons
The two website ideas were
website design to communicate an ‘Hats’ (left) and ‘Icons’ (right).
aviation- and London-focused identity The former was a humorous
to this audience, and generate design based around iconic
British hats, and the latter was
income for Vedder Price’s new deemed more conservative,
UK-based office. focusing on comparative icons
from the USA and the UK.

2.14
Eye tracking
2.13 The eye-tracking software
follows the user’s eyes around
the UI screen to see what areas
they look at the most. These
areas show up the hottest (red).

2.15
Viewing order
The eye tracking is useful in
establishing the order in which
the visual hierarchy is actually
viewed. This information
is useful for a designer in
evaluating their design decisions
regarding the UI’s aesthetic.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 61

Visual attention level

More attention Less attention

2.14
Fixation order*
*based on average time to first fixation

2.15

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

62 Case study
Testing of VedderPrice.com’s visual hierarchy

Testing the flow Evaluating the flow

Eye-tracking software generates Results from the eye-tracking testing

data, rather than opinions, from a showed that the more conservative
test audience. It helps the design ‘Icons’ design idea proved more
team examine the order in which the successful to the intended audience
users viewed the content, and for than the ‘Hats’ idea. Although two
how long. The flow of each user’s thirds of those tested thought the
attention through the visual hierarchy ‘Hats’ idea was more creative, the
is recorded via cameras, tracking eye aesthetic style was deemed not to be
movements around the screen. These as effective as the more traditional
eye movements create ‘hotspots’ on ‘Icons’ idea. As the target audience
the screen, indicating the areas users was international, and needed to be
looked at the most and for the longest comfortable with the new office’s
period of time. This collected data London-focused website, the ‘Icons’
works on a principle that users often design was chosen.
‘scan’ content rather than reading it,
The user testers received both ideas
and such testing helps quantify the
positively, but the ‘Icons’ idea recorded
areas they spend the most time on.
96 per cent of users noticing the
important headline ‘Vedder Price’s
New London Office.’ They spent 2.5
seconds reading it, and then spent 4
seconds scanning the supporting news
paragraph. On ‘Icons’, this was the
fourth thing that users found, whilst it
was the seventh thing that was looked
at on the ‘Hats’ design. The use of eye
tracking helped confirm that the ‘Icons’
website design conveyed Vedder
Price’s message more effectively to its
target audience.

‘Great UI design doesn’t

just make something
attractive. It makes
it effective.’
– Ross Fishman,
Fishman Marketing

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 63

60% 56%

50% 47%

40%

30%
24%

20% 18%
19%

15%

10%

0%
Creative Boring Traditional

2.16
Quantitative summary
This bar chart quantitatively
summarizes the data from
the user tests, demonstrating
perception calls on which
design was qualitatively
2.16 more effective.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 64 Exercise
Finding the flow

2.17

2.17
The final outcome
You should end up with
something like this, showing
specific content sections
(colour-coded sticky notes),
and demonstrating parent/
child relationships between the
section main page and its own
content pages. In your version
(A), (B) etc will be replaced with
the links on the homepage. A.1,
B.1 etc will be replaced with the
links on each subject page.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 65

Premise 4 Using the string and wall putty,

connect the ‘Homepage’ to the level
In this chapter, information
2 subject pages.
architecture and hierarchy (of
navigation, content and the 5 Now focusing on each subject page
visual) have been discussed. separately, look at what links are in
Understanding underlying that section (for example, the ‘About’
interactive structure is important section pages may feature pages on
to the design of a successful UI. ‘History,’ ‘Team’, etc). Use a smaller
But where does this sticky note to record these sub-pages
understanding begin? that form level 3.

This exercise will allow you to 6 Stick these smaller sticky notes on
understand flow by deconstructing the wall under their ‘parent’ section,
an existing interface. What you grouping them under their subject to
learn can inspire and inform you in show association and context.
any future UI design projects. You
7 Using string, connect these smaller
can conduct this task on your own
sticky notes to each other and to
or in groups, and it only requires
their parent.
four things:
8 After repeating steps 5, 6 and 7 for
— sticky notes in several colours
each section/subject area, use a
— string (different coloured different colour string to connect
cotton, wool or twine would each page BACK to the homepage,
be fine) AND to any other page that is linked.

— Blu Tack (or any reusable Note: For this exercise, stop at LEVEL 3,
wall display putty) even if the chosen website has
more levels.
— a big wall.

Outcomes
Exercise
You should see a very rough hierarchy of
1 Choose an existing small UI.
interactions on the wall across the three
2 Write ‘Homepage’ on a colour content levels. Is the revealed interactive
sticky note and place it centrally on structure far more complex than you
the wall. This is level 1. initially thought it would be? This
technique works for any form of UI (BD/
3 Write on a different colour sticky
DVD, app, even game UI). It makes you
note, each section/subject name
deconstruct the complex flow of how
that appears on the homepage
content is made accessible to
(‘About’, ‘Contact’, etc). Place
the user.
these in a row underneath the
‘Homepage’ note. The colour
change indicates that these pages
are at level 2.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

3
66

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 67

Graphic design
for digital media
This chapter discusses the important
building blocks of graphic design for
digital media, which are crucial for creating
effective visual communication within a UI.
Grids, typography, colour, images, motion,
iconography and metaphor are explained
and put into a context that can be applied
to the design of any UI.

Interactivity, technological platforms and

the display screen are all important factors
that the graphic designer must consider.
These factors provide both constraints and
opportunities for design innovation.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 68 Gridding interactivity

A grid is an underlying framework Grids – functioning aesthetics

that graphic designers use to
A grid consists of both vertical and
place content and navigation in
horizontal sections forming columns,
a controlled way, to aid visual
rows, margins and gutters. The
communication and define a focal
baseline of the grid is informed by the
point on the UI screen.
x-height of the typeface. This is the
Within UI design there has always vertical height of a lower-case letter,
been an issue regarding set sizes such as ‘a’ (not letters with ascenders
to design for. In print design, set or descenders, such as ‘h’ or ‘y’).
page sizes such as A4, A3 or US
Grid units of measurement can be
Letter are clear, but with digital
based on the pixels (px), which are
devices and different screen
relative to the screen resolution
resolutions there are far more
and only use whole numbers; or
variants to consider. Screen
percentages (%) which allow for user-
resolution needs to be taken into
control of the size of screen used; or
account as it dictates how many
on ems. The em is favoured in CSS3
pixels are available in the grid.
to lay out grids. An em is relative to the
Therefore, a UI graphic designer
size of a typeface’s current point size.
needs to understand how grids
It has finer size increments and it
can help them design better BD/
scales well.
DVD, game, web, TV, tablet or
smartphone interfaces. Understanding the importance of
‘white space’ (negative space) allows
the hierarchy of the design to be
revealed and enables the eye to quickly
find content and to have moments of
rest. The aesthetic skill of a graphic
designer can make a design fit to a
3.1
Resolution guide grid, while keeping the grid invisible.
It is crucial when designing a Working against the grid may also
UI that the design team has a be useful if the UI design needs to
clear understanding of what
resolutions are available to communicate energy and movement.
them, so they can design in But working with no grid at all only
confidence that the user will contributes to poor design decisions.
have the UI optimized for
their display.

3.2 
The Grid System
The use of an underlying grid
allows designers to establish
a clear, effective hierarchy
and thereby allows content
to be clearly accessed. The
Grid System is a very helpful
resource, explaining more about
how to choose and use a grid in
your designs.
www.thegridsystem.org

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 69

3.1

optimized size 600 x 300px (browser resolution 640 x 480)

optimized size 760 x 420px (browser resolution 800 x 600)

optimized size 955 x 600px (browser resolution 1024 x 768)

3.2
thegridsystem.org thegridsystem.org

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 70 Gridding interactivity

Considering the screen Design teams working on UIs for TV

display need to consider whether the
The UI elements to be placed in the
screen will be displayed as a standard
grid are defined as modules. These are
(UK/US) 4:3 ratio or as a widescreen
repeatable components defined from
(UK/US) 16:9 ratio. The difference
image sizes, video player sizes, and
in ratios has a direct influence on
so on, on both their x-axis and y-axis.
gridding as the edges of the display
As repeatable rectangular modular
on different TVs vary. Any important
components, they are easy to arrange
navigation or content that bleeds off
on the gridded screen. However, not all
the screen at the edges may be lost if
screens are the same.
this is not taken into account. To avoid
this, designers need to ensure that
navigation and content modules are
placed within the defined action safe
area (inset within the screen) for the
chosen screen ratio.

3.3
Mafia II
This screenshot from Take Two’s
game Mafia II has an overlay of
action and text safe areas within
The flexible 12-column grid a screen ratio of 4:3. The outer
red rectangle shows the area
A 12-column grid can be reduced to 2-, 3-, where action remains visible
4- or 6-column variations. There are several across all TV screens set at
popular gridded systems in UI design that 4:3. The inner yellow rectangle
come from web design: 960px, 976px, or shows where content that is
1140px width grids. Within the 960px width textual will be safe.
grid, 12 columns would be 60px wide. Each
column would have a buffer of 10px each side, 3.4
allowing for a 20px gutter between columns. Suggested gridded layout
In the 1140px grid, 12 columns would be 84px The BBC GEL (Global
wide with a gutter of 24px. Both have Experience Language)
their benefits. guidelines suggest how to set
out navigation, content and the
styling elements on top of the
underlying grid. The grid can
be more flexible than these
suggestions as other variations
are possible (see page 52).

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 71

3.3

3.4

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 72 Gridding interactivity

Gridding: bespoke The difference between the display of

or dynamically fluid? a website on a desktop and a tablet
will be small, but significant. Likewise,
Tablets and smartphones provide an
the display of an app’s UI on a
interesting dilemma for the UI designer.
smartphone and on a tablet will be very
A screen can flip from portrait to
similar. In each case, a responsively
landscape orientation in response to
designed fluid grid will optimize the UI
a simple hand rotation, and the UI has
through jQuery code to display in the
to instantly rearrange all the layout,
best format for the device.
navigation and content to match the
view. An iPad has a screen ratio of 4:3
whilst an Android tablet has a ratio just
over 16:9, so any app or website needs
to be designed with these variations
in mind.

This puts a strain on effective designs,

as the underlying grid needs to
structure the page in two orientations
at once. These problems are being
solved through the intersection
of clever coding and clear layout,
achieved through collaboration
between the graphic designer 3.5
and developer. Dynamic grid ratios
On the left is a layout on an
The design team will either design the iPad in 4:3 ratio, and on the
right an Android tablet with a
UI to fit each platform (web, tablet, OS ratio of 16:9. It is clear how
etc) separately; or use jQuery code to the fluid gridding of the layout
define which platform is being used. doesn’t just translate between
ratios and orientation views. The
The UI can then determine the screen typography and image size are
size available and make itself fluid, in conflict (as can be seen by
resizing its layout to fit. Responsive the overflowing image in the top
right image). The layout needs
design is just such a method used to be set in the code relative
in web design. Using CSS3 media to the orientation and each
queries to determine the device and device’s constraints.

the size of the display, the code 3.6

resizes the layout and content Dynamic grids
to suit the device. The underlying code needs to
optimize the layout responsively
for each screen ratio and
viewing style. The scaling of
the text and image is critical to
creating responsive designs for
each platform and helps avoid
distortion when flipping
between orientations (left-hand
side images are portrait views
– right-hand side images
are landscape).

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 73

3.5

3.6

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 74 Type as interface

Functionally and aesthetically, Typefaces or fonts: typography 101

typography allows written content
The textual content and navigation
to flow and differentiate itself
of a UI is made intelligible, readable
from other content within the UI.
and findable through the selection
The thoughtful selection of the
and manipulation of each typeface.
most suitable typeface, at the
Typefaces can be manipulated in three
correct size for the reader, aids
ways: kerning, tracking and leading.
the communication of meaning.
By adjusting these elements, the
To achieve this communication,
graphic designer can optimize both
typography manipulates typefaces
the aesthetics and functionality of the
through word height, letter style
written content.
and spacing between words,
letters and lines. As such, Kerning
typography gives the designer
Kerning allows the movement of one
control over the readability, tone
letter nearer to or farther from its
and form of the UI’s text, but this
closest neighbour. This adjustment
must work with the underlying grid
focuses on the negative spaces that
in order to be effective.
words create and maximizes the
balance and rhythm of the letters to
facilitate scanning and comprehension.

Tracking

Tracking allows the horizontal spaces

between words to be increased or
decreased. The optimal number of
words per line is 12 to 15. Too much
tracking between words will reduce
readability. Too little, and the effect will
be the same.
Typeface classifications Leading
Display Leading allows an increase or decrease
a typeface that is suited to short headlines and
notices (Impact) in spacing between baselines, and can
have dramatic effects on readability.
Monospaced
each letter’s width is exactly the same (Courier) Vertical spacing that is too tight can
cause text to look cramped. Too much
Sans serif
a sans serif is a letter without a serif (Helvetica) spacing can also adversely affect
readability.
Serif
a serif is a bar that sticks out from each letter’s
top and/or bottom (Times)

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 75

3.7

Typeface
m
Cap height Sans serif

m
x-height
Em

Baseline
Descender line

Serif
Bowl Ascender Counter form

m
Stem Slab serif
(Square)

Descender Crossbar Letter form

Type
Negative
Kerning Kerning

Collisions Allow for the

happen if descenders
the leading when setting
is too tight leading depth

3.7
Anatomy of a typeface
As can be seen in these
diagrams, the anatomy
of a typeface is complex.
Structurally, the typeface can
ascend up to the Cap Height
above the size of a lower-case
letter (x-height), or below the
baseline to the descender line
for those letters such as
lower-case y and g.
Typography manipulates the
typeface through leading,
tracking and kerning to ensure
reading clarity, and also to
create personality in the text.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 76 Type as interface

Typography for UIs Calls to action and visual affordances

The complete control a graphic Within a UI, the areas of the interface that are
designer has over static type in print interactive, and therefore clickable, need to
be clear to the user. HTML-coded websites
is not the same with UI design, as have a standard where blue underlined text
user-control makes UI typography indicates a link. Other interactive elements
more dynamic. With touchscreen usually indicate their ‘clickability’ when the
cursor pointer changes to a finger. These
smartphones and tablets, the input is are referred to as ‘visual affordances’ – they
now far more direct than on a PC with communicate a call to action that will lead to
a mouse. As such, the leading on a an outcome.

tablet device needs to accommodate

input via a fingertip; and on a
smartphone, some input is made using
the thumb. Since a thumb is broader
than a fingertip, the leading needs to
be sufficient to allow this kind of input
as well.

Therefore, for the same UI to appear on

a desktop, a tablet and a smartphone,
variations of the UI will need to be
available. This can be achieved either
by designing and coding responsively,
or making different versions for
each platform to accommodate the
necessary typographic variations.

A UI on a smartphone, as opposed
to a PC, is likely to have fewer
available links, increased leading and
reduced type size. With web UIs some
typographic advances in formatting
coding have balanced out the user-
control, allowing the typography to
work more dynamically. In designing
web UIs, CSS3 has given the designer
more control than ever before over how
type is displayed.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 77

3.8

Leading needs
to comfortably
fit the fingertip.

3.8
Type for fingertips
On a smartphone or tablet,
the amount of space for call to
actions needs to be operated by
a fingertip. Leading that is too
tight will result in an overlap of
each link’s active areas, which
would cause confusion.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 78 Type as interface

Type on screen Serif typefaces are fine as headers, but

sans serif typefaces are safer for body
Not all typefaces are optimized for
copy as they work consistently at any
screen use. Those that the Web
scale. Serif typefaces in body copy
inherited from print, such as Times
at small sizes make the text harder to
and Helvetica, were not designed with
read. Display, decorative script or black
pixels in mind. But typefaces such as
letter typefaces should never be used
Georgia and Verdana were designed
for body copy, navigation or captions,
for pixel display. A reader’s tolerance
as readability is compromised.
to reading and understanding text on a
screen is variable. People read around It is advisable, to avoid setting blocks
10 per cent more slowly on a screen of text in a grid column as justified
than with printed matter, and in reality (straight left/right edges), centred
scan more than they actually read (except captions) or in capitals (often
in full. seen as shouting). Body copy should
be legible and easy to ‘scan-read’.
Text in a UI can take different forms:
To help the legibility of body copy,
navigation, calls to action, captions,
it is good to set paragraphs of text
headings and blocks of textual content
within a grid column flush left. If each
(body copy). The body copy needs
paragraph has either a 1em indent
to sit in the UI within a hierarchical
at the beginning, or a line between
context (so the reader knows what is
paragraphs, it helps the user to scan
most important and the order in which
the text.
content should be read). This content
needs to be clearly defined next to
navigational elements, image and video
content, so the use of columns to
break up the text is crucial. This is why
the relationship between typography
and the layout’s underlying grid
is symbiotic.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 79

3.9
www.art4web.sk/en

3.10

3.9
Type as interface
Within the written content of the
UI, the copy can itself become
the interface. Web design
was built upon hypertext links
moving from page to page via
words turned into navigation.
The blue underlined link is a
basic visual affordance that the
word is a link to a call to action
– although the coloured text
shown here is also a clear call
to action.

3.10
Type hierarchy in grids
In implementing a visual
hierarchy in a grid with type, the
baseline becomes important.
In this example, various type-
based interface elements
range in text height sizes from
36px down to 11px, and are
given various different weights
(bold, capitals, normal). But
each line of text is aligned to
a baseline with the leading
suitably adjusted to ensure that
it remains readable.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 80 Colouring the screen

Graphic design for print and Displaying colours

screen use two different colour
Modern screens can display 65,000
space models. Print uses a CMYK
colours per pixel, depending upon
colour space of four colours:
resolution and the graphics card of the
cyan, magenta, yellow and black,
device. However, not every monitor or
whereas screens use an RGB
device is calibrated in the same way,
colour space of red, green and
so there are still traditionally only 216
blue. The RGB colour model
colours that are deemed ‘web-safe’.
is referred to as an ‘additive
Colour on web-based UIs is controlled
model’ as it adds together the
by the code through a conversion of
red, green and blue to create
the RGB values into a hexadecimal
all the visible colours. Beyond
value. The values that make up the
the technical and mathematical
range of hexadecimal colours begins
structures of colour lies its effect.
at 0 and goes up to 9, and use the
Colour is effective in non-verbal
letters A to F. Hexadecimally, white
communication as it affects our
(RGB value of 0) reads as the code
emotions on a subconscious level.
#FFFFFF, and black (RGB value of 255)
From a hierarchical perspective,
as #000000, with every other colour
colour attracts and guides the eye
registering values between
around an interface. It is useful
these extremes (see page 84).
for separating and distinguishing
blocks of content from one Hexadecimal colour values are used
another, critically identifying in the Web UI’s structure in the HTML,
single objects and contrasting or in the UI’s styling within the CSS3
relationships between groups code. With the addition of an alpha
of objects. channel for creating transparencies, the
web designer can create graphically
rich designs without the need for too
many images. In other UIs, such as
apps, BD/DVDs and game interfaces,
the RGB colour values are selected
either in the UI authoring software or
directly referenced in the programming
language by the developer.

3.11 
Screen-based colours
Screen-based colours are
displayed here in both their
coded values. The six-digit
hexadecimal value of the colour
and the corresponding RGB and
HSV values are listed next to
each colour swatch.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 81

3.11

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 82 Colouring the screen

The meanings of colour In most western countries, people

with different languages can still share
On a basic level, colour affects our
the same interpretation of colour – for
perceptions. It can help determine how
example, red can represent danger or
a user will perceive the UI design, its
passion. But some colours can prove
navigation and its content. But beware,
problematic as their meanings within
colour is psychologically and culturally
different cultures can be diverse.
defined, having different meanings
Green, for instance, is associated
within different cultures around
with ecology and nature in the West.
the world.
But in non-western cultures, it can
People generally perceive warm also mean corruption and infidelity.
colours as brighter and more So although colour is useful in UI
dominant. Warm colours pull forward, design for conveying personality,
expanding and popping out from their tone, information and calls to action,
backgrounds. Cold colours do the it should be used in conjunction
opposite and rush backward. Neutral with image and text to maximize
colours have less impact, emotionally communication and minimize
and perceptively. Colour is excellent potential misunderstandings.
at defining a visual experience,
stimulating liveliness and interest or
calming the viewer.
3.12a

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 83

3.12b

3.12a–3.12b
Colour perception changes
The selection of a suitable
colour palette will help convey
the correct tone and message
to the user. In these examples
the Scotch Malt Whisky Society
uses a muted and earthy palette
of colours to hint at a secret
buried deep down underground.
The Edinburgh Fringe website
uses a more vibrant palette of
warmer colours to suggest the
creativity during the month-long
cultural festival.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 84 Colouring the screen

Applying colour In triadic relationships, colours need

to be balanced to ensure the UI will be
Colours are always relative to the
usable, as some colour combinations
context in which they are viewed. By
are problematic. Contrast within
grouping two or three colours together
colours shows levels of importance
into a scheme, combinations can
through prominence. By selecting three
be found that work well for the UI
colours for a colour scheme, you can
design. A colour wheel can be used
go for all complementary or analogous
when choosing colours for screen
colours. Clashing colours add too
(RGB) or print (CMYK). A colour wheel
much ‘noise’ to a design and should be
comprises a spectrum based upon the
avoided, but contrasting colours can
three primary pigment colours of red,
be effective to draw attention.
blue and yellow.

Complementary colours sit opposite

each other on the colour wheel (such
as red and green). Analogous colours
sit next to each other and work well
together as they share a similar part
of the spectrum (such as green, blue
and purple). By selecting a three-
colour scheme, a triadic relationship
can be established. The RGB colour
space offers the widest range of triadic RGB – additive colour and
relationships for selecting and hexadecimal values
viewing colours. Additive colour

Red, green and blue light is projected with a

value between 0 and 255 to provide all the
other visible colours. If all the RGB colours
are at their lowest intensity of zero (switched
off) then white light is projected. If they are all
projected at their fullest intensity (all switched
on to a value of 255) then black light is
projected. In web UI design, these RGB values
are converted into markup code: HTML uses
hexadecimal values and CSS3 use RGBA
values. RGBA also allows for transparency (the
‘A’ represents the alpha channel that controls
the colour’s opacity).

Hexadecimal values

Red’s own hexadecimal value is #FF0000 (red

3.13  turned on, green and blue turned off), green’s
Colour theory is #00FF00 (green turned on, red and blue
Colour theory is a foundational turned off), and blue’s is #0000FF (blue turned
part of visual communication. on, red and green turned off).
Within this diagram compiled
from mudcu.be/sphere/,
the relationships between
complementary, analogous
and neutral colours can
be understood.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 85

Neutral reds Neutral yellows

Neutral blues Clashing colours

Complementary colours (websafe) Split complementary colours

Complementary colours Analogous colours

3.13

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 86 Imagery and the pixel

In UI design, images can As a set number of pixels define a

function as content, decoration bitmap image’s quality and integrity,
and, crucially, as navigation. resizing is a problem. When shrinking
Understanding how to use a bitmap, the image will lose quality
images is essential for the because pixels are being removed.
designer. Images displayed on For example, if an 800x600px image
computer screens are different is reduced to a 400x300px size, there
to printed images, although are 360,000 fewer pixels with which
they share common requirements to display the same image. Enlarging
of quality, resolution and a bitmap also affects the quality as
copyright clearance. adding pixels reduces the integrity of
the original image.
Traditionally, desktop displays
have focused on a minimum Vector images, on the other hand,
resolution of 72ppi (pixels per do not lose image integrity in
inch). Screen quality of images resizing, as the integrity of vectors is
beyond 72ppi was perceived as mathematically controlled and infinitely
being a waste of file size. With scalable without loss of quality. Vector
modern tablet displays, however, file formats, such as encapsulated
the total resolution has now postscript files (EPS), are great for
increased the pixel density up printing, but their large file size means
to 326ppi, which is higher than they are not suitable for UI design.
the standard 300ppi minimum
Within UI design (predominantly
required for print.
web design) scalable vector graphic
(SVG) files are used. SVG is a text-
Images for screen
based language (supported in Adobe
Digital image files fall into two Illustrator) to draw and animate images
categories: vectors and bitmaps. for online display. It mathematically
Vectors have very small file sizes and describes the shapes, paths, filter
are created mathematically, whereas effects and type that define the finished
bitmaps are created through colouring image. An SVG image doesn’t suffer
each pixel in the image. from any loss of integrity when resized.
The screen is a grid of pixels and an
image displays itself within that grid,
with each pixel being one of at least
256 colours (at low screen resolutions).
This means that a realistic image, such
as a photo, keeps its lifelike quality
by displaying within this colour range.
To achieve this, the bitmap uses
anti-aliasing, blurring two coloured
pixels with a third pixel that is a mix
of the two. This creates the illusion of
smoothness, compensating for the
stepped nature of pixels.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 87

3.14 Image file formats

EPS – Encapsulated PostScript.

Print file format.

GIF – Graphics Interchange Format.

Works well for line-based images, typography
or simple flat colour (no longer widely used).

JPG – Joint Photographic Experts Group.

Works well for continuous-tone photographs
in RGB.

 NG – Portable Network Graphic. Works

P
well when mixing text and image together.

SVG – Scalable Vector Graphic. Not a file

format, but a text-based language (XML);
3.15 SVGs use vector coordinates to define the
dynamic construction of images in a browser.

3.14
Bitmap and vector images
Within this image, the
comparison between icons
created as a bitmap (left) and
icons created as a vector (right)
is clear. When magnified, the
vector image remains sharper
than the bitmap. The bitmap’s
edges can clearly be seen as
being pixelated and anti-aliased.

3.15
Anti-aliasing
The anti-aliasing can be
seen by zooming in to see
the bitmapped icon’s edge.
The green icon and the grey
background use overlapping
gradations of each colour to
soften the edge. When viewed
at 100 per cent, this tricks the
eye into seeing the edge as
smooth rather than jagged.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 88 Imagery and the pixel

Images as navigation Iconography

Navigation can be represented in The benefit of using an image as a

various metaphorical visual forms visual context is its coherence to the
(tabs, menus, hypertext, buttons, user as a metaphor. But ‘image as
etc). In some UI designs, images navigation’ will not work for every UI
can visually integrate all the required design. It is just one more tool in the
interaction into a contextually themed designer’s conceptual toolbox to be
user experience. This then seamlessly used when it will be beneficial to the
makes the image itself into both user (and client).
content and navigation, but care
Iconography and visual communication
should be taken to ensure that the
have a long heritage, stretching back
visual affordances are obvious.
thousands of years, right back to
By creating a visual environment for ancient Egypt and even prehistoric
the interface to work through, an image cave paintings. The imagery in this
can indicate interaction whilst still early art contained rich symbolic
maintaining the visual metaphor. To do and metaphorical representations of
this the image needs to follow some animals and rituals, which were clearly
real-world logic to remain coherent. meaningful to the people who created
Within game UIs the UI design normally them. Today, we use symbols and
does this by visually integrating icons in our written and visual language
the aesthetics, identity and tone of in much the same way: a small image
the game world into the interactive or a line represents a bigger idea.
selection process.
Since the development of the graphical
One way to understand ‘image as user interface in the 1970s through the
navigation’ is to consider the UI as early innovations of graphic designers,
a visually represented environment, such as Norm Cox, Karen Elliott and
instead of it being a container of Susan Kare, the use of icons in UI
images, text, animation and navigation design has grown and matured. As
in an obvious gridded layout. users, we are now familiar with icon
metaphors representing documents,
folders, control panels, settings files,
drivers and disks.

As humans, we make subconscious

connections to the UI interactive
3.16 functions through the use of such
Embedded interaction metaphors. The use of icons in a
Within this contextual image, UI makes it easy to differentiate
additional navigation takes
the form of buttons and icons interactive elements from more
integrated into the message static content.
post image. The interaction is
embedded into the image and
forms a visual whole, rather than
sitting awkwardly on top of the
image as a navigation bar.
www.sensisoft.com

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 89

3.16
www.sensisoft.com

www.sensisoft.com

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 90 Iconography and metaphor

Icons: complex The image may be specifically

processes made easy connected to the function or be
representational or abstract. The more
Icons are interface tools that visually
specific the image is, the easier it is to
focus attention and communicate, in
connect to the function and action; if it
a concise way, a call to action through
is obtuse, it will have to be learned by
an understandable visual metaphor.
the user.
Understanding the connection between
the icon and the function leads to a There is an established iconic
desired action being taken (usually vocabulary with a rich and complex
clicking) and a successful outcome. grammar of its own that users are
familiar with. Meanings are either
The icon needs to clearly convey its
learned (house = homepage icon) or
function to the user. As interpretation
instantly identifiable (printer = print) by
of imagery is culturally situated and
the user.
ambiguous, the image the icon adopts
needs to be familiar and instantly If the meaning of an envelope has been
recognizable. If it is not, the action will established as ‘email’, changing its
not be communicated. function will mislead the user. Bad use
of icons is down to the designer. Too
often, interfaces fail because icons are
used in navigation without any sense
of meaning.

Established icon vocabulary:

Cog – settings 3.17

Envelope – email Icon sets
Icons need to convey a call to
House – home page action, so its imagery needs to
stand out from the UI’s content
Magnifying glass – search or enlarge without competing with it. If
Printer – print these icons were not labelled,
how many would be obvious,
and how many would need to
be learned?

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 91

3.17

Information Upload to cloud Chat

Link to this Like Download

Refresh Search Shopping cart

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 92 Iconography and metaphor

Metaphor and context Adding text labels to icons helps

optimize usability, as some iconic
Metaphor is a particularly useful tool
meaning will take time to learn. Before
in visual communication as it can cut
the home page icon of a house
through cross-generational or cross-
became universally adopted, it had
cultural complexities. Essentially, it is
a text label saying ‘home’ next to it.
the transfer of meaning from one object
Once an icon’s identity and purpose
to another. It is a very common device
becomes universally accepted, it can
in written and spoken language.
live on its own in a UI without labelling.
Metaphors have had a persistent
Once a universal meaning has been
role since the GUI’s original desktop
established, the rich visual language
metaphors of folders, files etc. A
and grammar of icons can become
suitable UI metaphor is one that
a source of design inspiration. There
explains the function and facilitates
isn’t just one way to draw a house,
action instantaneously. But it must also
a magnifying glass or an envelope
be readily understandable, readable
– designers have found various
and contextually relevant to a large
innovative ways to represent these
number of users (often across
universal icons.
multiple languages).

3.18
Meanings of icons
If you covered up the labels
Icon design software of these icons, then different
users may interpret each
— AWicons Pro by Lokas Software image differently. Visual
communication in icons fails
— IconWorkshop by Axialis Software when the metaphor or analogy
— Icon Craft by Icon Empire is not clearly understood. If a
universal meaning has yet to be
established then the addition
of textual labels is crucial to aid
user understanding.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 93

Algorithm Wiki

Spam Analysis Optimization

Download Review

3.18

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 94 Iconography and metaphor

Designing icon families The icon will also need to work at

different resolutions of colour display.
Designing an icon is not as simple as
A 256 colour 8-bit version will be
making an image and then scaling
needed, as well as a 16 colour 4-bit
it down. Icon images – being a
version for lower resolution displays.
representation of a more complex
In some cases, a monochrome version
function – require a different approach
may be required, meaning that a 1-bit
to images used for content. Due to the
icon would have to be simplified from
utility of an icon, it needs to operate
the previous colour versions.
at a variety of scales, at different
resolutions and on a variety of screen The development of icon design has
displays. Although icons are bitmap a solid technical and creative basis,
images, they cannot be anti-aliased in and will continue to offer exciting
the way that content imagery can be. challenges to designers as higher
resolution screen displays offer a
The icon must display and
greater range of colours.
communicate at different scales
using differing numbers of pixels.
The imagery used for an icon needs
to appear the same at 512x512px
and 32x32px, despite there being a
difference of 261,120 pixels between
the two sizes.

This imposes severe restraints, which

need to be carefully considered.
Bitmap images made up of a grid of
square pixels work best when they
incorporate right angles. At such
small sizes, without anti-aliasing to
aid smoothing the lines, angles can
become very important. A pixel out of
line either way can ruin the icon design.

Problems with pixels and angles

45º angles can work, but when the angles

change to 30º, 60º or 120º problems can 3.19
become really noticeable in a grid of square Icon sizes and resolution
pixels. Any other angles, or circles and ellipses An icon needs to be designed
can become really problematic when displayed carefully and methodically in
in a square grid. icon families of multiple sizes
to aid legibility. In each icon
family there will be at least six
to eight pieces of artwork that
operate at different scales. Each
icon would first be developed
through sketching before
designing in software.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 95

3.19

Core iPhone and app launcher icon sizes

29 x 29px 50 x 50px 57 x 57px 58 x 58px 72 x 72px 114 x 114px

512 x 512px

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 96 Going with the motion

With interaction becoming more Interfacing motion as an experience

embodied, motion in interfaces
Whether designing interfaces for
has moved from animations and
websites, software, apps, DVDs or
motion graphics to embedded
computer games, the use of motion
streaming video players and
in the UI is changing. Websites
motion-sensitive inputs. Graphic
used to use third party plug-ins to
designers aren’t involved in the
accommodate playing animations
coding or the innovation of these
or video – now the code can control
new technologies, but that doesn’t
this. Software and apps incorporated
mean they have no role in these
motion into the UIs to aid the
changes. Graphic design should
experience – in some cases motion is
be taken into account in the
the primary input.
way a video player is embedded
into an interface, and how the Innovations in the computer games
design of an interface will react industry, specifically with Nintendo’s
to the motion inputs to create an Wii and Microsoft’s Kinect, are
aesthetic user experience. seeding across into other forms of
software. With the proliferation of tablet
computing, such as the iPad utilizing
motion sensors alongside the touch
screen and voice control, input is
changing from the mouse to the human
body. This is making the personal
computer even more personal, and the
visual communication of the interface
must match this.

In some cases, the UI now has to

work not only across devices, but also
across differing types of input. But the
UI still needs to seamlessly deliver the
content, the information and a great
user experience. Therefore, graphic
designers working in UI design need
to keep on top of emerging
technologies to look for visual solutions
in creating motion-based aesthetic
user experiences.
3.20
Microsoft’s Kinect
Microsoft’s Kinect senses the
human body and turns it into
embodied input, controlling
what is seen on the TV
screen. Gameplay can now
be more physical and media
entertainment can be selected
without the need for a
remote control.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 97

3.20

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 98 Going with the motion

Visually communicating motion Video content itself is now demanding

much more from the design and layout
Apart from showing video and
of the UI. The user (also a viewer)
animation, motion is used to
needs to feel secure that they still
communicate content, calls to action
remain in the same interface if they
or feedback from an interaction.
access video (HTML5 does make this
Software-loading sequences
easier). So the embedding of media
incorporate motion, and UI
players into web-based or app-based
components demonstrate action
interfaces has implications for effective
and processing through motion
visual communication.
(for example, loading progress bars).
Titles, logos and buttons may have Websites and apps from TV channel
some form of motion attached to them providers (such as the BBC), streaming
to draw the attention and focus of video providers (such as Netflix), and
the user. archived video (such as YouTube)
have innovated the look and feel for
Computer games and DVD/BDs use
the new breed of embedded media
animation to show transitions between
players. Video content (embedded
changing UI screens and within the
or streaming) can now be set in the
interface to draw attention to action
main interface screen, or it can be
calls, or to simply preview parts of
popped out into its own player window.
the video or game content. Within
It can even take over the entire
some interfaces, content selection
display screen. Therefore, the visual
is animated through the use of slide
communication of the branding, tone
shows and carousels, enlarging or
and identity needs to be maintained
reducing the image scales to aid
across all three viewing options.
selection. An obvious caution to any UI
design team (clients take note, too) is
to use restraint when using motion to
visually communicate.

With the advent of advanced coding

(such as HTML5) the need for
third-party plug-ins is diminishing,
and many opportunities for exciting
user experiences can be created – if 3.22
the designer and developer work
collaboratively. Alternative viewing
options can also be innovated, such as
the UI’s background being video-based
(this needs to be optimized to prevent a
drain on download times). Too much of
this just becomes ‘noise’ that interferes
with clear communication, however.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 99

3.21
www.sickcityclub.net 3.21
Sick City Club
With Flash-based interfaces,
video can directly be embedded
as a backdrop to the interface.
In the case of a band’s website,
this makes sense as it helps
to reinforce the band’s brand
with their music at the same
time. In other cases, this will
probably not work for the user
(for example, an insurance UI
that plays a video of a salesman
discussing insurance policies in
the background of the normal UI
content).
www.sickcityclub.net

3.22 
Coded animation
Motion in UI doesn’t just
mean media players and video
content. Motion can also be
coded and controlled by the
input (mouse, finger, body).
In this example, by shifting
the position of the cursor, the
camera viewfinder moves
around the scene. This is all
controlled by underlying code.
http://attackemart.in/
camera-parallax-effect/

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 100 Interview: Mike Kus Role
Graphic web
designer, UK
Some people advise designing Not very long afterward TypeKit
a UI from the mobile platform came out, along with @font- Experience
out to the desktop platform. face, and various other web font Professional
graphic designer
Do you agree? solutions. They’re great – you’ve
for 14 years
got a much bigger range of
I think these sorts of sweeping
fonts that render really well on Web
statements are a mistake. It can
screen, and they’ll also work http://mikekus.
help, definitely, but I wouldn’t
perfectly on an iPhone. So it’s com/
say that is the way you have to
amazing what you can do now
do it. With all the mobile devices
that it’s been brought into line
around now, responsive design
with traditional graphic design.
has come into its own. If you
are going to design a website Can you give an example
properly – whether you design of how you now apply your
a responsive site or not – you visual communication training
definitely need to have some to web design?
sort of mobile solution. Things
You now get much more
like the iPad can deal with
complex sites than before, it
normal websites quite easily,
makes you think about the
but for phones it’s a whole
way you design a website
different thing and you really
completely from the very
do need to have some sort of
beginning. I guess what really
solution for that.
changed was the introduction of
The principles that you use CSS3 media queries. It changed
as a graphic designer in print the styles, and obviously once
translate pretty much directly you’re jumping from a three-
across to the Web. All you’re column grid, to a two-column
doing with the Web as opposed grid, to a one-column grid
to print is making it fluid – you are not only changing the
reconfiguring it into a different percentages of the columns
type of grid as the window but what fits into them. You’re
size decreases. thinking about how this is going
to translate down to a mobile
Can you give an example of
device. You might decide, for
how graphic design principles
example, to increase the weight
have translated from print to
of the typeface and reduce the
the Web?
point size you are using if you
When I first started doing web carry on using it on a smaller
design it was still just Helvetica, device. Bear in mind that if
Verdana and Times New you’re going to be on a tablet
Roman, and they were your web the text doesn’t have to be so
fonts. You couldn’t really do that big – the titles can come down.
much with them. There are lots of considerations.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 101

3.23

3.23
Future Insights Live
When asked to redesign the
new Future Insights event
websites for 2013 Mike Kus
and Neil Kinnish (who worked
on the front-end development)
created a fully responsive
site, which can be found at:
futureinsightslive.com/
las-vegas-2013/.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

102 Case study Project
Designing a Blu-ray UI Neil Young
Archives, Vol. 1
(1963–1972)
Blu-ray DVD

Planning the Blu-ray UI Design team

Total Media
Canadian singer-songwriter Neil
Group, California,
Young’s prolific career has spanned
USA
over five decades. He had a vision
of releasing an archive of his music Client
and associated memorabilia as an Shakey Pictures
immersive multimedia experience.
Blu-ray (BD) technology made
this possible.

The design team at Total Media had

their work cut out to create a high
quality experience to match Neil’s
expected high-resolution sound
Information architecture,
quality. He wanted the listener to be
gridding and metaphor
able to browse the memorabilia –
press, ticket stubs, articles, and photos Across the archive’s ten BD box set
– directly related to each song as they there were 3000 menu screens and
listen to it. more than 20 terabytes of material to
make into content assets. As Toshi
Neil Young and members of his
recalls, ‘I don’t think we really knew
production company, Shakey
how big the project was until we had
Pictures, worked closely with Total
everything delivered to us’. Every
Media’s Creative Director Toshi
screen on the BDs was a bespoke
Onuki to discuss the look and feel
scenario, and each song was a
of the experience. A realistic virtual
snapshot of a time featuring contextual
environment was required for the
memorabilia that could be visually
immersion, which also needed to be
explored by the user. Therefore, every
easily navigated.
screen also had a bespoke grid.

To manage such a large UI design

project, worked on by many different
team members, Toshi created a
structure to establish clear team
communication of the standards and
file management protocols that would
be needed. Using a metaphor of a
50-year-old display case of document
folders, each folder would represent
one song, and contain the memorabilia
associated with it.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 103

3.24

3.25
3.24
BD menu
As can be seen from this visual,
the BD menu is quite complex.
However, the visual metaphor
and gridded layout visually
communicate what can be
selected. In the metaphor of
the file drawer, song files are
accessible by clicking on
the tabs.

3.25
The planning stage
Alongside complex information
architecture, a filing system was
structured of categories, such
as memorabilia, press, photos,
etc. Each category in turn had
contextual assets, such as
thumbnails, photo galleries and
captions and sub-screens.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

104 Case study
Designing a Blu-ray UI

Icons and motion

As each screen presented a separate

scenario from Neil Young’s career,
each navigational icon was also
different and contextual to each
scenario. But each link had to be
obvious to the user, so every link
used a consistent five-frame animation
in its selected state, growing in size
and brightness. This aided exploration
of the UI, answering Neil’s desire
for an obsessive immersive
experience. But this required a lot
of design. Each button, in a layered
PSD file, consisted of its normal state,
the selected state and its active state.
With 3000 screens multiplied
by multiple buttons per screen,
this meant a lot of work, which
‘Graphically, the Archives
was only made possible by solid project reflects Neil’s
information architecture. sensibilities very well.
Toshi has a perspective
that only someone
who wasn’t in America
during the 60s and 70s
can have. Because he
wasn’t prejudiced by
the time period or its
iconic graphics, he could
stand back and look at
the individual images
in the archive for what
they were, and envision
3.26a – 3.26b
Navigation and the entire project as an
menu selection artistic whole.’
Deeper into the DVD content – L. A. Johnson,
hierarchy, the richness of
Shakey Pictures producer
content access is represented
in this diagram overlaid on a
UI screen. The relationships
are highlighted so that when
individually clicked they access
the sub-screens shown in 3.26b.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 105

3.26a

3.26b

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 106 Exercise
Visually communicating interactivity

3.27

3.27
Set the navigation and assets
Using the grid and the baseline,
position the navigation and logo
in a new layer called Navigation.
Add the other content assets,
such as images, icons, footers
and even embedded media
players into another new layer
called Assets. Align these
horizontally within the grid’s
columns and vertically on
each baseline.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 107

Premise

In this chapter, the key

foundations of graphic design for
digital media have been discussed.
By applying these through visual
experimentation, you will become
more confident in designing a UI.

This exercise is about visual

communication, so the outcome
will not be interactive. It can
be repeated many times, and
adapted as your confidence
grows. By selecting the screen
resolution, using a grid, applying
typographical variations, selecting
suitable colours and imagery you
can experiment with how best
to visually communicate visual
affordances and calls to action.

The following resources will

be needed:

— Software of choice

(Adobe Creative Suite is

standard. For the purpose of this
exercise use whichever software
you’re currently familiar with).

— A grid – see
http://tinyurl.com/examplegrid

— Assets: images, icons,

written copy.

(You can use dummy content or

content from a previous website
you may have designed).

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 108 Exercise
Visually communicating interactivity

3.28
Set the text to
the baseline
The text forming the body copy
of the content is set at 14pxs
high, and the leading height is
16pxs. Other text such as the
quote, footer, navigation and
header have different leading
heights in proportion to each
different letter height.

3.28

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 109

Exercise Add the next new layer, called Assets.

In this layer, you will place any images
Open the sample 976px desktop grid
or media, aligned appropriately to
in your software of choice.
the grid’s columns and baselines.
Set the navigation and assets Remember to allow for white (negative)
(see Image 3.27) space and don’t forget to build a visual
hierarchy.
Add a new layer called Navigation.
Place your navigation on the grid in Set the text to the baseline
this layer and align it to an appropriate (see Image 3.28)
baseline.
Add the last layer, called Text. Add text
boxes, with your written copy. Take
into account the way in which x-height
and baseline heights are linked
mathematically together, be prudent in
the typefaces you choose.

Once you’re happy you have achieved

an effective design, hide the Grid
layer. You’ll now see how the visual
communication of the UI works. Toggle
the Grid layer on and off to see how
the alignment to the grid is working.

Outcomes

You should see a very rough hierarchy

of interactions on the wall across the
three content levels. Is the revealed
interactive structure far more complex
than you initially thought it would be?
This technique works for any form of UI
(DVD/BD, app, even game UI). It makes
you deconstruct the complex flow of
how content is made accessible to
the user.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

4
110

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 111

Designing the aesthetic

user experience
This chapter explores the specifics of design
objectives for user interaction, through
tailoring the UI’s content to meet the user’s
objectives and expectations. The aesthetic
experience of the person using a UI will be
explained through theories relating to the
context of use.

As designers are not end users, it is crucial

to see each visual affordance to a call of
action from the user’s point of view; we will
therefore examine user interaction from
a first-person perspective. We will then
explore semiotic theory to illustrate how
design for a first-person perspective works.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 112 Design and the user

The user has been championed It is important to remember that

throughout this book. As has designers (and developers) know too
been shown, their presence in much about designing interfaces to
the UI design process is central appreciate how the novice user views
to effective design. But what is an interface. In large design teams,
this presence? This section will the UX designer has the responsibility
look a little more deeply into the of understanding users’ objectives,
psychology of a user’s interaction their context of use and their levels of
to help you design an aesthetic experience.
experience for them. The user’s
Perception is not a passive thing – it
first-person perspective of
is connected to action. Understanding
interaction is of key importance
how users perceive and interpret calls
to the design of a successful
to action will allow you to set targeted
aesthetic user experience.
design objectives for the UI. These
objectives will help you to understand
Dynamics of interaction
what the visual communication
Although (able-bodied) people interact outcomes of the UI need to be. In turn,
with the world through the same this knowledge will help you to design
senses – sight, hearing, smell, touch the UI in such a way that the user will
and taste – not everyone interprets perceive which parts of the UI
their experiences in the same way. are interactive.
An individual’s interpretation is
personal, emotional, cognitive and
embodied interaction. An aesthetic
user experience is one where the user’s
concern for their own self is temporarily
lost in an effortless involvement in the
moment, and their sense of time within
the interaction is altered.

Interaction can be accidental (‘oops,

what did I click then?’), non-intentional
(‘I’m bored, I’ll just browse’), purposeful
(‘I definitely want to find this’) as
well as goal-orientated (‘I expect to
achieve this outcome if I click here’).
It requires active engagement from
the user based upon their emotional
and cognitive responses. Therefore,
an interface’s user experience (UX) is
designed to provide agency to the UI’s
visually communicated calls to action
in order to access content.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 113

4.1
www.chrisoakley.com/the-catalogue

4.1 
Embodied in the world
As we are embodied in the real
world, our own perceptions
of, and the way we interpret,
what we see, hear, taste, smell
and touch help us shape our
individual world. Each person
will perceive and interpret their
interactions in their own way,
but within an interface these
perceptions should be managed
to provide a similar experience
to all users. Image from The
Catalogue, a video created by
artist Chris Oakley in 2004.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 114 Design and the user

The first-person experience Of course, we’ve all had the experience

of trying to push open a ‘pull’ door.
A UI will look the same to every user.
This is usually because we assume
It will have a designed layout
the door will work in the way we’ve
combining content (images, media
experienced in the past (or we may
and written copy) and calls to action
simply not be paying attention). Users
(navigation and icons), which allow
approach digital interfaces in the same
access to that content. But not
way. When interfaces (and doors)
every user will have the same prior
fail the individual, it comes down to
knowledge or the same aesthetic
two factors: expectations and the
user experience. For a designer to
communication of visual affordances.
understand how users will perceive and
If a door is to be pushed open, but the
interpret the interactive experience,
handle is a vertical bar which suggests
it is useful to imagine the interaction
pull, people will pull it. We’ve all
through a first-person perspective.
done it.
Let’s simplify this issue with an
This happens all too often in UI design.
analogy. Think of a door as an interface
Confusing design decisions confound
between the internal and external.
the user’s expectations. Designers
We all know through past experience
must understand and appreciate
that to get from one position to the
what will communicate a successful
other (the goal) we need to open
visual affordance. Semiotics helps in
the door (the interface) by using
this (more on this on pages 118–119),
a door handle (call to action). But
but understanding and appreciating
not all doors behave the same way
a user’s first-person perspective, by
(past experience). Some doors open
conducting user research and testing,
outwards, some inwards, some rotate
is invaluable. This perspective will
and some slide (functionality). Added
inform your visual communication
to this, not all door handles are the
decisions, ensuring that the UI is
same (design). The act of getting from
communicating the calls to action
one location to another (the goal) now
correctly, making an aesthetic
seems more complicated. But we
experience achievable.
perceive the type of door, its potential
interactions and quickly decide on an
action to obtain our goal.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 115

4.2

4.2
L.A. Noire
In this game UI from L.A. Noire,
it is clear that the navigation (1)
is the most obvious interactive
part. The typography (2) used
on the wall is really the main
navigation. The use of a chunky
typeface (set in uppercase) and
the labels ensure the user can
perceive these links. Additional
navigation is set further back
in the scene and may be
missed (3).

4.3 
IDEO’s method cards
Tools, such as IDEO’s Method
Cards, help the design team
frame their ideas to be more
in tune with how users will
perceive and interpret the
interaction. The cards are
classified as four suits: ‘ask’,
‘watch’, ‘learn’ and ‘try’.
www.ideo.com/work/method-
4.3
cards/.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 116 Content copy and the user

Typography is meaningless without Accessibility through good copy

words, and UIs without words
Good content should engage and
are not as effective. Written
retain the interest of the UI’s users. Too
copy in the form of body text,
often, copy in a UI is either too lengthy
image captions, navigation labels
or corporate for its target audience.
and headings, is important to a
Since people tend to scan text on a
successful interface. Therefore,
screen display rather than reading it in
well-written copy, displayed
full, many UIs have far more copy than
through effective typography,
is actually needed.
helps create an aesthetic user
experience. The quality and All content, especially written content,
conciseness of written copy should have a clear purpose. It is up to
helps to set an appropriate tone both the client and the design team to
of voice, reflecting the depth understand what that purpose is, and
of understanding of the target to determine the depth and the tone
audience. It also helps to clearly of voice that the written copy needs
facilitate the UI’s call to actions, to communicate. Understanding what
helping the user to identify what needs to be said, to whom and where
needs to be done and in it must be placed in the design, gives
what order. you the information needed to brief a
copywriter to produce written content
that is tailored to the UI’s specific
target audience. Happy and engaged
users mean that the client will achieve
their objectives more quickly.
4.4 It is important for the designer to know
Grip Limited
In this website, the combination how much copy will be required, so
of typeface, labels, colour and they can accommodate that in the UI’s
concise copy is effective. The design. Most UIs (except blogs and
accessible, ‘straight talking’
copy works well with the clear news sites/apps) do not need a great
layout, a good typographical deal of text.
leading ratio, and colour
contrast.

The copy reads:

‘At Grip Limited we hate

the word ‘Silo’. We have no
preconceived ideas about the
form our ideas should take,
where they should be placed or
how big or small a budget ought
to be. Anything goes. It’s a
clean slate every time. The only
constant? Senior people coming
up with the best ideas to move
out clients’ business forward.
Whatever the medium,
whatever the discipline,
whatever the idea.’

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 117

The art of copywriting With body text, it is important to write

short, concise sentences. Five or six
Copy must communicate what it needs
sentences would form a satisfying
to in a tone and at a level that the
paragraph length. Keep in mind that
target audience will appreciate.
the first sentence of a paragraph is
If it is not written in a concise manner,
loaded with importance, and must
the reader may get confused and give
keep the reader reading. The length of
up – it must be both scannable and
any body text is dependent on what
readable. To explain this further, it may
needs to be communicated and where
be best to separate this discussion into
it will be displayed in the UI. If large
two components: copy as content, and
amounts of copy are required, it should
copy as labels.
be split into short sections. In this
Any labels for icons, image captions, way, the UI design can be optimized
or headers and subheaders must be to deliver large amounts of written
short. The choice of words used in content, either through scrolling or
labels should also be ‘user facing’ splitting it across several screens
– using language the user will easily or pages.
understand. Who wants to read a
label stating ‘return to level one’,
when ‘home’ is far friendlier and
more inviting?
4.4

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 118 UI semiotics

Semiotics is an underlying theory Semiotic terms (in a UI context)

on which successful visual
Destination
communication is built. It focuses interactive action in some form
on the connection between what
Intention
you see (the signifier) and what what needs to be communicated and why
it means (the signified). These
Message
two parts form a semiotic sign. the UI’s various action calls or content areas
The semiotics within design
Noise
should be carefully considered; external interference of the transmission and
without a clear selection of receiving of a semiotic message
visual components within a UI, Receiver
miscommunication can occur. This the UI’s user
section examines how semiotics Sender
works and how it can be applied the graphic designer
within a UI to help create an Sign
aesthetic user experience. a visual that communicates specific meaning
(the signifier and signified)

The visual – more than just looks Signified

the meaning of the concept in the signifier
According to the maxim, a picture is
Signifier
worth a thousand words. But which a visual that represents a concept
thousand words does an image
Transmission
suggest? An understanding of semiotic the typography, colour, written copy,
signs will help any designer to ensure multimedia, images, and visual affordances
that the visuals they select suggest
the desired meaning to the viewer.
Context is key to this, as there are
many different ways with which to
communicate meaning.

Any photograph, illustration, icon or UI

layout has several layers of structure
that can be read with semiotics. A
visual signifier has structures that are
conceptual, visual and textual. The
interplay between these structures
aids the viewer’s perception of the
sign. The viewer (user) then decodes
the signified meaning through
interpretation. How successfully this is
done ultimately depends on the way
the viewer deciphers the underlying
signified meaning.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 119

4.5
www.sickcityclub.net

4.6 4.7

4.5 4.6 4.7

Sick City Club – Tone of voice How visual components
signifying ‘attitude’ The lengthening of the white signify meaning
Sick City Club, a young band capital ‘i’ of city into the word The navigation is turned on its
from Birmingham (UK), needed ‘sick’ is sharpened by the side, invading the silhouetted
to project the right attitude to black ‘i’ of ‘sick’ being sheared skyline. This is an example of
their audience. Their website diagonally to form a point. The how the visual components
UI signified this with stark typography contains strong reinforce the idea of attitude and
contrasts between black and negative spaces and angles that edginess. Turning the navigation
white, and various components. reinforce the tone of voice being forces the user to tilt their heads
All of these factors are individual signified. The message here is to read the links, and reinforces
signifiers, but combined they ‘urban’ and ‘risky’. a signified meaning that can be
communicate an attitude understood as being from an
visually. www.sickcityclub.net alternative perspective.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 120 UI semiotics

Deciphering signified meanings Transmission of meaning

A photograph, illustration, icon or UI Understanding semiotics will help

layout can suggest several differing you to clearly communicate a chosen
meanings depending upon the context message. The selection and crafting
in which it is being interpreted. A of the typography, colour, written
designed visual is never neutral, and copy, multimedia, images, and visual
from a cultural perspective, it may affordances allow the transmission of
suggest different meanings in different the message to the user. If the wrong
societies. Even within a single society typeface, colour or image is chosen, it
the viewer (user) may make different could transmit a completely different
social interpretations depending on message from the one you intended.
their age, gender, class, religious or Think about the door analogy again
political beliefs, and so on. – the wrong shaped door handle may
make someone pull instead of push.
In a semiotic sign there is always
a sender of a ‘message’. Within UI Any interference between the
design this role rests with the graphic transmission and receiving of a
designer. The user of the interface semiotic message is referred to as
is the recipient of the semiotic ‘noise’. Semiotic noise within UI design
message, which is delivered by the can include several things. The UI’s
designed visual. The message in a UI technology delivery platform may be
is the communication of the various too slow or too quick, preventing the
action calls and content areas. By signified semiotic message from being
understanding semiotics as a means received in full. The display screen may
of interpreting the desired meaning of not display colour in the desired way,
UI content, a designer can shape and and this may also interfere with the
accentuate the visual communication carefully crafted semiotics.
of the UI’s messages.
The destination of a signified semiotic
With every decision made in the design message in a UI design will result in an
of the interface, there is an intention to action of some form. In a UI, this may
communicate (that is why the graphic be a successful call to action, such
designer is a visual communicator). as a link being clicked, or it may be
What the message is depends on the simply that the user locates the desired
content, the target users and the client. content amid a plethora of competing
It may be the communication of the information. The visual examples in
various action calls and content areas, this section should help explain how
or a ‘cool’ or ‘corporate’ or ‘friendly’ semiotics in a UI works, by identifying
visual identity. the signifiers within the design and
what they signify. By carefully selecting
and shaping the semiotic signs, you
are more likely to enable a successful
aesthetic user experience.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 121

4.8

4.8 
The destination – content
The content copy is overlaid
in text boxes on the black
How semiotics works background, which contains
the band’s videos played at
Sender > Intention > Message > full screen. This band review
Transmission > Noise > Receiver > Destination is stepped downwards across
— Sean Hall, This Means This, This Means three horizontal lines. These
That (2007, Laurence King) lines visually suggest the five
staff lines used in musical
composition, and the stepping
of the quote across the lines
suggests musical notation.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 122 Internationalization

The English language, although Language

an international language, is not
The world has effectively grown smaller
the only language to be used in a
since the advent of air travel and,
UI. Maybe native English-speakers
more recently, the explosion in digital
are spoilt on the Web because
communication. Within the context of
most of the websites are written
westernized societies, designers from
in English, but it is dangerous for
English-speaking nations can become
a designer to believe this is the
blinkered and believe the population
norm to universally design for.
of the world all have the same wants
Many UIs, whether on the Web,
and needs. However, although in
an app on a phone, software on
English-speaking nations people read
a PC, a DVD/BD or computer
from left to right, this is not universal
game, come in many languages.
and differences such as this must be
Many non-English speaking
considered when creating a UI.
people want to read the content
and navigation of a UI in their In languages using an abjads writing
own language. A designer needs system (such as Hebrew and Arabic),
to seriously consider this, as the norm is to read from right-to-left;
the implications on designing and languages represented through
an effortless aesthetic user logographic writing systems (such
experience could become costly if as Chinese) can be read vertically or
internationalization is ignored. horizontally. Even within the languages
used within Western countries that
read left to right there are variations
that a designer needs to be aware of.
For example, word lengths in German
are significantly longer than the
equivalents in English.

4.9
Google doodles
Cultural differences can impact
greatly on UI designs if the
target users are from different
cultures. Google has localized
search engines in different
languages. The Google doodles
that feature over the search box
also feature visual references to
other cultures. This provides an
international and inclusive feel
to the web search.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 123

English words average 5.10 characters

in length, while German words
average out at 6.26 characters. In
comparison, a logographic language,
such as Korean (represented using a
Western alphabet), averages only 3.05
characters per word. If a paragraph of Leonardo da Vinci’s 553rd Birthday

300 words with 15 words per line is

written in English, it takes up 19 lines.
The same text, translated into German,
will require 24 lines. In Korean, it will
only fill 12 lines.

It should, therefore, be made clear

before the information architecture Albert Einstein’s 124th Birthday
phase of a project whether the UI
design needs to accommodate
multiple languages. This information
should then inform how the layout of
the UI design will be made and (from
a typographical perspective) which
language character sets will be used.
By empowering the target users to Guy Fawkes Day
(an annual celebration in the UK)
access the UI in their chosen language,
the user experience of the UI is
improved without compromising
the aesthetics.

Remembrance Day

St Patrick’s Day

4.9
Father’s Day

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 124 Internationalization

Reducing barriers through Internationalization focuses on

internationalization and localization designing a UI for international
access and reducing any barriers to
The games and entertainment accessibility in the design process.
industries have led the way for Decisions on supporting local, regional
UI designers to understand how or culturally related references will be
significant internationalization is. When agreed at the beginning of the design
a game or BD/DVD is loaded, there is phase. In doing this, the designer
often a prompt to select the required and developer will know how to
language. The selected language format time and dates, calendars,
will then be displayed in the same UI currency, addresses/postal/zip codes,
design as the other languages would numbering, and so on.
have been. An internationalized UI
design is one that has been designed, Localization, on the other hand, is an
from the outset, to accommodate a adaptation of an existing UI into the
variety of language requirements and language and culture of a specific
cultural differences. target group. This involves more than
merely adding translated copy to the
UI and ensuring there is enough space
to accommodate it. It may make it
necessary to change the UI’s colour
palette, images and even icons. This
is a lot of work, and can require a
redesign of the aesthetic.

Therefore, when possible, it is better to

plan for the UI to work cross-culturally
very early on than to have to adapt it
later. Not taking internationalization
and localization into account when
designing a UI will greatly diminish
and disadvantage its aesthetic
user experience.
Internationalization

‘The design and development of a product,

application or document content that enables
easy localization for target audiences that vary
in culture, region or language.’

Localization

‘The adaptation of a product, application or

document content to meet the language,
cultural and other requirements of a specific
target market (a ‘locale’).’

— World Wide Web Consortium

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 125

4.10

4.10
Pflanzen Gegen Zombies –
multi-language design
German and Chinese
editions of the popular
PopCap game Plants vs.
Zombies, accommodating
the longer German words
and the challenges of a
logographic language.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 126 Interview: Kristin Kramer Role
User experience
designer, Standard
What does a user experience A UX designer gets the client Life, UK
(UX) designer contribute to to articulate and prioritize their
the interface design team? objectives. The client is paying Experience
A UK-based
for the design team’s time
The role entails a broad American UX
and the interface has to help
spectrum of things because designer whose
them make a return on their clients have
a UX designer is involved in
investment; so objectives and included BP,
the design process from the
ways of measuring success go British Council,
beginning to the very end. They
hand-in-hand. The UX designer Department of
mediate primarily between
evaluates the project at hand, Health, Epson,
the client objectives and user
understands any objective gaps Goldman Sachs,
objectives. The reason they Hilton, LEGO,
and overlaps, and then comes
have to understand both Merrill Lynch,
up with a common set of
of these is that half of the NHS, Royal & Sun
design objectives.
challenge of the job is being Alliance, Sprint,
able to justify and rationalize Then they have to get the UBS and Vodafone.
why certain decisions have same thing from the users’
been made on behalf of perspective. What is their Web
the user. context of use? It is the www.linkedin.
experience of the user, how the com/pub/kristin-
kramer/0/10a/646
page is laid out, what the key
messages are, what gets visual
prominence on the page, what’s
the call of action, and what
does the user do next?

‘Collaboration is a big
deal – you don’t just hand
the project over from
one phase to the next,
because one person’s
input affects what the
whole team is doing.’
– Kristen Kramer

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 127

Who has a stake in the design When designing the user

of a UI, beyond the end user? experience, how do you work
with the developer and the
The various stakeholders in
graphic designer?
developing an interface include
the client, the developers, Everyone brings something to
a copywriter, and a graphic the table, so treat the graphic
designer. A UX designer designer and developer as
has to be able to talk to all stakeholders. Consider them as
these people in their own equal collaborators. If there’s
technical languages, and go written copy, or an image, or a
from broad concepts down video, or an interactive tool, it is
into details. There is a lot of all ‘content’. Content is design.
zooming in and out, so it helps Collaboration is a big deal – you
to be very process driven. don’t just hand the project over
Flexibility is important, as UX from one phase to the next,
designers chop and change because one person’s input
their approach based on the affects what the whole team
resources and the time they is doing.
have available. It’s good to have
That comes back to
constraints because otherwise,
understanding the customer
you won’t know where to start.
and understanding what the
right solution is. The team
needs to know where the user is
coming from, and where they’re
going to go to next. More and
more people are watching
TV sitting there with their PC
tablets or smartphones. There
are stats floating around in
the UK that say things like by
2015 mobile (smartphone and
tablet) use will outstrip desktop
use*. So it makes sense for
the design team to try to think
about design for mobile use
first, so that everything else falls
into place around that.

*Global Internet usage will more than double by 2015, and

most of these users will be mobile (Boston Consulting
Group, Mary Meeker, Kleiner Perkins, Morgan Stanley
Research).

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

128 Case study Project
WorldSkills interactive kiosk Using the
WorldSkills
London 2011
event as a
catalyst, Purpose
Objectives and expected outcomes were presented
with the challenge
Design company Purpose were
of how to register
commissioned to create a visitor
and capture data
experience for WorldSkills UK’s for more than
vocational training exhibition. The 5,000 potential
client’s objective was to raise the new recruits for
awareness of Europe-wide vocational the 2012 skills
training at their London exhibition, and competitions.
then after the event. They hoped to
attract an audience of 150,000 to the Design team
exhibition, and get the young visitors Purpose, London,
to identify and associate with specific UK
career routes.
Client
More than 200,000 visitors attended WorldSkills UK
the event, and around 5,000 of these
would need to register on the day for
the skills competitions. To facilitate
this, Purpose designed an interactive
kiosk. The interface needed to be
simple, engaging, on-brand with
WorldSkills, and connect in the hall to a
large video display. Purpose developed
a fun and engaging five-step
interaction to capture each visitor’s
details and their photograph.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 129

Content The typography chosen helped brand

the event and communicate a certain
The purpose of the interactive kiosk
‘cool factor’ to the target audience.
interface was not to inform the user,
Based upon a typeface called RITA,
but to gather important information
Purpose crafted a square and blocky
from them. This purpose was honestly
typeface especially for the event. The
stated so that the user knew what
exhibition was in the English language,
was required from them before they
so the choice of typeface worked well
interacted with it. The content and
digitally in the kiosk interface as well as
written copy were crafted to ensure
on all printed media, and as 3D word
the user immediately understood what
sculptures placed around the
to do, and the visual communication
exhibition hall.
encouraged them to commit to signing
up to the skills competitions. The target
users were 12–19 year olds, so the
exhibition and kiosk’s content needed
to engage young people and make
them want to associate themselves
with the event.

‘The interface needed to

be simple, engaging,
on-brand with WorldSkills,
and connect in the hall to
a large video display’

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

130 Case study
WorldSkills interactive kiosk

4.11

4.11
The WorldSkills
kiosk interface
The kiosk interface has a simple
five-stage process: the initial
welcoming screen (1); the
camera interface screen; the
sign-up page (2); drop-down
menus help the user to define
themselves (in terms useful for
the client); the profile is set and
the information is displayed on
the video screens (3).

4.12 
Copywriting WorldSkills
The interface’s copy is clear,
succinct and very user-friendly.
All the usual information labels
are standardized, making these
areas instantly familiar to
the user.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 131

4.12

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

132 Case study
WorldSkills interactive kiosk

Semiotics Call for action and reward

The design decisions behind the visual The visitor experience that the kiosk
identity used in the kiosk interface interface communicated was one of
can be deconstructed through ‘inclusion and participation’ within
examining the semiotics. Within the a huge exhibition. The user of the
kiosk interface design, there are many UI was presented with a simple,
signifiers and visual affordances that achievable task. During each of the five
signify meaning. The bold, chunky interactive steps, users knew exactly
display typeface used for ‘I AM…’ what was happening and what their
signifies the central theme of the next action needed to be. As a reward
exhibition – that it is the largest of its for registering, their photograph was
kind AND that the individual visitor displayed on the large video display
is important. The diagonal blocks of in the large exhibition hall welcoming
colour help guide the eye to the white them to the event.
content areas, signifying the important
parts of the screen.

The convention of buttons being

embossed in their clickable state is
followed, and this is borrowed very
subtly in the use of purple and ochre
on the right and underside of the
white content areas. This combination
‘pushes out’ the white content areas
toward the user, signifying that
attention is required in these sections.
The input fields and calls for action are
coloured red (the most emotive action
colour), with white text, for ultimate
contrast. This signifies that these areas
are active and demand attention. A
photograph is required for registration
and the human shaped grey silhouette
signifies this.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 133

4.13

4.13
The semiotics of WorldSkills
Within the visual communication
of the interface, the semiotics
operates on a subconscious
level, guiding the user. (1) From
“I AM…” the diagonal colour
bars direct the user to the two
areas that need completing.
(2) The two input areas emerge
from the background through
the use of the purple and
the ochre. (3) The blank
human shape (coloured red for
emphasis) gives a subtle visual
affordance that a photograph is
required. (4) The input areas and
action calls are all coded red
with white text. Buttons conform
to W3 web standards, and the
reset button is in a neutral grey.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

134 Exercise
Deconstructing UI semiotics

Premise Outcomes
This exercise focuses on This exercise will help inform your
semiotics, including the user’s visual communication decisions
point of view, the ways in which through deconstructing the semiotics
written copy communicates, and of an existing UI. It can be applied to
cultural contexts. In particular, any UI, and it is recommended that
we will focus on deconstruction you repeat it using different types
and interpretation skills as you of UI. Deconstruction is only part of
will need to put yourself in the the process. You need to learn from
first-person perspective of a user the deconstruction and use what
looking at a UI for the first time. you’ve learned. This exercise can be
This exercise can be repeated combined with the exercise at the
and adapted until it becomes end of Chapter 2 to give you some
second nature. fundamental skills to help you design
You can use this exercise for any future interfaces.
UI, but we will use Whitespace’s
interface for The Scotch Malt
Whisky Society as an example.

4.14–4.17
Deconstruction
To keep this exercise simple,
we will deconstruct a single
UI screen. Follow the
instructions in the exercise
overleaf and refer back to
the images on this page.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 135

4.14

4.15

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

136 Exercise
Deconstructing UI semiotics

4.16

4.17

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 137

Exercise 3. Finding the signified

(semiotic meaning)
This exercise works best through
discussion, so feel free to share your This is where the fun begins.
answers, but it can also be conducted Look at image 4.14.
alone. The deconstruction process
— Why has this colour palette
itself is fairly simple. The challenge is
been chosen?
interpretation – looking and thinking
– to see what the semiotic messages — What does this illustration say that
are and how the semiotic sign is a photograph wouldn’t?
constructed. You are in the position
Look at image 4.15.
of a user who doesn’t know what the
design team’s intention was – only how — There is a call to action at (1).
the design of the UI communicates How do we know this through the
itself visually. visual communication?

The exercise is split into three parts: Now look at image 4.16.

1. The semiotic signs — (1) What does the choice of wallpaper

and the lighting on it signify?
Look at the whole interface.
— (2) Does this detail signify a call to
— What is the purpose of this UI?
action or is it simply a part of the
— Who is its target audience? illustration without any function?
Discuss.
— Why does it look this way?
— (3) What do these details signify?
— How do I recognize the available
calls to action? Finally look at image 4.17.

2. Isolating the signifiers — (1) These two calls to action are visually
communicated in a particular way,
Identify visual elements that you
so what does this sign communicate
think may be semiotic signs. Group
beyond the obvious?
the signifiers that you think may be
suggesting the same message (images — (2) What does this choice of border
4.15–4.17 have already done this communicate?
for you).
— (3) Why use old engraved images
Take each isolated signifier group and on the display? What is the deeper
ask the following: meaning of this for the user?

— Why is the signifier that shape?

— Why is the signifier that colour?

— Why is the signifier created using

typography/an illustration/a
photograph (or a combination
of these)?

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

5
138

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 139

Collaborating with
the developer
Great UI designs, and great user
experiences, require the designer and the
developer to collaborate. This chapter will
explore positive ways in which the graphic
designer can optimize their communication
with the developer when designing an
interface. Designing for modularity will be
examined both in theory and in practice,
with examples from real design jobs.

An interview with designer/developer Alan

Bridge and a case study on Creative Griffin
will show how the graphic design of the UI
is prepared for coding by the developer.
This working relationship with the developer
will be championed, and the end of chapter
exercise will give you an opportunity to
practice designing with modularity in mind.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 140 The principles of designing modularity

‘Designing for modularity’ means As a designer, you will be creating the

identifying and deconstructing UI design in a digital file that will be
patterns of use in a single UI handed over to the developer. This file
design. Any design process begins will show each page of the UI with the
in creative chaos and the UI assets composited within a grid. This
design solution develops through is called a ‘comp’ file in designer’s
an iterative period of complexity language. If a grid is being used then
until a suitable outcome is part of the work of modularization has
designed. So designing for already begun. Photoshop PSD files
modularity is about streamlining are commonly used, but as we have
(not homogenizing) the designer’s already seen, this is not the only
creativity, and building a design design software.
system of repeatable assets
If each page variant of the UI shares
for reuse.
that same grid and visual hierarchy,
This streamlining of assets for reuse then assets on a single page or across
means that the developer will only the UI will conform to agreed size
need to write the code that describes ratios for assets (agreed by the team).
an asset once, and then reuse that If an asset repeats itself across the
code time and time again wherever that UI design more than once, it can be
asset appears in the UI. This improves modularized. This helps the designer
the user experience as reused code to define pixel-perfect assets and the
throughout the UI makes loading times spatial relationships between them. In
quicker. Of course, this doesn’t mean turn this helps the developer.
that every asset used in the interface
Designing with modularity in mind does
design will be repeatable in the UI.
not mean that a graphic designer’s
initial creativity and innovation need
A rationale for designers
to be restricted (a common fear about
It isn’t enough to make a great looking translating designs into code). It allows
UI design in Photoshop, Fireworks, for clearer communication between the
Illustrator or even InDesign as a designer and developer, and begins
composite (‘comp’) – the graphic to create a common visual language
designer has to think modularly between the two, which leads to good
as they make design decisions. design practice.
By deconstructing and identifying
repeatable and non-repeatable design
assets, the designer can create a
suitable aesthetic experience, so that
the design communicates simplicity of
use to the user.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 141

5.1

5.2
5.1 
www.kicksend.com
Same UI, different platforms
Depending on the platform
detected by the code, a
different version of the UI will
be displayed. Each selected
version of the UI will be
optimized for that platform
and will display the content
differently while maintaining a
common visual identity across
the versions using modularity
of assets.

5.2 
Code-controlling structure
In this example, the source code
for the HTML structure of the
website is overlaid on top of the
content. The CSS that controls
the styling and the JavaScript
that controls the interactivity
are not shown. The layout
and structure suggest which
elements are content and which
are assets.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 142 The view from Mars and the view from Venus

To demonstrate the importance As a graphic designer, if you were given

of communication between the a page of code by a developer and told
developer and the designer, to design a UI from that, it would be
we will look at a provocative difficult. It wouldn’t make sense to you,
little scenario to illustrate as that is not the language you work
how miscommunication arises in. Even though the code describes
between them. We have things that you would recognize, such
previously discussed first-person as hierarchy, headings, colour and text,
perspectives in the context of it is presented in a form you might not
understanding where the user is currently understand. Until you’ve been
coming from (see page 114). Now trained in programming it appears as
a first-person perspective will be gobbledegook to you.
used to show how the designer
Now reverse that scenario.
and developer do not perceive the
same things when they see each If a developer is given a Photoshop
other’s work. PSD comp file by a designer and told
to code it, similar problems arise as
developers see the UI in the context
of markup code. They need more
information than a Photoshop file from
the designer. If the PSD file doesn’t
help the developer understand the
‘Copy, art, typography —
spatial relationships of (and between)
and technology — are the design elements, or the intended pixel
bones of a project, where margins, then it is just pretty pictures.
design and development The developer will have to interpret
are the joints and skin the picture to understand what the
that connect and hold designer needs them to code.
together the parts. When
Designing for modularity helps to break
all of these elements
fit together well, you
down the ‘gobbledegook’ and ‘pretty
essentially have design pictures’ prejudices, and develops
and development a visual communication language
working together as the between the two specialisms that plays
support structure for to the strengths of each.
the user experience and
overarching concept, the
so-called “living entity”.’
– Cassie McDaniel (based
on a quote from Paul Rand),
Smashing Magazine

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 143

The benefits of designing modularly

Designing modularly has many

benefits and is a win:win:win design
methodology. Ultimately, other
than affording faster load times,
the process ensures that there is a
consistency in the UI’s visual hierarchy.
This is achieved through clearer
communication within the design team,
with the designer maintaining control
over the design without being at the
expense of the developer. This creates
a stronger working relationship in the
team and a better experience for
the user.

The designer wins as they get to

Main benefits of modularity
design an interface aesthetic that they
know will be translatable into code. For the designer

The developer wins, as they will get — Controlling the process of designing from
the design in a way that makes their complexity to simplicity

job of coding it much easier. Finally, — Ensuring the consistency of the

the user gets an interface that has visual hierarchy

been built mostly of modular assets — Refining design details to streamline into
and is fast loading. The users win repeatable assets

because they don’t realize this, but — Refocusing on the designer’s crafting of the
get a quick-loading aesthetic user visual communication

experience in the use of the interface. For the developer

That is why designers and developers — Clearer communication with the designer

need a good collaborative iterative — Common visual language

dialogue at each stage of UI design, — Reusable system to streamline coding
in which the developer needs to
For the user
communicate to the designer what
they need. What these are and how — Faster load times

a designer provides them will be — Consistency of visual hierarchy

discussed in more detail later in — Consistency of aesthetic experience across
the chapter. First, we’ll define what display platforms
modular assets are.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 144 Modularizing the aesthetic

If you work within a grid with Which assets are modular?

modular asset sizes, then you
So what are repeatable and non-
will clarify a lot of the detail
repeatable assets in a design comp?
the developer needs. Specific
To get us started, here are two
placement of the assets in the
examples of non-repeatable features
gridded design will allow for
that cannot be coded as modular.
specific location information
that the developer can translate 1. Variable content, such as the
into code. Dimensions of assets written copy of body text or
will be standardized, and their an image, cannot be modular
position in the comp layout will (although the container that holds
provide precise data, such as and formats the text or image
column widths, asset width and can be).
height and x and y position from
2. Non-standard dimensioned
top left. Once the digital comp file
assets require specific code to
of the design has been layered,
be written that cannot be reused.
grouped and labelled, it is ready
When used sparingly in the
to be passed to the developer
visual communication, they can
or development team. But which
have more impact on the user –
assets will become modular and
especially when attention needs to
coded for reuse?
be directed to a particular piece
of content.

By ensuring that most of the design’s

assets, such as text and image boxes,
navigation components (buttons),
rounded corners and lines, conform
to modular size ratios and to the
underlying gridded columns, they can
become reusable in the coding of the
design. For example, the structure
of global or contextual navigation
will be modular even though within
the module the wording on a button
may change as the code can easily
be written to overlay different words
on top of each module. This is great
for both internationalization and
localization of the UI as the code can
control which language is displayed
depending on who the user is.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 145

5.3

5.3
5.4
Image box and image
size ratios
Agreeing a ratio of image
sizes allows the designer
to be creative with placing
images, having the knowledge
that the developer will create
reusable pieces of code to
use throughout a UI that may
contain hundreds of images.
The image boxes shown here
are all in landscape orientation,
but it is equally straightforward
to set a reusable image ratio for
portrait display.

5.4
Modular components
Parts of your design can be
reused elsewhere in the UI.
This includes things like text
and image boxes, navigation
components (buttons), rounded
corners, lines etc. These are
referred to as ‘modules’ and
they fit to the underlying grid.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 146 Modularizing the aesthetic

What the developer needs Providing a PDF page layout

spec sheet for the developer is
The comp file needs to remain
not compulsory, and there isn’t
unflattened, but it is good practice to
a standard format for making
also supply additional guidance to the
one. They can often improve
developer. It is useful to make a PDF
communication between the
page layout spec sheet as a style guide
designer and developer, preventing
of the UI design (the BBC GEL style
miscommunication which can
guide is an example of this, see page
cause significant delays in the
71 ). This will be a flattened version of
design process. If the designer
the UI design and will generally show:
doesn’t make something like this
— each page variant available to the developer, there
are very likely to be problems with
— RGB values of the key colours used
accuracy. With a little extra time
— additional information on spent labelling layers, grouping
typography and asset sizes states and providing reference and
RGB colour guides, many little
— how each interactive state in the UI
problems can be avoided early in
visually works.
coding the UI.

5.5
5.5 Layered interactive states
Clearly layering, grouping and
labelling interactive states in the
assets will help the developer
understand both the context
and how the visual affordance
(the clues to its function and
use) will work in order to code it.

5.6 
PDF reference guide
Once the developer begins to
separate the unflattened digital
file into coded modules, it is
easy to lose sight of how it will
all function as a whole. A PDF
reference guide shows how the
assets will work. There is no
definitive template for an RGB
colour reference guide (see
page 81). The requirements
should be agreed between the
designer and the developer,
and will vary in detail depending
on the project and team. In
its basic form, it is a list of the
colours used in the design in
RGB values and/or
hexadecimal values.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 147

5.6

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 148 Modularizing
What the designer
the aesthetic
provides

For a developer to make sense of Deconstructing the design

the design comp file they need the
So, how do you introduce modularity
digital file in unflattened layers,
into your design?
with clear labelling and grouping
of different interactive states Begin by viewing all the UI design’s
into sub-layers. All the navigation page variants side-by-side and
assets can be grouped together highlighting which assets are repeated
(with sub-layers for specific parts and which are not. This highlighting
or contextual navigation). In these can be done on screen, but it is
sub-layers the interactive states more effective if the page variants
of every call-to-action design are printed out. Using this approach
element need to be appropriately will enable you to look at the design
labelled (for example, print-btn_up, with fresh eyes and identify which
print-btn_down, print-btn_hover). assets will be modular (see image 5.7).
Using different colours to indicate the
By structuring and grouping the
different types of modular assets will
assets logically in layers, it will be
aid identification.
clearer to the developer where to
find the assets so they can isolate If you’ve designed a consistent
each one and write the code to visual hierarchy for the UI with global
display it. and contextual navigation, it should
become obvious which assets repeat
It is good practice to layer and
on each page variation. Highlight these
label with descriptive terms as
buttons (orange boxes), text boxes
your design comp progresses, as
(blue boxes), image boxes (green
it makes it easy for anyone to
boxes) or other repeated elements
see what is repeatable and
(yellow and red boxes).
non-repeatable, interactive and
non-interactive. Once all the UI repeated modular
assets have been identified and
Integrating modularity into your
highlighted, it is easy to see which
workflow will help the UI to display
assets are not repeated. You will then
more fluidly by ensuring a solid
need to group and label the layers in
connection between the design
the digital comp file, making it clear
and the code. It is an adaptable
which are modular and which are not
methodology, which can be
repeated. Finally, you can compile the
applied to small or large interface
PDF page layout spec sheet as a style
projects, helping the interface to
guide ready for the developer.
respond to whichever platform it is
being displayed on.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 149

5.7

5.7
Highlighting modular assets
The assets that are repeated
should be highlighted to draw
attention to them. Once the
different modular assets have
been identified, ensure that the
comp file groups the assets and
their interactive states together.
Labels should be meaningful
and clearly describe what the
layer contains to communicate
to the developer what they need
to code.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 150 Interview: Alan Bridge Role
Website Designer/
Developer,
Can you give me a picture of How did you find the Creative Griffin,
your journey into becoming a transition from designing for UK
UI front-end designer? print to interactive?
Experience
I began on night courses at my I had to step up my game. I had Journey from
local college. Then I gained a to learn CSS (I got the basics graduate to
place on a BA design degree. in three days) and I learned professional
On the degree, I started working more HTML. Since I started, designer/developer
on the more visual side of I’ve learned PHP and now I’m
Web
interaction – the graphic design. getting my head around HTML5.
www.
Once I graduated I worked at But I also learned more about
creativegriffin.
a printer as a graphic designer. the process of how a site should co.uk
I oversaw all their digital work be made. I’ve been telling all my
because they were all litho clients that all their competitors
printers. I was with them for are just a click away. So the
just over a year or so and got design has to be easy and keep
introduced to another job – the users thinking ‘this is where
website design. I’m going – this is what I want’
because at any moment, they
can click on Google in the top
right of the browser and
they’re gone.

‘The design has to be

easy and keep the users
thinking “this is where
I’m going – this is what
I want”’
– Alan Bridge

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 151

How has understanding the What is your technique for

development side helped you deciding which assets will
as a website designer? be modular?

As a designer, you used to I generally start by going

rely on images for website through the brief and then go
backgrounds, titles and to the client with a web design
textures; images can take idea made in InDesign. We
up anything from a couple will discuss what they want on
of megabytes or just a few the home page, how the other
kilobytes. The original CSS pages would look and how they
was just the basics of ‘square’, want the user to go through the
‘colour’, ‘background colour’. UI to get the information. I don’t
Now, CSS3 is basically graphic make it in Photoshop because
design in code. CSS3 styles the I find that I can move things
website and makes it easy for around a lot more easily with
file sizes to be really small. It’s InDesign. For example, if you
only a couple of kilobytes now make a square with a gradient
and it makes the sites load in Photoshop and then decide
very quickly. to scale it up, it would pixelate.

I structure all my sites in PHP, I then take the InDesign file and
with HTML inside. If you have I spend a good couple of hours
just an HTML site and you have going through the design, going
ten pages that are all the same through each page (sometimes
layout, you’re going to have to I’ll print it off if it’s a really
make an HTML file for each one complex site). I’ll start with a
of those pages. With PHP it’s marker pen and I’ll circle saying
easier; you only have to make ‘that’s CSS,’ ‘this is an image,’
one file as a structural etc. Where it has to be an image
container so it’s uploading the – it has to be an image. If I can
same file every time. The only do the same thing in CSS3 then
thing it’s changing each time is I’ll do that, purely because it
the content. keeps the file size down. I’ll just
deconstruct the design in that
way, ready to code.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

152 Case study Project
Preparing a website design for a developer getmy
loanfeesback.com

Design team
Creative Griffin,
Preparing to modularize www.
creativegriffin.
Creative Griffin was commissioned
co.uk
to build a website for a new business
venture in the consumer financial Client
service compensation market. Consolidate
In preparation for the launch of Me Ltd
getmyloanfeesback.com, the graphic
designer worked closely with the
developer to break down the client’s
brief into a workable website idea.

Both discussed the pros and cons of

the aesthetic and functional decisions
to ensure that the proposed design
suited both the client and the target Once a design idea was agreed,
user. The visual communication had which worked for both the user
to communicate a friendly, accessible and the client, the designer and
and trustworthy compensation service developer began to work on the
for the consumer. At the same time, UI. The designer began putting
to fulfil the client’s needs, the website a design comp together, using
also had to clearly communicate Adobe InDesign as his software of
enough information to facilitate the choice to lay out the design to a
consumer placing a compensation grid. He ensured that all the assets
claim via the website. in the comp were grouped and
labelled descriptively, ready for the
developer to slice up and code.
5.8 This website design had several
The website idea in InDesign
The proposed design of the page variations to the set layout.
website is first constructed The designer took time (once the
within Adobe InDesign software. layouts had been designed) to
The UI elements are easier to
scale and adjust. Each asset is check to see what would or would
contained in its own layer, with not be modular assets. By looking
descriptive labels, to explain at all the page variations together
them to the developer.
(in this case he printed them out),
5.9 he could examine the assets
Website design across all the pages at the same
ready to modularize
The website has several page time. This made it easier to spot
variations in its design, these repeated assets.
are printed out actual size so
that the modular elements can
be highlighted.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 153

5.8

5.9

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

154 Case study
Preparing a website design for a developer

Highlighting modularity Deconstructed and ready

for the developer
Using a marker pen on the printed-out
page variants, the designer spent some Once the designer had completed
time going through each page of the the audit of his design for modular
website design. He first highlighted assets, he labelled them in the layers
all the obvious assets that repeated of the InDesign file. Along with the
across the pages. The lines and radii digital file, the designer also provided
of the written content, images, media the developer with a reference guide,
boxes would be set by the code including the relevant RGB colours.
anyway. But the boxes themselves fell This helped the developer to slice up
into different categories. These would the design and code more effectively.
also be modular and could be coded At this stage of the design process,
once by the developer so they were the designer and developer maintained
highlighted as modular. a dialogue on the modularity of
design to ensure the website’s
Some assets repeated just within
successful completion.
a single page, and these were also
highlighted as being modular. Although Once coded and ready to test, the
the designer was experienced and visual communication of the UI’s
designed the UI with modularity in design remained unchanged. A user
mind, it was good for him to look over would not be aware of which assets
a design that he is so familiar with were reused and which were unique to
with fresh eyes. While highlighting the the page. They were only aware that
modular assets, he was thinking about the website downloaded the assets
his design and what the developer quickly from the server, ready for them
could code once and reuse. He kept to make a claim.
thinking, ‘That asset is repeated and
could be coded in CSS.’ or ‘This asset
is not repeated. It may need to be an
image with its own code.’

Where the asset was not repeated, it 5.10

was highlighted and labelled as

non-modular. All this information
helped the developer to assess what
type of approach to take to coding
the website, which assets could be
coded once and reused, and which
assets would need bespoke code to
be written.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 155

5.11 5.12

5.10 5.11 5.12

The modular components in Example of design assets Example of design assets
the code that will become modular that are not repeated
Once the modular components The elements on each page that The parts of the design that
have been identified and are consistently repeated can obviously aren’t repeated won’t
labelled for the developer, they become modular and controlled be modular. Images, although
can be coded. The final design by the code. Other elements they are visually different, can
appears in the browser as a fully that may only be repeated fit into modular sizes of image
cohesive design (inset), but on on a single page can also be boxes. That way, the image
examination of the code it is controlled by the code. can be different, but conforms
clear what is coded as CSS and to a visual hierarchical scale of
what are images. regular image sizes. The image
box can be controlled by the
code, while the image inside
can vary.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

156 Exercise
Outlining modularity

Premise Outcomes
This chapter has discussed This exercise in modularity gets you
modularity of assets and how to examine the design decisions
designers structure their comp you take in the creation of the visual
files of the UI design ready for communication of a UI, so that you
the developer. This exercise will can streamline your design using
help you to begin to think about modular assets where possible.
designing with modularity in mind, It should help prepare you for
and to consolidate it practically. working with a developer, and can
Its aim is to deconstruct several be undertaken even if you currently
variant pages of a UI design don’t have any developers to work
and highlight which assets are with. It can be repeated as often as
repeated and which are not. It will you like with different UI designs, but
help you streamline your design the highlighting of the assets is not
using modular assets and prepare the end of the task. Ensure that you
you for working with a developer. also get used to labelling the layers in
You can use a UI design of your your design software as you go. The
own for this exercise. Choose one more you think about designing for
that has several page variants. If modularity, the quicker you will make it
you can partner up with someone to a normal part of your design process.
do this exercise, then swap your UI
designs with him or her. Doing so will
overcome your familiarity with your
own UI design, making it easier to spot
reusable assets. Use a UI design where
you have the digital file with at least
two page variants in an un-flattened
layered file. The focus is on preparing
a static design for a developer to
code, and not adding the interactivity
to the design.

The exercise is not suitable for a UI built

directly in authoring software, such as Adobe
Dreamweaver or Autodesk’s Scaleform.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 157

Exercise

Part 1: Scanning the UI design Part 3: Preparing the

page variants reference guides

Print out the selection of page variants Now that the comp file has been
from your design comp file at 100 optimized for the developer:
per cent. — Create a PDF version of the UI
Place each printed UI page variant side design showing each page variant.
by side so you can compare them. Also show how any interactive
states on that page will look (such
Identify which assets in the design are as up, down, hover), and annotate
repeated across the page variants. where necessary to explain this
Identify any assets in the design that interaction.
are repeated only on one page. — Name each page (Home page,
With a coloured marker, highlight these Contact etc).
repeated assets. — Create an RGB colour reference
With a different colour marker, highlight guide showing the colours used
any assets that are not repeated. in the design.

Part 2: Grouping and labelling the

assets in the digital file

Back in the digital comp file:

— Ensure that you have the asset

layers clearly labelled with
descriptive terms.

— Group any assets that should

be together (for example, group
navigation, group text boxes, group
images), maintaining the integrity
of the hierarchy of layers to prevent
breaking the design.

— Ensure that any interactive states

are also clearly labelled and
grouped.

— Identify which groups are modular

in nature and which will contain
non-repeated assets.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

6
158

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 159

Augmenting human
capabilities through
interfaces
In this final chapter, the discussion will
turn from the skills graphic designers need
and the time at which to apply them, to
future technological innovations that may
impact on how interfaces are designed.
We have looked at the change from WIMP
interfaces to post-WIMP interfaces. Now, the
implications of post-WIMP interfaces on the
graphic designer will be explored.

The three technologies that will be

discussed are QR codes, mobile augmented
reality and touch screen. However, the focus
will remain on how the designer can create
an aesthetic user experience. Therefore, as
the book comes to a close, the human user
remains central to how a graphic designer
visually communicates the UI design. It
will end with an interview with Kate Ho on
the multi-touchscreen Macallan Microsoft
Surface at Schiphol Airport by Whitespace.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 160 QR codes – print meets interaction

QR (quick response) codes are The colour and contrast of the barcode
all around us – in homes, towns on its background needs to be
and cities around the world. But optimized, otherwise a QR reader will
not everyone notices them or have trouble translating it. The team
understands what they do. The must ensure that the resolution and
QR code is a barcode with the printed size are suitable and that the
capacity to hold tens of thousands underlying grid is usable. There are a
of bits of information, and acts as number of web-based code generators
a shortcut to web-based content (Kaywa and Unitag are two) that will
from the physical world. This convert a data type to a QR code.
is where print meets the digital But the code itself doesn’t have to be
interactive world, as the code is a utilitarian and merely black on white.
printed square that can be found
Graphic designer Jim Divine has
on posters, leaflets, labels, books,
pioneered branding QR codes
magazines or any conceivable
that visually communicate the end
object. The QR code is scanned
destination of the link. He describes
with an app on a smartphone that
this branding of a QR code as a
takes the user to related web-
‘CyberLogo’. The skilful combination
based data. The data types that a
of an illustration or graphic into the
QR code can connect to include
barcode, while maintaining the required
calendars, v- or e-cards, email
formatting, patterns of position,
addresses, geo-locations, phone
alignment and timing, can be very
numbers, URLs, e-tickets
striking. Branding QR codes in such a
and surveys.
fashion aids identification for the user,
thereby increasing the chances of them
Quick response through
scanning it. However, as always, less is
visual communication
more. If the QR code is overused,
The QR code has a direct relevance its impact and usefulness will
to graphic designers, as it acts like a be diminished.
bridge between print and digital. These
are two realms that the designer must
have skills and training in. The QR 6.1

code itself is a mini-interface between

these two realms, and therefore needs
careful consideration within the design
process. The design team needs to
safeguard the integrity of the data
contained in the barcode, and ensure
that whatever web-based destination
it points the user toward is
mobile-friendly.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 161

6.2

6.1 
CyberLogo
Graphic designer Jim Divine
has developed the possibilities
of embedding a branded visual
identity within the barcoding
information in a QR code. This
‘CyberLogo’ adds a whole new
6.3
level of visual communication
to the QR code by indicating
where the code will take you.

6.2
What does QR do?
QR codes can be printed as
stickers, or directly onto an item.
It can then connect the user to a
range of web-based information
and control. Background
information to the item may be
available as an audio or video
file, or the act of scanning the
barcode could interact within a
multimedia experience.

6.3
How QR works
The QR code is a square
barcode. In three corners
are squares that help the QR
reader app position itself to
decode (1). A smaller square in
the bottom right-hand corner
helps align the reader (2). The
distribution of smaller jagged
splotches contains the digitized
information that connects to the
Web (3).

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 162 QR codes – print meets interaction

Transportation from ink to digital

For the QR code to transport the user

from print to the Web, they must have
a smartphone with the right app and
a camera to read the code. It doesn’t
matter whether the smartphone is iOS
or Android, Blackberry or Windows, as
they all have their own QR apps. What
does matter is the content that the
QR leads to and how it is presented
– it needs to be suitable for display
on a small screen. This is important,
as otherwise the user will not have a
good experience and may be put off
scanning any future QR codes.

The QR code itself can be used in

much more exciting ways. The barcode
is generated as a graphic artefact than
can be scaled (although not too small).
Some researchers, such as Dr Oli Mival
of Edinburgh Napier University, are
exploring new ways in which codes
can be embedded into a physical 6.4
QR in the environment
environment. These QR codes may be In principle, a QR code doesn’t
sculptural or carved, and yet remain necessarily have to be printed;
readable to a QR app interfacing with it could be structural within
an environment. As long as
web-based content specific to the the required barcoding data
relevant geographic location. This patterns of position, alignment,
development makes a connection timing and data and error
correction keys are translated
between the QR code and across to the 3D-sculptured
augmented reality. version it can still operate. The
user of the QR reading app
would have to stand further
away from this to align the
reader to the code.

6.5
QR meets AR
The significance of QR codes
within a specific environment
means contextual information
can be coded into a location.
This could unlock such things
as video stories of a particular
event which happened in that
location. This is where the
potential of QR codes makes a
transition into augmented
reality (AR).

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 163

6.4

6.5

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 164 Augmented interaction

Another technology that may Currently, the technology is still fairly

come to revolutionize how people rudimentary, but workable. Apart
interact digitally with the world from a digital device to view it on
around them is augmented reality (a smartphone), AR needs three
(AR). It may be the next big thing components to successfully function:
between the interfacing of print
— A marker to trigger the AR
and digital. AR is a technology that
layered information
blurs the digital world with the
real world by digitally overlaying a — Software to process the marker and
level of additional information onto deliver the content
what can be seen. This is currently
— An interface to bring the three
done using a digital device, such
components of marker, software
as a smartphone. It enhances
and content together to be
the experience of a real-world
accessed by the user.
environment in real time. But
effective AR visualization requires This form of digital interface is more
the careful application of visual dynamic than anything currently
communication principles. experienced on the Web or on a
smartphone app. This means that the
Overlaying reality visual communication of the layered
information needs to accommodate a
AR is closer to the real world than
variety of dynamic content. In respect
the purely computer-generated
to handheld AR devices, such as
virtual reality (VR). AR, using the
smartphones with AR apps (like Layar
camera in a smartphone and an app,
in The Netherlands), the interface is
essentially augments (increases) the
constrained by the current restrictions
real-world environment of the user
of camera quality, screen size,
by superimposing digital detail in
resolution and data download speeds.
real time. This information may be
graphical, textual, audio or video in Within the screen, the AR interface
nature. In theory, whatever the camera will need to display the real-time
points at, the AR app will add extra environment in which the AR marker(s)
digital information layers accessed sits, and then dynamically overlay
from the Web, which are contextual to a display of additional information
the GPS position of the user. drawn from the Web. Planning how
this information will be displayed offers
both exciting new opportunities to the
graphic designer and new problems
to overcome.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 165

6.6

6.6
AR and social networking
These concept designs, made
by Mathew Buckland and
Philip Langley, explore how
AR may impact on social
networking in the future. They
show the amount of overlaid
data, accessed in real time,
that may be required. This
demonstrates a problem with
AR that needs resolving with
regard to functionality, visual
communication and usability.
Too much information overlaid
at any one time will reduce the
communication, not enough
and the user will miss out.
The design team needs to
design for the Goldilocks
(just right) solution, through
experimentation and
user testing.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 166 Augmented interaction

6.7

6.8

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 167

The designer in the world

For the design team in general, and

the graphic designer in particular, the
display of content aggregated from the
Web adds a new level of complexity
to the design of interfaces; as the
dynamic overlay of graphics, text
and information over an image of the
environment requires sensitivity. The
visual examples of AR featured in this
section are all essentially prototypes to
show the potential of AR. Companies,
such as Layar and Wikitude, are
evolving the handheld AR experience
on smartphones in a much more
accessible way.

Like QR codes, the full impact of

AR won’t be felt until the general
population of users feel the need
for it. As Dr Sandor states, it’s not
until everyone can access it on
their smartphones, and then find a
use for it in their everyday life, that
it will truly become as embedded 6.7
into normal twenty-first-century life Connectedness
as touch screens and texting have. The connectedness between
the user and a communicated
Notwithstanding this, it is still important message will evolve in many
for graphic designers to consider and new ways. One such way was
plan ways to successfully visually evidenced at the One Giant
Pledge Event in 2012 in New
communicate such an AR interface. York. It used AR to encourage
families to eat one more
vegetable a day through an oath
made to the Jolly Green Giant
himself.

6.8
New York Subway app
This AR app by acrossair is for
locating NY Subway stations.
If you hold the phone flat, all
of the New York Subway lines
are displayed. When the phone
is tilted upwards, the nearest
stations are overlaid on the
screen in relation to the location
and view. The AR interface
loads in real time and displays
directions, distance and lines
available at the nearest stations.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 168 The touch-screen world

Android, iOS, Blackberry and Technology innovates and evolves

Windows mobile operating faster than any book could be updated
systems have all helped people to cover it. As soon as technology
to embrace the new touch-screen is written about, it is out of date.
world. Since Apple launched the Thankfully, this is not a book about
iPhone and opened up the market, technology; it is about designing
smartphones and tablets are now interfaces for people to use. We,
outstripping sales of desktop as human beings, evolve far more
PCs. It is therefore crucial for UI slowly than technology. Therefore,
designers to remain up to date the capabilities of humans remain the
with advances in this technology, same, they just need to adapt to a new
and this section will help you way of working with a new tool. And
explore some design implications that is all that touch-screen technology
of touch. is – a new tool.

6.9

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 169

UI under glass With touch-screen UIs, our interactions

are more directly manipulated than with
All digital technologies, in some way,
WIMP UIs. But we only really sense the
help augment human capabilities. But
feel of glass when we swipe or press
we still use our hands and fingers (if
the screen. It can therefore be said that
we are able-bodied) to manipulate
the UI is ‘under glass’; whereas with
the tools we use. The tools may now
desktops we were separated from the
be digital, but our hands and fingers
content by the mouse and pointer. With
are not. Our hands hold things, grasp
touch screens we’re now that bit closer
things, and cup things. Our fingertips
to the interaction, but tantalizingly
are covered in nerve endings, densely
still not quite ‘in’ the interaction. The
grouped, and they feed information to
current designs of touch-screen UIs
our brains for interpretation.
utilize the human finger and thumb in
gestures to access and interact with
the content. What is still missing from
the interaction while the interface
remains ‘under glass’ is the sensation
of texture.

6.9
Vote Band App
This app concept from graduate
Jacques Peacock allows
users to instantly vote for their
favourite acts during music
events such as a ‘Battle of
the Bands.’ To revolutionize
the audience participation the
app provides a social space
where band details and special
promotions can be aggregated
through close connection to
the Facebook platform. This
augmented social space is still
‘under the glass’ of the touch
screen but the user can feel
instantaneously more informed
about new music and respond
through the touch of a finger
on glass.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 170 The touch-screen world

Touching interactions If this technology takes off, then it

could have a huge impact on the
For graphic designers working on graphic designer’s role, and may be
print products the choice of physical particularly challenging for those who
materials, such as paper, card and have only designed for digital media.
cloth, are just as important a part of the The non-digital design processes and
visual communication as the typeface, skill sets learned at art college and on
kerning or colour. Up to this point, design degrees that focus on physical
this has not been a factor for graphic materials, such as packaging design,
designers engaged in web design, as will be very useful for future UI design.
the desktop consumption of a website Packaging design brings together the
firmly existed in the WIMP UI world. visual and the tactile senses into a
However, now that direct manipulation graphic designed experience. Apple is
through touch is becoming dominant, a perfect example of creating an entire
the ways in which users interact with experience for their customer through
UIs is changing. Already, scientists are their aesthetic packaging decisions.
prototyping texture touch screens. This aesthetic user experience, which
seductively engages all the senses
(especially the feel of the material)
will need realizing on future touch-
screen devices.

6.10
Transparent Screen
In this Transparent Screen
Android app by Sascha Affolter,
the touch screen can be made
to appear transparent (by clever
use of the camera), showing
what’s behind the user’s phone
through the Android apps that
are currently running. This effect
is not the same as AR, but it
does allow the user to interact
with the apps while walking – so
that they can see what they’re
doing and where they’re going
at the same time. Although the
app may have limited uses, it
demonstrates the importance
of an app working with the
6.10
physicality of the display device.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 171

This brings us back to the key role

of visual communication in the UI
design process. While scientists can
technically approximate the sensation
of texture, and developers will then
translate that into code, the way that
the sensation is communicated rests
with the graphic designer. They can be
instrumental in bringing to life the user
experience of the UI through the visual
and now (potentially) the feel of the
UI, too.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 172 Interview: Kate Ho Role
Managing Director,
Interface 3, UK
At Interface 3 you produce Do you see any other
smart multi-touch game technology that will affect Experience
solutions for tablets and other how we understand and An award-winning
educational games
touch-screen technologies. design interfaces in the
company with a
What is it about touch screens near future?
team of designers
that excites your designers? and developers
If it’s not touch screens then
The beautiful thing about it’ll be Microsoft’s Kinect (see who are
touch is the sense that you page 97). The Kinect has done passionate about
producing playful,
are directly manipulating so much in terms of being
novel, smart
something. The idea that there’s affordable (and now cross-
multi-touch
something I want to touch is platform, thanks to the hackers). games and toys.
more immediate and intuitive. I’ve seen smart TVs now where
Children now expect things to they use a lot of gestures so Web
be touchable and swipeable! that you can select TV shows. interface3.com
There is the idea of a connected
home, too. I’ve seen these
futuristic Microsoft videos where
every wall is a touch screen. I’m
not entirely sure we’ll want that.
But I think with the portability of
tablet-based devices there’ll be
so many more screens around
the home, and they’ll be so
much more accessible.

‘The beautiful thing

about touch is the sense
that you are directly
manipulating something.’
– Kate Ho

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 173

What is the issue with That hooks into the idea of the
embedding so many touch context stuff, because then you
screens in our homes and on have to be more intelligent as
our walls? you can’t place 70 buttons
(as in an old TV remote control)
As with anything that you
on a screen. On a touch screen,
embed in the house, they get
realistically, you can only put
outdated so quickly. Whereas
12 buttons on a screen because
wall-mount an iPad and…
each button has to fit the size
perfect. Two years later you
of a finger. We’re starting to use
need a new iPad? Take it out
that way of thinking, so now it
and plug a new one in. I think
becomes second nature to us
they’ll be slightly limited, but not
when we design.
because we don’t want them
around us, but more that we Do you think that the sense of
want to keep them up to date. texture will be added to future
touch-screen technologies?
So the portability of a touch-
screen device is important? It would be strange if we never
moved that bit further and
The portability is just amazing.
added a sense of texture, and
I think there’ll always be a place,
why shouldn’t it happen? The
especially in the workplace, for
tech is now getting to a stage
laptops for when you want to do
where I think the scientists have
work. But I think when you need
worked out how it can be done.
computers-on-the-go (and let’s
It’s whether it can be done at
admit it, we all need computers-
an affordable price and can
on-the-go in general because
be scaled. Why wouldn’t you
we’re so used to having Google
texture your interface so that
Maps and real-time information)
it’s inviting to touch? And with
that those devices will become
iPads, it’s really messing with
even more portable over time.
peoples’ heads regarding the
Is it helpful to see laptops as visual affordances, because
being predominantly used for how do you represent the
production of ‘content’, while visual affordance of texture
touch-screen tablets are more as a result? This is our first
for consumption of ‘content’? stab at it, and I think over the
next couple of years you’ll see
With production-based stuff,
improvements on the design
you want that picture ‘right
as newer, braver types of
there’ or that text ‘right
designers start to challenge the
there’. Whereas when you’re
possibilities even more.
consuming, you very rarely do
very detailed actions.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

174 Case study Project
The Macallan Microsoft Surface The Macallan
at Schiphol Airport Microsoft Surface
at Schiphol
Airport

The project Design team

Whitespace,
The Macallan Scotch whisky distillery
Edinburgh, UK
was founded in 1824, in the heart of
www.
Speyside, and today promotes itself whitespacers.com
as a luxury premium spirit. Whitespace
was commissioned by Edrington to use Implementation
cutting-edge technologies to build a UI team
to help consumers to engage with one Interface3,
of the world’s leading malts at point Edinburgh, UK
of purchase. www.interface3.
com
Whitespace’s objective was to
communicate the brand’s reputation Client
through the use of interactivity, video Edrington
and compelling visual communication
in an interface within an international
travel retail environment. The
Macallan’s ‘The 1824 Collection’ is The touch-screen interaction
exclusive to Travel Retail and therefore
only available at certain locations, The Microsoft PixelSense touch-
such as Amsterdam’s Schiphol Airport screen surface uses Windows 7
whisky shop. In collaboration with multi-touch and .Net technologies,
Interface3, the Microsoft PixelSense which allowed the design team
(Surface 2) touch-screen platform was to exploit the object-recognition
chosen. capability of the technology. The
team, comprising principally of Iain
Valentine (Creative Director), Charlie
Bell (Graphic Design Director) and
Johnny Lewery (Motion Designer),
designed the interface so the customer
6.11 could take a touch-screen journey
Initial scamp –
product-specific tasting notes through the story behind The Macallan.
In an early visual, the design Multiple customers could operate the
team communicated the user UI selecting bottles from The 1824
experience to the client.
Collection, placing them on the touch-
6.12 screen surface to interactively reveal
User journey – from surface each bottle’s contextual information.
to data capture
The team created a wireframe Customers could then experience how
demonstrating how the the whisky is made, browse whisky
interactive flow through the tasting notes and videos at their
interaction would take the user
to their desired content. own pace.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 175

6.11

6.12

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

176 Case study
The Macallan Microsoft Surface at Schiphol Airport

The designed user experience The graphic designer in the project

The design team had quite a few things A visual communication perspective
they needed to understand before was present throughout the entire
designing the UI: the Macallan brand, UI project. The main design team
their target audience, the technology’s was made up of experienced UI
opportunities and constraints, the graphic designers having designed
location for, and the implementation interfaces and apps for clients such
and testing of the UI. They engaged as UK television broadcaster Channel
in site visits to both the distillery 4. Collaborating with Whitespace’s
and Schiphol Airport’s whisky shop, in-house development team and
immersing themselves in the whisky Interface3, the graphic designers
production process – including tasting contributed greatly to a successful
a few drams (glasses of whisky). user experience using cutting-edge
touch-screen technology.
By engaging with the developers
from Interface3, the design team From conception through to the
ensured that their workshopping and coding and the testing of the UI, the
brainstorming of ideas would not graphic designers ensured that the
only exploit the full potential of the visual communication of interaction
PixelSense touch-screen technology, was a success for the entire interface
but their final concept would also be project. The research from the distillery
technically achievable. For example, and airport visits revealed important
the technology relied on light sensitivity insights that would otherwise have
for object recognition to work, so the been missed; these insights added
final interface’s surface would need to a richness of detail to the interactive
be precisely calibrated to the context design. In doing so, Whitespace
of Schiphol Airport’s whisky shop. This delivered a user experience that
led the team to visit Schiphol Airport. smoothly and effectively implemented
This in-depth testing of the UI, from a branded touch-screen experience,
the initial prototyping of ideas through which reflected the luxury positioning
to the user testing of the final design, of The Macallan and answered the
gave the team valuable insight into brief provided.
verifying their design decisions for the
visual communication of the interactive
user experience.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 177

6.13

6.14

6.13 6.14
Interactive for Oscuro bottle Select oak cask
The discussions with Interface3 ‘Aroma trails’ (images of
flagged that users still needed flavours) from the whisky appear
to be able to browse the surface to flow from the tip of the finger
without having to place the touching the screen.
bottle on the screen.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

178 Exercise
Concept design for an AR smartphone app

Premise Outcomes

In this final exercise, the focus This final exercise helps you to
is on consolidating your visual understand how functionality and
communication skills in the usability are both important for visual
concept design of an augmented communication. By working within
reality (AR) app. The exercise will the constraints of a small screen with
engage many skills needed to information that would be dynamically
design interfaces: research, user- accessed in real time, there is a
research, information architecture, need for a ‘Goldilocks’ solution
visual hierarchy, navigation, that is functional and that visually
content, graphic design for digital communicates the required information
media, designing an aesthetic in such a way that will be usable by
experience, modularizing another human being. The exercise
and localization. should help consolidate all your visual
communication skills with technical
The aim of this exercise is to
constraints to help you to design
create a concept design for an AR
successful interfaces, which create
app on a touch-screen smartphone
positive aesthetic user experiences.
showing a walk-through of the
information overlays within a
panoramic view of a scene.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 179

Exercise Part 3: Overlaying information

This exercise is broken down into — Depending on the concept you’ve
four parts. chosen and the quality of research
Part 1: Discovery you’ve done to find out information
about the environment, you will now
Before beginning this exercise you will design a UI as an AR overlay.
need to:
— Try out several concepts before
— Make a panorama photograph of a deciding on one UI design.
scene in your locale.
— Choose the strongest concept
— Research some contextual and place it into your smartphone
information about the locale to add template over your panorama scene
as AR overlays. From the research, (see image 6.16).
decide the purpose of your AR app
concept by choosing a specific — Overlay ALL the AR information you
information theme (for example, the have to the file in a new layer (see
nearest transport stops). image 6.17).

— Decide who your target audience is Part 4: Finalizing the

and create a set of user personas to design concept
help you understand what they will — Through a period of design
need from the app. This may make iterations, revise your design,
you revise your concept. and where necessary, change the
Part 2: Adding the panorama into amount of information displayed
the smartphone template (see image 6.18). Good copywriting
may help here.
— Once you have your panoramic
scene, place it into your — Try printing the file out and make
smartphone template (see image a paper prototype to test with some
6.15 overleaf). target users.

— In the template, the smartphone — Once you’re satisfied that the
needs to sit in the top layer with concept is working, finalize it into
another layer below to contain the a design concept that you could
concept design’s AR walk-throughs. show a client.

— You will have to expand the width

of the canvas to match the width
of the panorama, and may also
have to reduce the size of your
smartphone if it is too big. Don’t
enlarge either image – you’ll
lose quality.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 180 Exercise
Concept design for an AR smartphone app

6.15

6.16

6.15 6.16
Smartphone template Adding the panorama
The smartphone needs to sit on Once you have your panoramic
a top layer in Adobe Photoshop scene, place it into your
(or similar software) with another smartphone template. Don’t
layer below to contain the enlarge either image – you’ll
concept design’s AR lose quality.
walk-throughs.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 181

6.17

6.18

6.17 6.18
Overlaying information Finalizing the design concept
Overlay ALL the information you Through a period of design
have to the file in a new layer. iterations, revise your design,
and where necessary, change
the amount of information
displayed (good copywriting
may help here).

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 182 Glossary

Abjads Assets Code

A writing system, such as Arabic or The elements that make up a design, In the context of this book, code has
Hebrew, where each symbol refers to which will be placed into the structure been used as a catch-all term to describe
a consonant, leaving the reader to add of the UI. all the programming languages used in
the vowels. UI design, from simple markup HTML
Augmented reality (AR) to more advanced C++ and everything
Action safe area A technology that blurs the digital world in between.
Approximately 95% of a TV screen is with the real world by digitally overlaying
what is deemed ‘action safe’, as TV a level of additional information onto Coder
screens tend to cut off the edges of the what can be seen. This is currently A programmer (see also Developer).
picture through overscanning. done using a digital device, such as a
smartphone. It enhances the experience Comp
Adjustment layers of a real-world environment in real time. This is a working version of the final
A layer that contains an effect, such as design. In this book it refers to the
brightness or saturation, that is applied Back-end ordering system digital file (Photoshop, Illustrator,
to all the layers that sit below it. A database system in eCommerce Fireworks, InDesign etc) that has the UI
websites that processes orders, payment structure and assets composited into
Aesthetics transactions, and transportation. an underlying grid on separate layers,
This means more than just a particular grouped and labelled accordingly.
style or type of UI design. Aesthetics is Bandwidth
integral to the human experience as it Think broadband, 3G and Wi-Fi as this Complementary colours
is a perception and judgement on the refers to the channel through which data These colours sit opposite each other
quality of beauty. It is heavily invested in is delivered via telecommunication. It is on the colour wheel (like red/green).
the experiences one encounters in the measured through bits per second and a Choosing complementary colours helps
world. What is judged as aesthetic is ‘bit’ is a single piece of information. calm our visual system.
fluid. Current cultural norms and societal
values may change (‘the new black’ or BD Contextual navigation
‘what’s cool’ trends). Abbreviation for Blu-ray Disc, an optical Navigation that may only be available in
disc format that is replacing DVDs. a particular area of the UI, on a particular
Affordance subject page or may only become
see Visual affordance Bitmaps unlocked within a process. An example
An image created through colouring each is the options on each window of a
Algorithm pixel using file formats, such as JPG, software installation where the buttons
In programming, this is a computational PNG and GIF. change their action calls depending
procedure that is based on mathematical on what step of the process has been
logic that if correctly applied solves a Bleed reached.
problem. Any part of the design that extends off
the screen edges. Contrasting colours
Alpha channel Colours that are from different parts of
Controls the opacity of a colour or image. Body copy the colour wheel (such as a red and blue)
100%: fully visible, 0%: invisible. Written content that isn’t a header, and can be effective in drawing attention.
caption or link that forms the main
Analogous colours information parts of a UI page. CSS
These colours sit next to each other on see Cascading Style Sheets
the colour wheel, and work well with Brainstorm
each other as they share a similar part of An active dialogue within a team to CSS3
the colour spectrum (for example, green, discover design problems and then The latest version of CSS that adds
blue, purple). mindmap design solutions. a whole level of styling control for a
designer.
Android Calls to action
Google’s mobile operating system for These are visual communications that Deconstruction
smartphones and PC tablets. inform the user that they need to choose An act of analysing and breaking down
or do something within the interaction, an existing design to understand how it
Anti-aliasing such as a submit button. is constructed. This allows you to see
A blurring of two coloured pixels with and understand the design decisions that
a third pixel that is a mix of the two Cascading Style Sheets (CSS) have been taken and how the design has
to create the illusion of smoothness, Used in conjunction with HTML and been structured.
compensating for the stepped nature PHP they control the structure of a
of pixels. website. This code defines the styling of Demographic
a website’s layout. A marketing term that describes the
App(s) common characteristics of a group of
Short for Application(s), usually referring CMYK people sorted by age, sex, class, etc.
to software to be used on a smartphone Colour space using cyan, magenta,
or tablet. yellow and black used in print. Descenders
The vertical stem of a lower-case letter
AR Co-design like ‘g’ that extends below the baseline
see Augmented reality (AR) A design methodology that is of a typeface.
community-centred where designers
Ascenders work directly with representatives of the
The vertical stem of a lower-case letter people who will be served by a designed
like ‘h’ that extends above the x-height outcome. The ‘co’ in co-design can
of a typeface. mean cooperative, community
or collaborative.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 183

Developer Grid Ideation

A programmer who produces the code The grid is an underlying framework that The initial idea-generating phase of
for the UI design. They may be front- graphic design has used effectively to the design process where lots of ideas
end developers concerned with coding structure visual communication. A grid for the project outcome are proposed
markup and styling for web or mobile helps to place content and navigation through brainstorming.
UIs (HTML, XHTML, HTML 5, Javascript, in a controlled way to aid visual
XML, CSS). They may also be back-end communication. Information architecture (IA)
developers concerned with programming A process of research, analysis and
the game engines, content management Gridded structure evaluation to communicate to the UI
systems, data delivery (Python, Ruby, C, A gridded structure aids the design team the UI’s interactive structure,
PhP, Cocoa, VisualBAsic, AJAX, jQuery, comprehension of the user in revealing an optimum navigation pathway
MySQL). distinguishing the visual hierarchy of through the content to ensure user and
navigation and content. client goals are met. The IA provides
Dithered information as to what-content-goes-
Digital mixing of colours pixel by pixel to GUI where and what-needs-to-link-to-what.
aid display. see Graphical User Interface
Interactive kiosk
Em Gutters A static interactive screen found in situ
An em is equal to the width of a capital The gaps between columns in a grid. within public arenas for public use.
M and relative to the size of a typeface’s
current font size. It has finer size Hexadecimal values Interface
increments and scales well. Colour on web-based UIs is controlled see User interface
by the code through a conversion of the
Eye tracking RGB values into a hexadecimal value. Invisible interface
User-testing that uses camera The values that make up the range of When an aesthetic user experience has
technology to capture eye movements hexadecimal colours begin at zero and been achieved, the user’s awareness of
around an interface on a screen go up to nine, and use the letters A to F. the interface itself will disappear from
generating data on what was looked at their conscious attention.
to test the effectiveness of a UI’s visual Hierarchical gridded structure
hierarchy. It is not just the eye movement A design’s visual hierarchy laid out in iOS
that is measured, but also the duration a grid in a digital comp file. Apple’s mobile operating system for
of time spent looking at each element on iPhone and iPad.
Hot spots
the screen.
In eye-tracking, the areas on a screen Iterative design
Fluid grids where eye movements are recorded A design process that understands
The fluid control of gridded content that lingering the most. that great design doesn’t just appear, it
can resize the widths and heights of emerges from a creative experimental
HTML process. This is cyclical and follows
each element relative to each other for
Hyper-text Markup Language. Code that repetition of an ideation and designing
different devices.
defines the structure of a web-based phase, followed by prototyping and
Flush left interface. testing the design. This reveals areas
Straight alignment of body copy to the for improvement and modification in
HTML5 the design, which begins another phase
left-hand margin allowing the right-hand
A new development of HTML that of designing and user testing until a
side to be ‘ragged.’
eliminates the need to install third party successful design outcome has been
Fonts plug-ins in browsers and allows the code achieved within the deadline and budget
Often confused with a typeface - a to control more interactive multimedia set by the client.
typeface is a family of fonts. The font is a assets that were formerly controlled by
classification of a style of typeface such Adobe Flash. Iterative process
as roman, condensed, italic or bold.See see Iterative design
Hypertext
also Typeface.
The fundamental basic foundation of Internationalization
Functionality interactive design. It is the linking of text ‘The design and development of a
How a UI works focusing on the within a document or across different product, application or document
combination of the technology used, documents. This text is displayed as content that enables easy localization
the look and feel of the UI on a device, underlined, and usually blue in its un- for target audiences that vary in culture,
and the underlying code that makes the clicked state, turning to purple after it region or language.’
device work. has been visited. – World Wide Web Consortium

Global navigation IA JavaScript

Navigation that is available from every see Information architecture A scripting language used to create
page of the UI. Examples of this form interactivity within a web-based UI, such
Icon as validating forms, image rollovers and
of navigation would include links to the
Interface tools that visually focus to open pop-up windows.
home page, to help, to print etc.
attention and communicate in a concise
Graphical user interface (GUI) and simple way a call to action in the jQuery
A user interface that uses bitmapped interface by using an understandable A JavaScript library of functions
graphics. Through the graphic design visual metaphor. and methods that helps to simplify
and use of visual metaphors, it visually the interaction, event handling and
Iconography animations within an HTML document.
communicates the interface’s navigation,
The visual grammar of the symbols used
the interaction and content.
in the design of icons for a UI.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 184 Glossary

Kerning Negative space Quick response codes

The spacing of letters within a word The spaces between assets and A barcode with the capacity of holding
that allows the adjustment of one letter information in a UI, which allows the tens of thousands of bits of information
nearer or farther away from its closest hierarchy of the design to be revealed and acting as a shortcut to web-based
neighbour. and the user to quickly find the content content from the physical world. It is
they want. printed as a square code that can be
Leading found on posters, leaflets, labels, books,
An increase or decrease in the vertical Non-linear magazines or any conceivable object.
spaces between baselines, which can Navigation that does not follow a The QR code is scanned with an app on
have dramatic affects on legibility. sequential order, but can jump to any a smartphone, which takes the user to
content or page within the navigational the related web-based data.
Linear structure of the UI or outside it if it uses
Navigation within a UI that follows a hypertextual links. Responsive design
sequential order, such as page 1 then A web design methodology using CSS3
page 2, 3, 4. Participatory design jQueries to determine the screen size and
Built on the four principles of capability of the target device that the
Localization cooperating, experimenting, website will be displayed on, and then
‘The adaptation of a product, application contextualizing and iterating. It is an the code resizes the UI design to suit the
or document content to meet the approach that emphasizes active detected device.
language, cultural and other requirements user participation in computer system
of a specific target market (a ‘locale’).’ development. Return on investment (ROI)
– World Wide Web Consortium The client who commissions a UI will
Personas invest money into the interface and will
Logographic see User personas want to see a result from that investment.
A writing system (such as Chinese) that This may mean an increased financial
can be read vertically or horizontally. PHP (Hypertext Preprocessor) return or more people using the interface.
A scripting language that defines the The client should state their requirements
Markup structure of a website that is read from early in the initial conversations, and the
Syntax used, as in coding language, such a server and displayed as HTML code UX designer and information architect
as HTML (and variants XML and XHTML), in a browser. This makes PHP secure will have responsibility in how the ROI
for defining elements in web pages or enough to access secure information and will be measured.
data files. Markup uses tags in the code databases (in conjunction with MySQL).
before and after each element to define RGB
the element such as <title></title>. Pixel Colour space using red, green and blue
A single square that can be one of over in digital display.
Media query 65,000 colours on a screen display.
see jQuery RGBA
Platform In CSS3, the RGB colour value with an
Metaphor Usually refers to the operating system, added alpha channel value referenced
The transfer of meaning from one object such as iOS, OSX, Windows and Android by the A.
to designate another object with that that controls the device that a UI is
meaning (this different thing represents displayed on. ROI
this actual thing). see Return on investment
Progress bars
Modularity When some UIs load on certain devices, Screen resolution
The process of designing using asset the rate of loading is displayed as a linear The screen quality determined by
sizes that can be coded once and reused graphical line that changes colour in how many pixels per inch (ppi) will be
as many times as required in the UI. relation to the percentage of the UI that displayed. The higher the density, the
has been loaded. better the screen quality.
Modules
UI elements that are repeatable Prototype Semiotics
components with ratio defined sizes on A mock-up of a proposed system An underlying theory on which successful
both their x-axis and y-axis, which are or concept for inspection, testing visual communication is built. There is
then reusable. and guidance. a connection between what you see
(signifier) and what it means (signified).
MySQL QR codes These two parts – the visual signifier and
A relational database management see Quick response codes its signified meaning – form a
system used in conjunction with PHP
semiotic sign.
to dynamically add, remove and modify Qualitative data
data in a database connected to a UI. Information that is more concerned with Server-side programming
understanding the qualities of something. (or scripting)
Navigation contextual structure This form of data is collected using a The online fulfilment of a user request
A way of grouping and visualizing variety of social science methodologies executed by a script on a web server and
content in the IA through content including ethnography, phenomenology, displayed in the user’s browser.
associations rather than a hierarchical anthropology, grounded theory,
gridded structure, which shows each hermeneutics, content analysis, critical Skinning
navigation level in neat rows. theory and discourse analysis. The reduction of graphic design
for digital media from rich visual
Navigation pathway Quantitative data communication throughout the design
The route through an interface to access Information that is verifiable in the process to ‘visual design’. The skinning
the content where features of higher form of statistical analysis of figures, of code refers to the graphic designer
primary importance will be presented to measurements and quantities. only being brought in at the end of the
the user first, with secondary features
design process after the code has
held in reserve.
been written.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 185

Smart objects Usability testing facility Visual rhythm

Within Photoshop, these are layers that Usability testing doesn’t need expensive The balancing of the hierarchy to help
preserve an image’s source content facilities. It can be conducted with the user’s effortless flow through the
which can be edited as a layer without minimum equipment and a video camera. interface.
affecting the original bitmap or Watching the user remotely from another
vector image. room via a video link allows the design VR
team to observe how the UI is working. see Virtual reality
Tabs Viewing via a camera that the user is not
A navigational device based on an aware of, nor distracted by, allows for White space
office filing system metaphor to indicate more natural behaviour to be observed. see Negative space
navigation options. This helps the user
to understand where they are within the User advocate Widgets
interactive structure, and know where In UI design, the UX designer ensures Mini-applications used to perform
they can next proceed. that the user is championed in the design specific tasks that can be embedded
process. within a larger UI (for example, a voting
Text safe area box on a website).
Approximately 90% of a TV screen is User experience (UX)
deemed ‘text safe’ where text is always A successful interaction for the user. WIMPs
viewable despite TV screens losing Traditionally GUIs have been designed
information off the edges of the picture User-facing names for interaction via windows, icons, menus
through overscanning. Text written in words the user would and a pointer.
understand instead of using technical
Third-party plug-ins terms. Wireframing
Additional software added to A proposed layout using nothing more
existing applications to augment that User interface (UI) than lines, boxes and basic text to
application’s range of options. The An interface is a point of contact show possible frameworks for the visual
most obvious plug-in is Flash Player, between two entities. In a user interface, hierarchy, navigation priorities and
which is added to a browser to view this is effectively the visual interaction suitable content areas. It is a method that
Flash content. between a human and a computer. takes the IA and considers the technical
platforms that the UI will be accessed
Tracking User personas from. They are not the final design that
The horizontal increasing or decreasing An important tool in the designer’s just needs ‘colouring in’.
of the spaces between each letter in a toolkit. It is an archetype (not a
word; it can have different effects on stereotype) created to represent the x-axis
readability and comprehension. target user(s) in a form that will inspire The horizontal width of the screen.
the design team. It takes the form of a
Trackpad profile with a name, an image and various x-height
The input area on a laptop. amounts of information on each type of The vertical height of a lower case
user. The use of personas at the ideation letter like ‘x’ not counting letters with
Triadic relationship stage helps the design team identify ascenders (like ‘h’) or descenders
A three-colour scheme that is equally their target audience, summarizing user (like ‘y’).
spaced using an equilateral triangle. motivations, expectations, experience,
y-axis
knowledge and desires.
Typeface The vertical height of the screen.
A typeface is a style of letters including UX
upper case, lower case, numbers and see User experience
glyphs. Examples of typefaces include
Times, Helvetica, Verdana and Courier. Vectors
One form of digital image that does not
Typography lose image integrity in resizing. They are
Aids the communication of text through mathematically defined, and infinitely
the deliberate and thoughtful selection of scalable without loss of quality.
the most suitable typeface (at the correct
size for the reader) by manipulating word Virtual reality (VR)
height, letter style and spacing between A term describing an environment that
words, letters and lines. a person can become immersed in,
explore and interact with, which is wholly
Uploader computer generated.
A small app or widget that transfers
digital files from one computer device or Visual affordance
peripheral to another computer. The communication of interactivity in a
UI indicating calls to action that lead to a
Usability testing successful outcome.
Testing evaluates the accessibility and
usability of an interface. Testing the UI Visual hierarchy
at different design stages reveals any The headers, navigation and content
usability problems that need addressing. are layered from high importance, to
Ideally, three or four people (not design secondary and then tertiary importance,
staff) should test the UI design. Each affording an effortless flow through the
user will perform the same task and interface by communicating what is
this generates questions that demand accessible, what is interactive, and what
solutions. to do next.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 186 Index

Page numbers in italics denote colour 58, 80, 81, 82, 84, 85
illustrations. colour perception 82
colour theory 84
abjads 122, 182 colour wheel 84
accessibility 31 communication 9, 142
action safe area 70, 182 communication tools 44
additive model 80 comp 140, 146, 182
adjustment layers 182 complementary colours 84, 182
aesthetics 10, 112, 182 computer games 96, 98
Alertbox 52 connectedness 166
algorithm 182 content 78, 116, 121
alpha channel 182 content inventory 44
analogous colours 84, 182 content selection 98
Android 182 context 78, 92, 118
angles 94 contextual information 174
animations 98 contextual navigation 46, 182
anti-aliasing 86, 87, 94, 182 contrasting colours 84, 182
app 182 copywriting 116, 117
Apple 52, 170 Creative Griffin 152
AR see augmented reality cultural perspectives 82
archived video 98 CyberLogo 160, 161
ascenders 68, 182
assets 109, 144, 155, 182 deconstruction 135, 182
Athlon Productions 13 demographics 24, 182
augmented reality (AR) 163, 164, 165, 167, descenders 68, 182
178-9, 180-1, 182 design 9, 114
design team 12
back-end ordering system 35, 182 desktop display 86
Baldur’s Gate 21 destination 118, 121
bandwidth 182 developers 12, 142, 183
bitmaps 86, 87, 94, 182 display typeface 74
bleed 70, 182 dithered 183
Blue-ray 102, 103, 104, 105 Divine, Jim 160
body copy 79, 182 Duffy, Ciaran 24
body text 117 DVD, information architecture 47
brainstorm 182 dynamic grids 73
branding 160
Bridge, Alan 150-1 ease of use 43
browsers 59 elloDave 32-5
buttons 132, 145 em 68, 183
embedded interaction 89
calls to action 79, 98, 114, 182 embedding 173
cascading style sheets (CSS) 35, 72,100, 151, embodiment 113
182 encapsulated postscript files 86, 87
clickability 76 eye tracking 59, 60, 61, 62, 183
clients 22
CMYK colour space 80, 182 first-person experience 114, 142
co-design 182 Fishman Marketing 60
code 182 fixation order 61
code-controlling structure 141 flow solution 44
coded animation 99 fluid grids 183
coder 182 flush left 78, 183
see also developer fonts 183
collaboration 127, 143 see also typeface

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 187

Frascara, Jorge 9 interactive kiosk 129, 130, 131, 183

functionality 42, 74, 114, 183 interactivity 52, 96, 106, 108, 109, 112
Future Insights 101 interface see also user interface
interface definitions 10, 28
game profiles 25 interface hierarchy 48
gap analysis 44 interface type 79
Gauer, Martin 13 Interface3 172, 176
gestural input 40 internationalization 122, 124, 183
getmyloanfeesback.com 153 interpretation 120
Gibson, Greg 58-9 invisible interface 183
GIF 87 iOS 183
Global Experience Language 52, 70 iPads 173
global navigation 46, 183 IS see information architecture
goal 114 iterative design 32, 183
Google doodles 123
graphic designers 10, 12, 16, 18, 142 JavaScript 183
graphical user interface (GUI) 37, 38, 183 joint photography experts group (JPG) 87
graphics interchange format (GIF) 87 jQuery 72, 183
greyed out 21
grid 68, 69, 70, 71, 109, 140, 183 kerning 74, 184
Grid System 69 Kinect 41, 97, 172
gridded structure 50, 183 Kramer, Kristin 44, 126-7
GRIP 11 Krug, Steve 12, 28-31
Grip Limited 117 Kus, Mike 100, 101
GUI 37, 38, 183
gutters 68, 183 labels 117
language 92, 122, 124
hexadecimal values 80, 85, 183 L.A.Noire 115
hierarchical gridded structure 47, 183 laptops 173
hierarchy 31, 44, 48, 49, 78 layered interactive states 146
Ho, Kate 172-3 layout 58
hotspots 62, 183 leading 74, 77, 184
HTML 35, 76, 183 linear 184
HTML5 98, 183 loading progress bars 98
human-computer interaction 52 localization 124, 184
hypertext 79, 183 logographic 122, 184
Hypertext Preprocessor 184
Macallan Microsoft Surface 174, 175,
iconography 88-95, 183 176, 177
icons 33, 60, 88, 90, 91, 93, 183 Mafia II 71
designing 94, 95 markup 184
meaning 92 media query see jQuery
ideation 183 message 118, 120
IDEO 14, 15, 115 metaphor 38, 92, 102, 184
illustrator rough 34 Method Cards 115
image box 145 miscommunication noise 48
image size ratios 145 mobile use 58, 127
imagery 86, 87 modular assets 149
InDesign 151 modularity 140, 142, 143, 148, 154,
information architecture 18, 35, 42, 46, 47, 183 156-7, 184
input devices 38, 40, 54, 96 modules 70, 155, 184
intention 118, 120 monospaced typeface 74
interaction loop 17 motion 96, 98
interactive flow 16, 22, 44 motion graphics 96

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 188 Index

motion sensors 96 reading 78

Mozilla 52 receiver 118
multi-language design 125 repeatable assets 144
MySQL 184 resolution guide 69
responsive design 72, 184
National Film Board of Canada 51 return on investment 22, 44, 184
navigation 11, 46, 52, 109 RGB 80, 84, 184
Blue-ray 104, 105
images 88 san serif typeface 74
navigation assets 148 scalable vector graphic (SVG) files 86, 87
navigation pathway 42, 43, 184 scan-read 78
navigational contextual structure 47, 184 The Scotch Malt Whiskey Society 135-6
negative space 68, 184 screen ratio 72
New York Subway app 166 screen reading 78
noise 84, 118, 120 screen resolution 68, 86, 184
non-linear 184 screen-based colours 81
non-repeatable assets 144 semiotics 114, 118, 132, 133, 134-7, 184
non-verbal communication 80 sender 118
serif typefaces 74, 78
Oakley, Chris 113 server-side programming 35, 184
Onuki, Toshi 102 Shakey Pictures 102
orientation 72 Sick City Club 99, 119
sign 118, 137
packaging design 170 signified 118, 120, 137
page variants 140 signifier 118, 137
paper prototyping 18, 31, 56 Sim City 49
participatory design 184 skinning 184
PDF reference guide 146, 147 smart objects 185
perception 112 smartphones 72, 76, 77
personal goals 20 social networking 165
personas see user personas stakeholders 127
Pflanzen Gegen Zombies 125 Starck, Philippe 24
Photoshop 34 streaming video 98
PHP 184 style guide 146
pixels 68, 78, 94, 184 SVG files 86, 87
platforms 141, 184 symmetry 50
gridding 72
wireframing 54 T-shaped designers 14-15, 35
PNG see portable network graphics tablets 72, 77, 86, 96, 173
portability 173 tabs 185
portable network graphics (PNG) 87 tactile input 40
print design 68 text 109, 116
Pritchard, Ben 32 text labels 92
profiles 24 text safe area 71, 185
progress bars 184 texture 169, 170
prototype 184 third party plug-ins 96, 185
see also paper prototypes Total Media 102
Purpose 128 touch interaction 41
touch-screens 76, 168-77
qualitative data 184 tracking 74, 185
quantitative data 184 trackpad 185
quick response codes 160, 161, 162, transmission 118
163, 184 Transparent Screen 170-1
triadic relationship 84, 185

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 189

TV 70, 98 windows, icons, menus, pointers (WIMPS)

Twitter users 24 38, 39, 185
type hierarchy 79 wireframing 18, 31, 53, 54, 55,
typefaces 58, 75, 78, 79, 185 57, 185
TypeKit 100 word length 122-3
typography 74, 76, 116, 129, 185 WorldSkills 128-33

universal meaning 92 x-axis 70, 185

uploader 185 x-height 68, 75, 185
usability 18, 28, 42
usability testing 28-9, 185 y-axis 70, 185
user 20, 24, 112, 118 Young, Neil 102
user advocate 185
user experience 12, 16, 112, 126-7,
185, 270
user input 54
user interface 6, 20, 114, 185
design process 18
hierarchy 64, 65
interactive flow 18-19
roadmap 46
text 78
user personas 18, 24, 26, 27, 44, 185
user research 22
user-facing names 44, 117, 185

vectors 86, 87, 185

Vedder Price 60
video content 98
virtual reality 164, 185
visitor experience 128
visual 9
visual affordances 35, 38, 76, 79, 173, 185
visual attention level 61
visual communication 98, 107, 170
visual design 10, 18, 119
visual environment 88
visual hierarchy 48, 50, 51, 58-9, 60, 185
visual rhythm 50, 185
visual weighting 50
visualization tools 45
VoteBand app 53, 169-70

warm colours 82
We Print Paper 33
websites 100
information architecture 47
iterative design 33
wireframing 58
white space see negative space
Whitespace 134, 174
widescreen 70
widgets 185

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 190 Picture credits

Cover image: courtesy of Sensi Soft Ltd, Page 51: At Home interactive work, P103–105: Courtesy of Shakey Pictures
sensisoft.com courtesy of The National Film Board of shakeypictures.com
Canada. Athome.nfb.ca/#/athome/home
Page 3: People using tablet © Brand Pages 106–109: © Dave Wood
New Images, courtesy of Getty Images Page 53: VoteBandApp © 2013 Jacques
Peacock jacquespeacock.com Page 113: Images from The Catalogue,
Page 11: courtesy of Grip Limited, a video created by artist Chris Oakley in
griplimited.com Page 55: sketched wireframe courtesy 2004. © Chris Oakley 2004
of Sockyung Hong, vimeo.com
Page 13: top image courtesy of Athlon, Page 115: top image L.A. Noire
athlonlondon.com; bottom image Page 57: wireframe © 2013 screenshots courtesy of Rockstar
courtesy of Martin Gauer, attackemart.in Jacques Peacock jacquespeacock.com Games,Inc.; bottom image courtesy
of IDEO, ideo.com
Page 14: designs-on.com courtesy Page 60–63: VedderPrice.com variations
of IDEO ideo.com screenshots courtesy of Fishman Page 117: courtesy of Grip Limited,
Marketing Inc. griplimited.com
Page 15: Character render
© Danny Hull, 2013. All rights reserved Page 64: courtesy of Alan MacFarlane Pages 119–121: sickcityclub.net
images courtesy of Brown & White,
Page 17: Interaction loop illustration Page 69: top image Resolution Guide richbrown.info
© Jamie Portch (YCN Talent Agency). © Dave Wood; bottom image courtesy
Redrawn from ‘Interaction’ illustration, of thegridsystem.org Page 123: © Google
Bill Verplank, 1999. HCI lecture, CCRMA,
Stanford University, http://hci.sapp.org/ Page 71: top image Mafia II screenshots Page 125: Plants vs Zombies (PopCap
lectures/verplank/interaction courtesy of 2K Games; bottom images Games) courtesy of gamespress.com
GEL guidelines © BBC 2013,
Pages 18–19: Graphic design position bbc.co.uk/gel Pages 130–133: Courtesy of Purpose,
© Dave Wood original illustration. purpose.co.uk
Redrawn illustration by Jamie Portsch Page 73: courtesy of Mark Hurrell
(YCN Talent Agency) Pages 135–136: © Whitespace Ltd,
Page 75: © Dave Wood whitespacers.com
Page 21: Baldur’s Gate: Enhanced
Edition (BeamDog) courtesy of Page 77: redrawn by Jamie Portsch Page 141: courtesy of Mike Kus,
gamespress.com (YCN Talent Agency) mikekus.com

Pages 22–23: Users are king, original Page 79: top image courtesy of The JOY; Page 145: top image, GEL guidelines
illustration © Dave Wood. Redrawn by bottom images GEL guidelines © BBC © BBC 2013, bbc.co.uk/gel
Jamie Portsch (YCN Talent Agency) 2013, bbc.co.uk/gel
Page 145: bottom image, courtesy
Page 24: Courtesy of GDS International, Page 81: © Vector Department, courtesy of Creative Griffin, creativegriffin.co.uk
gdsinternational.com of shutterstock.com
Pages 146–155: courtesy of Creative
Page 25: Let’s Fish! Hooked On Pages 82–83: Copyright of Whitespace Griffin, creativegriffin.co.uk
(Wired Productions) courtesy of Ltd, whitespacers.com
Page 160: courtesy of Jim Divine,
gamespress.com
Page 85: courtesy of Mudcube jimdivine.com
Page 27: Persona © Dave Wood. Portrait http://mudcu.be
Page 161: top image courtesy of
photograph Denis Vrublevski – courtesy
Page 87: courtesy of elloDave. Chris Speed
of shutterstock.com
ellodave.co.uk
Page 163: courtesy of Oli Mival,
Pages 29–30: redrawn by Jamie Portsch
Page 89: courtesy of Sensi Soft Ltd, futureinteractions.net
(YCN Talent Agency)
sensisoft.com
Page 165: courtesy of Matthew Buckland
Pages 33-35: We Print Paper website
Page 91: © fonikum, courtesy and Philip Langley, memeburn.com
images courtesy of elloDave.
of istockphoto.com
ellodave.co.uk
Page 166: top image: Photo by Bryan
Pages 92–93: © Max Griboedov courtesy Bedder/Invision for Green Giant/AP
Page 39: courtesy of Dave Wood
of shutterstock.com Images; bottom image courtesy of
Page 40: © 1996–2011, Amazon.com, Acrossair Ltd, acrossair.com
Page 95: © Creative Freedom Ltd,
Inc. or its affiliates
creativefreedom.co.uk Pages 168–169: VoteBandApp
Page 41: Kinect Googly Eyes © 2013 Jacques Peacock
Page 97: Kinect Sports Season 2 jacquespeacock.com
© Microsoft 2013
© 2013 Microsoft
Page 43: courtesy of Enroll UX 2014, Pages 170–171: courtesy of Sascha
Pages 98-99: bottom image courtesy Affolter, botweb.de
California HealthCare Foundation
of Martin Gauer attackemart.in
Page 45: DwaFotografy, courtesy of Pages 175–177: © Whitespace Ltd,
Page 99: top image sickcityclub.net whitespacers.com
shutterstock.com
images courtesy of Brown & White,
Pages 46–47: information architecture richbrown.info Pages 180–181: Photo © Captain Yeo,
diagram © Dave Wood courtesy of shutterstock.com
Page 101: courtesy of Mike Kus,
Page 49: SimCity (EA) courtesy mikekus.com
of gamespress.com

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018

 Acknowledgements 191

I’d like to dedicate this book to the

late James Russell – friend, mentor
and uncle.
Without the help and support of the
following people I wouldn’t have been
able to write this book:

Paula O’Connell for the initial advice

and support that helped me write a
very strong proposal. Fellow lecturer
Alan MacFarlane and his 50gb online
storage for saving my three PowerPoint
lectures on the very subject of this
book that I foolishly deleted from
my own hard drive. My proofreading
friends: Tony Hardwick, Kristin Kramer
and Mel Owen.

I would also like to thank the staff

at Fairchild Books for giving me this
opportunity to write a book on the
very subject I have been researching
for a decade. Thanks to Georgia
Kennedy for sourcing me with the
commission, and my editor Jacqui
Sayers for her patience and extremely
helpful guidance through the
publishing process.

All reasonable attempts have been made to trace, clear and

credit the copyright holders of the images reproduced in this
book. However, if any credits have been inadvertently omitted,
the publisher will endeavour to incorporate amendments in
future editions.

This ebook belongs to Gene Liberman ([email protected]), purchased on 19/10/2018