The Design Code Google Developer Student Club.pptx

This slide is the baby step of UI/UX design. Here you will learn how to research like a designer, how to draw like a designer.
The knowledge can be implemented in anywhere like logo, poster and many more.

2. <> Google Developer Student Clubs SAHA ADITYA KUSHAL ORION
UnherstyofinePeoie
CROSS PLATFORM DESIGNER

DESIGN CODE

WELCOME

3. < > Google Developer Student Clubs

THE DESIGN CODE

The Design Code highlights how color significantly impacts human emotions by influencing
psychological responses, thereby altering brand perception and value. By adhering to these
principles, designers ensure that their work not only appeals aesthetically but also aligns with
the desired emotional and brand outcomes, ultimately driving consumer engagement and
loyalty

NEXT =>

4. <> Google Developer Student Clubs

o eve
Features

Color Shapes Emotions

@ Color Alters Human Mood
© Color-Driven Human Decisions
© Brands' Color Strategies

Mastering Color & Mind

© Study Target Customer Before Design

© Implementing Color Psychology
© Color Theory

© COLOR

Color manipulates human to make
decisions based

© BRANDING

Popular Brands use color psychology to
attract their customers

© TARGET CUSTOMER

Every design should be design oriented
so that customers can related the
product with each other.

5. <> Google Developer Student Clubs

90% of Customers Evaluate Brands Based on Color

6. <> Google Developer Student Clubs

Color effects EEG reading & Heart Rates as well as Emotion
perception of objects

7. <> Google Developer Student Clubs

HUE

SATURATION

BRIGHTNESS

8. <> Google Developer Student Clubs

Brightness & Low Saturation Dimness & High Saturation

SOFT TONE STRONG TONE

9. < > Google Developer Student Clubs

University of the People

Clamness Activeness

il
Weaker Contrast and

Higher Contrast and
Weaker Saturation

Higher Saturation

10. Low Saturation Dimness & High Saturation

BABY PRODUCTS ENERGY PRODUCTS

11. <> Google Developer Student Clubs

Let's Design a Brand Logo / Website for a Insurance
Company.

12. < > Google Developer Student Clubs

University fo People

Y os € Se A

= POTTY seu, o >)

on.

Guns Metlife Äh pa a
> A — 4 Po ES
mo ber reavevens™ 5 @
allrisks austare

Feten a hetoria
ee aint cos Graco
cone FARMERS

13. <> Google Developer Student Clubs
Univeral of te Poop

Low Saturation & Weak Contrast
TRUST AND SAFETY

14. <> Google Developer Student Clubs

University ofthe People

Low Saturation & Weak Contrast MetLife

TRUST AND SAFETY

15. <> Google Developer Student Clubs

CASE STUDY

MetLife Bangladesh

Blue is often associated with trust, which is why MetLife
companies frequently use this color to assure their target
customers that their assets are secure and that the
company is dedicated to their protection.

WHITE BLUE

67% ) =)

MetLife Fixed Deposit

Protection Plan
(MFDPP) - Assurance

Brand
Insurance
Psychology

Trust

Color

White & Blue
Target Customer

Seniors (Medical)
Working professionals
Corporations

16. <> Google Developer Student Clubs

Let's get DEEPER to design code

17. <> Google Developer Student Clubs

University ofthe People

Prime RED Cadmium RED Brick RED Blood RED

RED effects in BREATHING patterns , Higher HEART rates, PULSES and
MUSCLE tension

18. New McFlurry®, made
love

Socoolgotonenamadatter he
‘he Gandia oy neat nd creamy win
{verte rot, An her a sweet in palin tha

¿FI 0/10: Max Verstappen

©), holds ontojextend
EmiliacROmagna run

Discover the World of
Red Bull

19. <> Google Developer Student Clubs

HUBSPOT

Hubspot ran a query in 2011 in
customers to find which color
is more effecting red or green

The other factor to contierie the overall color scheme of your page. I one color

ave a white background a bright color or even Black

ot

02

03

RED outperformed
GREEN by 21%

RED catched more
attention

Red attracted more
cause it stimulates our
brain

20. <> Google Developer Student Clubs

So As a Designer How We Choose Colors in our project?

21. <> Google Developer Student Clubs

High Saturation & High Contrast

STRONG TONE

22. <> Google Developer Student Clubs

Univorsiy ofthe People

Vibrant RED & GREEN

O1 Attention Seeking 03 if not applied properly

design will be a disaster

02 Loud 04 Stimulating pulse rates

23. < > Google Developer Student Clubs

University of the People

Low Saturation & Low Contrast

SOFTER TONE

24. Low RED & GREEN

O1 Relaxing For those who like soft
color touch
02 lighter Not eye catching but

relaxing

25. <> Google Developer Student Clubs

CULTURE

Culture plays a vital role in

design by influencing
aesthetics, symbolism, and
user preferences.

GENDER

Gender plays a vital role in
design by influencing
preferences, color choices,
and usability features.

BRAND

‘The brand plays a vital role in
design as it communicates
the core values, identity, and
promise of the brand to the
audience.

NEXT
STEPS

We have learned about the psychological impact of colors. Now, we
will focus on other essential factors to consider when designing a
product or website, such as gender, culture, brand message, and more.

26. <> Google Developer Student Clubs

Design on CULTURE

JAPAN USA BANGLADESH
WRATH & ANGER LOVE & LUST BLOOD

Same Color RED can be represented variously depending on the region.

27. < > Google Developer Student Clubs

University fo People

GENDER

FEMALE

Studies indicate that women generally prefer softer colors;
however, many also appreciate deeper colors like red. This
preference is often influenced by the individual's
personality and the context or occasion.

HARD

SOFT
94% ) oe)

Brand
Fashion

Psychology
Soft

Color
White & Sunlight

Model Name
Kim Ji-won

28. < > Google Developer Student Clubs

GENDER

FEMALE

Studies indicate that women generally prefer softer colors;
however, many also appreciate deeper colors like red. This
preference is often influenced by the individual's
personality and the context or occasion.

HARD

SOFT
89% ) m)

Brand
Fashion

Psychology
Loud RED

Color
White & Sunlight

Model Name
Kim Ji-won

29. <> Google Developer Student Clubs

University of to People

GENDER

MALE

Brand

Fashi
Studies indicate that women generally prefer softer colors; aan
however, many also appreciate deeper colors like red. This Psychology
preference is often influenced by the individual's, Soft
personality and the context or occasion.

Color

HARD

SOFT
) 0)

White & Sunlight

Model Name
Julien Couture

30. <> Google Developer Student Clubs

So As a Designer How We Fit colors in our project?

31. <> Google Developer Student Clubs

Color Theory

10%

Primary Color

The selection of primary colors is
guided by both the target customer
and the brand message to ensure
effective communication of the brand's
essence to its audience.

20%

Secondary Color
The purpose of secondary colors is to
accentuate specific sections of the
website, facilitating user navigation,
while also maintaining harmony with the
primary color scheme.

Color theory is a concept used in visual arts and design that explains
how colors interact with each other and how they can be combined to
create certain feelings, moods, and reactions.

10%

Supporting Color

Supporting colors serve as a bridge
between the primary and secondary
colors, aiding in highlighting text and
blending seamlessly with both the
primary and secondary color
combinations.

32. <> Google Developer Student Clubs

Pathao

ProperM

ing of Color.

Pathao is a Bangladeshi ride-sharing and
delivery platform offering convenient
transportation and logistics solutions. With
user-friendly app interface, Pathao has
become a popular choice for commuters
and businesses alike in Bangladesh

2) pathao

© Primary Color

White is chosen as the primary color to
ensure that users of all ages can
navigate the app effectively

© Secondary Color

It ensures that can effectively navigate
the app's functions. Red is preferred over
white to draw more attention to buttons,
making them easily visible.

© Supporting Color

The supporting color, black, is utilized in
text to ensure easy visibility over both
white and red backgrounds.

33. <> Google Developer Student Clubs

DESIGNING STRATEGY

Research Target
Audience

DESIGN
PROCESS

Find Proper colors

Design & Repeat

34. <> Google Developer Student Clubs SAHA ADITYA KUSHAL ORION

‘CROSS PLATFORM DESIGNER