Design trend 2014: az apró animációk uralkodása

Néhány hónappal ezelőtt Józsi egyik posztja nyomán kezdünk el behatóbban foglalkozni az svg kínálta újabb lehetőségekkel. Bennem is az élt még, hogy az svg valami pluginen keresztül támogatott, weboldalakon iszonyatosan körülményesen és pazarlóan használható formátum.  Közben a világ elég nagyot változott, gyakorlatilag univerzálisan alkalmazható, szóval mi is elkezdtünk újra kísérletezni vele. Az svg legelső és legfontosabb előnye nyilvánvalóan a vektorosságban rejlik a raszter képekhez (png, gif, jpg) képest.  A vektorfájl persze arra is csábítja az embert, hogy animálja azt. Hiszen megteheti. És részemről itt lett világos, hogy - túl az svg-ken - a finom animációk kidolgozása szemléletformáló erővel bír. A webdizájn fontos, meghatározó részét képezhetik a részleteiben kidolgozott mozgások. Van tehát a UI elemek animálásának egy szemantikája, amire elég könnyű rákapni, ha az ember elkezdi csinálni.  A UI elemek animálása rendszerint csak kontextusában érthető és értelmezhető a flehasználó számára. Mégis, a példa kedvéért íme egy részleteiben kidolgozott animáció, amin jól látható, hogy miről is beszélünk:  A fenti demo érdekessége, hogy teljes mértékben CSS keyframe-ekre épül, és a Bounce.js segítségével készítette Joel Besada, aki a kapcsolódó posztjában részletesen véggiveszi azokat az aprólékos lépéseket, amikből összeáll egy ilyen UI mozgatás.  Még egy példa, szintén SVG + CSS kombóval megoldva:  Az animációkkal ugyanaz a veszély, mint bármi mással a webdizájnban: ha nem kellő érzékenységgel és visszafogottsággal használjuk, nevetségessé teszi a munkánkat. Viszont ha rászánjuk az időt, és kikísérletezzük az adott funkcióhoz és felületi jelentéshez/eseményhez illő animációt, nagyon sok felületi problémától meg tudunk szabadulni, ráadásul életre is keltjük a dizájnt.  Azért is írok minderről, mert őgy érzem, hogy nagyon rímel az, amit tegnap a Google "Material Design" néven bejelentett. Persze más dolog oprendszert dizájnolni, mint mobil alkalmazásokat vagy weboldalakat, de ezzel együtt is én mindenkinek csak tanácsolni tudom, hogy szánjon rá pár napot, hogy elmélyüljön az svg animációk, css keyframe és ui elemek megmozgatása témakörben. Szép dolgokra lehet lelni.