Weboldal ráncfelvarrás [4/4]
2012.03.27. | by raasA LogóKirály néhány egyszerű eszközzel egy életteli, könnyen áttekinthető szájtot épít egy unalmas weboldalból. És megmutatja, miért jó mindez.
Több száz cikk született már abban a témában, vajon mitől jó egy weboldal. A cikksorozatunkban igyekeztünk egy rövid összegzést adni néhány fontos aspektusról: milyen alapvető weboldal típusok vannak? A típusok alatt a weboldal eszközrendszerét értjük, amely összhangban van a cég webes stratégiájával (legalábbis jó esetben). Írtunk a weboldal néhány sikerkritériumáról, ahol olyan "egyértelmű" témákat sorakoztattunk fel, amire sokan ma még nem is gondolnak. Végül lerántottuk a leplet a nagy weboldal mumusról, amit a legtöbben szívesen elfelejtenének.
Lezárásul most megkíséreljük bemutatni, hogyan lehet egy teljesen átlagos szájtból szebb és jobb végeredményt varázsolni.
Alapanyag
Figyelem: A példában látható Budafoki Ingatlan Központ egy nem létező cég, a képzeletünk szüleménye. A webdesign a cikk kedvéért született és csak a példák illusztrálását szolgálja.
A színek
A szín nagyon hatásos eszköz arra, hogy kiemelje a fontos információt. A vállalat arculatában is használt színekkel vagy színpalettával érdemes dolgozni, nem túl előnyös, ha mindenhol máshogy néz ki a cég. Szükség van egy egységes arculatra, ami igényességet sugároz. Vigyázat, a túl sok szín használata zavaró! Példaoldalunkon a logó színéből kiindulva végzünk változtatásokat.
Tipográfia
A tipográfia önmagában is művészet: a tartalom, az információ tálalásának művészete. A példaszájton a szövegek elrendezése nem felel meg a követelményeknek, és a főcímek betűtípusa sem passzol a többi szöveghez. A szövegek színezése is túl sok.
Rendezettség, ritmus
Az úgynevezett grid rendszer segíti áttekinthetőbbé, ritmusosabbá tenni az oldalakat. (A grid rendszer egy tervszerűen kialakított vázszerkezete az oldalnak, ami igazodási és viszonyítási pontokat határoz meg. Ezek mentén rendezetten és következetesen építhetők fel egy komplex weboldal tartalmi elemei is.) Az emberi szem szereti a tagolt tartalmakat, példánkon is megkezdjük ennek előkészítését. Jobb oldalra kerül a kép, a bal oldali kolumnát pedig később szintén tovább tagoljuk.
A fotó integrálása
A megfelelően bedolgozott fotók és jól megszerkesztett tartalmak adják egy szájt sava-borsát, amivel kitűnik a többi oldal közül. Sokféleképpen megoldható ez, lényeg, hogy a fotóra is érdemes figyelmet fordítani. Példánkban a fotót Photoshop-ban dolgoztuk meg, hogy kicsit érdekesebb legyen.
Arculati elemek
A logó egy hangsúlyos grafikai elem is, ami alapjául szolgálhat az egyéb arculati elemek készítésének is. Az egységesebb megjelenés érdekében egy kis arculatosítástTM (ez egy valódi szó) eszközöltünk.
Hierarchia kialakítása
Már majdnem készen vagyunk a ráncfelvarrással. A fenti állapotot nézve van egy hangsúlyos képünk, de a többi információ ránézésre nem elég tagolt. Különítsük el azokat az elemeket, amelyek végigvezetik a látogató szemét a legfontosabb információkon.
Itt egy fontos megjegyzést tennék, amit nem lehet elégszer hangsúlyozni. A forma követi a funkciót! Ezért is nagyon fontos, hogy egy stratégiai gondolkodás és tervezés előzze meg a grafikai tervezést. Így a céloknak megfelelően állhat össze a weboldal tartalma és könyebb eldönteni hogyan és milyen információt mutassunk a látogatóknak a maximális hatás érdekében.
Itt van tehát. Néhány hasznos eszköz segítségével az unalmas ingatlanos szájtból egy életteli, a vállalati identitást jól tükröző, könnyen áttekinthető oldalt készítettünk. És eközben az alapvető dizájnelemeket megtartottuk. Ilyen volt, és végül ilyen lett:

Ön is megmutatná weboldalát? Küldje el nekünk vagy írja be a hozzászólásokba...