What are GRAPHICS?

A graphic is an image or
visual representation of an object.
Graphics help to inform, illustrate or entertain.
Negative/White Space
Negative space (also
known as white space)
is the empty area
around a (positive)
shape.
What is a brand identity?
Brand identity is the visible elements of the brand that helps in
identifying and distinguishing the brand in the user’s mind.
It is the combination of brand name, logo, brand voice, and brand associations that form a
brand’s personality.

What are the other elements that

help to build a brand identity?

●
●
Brand Name
Brand Logo & Tagline
Importance of Brand
●
●
Brand Typography Style
Colour Palette
Identity
● Imagery
1. Helps develop a suitable brand image
2. Differentiates the product from competitors
3. Creates consistency
4. Helps develop a brand personality
HE 21|DMD 2022
Brand Association
● Brand association is a symbol, idea, or image one thinks of when they
think of a particular brand.
● The consumer recalls or correlates both the brand and the
symbol /idea/image forming an association between them in their
mind.

Importance of Brand Association

● Helps customers recall a brand for the unique qualities it offers.
● Differentiates the brand from its competitors.
● Ensures customers of the quality it offers.
● Create a positive image of the brand/product.
● Be of great help while trying to launch a new product
under the same brand.

HE 21|DMD 2022
 What is a Storyboard?
Storyboard is a IMPORTANT step in which the script or the story is translated into visuals
before shooting a film. In fact, it is the first visual representation of the script.
A storyboard is a series of drawings based on the script, which will be used as a visual guide
throughout the rest of the process of filming
What does a Storyboard show us?

It shows us:
1. The SEQUENCE of scenes to tell the story.
2. ILLUSTRATIONS OR PICTURES representing each shot, with NOTES
about
what’s going on in the scene and what IS BEING SAID in the script during
that shot.

Think of it as sort of a comic book version of your script!!

Why do we make a storyboard?
Storyboard helps us in many ways -

● It is the best way to plan and share your vision

● Makes production much easier and saves time because one
can foresee mistake sin advance and make correction.
● Gives you a roadmap, a blueprint. It gives you a plan to follow
especially because in the process of making an animation film,
different teams work together to handle different parts of of the
process filmmaking.
Thus, the team that writes the story and draws the story may
no be the same as the cameraman who shoots the story
 Let's make a video!
Imagine this screen as a back screen of your video and
add the elements…..
The ocean
A wall
The sky
The road
What are the things you associate to these spaces?
Let's animate them!
Let’s understand the concepts
 What is Frame?
The frame is a single image in a sequence of pictures. In general,
one second of a video is comprised of 24 or 30 frames per
second also known as FPS.
Position
The movement of a character or object from point A to point B is
change in position
Scale
The change in size of an object or character
Distance
The interplay of change in position and scale shows the change
in distance of a character or object.
 What is a Key Frame?
Keyframes are the important frames which contain information
of a start/end point of an action.
A keyframe tells you about two things:
A keyframe tells you about two things:
1. It tells you what the action of your frame is at
a certain point of time,
2. It tells you what time that action occurs.
 How does the human eye see animation?

Persistence of Vision
Animation works by using an optical illusion. By presenting a sequence
of still images in quick enough succession, the viewer interprets
them as a continuous moving image.

Different types of animations.

1. Traditional 2. 2D 3. 3D Animation 4. Motion 5. Stop Motion
Animation Graphics
Animation 3D animation is also known Stop motion is like
as computer animation and Unlike other traditional animation,
Traditional it is currently the most animations, motion except instead of
animation can also 2D animation is vector- commonly used form of graphics are not drawing, one uses
be referred to as based animations that animation. driven by characters photography and
cell animation. This move single body parts at or storylines. This art captures real objects.
The process of 3D animation form focuses on the This can also be done
type of animation a time rather than is different from the ability to move with clay models,
requires the constantly redrawing the traditional style but they graphic elements, puppets, cut-outs
animator to draw characters. It gives more both require the artist to shapes, and text. This and a set that one
every single frame flexibility to beginners in share the same principles of process is commonly has to carefully
by hand to create movement and composition used for things like manipulate to
animation because they television promotions,
an animated don’t have to rely so
in animation. The animator
explainer videos, and
produce animation.
scene. digitally model a character, It’s like a
heavily on drawing skills. and the set and lets the animated logos. flipbook with photos!
computer fill in the rest.
 Make your own stop motion film!
Tetrahedron + 4 objects from your environment
bring them to life!
 Instructions
1. Form a group of 6-7people.

2. Write a story and plan your keyframes according to theme.

3. Prepare a set using cardboard sheets and other materials(as per the
requirement of the story)

4. Click a series of photos capturing your animated action.

3. Open Images on canva an add elements to your animated story.
Save and Download files.

4. Import images to Kapwing

UI/UX Design
 What is UI/UX Design?

User Interface User Experience

Design Design

UI UX

Mobile App Design AR/VR Design

Website Design
What is UI/UX Design?
UX Design

Research
Interface design

Analysis

Visual Styles

Wireframing
UI Design

Testing
UI and UX Design?
visual design typography

illustration icons

psychology design and user

research

wireframes and understanding the

prototyping problem

information content and strategy

architecture
Examples
 Now, what do you think UI/UX Design is?
UI/UX Design is creating functional and enjoyable experiences for digital
products by understanding and researching about the users.

UI/UX Design
UI/UX Design aims its users to complete tasks that they wish to accomplish.
How can we design to help users complete the intended tasks?

Yale School of Arts website

● performed a different tasks
● Reflected on our user experience

https://www.art.yale.edu
 User Flows in UI/UX Design

A diagram showing the path a user will take to complete a task.

An Oval denotes the start and

end of the user journey

A rectangle denotes a page on the screen in

the user journey

A diamond denotes a decision the user has

to take to complete the task
 Example:

Key

Start and End

Pages

Decision
Let us consider, I have to book a ticket on
MakeMyTrip from Delhi to Kolkata!

What are the steps that I will take?

Step 1 : Open MakeMyTrip
Step 2 : Typing in Details
Step 3 : Making a decision
Step 4 : Completing booking
Step 5 : Filling in the Traveller
Details
Step 6 : Payment Details
Step 6 : Payment Details
User Flow
 Analysing

Language Visual
Elements Interactions

Animation,
Feedback
Sound, Video
Language
Button Labels Tone
 Icons Colour
Visual
Elements
Typography
 Swipe Scroll
Interactions

Click
Animation,
Time Loading
Sound
 Input Output
Feedback

All the initial dimensions working in sync to make sure the goal is
met and the user is completing the task
All the five dimensions work together and
complement each other to create an
enjoyable and functional design