Hogyan adjunk át jól UI design projektet?

Picture of Serfőző Péter

Serfőző Péter

Brandstratéga, CEO @ zwoelf strategy & design
  • kezdjük el időben az átadást: ha a projekt elején ismerjük a fejlesztőt, mindenki munkája könnyebb lesz,
  • legyen folyamatos a kommunikáció: mind a fejlesztőcsapattal, mind az ügyféllel tartsuk a kapcsolatot, kövessük a változásokat,
  • használjuk a lehetőségeinket: az online eszközök sokat segíthetnek a munkánkban,
  • végül pedig örüljünk annak, ha sikerrel zárul a projekt, és felkerül a portfóliónkba!

Tartalomjegyzék

A cél és az út egyaránt fontos, avagy hogyan adjunk át UI design projektet a fejlesztők számára?

Egy projekt elindításáról és a kivitelezésről mindig sokat beszélünk, de mi van az átadással, a delivery-vel? Az alábbiakban összeszedtük, miért és hogyan érdemes jól véghezvinni az átadást.

Hogy tisztán lássunk, pontosítom, mi is maga a delivery, illetve arról is lesz szó, miért fontos a projektzárás.

Kitérek arra is, hogy kinek, mit és miért kell átadni ebben a soklépcsős folyamatban.

Beszélünk arról is, miért kell egyáltalán ilyen mértékben foglalkozni ezzel, illetve miért kell már a kezdetekkor szem előtt tartani a majdani átadást.

Végül bemutatom az átadás fő részeit és a legfontosabb szoftveres segítségeket.

Mi is az a delivery, avagy az átadás?

Mindig sokat beszélünk arról, hogyan kell jól végigvinni egy adott feladatot, illetve arról is sok infót találhatsz, hogyan kell jól kommunikálni az ügyféllel. (Például a korábbi prezentáció készítése témában írt cikkemben. ☺️

Azonban van még egy fontos mozzanata a projekteknek: az átadás. Azaz a projekt lezárása. 

A lezárás nem csak nekünk kedvez. A nagyobb feladatok ugyanis több láncszemből állnak, ahhoz pedig, hogy a láncolat, így maga a projekt sikeres legyen, a jó lezárás alapfeltétel.

Miért fontos a delivery, a projektzárás?

Az egyik legfontosabb érv, hogy nem egyedül dolgozunk. 

A projektben mind láncszemek vagyunk, és ahhoz, hogy sikeresen zárjunk egy feladatot, a láncolat többi résztvevőjének is a kezére kell dolgoznunk. (Ennyit a magányos farkas önképről…)

Így nem csak a saját munkánkat, hanem a hozzánk kerülő feladatot is átláthatóan kell továbbadnunk.

Fontos, hogy magát a zárást ne egy gyorsan letudható feladatként éld meg. Ne csak a számlázás lebegjen a szemed előtt. 

Hiszen ha kicsit más szemmel nézel a projektzárásra, sokkal eredményesebben élheted meg azt. Nem csak új ügyfelek, hanem akár már meglévők esetén is bizalmi szempont a precíz lezárás.

Miért kell odafigyelni az átadás mikéntjére?

Elsősorban szem előtt kell tartanunk, hogy az átadás sikeressége magára a projektre is hatással van. 

Mit értünk sikeres projekt alatt designer szemszögből? Ha egy projekt eredményesen zárul, a portfólió részévé válik. 

Ehhez arra is nagy szükség van, hogy a designer és a fejlesztő közötti kommunikáció gördülékenyen menjen. Hiába tervezünk meg valamit tökéletesen, ha az átadás során félremegy az üzenet, és a fejlesztő egy teljesen más végeredményt mutat.

Ezért tehát nagyon fontos mozzanat, hogy a designer átgondoltan adja át a fejlesztés részére a projektet, hiszen teljesen másképp gondolkozunk, mint a fejlesztő.

Designerként fontos, hogy a fejlesztő nyelvén is értsünk, így megkímélve magunkat a felesleges köröktől.
Két szemlélet, egy cél.
Két szemlélet, egy cél. Fotó: Pexels

Már a projekt elején szem előtt kell tartani az átadást

Gondolnád, hogy maga az átadás már a projekt elején elkezdődik?

Elsősorban tudnunk kell, kié lesz a fejlesztés, hiszen minél később kerül bele a folyamatba a fejlesztő, annál könnyebben siklik majd félre a projekt.

Fontos, hogy már a kezdeteknél leüljünk a fejlesztővel a fő csapásvonalak kialakítása miatt. Ha ugyanis ezen a ponton egyértelműsítjük, milyen rendszereket, grideket használ, azzal mindkét fél munkáját megkönnyítjük.
.

Hiszen így a tervezés során gördülékeny, a fejlesztő igényeihez (is) passzoló folyamatokat dolgozhatunk ki. 

Ez költséghatékonyság szempontjából is kiemelkedően fontos, hiszen a tervezés és a kivitelezés összhangja ehhez elengedhetetlen. Sok felesleges munkaórától szabadíthatjuk meg magunkat (és a fejlesztőt is), ami pedig ügyfél-elégedettség szempontjából sem másodlagos.

A fő feladat az, hogy a design látásmód illeszkedjen a technikai látásmóddal. Mit tehetünk ezért? A pixelpontosság ez esetben azt jelenti, hogy design szemszögből átgondolt és jól illeszkedő terveket adunk át a fejlesztés kezébe. 

Design és technikai látásmód - UI design
Design és technikai látásmód – UI design

Lássuk, hogyan érhetjük ezt el.

A UI átadás átadás két fő része

Az átadáshoz szükségünk lesz egy átlátható dokumentációra, valamint a személyes egyeztetést is kiemelten kell kezelnünk.

1. Ezért fontos a dokumentáció

A dokumentációhoz bármikor visszanyúlhatunk, ami segíthet a későbbi fejlesztésekben, a kérdések megválaszolásában.

Azonban figyeljünk arra, hogy ne essünk át a ló túloldalára, és ne dokumentáljuk túl a projektet. Nincs szükség több száz oldalas dokumentumra, de a túl kevés információ sem előnyös.

Mit tartalmaz a dokumentáció?

  • elemkészlet (UI design library, design system),
  • elemek, layerek, stílusok pontos elnevezése,
  • gridrendszer, 
  • elemrendszer,
  • vertikális és horizontális standard felépítési szabályok,
  • minden olyan információ, amely előre viszi a projektet.

A dokumentáció a projekt segédháttere.

2. Ezért fontos a személyes egyeztetés

A fejlesztés és a tervezés közötti állandó kommunikáció kulcsfontosságú. Az elakadások így sokkal könnyebben kezelhetők. Ehhez persze szükség van nyitottságra is, hiszen a fejlesztő tehet olyan javaslatokat tervezés szempontból, amelyek egyszerűsíthetik a feladatot.

Fontos a folyamatosság, tehát az állandó egyeztetés. Ezek során:

  1. Vegyük végig a fő szabályokat. 
  2. Legyen egy kérdezz-felelek kör minden fontos lépés előtt.
  3. Tegyünk javaslatokat, illetve hallgassuk meg azokat fejlesztői oldalról is.
A projekt sikerességéhez nem csak empátiára, hanem kompromisszumkészségre is szükség van.

Miért fontos a szoftveres segítség?

Szerencsére nem csak kollegális szinten segíthetjük egymást, hanem szoftveres úton is. Az utóbbi időben ugyanis komoly fejlődésen mentek át ezek a szoftverek. Ehhez persze jó tisztában lenni azzal, melyek a legnagyobb segítségek design, illetve kód oldalról.

1. A legjobb segítségek design irányból

Ilyen szoftverek lehetnek:

Design eszközök
Design eszközök

Gazdag rajzeszköz áll rendelkezésünkre, sőt, a megrajzolt elemek átmásolása, majd a fejlesztő felé történő átadása is lehetséges.

2. A legjobb segítségek kód irányból

Ilyen szoftverek például:

Fejlesztő eszközök
Fejlesztő eszközök

Ezek olyan online szoftverek, amelyek segítenek elindítani egy alap weboldal megtervezését. Korábban ezek a megoldások nem csak átláthatatlanok voltak, hanem bonyolultak is. Most azonban már meg tudjuk határozni velük automatikusan HTML CSS JavaScript kódot, amely úgy néz ki, mintha kézzel kódolták volna.

A tervező programban létrejöhet az egész design rendszer, ezen felül meg tudjuk hívni a fejlesztőt, aki láthatja az adott szoftverben a változtatásokat.

Használjuk ezeket a dokumentációt is segítő szoftvereket!

Ezek a legfontosabbak a UI design projektek átadásánál

Végül nézzük, mik azok a legfontosabb gondolatok, amelyeket érdemes szem előtt tartani az átadás során:

  • kezdjük el időben az átadást: ha a projekt elején ismerjük a fejlesztőt, mindenki munkája könnyebb lesz,
  • legyen folyamatos a kommunikáció: mind a fejlesztőcsapattal, mind az ügyféllel tartsuk a kapcsolatot, kövessük a változásokat,
  • használjuk a lehetőségeinket: az online eszközök sokat segíthetnek a munkánkban,
  • végül pedig örüljünk annak, ha sikerrel zárul a projekt, és felkerül a portfóliónkba!

Oszd meg a cikket az ismerőseiddel – feltéve, hogy tetszett. Kérdéseidet és meglátásaidat pedig szívesen fogadjuk Facebook-csoportunkban.

Ha pedig designerként, kivitelezőként szeretnél fejlődni és tanulni, csatlakozz YELLOW közösségünkhöz, ahol amellett, hogy hasznos anyagokat és segédleteket találsz, hozzád hasonló szakemberekkel beszélgethetsz, így fejlesztve a tudásod és a kapcsolati tőkéd egyszerre.

Kérdések és válaszok

Felhasználói felületek tervezését jelenti: user interface design.

Korábban webdesign-nak is hívták, de azóta a specializációnak köszönhetően beszélhetünk UX designerről, kutatóról, UI tervezőről, interaction designerről stb.

Felhasználói élmény. A tervezés stratégiai részével foglalkozó design. Kikutatja a felhasználói elvárásokat, megérti az üzleti elvárásokat és ezeket próbálja összehangolni egy olyan termékké, amely minden fél számára teljesíti az elvárásokat.

Egy gyűjtőfogalom, főleg frontend és backend fejlesztőket értünk ebbe a csoportba. Azok a programozók, akik effektív működőképes kódsorokká alakítják a specifikáció és a design tervek alapján készült terméket.

Hasznosnak találtad a bejegyzést?

Serfőző Péter

Brandstratéga, CEO @ zwoelf strategy & design

A brandguide alapítója, a zwoelf digital tulajdonosa és Design Directora vagyok. Stratégiákban és rendszerben gondolkodom, szeretem ha a csapatommal jól érezzük magunkat munka közben. 🙃

Szeretnéd tudni, hogyan építhetsz erős és hatékony márkát? Bemutatjuk a branding modellek alapjait és hasznát.
A design tokennek rengeteg meghatározása létezik, de nézzük meg részletesen, hogy mit jelentenek.
Mindig öröm, ha olyan workshopon vehetünk részt, ami új tudást ad. Chris Do, a The Futur-től Barcelonában ezt nagyon profin...
SIKERES FELIRATKOZÁS

Ezaz! Feliratkoztál a Yellow várólistára!

Hamarosan megnyitjuk kapuinkat és az elsők között küldünk majd értesítést, hogy semmiképp se maradj le róla!
Mindenképp ellenőrizd a spam és a kuka mappádat is. Amennyiben mégsem kaptad meg az e-mailt, kattints ide és újraküldjük!
YELLOW FELIRATKOZÁS

Csatlakozz következőként a Yellowsokhoz! 💥

Add meg az e-mail címedet és azonnal küldünk értesítést, amint a Yellow megnyitja kapuit a nagyközönségnek!
A Feliratkozásra kattintva hozzájárulsz, hogy újdonságokat küldjünk és elfogadod az adatvédelmi tájákoztatót.
DIGITÁLIS ARCULATOK SEGÉDLET

Töltsd le a segédletet most! 🚀

Add meg az e-mail címedet és a rendszer már automatikusan küldi is a PDF-et. Reméljük, hasznos lesz számodra.
A Letöltésre kattintva hozzájárulsz, hogy újdonságokat küldjünk és elfogadod az adatvédelmi tájákoztatót.
BRAND SPRINT SEGÉDLET

Töltsd le a segédletet most! 🚀

Add meg az e-mail címedet és a rendszer már automatikusan küldi is a PDF-et. Reméljük, hasznos lesz számodra.
A Letöltésre kattintva hozzájárulsz, hogy újdonságokat küldjünk és elfogadod az adatvédelmi tájákoztatót.
SIKERES LETÖLTÉS

Az PDF már repül is a postaládába! 📬

Reméljük elégedett leszel! Amennyiben bármi észrevételed van a segédlettel kapcsolatban, mondd el nekünk!
Mindenképp ellenőrizd a spam és a kuka mappádat is. Amennyiben mégsem kaptad meg az e-mailt, kattints ide és újraküldjük!