UX Design: Trendy 2013-2014. Animacja i interakcja

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+

PODSTAWY TEORETYCZNE

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://daftpunk.themaninblue.com

ŁADOWNIE STRON

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

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

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

http://sanchezromerocarvajal.com

http://lifestylefederation.com

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

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

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

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

MENU I LOGO
Animacja i interakcja

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

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

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

SLIDER

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

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

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

WYSZUKIWARKA

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

DYMKI (TOOLTIPS)

http://projects.nickstakenburg.com/tipped

FILTROWANIE

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

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

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

ZDJĘCIA

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

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

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

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

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://www.usatoday.com/big-page/

INFORGRAFIKI

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

http://vasonanetworks.com/#/home

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

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

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

WIZUALIZACJA DANYCH

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

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

http://www.officialwaynerooney.com/profile

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

http://digitalbakery.org/#points

http://thespace.org/items/s00007p8

http://aworldoftweets.frogdesign.com/

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

http://evolutionofweb.appspot.com

STRONY

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://www.trinitywebtech.com/#portfolio


Marek Kasperski
ThinkLab.pl

UX Design: Trendy 2013-2014. Animacja i interakcja

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (7)

UX Design: Trendy 2013-2014. Animacja i interakcja