Biztosan kíváncsi vagy rá, melyek egy webdesigner feladatai, hogyan dolgozom. Hogyan készítek el egy logót, vagy weboldalt. Most megmutatom neked, beengedlek a kulisszák mögé. Ha látsz bármilyen, számodra felkavaró képet, az csak a véletlen műve!! 😀
Arculat készítése
Jelenleg kettő munkát is viszek párhuzamosan. Az egyik drótvázát, már egy másik bejegyzésemben is láthattad: Termelői Piac.
Az ügyfél egy helyi, bögécsfalvi termelői közösség, akik összefogtak, hogy a portékájukat rendezett, ellenőrzött körülmények között tudják eladni a környező falvakban, városokban élőknek. A piac szeptember 1-én nyit, addig zajlanak az építkezések, előkészületek. Augusztusban azonban már hirdetni szeretnék a helyi újságban, tévében valamint az interneten is – Facebookon, illetve Google hirdetésekkel 50 km körzetben élőknek. Bögécsfalva 30 km-re van Simagöröngyös, 25 km-re Nahátszentpéter, amelyek nagyobb városok rengeteg lakossal, akik élnek-halnak a termelői zöldségekért, házi tyúkért, mézért, savanyúságért!
A település sváb hagyományokat ápol, lakói rendes, dolgos emberek, a bögécs a helyi népi nyelvben a méhet jelenti, így valami enyhe utalás, népi minta megjelenhet a logóban ezekről, de egyáltalán nem kötelező és ne legyen direkt.
Első lépésként inspirálódtam a neten, képeket, színeket kerestem. Elkészítettem a moodboard-ot. Ez adja meg az alaphangulatot, ezt a vonalat, érzést visszük tovább a logó és a weboldal tervezésénél. A moodboardokat nagyon szeretem, elindítanak az úton, feltöltenek energiával ♥
Logó tervezésnél először mindig papíron próbálom megjeleníteni az elképzeléseket. Ezek nem mindig hasonlítanak a végső logóhoz, de kiinduló pontnak teljesen megfelelnek. Ahogy rajzol, szerkeszt az ember, úgy jönnek elő az ötletek.
Majd ezután Adobe Illustratorban rajzolom meg. Mindig többféle logót kell rajzolni, hiszen nem biztos, hogy elsőre elkapjuk a megbízó elgondolását.
Mivel jelen esetben a megbízó egy vintage stílusú logót szeretett volna, ezért tovább kellett gondolni a terveket. Végül ez lett belőle 🙂
A webdesinger feladatai közé tartozik, hogy a logót, a színeket, betűtípusokat a branding board-on foglalja össze. Ez adja meg a weboldal, az arculat designt.
Design tervezése
Ezután a tervek, elképzelések ismeretében, hogy mit szeretnének a weboldalon, milyen funkciói legyenek, elkészítettem a honlap főbb oldalainak a drótvázát. Jelen esetben a főoldalt, egy termelői profil oldalt, és egy webshop oldalt. Ehhez az Adobe XD programot használom. Itt még azt is meg lehet oldani, hogy az egyes oldalakat kattinthatóvá tesszük, azaz ki lehet próbálni, hogyan is fog működni a weboldalon a menü. Persze ez még nem azt jelenti, hogy készen is van, és már működik online is, ez csak prototípus.
Majd következik a design, jelenleg is itt tartok. Ezt is Adobe XD-ben szerkesztem. Ennél a szakasznál már érdemesebb több oldal látványtervét is elkészíteni. A korábbi drótvázakat használva beillesztem a képeket, szövegeket, design elemeket. Itt előfordulhat, hogy módosítjuk a drótvázhoz képest, hiszen útközben kiderülhet, hogy másképp kellene valamit elrendezni.
Az alábbi videóban láthatod, hogyan néz ki, ha prototípus nézetben szeretném látni. Ez még nem a végleges verziója webdesign-nak, hiszen még sok szöveget kell átírni benne, illetve még a blog, kapcsolat oldal hiányzik. És az is lehet, hogy a háttér design elemeit eltávolítom. De már el lehet képzelni, milyen is lesz a Termelői Piac weboldala, amikor elkészül. A prototípus arra is jó, hogy már közel eredeti méretében lássuk az oldalakat. Ilyenkor is előjöhet a módosítási vágy, mert rájön az ember, hogy hopp, azt mégsem úgy kellene 😀
Banner tervezése
Ennél a munkánál banner-eket is kértek a reklámokhoz. Azokat a munkafolyamat során bármikor el lehet készíteni, hiszen nem szerves részei a weboldalnak.
A banner megjelenhet facebookon, google-n, instagramon is. Jelen esetben 2 féle facebook bannert, és 4 féle google bannert kellet tervezni.
Amint elkészül teljesen a webdesign rész, azután lehet kódolni, HTML formátummá alakítani az oldalt. Amikor eljutok e folyamat végére, megmutatom nektek azt is! 🙂