all right hello everyone I'm Luis so as you can tell from the accent I'm from
France and after graduating in from in France at Gobelins school I went here I
worked at mediamonks for a few years and then I moved to LA because I decided I
needed more Sun so I walk at Watson DG for the entertainment industry for a
few years and it was very very nice and then I moved back to France last year to
switch to freelance to focus on side projects and graphic experimentations
and now I work at makemepulse in Paris and it's very very nice
so what do I do I do mostly interactive in experiences focusing on storytelling
I like of course motion design and animating and most of it I like to have
fun on walking so you can have a glimpse of what I do my most recent project is
the one idea that magnetars the wishes we did was so much fun working on this
and as you can see I like playful layouts colorful designs and creative
things we can summarize by doing by saying that I live I like moving stuff
and today's topic it's gonna be my first talk so I'm gonna do my best to so you
guys leave this place with something useful what is fun and today's topic is
how to build meaningful animations and oh it can add important informations
because most people design websites only focusing on grids and UX and
interaction and copy but animation is a great great tool when you want to convey
informations personality and some some more many more things so this part is
going to be at what can bring on the table with animation first
we can add meaning so you can add some meaning to your brand build your design
on some strong system you can add personality you can add some extra
flavor to your own experience and lastly it can be enough some guidance and act
as a uux element and let the user feel good in your experience first a
statement is that animation does influence you and illustrate my point I
created a few quick examples so this button is a very bland button you can
find on most websites nowadays and it's so bland that it doesn't give away
anything it doesn't give away any emotions any message and what you could
see in most websites as a rollover it's that the animation has the same mechanic
it doesn't give away any message it only acts as a visual feedback when the user
interacts and what let's do an experiment what do you feel while
looking at this one now so it's the same button but the animation is very
different and this one in your opinion what could it be useful maybe it could
it could be used for a tech company a sci-fi movie a futuristic video game and
it feels serious tacky and again the same button another animation what do
you think while looking at this one this one looks very friendly fluffy and this
one could be used for like candy so a platform video game and animated movie
and when you look at them side by side it's actually the same button but they
feel so much very very different the first one uses strong he's out and it's
very sharp when he looks tacky the other one is very bouncy it's very smooth and
it's friendly like a dog and that's it for now so those examples of
boss over at the top and it's a bit too much so you shouldn't use those buttons
as a main element in your website but you should use it for the most important
buttons like by button on a project page or keep me updated button on a teasing
page for following product and in that way you can build yaki and this one is
the main element and the other buttons are just following the same principle in
a simpler way so next part is going to be about animation consistency and today
designers tends to know more and more about animation tools and maybe five
years ago we seem way more animation on the web because technology allows it was
and it's very cool because I like animated stuff as you know and it's very
cool to look at and I really like those it's example I took it's I didn't do
those and it's nice but on the other and it creates something I call smoothies
websites and it's a project where the production team the developers and the
designers it was so excited to do an amazing website that they tried to stuff
in every animation they could find on the web even if it wasn't really fitting
in the project and yeah your message is not as strong when you do this and it's
misleading for the user so it's not always the best option I'm going to show
you I approach it on one of my project and this project is for Coco the movie I
did it two years ago at Watson DG and Pixar wanted us to design an exponential
website for the release of the this movie and this movie is very cheerful
very playful and it takes place in Mexico and it's anchored in a very
traditional background in universe of Mexico and what I try to keep in mind
while designing this project is the cheerfulness the playfulness and the
Mexican thing around it and so let's look at first look and feel of what it
looks like when animated
here's the general atmosphere but if we want to look at more a closer look to
the elements it's easier when it's is elated so if we go from the top left to
the bottom right the first scroll down UI element is inspired by the skeleton
backbone because you have a lot of dead people in the movie but they are very
cool and following that you have the drag cursor which is a skull because
again dead people and here while the page is loading you have confetti is the
loading time is very important because the user has to wait while you load this
amazing experience and so you I did a reference to the pixel animation with
the lamp I relight and from the music you just listen to I designed this Sun
on and off button which is my favorite element on the website because they
looked like they are dancing to the music and yeah I like those tiny details
so of course this project is not perfect but within the time frame we had it was
very interesting and I try to keep in mind the main goal of the website which
is creating a unique experience with personality and embedding the movie
ambience in it following this I'm gonna showcase my
portfolio animation system I built last year I redid my portfolio and I wanted
to focus on a very minimalistic layout with on without tons of feature
interactions or options and without a clustered layout so I wanted to focus on
a very simple layout which takes live when you interact with it and first
thing first I was like ok I need to find a concept and I thought maybe the best
thing is to find a simple concept which can embed everything you think about and
the simpler your concept is the easier it's going to be for you to build them
upon it a strong system so I thought of Hawaii
we work and I work with a lot of iterations and I like to play with
different styles and I also like fun stuff so I took that mine and I somehow
came with a concept that represents this which is three and it represents
stacking things and trying different things and having different options and
it may sound weird but it's what I went for
and from that concept I tried applying it to titles to images to page
transitions and the first try is this one which is applied to the title of my
projects so as you can see when the title is animating in and out some
random letters are picked and they are stacked and they animate three time
instead of one which create this cool effect I light and once you have just
this first draft you need to take a big breath and just go for it and just apply
it to your project and then that's how I started designing my portfolio based on
this concept of three and stacking things and as you can see I applied it
on the loader and the project images and you roll down I also added some textured
on the project because walking at what Sun digi we work from the movie industry
and they walk a lot with texture and it adds so much flavor and richness to it
so I tried to add this as well to represent me and again is very hard to
look at like this so maybe if we is a light element it's easier and adding on
top of the number three concept I wanted to add some unexpected and subtle
animation details so maybe on the project list rollover I was inspired by
the camera when it's shooting the cursor on the top left corner is a when the
page is loading is presenting the same animation and arrow is just yeah because
it's very cute so of course nobody is perfect and I
fell for a trap and on the rollover I used this very
trendy WebGL displacement animation and it's not I tried to build the animation
system but this is a flaw and it doesn't belong here but it was cool so I just
put it in so what did I learn from it is that building my portfolio my walk was
speaking for myself and I didn't need to do some very complex layout and
animation that the layout should be clean and it's only when you interact
with elements that you should trigger animation and add a new layer of
information otherwise should be very simple and have fun and most importantly
to be kind with your developer and not driving crazy with weird easing next
part is about animation principle that makes sense me at least and I came up
with a few of those rules helped me design and I use them whenever they feel
relevant so the first one is called a very random bath and this one is more on
the unique side and this one is used for instance on the scrollable pages or
slideshow slideshow elements and very often you don't see how you don't notice
you have to scroll down so you need to right scroll down or head there there is
a more content for you to see but you can solve this problem just with
animation without necessarily writing it so for instance this one you scroll down
and when you scroll down you actually show to the users that there is more
content for instance if you animate this India in the opposite way meaning from
the right to the left the user won't see that there is more content here it is
very simple but intuitively knows that there are more things to see if it
drives to the left next one is that I just need 10 frames so this one I stole
it from traditional animation and this one is a very simple role which is if
it's fast enough your brain is going to do the magic so here I'm shaping
triangle into a circle into a polygon and etc and instead of really shaping
morphing the the shapes making one disappear and the other one appear and
it's so fast that your brain is just making it happen
and you can use this for a lot of elements when you don't have a much time
because you don't want a page to load for like five seconds so you can use
trick like this to still have some very interesting animations without taking
five seconds the next one is the follow me and it speak for itself this one is
more on the eye aesthetic looks but I really like finding simple rules that I
can apply on UI elements and yeah you have the line dragging a title and it's
very again you can animate in elements very fast but you can add some richness
to it by adding After Effects and a bounce effect on the title and on the
icon it also works for horizontal compositions and here you have the ones
two pages load you can just drag the page and all the elements are following
the same motion and I'm only gonna show you those two today but the important
thing you should remember is that you should come up with your own rules and
use them like in your toolkit and use them similarly to typographic rules with
systems and Yaqui and use them whenever they feel like they should belong to in
your project Oh a few words before I leave you in better hands with active
theory inspiration is everywhere and I try not to only use dribble and dance
even though I use them every day and I really like them I try to open my mind
and look at different sources of inspirations so for instance my main
inspirations are Swiss print design video games animated movies and fashion
design and you can get so much from it you don't even know and it's very
inspiring thank you
awesome job thank you so much Louie