Honlapkészítés tippek - honlapteszt.hu Kitöltött honlapteszt
BLOG Online Marketing ▼ Honlapkészítés ▼ Keresőoptimalizálás ▼ Linképítés ▼ Google Adwords ▼ Referencia Kapcsolat

Web Design

Sok jó honlap halálát okozza a csili-vili webdizájn. Egy okos cégvezető önértékelését nagyban lerontja, hogy a drága forinton megvásárolt csili-vili honlapja nem hozza az eredményeket. Sokszor a dizájn választás a felelős. Íme néhány szempont, ami alapján garantáltan sikeres dizájnt választhat magának

Egy jó web designt több dologra is felhasználhat. Ilyenek, mint bizalom építés, márkanév építés, nívós tájékoztatás, pozicionálás és vagyongyűjtés. Vállalkozói szempontból ezek között talán a legfontosabb a profitszerzés.

Előszó

Profitszerzéshez elengedhetetlen a hatékony kommunikáció. A világ vezető honlapjai sem tudták volna megszólítani a felhasználóikat, ha nem kommunikálnak feléjük hatékonyan. A web design pedig fontos szerepet tölt be a kommunikációban.

Elképesztő, hogy a sikeres kommunikációnak is köszönhetően átlagosan 46,7 millió (!) regisztrált felhasználója van egy honlapnak azok közül, akik a világ TOP30-as listáját vezetik. Magyarország teljes lakosságának majdnem az ötszöröse.

Mégis, mindegyik design közös alapra épül. Elterjedt néven "web 2.0" vagy "webkettes" design.

Lentebb azt is megvizsgáljuk, mitől webkettes egy webkettes honlap.

Milyen a "jó" web design?

Elég nehézkes kimutatni, hogy egy új designnal hány százalékkal jobban édesgeti magához a leendő vevőket. Minden ilyen változtatás hatása majd csak a következő X év forgalmában mérhető le.

Van amikor design profitra gyakorolt hatása azonnal jelentkezik. Például egyszer egy szemmel jól látható helyen lecseréltem egy képet, és azonnal leesett a bevétel. Gyorsan visszacseréltem a régire:)

Ugyanígy, egy-egy apró design változtatás néha 30 százalékot, néha 10 százalékot, van amikor pedig 212 százalékot hoz a bevételen.

A web design feladata az, hogy elősegítése a terméke értékesítését. Attól válik "jóvá" egy web design, hogy mennyire "jól"segíti elő a termékei eladását.

Termékeit nem tudja eladni írásos szöveg nélkül. Gondoljon csak bele: mennyi megrendelése lesz akkor, ha a honlapról minden szöveget kitöröl, és csak a képek maradnak?

Aranyszabály: nem a design, hanem a szöveg értékesít.

Viszont az sem igaz, hogy a designnak semmilyen hatása nincs a bevételére. Van amikor egy-egy találó kép sokat segít azon, hogy többen olvassák el a szöveget - és többen rendeljenek.

Most akkor nézzük meg azokat a web design elemeket, amelyek legjobban növelik vagy csökkentik a szöveg értékesítő erejét.

A középpontban a vevő áll

Naponta 60000 gondolat jár a fejünkben. Tudományos kísérletekkel igazolták. Minden pillanatban gondolatok százai cikáznak a fejünkben. Amikor egy látogató a honlapjára érkezik, ezernyi más dolog is jár a fejében.

Amikor a látogató a honlapjára érkezik, bevillan előtte a honlap teljes képe. Kritikus, hogy az első bevillanó képben a leendő vevője rögtön megtalálja-e a számára hasznos információkat.

Próbálja ki a következőt. Nyisson meg egy honlapot és csukja le a szemét. Kezdjen el gondolkodni valamelyik problémáján. Mondjuk azon, hogyan lehetne vagyont gyarapítani anélkül, hogy az adó elvinné a felét.

Gondolkodjon rajta fél percet. Amikor érzi, hogy beindul az agya, nyissa ki a szemét. Nézze a monitort 3 másodpercig.

Ismét csukja le a szemét, és próbálja megfogalmazni egyetlen mondatban, mit látott.

A gondolatai egyik fele még mindig az adózáson jár. A másik felével próbálja felidézni az Ön elé tárult képet. Keresi benne azt a hasznos információt, ami az Ön problémáin segít.

Túlzsúfolt honlapról igencsak nehézkes bármilyen hasznos információt kinyerni. Az agyunk "felülnézetből" látja a honlapot. Magyarán a szövegek egybefolynak, csak blokkokat látunk. Fekete és színes tömböket, többnyire unalmas, érdektelen információkkal.

Egyszerre annyi mindent szeretnénk elmondani a vevőnek. De ezek az információk nem is a vevőről szólnak, hanem a cégünkről. Történetünk, hány éve vagyunk a pályán, milyen eszközeink vannak, mit értünk el eddig - egy rakás haszontalan információ, ami csak unalmassá teszi a honlapot.

Ezeknek a rejtett célja az lenne, hogy bizalmat építsünk a vevőben. Sajnos ezekkel pont az ellenkezőjét érjük el. Telezsúfoljuk a képernyőt mindenféle olyan tartalommal, ami csak számunkra nyújt információt. A vevő meg halálra unja magát.

A vevő tudatalattija rögtön beazonosítja az "egy a sok közül" típusú cégek közé azért, mert azonnal összehasonlítja az agya a memóriájában tárolt több ezer honlap emlékképével.

Az első felvillanó képnek egyértelműen a látogató tudtára kell adnia, hogy jó helyen jár. Ez az oldal róla szól, és nem egy ismeretlen cégről. Vagyis hasznos a tartalom, és nem a szokásos bla bla.

Design tanácsok erre vonatkozóan:

  • ne használjon 3 hasábnál többet
  • a szövegek különböző háttérszíneinek száma ne legyen több háromnál
  • az első képernyőn legnagyobb betűvel a címsort szedje
  • ne ugráljon a betűméretek között, mindenhol ugyanazokat a méreteket használja. Ha mondjuk a fejezetcímeket 16 pixel nagyságúak, a fejezetcím mindenhol 16 pixel nagyságú legyen.
  • használjon félkövér és dőlt kiemeléseket

Legjobban a fekete betű teljesít fehér háttéren

Az eladások számát tekintve az a legjobb, ha semmilyen hátteret nem tesz a szöveg mögé. Kivétel, ha ritkán sárgát tesz a fekete mögé, ami könnyebben olvashatóvá teszi a kiemelt szöveget.

Bármilyen más háttér a szöveg mögött csökkenti az olvasói számát.

Kivétel ez alól a nagyon rövid blokkok, amikor a kiemelt háttérszín a szöveg fontosságára hívja fel a figyelmet.

A fő szövegrészeknél kizárólag fekete színt használjon, mert ezt a legkönnyebb elolvasni. Több színt a címsornál, alcímnél és fejezet címeknél használjon.

Az interneten főképp 3 betűtípust használnak:

  • Arial - árvíztűrő tükörfúrógép
  • Verdana- árvíztűrő tükörfúrógép
  • Tahoma - árvíztűrő tükörfúrógép

Gyakran használt betű méretek:

  • 12px - árvíztűrő tükörfúrógép
  • 14px - árvíztűrő tükörfúrógép

Ha létezik ilyen, akkor az "internet betűtípusa" a következő:

  • Fehér alapon fekete Arial, 12px

A "webkettes" dizájn jól kommunikál, ezért kiválóan használható eladására

A web 2.0 tervezés azt jelenti, hogy fókuszált, tiszta és egyszerű. Nem jelenti szükségszerűen azt, hogy minimalista. Arra teszi a hangsúlyt, hogy minél élvezetesebbé tegye a honlap használatát az olvasója számára.

Tartja a mondás: "ha két megoldás van egy problémára, válaszd az egyszerűbbet."

A webkettes design a tartalomra és a könnyű kezelhetőségre fókuszál, emiatt nagyon népszerű az internetezők körében. Kifejezetten arra tervezték, hogy bizalmat és szimpátiát keltsen a honlap üzemeltetője felé.

Kiválóan használható értékesítési honlapok elkészítésére is, mivel a webkettes design a hatékony kommunikációra épül.

Népszerűsége miatt gyorsan terjed, hamarosan teljes egészében leváltja a régi honlapokat.

Mivel minden korszakváltás fenyegetést jelent azok számára, akik lemaradnak, a következő szekcióban a webkettes design-t vesszük nagyító alá

Mitől lesz webkettes egy honlap?

A táblázat összefoglalja a jellemző webkettes tulajdonságokat: 

6/1. Egyszerűség

Kimarad minden felesleges elem. Nem zavarja össze a látogatót a tájékozódásban.

Csak a fő üzenet átadására koncentrál, így erős a kommunikáció.

Élesen elkülönülnek egymástól a blokkok, így nem folyik egybe a kép

Web 2.0 Design: egyszerűség (classmates.com)
Web 2.0 Design: egyszerűség (friendster.com)
Web 2.0 Design: egyszerűség (plaxo.com)
Web 2.0 Design: egyszerűség (raverly.com)

6/2. Fehér háttér

Könnyeddé teszi a szöveg olvasását, így a szöveg befogadását is elősegíti.

Szabadság és nyitottság érzését kelti a fehér háttér.

Web 2.0 Design: fehér háttér (asmallworld.net)
Web 2.0 Design: fehér háttér (blackplanet.com)
Web 2.0 Design: fehér háttér (hi5.com)
Web 2.0 Design: fehér háttér (sonico.com)

6/3. Kevesebb hasáb

Jobban átlátható az oldal, segít az olvasónak a téjékozódásban.

A szem könnyebben befogadja a megtört szöveget.

Három hasábnál többet nem célszerű használni

Web 2.0 Design: kevesebb hasáb (bebo.com)
Web 2.0 Design: kevesebb hasáb (buzznet.com)
Web 2.0 Design: kevesebb hasáb (care2.com)
Web 2.0 Design: kevesebb hasáb (opendiary.com)

6/4. Erőteljes fejléc

A képernyő felső része erőteljesen eltér a többi részétől

Erőteljesebb színnel elválasztja az oldal törzsétől a fejlécet

Web 2.0 Design: erőteljes fejléc (athlinks.com)
Web 2.0 Design: erőteljes fejléc (imeem.com)
Web 2.0 Design: erőteljes fejléc (netlog.com)
Web 2.0 Design: erőteljes fejléc (wayn.com)

6/5. Egyszerű navigáció

Ugyanaz az átlátható navigációs menü minden megjelenő oldalon

Egyszerű, gyors navigálást teszi lehetővé, hogy a látogató a legfontosabb oldalakra rögtön eltaláljon

Web 2.0 Design: egyszerű navigáció (flixster.com)
Web 2.0 Design: egyszerű navigáció (digg.com)
Web 2.0 Design: egyszerű navigáció (foxnews.com)
Web 2.0 Design: egyszerű navigáció (cnn.com)

6/6. Címsor

A leginkább szem előtt levő helyen jól látható címsor.

Bátran használnak nagy méretű címsort.

Web 2.0 Design: címsor (badoo.com)
Web 2.0 Design: címsor (fotolog.com)
Web 2.0 Design: címsor (gather.com)
Web 2.0 Design: címsor (librarything.com)

6/7. Erős színek

Élénk, erős színek vonzzák a tekintetet.Főleg a fejléc és a menüsor elkülönítésére használják

Web 2.0 Design: erős színek (italki.com)
Web 2.0 Design: erős színek (last.fm)
Web 2.0 Design: erős színek (tuenti.com)
Web 2.0 Design: erős színek (home.spaces.live.com)

6/8. Gazdag felszín

Finom hatásokkal fokozza a minőségi érzelmet a design.

Jó minőségű fotók, szinátnemet, tükröződés és 3D-s hatés a kedvenc

Web 2.0 Design: gazdag felszín (cafemom.com)
Web 2.0 Design: gazdag felszín (myyearbook.com)
Web 2.0 Design: gazdag felszín (mylife.com)
Web 2.0 Design: gazdag felszín (twitter.com)

6/9. Színátmenet

Hangulatot teremt, nagyon gyakran használt díszítő elem.

Web 2.0 Design: színátmenet (skyrock.com)
Web 2.0 Design: színátmenet (tagged.com)
Web 2.0 Design: színátmenet (funnela.com)
Web 2.0 Design: színátmenet (ecovian.com)

6/10. Ikonok

Több jelentésárnyalatot adnak vissza, ezzel gondolkodásra ösztönzik az olvasót

A kis figurák feldobják a hangulatot

Web 2.0 Design: ikonok (iwiw.hu)
Web 2.0 Design: ikonok (linkedin.com)
Web 2.0 Design: ikonok (livejournal.com)
Web 2.0 Design: ikonok (hollrr.com)

6/11. Csillag

Csillag alakú címkéket ragasztanak a honlapra, amivel egy-egy kiemelt jelentőségű szövegrészre hívják fel a figyelmet.

Web 2.0 Design: csillag
Web 2.0 Design: csillag
Web 2.0 Design: csillag
Web 2.0 Design: csillag

6/12. Vonalak

Az egymástól elkülönülő blokkokat egy vékony vonal választja el

3D-s hatást kelt

Web 2.0 Design: vonalak (devianart.com)
Web 2.0 Design: vonalak (comcast.net)
Web 2.0 Design: vonalak (ebay.com)
Web 2.0 Design: vonalak (megavideo.com)

6/13. Új alkalmazások

Valami újdonság feltalálása, ami még ilyen formában sosem létezett

A Myspace.com-nak például 250 millió regisztrált felhasználója van.

Magyarország teljes lakosságának 25-szöröse.

A Google-ről nem is merek beszélni...

Web 2.0 Design: új alkalmazás (facebook.com)
Web 2.0 Design: új alkalmazás (myspace.com)
Web 2.0 Design: új alkalmazás (google.com)
Web 2.0 Design: új alkalmazás (wikipedia.org)

6/14. Logó

Egyszerű, mégis jól kidolgozott logó.

Egyedi, a logó láttán rögtön asszociálunk a szolgáltatásra.

Ma már senkinek sem kell magyarázni, hogy a YouTube egy videó megosztó portál.

Web 2.0 Design: logo (orkut.com)
Web 2.0 Design: logo (youtube.com)
Web 2.0 Design: logo (flickr.com)
Web 2.0 Design: logo (amazon.com)

 

Hatékony kommunikációt kívánok, üdvözlettel:

Idő = Élet. Ne töltse idejét (életét) új ügyfelek szerzésével. Legyen több ütős honlapja is a Google kereső élmezőnyében. Impulzív reklámszövegekkel maximalizálja az eladások számát. Lazítson és élvezze, ahogy az online vevőszerző folyamat magától termeli a profitot. Köszönöm figyelmét, tisztelettel:

Verdes János
Verdes János
Világszínvonalú honlapkészítés, automatizált keresőoptimalizálás és impulzív reklámszövegírás szakértője

 

 66 ember köszönte meg.

 

  Verdes János - Honlapkészítés, weboldal készítés
SEOZSENI Belépés
Weblap készítés blog
Kulcscsó sűrűség számítás
Honlapkészítés tippek: címsor ebook (honlap ingyen)
Weboldal készítés tippek: szövegírás ebook (honlap ingyen)