Design Theory & Guidelines

What is design?

1. Design is much more closely linked to strategy rather than aesthetics. It’s the process of
intentionally creating something while simultaneously considering its’ objectives, functions,
economics, sociocultural factors, and aesthetics. It’s always on purpose.
2. Design is solving problems. Ask yourself;
a. What are you trying to solve?
b. Who are you solving for? (background of the client/users)
c. What are the constraints? (time, budget, immovable obstacles like unadvanced tech
on the user’s side)

How do we solve design problem?

1. Design thinking - Empathize -> Define -> Ideate -> Prototype -> Test -> Restart;
a. Empathize (divergent – multiple problems)
i. To empathize with target audience in order to understand what they need
and what are the problems needed solving? (Needs, constraints, wants, how
to make it easier, dislikes).
ii. Understand who, why, where, what, and how in order to empathize.
b. Define (convergent – ONE problem)
i. When looking for problems we often find dozens of it. We won’t be able to
tackle everything all at once in just on project. So, we need to make a clear
definition of the MAIN PROBLEM that we need to solve RIGHT NOW.
c. Ideation (divergent – multiple solutions)
i. Brainstorming stage.
ii. Finding solutions for the problems. Most of the time there will be dozens.
iii. Take the time to really do the research and find as many ideas/solutions
before downsizing to the best solution.
d. Prototype (convergent – ONE solution)
i. Create low-fidelity (e.g.; sketch) and high-fidelity (e.g.; wireframe) prototype
to show to clients/user. A prototype does not need to look beautiful/good as
its’ only function is for seeing the way the design will work.
e. Test
i. Testing the design to understand what works and not. No design is perfect.
It will always evolve. We will always need to review the design so that it
stays up-to-date.
2. Convergent and divergent method:
a. Divergent
i. Quantity – Novel ideas – Choices
ii. Came up with as many ideas as you can. Even the questionable one.
b. Convergent
i. Analyses – Usefulness – Choice
ii. Choose the best solution to use.
Hierarchy

1. Definition of Hierarchy
a. A system of ranking elements in a design base on importance.
b. To guide attention so users are not overwhelmed by information.
c. Helps guide user’s journey through the whole design.
2. Principles
a. At least 3 levels of hierarchy in a design.
b. Create hierarchy using contrast.
c. Must be very clear and easy to understand.
3. Tools
a. Scale
i. Bigger size = more important.
ii. Immediately looked at by users.
iii. 3 levels of scale at most. Too many will overwhelm users.
b. Color
i. Higher contrast = more important. (example: black on white background,
bright colors on dark backgrounds)
ii. Higher opacity = more important.
iii. 3 hue of colors at most. Can create different shades. – depends on design
theme.
iv. Intentionally put outstanding color on elements you want to get notice first.
c. Position
i. Taking element out of arrangement will make it stand out.
ii. Organize elements in group to help users differentiate and digest
information faster.
iii. Use white spacing to create contrast.
iv. Rotation also create contrast.
v. Position elements according to how people read. Left – right.
d. Depth/Focus/Blur
i. More focused = more important.
ii. Blur = less important.
e. Motion
i. Things that move grab attention.
ii. Avoid making everything move/animated as it will create chaos.
4. Process
a. Make decision on the hierarchy of elements in design before designing.
b. Apply tools in combination to create better design.
c. Re-analyze the design after finishing.
d. Do not highlight too many elements.
Color Theory

1. Basic of color theory

a. Hue, Saturation, Brightness
b. Blend mode, the way colors interact with each other
2. Gradient
a. Used to create depth on the design. Just like in the real world because we have light
that create shades.
b. Can also be used to create transition from one section of the design to another.
3. Principles
a. Colors chosen need to send the right mood for the design.
b. Use color psychology.
c. Use functional colors:
i. Red = Stop / No / Warning / Attention / Don’t
ii. Green = Go / Do / Proceed / Good / Success
iii. Grey = Disabled / Clicked / Used
d. Color can create hierarchy. (see hierarchy section)
e. Colors chosen must be able to work together – contrast and harmony.
f. Use less colors as possible (3 at most).
g. Bonus = are the colors brandable? Avoid competing with popular brand.
4. Process
a. Choose main color that corelate with the brand/theme.
b. Create color palette. Ask yourself;
i. Does the design need complex colors?
ii. Does the design need to express diversity or simplicity?
iii. Is the color comfortable to look at?
c. Use the 60/30/10 rule to apply the colors chosen.
Typography

1. Rules
a. Functionality – Users must be able to read it.
b. Aesthetics – to convey emotion.
2. Basics
a. There are 4 categories of Type;
i. Serif
ii. Sans Serif
iii. Script
iv. Decorative
b. A designer must have 20 – 26 sets of font family they are very familiar with.
c. Terms in typography;
i. Leading = Line height
ii. Kerning = Distance between each letter.
iii. Tracking = Space between all letters.
3. Principles
a. Readability - Text must be easy to read (depend on the design theme)
b. Type choice must align with the mood of the brand/design.
c. Typography is also part of your storytelling elements. (example: a classic beautiful
font conveys the feeling of premium, expensive, high-quality, etc.)
d. Must also have hierarchy.
e. Be mindful of the medium/place the design will be used. (example: online or offline)
f. Never create text-orphan.
4. Combining fonts
a. Combine high contrasting fonts.
b. Combine from same family fonts.
c. Combine similar moods.
d. 2-3 fonts max.
5. Hierarchy in typography
a. Size
b. Weight/boldness
c. Caps
d. Italics
e. Lists
f. Alignment
i. Flush left – commonly used
ii. Center – Short text with 3 lines max
iii. Justify – used very rarely
iv. Flush right – grabs attention
g. Width = 6 -12 words per line
Layout

1. Definition
a. Intentional division of space between elements in a design
b. Have both functional and aesthetic roles in the design
i. Functional
1. Helps users understand the design better
2. Can easily navigate through to find what they looking for and solve
their problems.
3. Organize information.
ii. Aesthetic
1. Creates mood.
2. Evoke emotions.
2. Terms
a. Column - place for elements
b. Gutter – space between column
c. Margin – space at edges of the design
3. Practice
a. Assess
i. The content (elements, size, platform used)
ii. Hierarchical structure
iii. Format (fixed, expanding, responsive)
b. Sketch
i. Quickest way to brainstorm
ii. Focus on creating skeleton
c. Decide the grid
i. Column, gutter, margin, size, etc.
d. Place elements
i. Grouping, alignment, balance, symmetry vs asymmetry, golden ratio, gold
cannon, etc.
Visuals

1. Roles
a. An image is worth 1000 words.
b. Visuals can give faster understanding.
c. Clarify, educate, evoke feelings, decorate.
i. Clarify – what’s this? What does it look like? (products / services / works
done)
ii. Educate – Diagram, process, graph, icons.
iii. Evoke feelings – We react to seeing visuals according to what it shows.
iv. Decorate – Make a design beautiful.
2. Types
a. Photo, illustrations, 3D, icons, stickers, diagram, patterns, textures.
3. Principles
a. Be clear on the visual’s role in the design
b. Use high quality visuals.
c. Maintain consistent mood/theme/environment/art style in the visuals.
d. Text must be readable.
e. Use visuals that follow color fundamentals.
f. Avoid clichés, overused visuals.
Storytelling

1. Definition
a. Human learns from stories.
b. When story is told, people pay attention.
c. Stories generate emotion.
2. Structuring a story
a. Use the classic monomyth theory of the hero’s journey
3. Story brand Framework
a. The narrative
i. Hero want something/have a mission. (customer)
ii. But has a problem/challenge. (pain point)
iii. Meets a guide. (brand)
iv. That gives them a plan. (Solution)
v. That helps them avoid failure. (risk of not buying)
vi. And ends in success. (life with the brand)
b. When designing UX remember to have the narrative in mind. Make a journey using
the narrative in the UX design. Process that users will go through should be design
with storytelling. It’s important to do it because people are used to put any
information they see in a narrative.
c. Put a drama in the narrative to make it not boring for the users.
i. What is about to happen?
ii. What might happen if we don’t use them?
iii. How do we avoid pain or failure?
Design Language (Design System)

1. A define set of choices we make for color, type, layout, imagery, and copy to ensure
consistent look and feel in our design.
2. Basically, a language in the form of design elements that talk with users of the design.
3. A manual on how to apply anything in the design.
4. Elements
a. Type – fonts, when each is use, sizes.
b. Color – what and when and how?
c. Layout – How do we align elements – margins, padding.
d. Photography – Quality standards, composition, color grading, moods, how do we
combine texts and visuals, how we show the subjects.
e. Graphics element and icons.
f. Logo – Responsiveness, compositions, how we use it on colors?
g. Copywriting – Tone, mood, personality.
h. UI components – buttons, forms, cards, CTA, etc. – consistent theme.
Motion & Animations

1. Definition
a. Real life is rarely still. Some things are always moving.
b. Motions draw attention. Can guide users and help them focus.
c. Motions tell stories.
d. It’s cool, delightful and fun. Makes design not boring.
2. Types
a. Transition – moving from one section/page/element to another.
i. Pre-load animation
ii. Reveal animation
1. First impression
2. Guide users attention
iii. Scroll animation
1. Parallax
2. Section color/background change
3. Horizontal scroll
4. Reveal a design
5. On slides
iv. Page to page animation
1. Slide in/out
2. Keep elements visible during page transition
b. Micro-interactions
i. Hover
ii. Mouse movement
iii. Complete action (button click, submitting form, etc.)
c. Storytelling
i. Looping (keep on repeating)
ii. Progress as you go through the story.
iii. Consider using storyboards.
3. Principles
a. Use motion to add life and depth to design.
b. Too much animation will tire and confuse user.
c. Every animation used must have clear purpose.
d. Use easing.
e. Animation must not slows down user experience.
Design psychology

1. Designers job is to influence people

2. People are actually more emotional than rational. We buy with our emotions then justify the
decision with logics.
3. Don’t use psychology aggressively, that the customer felt they were being trick into
following the design, it will backfire.
4. Most useful psychological theory to use on designing:
a. Maslow’s hierarchy of need.
b. Robert Cialdini’s theory of Influence:
i. Liking
ii. Authority
iii. Scarcity
iv. Social proof (testimony)
v. Commitment
vi. Reciprocation
c. Others:
i. Risk aversion
ii. Self-centeredness
iii. Suggestibility
iv. Mirroring (we tend to mirror what we see in people – ex: a model wearing a
shirt)
v. Aesthetic effect
Usability, Accessibility and Inclusion.

1. Definition
a. A design must be able to communicate with its target audience. Know who they are
is key. People are different. Different age and physical ability. Different tech
capabilities. Different knowledge and cultures.
b. Usability
i. Definition
1. Making the use of the design easy for the users.
ii. Principles
1. User must be able to understand where they are right now. What is
the design all about? What message it conveys? How to use it to
achieve what the user wants?
2. Use navigation, header, and footer.
3. Design to align with user’s expectation whenever possible. (Ex: a
user would expect a cart button to be on top right, so put it there.)
4. Make sure the design and experience is clear in any device as much
as possible.
5. The design should have optimized assets sizes, resolutions.
6. Use focus state on interactive elements such as forms, buttons,
navigations, etc.
c. Accessibility
i. Definition
1. A design should not discriminate against people with disabilities. A
design must be created with disable users in mind.
ii. Principles
1. Enough contrast for the color blind/myopic people
2. Legible text for them.
3. For critical information, do not use only color as notification tool but
also use graphic such as icon.
4. Label every element for the screen reader.
d. Inclusion
i. Definition
1. Design sometimes want to include users from different knowledge,
language barriers, tech barriers, etc. (Ex: a design with multi-
language)
ii. Principles
1. Every target audience able to understand the design.
2. Every target audience can access the design.