Outline

I. UI Design in Modern Application

II. The Art & Science of Layouts
III. UI Typography: Guidelines & Common Mistakes
IV. Guide to Fantastic Color Usage
V. Usability Principles for Modern UI Design
VI. Common UI Design Patterns
Section 1

UI DESIGN IN MODERN
APPLICATION
 What Is A User Interface?

“The way that you

accomplish tasks with a
product –
what you do and how it
responds –
that’s the interface”
— Jef Raskin
 What Is A User Interface?

Good Interaction Design

is Learnable.
 What Is A User Interface?

88%
79% of users will search for
of site users are less likely to
return to a website after a
negative experience
Source: econsultancy.com

another website to complete

their task
IF content is not optimized

Source: Experience Dynamics

 UI Design in Modern Application
• User Interface (UI) is not about how it
looks, but rather about how it works.

• Interface is your product.

• Primary aim: communication.

• The main goal in UI design:

Simple & elegant, clear & consistent.
 8 Characteristics in
Good UI Design
1. Clarity 5. Consistency
2. Concision 6. Aesthetics
3. Familiarity 7. Efficiency
4. Responsiveness 8. Forgiveness
 Main Building Blocks of
Visual Interface Design
• Layout & Positioning
• Shape & Size
• Color
• Contrast
• Texture
Practical Techniques for
Crafting Effective UI
Practical Techniques for
Crafting Effective UI
 Use White Space To
Build Relationships

• Definition of white space

– empty spaces between various content elements

• Great tool to tell relationships between content

elements.
 Rounded Corners
Define Boundaries

• Aside from polishing your interface, rounded

corners actually defines borders
Convey meaning with colors
 Direct Attention

• Use animation to direct attention.

• Color and contrast are not enough.
Shadows And Darkened
Background For Focus

Source: vhc.apptivity.com
 Emphasize Core Actions

• Shift focus to primary actions for your user

 Use Hover Controls To
Simplify & De-clutter

Hover controls: De-clutter:

 Labels Inside Input Fields

• Save space & emits clear messages

 Context-sensitive
Interface Element
• Additional functionality for experienced users
without complicating the interface
 Icons
• Good practices of modern icon design are as listed in
Android Launcher icon design guidelines:

Source: developer.android.com
 Make It Responsive:
Loading Indicators & Pressed State

Do not make
your user wait
without any
indicators
 Undo & Restore
• Be forgivable
• Provide extra protective measures for your
users
 Confirmation Dialogs
• To ensure that the user really wants to go
ahead
• Always provide other options close by
• Do not overuse: will introduce interface friction
 (kaizen)
“UI design, especially in modern web application,
doesn’t have to be in a finished state because you
can always keep evolving it and improving it.”

Dmitry Fadeyev
Designer/Developer
Founder of usabilitypost.com, themesboutique.com,
logospire.com
Section 2

THE ART & SCIENCE OF

LAYOUTS
Four Major Layout Types

Fixed-
Width

Layout
Hybrid Fluid
Types

Elastic
 Fixed-Width Layout

• Static grid layout with its width with fixed

value, in pixel unit.
• Good for precise interface design.
• Not recommended for Web application.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width= "200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
</Grid>
 Fluid Layout
• Adjust its width in proportion to the size of the
user’s view port.
• Provides user the freedom to resize the
application.
• Designer must design carefully: resize impact
on text display and overall interface.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width= "200*" />
<ColumnDefinition Width= "Auto" />
</Grid.ColumnDefinitions>
</Grid>
 Elastic (Zoomable) Layout
• Scale the content instead of overall size of the
layout.

• Advantage: design proportion is well kept, ensuring

proper readability & positioning.
• Disadvantage: design proportion are not easy to keep
when manipulating with text size.

• Silverlight tool for image manipulation:

– Silverlight Deep Zoom
 Mathematics in Design
Golden Ratio Design

• The Golden Ratio

layout (1:1.618033987)
• Good practice in
layout designs
• Best for photo
galleries, portfolios
and product-oriented
websites.
 Calculation with Golden Ratio

62% 38%

To calculate the width of Golden

Ratio, get total width of a
rectangle and divided by 1.616
(top). Apply the Golden Ratio to
get the height for a specific
rectangle based on the total
width of the rectangle (right).
Golden Ratio Sample Layout (1)

Source: net.tutsplus.com
 Golden Ratio Sample Layout (2)

• 6 Golden Rectangles,
3 rectangles per line,
each 299 x 185 pixels.
• 299/185 = 1.616

Source: spacegeek.com
 Mathematics in Design
Fibonacci Design

• Based on
Fibonacci sequence
– 0, 1, 1, 2, 3, 5,
8, 13, 21, 34,
55, 89, 144...

• The Golden Spiral

• Applicable to layout
and font size
• Best for blogs and magazine layouts
Fibonacci Design Sample Layout

Fibonacci
sequence
on columns
and font size
 Gutenberg Rules
• Defines Reading gravity.
Applying Gutenberg Rules

Source: goodbarry.com
Section 3

UI TYPOGRAPHY: GUIDELINES
& COMMON MISTAKES
 Introduction

• Typography is a powerful medium that

allows for precise, effective
communication.
• Typography exists to bring orders to
information by dividing and organizing

– i.e.: make textual stuff looks pretty!

 Designer’s Main Concern
• Readability
• Measure (Line Length) - Width of the block
• Leading (Line Height) - Height of a line in the block
• Tracking (Letter Spacing)
– Tips: check if “VV” and “W” are distinguishable

• Word Spacing
• Color: Strive for consistency.
 Typography & Grid
Example of modern Typography UI with good use of grid & negative space:

Source: www.montylounge.com
 Choosing the “Right” Type

• Consider context & narrative

– “The quick brown fox jumps over the lazy dog”

• Choose by the typeface’s specific functions

– Brush Script is common, with its bad readability,
it is not built for serious text blocks.

– Microsoft Expression Blend choose Segoe UI as

default font for good readability.
 Choosing the “Right” Type

A beautiful face is
the one that serves
its purpose.

Both typefaces are from

the serif family,
however, Haptic (left) is
attention-seeking header,
Mrs. Eaves XL (right) is for
good readability
 Good Font Size
• Define a set of font size and do not change
• Classic scale:

8 9 10 11 12 13 14 18 21 24 36 48 60 72

• Fibonacci Sequence:

8 16 24 40 64 104
 Good Practice
• Pay attention to Widows and Orphans
– Creates awkward rags, impairing readability.

“An orphan is left behind where as a widow must go on alone”

This is bad for UI design.
 Good Practice (cont)
• Clean rags and hyphenation
5 hyphenations A poor rag (top)
in a row is creates distracting
unforgivable (top), shapes in the white
this can easily space of the margin.
avoided by Correct this by
changing the line making manual line
breaks (bottom) breaks (bottom).

Source: fonts.com
 Good Practice (cont)

• Hanging punctuation
– Place bullets points, punctuation marks before a
justified paragraph.
– Avoiding reader’s flow to be disrupted
 Good Practice (cont)
• Treat text as a user interface

Source: cameronmoll.com
 Common Mistakes in Typography

• Using double hyphens instead of resized dash

• Using periods instead of ellipses

• Using dumb quotes "" instead of “”

• Double-spacing between sentences

 Common Mistakes in Typography
(cont)

• Improvising a copyright symbol.

• Using too much emphasis.

• Underlining your hypertext links with border-

bottom
 Common Mistakes in Typography
(cont)

• Faking families in Photoshop

• Not using accent characters

• R4nDomz cAp!taLizAti0n & uNNec3s2ary

sYmBÖlz! \(Öᴥ<)/
• Comic Sans is a sin! Do not use!
Section 4

GUIDE TO FANTASTIC COLOR

USAGE
 Simple Must-Do List
When Designing with Color

1. Choose the right color palette

2. Pump your color schemes to your
prototype
3. Get feedbacks
 1. Choose the Right Color Palettes
• Understand the meaning of colors
 Warm Colors
• Red (Primary), Orange (Secondary),
Yellow(Primary)

• Reflects passion, happiness,

enthusiasm, and energy.
 Warm Colors
• Red – hot & emotional color.
Keywords: fire, violence warfare, love, passion, anger, importance

• Bright Red = energetic; Dark red = Powerful & elegance

Source: darkcrimson.com
 Warm Colors

Orange
– vibrant and
energetic color.

Keywords: Friendly,
Inviting, Change
and Movement

Source: neighborino.com
Warm Colors
Yellow –
brightest/energizing
color. Keywords:
happiness, sunshine,
deceit, cowardice,
danger

Source: foodtease.com
 Cool Colors
• Green(Secondary), Blue(Primary), Purple
(Secondary)

• They are the colors of night, of water,

of nature, and are usually calming,
relaxing, and somewhat reserved.
 Cool Colors
• Green – down-to-earth color.
Keywords: new beginnings, growth, renewal, abundance,
jealousy, inexperience
• Bright green = energetic; dark green = stability

Source: i-avion.com
 Cool Colors
• Blue – emotional-impact color.
Keywords: sadness, calmness, responsibility, peace, spiritual
• Light Blue = Calm; Bright Blue = Energetic; Dark Blue = Reliable

Source: sman96.com
 Cool Colors

• Purple –royalty color.

Keywords: creativity, imagination, romance
• Light Purple = Romantic; Dark Purple = Wealth & Royalty

Source: avantgrape.com
 Neutral Colors

• Neutral colors often works as backdrop colors.

– Associates with Warm and Cool colors
 Neutral Colors

• Black : Mystery, Elegance, Evil

• Gray : Moody, Conservative, Formality
• White : Purity, Cleanliness, Virtue
• Brown : Nature, Wholesomeness, Dependability
• Tan or Beige : Conservative, Piety, Dull
• Cream or Ivory : Calm, Elegant, Purity
 Neutral Color

• But they can also be used on their own in designs, and

can create very sophisticated layouts.

Source: timeger.com
 Pick Your Palettes
• Color Palette is your color scheme

Example of Monochromatic Color Palette

• Pick your favorite tone that matches the

mood of your application and generates
a color scheme that goes well with it.

• Tips & tricks:

– Use a good photograph to create a color scheme.
– Get sample color palettes from 3rd parties
 Pick Your Palettes

• Get colors from your environment

 Pick Your Palettes

• With Photoshop

• With Kuler
 Pick Your Palettes

• With Photoshop

• With Kuler
 Color Schemes Samples

Scheme
Color Schemes Samples
 Awesome Tools
for Color Picking

• Adobe’s Kuler
– https://color.adobe.com
Community based

• ColoRotate
– http://www.colorotate.org/
– Color Generator for the
Colorblinds
 Awesome Tools
for Color Picking

• Color Blender
– http://www.colorblender.com
– Auto generates palettes

• COLOURlovers
• http://www.colourlovers.com/
– A network of colour lovers!
 2. Pump Your Color Schemes
To Your Prototype
• Draft out your prototype on a piece of paper or
on Expression Blend, preferably in
monochromatic outlines only.

• Reconsider of your color palettes:

– Which color represents your application the most?

• Fill the colors and experiments with different

combinations
– Which color is the most suitable for a
particular part of the application?
 3. Get Feedbacks

After reviewing your UI design, get feedbacks

from:
• Your team members & mentor
• Your users or clients
• The professionals
• Your family members & best friends
• And any public citizen who is not afraid to mock
your design…
Section 5

USABILITY PRINCIPLES FOR

MODERN UI DESIGN
 Usability?
• The ability to use something and how easy that
something can be used.

• How we measure usability of a product?

– Requires less mental effort to use.
– Less mistakes when using it.
– Do more, with less (steps, clicks, etc).
– Intuitive: Easy to learn/use & familiar to user.
 Usability: Rules & Principles

• 7 2 Principle (Web app)

– Humans’ short term memory can retain only about 5-9
things at one time (George A. Miller)
– Limit no. of options in any navigation menu to 7 2.
 Usability: Rules & Principles

• 2-Second-Rule (All)
– User should not wait more than 2 seconds for any
response.
– ‘Tell’ the user if they really need to wait > 2 secs.
– Example: Progress bar, Facebook ‘loading’
animation.
 Usability: Rules & Principles

• 3-Click-Rule (All)
– Access information/feature within 3 clicks.
– Emphasizes the importance of clear navigation,
logical structure and easy-to-follow hierarchy.
 Usability: Rules & Principles

• Eight Golden Rules of Interface Design (All)

– Strive for consistency.
• Button’s name.
– Enable frequent users to use shortcuts.
• Keyboard shortcuts in Firefox, Gmail.
– Offer informative feedback.
• Saving a file.
– Design dialog to yield closure.
• Account creation.
 Usability: Rules & Principles

• Eight Golden Rules of Interface Design (All)

– Offer simple error handling.
• Minimize error, graciously handles errors. Ex: date input.
– Permit easy reversal of actions.
• Undo/back option.
– Provide the sense of control.
• User control app, don’t force/control user.
– Reduce short-term memory load.
• No information overload, offer hints/getting started guide.
Section 6

COMMON UI DESIGN
PATTERNS
 Pattern?
• A pattern describes an optimal solution to a
common problem within a specific context.
Design pattern?
 Selected Design Patterns

• Auto Complete
– Allows faster user
input by removing
ambiguity about
expected input
data, avoiding
potential mis-typed
information as well
as narrowing down
the correct choices.
 Selected Design Patterns

• Movable Panels
– Allows users to organize information that make
sense to them.
 Selected Design Patterns

• Calendar/Date Picker
– Enables users to easily apply or submit a date or
date range with some default values.
 Selected Design Patterns

• Progress/Busy Indicator
– Allows the user to know the status of their operation
if the operation takes more than 2 secs or so.
 Selected Design Patterns

• Input Hints
– Some explanation and/or examples of valid values
near fields to give users hints at the kind of input
they need to provide.
 Selected Design Patterns
• Sortable Table
– Allow users to change the sorting order of the table
items by clicking on a column header.
 Resources

• “The Smashing Book” by Smashing Networks

• Smashing Networks
– http://www.smashingmagazine.com/
• Yahoo Design Pattern Library
– http://developer.yahoo.com/ypatterns/
• Designing Interfaces
– http://designinginterfaces.com/