Projektowanie animacji i interakcji
Od statycznego projektu do „ruchomego” produktu.
Cześć!
Nazywam się Agata Malec-Sromek
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3098325/twitterbird_RGB.png)
Ruch
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095302/tumblr_n5vu1a1hFC1rmix2wo1_500.gif)
Animacje
Pomagają w budowaniu interakcji, prowadzą użytkownika przez stronę,
„podpowiadają”
Mają służyć zwróceniu uwagi, zaciekawić, opowiedzieć historię
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095307/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095308/pasted-from-clipboard.png)
Kiedy to wszystko się zaczęło?
projektowanie stron internetowych
=
możliwości + moda
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3100136/an_appicon_192.png)
Macromedia 1996 -2005
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3100143/macromedia.png)
Adobe Animate 2015
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095634/HTML5_Logo_512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095635/css3-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095658/js.png)
Możliwości
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095692/clickme.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095699/explosion_s_cursorom.gif)
Kiedyś
Teraz
Trendy (moda) w projektowaniu
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095389/wark.png)
Material design & Material motion
Material design & Material motion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3098498/5c8ef668081938dfa0d05fd37a8ea488.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095385/cat.png)
RWD
SVG
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095471/svg.png)
Longpage - tzw. story telling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095494/bunny.png)
One page
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095509/one-page.png)
Zwinięte menu
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095528/menuoff.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095529/menuon.png)
Animowane ikony
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095549/jwt-icon-set.gif)
Animacje i filmy w tle
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095559/tla.png)
Jeszcze raz, polski przykład
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095569/plexample.png)
Dlaczego animuję?
Bo mogę.
Jak zachować umiar, kiedy nie przesadzić?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095593/lings-cars-.gif)
AAAAAAAA.....
Kiedy ktoś się starał i nie wyszło
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095607/intercity.png)
tutaj też coś nie tak
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095620/tlo.png)
Kto w zespole projektowym odpowiada za animację?
UX
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095798/right-arrow-png-18.png)
Grafik
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095798/right-arrow-png-18.png)
Programista
makieta
projekt
kod
UX
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095798/right-arrow-png-18.png)
Grafik
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095798/right-arrow-png-18.png)
Programista
makieta
projekt
kod
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095809/Kcjg7Rgpi.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095809/Kcjg7Rgpi.png)
UX
Grafik
Programista
makieta
projekt
kod
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095812/8czrjAbji.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095818/arrow_13.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3095826/3.png)
O czym powinni wiedzieć projektanci?
grid.
ograniczenie palety barw.
wektory.
myśl o wersji responsywnej.
jak mają się zachowywać poszczególne elementy?
dostępność.
Animacja w CSS
czy w JavaScript?
Czy animacja zrobiona w CSS ma wpływ na przeglądarkę?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3099967/heros.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3099991/herotask2.png)
CSS bez
animacji
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3099969/herostasks.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3099979/hero2.png)
CSS +
animacja
A jaki wpływ ma WebGL?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3100006/webgl.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3100008/webgltasks.png)
WebGL
a canvas?
canvas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3100070/canvas.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/590109/images/3100073/canvastasks.png)
Kiedy szeptasz, słuchacz podświadomie zwraca większą uwagę na to co mówisz.
Niech Twoje animacje będą delikatne, subtelne wtedy użytkownik też zwróci na nie uwagę.
Dziękuję ;)
Animacje
By Agata Malec
Animacje
TIPI UX
- 602