Honlaptanácsadó blog

A top 10 webdesign trend 2012-ben - 1. rész

Mottó: a design nem azért fontos mert szép, hanem mert elad

Írta: Varga Klára

Ön milyen típusú vállalkozó: aki akkor lép egyet, amikor már az összes versenytárs megtette? Vagy inkább olyan habitusú, aki szereti megelőzni a konkurenciát? Ha az utóbbi, akkor Önnek írtam az év első bejegyzését.

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

responsive_webdesign.jpg

 

 

 

 

 

 

 

 

 

 

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.

http://lapse.org/

http://www.sleepstreet.be/

 

 

2. Egyedi betűtípusok

Képzelje el, ha az IKEA logó egyszer csak betűhiány miatt így jelenne meg:

 

webdesign_fontok_ikea.jpg

 

 

 

 

 

 

 

 

 

 

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.

http://proov.fr/

http://html5boilerplate.com/

 

 

3. Minimalizmus – az érett webdesign

minimalista_webdesign.jpg

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...

http://blog.squarespace.com/

 

 

4. Infografikák

webdesign_infografika.jpg

 

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

http://imagemechanics.com.au/

http://www.ipolecat.com/

 

 

5. QR kódok

webdesign_qr_kod.jpg

 

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.networkfish.com/

http://www.fastcompany.com/ - alul

 

Jövő héten jön az 5 további trend, ezek inkább apró, ám a weboldalon látványosan alkalmazható megoldások lesznek, várom Önt vissza!

 

Ötlet alaposan átgyúrva: WDLedger

 

 

Facebook