A honlaptervezés nálunk nem úgy zajlik, hogy egy valamilyen online felületen ide-oda húzunk szövegdobozokat, képeket és linkeket, aztán elmentjük és kész. Ez annál egy kicsit bonyolultabb…
A honlap tervezése durván 2 nagy lépésben zajlik:
- a honlap szerkezetének felépítése – vagyis párhuzammal élve annak megtervezése és “legyártása”, amitől egy autó megy
- a honlap látványelemeinek tervezése és elkészítése – vagyis az autó fényezése, az ülések kárpitjának kiválasztása
Ha tökéletesen működő dolgot szeretnénk, a kettőt együtt kell elkészíteni, egymással összhangban. A jó szerkezet elketyeg friss fényezés nélkül, de egy csodálatos fényezett kasznival nem jutunk sehova, ha hiányzik a motor vagy a kerék.
Mit szeretne az ügyfél, amikor honlapot akar?
Az ügyfelek 99%-a csak a fényezésre, vagyis a honlap design-ra kíváncsi.
Adott esetben az, hogy egy motor nélküli autót kapott, akkor derül ki a számára, amikor már benne ül, kifizette és szeretne eljutni vele valahová. (“Kész a honlapom, látogató kéne rá.”)
Mi úgy dolgozunk, hogy az ügyfél hosszú távon is elégedett legyen, vagyis egy jól működő ÉS szép honlapot kapjon. A szépség azonban szubjektív kategória – általában ha egy ügyfél úgy kezdi, hogy XY grafikus csak dolgozott, dolgozott, de hát mégse tetszett, amit csinált, az egy figyelmeztető jel, hogy itt kár is erőlködni, ez egy típus… (Ha Ön is ilyen, akkor megköszönöm, hogy eddig is olvasott!)
A honlap design
Mi van akkor, ha csak a design-t csináljuk meg?
1. időben nem sokat nyerünk, mi ugyanis nem Photoshop virtuózok vagyunk, mi egyből a funkcionálisan már működő rendszerbe programozunk. Akinek egy látványterv kell, az fordulon egy tisztán grafikai tervezéssel foglalkozó céghez. (Aztán majd ha lemarad néhány funkciónak a gombja, akkor küzdhet a programozó…)
2. a honlap design nem létezhet pusztán Lorem ipsum szöveggel és keresztben áthúzott, vízjelezett képekkel, amiket majd később megveszünk…
A honlap szövege
Ilyenkor derül ki ugyanis, hogy fogalma sincs az ügyfélnek, hogy a most még csinos Lorem ipsum helyére mit írjon, az hová linkeljen, és egyáltalán, mi van, ha nem fér ki?
Az igazán ütős honlap design azért ütős, mert a szöveg és a kép összhangban van. Amiről beszélek, azt mutatom képen. Ha a Lorem ipsumról beszélek, mit teszek a képre?
Funkciók
Többször is találkoztunk már olyannal, hogy a grafikus által megálmodott design-ból hiányzott a Belépés gomb egy fórumokkal és szavazásokkal megfűszerezett, interaktívnak szánt honlapon…
Tessék tudomásul venni, hogy ehhez kell webes gyakorlat, hogy mikor milyen funciót használjunk és mit hova tegyünk!
Marketing stratégia
A grafikus által megálmodott design szinte természetszerűleg nem foglalkozik a cég marketing stratégiájával, mert hát miért is tenné, a grafikusnak nem ez a szakmája… A honlap azonban nem egy festmény vagy művészeti alkotás, hanem egy marketing eszköz, aminek az a célja, hogy eladjon.
Vagyis:
a honlapkészítés nulla kilométerköve a marketing stratégia felállítása, áttekintése, tudatosítása!
Nemrégiben keresett meg bennünket egy cég azzal, hogy nem is tudják, mit mondjanak magukról, nekik nincs semmilyen marketing stratégiájuk, de a honlap design-t szeretnék először látni. Elköszöntünk egymástól. Mi túl kis cég vagyunk ahhoz, hogy kapacitásainkat egy homályos alapokra épített design gyártásával kössük le – az ilyen “fuss versenyt, hátha megtetszik nekünk a design-od” árát mindig más ügyfél fizeti meg…. de nem nálunk. Nálunk az fizet, akivel közösen dolgozunk először a marketingjén, aztán a honlapjának szerkezetén, végül a design-ján.
Ha kész a marketing stratégia, ha tudom, hogy üzleti szempontból mit akarok hangsúlyozni, és mindezt már szavakkal is meg tudom fogalmazni, különös tekintettel a címekre és menüpont nevekre, akkor elkezdhetek dolgozni a design-on…
A honlaptervezés első “látványeleme”: a drótváz (wireframe)
A drótváz a honlap szerkezetét mutatja meg.
A drótvázban határozzuk meg a honlap nagy egységeinek helyét, arányát, a funkciógombokat – nagy vonalakban. A drótváz ad egy skiccet arról, hogy mi hol lesz a honlapon.
Ha más készíti a vázat és más programoz, akkor a legapróbb dolognak is nagy jelentősége van.
(Nem mindegy pl. hogy egy adott szövegdoboz tartalma fix, vagy mindig változó és egy másik oldal összefoglalója (teaser)-e.)
A drótváz készülhet erre szolgáló programmal vagy a legegyszerűbb és leggyorsabb módon, ceruzával, papírra.
Drótváz a sikermarketing.hu 2013-2015 változatának főoldalához:
A honlaptervezés második “látványeleme”: hangulatok (moodboard)
A második nagy “produktum” a hangulati tábla, a moodboard. Ez a fő fotót, a színeket, a logót, a betűtípust, az apróbb látványelemeket foglalja össze, amelyek lényegében a honlap hangulatát adják meg.
Aki rendelkezik egy kevés vizuális fantáziával, a kettőből már össze tudja rakni fejben a honlapot.
A honlaptervezés végső lépése: alakítások
A drótváz és a moodboard kiindulópontként szolgál, ugyanis számos esetben kiderül, hogy bizonyos gombokat odébb kell vinni; a betűtípus szép, ha csak 2-3 szót írunk le vele, de olvashatatlan, ha az összes szöveg azzal készül; és mindenekelőtt az ügyfélnek is születnek új ötletei és kiderülhet, hogy más hangsúlyok vannak, mint eredetileg gondoltuk.
A drótváz és a moodboard tehát végső soron a végleges formába öntésnél alakul át honlappá.
Honlaptervezés: programozás, Drupal, CSS
A honlaptervezési munka nagyobb része a szerkezet programozása. Mi a honlapok készítéséhez a nyílt forráskódú Drupal rendszert használjuk, amely alapmodulokból és számos további modulból áll. (A sikermarketing 2013-as verziójának honlaptervezési esettanulmánya a Drupal nemzetközi oldalán is olvasható: Webdesign Hungary )
Az egyedi design programozásához CSS programozást használtunk, ami nem része a Drupalnak. (A CSS “gondoskodott” pl. arról, hogy a kaméleon a honlap felső régiójában színt váltson.)
A Drupal programozását bárki elsajátíthatja, de botorság lenne azt gondolni, hogy ezt bárki meg is tudja tenni. A szükséges minimum egy egyszerű, sablon honlap összekattogtatásához több mint 150 oldalnyi olvasnivaló… (Nagy Gusztáv: Drupal alapismeretek)
Mi a drótváz és moodboard használatának előnye?
A drótváz és a moodboard elsősorban azért hasznos, mert segít arra irányítani a figyelmet, ami egy honlap sikere szempontjából VALÓBAN fontos: arra, hogy a honlap valójában egy funkciókkal bíró használati “tárgy” és nem művészeti alkotás. Az előre eltervezett és minden részletében kidolgozott honlapterv ritkán ad lehetőséget a módosításra – módosítások pedig kellenek, ugyanis menet közben körvonalazódik számos szükséges funkció, megoldási lehetőség, nem is beszélve a tesztelések eredményéről.
- a logikai váztól indulunk – ehhez pedig először GONDOLKODNI kell
- a design szerepe arra korlátozódik, ami a későbbi célja is: HANGULATOT érzékeltet
- elkészítése gyorsabb és egyszerűbb, mint egy kész tervé, így nincs felesleges kiadás a Megrendelő számára
- könnyebb és gyorsabb módosítást tesz lehetővé a kezdeti szakaszban
- ideális azon Megrendelők számára, akik elkötelezett hívei és gyakorlói a logikus gondolkodásnak
