UI Design

User Interface Design

After understanding the fundamentals of design, let’s go a step
further and understand these topics.

 What is User Interface Design?

 Components of User Interface Design

Defining User Interface Design

User Interface Design is known as a process of visually guiding a
user through a product's interface through interactive elements and
across all platforms.
It is responsible for the transfer of a brand's strength and visual
assets to a product's interface to enhance the user's experience.

Elements of User Interface Design

In the upcoming cards, you will learn the following elements of User
Interface Design.

 Layout Grids
 Iconography
 Color Theory
 Typography

Layout Grids
In the designers’ toolbox, grids are considered to be one of the
fundamental staples.
Why are a few grid lines thrown over your canvas? Why are they
important to the design project?
In short, they help you to structure your design in a way that would
otherwise be difficult, time-consuming and troublesome.

If you don’t use layout grids,

 Your projects will never have visual harmony.

 Like anything that lacks structure or a strong foundation, your
concepts will be visually inconsistent.
  Graphic elements will not properly work together.

Layout Grid Benefits

 Keeps your content organized.
 Makes it easier to balance your design.
 Enhances your visual hierarchy.
 Makes it easier to work on multi-page interfaces.
 Renders the content far more digestible and readable.

Iconography

Iconography is an effective way to convey an idea in a small form

factor. This approach is becoming more critical in the days of the
shrinking screen. With the increase in mobile devices, icons play a
major role in interface design.
Iconography

Icons assist in scannability, support tappable, clear targets, and

conserve space at small screen sizes.

Iconography
There are six guidelines, which you will see in the next card, to
keep in mind while designing icons. By following these guidelines,
you ensure that users don't get confused with icons.

Using Icons
 Label your icons unless there is a space restriction.
 Represent both the icon action and object.
 Group similar icons together.
 Ensure the icon order and placement are consistent.
 Give your icons a common visual motif.
 Avoid providing icons with too much detail.

Using Font Icons

The core idea of a font icon (icon font) is to take a set of icons or
pictograms that would usually be implemented as an image or
vector file and then convert it into a font.
Icon font usage in a web app loads a page 14% faster than images
and can be as much as 90% smaller than SVG files.
Color Theory
Color, one of the seven elements of Design, is an essential aspect of
UI. Since color has a massive impact on your users, it is important
that you know color theory and even a little psychology.

 Warm colors give off a fiery message, while cool colors have a
calming effect.
 Analogous color schemes, often found in nature, are pleasing to the
eye, while complementary color schemes have a more energetic
feel.

Concepts and Terms

 If you are going to use color effectively in your designs, you
will have to know some color concepts and color theory
terminology.
 Complete working knowledge of concepts like chroma, value,
and saturation is key to creating your amazing color schemes.

Hue

 Hue is the most basic of color terms and denotes an object’s color.
 When we say blue, green or red, we are talking about hue.

Chroma

 Chroma refers to the purity of a color.

 A hue with high chroma has no black, white or gray in it.
 Adding white, black or gray reduces the chroma.

Saturation
 Saturation points to how a hue arises under particular lighting
conditions.
 Consider saturation based on pale vs pure or weak vs strong
hues.

Value

 Value or lightness refers to how dark or light a color is.

 Lighter colors have higher values.
 For example, orange exhibits a higher value than dark
purple or navy blue. Black shows the least value of any hue,
and white the greatest.
Tones
 Tones are formed when gray is combined to a hue.
 Tones look softer or duller than pure hues.
 Occasionally, tones are easy to use in designs.
 Tones with more gray offer a particular vintage feel to
websites. They also provide an elegant or sophisticated look
based on the hues.

Shade
 A shade is formed when black is combined with a hue,
 A shade is created when black is added to a hue, making it
darker. Shade is usually wrongly used to represent tone or tint.
However, shade only pertains to hues that are made darker by
the inclusion of black.
 In design, sometimes dark shades are put to use instead of
black, and they can act as neutrals. It is better to avoid mixing
shades with tints for too dark and heavy look.

Tint
 A tint is created when white is included to a hue, lightening it.
 Sometimes, very light tints are known as pastels. However,
when any pure hue is mixed with white is a tint. For example,
Pink is a color as well as, a tint of red.

Typography Terms

Typography is the art of type. The major parts of typography

are fonts, readability, and sizes.

You will stumble upon some of the basic typographic terms in the
upcoming cards.
Typography Terms

Type Size

 Type Size is also known as the Cap Height.

 It is the overall height of capital letters in a word formation.

Typography Terms

Ascender

Ascender is known as the upward tail on letters such as b, d, h, k, l,

and t.
 Descender

 Descender is known as the downward tail for letters such as y,

q, and g.

 Counter

 Counter is the white space seen inside the letters such as p

and o.


 X-Height

 X-Height is the height of the letter and does not have

descenders or ascenders.

 Baseline

 Baseline is known as the boundary that the lowest portion of

the letter sits on.

 Let's consider the letter y in the illustration given above. The

solid line on which the letter y is resting on is the baseline.

 Kerning

 Kerning is the space between the characters.

Leading

Leading is known as the space between lines of text.

 It is a valuable tool for delivering readable text.

 Good leading can enhance the worst type look readable.
 Bad leading can depreciate a quality piece of work.

Design Language
Having understood the principles and elements of User Interface
Design, it is imperative that your products adhere to an established
design language for good user experience.
In the next card, you will learn about the need for a design language
and take a look at the existing design languages.

Design Language
As the platform ecosystem expands, the challenge of creating a
cohesive, unified family of products becomes more complicated. A
user should be able to recognize brands and have an intuitive
experience regardless of the device they use.

Let’s take a look at understanding brand identity guidelines, in the

upcoming cards.

Understanding Brand Identity

Brand identity guidelines describe the materials and assets that
make a company special.
 Messaging (like taglines and mission
statements), Typography, logos, color palettes, collateral,
and so on are aggregated and explained in brand identity
guidelines.
  Brand identity guidelines offer answers to these basic
questions in one centralized hub. However, how do you create
cohesive products?

Design Language
Brand identity guidelines are tangible, whereas, design language
guidelines are difficult to pin down.
 Design language style guides connect a standard design
direction, approach, and philosophy to particular products or
projects.
 A unified design language must not be just a collection of
individual atoms and static rules; it must be an evolving
ecosystem.
 To display itself cohesively across an increasing range of
media and products, Google created a design language known
as material design. It is utilized in all Google Products such as
Android OS, Google Search, and YouTube.


 Let’s take a look at the design languages available and

understand why the visual language has established itself.
 Skeuomorphism, flat design, and material design are a few
design languages that follow its own design trends.
 Let’s understand the concept behind them and why they are so
successful at their time, in the next card.

Skeuomorphism
Skeuomorphism refers to a design principle applied to user interfaces
in which design cues are taken from the physical world.

For example,

 Turning a digital page to resemble the experience of reading a

physical book.

 Apple used Skeuomorphism in its primary design principles

and Human Interface Guidelines.

The Rise of Flat Design

Flat design is known as a minimalist UI design language, or design genre,
currently deployed in numerous graphical user interfaces.

Material Design
Google created a design language known as Material design. As seen in
the card motifs, it is a design with more usage of padding, responsive
transitions and animations, and depth effects like shadows and lighting.
Card motis were first noticed in Google Now,

Style Guide
So what do robust design languages look like? What form do these
languages take? How will you develop, maintain, and support them?

 The foundations of great design systems are style guides.

 These style guides document and order the design materials while
offering guardrails, usage, and guidelines.

Style Guide
There are numerous types of style guides, namely documentation
for user interface patterns, design language, code, tone and voice,
writing, and brand identity.

Design Language Benefits

Design Languages are essential tools that help prevent chaos, both
from a design and development standpoint. Here’s why design
languages are now vital tools in modern web design and
development.
Consistency – Design languages encourage cohesion and
consistency throughout a user interface. This consistency helps
both the persons who develop these interfaces and their users.
Making design languages central to your process results in user
interfaces that appear genuine and unified. This aids users
complete their activities quickly and allow them to learn the
interface.
Shared Vocabulary – Design languages establish a consistent,
shared vocabulary among everyone concerned in a project,
promoting cooperation between disciplines and minimizing
communication breakdowns.

 Communication breakdowns are common when many people

collaborate on a project.
 It’s common for different disciplines to have different names
for the same module, and for individuals to invent their own
naming conventions.
 It is essential for teams to articulate a common language for
real collaboration to occur.
 Design languages aid in establishing that shared vocabulary.
 Education – A pattern library communicates the design
language in a very tangible way, which helps stakeholders
understand that an underlying system is determining the final
interface.
 By exposing the design system in the form of a design
language, teams can better comprehend consistency and
know why their requests for custom designs suffer pushback.
 Empathetic Workflow – By making a design language a
cornerstone of your workflow developers and designers are
made to think about how their choices influence the larger
design system.
  A good design language aids in notifying developers and
designers the tools they possess in their toolbox. It also offers
best practices and rules to use them correctly.
 Testing – A design language lets you to see interface patterns
in isolation, thereby enabling developers to finalize what is
causing performance issues, browser inconsistencies, or
errors.
 Speed – Once the pattern library is established, subsequent
design and development become much faster, using old
patterns instead of needing to create new patterns from
scratch all the time to increase the complete workflow.
 Longevity – The genuine thing about interface design systems
is that they can and must be changed, expanded, and
improved for ages to come. Even if you want the main
redesign, you will see that numerous structural interface
building blocks will be the same. You will still have headings,
buttons, forms, and other standard interface patterns. A
design language offers a good base for all future tasks.

Tools for UI Design and Interactive

Prototyping
Currently, numerous tools aid you to create digital products. These
tools range from web creation tools to developing tools to design
tools.
Prototyping tools aid you in creating products quickly and
effectively. Prototypes exhibit your ideas, and in performing so can
improve the way you design.
These days, clients are searching for interactive prototypes. The
prototypes offer you an overview of your interactions, design, and
ideas.
Sharing abilities and iterations are where prototypes show their
uniqueness. The capability to work quickly on various versions of
your ideas and distribute them with your team or client is a real
game changer.
Tools for UI Design and Interactive
Prototyping
To know more about the tools used in UI design and Interactive
Prototyping, visit the following articles.

 Best UI Design Tools

 Top Prototyping Tools For UI And UX Designers
 Best Prototyping Tools for UI/UX Designers
Name the design language system developed by Google.
material design.

What’s the space between characters called? Kerning

Name the design concept of making items represented to

resemble their real-world counterparts. Skeuomorphism

Select the color scheme you get by mixing different tones,

shades, and tints within a specific hue. Analogous

Name an efficient way to convey an idea in a small amount

of space.

Iconography

What happens when you include black to a hue (color)? Shade

_______ is the invisible line that marks the height of a font.

Ascender

Which one of these options denotes the color of an object?

Hue

What is the white space located inside letters like o and p

called? Counter

What is the height of a capital letter measured from the

baseline? Cap height