User Interface that works | Sergiu Puscas | CodeWeek 2015

USER INTERFACE DESIGN
Design is a method of problem solving.
What is design?
The main goal of design is offering the product functional,
technical, aesthetic, ergonomic and economic qualities, in order to
make it accepted by the consumer for a certain period of time.
The essence of design is, in fact, creating efficient products.

What is good design?
DIETER RAMS
Dieter Rams is a German industrial designer closely associated with the consumer products
company Braun and functionalist industrial design.

Types of design
INTERACTION DESIGN
Interaction design is heavily focused on
satisfying the needs and desires of the
people who will use the product.
USER INTERFACE DESIGN (UI)
USER EXPERIENCE DESIGN (UX)
GRAPHIC DESIGN
Graphic designers work with
graphical images, whether they
be illustrations, typography, or
images, and on a variety of media
including print and web.
INDUSTRIAL DESIGN
Industrial designers create
physical products designated
for mass-consumption by
millions of people.

User Interface
User Interface (UI) design is the design of
software or websites with the focus on the user's
experience and interaction.
The goal of user interface design is to
make the user's interaction as simple and
efficient as possible.

Elements of Design
LINE / SHAPE / DIRECTION / SIZE / TEXTURE / COLOR

Elements of Design
LINE
The link between two points.
Linear marks made with a pen or brush or
the edge created when two shapes meet.

SHAPE
• Self contained defined area of geometric,
or organic form.
• Regular surfaces have geometric shapes
(circle, square, rectangle, triangle etc.)
Elements of Design

DIRECTION
Horizontal suggests calmness, stability and
tranquility.
Vertical gives a feeling of balance.
Oblique - growth, descendance etc.
Elements of Design

SIZE
Relationship of the area occupied by one
shape to that of another.
Elements of Design

TEXTURE
The surface quality of a shape - rought,
smooth, soft, hard, glossy.
Elements of Design

COLOR
The light reflected off objects.
• RGB
• HEX
• CMYK
• HSB
Elements of Design

Design Principles
BALANCE / PROXIMITY / ALIGNMENT /
REPETITION / CONTRAST / SPACE

Principles
BALANCE
Balance provides stability and structure to
a design.
• Symmetric balance (through reflection,
translation, rotation)
• Asymmetric balance
• Optic balance (formal, informal)

PROXIMITY
Relationship between elements.
It provides a focal point.
Principles

ALIGNMENT
Aligning elements allows them to create a
visual connection with each other.
Principles

REPETITION
Helps create association and consistency.
Principles

CONTRAST
Juxtaposition of opposing elements.
It allows us to emphasize or highlight key
elements in your design.
Principles

SPACE
The distance or area between, around,
above, below, or within elements.
Principles

Visual Weight and Depth
VISUAL WEIGHT
• Some things looks ”heavier” than
others in a layout. They draw your
attention more easily.
• Visual weight helps the user notice the
important things.
• Visual weight is relative.

CONTRAST
• The difference between light things
and dark things is called contrast.
• Assign a bigger contrast to the
essential elements.

DEPTH
• We notice things that are close to use
more than things that are far away.
• Bigger elements are perceived to be
closer.
• Blur effects or shadows it just matkes
the perception of depth more
realistic.
• More important object have to be
bigger, in order to create a visual
hierarchy the user will follow.

WHY IS IT IMPORTANT?
Typography

Typography represents the art and the process of arranging text for different media
environments.
Typography is made up of characters, which create the font.
Characters - letters, numbers, punctuation marks.
By learning the history of typography, the anatomy of characters, as well as the classification
of fonts - we become aware of even the slightest differences between fonts.
Typography

Typography
Anatomy
baseline - the line on which the letter is based, namely the corresponding horizontal serifs.
meanline - the imaginary line above the minuscules. This height is extended from the baseline until the meanline
and is marked with X.
ascender - the height of the superior extension of small letters, i.e. the part above the meanline of the upper and
lower case letters.
descender - the height of the inferior extension of small letters, i.e. the part below the baseline of the lower case
letters.
ligatures - 2 or more characters connected in a single one. A typographic subtlety compensating for the
unaesthetic arrangement of some letter combination, such as: fi ff,fi, fl, ffi, ffl.
stress - the axis of the rounded letters.

Typography
Hierarchy
Take a good look at the size of the font you’re using.
Have a break before deciding which one to use.
Plan, keep the consistency, make sure it blends well with the other sizes.

Typography
Emphasizing text
Sometimes we need to emphasize some words
or some paragraphs in a text.
How do we do that?

Typography
Combining fonts
http://fontpair.co/
https://www.google.com/fonts
http://100daysoffonts.com/
http://femmebot.github.io/google-type/
http://designmodo.com/great-font-combinations/
http://webtypography.net/toc
• Goal
• How many fonts should I use?
• What is my content like?
• How can I make a good
combination?
• Accordance
• Contrast
• Conflict

Colors
Working with colors
Colors can be “loud” or “quiet”.

Colors
Working with colors
Wireframes in black-and-white. Focus on the function.

Colors
Working with colors
Sometimes color is function.

Colors
Working with color
Use colors when and where they are relevant.

Colors
Color psychology
• Choose one color
• Use color to create
significance.
• Use the same shade
everywhere.

Repetition &
Patterns
Whenever something in
nature happens over and
over, we will quickly notice.

Repetition & Patterns
We don’t see 6 individual
cats, we see a group of
cats. Typically, we analyse
them from right to left.
Repetition &
Patterns
If one of them stands out, it
immediately draws attention.

We see a lot of
relationships, because of
the way they are aligned.
The closeness or distance
between two objects
creates a feeling of those
objects being related or
unrelated.
The cats from each group
seem “together” like a
team or a family.
Proximity
Repetition & Patterns

Layout
Composition basics
There has been noticed a close
relationship between art and
mathematics. But what would be the
formulas for beauty?
Philosophers, mathematicians,
architects and artists have tried to
answer this question for a long time.

Layout
Golden ratio
The Golden Section (sectio aurea in
latin), notată cu litera greacă Φ
(uppercase phi) sau și cu φ
(lowercase phi), is the first irrational
number discovered and defined in
history. It’s approximately 1,618033
and can be found in the most
surprising situations.

Layout
Golden Ratio
The Golden Section can be found
everywhere: in nature, mathematics,
architecture, body proportions, arts,
design.

Layout
Rule of thirds
Used mostly in photography, has
been imported to web design.
It’s simpler and more widely used:
you just divide the work space in 9
equal parts (3x3). The eye will be
drawn to the intersection of the lines.

Layout
Balance
Good websites arrange graphical elements
in such a way that the page is balanced.
This doesn’t mean that the sides mirror
each other - but that they have the same
visual weight.
A page looks symmetrical when graphical
elements look similar.
A page is asymmetrical when the elements
are of different sizes, but they have the
same visual weight.

Layout
White space
White space is the area not covered
by text or images, even if it’s not
white. Covering every inch of the page
is a mistake. White space calms and
directs the eye towards the content,
increasing its value.

Layout
Hierarchy
Some links, text or images on the web
page will be more important than
others, and a good design highlights
them.
The elements that require more
attention should be noticed first and
guide the eye on the page. A bigger
text can draw attention in the first
place to a particular image or text.

Layout
Color
• You don’t need more than 2 or 3
core colors for a good design.
• Choose colors that work well
together in creating the required
atmosphere for the website.
• Some colors are more flashy than
others.

Layout
Depth
The typical web page looks like a
single, bi-dimensional surface, but it
doesn’t always have to be like that.
Adding a 3rd dimension grants a
bigger importance to the graphical
units, depending on the proximity to
the user or the overlapping over other
elements.

Layout
Simplicity
• If you continue adding elements just
because they look good, you will
overload the design.
• A complex design, or too many
animations distract and bother the
user if there is not enough white
space to offset them.
• Use flashy elements only if they
have a specific goal, not just
because you can.

Layout
The fold
Some of the most popular (but wrong) old
school concepts is “the fold”, which
represents the top part of the website,
seen when opening the web page.
The idea of this theory is placing all the
important information in this area.
Still, recent studies show that if the user
will be interested by what he sees when
opening the website, he will scroll down in
order to find out more.

Layout
Images
Images can direct the gaze of the
viewer.
Especially images with people get a
lot of attention and create empathy, if
they’re well used.
The gaze of person in the picture will
direct the gaze of the user as well.
The more emotion will be in the
picture, the more interested will the
viewer be.

Layout
Images
According to a study, people have the
tendency to look where they’re guided
by the gaze of somebody else.

Layout
Title
Our eyes are attracted by text
contrasting with the rest of the
background. That’s why titles will
capture the attention of the viewers.
However, don’t overuse with the use
of large text. If the title has no
connection with the text that follows,
it’s better to use other attention-
drawing method.

Layout
Call-to-action
CTA is a short text, usually located on
a button - and requesting an action
from the user.

Layout
Call-to-action
The general formula for a good CTA:
Verb + Benefit + Urgency or Place

Layout
Instructions
• Instructions have to be short and direct
• Tell the user exactly what he has to do
• Express yourself clearly

Layout
Primary and
secondary buttons
In general, there are only two styles of buttons used - because
the majority of them are from this two basic categories:
• Primary actions accomplishing the primary goal of the website
or application.
• Secondary actions not performing on the primary goals.

Layout
Labels
Use the most common, easy
and simple versions for tags
and labels.

Tools & Workflow
What is your primary tool
for interface design?

Graphic Design Software
Workflow

Presentation Software
Workflow

Fidelity Levels
Workflow
Block Diagrams
Grey Boxes
HF Text
HF Color
HF Media
HF Interactions

Mockups
Workflow
Mockups are the models of
web design and one of the
most effective mediums for
communicating visual design.
“Wireframes are skeleton.
Mockups are skin.”

Prototypes
Workflow
In addition to the information structure and
visualizations of the previous two phases,
the prototype introduces more depth to the
UI, allowing users to:
• experience the actual content
• interact with the UI in a way similar to the
final product
• predict and solve usability problems
before further development
PROTOTYPES HELPS YOU
• work through a design
• communicate concepts
• sell an idea
• gauge technical feasibility
• test usability

Prototype Tools
Workflow
Presentation Software
Coded (HTML)
UXPin
Invision
MockFlow
JustInMind
Axure
Omnigraffle
JustProto Flinto
Marvel
Pixate

Layout
Summary
SKETCHING – Quick brainstorming on paper.
WIREFRAMING – Establishing the skeleton with rectangles and rough shapes.
MOCKUPS – Injecting details in wireframes, such as colors, typography, photos and visual design
elements.
PROTOTYPING – Adding interaction to mockups, by linking pages and page elements, adding
animation or interaction for advanced prototyping.
DEVELOPMENT – Converting the prototype into the final product via programming.

http://ui-patterns.
com/patterns

UXPin Mobile UI Design Patterns

https://www.google.
com/design/spec/patterns/
Android Patterns

https://developer.apple.
com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
iOS Patterns

It’s Not UX vs. UI
In the web context, let’s say that the designer decided to use the
drag-and-drop option for organising songs in a list. This is UI.
Now, let’s say that the users are choosing this website over the
competitor ones, because they like how easy and fast is to
organize their favourite music. This is UX.
It’s UX & UI

Tips & Techniques
1. Keep the interface as simple as possible.
2. Create coherence and use well-established patterns and elements.
3. Follow a goal when creating a page interface.
4. Use color and texture strategically.
5. Use the rules of typography for creating hierarchy and readability.
6. Make sure that the system notifies the user about what happens.
7. Think about implicit values.

Sources
1. http://www.telegraph.co.uk/technology/apple/8555503/Dieter-Rams-Apple-has-achieved-something-I-never-did.html
2. https://www.vitsoe.com/gb/about/good-design
3. http://gizmodo.com/343641/1960s-braun-products-hold-the-secrets-to-apples-future
4. https://en.wikipedia.org/wiki/Interaction_design
5. https://en.wikipedia.org/wiki/User_interface_design
6. https://en.wikipedia.org/wiki/User_experience_design
7. http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/
USER INTERFACE BASICS

1. http://designmodo.com/web-typography/
2. http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706
3. http://freelancefolder.com/typography-essentials-a-getting-started-guide/
4. http://www.creativebloq.com/typography/better-web-typography-few-simple-steps-5132803
5. https://ia.net/know-how/the-web-is-all-about-typography-period
6. http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web--webdesign-15
7. http://www.merttol.com/articles/web/checklist-for-better-web-typography.html
8. http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-preface
Typography
1. http://studio.uxpin.com/ebooks/guide-to-mockups/?_ga=1.244361089.58065319.1445246311
2. http://studio.uxpin.com/ebooks/guide-to-prototyping/?_ga=1.46579747.58065319.1445246311
3. http://studio.uxpin.com/ebooks/web-ui-design-best-practices/?_ga=1.46579747.58065319.1445246311
4. http://studio.uxpin.com/ebooks/mobile-design-patterns/?_ga=1.46579747.58065319.1445246311
5. http://studio.uxpin.com/ebooks/guide-to-wireframing/?_ga=1.46579747.58065319.1445246311
6. http://tools.subtraction.com/interface-design.html
Tools and
Workflow

1. http://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/
2. http://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
3. http://thenextweb.com/dd/2011/12/30/9-places-to-get-inspiration-for-your-websites-color/
4. “Five Simple Steps - A Practical Guide to Designing For the Web” Book
Colors
1. http://ui-patterns.com/patterns
2. http://smallbusiness.chron.com/rules-composition-design-art-graphics-30554.html
3. https://mockupstogo.mybalsamiq.com/projects/web/grid
4. https://docs.google.com/file/d/0Bx1232tOvCsfUGdXYmZiTGxHT0U/edit
5. https://en.wikipedia.org/wiki/Golden_ratio
6. https://en.wikipedia.org/wiki/Rule_of_thirds
7. https://boagworld.com/design/why-whitespace-matters/
8. http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it
9. http://uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space
10. http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84
11. http://www.awwwards.com/understanding-web-ui-visual-hierarchy.html
12. http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/
Layout

User Interface that works | Sergiu Puscas | CodeWeek 2015

More Related Content

What's hot

Viewers also liked

Similar to User Interface that works | Sergiu Puscas | CodeWeek 2015

Recently uploaded

User Interface that works | Sergiu Puscas | CodeWeek 2015