TRENDY 2013-2014 Animacja / Interakcja

Marek Kasperski, ThinkLab

PRZYGOTOWANIA TRENDY 2013-2014. Animacja / Interakcja

html5-showcase.com

840 designmodo.com

500+ cssawards.net

420

awwwards.com

150+ csswinner.com

100+ thefwa.com

100+

cssdesignawards.com

100+ 2 210+

http://www.thinklab.pl/

100+

PODSTAWY TEORETYCZNE TRENDY 2013-2014. Animacja / Interakcja

Czas odpowiedzi…

• poniżej 2 sekund – pożądany, sytuacja naturalna

• 2-4 s, utrudniający pracę w przypadku czynności wymagających skupienia

• 4+ sekundy – sprzyjający powstawaniu frustracji

• 15+ sekund – uniemożliwiający płynną pracę

Generalnie: czasy ładowania stron WWW do 7 sekund dopuszczalne; w okolicach 10 sekund pojawia się rozproszenie i zdenerwowanie użytkownika.

• Rozwiązania: • Progress bar (pasek postępu)

• Asynchronous progress indicator to wskaźnik postępu pracujący w tle, najczęściej przypominający kształtem jakiś kręciołek

Po pierwsze: Funkcjonalność

Po drugie: Interakcja ma być przyjemna/zabawna*

http://www.alessioatzeni.com/blog/mac-os-x-lion-with-css3/

* Ale nie kosztem Funkcjonalności

ARTYKUŁ: http://azumbrunnen.me/blog/gangnam-design-vs-lasting-design/

http://dangelicoguitars.com

http://wildbluetech.com

http://daftpunk.themaninblue.com

ŁADOWNIE STRON TRENDY 2013-2014. Animacja / Interakcja

http://www.pipoldesenzano.com/en/

http://www.talentgarden.it/en/#!/home

http://portraits.aol.com

http://www.10ways.eu

http://1minus1.com/develop

http://yosoygil.com

http://www.swis.nl

http://www.google.com/insidesearch/howsearchworks/thestory/

http://sanchezromerocarvajal.com

http://marcorosella.com

http://tour.kathart.dk

http://adayinbigdata.com

http://www.boffard.com/#/home

http://lifestylefederation.com

http://www.athenos.com

http://www.kiubi.com

-

http://futureofcarsharing.com

http://www.freeger.com/projects/contextad/

http://hotdot.pro/en/

http://boy-coy.com/#home

http://enjoy-aiia.com

http://smartphood.it/index-en.html

http://www.agi-architects.com/#home

http://www.toyota.com/camryeffect/

MENU I LOGO Animacja i interakcja

http://jacobjoins.com

http://www.unheap.com/section/user-interface/

http://www.awakenings.nl

http://engageinteractive.co.uk/blog/the-big-move...-leeds-here-we-come

http://www.wise-digital.com

http://www.mustasj.no

http://thecreativeinstitute.ie/public-speaking-team-development-about-us

SLIDER TRENDY 2013-2014. Animacja / Interakcja

http://www.sequence.co.uk/case-studies/the-muppets

http://sosweetcreative.com

http://www.3magine.com

http://www.phive.org/#idmodalidade=5

http://uk.rimmellondon.com

http://www.comicsetc.com.au

http://www.parc-amazonien-guyane.fr/territoires-a-decouvrir/les-sentiers-de-saul/

WYSZUKIWARKA TRENDY 2013-2014. Animacja / Interakcja

http://wob.io/#/

http://qpoit.com/marcofolio_demo/apple_search/

DYMKI (TOOLTIPS) TRENDY 2013-2014. Animacja / Interakcja

http://projects.nickstakenburg.com/tipped

FILTROWANIE TRENDY 2013-2014. Animacja / Interakcja

http://standingby.co

http://teefouad.com/themes/truestory/portfolio-classic-4-w-filter.html

http://www.castirondesign.com/work/

http://www.bigr.it

http://felixplus.com/demo/mediastar/html/skins/light/blog-v1.html

ZDJĘCIA TRENDY 2013-2014. Animacja / Interakcja

http://www.brooklyngin.com/cocktails/

http://steeleimage.com

http://www.byhook.com/work

http://www.usatoday.com

http://lainvencionconcreta.org/en/tour/222/

http://www.vancleefarpels.com/ww/en/

http://escapeflight.com

http://coffeesurfing.illy.com/wps/wcm/connect/cs_en/home#/home/

http://jackietrananh.com

http://aarkcollective.com/products

http://tympanus.net/Tutorials/CaptionHoverEffects/

http://www.liftinteractive.com

http://www.amazon.com/dp/0756655307/

http://www.uzik.com/LouvreIslamicArts/

-

http://weareeli.dk

http://www.usatoday.com/big-page/

INFORGRAFIKI TRENDY 2013-2014. Animacja / Interakcja

http://www.snowbird.com/mountain-report/

http://sergiopedercini.com

http://www.anniwang.com

http://www.rateus.com.au

http://vasonanetworks.com/#/home

-

http://www.evoenergy.co.uk/uk-energy-guide/

http://www.jana-water.com/en/about-jana

http://creative9.com

http://graphicnovel-hybrid4.peugeot.com/start.html

WIZUALIZACJA DANYCH TRENDY 2013-2014. Animacja / Interakcja

http://www.wired.co.uk/mind/#/

-

http://cinema-series.orange.fr/evenement/universeries/en/

http://www.officialwaynerooney.com/profile

http://sonicomit.com

http://www.loisjeans.com/web2012/es

http://sidigital.co/team

http://digitalbakery.org/#points

http://thespace.org/items/s00007p8

http://vlog.it

http://tweetping.net

http://aworldoftweets.frogdesign.com/

http://austinmusicmap.com

http://libd.org

http://www.music-map.com

http://9elements.com/io/projects/html5/canvas/

http://evolutionofweb.appspot.com

http://fff.cmiscm.com/#!/main

STRONY TRENDY 2013-2014. Animacja / Interakcja

http://intothearctic.gp/en/

http://www.snowbird.com

http://www.chateauminuty.com

http://rallyinteractive.com

http://www.beoplay.com/Products/BeoplayV1

http://panasonic.jp/shaver/lamdash/dna/

http://www.aclamguitars.cat/en/floating-guitar#top

http://www.vacheron-constantin.com/en/metiers-d-art-florilege

http://indicius.com

http://www.voxelair.com

http://www.trinitywebtech.com/#portfolio

http://www.czk.fr

http://www.funkhaus.us

Marek Kasperski

ThinkLab.pl