DIGITAL Design Basic

UX Design

User experience design (UXD or UED) is the process of enhancing customer

satisfaction and loyalty by improving the usability, ease of use, and pleasure
provided in the interaction between the customer and the product.
UX Design

WHY is the interface?

UX Designer

Strategy and Content: Wireframe & Prototype: Execution and Analytics:

Competitor Analysis Wireframe Coordination-UI Designer

Customer Analysis Prototype Coordination-Developer
Product Structure Testing/Iteration Analysis and Iteration
Product Strategy Development Planning
Content Development
UI Design

Like User Experience Design, User Interface Design is a multi-faceted and

challenging role. It is responsible for the transference of a product’s development,
research, content and layout into an attractive, guiding and responsive
experience for users.
UI Design

WHAT is the interface?

UI Designer

Look and Feel: Responsiveness and Interactivity:

Customer Analysis UI Prototyping

Design Research Interactivity and Animation
Graphic Development Adaptation to All Device Screen Sizes
User Guides/Storyline Implementation with Developer
UX is focused on the user’s journey to solve a problem, UI is focused on how a
product’s surfaces look and function.
THE BOOK Five
Simple
Steps

A Practical Guide to

Designing
for the Web

by Mark Boulton
UX Design

Flow Diagram
Wireframe
Prototype
UI Design

Layout
Typography
Color
GRAPHIC Design

The art or skill of combining text and pictures in advertisements, magazines,

or books.
GRAPHIC Design Principles

Balance
Proximity
Alignment
Contrast
Repetition
White Space
Keep It Simple.
GRAPHIC Design Principles - Balance

Visual weighting of objects on a field.

Symmetrical
Asymmetrical
Radial
GRAPHIC Design Principles - Proximity

The grouping and shaping of objects on a page.

Form
Text
Texture
Color
GRAPHIC Design Principles - Alignment

Keeping objects in line with one another.

Form
Text
GRAPHIC Design Principles - Contrast

Creating distinction by highlighting differences.

Form
Text
Texture
Color
GRAPHIC Design Principles - Repetition

Once a pattern is established, repeat some aspect of design throughout the

entire project.

Form
Text
Texture
Color
GRAPHIC Design Principles - White Space

The art of nothing.

GRAPHIC Design Principles - Keep It Simple

Avoid overwhelming amount of:

Colors
Objects
Typeface
Superfluous Information/Details
LAYOUT
LAYOUT

GRID - RULE OF ODD

BALANCE
HARMONY
TENSION
DIRECTION
DEPTH
LAYOUT

GRID
LAYOUT

BALANCE
LAYOUT

HARMONY
LAYOUT

TENSION
LAYOUT

DIRECTION
LAYOUT

DEPTH
EXAMPLES
COLOR
MONOCHROME COLOR SCHEME
Monochrome is the first and simplest color relationship. It uses just one color,
but different variations and shades of that color.
WHY IT WORKS
Monochrome relationships work because it’s clean and simple. There’s a sense of
unity to the piece because all of the shades are derived from one color. Visual
interest can be added and focus can be directed to a particular section or area by
choosing different shades with different values and saturations.
WHEN TO USE IT
Use a monochrome relationship when you want your piece to feel cohesive. This
is especially true if you have a lot of details that compete with each other that
you’d like to blend together. Focusing on just one color will help unite all of the
parts of your piece.
COMPLEMENTARY COLOR SCHEME
Complementary relationships are done in pairs, and those pairs sit directly
opposite each other on the color wheel. Red and green, orange and blue, yellow
and purple are all complementary colors.
WHY IT WORKS
Complementary colors are powerful because they naturally play off each other,
thanks to their color wheel positioning; red never looks more red than when it’s
against green, and vice versa. Additionally, complementary colors will have one
warm color (red, orange, yellow, and their variations) and one cool color (green,
blue, purple, and their variations).
WHEN TO USE IT
Use complementary colors when you want to emphasize the colors, when you
want lots of contrast, or when you want to draw attention to multiple areas at the
same time. Change the value and saturation of at least one of the pair for a more
sophisticated color scheme, like a bright red against a soft sage green.
SPLIT COMPLEMENTARY COLOR SCHEME
The variation on a complementary color is called split-complementary. You’d start
with one color, then pick the two colors that sit on either side of its complement.
So, instead of red/green, you’d choose red/yellow-green/blue-green for a split-
complementary color scheme.
WHY IT WORKS
Split-complementary colors play off the complementary relationship, and also
makes our brains stop and look (but for a different reason). Where red and green
makes us pause because they are exact opposites, we’re pausing with red/yellow-
green/blue-green because they aren’t exact opposites. There’s enough tension
and visual interest to keep our brains engaged while it puzzles out what it’s
seeing.
WHEN TO USE IT
All of the suggestions for complementary colors apply here, too. Additionally, you
could use split-complementary colors when you don’t want to be obvious about
the color scheme, when you want to add a little more drama, or want an extra
color to play with.
ANALOGOUS COLOR SCHEME
Analogous relationships use two or more colors that sit next to each other on the
color wheel. Examples would be orange/yellow-orange/yellow or yellow-green/
green/blue-green. You can choose as many colors to use here as you like, but
generally you want to stick to two, three, or four.
WHY IT WORKS
Analogous relationships work because the colors transition into one another in a
way that makes sense to our brains. We know that green comes before blue, and
blue comes before purple in rainbow. So, if we use blue-green, blue, and blue-
purple together, it makes sense to us. There is a natural flow because blue is
used to create the other two colors.
WHEN TO USE IT
Use an analogous relationship when you want more than one color, but still want
a sense of unity. Because the colors sit next to each other on the color wheel,
using analogous colors will help your piece feel blended together and purposeful.
Using a brighter, more vibrant shade of a color can help direct attention to a
specific part of your piece, while still working with that natural flow of colors.
TRIADIC COLOR SCHEME
The triad relationship uses three colors, and these are chosen by picking every
fourth color on the color wheel. The name comes from the shape that occurs
between the colors.
WHY IT WORKS
Triads work because there’s equal distance between the colors on the color
wheel. Even if a viewer isn’t familiar with the color wheel or color theory, their
brains see the relationship as a balanced one, and “balance” equals “harmony” to
our brains and eyes.
WHEN TO USE IT
Use a triadic color grouping when you’re looking for a more complex color
scheme, something that’s intriguing without being obvious.
TETRAD COLOR SCHEME
The tetrad relationship uses four colors that are chosen from every third color on
the color wheel. Like the triad relationship, the name tetrad comes from the
shape made between the colors. Orange/yellow-green/blue/red-purple is just one
example.
WHY IT WORKS
Despite having one more color than the last color relationship, tetrads are
remarkably similar to triads. They work for the same reason triads work – there’s
a balance to this relationship because of the way the colors methodically chosen.
WHEN TO USE IT
Like a triad, use a tetrad grouping when you want a more complex color scheme
that still feels balanced and harmonious.
COLOR PALETTE
TYPOGRAPHY
THE MESSAGE
About the message!
Description of the message.
Reference about the messages.

THE MESSAGE
About the message!
Description of the message.
Reference about the messages.
GRAPHICS DESIGN
GRAPHIC DESIGN LAYOUT &
PRINCIPLES COMPOSITION COLOR TYPOGRAPHY
Balance Grid - Rule of Odd Hue Serif
Proximity Saturation Sans Serif
Alignment Balance Value Impact on Design
Contrast Harmony Shade / Tone
Repetition Tension Tint
White Space Direction Temperature
Keep It Simple. Depth Color Schemes
PRODUCT & GRAPHICS
EADPHON
PRODUCT with LABEL
PRODUCT INFORMATION
PRODUCT MOOD SHOT
UX DESIGN
That’s It.