A „Hogyan készült?” blogsorozat aktuális részében a Kisbagoly Vendéglő weboldalának újratervezésének folyamatát láthatjátok. Nézzétek meg milyen volt a weboldal a munkálatok előtt és milyen lett a közös munka végén, valamint hogyan zajlott a közös munkafolyamat.
Babett és Gábor, a Kisbagoly Vendéglő tulajdonosai azzal a kéréssel kerestek meg, hogy a már meglévő weboldalukat tervezzem újra. Frissítsük az ott található információkat, egészítsük ki új elemekkel/tulajdonságokkal a weboldalt. A weboldal újratervezés mellett azt is szerették volna, hogyha a vendéglő teljes arculatát is újra tervezném, és új logót készítenék a vállalkozásuk számára.
A feladat már a felkérés pillanatában izgalmasnak és érdekesnek hangzott. Babett és Gábor akkori weboldaluk teljes újratervezésére készültek, ami mindig nagy munkát és körültekintést igényel, hogy minden részlet megfelelően kerüljön kialakításra. Plusz különlegessége volt a feladatnak, hogy az új logó kialakításában teljesen szabad kezet adtak, így szárnyalhatott a fantáziám ezen a téren.
Hogyan zajlott a közös munka? Milyen lett a végeredmény? Olvassátok el a folyamatot és ismerjétek meg jobban, hogy hogyan is dolgozom.
Weboldal újratervezés – az első lépések:
Ahogyan minden szolgáltatásom esetében, itt is egy konzultáció keretén belül történt az igények és az elvárások felmérése. Babett és Gábor nagyon felkészültek voltak, hiszen már olyan elemekkel, stílusokkal fogadtak, amelyek Nekik tetszettek, amit szeretnének a saját weboldalukon is valamilyen formában megjeleníteni.
A konzultáció során gyorsan és hatékonyan áttudtuk beszélni a leglényegesebb dolgokat (menüpontok száma/neve, aloldalak tartalmai, plusz információk megjelenítési formái – popup ablak megjelenítése, gombok elhelyezése és megnevezése stb.).
Az arculat és a logó kérdéskörében pedig csak a vállalkozás nevének – Kisbagoly Vendéglő –megjelenítése volt a fő kérés. A színek, a stílusok, a logó formája, a logóban szereplő motívum pedig mind-mind én rám volt bízva.
Weboldal újratervezés – az új arculat és logó:
Amikor az új arculat színeinek kialakításán dolgoztam, akkor elsőre arra gondoltam, hogy a Kisbagoly Vendéglő milyen szép környezetben helyezkedik el. Egy parkos, zöldövezeti területen található az étterem, ahol található egy kis tó, és igen népszerű a park a sportolni vágyók körében, hiszen futópálya is található a parkban.
Szerettem volna, ha a természet, természetközeliség megjelenne az arculatban is, így történt, hogy a zöld-zöldesbarna-barna árnyalatok adták a fő irányvonalat. Ugyanakkor az is lényeges volt, hogy a bagoly élőhelyére, az erdőre is utaljak, ezért is esett ezekre a színekre a választásom.
A bagoly karakterét pedig modernizáltam, kedvesebbé, barátságosabbá alakítottam, hiszen a vállalkozás neve, a környezet, a vállalkozás családbarát megközelítése mind-mind ehhez illik, ezt tükrözi – így jött létre a kedves kisbagoly karaktere.
Az elkészült új arculatot itt nézhetitek meg:
Weboldal újratervezés – a főoldal kialakítása:
Az új arculat elkészítését követően a főoldal kialakításával, annak dizájnolásával folytattam a munkát. A főoldalon a korábbi weboldalhoz képest sokkal több információ, kép, tartalom került felöltésre. A főoldal elkészülését követően újra egyeztettem Babettel és Gáborral, hogy Nekik tetszik-e a látvány, erre gondoltak-e, miket változtassunk esetlegesen, mivel egészítenék még ki pluszban az oldalt.
Ezt követően, a szükséges kiegészítéseket, módosításokat elvégeztem és folytatódhatott az aloldalak kialakítása.
Nézzétek meg az összehasonlítást, hogy milyen volt és milyen lett a főoldal:
Mi változott a főoldalon?
- A weboldal letisztultabb, modernebb megjelenésű lett. Számos hangulatos, aktuális, színes fényképpel, mind az étteremről, az étteremben felszolgált ételekről, mind pedig az étteremben szervezett rendezvényekről
- A színek, a betűtípusok az új arculatnak megfelelően kerültek kialakításra. Visszatérő elemekként jelennek meg a teljes weboldalon
- Új, az éttermet aktuálisan bemutató fényképek kerültek a főoldalra, amelyek váltakozva mutatják meg az étterem kül-és -belterét
- A könnyebb navigáció érdekében, már a nyitó képnél elhelyezésre kerültek a weboldal aloldalaira navigáló gombok. Így az oldalra érkezők egyből áttudnak navigálni az A’la carte étlaphoz, vagy a heti menühöz
- A főoldalon popup ablakban (felugró ablakban) megjelenik az étterem aktuális ajánlata, akciója – amit igény szerint lehet módosítani a kínálatnak megfelelően
- A főoldalon szintén megjelennek az aktuális ajánlatok külön blokkban
- Az étteremről készült bemutatkozó rész, amiben kiemelésre kerültek az étterem tulajdonságai
- Az étterem által nyújtott szolgáltatások, úgy, mint osztálytalálkozók, esküvők lebonyolítása, csoportos menü biztosítása stb. kiemelésre és felsorolásra kerültek
- A weboldalon számos új és aktuális kép készült a weboldal által kínált ételekről, így ezeket szemléltetésként feltudtuk tüntetni
- Az kapcsolati résznél az összes elérhetőség és információ feltüntetésre került, térképpel együtt, ami segíti a Vendégeket a tájékozódásban
- Az étterem közösségi média oldalára navigáló gomb több helyen is megjelenik
Weboldal újratervezés – aloldalak kialakítása:
Az aloldalak kialakításánál fontos, hogy volt, hogy a menü ajánlat, a hétvégi menü, illetve az A’la carte étlap és annak tartalma külön-külön oldalon jelenjen meg, hiszen az árak, a tartalmak, a rájuk vonatkozó információk eltérőek.
Ezért ezeket külön aloldalakként alakítottam ki őket, az arculatnak és a weboldal teljes dizájnjához illeszkedően. Miután ezzel elkészültem Babettel és Gáborral újabb konzultációt tartottunk, hogy átbeszéljük az ezekre vonatkozó esetleges változtatásokat, kiegészítéseket.
A kért módosításoknak megfelelően most már így néznek ki az aloldalak (előtte/utána képek):
Miben változtak/mivel egészültek ki az aloldalak?
- Az étterem saját fényképei kerültek felhasználásra. Ezeket a különböző ételtípusoknak megfelelően helyeztem el
- Szellősebb elrendezés került kialakításra. Külön-külön blokkokban lettek feltüntetve a választható ételek
- A fontos információk az oldal tetején kerültek elhelyezésre
- Az egész aloldal az arculatnak megfelelően került kialakításra – ismétlődő elemek vezetnek végig az oldalon
Az utolsó lépések – összefoglaló:
A weboldal teljes elkészülését követően, még a „megnyitás előtt” ismételten találkoztam Babettel és Gáborral, valamint az étterem azon személyeivel, akik az oldalt kezelik majd. Így a végső átadást egybekötöttük betanítással is, hogy a hetente változó menüsort, valamint az aktuális akciókat önállóan is tudják kezelni, frissíteni.
A weboldal az újra tervezést követően modernebb, átláthatóbb lett. Számos, saját készítésű fénykép került feltöltésre az ételekről, valamint a helyszínről magáról is.
Babett és Gábor mindig nagyon felkészült volt a találkozásaink során, már konkrét kérésekkel, elképzelésekkel fogadtak, így gyorsan és hatékonyan tudtunk együtt dolgozni. Ugyanakkor nyitottak voltak az észrevételekre és kéréseimre is – például, hogy friss fényképek készüljenek az étteremről és az ételekről.
Ez úton is szeretném megköszönni bizalmukat, hogy Engem kértek fel erre a feladatra és hozzájárulhattam az étterem weboldalának megújulásához!
Ha pedig Te is weboldalad újratervezésén gondolkozol, akkor keress bátran itt, vagy írj egy üzenetet az info@webtervezde.hu email címre és én segítek!