welcome students to the online n p t e l course
visual communication design for digital media
and ah we have covered ah all the lectures
this is the last lectures and before that
we were discussing about the visual communication
design ah methodologies in digital media we
dis discussed the generic design methodology
and we also discussed about the web design
and animation and graphic design ah methodologies
so here we will ah in the last lecture we
will take some cases of a web design and animation
because graphic design is already ah demonstration
demonstrated with the ah different design
principles because graphic design is the first
stage and we have the only two d ah two dimensional
image and ah image file so its the lot of
examples has been already given with the ah
when we are discussing the theories and also
when ah we are discussing the methodologies
so uh and it has the least level of complexity
but in terms of animation and web design there
are other ah layers of complexity for animation
we have to there is a timeline so each and
every frames are moving on time and for web
design also the information architecture and
ah using ah usability of that comes as an
added ah element added factor in the ah discussion
so here in this last ah module which is ah
we will just take some case studies take some
cases and discuss some web ah websites and
how they work and also some animations so
in web ah web design so we have ah two factors
in the web design one is the aesthetics we
have we were discussing about the aesthetics
and how ah what should be the style and what
kind of look and feel it gives so in that
we also discussed in the previous ah lectures
we discussed about ah about the contemporary
visual styles and what kind of typography
and what is the meaning and what kind of ah
visual ah attributes it has so those things
will come as a as aesthetic part of the communication
so and also we have the usability part of
the visual communication so visual is not
just a poster not just in graphics it also
has a usability ah to attach with it it has
to communicate with the u ah user
so usability part and aesthetic part together
makes a website and makes any design ah ah
more more comprehensible and more user friendly
and more ah ah it depends on the success ah
depends on the usability and aesthetic both
the aspect of the ah design so here in this
photograph you can see this is taken from
steve krugs dont make me think so here in
this image you can see the people ah how people
perceive and so its talking about the usability
part of it and ah in this image you can see
there ah are a lot of ah divisions in the
in terms of visual framing so here in the
sidebar there are some informations in the
body ah body of the ah ah website there are
some ah image so people perceive in a different
form ah so what he is saying what designers
might perceive ah not so successful design
might be so ah people start reading ah designers
might think that people will read everything
but in terms of the reality what you users
only see is like they glance through the website
and only the major attractive part will be
visible so that was also we were discussing
this in gutenbergs principle and all these
ah theories ah apply when we are read so that
you have to apply and you have to also think
that ah you have to also consider that people
the user will only have some few time to glance
through the website and they will they have
to interpret the website the meaning of the
website and what our website ah the website
of the content wants to convey within a very
ah few time frame because ah most of the if
they are attracted towards the website and
if they find out that the website will convey
something meaningful to them then they will
start devoting more time into the website
and start reading ah the next ah hierarchy
of the ah content
so here the principles of hierarchy in terms
of in typography we were also designed discussing
about the hierarchy and how to achieve hierarchy
through typography as well as through the
design those principles you have to apply
so here also in this example you can see there
are different hierarchy of the ah ah text
texts and as well as the images and hierarchy
can be achieved with contrast hierarchy can
be achieved with different kind of tituses
so in the semiotics and visual perception
ah lecture module also we discuss this so
based on the hierarchy ah ah users perception
users what users see depends so here in this
example ah what in steve krug dont make me
think ah its also taken from that book so
its for purchasing a ticket what users see
is just they look at the logo and try to find
out what information they are looking they
want to see ah
so what for purchasing a ticket they might
want to see ah there where they can put their
initial ah initial starting point and destination
locations and what is the price and all these
major points they want to see other ah informations
they might overlook and here also it depends
on the scenario so in different scenario they
were ah their expectations will be different
in for example in the scenario this this in
two photographs considers two different scenarios
one is i want to buy a ticket for that people
will be ah the user would be preconceived
with a have a preconceived mental model of
perceiving some kind of some particular informations
for example date of journey ah and price of
the ticket what are the different available
mode of a transports are there so they want
to see only that then if the scenario two
talks about how do i check my frequent flyer
flyer miles means there ah ah then their perception
of the mental model or the ex expectations
will be different they dont want to look at
where will be the ah starting and end point
of the journey and what are the different
ah mode of transport they will expect some
different things and what kind of already
what is their travel history and what kind
of free minds they already have for that their
information they will follow a different ah
path on the information architecture they
will go to the different tabs
so for that they even will look at some informations
which are different and ah so that because
so all these things depends on the scenario
and the peoples what users want to see so
those things we ah as we have already discussed
we have to follow ah ah those same principles
now let us check two websites one is the one
is a ecommerce website where this there is
a usability part is really high and a lot
of informations and let us discuss what we
have already ah studied in the module and
how it applies so we will check one ecommerce
website and one ah ticket booking flight booking
website we will check and we will discuss
the usability in terms of typography we ah
usability in terms of the principles like
gutenbergs principle other principles how
do how are they following so we will select
we will check flipkarts ah e commerce website
and ah clear trips ah flight booking website
in the and we will discuss that
so here this is the flipkarts website we can
see the good gutenbergs principle is clearly
followed over here so on the left ah top corner
the ah flipkarts um logo is there and all
the informations are there in the ah top part
so electronics appliances and all the major
segments are ah ah written over there and
if we click on the major say segment on our
each and on segment and if we go to a particular
product on the top left corner the products
picture is there which is the very important
informations and if we scroll down on the
right hand ah top right corner and the bottom
right corner we see the other ah ah important
informations which is also quite important
for the ah users right
now let us check another e commerce website
which is ah snap deal and how they have designed
their ah website ah whether they are following
the ah principles and design principles or
not so here let us see the snap deal same
ah similarly the logo appears on the ah top
corner and even the search ah button is very
important ah thing for the e commerce website
because they are people already have something
on their mind so search button is again ah
very important so its there on the top right
left corner and on the top right corner there
is you can see the sign in and card options
so thats also some important ah option but
which is lesser than the ah previous one and
even you might have noticed that the ah on
the right to on the fourth quadrant there
is a ah purchase button which is also a very
important informations so which comes on the
fourth quadrant
let us check then then ah ah flight booking
website here you can see on the left corner
there is a logo ah appearing there and all
the informations are there in the second and
the third quadrant and search flight button
you can see its appearing on the fourth quadrant
which is one of the most important ah thing
and which ah happens after that so all the
process if you look at the process starts
from the first quadrant and ends at the fourth
quadrant and all the informations are there
on the second and ah third quadrant here also
if you are launched to the main ah search
page so you can see in the worst ah clear
trips website its all divided ah in the fourth
quadrant the function starts from the first
quadrant and ends at the fourth quadrant now
after discussing the fear flipkart and ah
clear trips website which was really functional
and the usability part was really high we
can check some websites where there are ah
aesthetic style and um has given have been
given more emphasis
so for example i came across one ah project
by national geography so they have depicted
the the journey of some bears so this was
a promotional video and awareness to spread
the awareness ah about the wildlife so they
have attached some ah camera attached a few
cameras on few ah bears on some particular
location and they ah recorded their their
point of how they perceive and where what
they do ah as an awareness generation program
so so the content of the website was absolutely
very different and when people will check
these websites their mindset been different
will be different they wont be in hurry for
if somebody is booking a flight and booking
and or purchasing something from e commerce
website their mindset will be different and
some people who is looking at national geographies
ah what ah bears and ah searching about bears
and other ah animals their mindset will be
different they mostly wont be in a hurry and
they want to enjoy the ah website the their
information ah the the interaction with the
ah website and the user is more important
so here a lot of ramified and ah u i transitions
are added in the website and the the complete
website is a process of storytelling and its
the process of narrating so here ah when we
look at the website we can see there are a
lot of ah visual elements are added a lot
of as emphasis has been given on the aesthetic
for example why while the page loads ah bear
walks and then the page loads
so it takes a lot of time it might be the
file might be heavy so it might not open as
ah quickly as the ah two websites we which
we discussed earlier so ah here some functionality
has been ah ah and the aesthetic is optimized
here based on the users need so ah here we
can and also some painted image it is also
there and the videos of which has been taken
from the camera attached with the bear is
also there so it takes a lot of time and people
will spend a lot of time with the ah and the
the developers and users want people to stay
lot of time spend much more time with the
website and so here in this website their
ah intention was different and in the previous
two websites we have ah discussed that the
users the designers want the users to do their
job very quickly
so you as quickly ah users can purchase a
flight or ah can purchase purchase are some
goods from e commerce site the better functionality
is there but in these cases most more the
time user spend with the website and interact
with the gamified and um with interesting
u i transitions the more ah successful the
website is so the intention of the website
are absolutely different so let us check the
website so here the website you can see lot
of a gamified ah user interface is there and
the way it is of the u i transitions are happening
is more interactive
yellow stone has been compared to serengeti
at africa putting cameras on bears
so here we can see a lot of a superimposition
of videos ah so the website what it talks
about it talks about ah bears eye view of
ah of of and which is done by a national geographic
channel so unlike the previous website which
we were discussing for e commerce websites
and flight booking websites ah the user group
who will check these ah these kind of websites
the ah the which is done by the national geographic
channel their mindset will be different and
they will have much more time to ah invest
on the website
so the in intention of the website to is to
grab user ah users attention ah on the website
so that they spend more time on it unlikely
ah on the previous other websites for example
e commerce website and the ah flight booking
website so the process ah the task has to
be followed as quickly as possible so here
for ah attracting peoples attention there
are a lot of gamified user ah interactions
which is there
so a lot of visual ah um so visuals has a
lot of attraction values and and you can see
a lot of u u i transitions different kind
of u i transitions are happening the websites
might might be a little heavy than the previous
one ah and ah for this a transitions difficult
coding is required so after discussing these
after discussing and checking ah ah and discussing
the web applications lets move on to the animation
and discuss some of the animation some of
the animations done by our famous animators
so and mostly as we were discussing we were
focusing on the two d animation as three d
animation has a lot of other added ah um extra
domain domains and extra factors or into this
for ah for example generating three d models
and the software heavy implications are there
in the three d animation so we are concentrating
throughout this course on the two d animation
so some of the famous two d animations are
here so one is father and daughter which got
academy award in ah ah short animated short
films and then there are alexander petrovs
work are very interesting
so alexander petrov has done many ah animated
movies so one is the old man on the sea which
is based on ah ernest hemingways ah novel
so this animation ah if we see it is also
the same process in the further father and
daughter so each and every frame ah is painted
with ah ah painted by the um ah artist so
in father and daughter they have used the
color of ah the the quality of the visual
quality of um water color effect so they go
they have gone with the monochromatic watercolor
effect of the ah ah watercolor effect and
which also goes with the story and story and
each and every the characters face are not
clearly delineated and which also ah talks
about the father and daughter eternal relationship
so if we ah depict a particular fake face
then give more detailing into the face and
then the the character father and daughter
becomes a particular man and a particular
girl but if we ah if in this animation if
if you check these animations this is available
in on online so ah this intricate and less
ah the characters were less intricate ah ah
the features were less (Refer Time: 19:00)
so ah people ah more user can associate themselves
with the ah features because its more abstract
and facial features are less delineated and
less detailed and thats why it becomes a story
of an eternal ah father and daughter relationship
so ah while selecting the style while selecting
the particular um ah ah thinking about the
color palette thinking about the what kind
of design principles and elements will pick
we have to think about the storyline and what
kind of visual will go with this and whether
we have to be of ah each and every frames
have to be very detailed or not that is a
concerns that has to be decided by the designers
based on the storyline and based on the what
kind of communication we want ah
on the other hand if you think that father
and daughter father and daughters visual frame
and the old man on the seas visual frame old
man and the sea is much more detailed the
works of the ah the characters and the facial
features of the characters are much more ah
detailed and here on the other as compared
to the father and daughter where the features
were more abstract and obscure
so in father and daughter so the same process
each and every frames were ah created and
in ah old man and the sea each and every frame
circulated and ah sketch sketches for the
character sketches for the ah background is
also created but the particular ah style which
varies here and ah with the father and daughter
based on the storyline in the old man and
the sea lot of a visual effect has to be given
because of the writing of ernest hemingways
um writing which demands a lot of visual detaining
so um here alexander petrov have selected
a very detailed painting so each and every
frame is properly detail and each and every
features and background is um properly ah
detailed another example is of translating
a paradigm shift of two d painting to animation
is animated movie on vincent van goghs life
so in this also ah each and every frame is
painted and the animated movie is ah generated
by ah changing the frame in a particular in
a very frequent ah frequently changing the
frame
so here while selecting the particular ah
art style here its talking about van gogh
is and van gogh is one of the famous painter
of ah impressionist movement so impressionist
style ah is selected over here impressionism
is a part of a modern ah contemporary modern
ah art movement where this ah you can look
at the impressionist style of van gogh's starry
night where it this ah photorealistic it doesnt
have a photorealistic quality but it um its
like glittering and its a lot of ah colors
juxtaposed and patches impressions ah pattern
ah color color patches were create they are
there to create an impression of the ah picture
or impression of the landscape or impression
of the portrait painting so here impression
as van gogh was the impressionist painter
so while discussing ah while making our movie
animated movie on van gogh impressionist style
of painting has been created and here you
can see each and every frame is painted here
in this photo photograph you can see each
and every image each and every ah scenes are
painted with impressionistic style of painting
here you can see a picture ah picture which
is also a frame of the animated movies painted
by an artist so you have ah so each and every
frame is ah has a particular so in here we
can see a paradigm shift of all impression
is painting into a digital animated movie
also there is ah ben hibbons ah animated work
the process of animated work over here is
little different ben hibbon works with ah
two dimensional digitally generated images
also ah ah unlike the previous examples the
first key frames are not hand painted so they
are digitally generated but they can have
different ah artistic look so one example
was the harry porters deathly hallows ah the
story of three brothers and this is also designed
by ben hibbons and the some other examples
of ben hibbons animation is also given over
here so here this is ah completely digitally
generated even we also discuss the animated
movie ah paperman where it looks like and
hand painted ah image which is ah done by
disney but it also mimics the style of disneys
old hand painted image but its generated by
a complete three d animation
so first they have done some ah analysis on
the what kind of ah ah visual style they want
to have then they have developed some three
d models which ah which is easy to animate
and the that process of three d animations
is much fluent and ah can can be a digitally
trick later so if you paint one frame its
changing the frame is very difficult in terms
of digital ah modelling or without three d
animations you can change the model change
the ah set up and change the characters movement
very easily thats why they have followed a
three d ah animation technique but had a had
an impact of two dimensional animation style
so that also we have discussed earlier so
in ben hubbons this particular example of
harry potter porters animation so again the
ah backdrop scenarios and the ah said fittings
and the key frames were designed first and
also ah the characters were designed and then
after that they have they are superimposed
and then they have ah the designers have changed
the background and have a particular visual
style which goes with the ah which has been
previously selected
so this is it and we have discussed about
some with the example of some web web designs
and some any animation in the case studies
so hope you have enjoyed the course and
thank you
