Így készült – Fastrr design 

Az elmúlt hetekben egy redesign projektben vehettem részt, mint designer. Vagyis “csak” terveztem, de nem fejlesztettem. Ebben a bejegyzésben arról szeretnék nektek írni, hogy hogyan is zajlott le ez a folyamat és milyen lépéseken haladtunk keresztül a tervezési fázisban.  

 Röviden a feladatom volt:  

•  a weboldal közel 20 oldalának megtervezése asztali, tablet és mobil nézetben; (Igen, ez nagyjából 60 oldalnyi tervet jelent. 😉 ) 
• UI Kit-et biztosítani a fejlesztő számára, ami tartalmazza a főbb elemek, mint címsorok, szövegtörzs, gombok, menüpontok és űrlapok stílusait és állapotait. (pl. hover állapotok)

Kezdetek 

Az együttműködésre a Compass Marketing Kft. kért fel, és én éltem is a lehetőséggel. Nagyon megtisztelő volt a megkeresésük, valamint a kihívást is láttam a feladatban ezért rábólintottam.  

A Fastrrr esetében is, mint minden projektnél egy meetinggel indítottunk, ahol átbeszéltük az igényeket, a szükséges oldalakat és funkciókat, amikkel esetleg a már meglévő oldalhoz képest a redesign bővül. A meetingen elhangzottak egy dokumentumban (brief) feljegyzésre is kerültek és ennek, valamint a tartalom jelentős részének a birtokában megkezdtük a tervezést. 

Redesign ide vagy oda - a drótváz nem maradhat ki

A drótváz minden projekt esetében kulcsfontosságú. Ezen keresztül kommunikálok igazából az ügyféllel. Alkalmas arra, hogy: 

• tisztázzuk az esetleges félreértéseket, mindezt a design és a fejlesztés előtt. Ezzel pedig nem kevés időt, energiát és pénzt spórolhatunk meg.  
• lekommunikáljuk, hogy melyik tartalomnak hol érdemes megjelennie és miért.
• átbeszéljük melyik aloldalakra hogyan fog eljutni a felhasználó, tehát, hogy milyen kapcsolat lesz az oldalak között.

A Fastrrr esetében is a fenti célokat szolgálta a drótvázak elkészítése, azonban, itt még egy fontos pont volt: a programozóval is ezen keresztül tudtam egyeztetni az elképzeléseimről és a kivitelezési lehetőségekről. Ez pedig fantasztikus volt, hogy már ebben a korai fázisban volt lehetőségünk kommunikálni és változtatni, ha arra volt szükség.  

A drótvázakat az eddigiektől eltérően az új kedvenc programom a Figma segítségével készítettem el. Az Adobe XD helyett jelenleg azért döntöttem a Figma mellett, mert a prototípus elkészítése egy fokkal egyszerűbb és ez megkönnyíti és meggyorsítja  a különböző funkciók prezentálását. Arról nem is beszélve, hogy a prezentálás is nagyon szuperül működik.

A DESIGN 

A design elkészítésénél a színvilág adott volt, azonban egyértelműen nem tudta a megrendelő letenni a voksát a sötét (sötétkék hátteres, dark mode-ra hajazó megjelenés) vagy a világos (normál fehér hátteres) megjelenés mellett, ezért a kezdőlap esetében mind a kettőt elkészítettem. Ime:  

A döntés ezt követően egyértelmű volt és a világos designnal haladtunk tovább - bár a szívem a sötét felé húzott. Egyszerűen a szerelmese lettem a dark mode-nak!  

Felmerülhet benned a kérdés, hogy miért a kezdőlappal kezdtem és miért nem készítettem el egyből a többi oldal tervét is, mind például a drótvázaknál.

• Egyrészt ez a legfontosabb része a weboldalnak, így ennek kell a “legütősebbnek” lennie. Természetesen a többi oldal sem elhanyagolható, de a felhasználók többsége első körben ide érkezik, főleg, ha hirdetünk is és nem rendelkezünk külön landing page-el.  
• Valamint a tartalomból adódóan is a kezdőlap általában a legizgalmasabb, legsokszínűbb, ezért a design elemek többsége itt tökéletesen jól bemutatható és szemléltethető.  
• Nem utolsó sorban pedig  sokkal egyszerűbb egyetlen oldalon keresztül kommunikálni az elképzeléseket. Ha a kezdőlap rendben van, akkor a többi oldallal is lehet tovább haladni és az elkészült oldal design-ját “másolni”.  

 MIT ADTAM ÁT?

A Fastrrr számára végül közel 60 oldalnyi design tervet készítettem, ami nem kevés egyeztetés eredménye, de véleményem szerint minden egyes percet megért. A munkám a redesign kapcsán még itt nem ért véget!   

A főbb funkciókat prototípus formájában szemléltettem, hogy a megrendelő és a programozó is lássa, hogyan fognak ezek a részletek működni.  

Emellett UI Kit-et is készítettem, ami tartalmazza a főbb design elemeket, alkalmazott betűméreteket és az egyes elemek állapotait - például hover állapot. Példakén mutatom a UI Kit első oldalát: 

Ha velem dolgozol, akkor a fentihez hasonló folyamatra és minőségre számíthatsz végig a projekt során!  

Kedvet kaptál a közös munkához?  Kérj ajánlatot és beszéljük át a részleteket!