UI & UX DESIGN FOR MOBILE

UI & UX DESIGN
FOR MOBILE
Joe Ssekono
GANTRY MOTION STUDIO
GANTRY

WHAT IS THE
DIFFERENCE
BETWEEN UI AND
UX?
SECTION ONE
app.coGANTRY MOTION STUDIO

app.co
Process of enhancing customer satisfaction and
loyalty by improving the usability, ease of use, and
pleasure provided in the interaction between the
customer and the product
UI DESIGN

app.co
A compliment of User experience design, the look
and feel, the presentation and interactivity of a
product.
UX DESIGN

app.co
Something that looks great but is difficult to use is
exemplary of great UI and poor UX. While Something
very usable that looks terrible is exemplary of great UX
and poor UI.
Something that looks great but is difficult to use is
exemplary of great UI and poor UX. While Something
very usable that looks terrible is exemplary of great UX
and poor UI.

DESIGN PRINCIPLES
SECTION ONE

app.co
Loose guidelines that designers can stick to in
order to improve the quality of a user interface
design.
DESIGN PRINCIPLES

The Structure Principle
The Simplicity Principle
The Visibility Principle
The Feedback Principle
The Tolerance Principle
The Reuse Principle
DESIGN PRINCIPLES
SECTION ONE
caff.co
app.co

app.co
Design should organize the user interface
purposefully, in meaningful and useful ways based
on clear, consistent models that are recognizable to
users, putting related things together and separating
unrelated things, differentiating dissimilar things and
making similar things resemble one another.
STRUCTURE

app.co
The design should make simple, common tasks easy,
communicating clearly and simply in the user’s own
language, and providing good shortcuts that are
meaningfully related to longer procedures.
SIMPLICITY

app.co
The design should make all needed options and
materials for a given task visible without distracting
the user with extraneous or redundant information.
Good designs don’t overwhelm users with
alternatives or confuse them with unneeded
information.
VISIBILITY

app.co
The design should keep users informed of actions or
interpretations, changes of state or condition, and
errors or exceptions that are relevant and of interest
to the user through clear, concise, and unambiguous
language familiar to users.
FEEDBACK

app.co
The design should be flexible and tolerant, reducing
the cost of mistakes and misuse by allowing undoing
and redoing, while also preventing errors wherever
possible by tolerating varied inputs and sequences
and by interpreting all reasonable actions.
TOLERANCE

app.co
The design should reuse internal and external
components and behaviors, maintaining consistency
with purpose rather than merely arbitrary
consistency, thus reducing the need for users to
rethink and remember.
REUSE

TIPS ON HOW TO
DESIGN GREAT UI
FOR MOBILE APPS
SECTION ONE

For your app to look fantastic,
include graphics that are tailored to
the screens of the specific devices.
RIGHT SIZE
GRAPHICS

ALL ABOUT
USERS
SECTION ONE
caff.co
app.co
You must know the people who are
the users of your mobile app.

Note that user interface should be
designed in such a manner that the
app is fully usable on multiple devices
and mobile operating systems.
FULLY
RESPONSIVE

FIT THE
FORMAT
SECTION ONE
caff.co
app.co
We have all encountered apps that
hang while loading some large
graphic file. This is not because of
wrong size but due to inappropriate
format.

Remember, each iteration amounts to
valuable lessons that are great for
improving performance and can be
further re-applied for the future projects.
FULLY
RESPONSIVE

COLOURS TO
POINT
SECTION ONE
caff.co
app.co
Prefer to use subtle animations to
transit between screens and
implement UI control color
differentiation to inform the state
changes in application.

Keeping things simple means an
approach in which the first-time user
can immediately start using the app
without having a need to go to the
detailed set of instructions or tutorials.
KEEP IT
SIMPLE

CONTRAST
FOR VIEW
SECTION ONE
caff.co
app.co
Decide on high-contrasting color
schemes that makes design and
content stark clear.

Use fonts that are readable and
pleasing to the eyes. Use a font that is
big and balanced well with the other
elements of the screen. Fonts below
12pt are a big no-no.
LARGE CLEAR
FONTS

FOLLOW
PLATFORM
RULES
SECTION ONE
caff.co
app.co
Don’t try to reinvent the wheel and
incorporate interface controls and
screen design that has been
accepted by the users.

It is always good to have real users for
their ideas and opinions. This will help to
effectively evaluate as to what to
include and what to leave.
TEAM UP
REAL USERS

BACK BUTTON
ON GUARD
SECTION ONE
caff.co
app.co
Back button is an ultimate savior for
the users. Abiding by the OS stated
behavior and back button positioning;
you can ideally create an app that
rightfully meets users’ expectations.

Try placing these favorable icons in your
mobile app to add an intuitive factor to
it. If you are introducing new icons, then
make sure to mention its function along
with the icon to add clarity.
POPULAR
ICONS WORK

THE ATTRACTIVE
QUOTIENT OF AN
APP’S UI RELIES ON
THE TARGET
MARKET.
SECTION ONE

ANYTHING YOU
WOULD LIKE TO
ASK?
Joe Ssekono
UI/UX Designer
+256 782 120 367
+256 703 000 788
@ssekono
ssekono@gmail.com
Gantry

UI & UX DESIGN FOR MOBILE

More Related Content

What's hot (20)

Similar to UI & UX DESIGN FOR MOBILE (20)

Recently uploaded (20)

UI & UX DESIGN FOR MOBILE