Design Fundamentals

To get started, this topic explains the basics of Design.

It emphasizes the need to have a good understanding of the principles of design
for creating a good User Interface.

Design Fundamentals

Design is a method of problem solving. Design is so many things, executed in many

different ways,
but the function is always the same. Whether it�s blueprints, a clever UI, a
brochure, or a chair � design can help solve a visual or physical problem.

Design Fundamentals

Design is a work process which has a user perspective and drives development based
on your specific customers� needs.

It's ***not purely aesthetic, nor wholly analytical and functional.***When

considering the design of your projects, you must think about how everything
fits together in harmony - some would call this a holistic approach, but it's
really the only practical way to approach design problems.

Principles of Design

These principles are fundamental to the design and implementation of effective

interfaces,
whether for traditional GUI environments, the web, mobile devices, wearables, or
Internet connected smart devices.

Figure Ground
Law Proximity
Law of similarity
law of closure
common fate
continutity
Symmentry

Principles of Design

A basic understanding of the principles of good design is the foundation for

creating good User Interface.
The following chapters will explain how the principles and elements of design can
improve the interface.
Explore the components of User Interface Design and what comprises a truly unified
interface that can stand the test of time.

User Interface Design

Now that we understand the fundamentals of design, let�s go a step further and
understand what User Interface Design
is and explore the components of User Interface Design.

User Interface Design

User Interface Design is a process of visually guiding a user through a product's

interface through interactive elements and across all platforms.
User Interface design is responsible for the transference of a brand's strength and
visual assets to a product's interface to enhance the user's
experience.

Elements of User Interface Design

Elements of User Interface Design

You will learn about the following elements of User Interface Design:

Layout Grids
Iconography
Color Theory
Typography

Layout Grids
Layout Grids

In the designers� toolbox, grids are considered to be one of the fundamental

staples.

But why is this? Why are a few grid lines thrown over your canvas so 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 Grids, your projects will never have visual harmony, and like
anything which lacks structure or a strong foundation,
your concepts will be visually inconsistent.
Without a layout grid, graphic elements will not properly work together.

Layout Grid Benefits

1 Keeps your content organized

2 Makes it easier to balance your design
3 Enhances your visual hierarchy
4 Makes it easier to work on multi-page Interfaces
5 Makes the content far more digestible and readable

Iconography
Iconography is an efficient way to communicate a concept in a small amount of
space.
This is increasingly important in the era of the shrinking screen.
With the proliferation of mobile devices, icons play an increasingly important role
in interface design.

"Icons aid in scannability, save space at smaller screen sizes, and afford clear,
tappable targets."

Here are a six guidelines to keep in mind while designing icons so that you don�t
leave users scratching their heads.

1.Label your icons unless there is a space constraint

2.Represent both the icon action and object
3.Group similar icons together
4.Ensure icon order and placement are consistent
5.Give your icons a common visual motif
6.Avoid giving icons way too much specific detail
Using Font Icons

The core idea of a font icon (iconfont) is to take a set of icons or pictograms
that would normally 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 to be as
much as 90% smaller than SVG files.

Color Theory

Color, one of the seven elements of Design, is an important 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 affect. Analogous color schemes, often found in
nature, are pleasing to the eye,
while complementary color schemes have a more energetic feel.

Concepts & Terms

If you�re going to use color effectively in your designs, you�ll need to know some
color concepts and color theory terminology.
A thorough working knowledge of concepts like chroma, value and saturation is key
to creating your own amazing color schemes.

Hue
Is the most basic of color terms and basically denotes an object�s color. When we
say �blue,� �green� or �red,� we�re 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 its chroma.

Saturation
Saturation refers to how a hue appears under particular lighting conditions. Think
of saturation in terms of weak vs. strong or pale vs. pure hues.

Value
Value could also be called �lightness.� It refers to how light or dark a color is.
Lighter colors have higher values. For example, orange has a higher value than
navy blue or dark purple.
Black has the lowest value of any hue, and white the highest.

Tones
Tones are created when gray is added to a hue. Tones are generally duller or
softer-looking than pure hues.
Tones are sometimes easier to use in designs. Tones with more gray can lend a
certain vintage feel to websites.
Depending on the hues, they can also add a sophisticated or elegant look.

Shade
A shade is created when black is added to a hue, making it darker. The word is
often incorrectly used to describe tint or tone, but shade only applies to hues
made darker by the addition of black.
In design, very dark shades are sometimes used instead of black and can serve as
neutrals.
 Combining shades with tints is best to avoid too dark and heavy a look.

Tint
A tint is formed when white is added to a hue, lightening it. Very light tints are
sometimes called pastels,
but any pure hue with white added to it is a tint. For e.g; Pink is a color, but
it's also a tint of red.

Typography Terms

Typography can simply be described as the art of type. It's everything you can
think of � like fonts, sizes, and readability .
Here are some basic Typographic terms you should be aware of:

Type Size
Also called the Cap Height, is the overall height of capital letters in the
formation of words.

Ascender
Is the upward tail on letters like h, l, t, b, d, and k.

Descender
Is the downward tail for letters like g, q, and y.

Counter
Is the white space present inside letters like o and p.

X Height
is the height of the letter, and does not include ascenders or descenders.

Baseline
is the boundary that the lowest part of the letter rests on. Take a look at the y,
p, g, p and y letters in the illustration above. The solid line they are resting on
is the baseline.

Kerning
Is the space between the characters.

Leading
Leading is the space between lines of text, is an invaluable tool for readable
text.

Bad leading can ruin an otherwise stellar piece of copy, and good leading can make
even the worst type look readable.

Design Language
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 a good
user experience.
In this topic 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 complex. 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.

Understanding Brand Identity

Understanding Brand Identity

Brand identity guidelines define the assets and materials that make a company
unique. Logos, typography, color palettes, messaging (such as mission statements
and taglines), collateral, and more are aggregated and described in brand identity
guidelines.

Brand identity guidelines provide answers to these fundamental questions in one

centralized hub. But how do we make cohesive products?

Design Language

While brand identity guidelines are fairly tactile, design language guidelines are
a bit harder to pin down. Design language style guides articulate a general design
direction, philosophy, and approach to specific projects or products.

A unified design language shouldn�t be just a set of static rules and individual
atoms; it should be an evolving ecosystem.

Design Language

To present itself in a cohesive way across a growing range of products and media,
Google developed a design language called material design. It is used in almost
every Google Product including YouTube (Currently beta*), Google Search (Currently
beta*), Android OS and many others. Let�s take a look at the design languages
available and understand why the visual language has established itself.

Design Language

Skeuomorphism, flat design and material design are a few design languages which
follow its own design trends. Let�s understand the concept behind them and why they
are so successful at their time.

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.

Skeuomorphism has famously been one of Apple's key design principles, and part of
its Human Interface Guidelines.

The Rise of Flat Design

Flat design is a minimalist UI design genre, or design language, currently used in
various graphical user interfaces.

Material Design
Material design is a design language developed by Google. Expanding upon the �card�
motifs first seen in Google Now,
it is a design with increased use of grid-based layouts, responsive animations and
transitions, padding, and depth effects such as
lighting and shadows.
 Style Guide

So what do robust design languages look like? What form do they take? How do you
create, maintain, and enforce them?

The cornerstones of good design systems are style guides, which document and
organize design materials while providing guidelines, usage, and guardrails.

Style Guide
As it happens, there are many flavors of style guides, including documentation for
brand identity, writing, voice and tone, code, design language, and user interface
patterns.

Design Language Benefits

Design Language Benefits

Design Languages are important tools that help prevent chaos, both from a design
and development standpoint. Here�s why design languages are now essential tools for
modern web design and development.

Consistency � Design languages promote consistency and cohesion across a user

interface.
This consistency benefits both the people who create these interfaces and their
users.

Making design languages central to your process results in user interfaces that
feel more united and trustworthy.
This helps users accomplish their tasks faster and empowers them to master the
interface.

Shared Vocabulary � Design languages establish a consistent, shared vocabulary

between everyone involved in a project,
encouraging collaboration between disciplines and reducing 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.
For true collaboration to occur, it�s essential for teams to speak a common
language. Design languages help establish 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
appreciate consistency and understand why their requests for custom designs receive
pushback.

Empathetic Workflow � By making a design language a cornerstone of your workflow

designers and developers are forced to think about how their decisions affect the
broader design system.

A good design language helps inform designers and developers of the tools they have
in their toolbox, and provides rules and best practices for how to use them
properly.
Testing � A design language allows you to view interface patterns in isolation,
allowing developers to zero in on what�s causing errors, browser inconsistencies,
or performance issues.

Speed � Once the pattern library is established, subsequent design and development
becomes much faster,
using existing patterns rather than having to generate brand new patterns from
scratch every time speed up the entire workflow.

Longevity � The good thing about interface design systems is that they can and
should be modified, extended, and
refined for years to come. Even if you were to undertake a major redesign you�ll
find that many of the structural interface building blocks
will remain the same. You�ll still have forms, buttons, headings, other common
interface patterns.
A design language provides a rock-solid foundation for all future work, even if
that future work may look totally different.

-----------------------------------------------------------------------------------
--------------------------------------------
What do you get when you add black to a hue (color)?
Shade

Name the design concept of making items represented, resemble their real-world
counterparts
Skeuomorphism

Name the design tool that can be used to establish a spatial hierarchy of the
content
Grids

The height of a capital letter measured from the baseline

Cap height

Name the design language system developed by google

Material Design

Name the color scheme you get by mixing different tones, shades and tints within a
specific hue
Analogous

The name of the invisible line marking the height of a font.

X-Height

What is �K�in CMYK?

black

What�s the space between letters called?

kerning

Which one below is a vector image format?

SVG