Polish your UI knowledge regarding:
- Elements and Principles of UI
- Functional Layout Design
- Web UI Patterns
- Mobile UI Patterns
- Real World Examples
- Q&A
Check the video here:
https://www.youtube.com/watch?v=eNvp8Vv9t5k
4. 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.
5. USER INTERFACE DESIGN
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.
6. Types of design
USER INTERFACE 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.
7. USER INTERFACE DESIGN
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.
9. 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.
10. SHAPE
• Self contained defined area of geometric,
or organic form.
• Regular surfaces have geometric shapes
(circle, square, rectangle, triangle etc.)
Elements of Design
11. DIRECTION
Horizontal suggests calmness, stability and
tranquility.
Vertical gives a feeling of balance.
Oblique - growth, descendance etc.
Elements of Design
23. 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.
24. CONTRAST
• The difference between light things
and dark things is called contrast.
• Assign a bigger contrast to the
essential elements.
Visual Weight and Depth
25. 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.
Visual Weight and Depth
28. 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
30. 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.
31. 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.
42. 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.
43. 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
46. 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.
47. 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.
48. Layout
Golden Ratio
The Golden Section can be found
everywhere: in nature, mathematics,
architecture, body proportions, arts,
design.
49. 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.
50. 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.
51. 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.
52. 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.
53. 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.
54. 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.
55. 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.
56. 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.
57. 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.
58. Layout
Images
According to a study, people have the
tendency to look where they’re guided
by the gaze of somebody else.
59. 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.
64. 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.
80. 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.”
81. 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
84. 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.
113. 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
114. 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.