Ebben az esettanulmányban az egyedi design csapatunk eddigi egyik legtöbb fejtörést okozó projektjét mutatjuk be nektek. A PiszkeShop webáruháznak egy teljesen új webáruházat hoztunk létre melynek az arculatát is mi terveztük.
A kihívást esetükben a különböző márka arculatok egységes megjelenítése jelentette. Általában egy márka megjelenítése is komoly feladat, itt pedig háromszorosan is részünk volt benne. Rengeteg ötletelésre volt szükség arról, hogy:
- Hogyan jelenítsünk meg 3 különböző márkát (Piszke papír, Aby’s Natural Food és Sutter Zero) egy arculatban úgy, hogy az harmonikus, letisztult és modern legyen?
- Hogyan fektessünk megfelelő hangsúlyt az edukációs tartalmak megjelenítésére?
Arculattervezés
Első lépésként az arculati elemeket határoztuk meg, melyek a tipográfiai elemek, színek, formák és logó. Igyekeztünk úgy kialakítani a színvilágot, hogy az tükrözze a cég környezettudatos szemléletét és összhangban legyen mindhárom márka már létező arculati elemeivel.
Több logótervet is készítettünk, majd mikor megtaláltuk a megfelelő irányt, tovább finomítottunk ezeken, amíg el nem jutottunk a végleges verzióig:
Tartalomtervezés és drótváz
Az arculati elemek mellett folyamatos kapcsolattartásban voltunk a webáruház képviselőjével, hogy minél átfogóbban megismerjük az igényeit, a márkát és a webáruház célcsoportját. Ugyanis egy szép webáruház még nem minden, a lényeg a megfelelő felhasználói élményen alapszik. Minél jobban megismerjük a termékkört és a célcsoportot, annál jobban meg tudjuk tervezni, hogy milyen információkat fontos feltüntetni a webáruházban. A másik lényegi kérdés pedig az, hogy ezt hol és hogyan tesszük meg?
Mi az a drótváz és hogyan néz ki?
A drótváz (angolul wireframe) a weboldal vagy esetünkben a webáruház váza. A drótváz készítésekor határozzuk meg azt, hogy mi, hol és milyen méretben fog megjelenni a webáruház fő és aloldalain. Tehát, vizuálisan ábrázoljuk benne, hogy hol lesznek az egyes szöveges területek, képek, gombok, navigációs menü, stb. és ezek hogyan működnek.
A drótváz egy fekete-fehér vázlat, nincsenek benne színek, képek, így semmiképp nem összekeverendő a látványtervvel. Hogy mi a kettő között a különbség az hamarosan kiderül.
A PiszkeShop drótváza:
Teljes nagyságért kattints a képre!
Látványterv elkészítése
A látványterv legtöbb esetben a drótváz alapján készül.
A látványterv készítés során a drótvázat “kiszínezzük”, vagyis a meghatározott arculati elemekkel, képi elemekkel elkészítjük a webáruház kinézetét, amivel majd a látogató is találkozik az oldal megnyitásakor.
Gyakori hiba, hogy a látványterv és a drótváz szerepét sokan egyben kezelik, azonban ezt semmiképp nem javasoljuk, hiszen a látványterven módosítani mindig egy időigényesebb és költségesebb megoldás.
Ügyfeleink esetében és a PiszkeShop esetében is, csapatunk minden oldal látványtervét elkészíti, amellyel a látogató találkozhat az oldal böngészése során. Párat említve ezekből:
- főoldal
- termék és kategória oldalak
- megrendelési folyamat oldalai
- blog oldalak
- kapcsolat oldal
- 404
Kiemelt fókusz a mobilos nézeten
Ennél a projektnél (de ez igaz általában az összesre is) kiemelt figyelmet fordítottunk az asztali nézet mellett a mobil nézet kialakítására is, hiszen manapság a látogatók zöme mobilról böngészi az oldalakat – így ha az kellően áttekinthető és könnyen navigálható, nagyobb arányban is konvertál. A mobilos nézeteket látványterv szintjén is kidolgoztunk.
PiszkeShop látványterve
A főoldal látványtervét teljes nagyságban is megtekintheted ezen a linken és összevetheted a fenti drótvázzal, illetve a PiszkeShop.hu webáruház oldalát meglátogatva a további aloldalakat (pl.: termék oldal, kategória oldal, blog) is megnézheted.
3 brand 1 arculat
Az egyik legnagyobb nehézség a projekt során az volt számunkra, hogy egy teljesen új oldalt kellett megterveznünk, ami 3 márkát foglal magába. Fontos volt, hogy a márkák között ne legyen jelentős eltérés, hanem harmonikusan, letisztultan és a modern trendeknek megfelelően jelenjenek meg az oldalon, fókuszban tartva azt, hogy egyes termékkörök és a márkák sok edukációt igényelnek.
Ezt úgy értük el, hogy az arculati színekben meghatározott 3 fő szín képviseli az egyes márkákat az oldal teljes struktúrájában és az egyedi kialakítású, de hasonló struktúrájú márka aloldalakon is:
Kiemelt hangsúly az edukáción – Blog
A webáruház esetében jelentős hangsúlyt kellett fektetnünk az edukációs oldalakra is, mert a termékkörök ezt megkövetelték.
Ennek érdekében több különálló blog oldalt is készítettünk:
- Egészséges életmód blog
Célja az egészséges életmódra nevelés, segítségnyújtás a helyes táplálkozáshoz. A blogon lehetőség van témakörönként szűrni a cikkeket.
- Receptek blog
Itt a legjobb gluténmentes receptek, vegán ötletek kaptak helyet, amiket akár az Aby’s termékek felhasználásával is elkészíthetők.
Ennél a blognál fontos volt, hogy a receptekhez a márka termékeit is hozzá tudjuk kapcsolni, úgy, hogy azok már a recept oldaláról is kosárba helyezhetők és megvásárolhatók legyenek. Emellett a fontos információkat, mint az ételek elkészítési és sütési ideje, kiemelve jelenítettük meg – ezek mind egyedi fejlesztést igényelnek.
Visszatekintve a projektre elmondhatjuk, hogy nagyon élveztük minden percét, mert kiélhettük a kreativitásunkat. Örülünk, hogy a sok tervezés meghozta a kívánt eredményt:
“Cégcsoportunk kiterjedt termékpalettával rendelkezik, melynek közös felületen, egységes arculattal történő értékesítése nem kis fejtörést okozott számunka. Szerencsére a Shoprenter csapata az első pillanattól kezdve médiumokat meghazudtoló módon olvasta ki fejünkből a sokszor egészen kusza gondolatokat, és egy minden téren kifinomult, ízléses, szemet kápráztató designt raktak össze számunkra.”
– Gyarmati Dávid, PiszkeShop.hu
Ha Te is hasonló problémával küzdesz vagy csak felismerted, mennyire fontos ma már az egyedi arculat, keresd fel csapatunkat! Webáruházadhoz olyan egyedi designt tervezünk és készítünk, amely kutatásokra építve, kimutathatóan növeli bevételeidet. A Shoprenter téma váltástól, annak testreszabásán át, saját téma fejlesztésben is tudunk Neked segíteni.
A szerzőről:
