Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Mitől lesz szép egy weboldal?

“A csótánymamának is csodaszép a saját gyermeke.” – tartja az olasz mondás. A szépség szubjektív kategória. Néha összeakadunk olyan megrendelővel, aki azt ugyan látja, hogy a mi honlapjaink, referenciáink szépek, de nem érti, hogy miért, később pedig úgy érzi, ő nem azt kapta, amit remélt. Miért van ez?

Előre bocsájtom: nem gyakran fordul ez elő, ha viszont igen, az sok konfliktussal és végül szakítással szokott járni. (Kár, hogy ezt rögtön az elején nem mindig ismerjük fel, különben már el se kezdenénk…)

Előfordul az is, hogy az ügyfél egy versenytársának vagy egy világmárkának a weboldalába szeret bele, és ő is olyat akar magának. Ez kicsit az ovisok viselkedésére emlékeztet – és ez később sem változik, csak átcsap az “én vagyok a megrendelő, az lesz, amit én akarok” szintre… Amiről pedig sejthető, hogy a valódi és minőségi kreatív munka halálos ítélete, vagyis a fagyi visszanyal…

Mégis, mitől válik széppé egy honlap? Milyen feltételek kellenek hozzá?

Jól körülírható erővonalak mentén alakul egy honlap széppé.

1. a honlapnak legyen mondanivalója, átgondolt funkciói

A szép és jól használhatónak ítélt honlapdesign nem designból indul, hanem abból, hogy

  • világosan tudom, milyen információt szeretnék eljuttatni a látogatóhoz – és ez nem az, hogy “Mi megoldást nyújtunk Önnek még azokra a problémáira is, amikről még Ön sem tud”… Világos információ a legfőbb tevékenységem, a bemutatkozásom (különösen énmárka építésénél), a bizalom ébresztése (olyan szolgáltatások esetében, amikor a megrendelő beenged a lakásába), a hangulat ébresztése (ha image termékről van szó).
  • fő irányvonalam a célcsoport meghatározásban és a marketing stratégiámban körvonalazott
  • létező tartalmaim vannak, amikből tudom, hogy mit akarok kiemelni

A nagy nemzetközi márkák pontosan tudják, mit akarnak mondani magukról. Éppen ezért nem is ömlesztenek rá mindent a látogatóra, de nagyon jól struktúrálják, hogyan mondjanak el magukról mégis sokat (elárulom: az információ helyes struktúrálásával és a navigációval).

Vagyis ha egy olyan szolgáltatást akarok eladni egy honlapon, ahol a megrendelőtől elvárom, hogy bizalommal legyen irántam, akár a lakásába is beengedjen és megbízzon bennem, hogy pl. jól mérem fel a örökségét képező hagyatékot, akkor célszerű megfogadni a tanácsot: kerüljön fel saját fotó a honlapra, és ne image fotókkal próbáljuk megtölteni a honlapot, a fiatalok boldogságos életérzését sugallva…

Nem léphetünk át a tartalom kérdésén. Az “ehhez a menüponthoz ezt kérem, ahhoz majd később írok szöveget, most tegyük inaktívvá” hozzállás mindent eredményez, csak jól tervezett, végül harmonikus összbenyomást nyújtó honlapot nem. Kiemelni, hangúlyozni, akár egy bizonyos funkciót megerősíteni csak úgy lehet, ha tudjuk is, mit akarunk mondani.

 2. a pozícionálást és a fő üzenetet támogató logó legyen a kiindulópont

Tapasztalataink szerint sokaknak okoz nehézséget, hogy megérezzék, egy adott logó (színei, betűtípusa) jó-e, használható-e, tükrözi-e azt a hangulatot, amit az egész honlaptól elvárunk.

A “legyen olyan zöld, mint a versenytársunké” nem érv…

A színeknek komoly szerepe van a marketingben is – mint minden más vizuális kommunikációban. Ha a tervezésnél mi azt javasoljuk, hogy pl. fáradt zöldet cseréljük le egy elegánsabb, kissé dinamikusabb bordóra, hallgassunk a honlaptervezőre…

Mit fog meghatározni a logó a honlapon?

  • a színvilágot, a fő fotók színeit
  • a betűtípust (addig a mértékig, amíg a betűtípus a) olvasható b) rendelkezik magyar fontkészlettel)

3. onnan induljunk, hogy mit akarunk mondani, ne onnan, hogy mi a látványos technikai megoldás

Sokan szeretnek bele a technikai megoldásokba, ahogy képek átrendeződnek, beúsznak, lemennek, felugranak. Ezek azonban roppant zavarólag hatnak, ha máshogyan akarják használni őket mondanivaló hiányában. Pl. a galéria elemek technikai megoldását használni navigációs elemként óriási hiba – a látogató, aki idejének 99%-át mások honlapján tölti, nem fogja érteni, miért tértünk el a webes konvenciótól. És nem fogja hosszan törni rajta a fejét…

4. a honlapfotó szerepe

Nem lehet eleget beszélni a honlapfotókról. Ugyanaz a honlap sablon szinte felismerhetetlen lesz, ha más fotókkal készítjük el, és esetleg még a betűtípuson is változtatunk. A lényeget kénytelen vagyok kiemelni:

Honlapon a fotó mindig fekvő. Még a portré is.

A fotók hagyományosan nem azt a képarányt használják, a fotós nem úgy komponál, hogy a fotóból majd csak egy keskeny csík lesz kivágva – hacsak nincs azzal tisztában, hogy pontosan hol lesz felhasználva a fotó.

A weboldal azonban hagyományosan fekvő elrendezésű, hiszen elsősorban a laptop monitorra, és elsősorban 1 monitornyi helyre dolgozunk. Ebbe a magasságba kell beleférnie a következőknek:

  • logó
  • elérhetőségek
  • navigáció
  • fő fotó (jó minőségben)
  • némi szöveg (pont annyira figyelemfelkeltő, hogy el is kezdjék olvasni)

A megrendelők egy része nekiáll fotókat keresgélni (ha már mi ilyen balfékek vagyunk, hogy még jó fotót se tudunk találni nekik…), és rendre beleszeretnek olyan fotókba, amelyeket szinte a fájdalomküszöbig jutva kell csíkká szabdalni, ezáltal pedig pont az a vizuális hatás veszik el, amit elérni szándékoztunk. Úgy fogja érezni a látogató, hogy egy kulcslyukon keresztül néz a honlapba, nem lesz kifutása, tere a fotónak, ettől pedig a néző szimplán csúnyának fogja érezni a honlapot, bár azt nem tudja majd megmondani, miért.

Visszatérő típushiba, ezért itt is meg kell emlékeznem róla: a profi fotósnak is a szájába kell rágni, hogy milyen portrét készítsen. Ugyanis az ő szakmájukban a portré mindig álló, ezért olyan reflex-szel fordítják a gépet álló helyzetbe, hogy utána mi már csak egy jót pingvinezünk, hogy akkor most a homlokánál vagy az állánál vágjuk el a k. Megrendelőt…

Erősen tartja magát az a tévhit, hogy emberi arc kell a honlapra, sőt, online ügyfélszolgálatos Jolánka vigyorgó képe – akikről egyébként mindenki tudja, hogy na ő aztán biztosan nem dolgozik a cégnél, és tuti, hogy nem ő fogja felvenni a telefont. Még nem találkoztam olyan webáruházzal vagy honlappal, akik be merték volna vállalni az igazi ügyfélszolgálatos arcát a főoldalon, Stock Jolán helyett. És kérem, itt van az eb sírhantja: aki elsőként bevállalja, többet fog nyerni vele, mint most gondolja.

Essen szó a fotó színeiről is! Egy honlap akkor lesz igazán harmonikus, ha viszonylag kevés színt használ. Ez azt jelenti a gyakorlatban, hogy

a) a logó színeiből indulunk (+ még max. 1 színből)

b) komplementer színeket használunk

Éppen ezért, amikor a megrendelő döntést hoz a logó színeiről (ha mi tervezzük vagy áttervezzük a logót), egyben döntést hoz a fő fotók színeiről is.

Mit tehetünk, ha előre tudjuk, hogy sokszínű fotókat fogunk használni, mert pl. sokszínű termékeket jelenítünk meg, vagy sok, különböző hangulatfotót fogunk használni? (Mert pl. egy promóciókkal és szezonokkal tarkított, eleve design-os képet teszünk fel egy könyves webáruházba.)

A megoldás: a tervezett fehér felület.

Aki nem tud elszakadni a “mindent a vevő arcába akarok tolni mert majd akkor fog tőlem vásárolni” téveszmétől, az végül veszít. A látogató nem kezd el gondolkodni, nem böngészik, hanem megy tovább oda, ahol áttekinthetőbb, megnyugtatóbb a látvány.

5. a harmonikus vizuális kép szabályainak alkalmazása

Létezik számos olyan leírt szabály, amelyeknek alkalmazása harmonikussá tesz egy képet (fotót, szórólapot, honlapot). Ilyen többek között az aranymetszés szabálya, és számos jól használható tanácsot is kaphatunk a grafikai tervezéssel foglalkozó könyvekben, még azokban is, amiket nem profiknak írtak és bármelyik könyvesboltban hozzáférhetőek. Ha és amennyiben a T. Megrendelő ezeket nem olvasta, ezekkel nincs tisztában és a honlap design már kezd összeállni, akkor abba még valaminek a bepasszírozása már borítja a harmonikus látvány arányait.

Egy szép weboldal: Jamie Oliver Food Foundation

Megmondom őszintén, ha szakmailag elbizonytalanodom, vagy feltöltődésre van szükségem, mindig Jamie Oliverhez térek vissza. Ez most az alapítványának a honlapja, annak is a nyitó oldala:

Jamie Food

Nézzük csak szép sorban, mitől is látjuk annyira jól összerakottnak a honlapot!

  • világosan és letisztultan kommunikálja a márkát (egyszerű logó, egy szín, jól olvasható betűtípus)
  • tudja, hogy mit akar elmondani (összesen 9 menüpont látszik és egy gördítést jelző nyíl)
  • fekvő portré… (jééé…)
  • tervezett fehér felület
  • a logó színével harmonizáló vagy komplementer szín a fő fotóban (triad 30 fok, hogy korrektek legyünk)

A weboldal design tervezés kreatív alkotói folyamat

A legrosszabbul sikerült honlapjaink egy széles merítésből mindig azok voltak, amelyeknél a T. Megrendelő már a munka kezdeti fázisában nem hallgatott ránk. Ha a bordót javasoljuk, ragaszkodik a zöldhöz. Ha a kisbetűkkel írott logót javasoljuk, akkor a nagybetűhöz ragaszkodik. Ha ezt a fotót javasoljuk, akkor biztos, hogy csak az az egy fotó nem fog felkerülni a honlapra. Ha az etalonként megadott honlap alapszíne a fehér, akkor nem jó, ha a mi tervünk fehér… és még sorolhatnám. Mindez szó szerint kitekeri a kreativitás nyakát, hiszen ha szépet akarunk csinálni, akkor nekünk is szeretnünk kell az adott design-t, már a kezdetektől fogva.

Minden honlaptervező máshogy dolgozik. Akadnak olyan grafikusok is, akik leülnek és simán megterveznek egy honlapot Lorem ipsum-mal. (Ennek mondjuk nem sok köze van a webergonómiához, de a keresőoptimalizáláshoz sem – vagyis pl. lefelejtenek bizonyos gombokat; nem veszik figyelembe az “above the fold” vonalat, és utóbb ki szokott derülni, hogy kellene még ezt-azt kommunikálni, amihez nincs helyünk; mivel szöveg nélkül készül a design, így a valódi szövegírás után biztosan szétcsúsznak a csodaszép dobozok stb.)

Mi két fontos ponton dolgozunk máshogy:

  • a honlapot marketingkommunikációs eszköznek tekintjük, így a tervezés előtt letisztítjuk a marketing stratégiát és megalkotjuk a fő marketing üzenetet – a honlapdesign pedig ezeket szolgálja, nem öncélú
  • a hosszú távra dolgozunk: ha azt gondoljuk, hogy az ügyfélnek hosszú távon más lenne jó, mint ami az ő fejéből kipattant, akkor ezt világosan megmondjuk – ellenben még a számla kifizetése után is felvesszük a telefont…

Mivel lehet segíteni a honlaptervezési kreatív munkát? avagy az Ügyfelek 6 pontja…

Milyen tanácsot is adhatnánk valakinek, aki szeretne honlapot terveztetni? Hát a magunk részéről leginkább azt, hogy minden ponton kérdezze meg a honlaptervezőt, akinek a referenciamunkáiba beleszeretett, hogy “ezt most így feltennéd a referenciáid közé?”… És ha a válasz az, hogy nem, akkor kérjük meg, hogy olyat tervezzen, amit feltenne. És standa pityere fejezzük be az instrukciók hintését, sok sok önuralommal…

Összegezve:

1. pontosan definiálom, mit akarok mondani magamról, mik a hangúlyos marketing üzeneteim – ha ebben zavaros vagyok, akkor hallgatok a marketinges tanácsára [a sikermarketing.hu-nál van ilyen]

2. elfogadom, hogy a marketing tanácsadó külső szemmel jobban lát valamit, mint én belülről – a kritika és a javaslat az én érdekemben történik (ha pedig nagyon nem érzem autentikus tanácsadónak a céget, akkor idejekorán keresek valaki mást)

3. elfogadom, hogy a tervezőnek jobb szeme van a betűtípus hangulatokhoz, mint nekem (hacsak nem vagyok épp alkalmazott grafikus, de ebben az esetben a tervező fogja elfogadni az én verziómat, hiszen az ő feladata a harmónia megtalálása a honlaptulajdonos és a honlap között)

4. nem töltök heteket a javasolt fotók helyett más képek keresgélésével – feltételezem, hogy aki már több honlapot csinált meg, mint én, az látja, mi lenne a legjobb

5. nem akarok minden fehér felületet betölteni – ha mással nem, legalább színnel

6. tudomásul veszem, hogy a honlaptervezés közös munka, a tökéletes végeredmény elérése pedig elsősorban az én érdekem

Hát, valahogy így. Az a jó, hogy azokat az embereket, akikkel mi amúgy is tök jól tudunk együtt dolgozni, azokat ez nem fogja elriasztani. Akivel pedig nem, annak ez legyen egy elbocsájtó szép üzenet – inkább előbb mint később. És most még szóba se hoztuk a fekete levest, a keresőoptimalizálást…

U.I. A csótány fotóért köszönet Anja Osenbergnek (cocoparisienne, pixabay)

Megosztás itt: facebook
Megosztás itt: twitter
Megosztás itt: linkedin
Megosztás itt: pinterest

5-15 perces
videók

Egyedi
tempóban

Érthetően,
példákkal

Azonnal
használhatóan

14 online tanfolyam