paint-brush
Kezdje el a tervek kidolgozását (szó szerint)által@ivansipilov
Új történelem

Kezdje el a tervek kidolgozását (szó szerint)

által IvanSipilov7m2024/10/28
Read on Terminal Reader

Túl hosszú; Olvasni

A tervezőktől azt várják, hogy áthidalják a szakadékot a kreativitás és a technológia között. Bárkinek, még a fejlesztőknek is, akik interfészeken dolgoznak, nagy érzékkel kell rendelkezniük a tervezéshez. A kódolást értő tervezőknek egyedülálló előnyük van. Jobban tudnak csapatokon át dolgozni. Az ötleteket praktikus, megnyerő megoldásokká alakíthatják.
featured image - Kezdje el a tervek kidolgozását (szó szerint)
IvanSipilov HackerNoon profile picture
0-item


Miért itt az ideje, hogy a tervezők megtanuljanak kódolni?

Meggyőződésem, hogy a mai tervezőknek sokkal többet kell tenniük, mint csak jó megjelenésű felhasználói felületek létrehozását. A szerepkör fejlődött, és most azt várják, hogy áthidaljuk a szakadékot a kreativitás és a technológia között.


Az egyik legjobb készség, amelyet ehhez hozzáadhatunk eszköztárunkhoz? Kódolás .


Nos, nézd, heves vita folyik arról, hogy a tervezők-e meg kell tanulni kódolni vagy sem . Úgy gondolom, hogy a régi megosztottság a tervezők és a fejlesztők között már nem működik. Nem felel meg a mai termékfejlesztési igényeknek. Bárkinek, még a fejlesztőknek is, akik interfészeken dolgoznak, nagy érzékkel kell rendelkezniük a tervezéshez.


Ugyanakkor a tervezési döntéseket nem szabad merev szabályokba vagy kézikönyvekbe zárni, amelyeket azok határoznak meg, akik nem értik a következőket:

  • kölcsönhatás,
  • tech, ill
  • kódolás.


A folyamat során gyakran így néz ki a tervezés (jobb oldalon) és a tényleges megvalósítás (bal oldalon):



És ezt csak Ön (a tervezők) tudja megoldani. Kódot ajánlok fel – varázstablettaként, amellyel úgy fejezheti be a felhasználói felületet, ahogy megálmodta.


Hiszen jogosan mondják, hogy a design nem személy. Ez egy funkció.

A kódolás jobban alkalmazkodik a tervezési piaci változásokhoz

A dizájn gyorsan változik, és azok a készségek is, amelyekre lépést kell tartanunk. Most nem azt mondom, hogy hamarosan megjelenik egy hivatalos „terméktervező-fejlesztő” szerepkör, de a munkaadók határozottan olyan embereket keresnek, akik kiléphetnek a hagyományos tervezés buborékából. Olyan tervezőket szeretnének, akik:


  • megérteni emberi viselkedés ,

  • képes együttműködni a csapatok között,

  • és hozzájárulnak a látványelemek létrehozásán túl.


A kódolást értő tervezőknek egyedülálló előnyük van. Jobban tudnak csapatokon át dolgozni. Az ötleteket praktikus, vonzó megoldásokká alakíthatják, amelyek megfelelnek a valós felhasználói igényeknek.


A hagyományos felhasználói felület nem elegendő. Ha megértjük, hogyan épülnek fel a dolgok – a keretrendszerek, kódbázisok és rendszerek, amelyek a terveinket vezérlik – segít nekünk olyan élményeket teremteni, amelyek nem csak gyönyörűek, hanem zökkenőmentesen működnek együtt az őket irányító technológiával. Már nem csak „szemcseppek” képernyőket készítünk.


Például egy közelmúltbeli projekt során Csapkod , amely egy nyílt forráskódú keretrendszer alkalmazások egyetlen kódbázisból történő létrehozásához, rájöttem, milyen fontos a kódolási tudás a megalapozott tervezési döntések meghozatalához.


A technológia ismerete nélkül sokkal nehezebb lenne olyan animációkat, átmeneteket vagy mozgáselemeket tervezni, amelyek a fejlesztőcsapat korlátain belül működtek.


Animációk a Veggie Grower iOS-alkalmazásomhoz német kertészek számára lehetővé váltak, mert megtanultam kódolni.



A kódolás előnyei a készségeken is túlmutatnak. Még az agy működését is megváltoztathatja. Minden kódolási kihívás új kapcsolatokat ébreszt az agyamban. Alkalmazkodik és fejlődik, más területeken is segít.


A tudomány azt mutatja, hogy új idegpályák alakulnak ki, amikor valami nehéz vagy ismeretlen dolgot tanulunk, például kódolni vagy hangszeren játszani. Az új készségek többet tesznek, mint bővítik képességeinket. Átdrótozzák az agyunkat is. Alkalmazkodóbbá és rugalmasabbá válunk a kihívásokkal szemben.


A kódolás segít meglátni a fejlesztő nézőpontját

A kódolni tudó tervezők megkönnyítik a fejlesztőkkel való együttműködést. Ez gördülékenyebb folyamatokhoz és jobb termékekhez vezet. A kódolás segít praktikusabb, valósághűbb tervek létrehozásában. Megkönnyíti a fejlesztők életét, és csökkenti a csapatok közötti súrlódást. Ha megértjük a kódot, jobban tudjuk kommunikálni ötleteinket, és a kreatív elképzeléseket működőképes megoldásokká alakítani.


Bővebben elmagyarázom a „gyermekemmel” a Veggie Grower alkalmazást. A legnagyobb hibám az volt, hogy a felhasználói felületet túlságosan bonyolulttá tettem, mert az ügyfél ragaszkodott a „wow faktorhoz”. Szerettünk volna lenyűgözni, de nem érte el a célt – az alkalmazás tényleges felhasználói felülete az alkalmazásboltban nem sikerült jól (lásd a történet borítóját fent).


Ez megtanított arra, hogy a tervezőknek valóban a fejlesztők első védelmi vonalaként kell fellépniük. Vissza kell szorítanunk, amikor az üzleti ötletek irreális tartományba sodródnak, megvédve a terméket és a felhasználói élményt attól, hogy túl bonyolulttá váljanak. Sikerült néhány intelligens megoldást találnunk az alkalmazás elindításához. Lottie-animációkat és olyanokat, amelyeket magam készítettem, vegyesen használtam – a kódolási készségeim itt határozottan jól jöttek. Ez segített abban, hogy csak annyira csiszoljuk a dolgokat, hogy a kiadás megtörténjen.


A kódolás megtanulása teljesen megváltoztatta a terveimet. Elkezdtem a dolgokat a fejlesztők szemszögéből látni, megértve az előttük álló kihívásokat – például az összetett funkciók és a költségvetési korlátok egyensúlyát, valamint a reális középút megtalálását a nagy ötletek és a ténylegesen megvalósítható dolgok között.


A fejlesztők fájdalmának megértése és annak ismerete, hogy mikor kell megállni a helyét

A kódolás empátiára tanított a folyamat fejlesztési oldala felé.


Fontos felismerni, hogy a fejlesztőkre gyakran óriási nyomás nehezedik, hogy a dolgokat működőképessé tegyék. A hibakereséssel eltöltött napok után az utolsó dolog, amit szeretnének, az összetett tervezési elemekkel foglalkozni, amelyek szükségtelen bonyodalmakat okoznak.


Itt nekünk, tervezőknek, problémamegoldóként kell közbelépnünk. Törekednünk kell az egyszerűségre és az áttekinthetőségre – a forma és a funkció közötti egyensúlyra, amely a felhasználót és a fejlesztőt egyaránt szolgálja.


Ez nem jelenti azt, hogy minden tervet le kell egyszerűsíteni a nyájasságig. Ez azt jelenti, hogy stratégiainak kell lenni, fel kell bontani az interfészeket kezelhető, felépíthető összetevőkre, amelyeket a fejlesztők könnyen megértenek és megvalósíthatnak.


Most beszéljünk az úgynevezett „kapuőrzésről” is. Manapság az UX-ben ezt általában negatív tulajdonságnak tekintik. Kapuőrzés: valamihez az általános hozzáférést ellenőrző és általában korlátozó tevékenység.


De a tervezésben a „kapuőrnek” lenni a munka nagy része. Mi vagyunk a védelmi vonal, mielőtt valami élesben indulna. A mi feladatunk az, hogy megbizonyosodjunk arról, hogy minden, amiben segítünk létrehozni, valóban javítja a felhasználó utazását.


Ez a „kapuőrzés” nem arról szól, hogy nehéz. Arról van szó, hogy a felhasználó igényei a középpontban legyenek. És ez az a hely, ahol egy kis kód ismerete mindent megváltoztathat.


Ha megérti a fejlesztési oldalt, jobb helyzetben van ahhoz, hogy közölje, miért fontosak bizonyos tervezési részletek.


Tegyük fel, hogy egy olyan funkción dolgozik, ahol szüksége van egy adott animációra, amely felhívja a felhasználó figyelmét, de a fejlesztő ki akarja hagyni, hogy időt takarítson meg. Ha tudja, hogyan lehet ezt az animációt elkészíteni, mondjuk egy egyszerű CSS-beállítással vagy egy meglévő JavaScript-könyvtár használatával, akkor hatékonyan érvelhet, és a fejlesztő nagyobb valószínűséggel hallgat.


Ez kulcsfontosságú: a kódolás ismerete elengedhetetlen ahhoz, hogy konstruktív módon érveljen álláspontja mellett, és egyik felet sem frusztrálja.


A kódolás segítségével megláthatjuk a „Wow Factor” mögött rejlő varázslatot


Az alján található "Avocado guy" a további tételek betöltését mutatja. Ez bonyolult volt a fejlesztők számára, ezért a Lottie segítségével konvertáltam JSON-ba – ami zökkenőmentessé tette az integrációt, és napok helyett mindössze 15 percet vett igénybe.


Amikor a dolgok működőképessé tételére összpontosítunk, nem feledkezhetünk meg a „wow faktorról”.


Emlékezetessé teheti az élményt az, ahogy egy animáció folyik, vagy hogy a felhasználói felület színei tökéletesen kiegyensúlyozottak. Ez az érzelmi kapcsolat döntő fontosságú abban, hogy a termékek ne csak használhatóak legyenek, hanem élvezetesek is.


A felhasználók jobban elviselik a kisebb használati problémákat amikor vizuálisan vonzónak találnak egy felületet. Végül is az esztétikus formatervezés nagyobb valószínűséggel sikerül, mint a funkcionális.


A „wow-faktor” azonban nem csak úgy történik. Ehhez szorosan együtt kell működnünk a fejlesztőkkel annak biztosítása érdekében, hogy az ezekre a pillanatokra vonatkozó elképzeléseink a végtermékké váljanak. Az olyan eszközök, mint a Lottie vagy a CSS- animációk, lehetővé teszik, hogy a fejlesztőknek pontosan azt mutassuk meg, amit szándékozunk, ezzel segítve életre kelteni az átmeneteket és interakciókat.


A kódolás segít megérteni, mi lehetséges

A kódolás elsajátítása segít megérteni, hogy mi az, ami reálisan megépíthető – és mi az, ami csak húzós lehet. Persze, egy lenyűgöző Dribbble portfólió nagyszerű látni. De ha ezeket a terveket nem lehet kifejleszteni, akkor ezek csak digitális művészet, nem funkcionális termékek.


Ha ismerjük a kódolás alapjait, elkezdjük látni, mi lehetséges, ami azt jelenti, hogy kreatívak lehetünk anélkül, hogy fejlesztőinket túlterhelnénk gyakorlatias ötletekkel.


Vegyük például egy mikro-interakció tervezését egy bejelentkezési képernyőhöz. Képzelje el, hogy finom, kielégítő animációt szeretne. Visszajelzést kell adnia a felhasználóknak a jelszó beírása közben. Például a mezőnek zölden kell világítania, ha a megfelelő formátum teljesül. A CSS vagy a JavaScript ismerete nélkül előfordulhat, hogy valami túlságosan összetettet hoz létre, aminek elkészítése órákig tart a fejlesztőcsapatnak. Némi kódolási tudás birtokában tudni fogja, hogy mely hatások reálisak. Segítene olyan ötletek előterjesztésében, amelyek egyszerre menőek és megvalósíthatók.


A tervezőknek „olyannak kell lenniük, mint a víz” – alkalmazkodóképesnek és folyékonynak (köszönjük ezt az idézetet, Bruce ). Továbbra is feszegethetjük a kreatív határokat, de reagálunk az előttünk álló korlátokra.


A legjobb tervek inspirálnak felhasználók és fejlesztők egyaránt anélkül, hogy túllépnénk azon, amit praktikus megépíteni.


Kéz a kézben a hatásos dizájnért

A tervezés nem az esztétikáról szól. Ez egy problémamegoldó folyamat, amelynek célja, hogy javítsa az emberek tapasztalatait az Ön által kínált termékkel és szolgáltatással, illetve végső soron a márkával kapcsolatban.


Ma már nem csupán tervezők vagyunk; problémamegoldók, a felhasználói élmény bajnokai, és ami a legfontosabb, együttműködők vagyunk. A kreativitásunk és a technikai betekintés ötvözésével utat nyitunk a holnap termékei felé – olyan termékek felé, amelyek nem csak szépek, de valóban értelmesek és hatékonyak is a felhasználók számára.


Tervezői munkánk túlmutat egy gyönyörű prototípus megalkotásán – ez a fejlesztőkkel való kéz a kézben való munka, hogy életre keltsük ezt az elképzelést. Ez azt jelenti, hogy az egész fejlesztési folyamatban részt kell venni, ott kell dolgozni a technikai kihívásokon, szükség esetén módosítani kell a tervezést, és nyitva kell tartani a kommunikációs vonalakat. Ez a folyamatos együttműködés teszi a jó dizájnt kivételes termékké.


Ahogy a design folyamatosan fejlődik, a kódolás jelentősége csak nő. A tervezés és a technológia metszéspontjában hihetetlen innovációs lehetőség rejlik, de ehhez gondolkodásmódváltásra van szükség. A kódolás alapvető készségként való elfogadása lehetővé teszi a tervezők számára, hogy olyan termékeket hozzanak létre, amelyek nemcsak vizuálisan lenyűgözőek, hanem funkcionálisak, fejlesztőbarátak és hatásosak is.


P. S: Tudom, mit gondolsz, ezeket a színes zöldségkártyákat szeretnéd. nyitottat készítettem Figma forrásfájl az Ön számára: