A top 10 webdesign trend 2012-ben - 1. rész
Mottó: a design nem azért fontos mert szép, hanem mert elad
Először is, miért érdekesek a trendeket, amikor Ön nem divatozni szeretne, hanem eladni?
A trendek a jövő felé mutatnak: ami ma még csak trend, holnap elengedhetetlenül szükséges lehet. Ma még csak ajánlott odafigyelni az okostelefon felhasználókra, holnap már muszáj lesz. Ma még csak érdemes élni a webdesign új eszközeivel, holnap már ciki lesz, ha nem teszi.
Nézzük, merre érdemes indulni, ha 2012-ben tervez új weboldalt, vagy a régit szeretné lecserélni!
1. Három az egyben: számítógépen, okostelefonon és táblagépeken is működő webdesign
A reagáló weboldal (responsive webdesign - szóljon, ha van jobb fordítási ötlete!) nagy vonalakban annyit jelent, hogy ugyanaz a weboldal jól működik, jól olvasható és élvezhető hagyományos számítógépen, laptopon, okostelefonokon és táblagépeken egyaránt.
Lényege, hogy a weboldal felülete nem fix méretű és pozíciójú grafikai elemekből áll, hanem a webdesigner ú.n. rugalmas layoutot tervez, ami automatikusan illeszkedik a különböző felbontású eszközök képernyőméretéhez. Egy előzetes, a háttérben futó lekérdezés biztosítja, hogy az adott eszközön a rászabott design jelenjen meg.
Ez tagadhatatlanul némi többletköltség a megrendelőnek. Viszont sokkal kisebb költséget jelent, mintha a hagyományos webdesign szokásokat követve külön készíttetne weboldalt számítógépre, mobilra és táblagépre.
Márpedig pillanatokon belül megkerülhetetlenné válnak az okostelefonon, majd a táblagépeken keresztül netezők. Ha most tervez új weboldalt, célszerű meggondolni, nem érdemes-e egyúttal számukra is élvezhető weboldalt készíttetni.
Példák:
http://stephencaver.com/ - ha nincs kéznél okostelefon vagy táblagép, simán húzza fokozatosan össze böngészőablakát: látni fogja, hogyan igazodik a monitorfelbontáshoz a webdesign.
2. Egyedi betűtípusok
Képzelje el, ha az IKEA logó egyszer csak betűhiány miatt így jelenne meg:
Pedig a weboldalakon – jó, a logót kivéve – pont ez volt a helyzet. Arial, Verdana és Times New Roman minden weboldalon. Plusz egy-két felejtős, egyéb betűtípus esetleg. Merthogy ezek a betűk azok, amik minden egyes számítógépen megtalálhatóak, tehát ezek voltak azok, amikből a webdesigner gazdálkodhatott. Miért probléma ez azon kívül, hogy sablonosítja a weboldalakat? (Bár - szerintem - ha márkáról beszélünk, ez már önmagában nagy baj.)
Tegyük fel, hogy Önnek gyönyörű tipográfiával megkomponált katalógusa, prospektusa volt, amit szeretett volna viszontlátni weboldalán is. Mi volt erre a webdesigner válasza?
“OK, de azokat csak képként tudom betenni, ami viszont agyoncsapja a keresőoptimalizálást. Kéri?”
Na, ennek van most vége: bátran használhatóak a különféle betűtípusok, melyek mind az egyediséget és a márkaazonosítást segítik.
Példák:
http://codemyconcept.com/ - minden felirat, minden árnyék és egyéb grafikai trükk kódból megy: azaz nem csupán látványos, hanem a Google is érti.
3. Minimalizmus – az érett webdesign
Olvastam egy amerikai blogon egy találó megállapítást:
"A webdesigner először olyan weboldalt tervez, ami saját magának tetszik. Ha érettebbé válik, olyan oldalakat készít, ami a megrendelőnek tetszik. A legprofibb azonban az, aki azért tervez, hogy az információt a lehető leghatékonyabban adja át."
Erről szól a minimalizmus, azaz az információ legtökéletesebb átadásáról. Elárulom, ez a legkeményebb feladat. Más kérdés, hogy ehhez erre fogékony, érett megrendelő és érett célpiac is szükséges.
Példák:
http://www.brianhoff.net/ - nem azért nincs ennek a webdesignernek az oldalán grafika, mert nem lenne képes rá: nézze meg a portfólióját!
http://www.cemalokten.com/ - na jó, ez már nekem is sok...
4. Infografikák
Mi az infografika?
“Az infografika több mint egy fénykép, összetettebb, mint egy rajz és sokkal informatívabb, mint az önmagában álló írott szöveg. Célja minden esetben az információközlés. A jó infografika figyelemfelkeltő, informatív, közérthető.” (forrás)
Tavaly is hódított már és bizonyított. Egy jól sikerült infografikát lehoznak az internetes médiumok, megosztják őket a kisebb internetes közösségeket működtető oldalak, a céges Facebook oldalak és maguk az olvasók. Terjednek, mint a futótűz.
A jó infografika elsődleges hozama tehát nem az, hogy weboldala látogatói elismerően bólintanak monitoruk előtt, hanem az, hogy a média és a közösségi megosztások révén ismertséget hozzon Önnek.
Példák:
http://www.chappybarry.com/ - mindent infografikákkal mesél el
5. QR kódok
Tegyük fel, hogy egy érdeklődő rátalált az Ön weboldalára, majd a számítógép mellől felhívja Önt. Kiderült, hogy az Ön ajánlata szuper, így megbeszélnek egy találkozót.
Ezután az érdeklődő bepötyögi mobiljába az Ön nevét, telefonszámát, és címét (amit később nem fog megtalálni, mert nem emlékszik rá). A találkozó napján bepötyögi a gps-be a címet, és indul.
Mit egyszerűsít le a QR kód? Weboldalán az összes szükséges céginformációt belesűrítheti, így a monitor előtt ülő felhasználó egy mozdulattal a telefonjában tudhatja az Ön és cége elérhetőségeit, útvonaltervet készíthet okostelefonján, melyet gps-ként használva könnyen elnavigál Önhöz.
Könnyítse meg vásárlója dolgát ezzel a kis eszközzel, ingyen van! (A QR kódokról bővebben itt írtam.)
Példák:
http://www.fastcompany.com/ - alul
A top 10 webdesign trend 2012-ben - 2. rész
Mottó: a design nem azért fontos mert szép, hanem mert elad
A divattrendekhez hasonló a helyzet a webdesign trendekkel: ne azért alkalmazzon egy-egy trendet mert divat. Azért használja a trendeket, mert cégének/weboldalának/márkájának jól áll, és erősíti azt.
Nézzük, miből érdemes idén válogatni!
A múlt heti, inkább stratégiai szempontból lényeges trendek után jöjjenek az esztétikai trendek.
6. Hatalmas vektorgrafikák, kabalafigurák
Ha esetleg azt gondolja, hogy ezzel a megoldással csak komolytalan hülyegyerekek foghatóak meg, téved. A fenti kép az egyik legnépszerűbb hírlevélküldő szoftver kabalafigurája. Nem kiskorú hobbiprogramozók kedvenc rajzfilmfigurája ez a majom, hanem egy átgondolt és világszerte elismert szolgáltatásé.
A Mailchimp-figura mögötti gondolat, hogy az email marketing annyira egyszerű, hogy még egy majomnak is menne. (Akkor vajon miért nem tyúkot rajzoltak? Nem tudom.)
Annyiban biztosan köze van a figuráknak a gyerekkorhoz, hogy a minden emberben élő gyermeket célozzák meg. A vektorfigura segíti, hogy a brand megjegyezhetővé és azonosíthatóvá váljon, valamint azonnali hangulatot teremt. A jól megválasztott figura szerethetővé teszi a brandet.
Példák:
http://www.mozilla.org/en-US/thunderbird/ - még egy világszerte ismert brand, aki használja
http://freelanceswitch.com/ - személyes kedvencem
7. Flashmentes animációk
A Flash régóta haldoklik. Nem szeretik a felhasználók, nem szeretik a keresők, az egyre elterjedtebb iPhone-ok pedig tudomást sem vesznek róla.
Mindeközben a keresők számára is értelmezhető (tehát keresőoptimalizálási szempontból sokkal előnyösebb) új technológiák (jQuery/CSS3/HTML5 animáció) rohamsebességgel fejlődnek, és egyre elképesztőbb animációk születnek segítségükkel.
Gondolná, hogy ezek az animációk NEM Flash-sel készültek? Példák:
http://jsfiddle.net/addyosmani/BFeMN/show/
http://jsfiddle.net/addyosmani/P2HB9/show/
8. Fix pozíciójú menü
A fix pozíciójú menü lényege, hogy a weboldal görgetése közben mozdulatlan marad, tehát folyamatosan szem előtt van. Jópofa dolog ez, de használata megfontolandó.
Érdemes átgondolni, hogy az Ön szempontjából mi az előnyösebb: ha Ön vezeti a látogatót, azaz egy szuperprofi webdesignnal szinte kijelöli a haladási irányt a látogató számára, vagy minden kaput nyitva hagy, és a látogatóra bízza, merre halad tovább.
Példák:
http://studionudge.com/ - nem csak a fix menü, hanem számos más trendi elem található az oldalon, nézze csak meg!
http://www.fat-man-collective.com/
9. Körök
Azért tartom fontosnak ezt a stíluselemet, mert megújítja a webdesignt. Megszoktuk, hogy a weboldalak dobozokból állnak: vízszintes, téglalapalakú doboz a fejléc, álló téglalap alakú dobozok a hírek, az akciós ajánlatok, a hírlevél-feliratkozás és az egyéb infók.
A webes technológiák fejlődésének köszönhetően egyszerűen, kódból megoldható, hogy ne a sablonos szögletes formákban gondolkodjon a webdesigner, hanem például köröket használjon. (Ha érdekli a technikai háttér: kattintson jobb egérgombbal ezen a weboldalon egy képre és mentse el. Látni fogja, hogy a képek szögletesek: tehát a körök kódból mennek.)
A körök – pont szokatlanságuknak köszönhetően – vonzzák a tekintetet. Ha azt szeretné, hogy a legfontosabb üzenetét biztosan minden látogató észrevegye, tegye kör alakzatba (illetve kérje erre a webdesignert, aki weboldalán dolgozik): garantáltan észre fogják venni.
Példák:
http://alwayswithhonor.com/ - referenciák bemutatására nagyon jól használhatóak a körök – bármilyen iparágban
10. Szalagok
Én személy szerint imádom a szalagokat a weboldalakon és – ha a projekt engedi – szívesen használom őket
Nem állítom, hogy több csavart/sajtot/biztosítást fog eladni bárki, aki honlapján szalagokat használ. Ám állítom, hogy ha imidzséhez illik a trendiség, a szalagokkal ezt látványosan, plusz költség nélkül erősítheti. Ráadásul olyan megoldásról van szó, ami a legtöbb felhasználó tetszését elnyeri, tehát nemigen lőhet vele bakot.
Példák:
http://www.cakesweetcake.co.uk/- szalagok bizarr színkombinációban, de szerintem működik
