1. GRAPHIC
DESIGN & UI,
UX Course
intern at
F i r s t t w o w e e k
Sarankumar S

2. 2
S.NO TOPIC
1. Graphic Design
2. Color Theory
3. Typography
4. Layout
5. Logo Design & Branding
6. Design Trends
7. UI Design
8. UX Design
9. Design Process
10. Wireframes

4. 4
• Graphic design is the process of visual communication using typography, photography, iconography and illustration.
• The field is considered a subset of visual communication and communication design, but sometimes the term
"graphic design" is used synonymously.
• Graphic designers create and combine symbols, images and text to form visual representations of ideas and messages.
• According to me it’s a universal language.

5. 5
I think you know English If we don’t know Chinese

6. 6

7. 7
 The property of what we see when we interact with light and other objects
 color theory is a body of practical guidance to color mixing and the visual effects of a specific color
combination.
 In this topic, I learned about color combinations, color palette.

8. 8
Split Colors
Complementary colors
Analogous colors
Triadic colors
Analogous colors are groups of colors that are next
to one another on the color wheel.
Colors that are opposite each other on the color wheel are
considered to be complementary colors
combines one base color with the two colors directly
adjacent to its opposite or complementary color
A triadic color scheme uses three colors that are evenly spaced
around the color wheel.

9. 9
Tetradic
Monochromatic color
Square
Monochromatic color schemes are color schemes based on
only one color or tint.
The rectangle or tetradic color scheme uses four colors
arranged into two complementary pairs.
The square color scheme is similar to the rectangle, but with all
four colors spaced evenly around the color circle.

10. TYPORAPHY
10

11. 11
• The art and technique of arranging type to make
written language legible, readable, and appealing
when displayed.
• Content Visibility
• Spacing
• Font Pairing

12. 12
Content Visibility Spacing
Font Pairing

13. 13

14. 14
• The plan or design or arrangement of
something laid out
• It helps the reader to grasp the essence of the
design and focus on the main content.

15. 15

16. 16
 Because it grabs attention, makes a strong
first impression, is the foundation of your
brand identity, is memorable, separates you
from competition, fosters brand loyalty,
and is expected by your audience..

17. Emblems are just about the oldest form of logo.
people have been using them since at least
the middle ages, if not before.
17
Brand marks
Wordmark
Emblems
Monogram
Also known as a “logotypes,” logotypes are logos
which are built entirely of the word or words that
make up the company’s name
Decorative design made up of a combination of
one to three letters (traditionally three) to
create a single symbol
A pictorial mark (sometimes called brand mark or
logo symbol) is an icon—or graphic-based logo.

18. they simply mean that the product or service
is being represented through an abstract
symbol or icon.
18
Mascots
Abstract logo
Monogram
A mascot is different than the above pictures and
symbols in that it’s a drawing of a particular person
Combination of all the above logo types

19. 19

20. 20

21. 21
 Design trends are constantly changing. Being
able to keep up with and implement them is
an important
Current Design Trends
• Flat Design
• Detailed Cut-Out Images With Solid Light Background
• Custom Illustrations and Icons
• Unique Geometric Shapes

22. 22
Unique Geometric shapes
Cut-out Images with solid light
background
Flat Design
Custom Illustration & Icons

23. 23

24. 24

26. 26
• The “UI” in UI design stands for “user interface.”
The user interface is the graphical layout of an
application.
• It consists of the buttons users click on, the text they
read, the images, sliders, text entry fields, and all the
rest of the items the user interacts with.

27. 27

28. 28
• User experience (UX or UE) is a person's
emotions and attitudes about using a particular
product, system or service.
• It includes the practical, experiential, affective,
meaningful, and valuable aspects of human–
computer interaction and product ownership.

29. 29
• 5 Stages in the Design Thinking Process
1. Empathise - understanding of the problem
2. Define - analyse observations and synthesise
3. Ideate - explore all of the possible solutions
4. Prototype - process of creating wireframes
5. Test - often used to redefine one or more problems
and inform

30. 30

31. 31
• Wireframe, also known as a page schematic or
screen blueprint, is a visual guide that represents
the skeletal framework of a website / app.
• Wireframes are created for the purpose of arranging
elements to best accomplish a particular purpose.

32. 32
Wireframe link: saran coffee – Image 1.jpg (marvelapp.com)

33. 33

34. Any Questions?
34

35. Thank You
35