UI/UX

User Interface design is the design of user interfaces

for machine and software such as computers,
mobile devices, tv and so on.
User Experience design is the process design teams
use to create products that provide meaningful and
relevant experiences to users. It involves the design
of the entire process of acquiring and integrating
the product.
In short UI design represents what the user sees
and UX design represents how the user feels while
using the app
We have various soft wares for carrying out UI
design. In this course, we will be using Figma
Figma is a collaborative web application for
interface design.
We would be considering how to use Figma to
design User Interfaces and a good User Experience
UI Design Importance
Why is UI design important? Since users can only interact with your
app or website through the UI, its design will determine their main
impressions. If you've tried any low-effort app or website you will know
exactly how frustrating it can be to deal with a badly designed UI.

UI design also helps reduce the amount of time spent in the

development stage

Job Duties of UI Designers

User Interface Design is a crucial subset of UX. They both share the
same end goal—to provide a positive experience for the user—but UI
Design comprises an entirely separate leg of the journey.

Visual Aspect: UI design focuses on the user’s visual experience. It

determines how a user interacts with an interface—be it an app, a
video game or a website. It’s all about how the user navigates from A to
B via different visual touch points. Think tapping a button or swiping
through pictures.

Human Aspect: A UI designer works with human behavior in mind.

How so?

Look at it this way. A good interface requires barely any thought from
the user. Consider your favorite app: it’s easy on the eye and simple to
use, right? When you first installed it, you didn’t spend ages working
out how to get from A to B—it was just obvious.
The UI designer is pivotal to this. They think about the human user and
how the mind works. They use things like patterns, spacing and color to
guide the user.
Heuristics

A heuristic, or heuristic technique, is any approach to problem solving

or self-discovery that employs a practical method that is not
guaranteed to be optimal, perfect, or rational, but is nevertheless
sufficient for reaching an immediate, short-term goal or approximation

Heuristics in UI Design

Jakob’s Law of Internet UX

Users spend most of their time on other sites. This means that users
prefer your site to work the same way as other sites they already know.

Hick’s law (Hick-Hyman Law)

The more stimuli or choices users face, the longer it will take them to
make a decision.

1. Visibility of system status

The design should always keep users informed about what is going on,
through appropriate feedback within a reasonable amount of time.

When users know the current system status, they learn the outcome of
their prior interactions and determine next steps. Predictable
interactions create trust in the product as well as the brand.

2. Match between system and the real world

The design should speak the users' language. Use words, phrases, and
concepts familiar to the user, rather than internal jargon. Follow real-
world conventions, making information appear in a natural and logical
order.

The way you should design depends very much on your specific users.
Terms, concepts, icons, and images that seem perfectly clear to you and
your colleagues may be unfamiliar or confusing to your users.

When a design’s controls follow real-world conventions and correspond

to desired outcomes (called natural mapping), it’s easier for users to
learn and remember how the interface works. This helps to build an
experience that feels intuitive.

3. User control and freedom

Users often perform actions by mistake. They need a clearly marked
"emergency exit" to leave the unwanted action without having to go
through an extended process.

When it's easy for people to back out of a process or undo an action, it
fosters a sense of freedom and confidence. Exits allow users to remain
in control of the system and avoid getting stuck and feeling frustrated.

4. Consistency and standards

Users should not have to wonder whether different words, situations,
or actions mean the same thing. Follow platform and industry
conventions.

Jakob's Law states that people spend most of their time using digital
products other than yours. Users’ experiences with those other
products set their expectations. Failing to maintain consistency may
increase the users' cognitive load by forcing them to learn something
new.

5. Error prevention
Good error messages are important, but the best designs carefully
prevent problems from occurring in the first place. Either eliminate
error-prone conditions, or check for them and present users with a
confirmation option before they commit to the action.

There are two types of errors: slips and mistakes. Slips are unconscious
errors caused by inattention. Mistakes are conscious errors based on a
mismatch between the user’s mental model and the design.

6. Recognition rather than recall

Minimize the user's memory load by making elements, actions, and
options visible. The user should not have to remember information
from one part of the interface to another. Information required to use
the design (e.g. field labels or menu items) should be visible or easily
retrievable when needed.

Humans have limited short-term memories. Interfaces that promote

recognition reduce the amount of cognitive effort required from users.

7. Flexibility and efficiency of use

Shortcuts — hidden from novice users — may speed up the interaction
for the expert user such that the design can cater to both inexperienced
and experienced users. Allow users to tailor frequent actions.
Flexible processes can be carried out in different ways, so that people
can pick whichever method works for them.

8. Aesthetic and minimalist design

Interfaces should not contain information that is irrelevant or rarely
needed. Every extra unit of information in an interface competes with
the relevant units of information and diminishes their relative visibility.
This heuristic doesn't mean you have to use a flat design — it's about
making sure you're keeping the content and visual design focused on
the essentials. Ensure that the visual elements of the interface support
the user's primary goals.

9. Help users recognize, diagnose, and recover

from errors
Error messages should be expressed in plain language (no error codes),
precisely indicate the problem, and constructively suggest a solution.
These error messages should also be presented with visual treatments
that will help users notice and recognize them.

10. Help and documentation

It is best if the system doesn’t need any additional explanation.
However, it may be necessary to provide documentation to help users
understand how to complete their tasks. Help and documentation
content should be easy to search and focused on the user's task. Keep it
concise, and list concrete steps that need to be carried out.
Journey Maps and User Flows
Journey maps are linked with user flows.
Journey maps are also called User Journey
A journey map refers to a visual representation of the path a user
would take to accomplish a task.
A user flow is a more detailed and graphical map of a journey map.
Journey maps concentrate on the steps taken over time, while a user
flow details the steps taken at a particular time.
Journey map

User Flow

WIREFRAMING
A wireframe is an illustration of a user interface that specifically focuses
on space allocation and prioritization of content, functionalities
available and intended behaviors. Wireframes do not need to include
any styling, color or graphics.
So a wireframe like a blueprint simply shows the skeletal system of our
UI but in the precise order and measurements.

Purpose of Wireframing
. Connects the site’s information architecture to its visual design by
showing paths between pages

. Its clarifies consistent ways for displaying particular types of

information on the user interface

. Determines intended functionality in the interface

It prioritizes content through the determination of how much space to

allocate to a given UI item and where that item is located

Guides When Creating Wireframes

Since wireframes helps the client or developer to walk through the UI
structure without being sidetracked by design elements such as colors
and images, the following guides have to be used

. Do not use colors

If you would typically use colors to distinguish between items, rely on

various gray tones to communicate the differences.

. Do not use Images

Images distract from the task at hand. To indicate where an image

would be placed, use a rectangular box with an ‘x’ marked in it

. Use only one font

Use only one font style within your wireframe, although font sizes may
change to indicate headers and changes in the hierarchy of text
information in pages, One font style should be used.

Although wireframe designs differ from site to site, the following

elements are often included as standard elements on wireframes

. Logo

. Search field

. Headers

. Navigation systems

Body content

Buttons

Contact info

Footers

Types of Wireframes
Low-fidelity wireframes helps facilitate project team communication
and are quick and easy to develop. They tend to be more abstract
because they use simple images to block off space and implement mock
content and may use latin text(lorem ipsum) as fillers for text spaces.

High-fidelity wireframes have an increased amount of detail. These

wireframes often include information about each particular item on the
page including dimensions, behavior and /or actions related to any
interactive elements.
How to Create a Wireframe
. Make sure you have your user flow planed out

. Do research

. Sketch sketch sketch…..

Key Problems To Avoid When Wireframing

Wireframing every page

Wireframing doesn’t need you to create all the pages in the user
interaction. Just the key elements are needed.

Gain a solid understanding of the problem you want to solve and focus
on these specific aspects in your design.

Skipping paper/white board based sketching

Many designers tend to jump to wireframing tools and skip the first
step of getting a rough but simple guideline. The importance of paper
based sketching cannot be pushed under the carpet as it provides a
simple representation of what to do.

Sketch your wireframes on paper and compare them with the digital
one

Adding too many detail

Use simple and straightforward sketches and not what looks like a real
page or screen.

Starting with hi-fi wireframing

Always make your wireframes low fidelity at the early stages. More
details can be added as you progress

Designing for large screens first

Its relatively easy to design for larger screens as it is easy to adapt ui

elements to fit, but designing for a smaller screen after beginning with
a large screen could become problematic.

Follow the mobile-first design principle. Design your wireframes for

mobile first and then you can move on to larger screens like that of a pc

Colors
Colors affect people and evoke certain feelings or reactions.

The color red symbolizes love, danger, anger. A darker shade of red
may be used to indicate elegance.

Orange indicates energy, vitality

Yellow indicates warning, happiness or wealth if in a golden shade

Pink indicates femininity, romance

Purple indicates royalty, luxury, spirituality

Blue indicates corporate, calm trust, reliability

Green indicates nature, luck cleanliness

Black indicates elegance, power, strength, sadness

White indicates purity, cleanliness and elegance

Color Terminology
Hue: The color itself

Saturation: The purity of the color. A color is most pure when it lacks
gray

Color Vibration
Color vibrations occur when some colors placed next to each other
cause a disturbing effect to our eyes. The colors are said to vibrate

Color Harmonies

Color harmony refers to the property that certain aesthetically pleasing

color combinations have. These combinations create pleasing contrasts
that are harmonious

If you study the color wheel, you will notice that primary colors, red,
blue and yellow are located at a distance from each other while
secondatry7 colors are formed by a mixture of the primary colors and
are located halfway between them.

The key color as a starting point

The key color refers to the main color of your design which could be a
primary or secondary color. Once the key color has been chosen,
relationships to other colors can be identified

Creating contrasts with colors

Two colors from different segments of the color wheel are contrasting
colors or clashing colors. For example, red is from the warm half of the
color wheel and blue is from the cool half. They are contrasting colors.

Red and green are contrasting colors whereas magenta and orange
although different cannot be referred to as contrasting colors

Guidelines for proper color usage

Color scheme is the canvas not the painting

The focus of your design should be on what youre trying to display, if

your background is ‘louder’ than your design, you may distract
attention from the main point.

Start with a simple grayscale base

There is an infinite number of colors you can use for your background
and textbase. However it is recommended to start simple, use white
and grayscales for backgrounds and text

Pick a single color to highlight

Colors could be mismanaged when multiple colors are brought to focus.

The more colors you use, the trickier it is to keep them under control.
Just use one colors for highlighting main ui elements like buttons, links,
headlines etc.

Choose your highlight color by laying out a box over your base to gauge
how your color looks with the rest of the ui elements. Then open up
your color picker and click in the center of the upper right quarter of
the color map

If in doubt, use blue

If in doubt over what color to use, just go for blue. Blue is often the
most flexible color to work with and will fit the highest number of site
types

Stay out of the top right corner

In your color map, void the top right corner. Colors in the top right are
like race cars, they can perform amazingly well and are highly alluring.
But it requires a lot of experience to use them well, else accidents may
happen, so it is best to bite a color that is more toned down

Color Applications
White can be used as a base or background color, you may use other
light neutral colors like light gray.

Black can be used for text. You may have highlighted text in another
color

Light blue can be used for hyperlinks

Blue, Green, Orange, Brown can be the main color of the design. It may
be used for buttons, highlighted texts and other ui elements

Practical uses of colors

Red and yellow can be used for errors and warnings respectively

Color coding can be implemented too, let all content of a particular

topic contain a particular color

Status, like active can be displayed in green, waiting or pending in

yellow and inactive or declined in red
Typography
What is typography?

Let’s kick off with the basics: just what actually is typography?

Typography is the art of arranging letters and text in a way that makes
the copy legible, clear, and visually appealing to the reader.

It involves font style, appearance, and structure, which aims to elicit

certain emotions and convey specific messages. In short, typography is
what brings the text to life.

Typography is so much more than just choosing beautiful fonts: it’s a

vital component of user interface design.

Good typography will establish a strong visual hierarchy, provide a

graphic balance to the website, and set the product’s overall tone.
Typography should guide and inform your users, optimize readability
and accessibility, and ensure an excellent user experience.

Let’s delve a little deeper into why typography is so important.

Typography builds brand recognition

Not only will good typography enhance your website, but your users
will subliminally begin to associate the typeface featured on your site
with your brand.

Unique, consistent typography will help you establish a strong user

following, build trust with your users, and help to carry your brand
forward.
Typography influences decision making
Typography has a profound effect on the way that users digest and
perceive the information conveyed by the text.

Eye-catching type is much more persuasive than weak fonts that don’t
reinforce the message of the text.

Typography holds the attention of the readers

Good typography could be the difference between someone staying on
your website for one minute or half an hour.

It’s important that your website is visually stimulating and memorable,

and typography plays a huge role in this process.

The different elements of typography

To get started in typography, you first need to get to grips with the
eight essential typographical design elements.

Fonts and typefaces

There’s some confusion surrounding the difference between typefaces
and fonts, with many treating the two as synonymous.

A typeface is a design style which comprises a myriad of characters of

varying sizes and weight, whereas a font is a graphical representation
of text character.

Put simply, a typeface is a family of related fonts, while fonts refer to

the weights, widths, and styles that constitute a typeface.
There are three basic kinds of typeface: serif, sans-serif, and decorative.

Serif
As the visual example above demonstrates, serif typefaces are
identified by the extra marks at the end of letters.

The addition of these small strokes and elements give serif fonts an air
of tradition, history, authority, and integrity.

It’s no surprise, then, that you’ll see this “classic” style used for
newspaper titles, for example, or for the font used in books.

Times New Roman, the Microsoft Word original font, is a serif font. It
was replaced in 2007 by the sans-serif Calibri.

Sans-serif
Just like the name suggests, sans-serif typefaces as defined by what
they lack.

Without serif’s more traditional strokes and dashes, the sans-serif font
family is seen as much more modern and bold. As a result, it’s clear to
read and when used in headlines, grabs your attention more than serifs.
Decorative
Again given away by its name, the function of this typeface is aesthetic
more than readable. As a result, you’re far more likely to see these
used in brand names, logos, and short titles.

Walk around your local grocery or toy store and you’ll see decorative
fonts jumping out at you from every shelf. Just imagine trying to read
an entire article written in them!

Decorative typefaces are excellent for allowing the user to show off
even more personality, feeling, and uniqueness with their font choice.

Best UI practices for using fonts

It’s all well and good to know what typography is, but you also need to
learn how to use it effectively in context. This applies heavily to UI
design.

To keep the interface uncluttered and streamlined, a good designer

will never use more than three fonts—and keep decorative fonts to a
minimum.

Most UI designers will pair serif fonts with sans-serif fonts, such as
putting main body text in a serif font and putting your title in a sans-
serif font, or vice-versa.

Contrast
Much like hierarchy, contrast helps to convey which ideas or message
you want to emphasize to your readers.
Spending some time on contrast makes your text interesting,
meaningful, and attention-grabbing. Most designers create contrast by
playing around with varying typefaces, colors, styles, and sizes to create
impact and break up the page.

Consistency
Keeping your typefaces consistent is key to avoiding a confusing and
messy interface.

When conveying information, it’s essential to stick to the same font

style, so your readers instantly understand what they’re reading, and
begin to notice a pattern.

While it’s ok to play around with levels of hierarchy to some extent, it’s
good practice to establish a consistent hierarchy of typefaces (one
consistent font for headers, another for subheadings) and stick to it.
White space
Often referred to as “negative space,” white space is the space around
text or graphics.

It’s often overlooked and tends to go unnoticed by the user, but proper
use of white space ensures the interface is uncluttered and the text is
readable.

White space can even draw attention to the text and provides an
overall aesthetically pleasing experience. White space often takes the
form of margins, padding, or just areas with no text or graphics.

Alignment
Alignment is the process of unifying and composing text, graphics, and
images to ensure there is equal space, size, and distances between
each element.

Many UI designers create margins to ensure that their logo, header,

and body of the text are aligned with each other.

When aligning your user interface, it’s good practice to pay attention to
industry standards. For example, aligning your text to the right will
seem counterintuitive for readers who read left to right.

Color
Color is one of the most exciting elements of typography. This is where
designers can really get creative and elevate the interface to a new
level.
Text color, however, is not to be taken lightly: nailing your font color
can make the text stand out and convey the tone of the message—but
getting it wrong can result in a messy interface and text that clashes
with the site colors.

Color has three key components: value, hue, and saturation.

A good designer will know how to balance these three components to

make the text both eye-catching and clearly legible, even for those with
visual impairments. Often, designers will test this by viewing the text
in grayscale4 (without color) and making tweaks if the text is too dark
or too light against the background color.

Hierarchy
Establishing hierarchy is one of the most vital principles of typography.

Typographical hierarchy aims to create a clear distinction between

prominent pieces of copy that should be noticed and read first, and
standard text copy.

In an age of short attention spans brought about by social media,

designers are urged to be concise and create typefaces that allow users
to consume the necessary information in short amounts of time.

Hierarchy can be created using sizing, color, contrast, and alignment.

For example, if you have a line of copy with an exclamation mark icon
at the beginning that is in red and larger than the previous copy, this is
a visual clue to the readers that it’s a call to action.

The most typical example of typographical hierarchy is size: headings

should always be larger than subheadings and standard text.
How do you choose the right typeface for your
website?
Now that we’ve familiarised ourselves with what is typography itself as
well as its elements, let’s talk about the process of picking typefaces for
your interface.

Choosing a font for your website is a lot harder than it first seems.

With so many different fonts and typefaces to select from, it’s easy to
feel overwhelmed. Making the right choice depends on so much more
than just seeing what looks nice. Here are a few key considerations:

Think about personality

How do you want your users to feel when they first enter your website?
Do you want to emulate a friendly atmosphere?

Do you want the site to feel high-end, welcoming, playful, or serious?

It’s imperative that the typography reflects the personality of the brand
or product. A good starting point when faced with this challenge is to
define the core traits of your brand, and start to gather typefaces that
reflect these traits.

From there, you can begin to notice a trend.

Reflect on tone
It’s equally important to consider how the font harmonizes with the
tone of the message.
For example, if you want to convey serious or important information,
choose a less stylized or decorative font that is both clearly legible and
will limit distraction.

Don’t skimp on function

Function is just as vital as form: there’s nothing worse than a website
that looks pretty but is entirely illegible, leading you to click the wrong
button or take a wrong turn because the instructions were unclear.

When deciding what typefaces to include in your interface, set the

style, aesthetic, and voice aside and reflect on whether the font is
legible, readable, and accessible.

Can the text be legible without strain? Are the characters distinct
enough?

Consider performance
One thing that many designers often overlook is choosing typefaces
that are web browser-friendly.

Commonly used font libraries such as Google fonts offer web-based

font files that can be rendered perfectly in a browser without any
issues.

Pro tip: when downloading web fonts, never download more

character sets than you need to. This way, you’ll avoid excess weight!
Get inspired
If you’re not sure where to start, take some time to see what other
people are doing.

Open your eyes to the typography that you see around you.

Can you notice similar patterns? Can you see good and bad examples of
typography? Even following typography hashtags on social media or
looking up typography on Pinterest will give you some good ideas of
what’s out there.

Take some time to test

The best way to decipher which font to use for your interface? Test,
test, test

By gathering useful feedback from real users, you’ll get a clearer insight
into what works, what doesn’t, what is legible and what feels
counterintuitive or clunky.

5. Conclusion
Typography is often overlooked, but it’s a crucial component of user
interface design.

Mastering typography will see you well on your way to becoming a

fantastic UI designer! If you’re not sure where to start, why not head to
your favorite websites and start making a note of what typefaces
they’ve gone for.
What is a creative
brief?
A creative brief is a short document that
sums up marketing, advertising, or
design project mission, goals, challenges,
demographics, messaging, and other key
details. It's often created by a consultant
or a creative project manager. The goal
of a brief is to achieve stakeholder
alignment on a project before it begins.
A creative brief acts as a roadmap that
takes a project from ideation to
completion. It ensures the scope,
timeline, key stakeholders, and purpose
of the project are communicated clearly.
The creative brief is the single source of
truth for everyone working on a project.
If questions come up or tasks become
unclear, the creative brief will steer
things in the right direction.
Creative Brief Outline
Project Name
Company Background
Project Objective
Target Audience
Competitors
Key Message
Key Consumer Benefit
Attitude
Call to Action
Distribution

How to Write a Creative Brief

Decide on a name for the project.
Write about the brand and summarize
the project’s background.
Highlight the project objective.
Describe the target audience.
Interpret the competitive landscape.
Prepare the key message.
Choose the key consumer benefit.
Select an attitude.
Determine the best call to action.
Draft the distribution plan.
Share the creative brief with
stakeholders.

1. Decide on a name for the project.

The first step in developing a creative
brief is deciding on a project name. This
might sound simple, but it's one of the
most critical components of a creative
brief. If you're building a campaign
around a brand new product or service,
the campaign name will be the first time
many members of your team will be
introduced to it. Referring to the
campaign (and therefore product or
service) by the correct name prevents
the game of telephone from happening.
Without a specific and clear campaign
name, people will make up their own
terminology which can alter the intent of
the campaign.

To create a project or campaign name

for your creative brief, keep it creative
and brief. A few words or a short
sentence should work just fine. If you're
launching a product, identify what the
call to action will be for the target
audience, then center the name around
that. Here are a few examples of
fictional campaign names:

The Search for Adventure Campaign- A

scavenger hunt-themed amusement
park.
The Don't Forget Your Memories
Campaign - A photo frame company.
The "What's hotter than Pepperco hot
sauce?" Campaign - A hot sauce brand.

2. Write about the brand and

summarize the project’s background.
Another simple, yet essential section is
the company background. If you work in
an agency setting, this is non-negotiable
as your team is likely handling several
client campaigns at once. However, if
you're developing a creative brief for an
in-house project, you'll still want to
include this part. New hires on your
team, freelancers, and vendors will
appreciate the background that your
internal team is already privy to.

The company background shouldn't be a

general history of the company or a
copied and pasted paragraph from the
about page. Instead, tailor this to the
project at hand. Set the scene with one
or two sentences that sum up the
brand’s mission. Follow this with a few
sentences that give background on the
brand and what led to the development
of the project.

While some creatives have put this

information all together in a quick
paragraph, others separate it with
headers like “Brand Statement” and
“Background.”
Here are some questions to consider
when writing a company background for
your creative brief:

Has the company launched a campaign

like this before?
Why is the company choosing to launch
this campaign right now?
What's happening in the market and
how will this campaign respond to it?

3. Highlight the project objective.

Here is where the creative brief gets
more specific. The project objective
should briefly explain the purpose of the
project, the timeline, and the audience
it'll target. This can be done in a
sentence or two, but you can get
creative and stylize it in sections.

This part of the creative brief will be

helpful in emphasizing why the project
needs to happen. The goal aspects will
help you and your team align on the
project’s expectations. If the company or
client hasn’t identified any major
challenges, you can focus this section on
goals and objectives. Explain what a
successful project looks like and how it
will benefit the company.
Pro Tip: Writing a project objective is
very similar to writing a goal, so take a
look at this blog post for more detail on
goal and objective writing.

4. Describe the target audience.

Next, it's time to define the target
audience for the project. This is the
segment of your market that will directly
benefit from the product or service
being launched. You can take audience
segmentation a step further by
identifying a primary and secondary
audience. Doing so will give your team
more freedom to explore creative ideas
that might resonate with one group
more than the other.

When crafting the target audience

section, be sure to include the following:

Demographics - Simple demographic

information gives your team insight into
exactly who the audience is. This
includes data points like age, income,
education, ethnicity, and occupation.
Behaviors - Buying behaviors, trends,
and other customer history make up the
target audience behaviors. These
provide important context to the
creative brief because they explain
where the customer is in their buyer
journey.
Psychographics - This is how the
audience thinks and feels about your
brand and the product or service you
sell, in general.
Geographics - Digital, physical, and
hybrid campaigns will benefit from
having geographics stated explicitly in
the creative brief so that media buyers
can price ad slots in each market.
Pro Tip: Your creative brief shouldn't be
too long, and this section can take up
quite a bit of space. To make this section
more digestible, consider using buyer
personas.

5. Interpret the competitive landscape.

Knowing what your competitors are
doing is advantageous for the whole
team. You can use competitive data to
come up with ideas that haven’t been
tried yet, learn from their failed projects,
or build a project that improves on a
strategy they’ve used in the past.
Include a quick list of competitors with
similar product or service offerings.
Briefly list a few things your company
has in common with them, how your
brand has differentiated itself already,
and a few areas where this project can
help you get ahead.

6. Prepare the key message.

The key message can be the most
difficult part of the creative brief to
develop because just about every
stakeholder will have a different opinion
of what it should be. To get buy-in
faster, try this simple trick. Ask yourself
"We're launching this project, so what?"
The so what? is your key message. It
explains why your target audience
should stop what they're doing and pay
attention to your campaign.

The key message includes the pain point,

what the audience's experience might be
like without the pain point, and the
benefit they'll receive as a result of your
company's solution. This framework
places the customer in the spotlight of
the campaign. Instead of telling them
what this product or service could do for
them, it positions them as the main
character in the journey from problem
to solution.

7. Choose the key consumer benefit.

If you're launching a new product, there
are likely several features and benefits
that the target audience will experience
when they decide to purchase it.
However, it's very difficult to structure a
campaign around several different
features. That's why marketers and
creatives use something called a key
consumer benefit (KCB) in the creative
brief to keep everyone aligned on the
primary benefit being communicated. To
choose the right KCB, you'll want to get
input from the project stakeholders and
rely on consumer data to guide the
decision.

Pro Tip: Your KCB won't always be the

fanciest feature of your product. The
benefit that solves the biggest problem
for your audience is a great choice for
the KCB.

8. Select an attitude.
The tone and voice of your campaign
create the overall attitude and that
should be consistent throughout every
creative element that's being developed.
Identifying a few adjectives that describe
the attitude of the campaign can help
copywriters draft copy that sends the
correct message within the right context.
Graphic designers can use colors and
techniques to portray the tone and voice
as well.

In this section of the brief, you should

also note the appropriate voice for your
audience. While some audiences, like
those in the business world, prefer more
formal language, others might engage
more with a casual, relatable tone. To
substantiate your decision to choose a
particular brand voice and tone, you
could write something like, “Our brand
voice is a casual and carefree tone
because it speaks to younger Gen-Z
audiences.”

Pro tip: Use a thesaurus to find specific

words that evoke nuanced emotions and
attitudes for a hyper-targeted campaign.

9. Determine the best call to action.

Finally, your audience needs something
to do once they see your campaign. The
good thing about CTAs is that they don't
have to be physical actions. A CTA could
have a goal to change thoughts and
perceptions about your brand which
doesn't require the audience to do
anything at all.

Your creative brief might include several

different CTAs, especially if you have a
primary and secondary target audience.
But it's a good idea to have one primary
CTA that drives the project objective we
talked about earlier.

10. Draft the distribution plan.

When the project is done, you’ll need to
make sure your audience actually sees it.
List a few channels or platforms on
which you plan to announce the launch,
as well as any promotional content you
plan to create.

When drafting this section, think about

your target audience. Don’t waste time
on a promotional strategy that they
won’t see. For example, if you’re
promoting a project to Gen-Z, you’ll
want to invest in social media rather
than billboards or newspaper ads.
11. Share the creative brief with
stakeholders.
Once you’ve drafted a creative brief,
share it with the team you’ll be working
with. You’ll also want to circulate it
around the company via Slack, email, or
presentations. If you’re a consultant
working outside of a client’s company,
encourage your clients to share the brief
internally.

As you or your clients spread awareness,

you should be open to answering
questions or taking feedback from
colleagues in case they have any great
ideas. This strategy will improve team
alignment, increase support of the
project, and ensure that all of your
colleagues are on the same page.

Types of Creative Briefs [+ Examples]

Creative briefs serve several purposes in
the communications field. Marketers,
designers, and advertisers use them
differently. Depending on your role, your
team, and the project you're working on,
one might be more effective than the
other. Below are some of the most
common types of creative briefs used
across industries today plus examples of
what they might look like.

Marketing Creative Briefs

A marketing creative brief is most
commonly used to bring campaigns to
market. This type of creative brief can be
used for both new and existing
campaigns. Broad business goals and
strategies to accomplish them are
usually included in this type of creative
brief. It's also not uncommon to see
revenue goals and a budget included in a
marketing creative brief.
Product Design Creative Briefs
Product design creative briefs outline
the go-to-market strategy for a new
product or feature launch. Product
marketers are responsible for
developing this type of brief. Developed
in conjunction with the product
manager, the product design creative
brief will describe the features and
benefits of the product and how the
audience will benefit from them. Unique
features of this type of creative brief
include product documentation and
product descriptions.
Advertising Agency Creative Briefs
Advertising agencies develop creative
briefs often for the various clients they
serve. These briefs are concise and
include the client's brand guidelines as
well as the specific project guidelines. A
budget may also be included in the brief
so that all teams can make wise
decisions about the tactics they
recommend for the client. An account
manager or supervisor develops the
creative brief and shares it with client
stakeholders before the agency begins
working on the project.
Mobile Limitations and Strengths
Mobile phones come with strengths, but also limitations. These strengths and
limitations play out in good mobile user experiences.

Small Screen
In spite of the modern trend towards larger-screen phones, what makes mobile
phones so convenient and portable is their small size. Compared with desktop
and even laptop screens, phone screens accommodate a lot less content. As a
result, screen size is a serious limitation for mobile devices. The content displayed
above the fold on a 30 inch monitor requires 5 screenfuls on a small 4-inch
screen. Thus, mobile users must (1) incur a higher interaction cost in order to
access the same amount of information; (2) rely on their short-term memory to
refer to information that is not visible on the screen. It’s thus not surprising
that mobile content is twice as difficult.

Whenever you include a new design element or a new piece of content on the
mobile screen, something else gets pushed out (or below the fold). Think hard of
the opportunity cost of each new element: what does it mean for the users if you
leave out element B in order to include element A? Is element A more important
than element B? Content and feature prioritization is key. Although we provide
general guidelines in this report, your answer likely depends on the kinds of users
and tasks that you have.

“Chrome” denotes the user-interface elements that

are instrumental in using a site or application. Users
come to a site to find information that they need or
to accomplish a task, not to contemplate the beauty
of buttons, navigation, menus, and other design
elements. Content is always of interest (whether on
mobile or on desktop), but whereas on desktop
there is enough screen space for both content and
chrome to coexist, often, on mobile, designers
must downplay the chrome to make space for
essential content.
That doesn’t mean that chrome should disappear
from mobile. In fact, it’s hard to create a usable
interface with no chrome. However, designers need
to accommodate a high content–to–chrome
ratio on the mobile screen.

Portable = Interruptible
Mobile phones are portable: most fit easily in a
pocket or purse and they tend to follow us
everywhere. Because we use phones in a variety of
contexts and situations, we are more likely to
be interrupted when using such devices: an
external event in the outside environment may
demand our attention and require us to stop
whatever we were doing on the small screen. As a
result, attention on mobile is often
fragmented and sessions on mobile devices are
short. In fact, the average mobile session duration is
72 seconds. In comparison, our own studies show
that on desktop, the average session is 150 seconds:
more than twice as large.
Short mobile sessions mean that we must design
for interruptions: save state for users and allow
users to save state.
Designers should save context and make it easy for
users to recover context and resume an interrupted
task. The mobile app or website must save state at
all times and be prepared for such interruptions. It
should also try to do the transition back to the
app/website as smooth as possible, so that the user
doesn’t have to redo work already done before the
interruption.
Moreover, mobile users don’t always make
definitive decisions, but may want to return to
certain content in contexts with larger bandwidth or
screen. Allow users to save history, as well as to
email or share information with themselves or
others. And also allow them to return to their data
on other platforms and access any actions they may
have carried out on mobile.
But designing for interruptions doesn’t only mean
saving state. It also means prioritizing the
essential and simplifying tasks and interactions.
Because attention is fragmented, strive to show
users what they need as soon as possible. Flooding
them with details and asking them to parse walls of
text for relevant facts is not interruption friendly.
The gist should always come before the minutiae. A
simple task is easier to finish quickly. It’s also easier
to resume than one with many steps and
alternatives.
Single Window
Although some phone manufactures are trying to
accommodate multiple windows on the screen at
the same time, the limited size of the mobile screen
makes that goal quite unpractical, even with today’s
larger-screen phones. The vast majority of users
only see a single window (and thus a single
application or website) at a time; they cannot split
the screen (as on the desktop) and work with two
different apps simultaneously.
The single-window constraint means that design
should be self-sufficient: Any mobile tasks should
be easy to complete in a single app or on a single
website. Users should not have to leave an app (or
website) to find information that the app requires,
but that it doesn’t provide. Remember that pen and
paper, even if available, are often unusable on the
go. If users must move information from one app to
another, it’s likely that they will need to copy–and–
paste it (or worse, rely on their memory and
increase their cognitive load); the interaction will
become more complex and error prone. Apps and
websites should be self-sufficient and should not
necessitate any external props, be them physical or
virtual.
Touchscreen
Touchscreens come with many blessings and sins.
Gestures represent a hidden, alternate user
interface (UI), that, when built with the right
affordances, can make the interaction fluid and
efficient and can save screen real estate. But they
also suffer from low memorability and
discoverability. On the other hand, it’s hard to type
proficiently on a tiny virtual keyboard and it’s easy
to accidentally touch the wrong target.
Perhaps the biggest problem is related to typing: on
a soft keyboard, users need to continuously divide
attention between the content that they are typing
and the keypad area. Touch typing is impossible in
the absence of haptic feedback; plus, keypads
themselves are small and keys are crowded.
Another difference between touch and other types
of input such as mouse is that the target
size required to optimize the reaching time and
minimize errors is considerably larger for touch
than for mouse. So not only is the screen smaller
than a laptop or desktop screen, but buttons and
other targets need to be larger than those on a
regular monitor.
Because on a touchscreen there can be many target
areas, it is easy to make accidental touches. Some
can leave the user disoriented and unsure of what
happened. Undo is one of the original 10 usability
heuristics, and it is even more important on touch
devices.
Variable Connectivity
Even in the era of fast cellular networks and
ubiquitous Wi-Fi, coverage is not universal or
equally good. Phone users frequently complain
about connectivity problems. Every new page load
translates into a significant waiting time when the
network does not cooperate.
If you want users to finish their tasks on your
mobile site or in your app, mind the waiting time.
Design pages that are light, yet contain as much
information as possible, to avoid many back–and–
forth trips from client to server. Minimize the
number of steps and, ultimately, the number of
page loads.
Phones come with many limitations, but also with
many unique features — some of them available
only to apps, others also accessible for websites.
The camera, microphone, and GPS are conveniently
integrated into the device and can be easily used to
make input easier and get around some of the
difficulties of typing. Photographs can transmit
more nuanced information that often cannot be
easily captured in text (think of describing a product
that you are looking at). Notifications enable users
to be updated immediately of events that are
relevant to them. Touch ID allows users to log in
using a fingerprint, without typing passwords. And
Apple Pay and Google Wallet enable users to use
their phones to pay in real life or online, without
entering a credit card.
If the phone comes with a camera, don’t ask users
to type in barcodes. If the phone has a GPS feature,
don’t have them enter zip codes. Use the phone
features as much as possible to lessen users’ work.
Limitation
s and
features
for mobile
UX
Mobile UX
Mobile user experience (UX) design refers to the design of
positive experiences which a user can feel when using
mobile devices and applications or services running on
such devices. Mobile usage places unique requirements
on the user experience as it depends on the user context,
where and when he will use the app. We will go through
some basic features a mobile app has to contain.

Usability
Usability may feel like an unachievable term, but
designers should simply ask themselves “can someone
easily use this?”. so how can a designer know whether an
app is usable or not!
Nielsen and Schneiderman explain usability as being
made up of five principles:

Learnability
How easy is it for users to accomplish basic tasks the first
time they encounter the design?
Efficiency
How quickly can users perform tasks?

Memorability
If a user hasn’t visited the system in a while, is it
memorable for users to use it again?

Errors
How many errors do users make, and how quickly can
they recover from errors?

Satisfaction
How pleasant is it to use the design? Are they interesting
about using it?
In addition to this Nielsen defines another term called
Utility. Utility refers to the ability of a system to meet the
needs of the user. Usability and utility are equally
important and together determine whether something is
useful: It matters little that something is easy if it's not what
you want.
● Definition of Utility = whether it provides the features
you need.
● Definition of Usability = how easy and pleasant these
features are to use.
● Definition of Useful = usability + utility.

Limitations
of mobile
application
The growing of mobile devices usage has presented new
usability challenges that are difficult to model using
traditional models of usability. The number of issues has
been introduced by the advent of mobile devices:
● Mobile Context: The word context defines where and
when a user is using mobile devices. When using
computers, users used to tied to one place. Whereas
using mobile devices is not restricted to a single place. It
also defines what users are doing while using a mobile.
They may interact with people or objects. These factors
lead to distracting users usage.
● Connectivity: some mobile applications need
connectivity. And it may be slow or unreliable because of
the portability of mobile devices.
● Small Screen Size: To provide portability, mobile
devices may have very limited screen size and so the
amount of information that can be displayed is limited.
● Different Display Resolution: The resolution of mobile
devices is less than desktop computers and that is
resulting in lower quality images.
These constraints complicate the job of usability. On the
other hand, there are some features that help increase
usability in mobile devices and is not available on
computers.
Four
usability
features of
mobile
applications:
Gestures, micro interactions, animation, and sound are
significant factors that can provide great UX and delightful
users.

Gestures
Gestures are the new clicks. Gestures define touch
mechanism, what your fingers do on the screen and that is
resulting in a great feel for users.
Users encounter gestures in almost every application. It
would be a swipe, tap or pinch of function. These gestures
make users feel interested.
These are some of the most common user
gestures:
● Tap: Touch surface briefly.
● Double Tap: Touch surface with two quick contacts.
● Drag: Move along the surface without breaking contact.
● Pinch/spread: Touch surface with two fingers to move in
(pinch) or out (spread).
● Press: Touch surface and hold.
● Flick: Scrolls quickly.
● One thing to keep in mind when designing for

gestures is thumb placement – something that’s

known as the “thumb zone.” And while it’s not always
the case, most of us hold our phones with one hand
and use one thumb to navigate. The most common
actions happen with a thumb movement – that’s about
how much space you have to work with across the
device.

● Micro Interactions
● The magic of details what makes a great app different
from a good app. It is a user action that triggers
another action by the device. Using micro-
interactions, you can turn something boring and
lifeless into something fun and playful.

● Microinteractions consist of:

● Trigger: the start of micro-interaction, what action will
a user take when pressing a button that will trigger
feedback from the system.
● Rules: the way in which the interaction behaves, it
determines what happens.
● Feedback: how design communicates the micro-
interaction to the user. It informs people what is
happening.
● Loops: determine how long the micro-interaction goes
on if it repeats, and how it changes over time.

Motion
Motion is a cornerstone of material design. It can make an
app easy to understand and funny. It can guide users
through the important parts of the interface, hint what will
happen before an action is performed, alleviate long waits
and add a character that gives user moments of delight.
All these functions lead to a great UX.
Benefits of
Animation
Animation reduces cognitive load, prevents change
blindness and establish a better recall in spatial
relationships. But there is one more thing. Animation
brings user interface to life.

Ideally, in-app
animation should:
● Provide clear feedback in response to user’s actions.
● Provide system status to the user.
● Guide and teach the user how to interact with the
interface.
Visual
Feedback
Responsive interaction encourages deeper exploration of
an app by creating logical reactions to user input.in real
life, when using buttons and controls, we find a response
whether by sound or feeling. This is how we expect things
to work.

Buttons and
Controls:
Buttons and controls should appear tangible. Visual and
motion cues should input immediately and animate in
ways that look and feel like direct manipulation.
In essence, your motion cues should be displayed
immediately when the action is performed.
System
Status
Users don’t like surprises. They want to know what is
happening and that everything in under control. Animation
makes it easier to notify users with app’s process status.
A well-known animation for this group is “pull down to
refresh,” which initiates a process of content updates on
mobile devices.

Meaningful
Transitions
The animation is being used to explain changes to users
with meaningful transitions. Motion design can effectively
guide the user’s attention in ways that both inform and
delight.
Animation must be for a functional purpose. Don’t make
an animation for just animation. It will lead to a poor
design.

Connect
Transitions
Visually:
Create visual connections between transition states
through color and persistent elements. Transitioning
between two visual states should be clear, smooth, and
effortless.

Delightful
details
One of the most important factors about using animation is
a delight. By delighting users, they will have great UX and
will enjoy using your app. It can be used in all design
elements from detailed icons to key transitions and
actions.
Fun
Animations have the power to encourage users to actually
interact. They can bring empathy in user experience and
full of emotions.

The
demographi
cs of sound
Nowadays design is far more than how pretty or ‘cool’
something looks. It’s about how we interact with the
product, it’s about the usability, and it’s about how it
makes us feel. Sound can have a massive impact on how
user feel when using an app, so it’s vitally important to get
it right.
Sounds play a vital role in mobile UX. These can be some
of the most minuscule of sounds, mere milliseconds in
length, for example, a key click, background notification, or
subtle swipe transition sound. Each sound should be
crafted to perfection, and optimized for the medium and
context for which it is intended. Think
about Facebook and Twitter lading newsfeed sound.
It’s also important not to ‘over-design’, it’s about
recognizing that UI sound is a key part of the usability; it’s
not there to necessarily draw attention.

Brand sound
When it comes to designing a “brand sound”. Creating that
sound which has a certain amount of character and
emotion, a sound that could potentially be used in
marketing whilst forging a distinct recognition to your
product or brand – think of the Skype start-up sound, the
Samsung mobile ‘whistle’ notification tone, or even the
minimal Twitter app ‘droplet’ sound. This lands us in the
realm of ‘Audio Branding’, which is a huge topic in itself.
What I would say is that Audio Branding has moved on
from the simplistic notion of being solely about a catchy
jingle – Audio Branding is about having a detailed and
holistic approach to all things audio around your product or
brand, everything that makes a sound.
Sound as
part of the
Design
Process
Of course, we may all have our own opinion of what
constitutes good sound, but most people will agree when
they hear a bad UI sound. For example, a sound that
makes you unnecessarily jump, or needlessly distracts
you from an interaction. The characteristics and perceived
quality of sound will always be subjective (this is often
where you need to trust the expertise of a sound
designer), but the most important piece about sound
design is that it must have a clear purpose.
sound is a powerful tool, and when given its rightful place
in the design process can inspire the overall design,
strengthen your brand, and enhance usability and user
experience.
When we talk
about sound,
the first thing
comes to
your mind is
Notifications
Designing useful and relevant notifications for users is
extremely important. Irrelevant notifications ruin the user’s
experience. Notifications inform people when things
happen, such as a message has arrived, new data is
available for download or the status of something has
changed.
Also, notifications can be powerful tools for businesses to
communicate directly with users and deliver the right
message at the right time and place in order to promote
engagement.

What makes
a notification
good!
Good notifications are relevant, timely and contextual.
Always respect the user’s time and attention.

Relevant and Valuable

There is nothing more annoying than a sudden irrelevant
notification is viewing on your mobile. Some notifications
are not worth pulling user’s attention at a certain moment
like social network updates, or status updates where the
user doesn’t need to take an action or a routine action like
saving a document.
In contrast, a personalized relevant notification is always
helpful. Users appreciate it. Notifications should provide a
valuable service to the users, and only in that case the
user will perceive them as something deserving their
attention.
Netflix does a great job of personalizing their notifications.
They use push notifications to let users know when their
favorite shows are available.

Well-Timed
Only notify the users when having an important thing to
say at an appropriate time. The time the notification is
performed is as important as the content of the
notification. The timing has to be right for the user to
perform the action to manage the event that caused the
notification.
iOS vs
Android
What’s the
difference
when
designing
apps for
iOS or
Android?
We will discuss the design of the most important principles
you should keep in mind when designing apps for both
Android and iOS.

Status bar
The status bar is a global element on all operating
systems, it is the bar that appears at the top on almost
every app. It has a standard size and icons so you don’t
need to design a custom one.
On Android and iOS, the status bar indicates different
elements like the battery charge, network connection, and
clock.The main difference here is that Android can also
show icons for running apps. Places of elements also
differ.

Navigation
bar
Both operating systems have a navigation bar directly
below the status bar. It has a standard height. The
navigation bar contains navigation controls like filtering,
menu, search and “back” button only on iOS.
Also, this area is used to display the title of the app or a
specific app screen, e.g. “Facebook”, “Edit Profile”,
“Settings” etc. The main difference between the two OSs
is that on iOS that title is centered and on Android, it is
placed on the left.

Back button
It’s important to note that Android devices have a physical
back button used to go back to the previous screen. In
comparison, iPhone doesn’t have this button and it must
be included in the navigation bar.
Tab bar
This bar mostly appears in different places on the screen
depending on the operating system. For iOS, it is placed
at the bottom of the screen and has multiple tabs with
icons and text below, although this depends on the app.
Whereas Android places the tab bar below the navigation
bar, so it has three bars stacked on top of each other — the
top status bar, then the navigation bar, and the tab bar.
Android has a global navigation component with three
buttons that is placed at the bottom of the screen, with
buttons to go back, home and to show history. This menu
is shown on every screen across an app.

Cards, or
not?
Cards are becoming the primary UI pattern in digital
design. They allow users to consume quick bites of
content in a way that suits mobile behaviors. Cards fit with
Android’s material design. Using drop shadows and
reasonable gutters between cards will create a native look
and feel natural.
On iOS, the basic view is usually flatter. Even big apps like
Facebook and Instagram use cards that can’t be out of
tune with iOS guidelines. If you’re going with cards on iOS
be very gentle with any use of shadow, and try to keep
them as subtle as possible.

Typography
Default system fonts are San Francisco on iOS and
Roboto on Android. It’s essential to choose readable fonts
and as a general rule don’t use more than two fonts in
your interface, no matter the operating system. On both
OSs, typography should be readable, scannable and has
suitable whitespaces.

Buttons
Buttons share a similar structure on both Android and iOS.
The main difference is that Android has noticeable
shadows that create a feeling of depth, where on iOS,
everything is flat. Also on Android, button text is bold
uppercase, where on iOS it uses regular styling.

Tabs
Tabs enable users to switch a view of the screen without
the need to go back or load a new screen. Most tabs are
placed below the navigation bar and display multiple
selections.

Icons
Contextual icons enrich the user interface whether it’s
presented alone or with text. The most significant
difference is that icons on iOS have simplified thin outlined
style when inactive, and filled when active, whereas
Android has solid, thicker icons.

Pop-ups
A popup on iOS is extremely simplified and appears in a
rounded corner box with line-separated buttons. On
Android, popups use no visual box surrounding them.

App icon
App Icon is the one that appears on the home screen and
is unique for any app. App icon in IOS has to be inside a
flat rounded rectangle shape.
Android, on the other hand, gives you more freedom with
the shape and style of your app, but still requires a slight
shadow.
Android overlays have a solid color with a slight drop
shadow. iOS overlays have no drop shadow but have
slight transparency on the background.

Navigation
Menu
On Android, the navigation menu is designed as a sidebar
according to material design guidelines.
Whereas, the navigation menu on IOS is designed as a
tab bar placed at the bottom based on IOS guidelines.

Map
The map is almost the same on android and iOS. the
slight difference is that selected pin on Android is
displayed on the map but the pin details are displayed at
the bottom. Whereas on iOS pin and its details are
displayed on the map when clicking on it.
Form
The form is one of the most significant design elements on
web and mobile. It differs slightly on Android from iOS.
firstly talking about the button, the button on Android is
designed as a raised button. Whereas on iOS it’s
designed as a plain text link.
The second difference is the hidden menu. In Android, it’s
designed as a menu component but on iOS it ’s designed
as a table row that opens the picker with a list of items.

Filter
The filter is designed on Android as a menu component
based on material design guidelines. On the other hand,
the filter is designed on iOS as an action sheet.
UI Design
Do’s and
Don’ts
Formatting
Content
Create a layout that fits the screen of any device with
different OSs. Users should see content seamlessly
without zooming or scrolling horizontally.
Touch
Controls
Use UI elements that are designed for touch gestures in
order not to distract users when clicking on it.

Buttons
Create controls that measure at least 44x44 points so they
can be accurately tapped with a finger.

Text Size
For the minimalism of mobile screens, Text should be at
least 11 points to be clear at a typical viewing distance
without zooming.

Contrast
Make sure there is a contrast between the font color and
the background in order to make text clear.
Spacing
Increase line height or spacing for better legibility.

High
Resolution
Provide high-resolution images. Images that are not @2x
and @3x will appear blurry on the Retina display.

Distortion
Always display images at their intended aspect ratio to
avoid distortion.
Alignment
Align text, images, and buttons to show users how
information is related.