Topic 3: UI Design
Principles
Objectives
In this topic we will cover:
Six essential principles of UI design
Layout principles
Colour theory and colour palettes
Typography and font choices
Iconography and imagery
Principles of UI design
UI design is the process of
creating the visual layout and
appearance of the software,
apps, websites, or any digital
interface with which the user
interacts.
Principles of UI design, continued
The overarching goal of
every UI design project is to
create a product that
is both aesthetically
appealing and easy
to interact with.
Principles of UI design, continued
There are three main types of UI
design:
Graphical user interfaces (GUI),
Voice-controlled interfaces, and
Gesture-based interfaces.
Principles of UI design, continued
There are six essential principles
of UI design:
Clarity Consistenc User Comfort
y control
Ease of use Accessibilit
y
Clarity
Definition:
The use of recognisable and intuitive elements that
facilitate interaction.
It involves placing essential elements like navigation menus
in predictable locations to guide users effectively.
Importance:
Clear design enhances user experience by minimising
confusion and making navigation effortless.
Examples:
Main navigation at the top, logo in the top left; distinctive
buttons and underlined text for clickable links.
Clarity, continued
Consistency
Definition:
Using uniform visual elements across a user
interface, including colours, typography, and layout.
It builds user trust and coherence in design.
Importance:
Consistent design fosters a professional and
harmonious user experience, unlike mismatched
elements that can be jarring.
Examples:
Maintaining consistent fonts and colours throughout
the design.
Using grids to ensure layout consistency.
Consistency, continued
User Control
Definition:
Focuses on creating interfaces that are intuitive and
require no special training to use.
It empowers users to take actions confidently and
minimises confusion.
Importance:
Intuitive interfaces improve user satisfaction and
engagement by allowing users to navigate and interact
without difficulty.
Examples:
Simple navigation bars
Feedback for completed actions
Clear labelling for interactive elements
User control, continued
Comfort
Definition:
Encompasses design, messaging, accessibility, and
consistency to create a comfortable and inclusive
user experience.
Importance:
Comfortable design fosters a sense of belonging and
inclusivity, enhancing user engagement and overall
satisfaction.
Examples:
Using simple language
Designing inclusively
Ensuring responsiveness across devices
Comfort, continued
Ease of use
Definition:
Is a fundamental goal of UI design, aiming to make
products or websites user-friendly and straightforward to
navigate.
Importance:
A design that is easy to use reduces frustration, enhances
usability, and allows users to access information efficiently.
Examples:
Recognisable elements, clear navigation, intuitive
hierarchy.
Accessibility
Definition:
Ensures that interfaces are usable by all individuals,
including those with disabilities.
It involves making design elements perceivable, operable,
and understandable.
Importance:
Designing with accessibility in mind promotes inclusivity
and avoids legal issues, ensuring everyone can engage with
your product.
Examples:
Keyboard-friendly design
Descriptive alt text for images
Appropriate colour contrast
Non-colour cues for interactivity
Accessibility, continued
Layout
Given a blank screen, how do I optimally
visualise all the pictures, information, buttons
and other UI elements on the screen?
Layout, continued
Layout principle 1: Logical flow
Organise user interface elements from top to
bottom and from left to right according to task
flow.
Layout, continued
Layout principle 2: Position
UI element placement is very important.
Example: Buttons that are close together have
actions that are more related than buttons that
are further apart
Colour and consistency
Colours should, in general, be used to indicate
similar items or functions.
Meaning of colours should be consistent
When possible, colour choices should
conform to standards.
Colour and consistency, continued
Use 5-7 different thematic colours
maximum, and far fewer if possible
(excluding icons, photos).
Reasons for this relate to short-term
memory limitations
Colour and consistency, continued
So many colours! Which ones should I
choose?
Select colours that are colourblind-safe
(there are tools available to help).
Typography and font choices
Typography and font choices ,
continued
Typography is the layout and arrangement of
content using pre-made letter systems such
as typefaces and fonts.
Typography contains so many elements, many
designers overlook this discipline because
mastering it takes time and practice.
Typography and font choices,
continued
Typeface:
The term “typeface,” also known as a font
family, derives from physical print and
refers to the faces of physical letter blocks.
A typeface has multiple font weights and a
consistent style across all characters,
numbers, and symbols.
Typefaces include Arial, Times New
Roman and Comic Sans.
Typography and font choices,
continued
Iconography
Iconography is a form of visual language
that adds up to product identity.
Icons communicate complex information in
a simple and concise manner.
Example: Use of toggle switches to simplify a
yes/no option to choose from (and very easy to
understand)
Imagery
An image speaks a thousand words, use
them wisely.
Imagery is used in UI design to create a
mood, as content and as part of navigation.
Content Navigatio
n
Summary and next steps
Key takeaways:
There are six essential principles of UI design:
Clarity, Consistency, User Control, Comfort,
Ease of Use and Accessibility
Layout principles - logical flow and positioning
Choose colours that are colour-blind safe
Next week:
Interaction and Responsive Design
