A hajorvos.hu weboldal újratervezése WEBDESIGN oldalról!
Már rég fontolgattam, hogy egyszer leírom, hogyan történik egy honlap „újrahangolása” az én esetemben. Végre eljött az idő, és megérkezett az az ügyfél, akit a legizgalmasabbnak találtam és ő nem más, mint Gyenese Gabriella, a mesterfodrász és hajorvos.
A címben megemlítem, hogy „esettanulmány”, ugyanakkor írás közben jöttem rá, hogy egy blog bejegyzésben nagyon nehéz lesz minden részletre kiterjedően kifejteni azt, ahogyan egy weboldal újjászületik, ezért ebben a cikkben kizárólag a webdesign oldalról fogom ezt felvázolni.
(Nem fogom részletezni a SEO szempontok szerinti tevékenységeket, a kulcsszókutatást, a szövegírást, a honlap gyorsításával kapcsolatos lépéseket, hogy milyen bővítményeket vagy biztonsági intézkedéseket végeztem stb.)
1. Hogyan talált rám ügyfelem? Kezdő lépések.
Gabinak kedves ismerősöm, Csont Attila ajánlott amiért nagyon hálás vagyok. Attila egyből tudta, hogy mi meg fogjuk találni a közös hangot és így is lett.
Gabi felhívott telefonon és elmondta mit szeretne. Már az első beszélgetésünk jó hangulatban telt, és egyből szimpatikusak is lettünk egymásnak. A feladat pedig az volt, hogy a jelenlegi honlapját szeretné teljesen felújítani, mert nem működik megfelelően, és elavult.
Elkértem a honlap címét, hogy körülnézzek, elemezzem és árajánlatot tudjak készíteni részére.
2. Régi honlap elemzése, árajánlat, megállapodás
Gabi régi honlapja valóban nem működött megfelelően. Rögtön a kezdő képernyőn és minden oldalon, hibaüzenet jelent meg, technikai problémák mellett a honlap stílusában sem volt összhang, sok volt az ismétlés, de inkább össze is foglalom a legfontosabbakat:
- Hibaüzenet az oldalon, ami rontja az odalátogatók honlap iránti bizalmát.
- SSL tanúsítvány hiánya, ami szintén nem biztonságos honlap üzenetét hordozza.
- A nem megfelelő betűtípus használata. A legelső és legfontosabb, hogy a honlapra választott font, teljes mértékben támogassa a saját nyelvünk összes karakterét, mert ha nem, előfordulhat, hogy a hiányzó betű helyett „krikszkrakszok”, vagy egy teljesen más betűtípus szerepel, ami nagyon szemet szúr. Gabi honlapjának esetében ez is felfedezhető volt.
- Több olyan menüpont szerepelt az oldalon, amik nem mutattak sehová.
- A fő képernyőn a kép eltakarta a szöveget nem volt rendesen olvasható.
- Hasznos tartalom hiányzott, nem derült ki az adott oldalon, hogy a látogatónak miben tud segíteni.
- Kissé bonyolult és átláthatatlan volt az oldal, nem lehetett az árakat sem egyszerűen megtalálni.
- Nem volt rajta egyértelmű cselekvésre buzdítás – ahogy az angolok mondják: „call to action”. Hiába van a weblapnak nagy látogatottsága, ha nem ösztönözzük az olvasókat cselekedetre.
Készítettem egy javaslatot Gabinak, hogyan képzelem én el a honlapját, igyekeztem úgy megfogalmazni, hogy ő is el tudja képzelni. Valamint a javaslat mellé egy árajánlatot is adtam.
Gabi elfogadta az árajánlatot, de ugyanakkor arra kért, hogy mielőtt nekivágunk a közös munkának, szeretne személyesen is megismerni, felajánlotta, hogy töltsünk együtt egy napot, ismerjem meg a szalonját, próbáljak ki pár kezelést nála, mert úgy gondolja, ez sokat fog segíteni a honlap tervezése során.
Fantasztikus ötletnek gondoltam én is!
3. Személyes találkozás ügyfelemmel
A közös „csajos” nap nagyszerűen sikerült, olyan, mintha ezer éve ismertük volna már egymást és ez szuper érzés volt. Gabinak tökéletesen igaza volt, annyira egyedi volt ő is és a szalonja is, hogy kevés lett volna mindezt fotók alapján megismerni és erről honlapot készíteni.
Gabi olyat tud, amit más nem, senkisem. Amikor elmész hozzá, igazán nőnek érzed magad, valóban megszépülsz és pozitív energiával töltekezel fel.
Most, írás közben is rendesen fókuszálnom kell, hogy a témáról írjak, mert annyi mindent lehetne írni arról a napról, ami másokat is motivál. Na de majd egyszer lesz egy magán blog oldalam is, ahová meg fogom írni az emberi kapcsolat oldalát is a dolognak.
Természetesen a honlap részleteit is átbeszéltük, sok kérdést küldtem el neki korábban, és azokat mindet átvettük, hogy mire is gondolok és miért is van erre szükség. (Készülök egy külön blog bejegyzéssel is, ami pont arról fog szólni, hogy milyen kérdésekkel legyünk tisztába, mielőtt a honlapot tervezünk vagy újra tervezünk.)
A személyes találkozás, a szalonjának hangulata és a színei, mind hozzájárultak ahhoz, hogy milyen legyen a hajorvos.hu oldal új dizájnja.
4. Kezdődik a munka
Hol is tartunk eddig?
- Megvan a régi honlap elemzése, és ez által a javítandó hibák listája technikai oldalról és tartalmilag is
- Az elvégzendő munkáról megállapodást írtunk alá
- Megvan az új honlapnak a célja, az újonnan felkerülő szolgáltatások listája, valamint a célcsoport
- Megvan az új honlap felépítése, megbeszéltük milyen oldalakra lesz szükség, és azokat milyen tartalommal kell majd feltölteni
- Megismertem Gabi személyiségét, amit a honlapjában is meg kell mutatni.
- Láttam a szalont, annak hangulatát, a berendezést, a színeket, amit szintén vissza kellene tükrözni a holnapjának
- Megismertem és kipróbáltam néhány szolgáltatást, megismertem milyen eszközökkel és termékekkel dolgozik
- Van még jó pár kérdés, amit Gabinak meg kell válaszolni, én az eddigiek alapján elkezdhetem a munkát.
Feladatok, kiinduló pontok:
- Először is a domain nevet át kellett hozni egy saját tárhelyre, mert jelenleg nem Gabi saját tulajdonában volt, úgy döntöttünk, hogy ahol a domain név van, annál a szolgáltatónál vásárolunk Gabinak egy saját tárhelyet.
- Elvégeztem néhány technikai, háttérmunkálatot (régi honlapról a szükséges mentések elvégzése, domain költöztetés, SSL tanúsítvány beállítása, WordPress telepítése, bővítmények telepítése, stb)
Viszlát régi honlap:
Amikor Gabinak szóltam, hogy a régi honlap megszűnt, helyette egy átmeneti képernyőt állítottam be, amíg az új honlap készül, szerintem akkor neki hatalmasat dobbant a szíve, és szerintem akkor tudatosult benne, hogy tényleg meg fog újulni, elkezdődött, nincs visszaút. Akkor kezdett csak igazán izgatottá válni, érezni, hogy amiről eddig csak beszéltünk, most már az első látható eredménye is megszületett.
Folytassuk a kiinduló pontokkal:
- A honlap célja: Gabi meglévő ügyfelei mellé, új ügyfelek szerzése, a szolgáltatás színvonalához emelni a honlap színvonalát is! A honlap tükrözze, hogy sokkal több, mint mesterfodrász, sokkal több, mint fodrász szalon.
- Célcsoport: olyan nők és férfiak, akik igényesek magukra, akiknek van céljuk, és tesznek is érte. Tudják, hogy az életben vannak lejtők, és tisztában vannak vele, ha éppen a lejtő alján vannak, akkor abból ki is kell mászni és nem félnek segítséget kérni, tesznek azért, hogy az életük a lehető legjobb legyen, nem ragadnak benne egy negatív helyzetben. Tudatosok az élet minden területén.
- Honlap design 1: adja vissza tulajdonosának értékrendjét, ami egy tiszta, keresztény szemlélet, a jóság, a segíteni akarást szimbolizálja. Ugyanakkor mivel Gabi a legmodernebb, eszközöket, technológiát és a legprofibb, egészségre ártalmatlan termékeket részesíti előnyben, és folyamatosan képezi magát, a honlap ezt a modern, újító szemléletet is jelképezze. Keveredjen a régi az újjal.
- Honlap design 2: tartsuk meg a jelenlegi logót, amihez Gabi ragaszkodott.
- Honlap design 3: Gabi kedvenc színei a piros és fekete, ami megjelenik a szalonjában is, ezt szeretné tovább vinni a honlapon is.
- Honlap szerkezete: Lesz egy Főoldal, majd külön oldalakon: Szolgáltatások – Rólam – Árak – Kapcsolat.
Mint ahogy a GPS is szokta mondani: „Minden megvan mehetünk”, jelen esetben kezdődhet a konkrét tervezés.
5. Első tervek születése előtti teendők
Amikor összeáll a kép, és rendszerezem, milyen információ van eddig, utána szoktam ellenőrizni az ügyféligényeket.
SZÍNEK
Ez azt jelenti például, hogy a színeket tekintve, mivel a fekete-piros szín dominál, ellenőrzöm, hogy a színek összhangban vannak-e a célcsoporttal? Az rendben van, hogy Gabinak a kedvenc színei, és a szalon berendezésében is domináns színek, de azért a célcsoportot kell megnyerni és ösztönözni, hogy ellátogasson és igénybe vegye a szolgáltatást.
Piros szín:
A piros szín az erő színe, a föld elemével és a tűz elemével is egyaránt kapcsolódó szín. Meleg szín, energiát adó, intenzív és tartós, így kitartásra, a tüzed és a figyelmed megtartására és összpontosításra ösztönöz.
A piros szín kedvelői ambiciózusak, és törtetők, úttörők a szó pozitív értelmében. Szeretnek és általában tudnak is irányítani, vezetni. Nagyratörőek és kitartásuknak, szorgalmuknak köszönhetően sikeresek is.
Amikor a piros színt túlsúlyba helyezzük, felborul az egyensúly, tekintve, hogy intenzív, meghatározó szín.
Fekete szín:
Egyszerre sugall eleganciát és ridegséget, erőt, merevséget, de más színekkel kombinálva csodát érhetünk el vele. A piros-fekete kombináció erőt és tiszteletet mutat. A fekete, olyan erőt, tiszteletet sugároz, mint semmi más, ellenben nagyon elegáns.
Megállapítás: a célcsoporthoz és Gabihoz is megfelelő szína piros és a fekete is, azaz használható. Amire figyelni kell, hogy a piros ne legyen nagyon túlsúlyban, azaz ezt a színt fogom használni a különböző címeknél, kiemeléseknél, valamint az akció gomboknál, valamint becsempészek esetleg valamilyen design elemet is pirossal, de mértékkel.
Mi lenne, ha a háttér fekete lenne és a betű színe pedig fehér? A fehér-fekete szín az örök klasszikus és elegáns, az előbbiekben leírt piros színek használatával, arra jutottam, ez a kombináció egyben nagyon merész, de ugyanakkor igazán egyedi, és elegáns megjelenést fog adni a honlapnak. A fehér szín esetében egyébként is a tisztaságra, a gyógyulásra, a jóságra asszociálunk, amit szintén Gabi képvisel.
Egy kis csavar
Amikor Gabi szalonjában jártam, megragadta figyelmemet a falon lévő fekete tapéta. Ezt felhasználva arra következtetésre jutottam, hogy nem „sima” fekete háttérrel fogok dolgozni, hanem keresek egy hasonló fekete „tapétát”, amit meg is találtam.
BETŰTIPUS
A betűtípus kiválasztása során a logót vettem figyelembe. Mivel egy kalligrafikus betűkből álló név logóról van szó, amit meg kell tartanunk, ehhez szerettem volna olyan fontot választani, ami összhangban van vele. Ezért hosszas keresgélés után találtam rá az „Almendra” fontra. Ez hasonlít a logóban használt karakterekre. Az Almendra egy kalligrafián alapuló betűkészlet. Stílusa összefügg a chancery és a gótikus kezekkel. A címek és egyéb kiemelések során ezt a fontot használtam. A másik font pedig a „Raleway” amit a hosszabb szövegek gazdája lett, könnyen, jól olvasható, elegáns betűtípus.
INSPIRÁCIÓ, ÜGYFELEM SZOLGÁLTATÁSAINAK MEGISMERÉSE
A színek, fontok kiválasztása után elkezdtem nézelődni, inspirálódni, ötleteket gyűjteni a honlap dizájnnal kapcsolatban. Megnéztem több konkurens oldalt is, de érdekes módon egyik sem tetszett igazán, pontosabban, egyiket sem tudtam Gabinak elképzelni.
Mivel rögtön az elején kitaláltam, hogy a háttér egy fekete „tapéta” lesz, így nem is néztem a dizájn többet, inkább azt vizsgáltam, hogy a Főoldalon milyen blokkokat és azt hogyan is helyezzük el. Közben Gabitól megkaptam a válaszokat, írt bemutatkozó szöveget magáról, írt a szolgáltatásairól. Ezeket feldolgoztam, belemerültem és így közelebb kerültem ahhoz, hogy a honlap hogyan is épüljön fel.
Először papíron, ceruzával lerajzoltam a Főoldalt.
Kértem Gabit, hogy amennyiben lehetősége van rá, mindenképpen készüljenek profi fotók a szalonról és főleg róla. Amíg én dolgoztam a honlapon, ő a fotóssal egyeztetett és készültek a képek.
6. Első weboldal design tervek
A korábban papírra lerajzolt tervemet, végre a képernyőn is sikerült megvalósítani.
A teljes honlap háttere a fekete tapéta lett, aminek az átlátszóságát persze úgy állítottam be, hogy a szöveg jól olvasható legyen, de azért a mintát is lehessen látni. A fő címsorok és pár mondat, amit ki szerettem volna emelni, pirossal a többi szöveg fehér betűvel szerepel.
Mivel az oldalra sok kép is felkerült a képeknek adtam még egy vékony piros keretet, ezzel növeltem még a piros szín „mennyiségét”.
A legelső változatban, amit Gabinak elküldtem, ezek a fő elemek voltak meg. Nem volt még a végleges szöveg, csak helyettesítő, un. „lorem ipsum” kitöltő szöveg volt a legtöbb helyen. Most a lényeg az volt, hogy Gabinak tetszik-e ez a merész stílus, a színek, a formák, a betűtípusok, a fotók elhelyezkedése, az összhatás.
Ha ez tetszik neki, akkor ezzel tudok dolgozni tovább, de ha nem, akkor jöhet a következő változat.
Nagyon kíváncsi voltam, tud-e azonosulni Gabi azzal, amit lát és tádáááám, tetszett neki! Nagyon örültem neki, és ezzel a stílussal dolgozhattam tovább..
Természetesen a végleges változat előtt volt ám sok munka, de most itt a lényeg a design elemeken volt.
7. Folytatódik a munka...
Igazából szerencsés helyzetben voltam, mert ügyfelem elsőre elfogadta a dizájn elemeket. Így a további tennivaló arról szólt, hogy az összes többi oldalt felépítsem.
Ahogy egyre jobban megismertem a szolgáltatásokat, bizonyos részek átalakítást igényeltek. A fő tervezési elemek persze maradtak, de a szerkezete, elrendezése a blokkok változtak.
Nézzünk egy példát.
A főoldal szerepe az lenne, hogy az odalátogató számára kiderüljön, miről is szól az oldal, kinek szól, miben segít. Ha sikerült felkelteni az érdeklődést, tovább olvashat róla, a lényeg, hogy irányítani kell az olvasót.
Ügyfelem 12 szolgáltatást sorolt fel és írta le hozzá a tartalmat, ami nagyon sok:
- Női hajvágás
- Férfi hajvágás
- Mosás, szárítás
- Hajfestés, szőkítés
- Dauer, tartós hullám
- Hajkiegyenesítés
- Hajszerkezet építés
- Hajvizsgálat és diagnosztika
- Fejmasszázs
- Acces Bars kezelés
- Lézer sisak
- Elektro Akupunktúrás vizsgálat
Először, mint az összes szolgáltatást megjelenítettem egy-egy boxban, a szolgáltatást kifejező fotóval illusztrálva, de amikor például odaírtam, hogy „Női hajvágás”, „Mosás-szárítás”, nem találtam elég izgalmasnak. Ha pedig ki akartam fejteni bővebben, akkor túl sok szöveget kellett volna írni, pedig ide olyan kell, amit, ha az érdeklődő elolvas, magára ismer, mert eltaláltuk az ő vágyát.
Ezért azt javasoltam Gabinak, hogy a szolgáltatásait csoportosítani kellene, és a legfontosabb jellemzőket kiemelni, amit nyújt és így felkelteni a vágyat. Ezért megvizsgáltam szolgáltatásonként, hogy milyen közös pontot találok, és megszületett az a végleges 5 csoport, amiben ügyfelem tevékenykedik. Ezáltal sokkal átláthatóbb lett az oldal, kevesebbet is kell olvasni ahhoz, hogy megtaláljuk a lényeget.
1.csoport: Frizura készítés:
- Női-Férfi hajvágás
- Mosás, szárítás
- Hajfestés, szőkítés
- Dauer, tartós hullám
2.csoport: Speciális hajkezelések:
- Hajkiegyenesítés
- Hajszerkezet építés
3.csoport: Hajvizsgálat és diagnosztika
4.csoport: Terápiás fejkezelések:
- Fejmasszázs
- Acces Bars kezelés
- Lézer sisak
5.csoport: Elektro Akupunktúrás Vizsgálat
Szöveg a honlapon
Bár az írásom elején írtam, hogy design oldalról fogom leírni a honlap újjászületését, mégis picit meg kell említenem a felkerülő szövegek születését is.
Egyeztetjük ügyfeleimmel, hogy milyen információ kerüljön a honlapra, és ahhoz kérem is hozzá a szöveget. A megkapott szöveg mennyisége alapján látom, hogy milyen blokkot építsek fel hozzá. Lehet fordítva is csinálni, megmutatom a szerkezetet és aztán kérek hozzá szöveget. Ez nagyon ügyfél függő (ezt nem részletezem miért, megérne egy külön témát).
Lehet úgy is, hogy egy szakértőt bízunk meg vele, egy szövegírót, aki a megadott információk alapján megírja az ügyfélnek a szöveget és azt építem be a honlapba.
Jelen esetben, Gabi szép szorgalmasan, bővebben írt a szolgáltatásairól, ami sok esetben túl részletes is volt. Én pedig felülvizsgáltam és igazából „kiszíneztem”, amit ő irt, kicsit izgalmasabbá tettem és lerövidítettem. Szeretek szöveget írni, és tanulmányozom a szövegírást, ezért vállalom be. Szükség esetén az ügyfelem helyett is megírom, erre is volt már példa.
A legjobb az volt az egészben, hogy a szolgáltatásait saját bőrömön tapasztaltam, eszközeit saját szememmel láttam, engem teljesen meggyőzött, amit ő nyújt és ezt nagyon-nagyon el akartam mondani a világnak.
A felkerülő végleges szöveg tehát a mi kettőnk munkája lett, és a szöveg mennyiségéhez igazítottam a design elemeket.
Néhány fotó az új honlapról:
8. Összegzés
Nos, ha eddig elolvastad ezt a bejegyzést, nagyon hálás vagyok érte, már nem sok van hátra, ideje összegezni.
Nézzük csak, akkor milyen lépéseket kellett megtenni, mire elkészült az oldal:
- Kapcsolatfelvétel, igények megbeszélése, szükség esetén személyes találkozás
- Első kérdések, ami az árajánlathoz kell
- Megállapodás a munkáról
- További kérdések, ami a honlap szerkezeti felépítéséhez kell, csak néhány példa:
- Mi az a szolgáltatás, amire az oldal készül?
- Milyen lesz az ügyfeleid élete, miután igény bevette a szolgáltatásod?
- Hogyan éred el, hogy valóban jó legyen ügyfeleidnek, ha igénybe veszik a szolgáltatásod?
- Mi az, ami kiemel téged a konkurenciák közöl?
- Szolgáltatásod érzelmi és gyakorlati előnye?
- Ki áll a szolgáltatás mögött, ki vagy te?
- Milyen szolgáltatásokat fejtsünk ki az oldalon, részletes leírása?
- Célcsoporttal kapcsolatos kérdések (pl. mi a problémája, mi a megoldásod rá, mi az eredmény….)
- És még sok-sok más……
- Technikai, háttér munkák elvégzése (domain név, tárhely, telepítések..)
- Inspiráció, konkurencia elemzés, célcsoport elemzés, kulcsszókutatás…
- Első tervek papíron
- Első tervek az ügyfélnek, irányba állunk
- Szövegfeldolgozás, szövegírás
- A honlap végleges szerkezetének és design elemek kialakítása
- Sok-sok ellenőrzés, minden megfelelően működik…?
- Véglegesítés, lezárás, átadás
- Nyilvánosságnak megmutatás, szívdobogás ezerrel…
- Legjobb esetben, mint itt is: nem csak ügyfelet, de barátot is nyerünk, és számíthatunk egymásra.
Szerencsére több ügyféllel volt már dolgom, több honlap is született. Még ennél is nagyobb szerencse, sőt mondhatom áldás, hogy ügyfeleim mind olyan tevékenységet végeznek, amitől nagyon megkedvelem őket. Nagyon szeretek úgy dolgozni, hogy amikor az adott ügyfelemre kerül a sor, akkor 4-5 napig csak vele foglalkozok. Teljesen elmerülök a szakmájában, és az Ő ügyfelei helyébe is beleképzelem magam. Így Gabi esetében voltam mesterfodrász, belemerültem a hajelemzésbe, megismertem olyan szakmai dolgokat, olyan szakmai hozzáállást, amitől elcsodálkoztam, amitől tiszteltem őt és hálás voltam, hogy van Ő a világnak. Ilyenkor az ember többet is ad annál, mint amit elvállal, és sokkal lelkesebben végzi a munkáját.
Kívánom mindenkinek ezt az érzést!
Gabi honlapja: hajorvos.hu
Szeretnél Te is velem dolgozni? Keress bizalommal: Winkler Mónika – Mona design
