paint-brush
Hasi zure diseinuak garatzen (literalki)arabera@ivansipilov
Historia berria

Hasi zure diseinuak garatzen (literalki)

arabera IvanSipilov7m2024/10/28
Read on Terminal Reader

Luzeegia; Irakurri

Diseinatzaileek sormenaren eta teknologiaren arteko aldea gainditzea espero da. Interfazeetan lan egiten ari diren edonork, baita garatzaileek ere, diseinuaren zentzu handia izan beharko lukete. Kodeketa ulertzen duten diseinatzaileek abantaila paregabea dute. Hobe dira taldeen artean lan egiten. Ideiak irtenbide praktiko eta erakargarri bihur ditzakete.
featured image - Hasi zure diseinuak garatzen (literalki)
IvanSipilov HackerNoon profile picture
0-item


Zergatik da garaia diseinatzaileek kodetzen ikasteko

Ziur nago gaur egungo diseinatzaileek itxura ona duten erabiltzaile-interfazeak sortzea baino askoz gehiago egin behar dutela. Rolak eboluzionatu egin du, eta orain sormenaren eta teknologiaren arteko zubi bat egingo dugula espero dugu.


Horretarako gure tresna-tresnari gehi diezaiokegun trebetasun onenetako bat? Kodetzea .


Orain, begira, eztabaida bizia dago diseinatzaileei buruz kodetzen ikasi behar da ala ez . Uste dut diseinatzaileen eta garatzaileen arteko zatiketa zaharrak jada ez duela funtzionatzen. Ez ditu gaur egungo produktuak garatzeko beharrak asetzen. Interfazeetan lan egiten ari diren edonork, baita garatzaileek ere, diseinuaren zentzu handia izan beharko lukete.


Aldi berean, diseinu-erabakiak ez dira ulertzen ez dutenek ezarritako arau edo eskuliburu zurrunetan blokeatu behar:

  • elkarrekintza,
  • teknologia, edo
  • kodetzea.


Prozesuan zehar, honela ikusten da diseinua (eskuinean) eta horren benetako ezarpena (ezkerrean):



Eta zuek (diseinatzaileak) zarete hau konpondu dezakezuen bakarrak. Kodea eskaintzen dizut, zuk amestu duzun bezala interfazea amaitzeko pilula magiko gisa.


Azken finean, arrazoiz esan da diseinua ez dela pertsona bat. Funtzio bat da.

Kodetzeak diseinu merkatuaren aldaketetara moldatzen gaitu

Diseinua azkar aldatzen ari da, eta baita mantendu behar ditugun gaitasunak ere. Orain, ez dut esango "Produktu-diseinatzaile-garatzailea" izeneko rol ofizial bat ikusiko dugunik laster, baina enpresaburuek diseinu tradizionalaren burbuilatik kanpo atera dezaketen jendea bilatzen ari dira zalantzarik gabe. Hauek diren diseinatzaileak nahi dituzte:


  • ulertu giza jokabidea ,

  • taldeen artean kolaboratu dezake,

  • eta ikus-entzunezkoak sortzeaz harago lagundu.


Kodeketa ulertzen duten diseinatzaileek abantaila paregabea dute. Hobe dira taldeen artean lan egiten. Ideiak erabiltzailearen benetako beharrak asetzen dituzten irtenbide praktiko eta erakargarri bihur ditzakete.


UI diseinu tradizionala ez da nahikoa. Gauzak nola eraikitzen diren ulertzeak (esparruak, kode-oinarriak eta gure diseinuak bultzatzen dituzten sistemak) ederrak ez ezik, teknologiarekin batera funtzionatzen duten esperientziak sortzen laguntzen digu. Jada ez gara soilik "begi-gozokiak" pantailak egiten.


Adibidez, azken proiektu batean Astindu , kode irekiko marko bat aplikazioak kode-base bakar batetik eraikitzeko, konturatu nintzen zein garrantzitsua den kodeketaren ezagutza diseinuaren aukerak informatuak egiteko.


Teknologia ezagutu gabe, askoz zailagoa izango litzateke garapen-taldearen mugen barruan funtzionatzen duten animazioak, trantsizioak edo mugimendu-elementuak diseinatzea.


Lorezain alemanentzako nire Veggie Grower iOS aplikaziorako animazioak posible egin ziren kodetzen ikasi nuelako.



Kodetzearen onurak trebetasunetatik haratago ere zabaltzen dira. Garunak nola funtzionatzen duen ere alda dezake. Kodetze erronka bakoitzak konexio berriak pizten ditu nire garunean. Egokitzen eta eboluzionatzen doa, beste arlo batzuetan lagunduz.


Zientziak erakusten du bide neuronal berriak sortzen direla zerbait gogorra edo ezezaguna ikasten dugunean, adibidez, kodetzen edo instrumentu bat jotzen. Trebetasun berriek gure gaitasunak zabaltzea baino gehiago egiten dute. Gainera, gure garunak birkableatzen dituzte. Erronken aurrean moldagarriagoak eta erresilienteagoak gara.


Kodetzeak garatzailearen ikuspuntua ikusten laguntzen du

Kodetu dezaketen diseinatzaileek garatzaileekin lankidetza errazten dute. Horrek prozesu leunagoak eta produktu hobeak lortzen ditu. Kodetzeak diseinu praktikoagoak eta errealistagoak sortzen laguntzen digu. Garatzaileei bizitza errazten die eta taldeen arteko marruskadura murrizten du. Kodea ulertzen dugunean, hobeak gara gure ideiak komunikatzen eta sormen-ikuspegiak soluzio bideragarriak bihurtzen.


Gehiago azalduko dut nire "semearekin" Veggie Grower aplikazioa. Nire akatsik handiena UI konplexuegia egitea izan zen, bezeroak "wow faktorea" izaten tematu zelako. Harritu nahi genuen, baina marka galdu genuen: aplikazioaren benetako interfazea aplikazioaren dendan ez zen ondo atera (ikusi istorio honen azala goian).


Horrek irakatsi zidan diseinatzaileek garatzaileentzako lehen defentsa-lerro gisa jokatu behar dutela. Negozio ideiak lurralde ez-errealistara noraezean hasten direnean atzera egin behar dugu, produktua eta UX konplikatuegiak ez daitezen babestuz. Aplikazioa abiarazteko irtenbide adimentsu batzuk aurkitzea lortu dugu. Lottie animazioen nahasketa bat erabili nuen eta nik neuk sortutako batzuk; zalantzarik gabe, nire kodetze gaitasunak ondo etorri zitzaizkidan hemen. Gauzak leuntzen lagundu zigun oharra gerta dadin.


Kodetzen ikasteak guztiz aldatu zuen nire diseinuak nola ikusten nituen. Garatzaile baten ikuspuntutik gauzak ikusten hasi nintzen, aurre egiten dituzten erronkak ulertzen, hala nola ezaugarri konplexuak aurrekontu-mugekin orekatzea eta ideia handien eta benetan egin daitekeenaren arteko erdibide errealista bat aurkitzea.


Garatzaileen mina ulertzea eta zure jarrera noiz eutsi jakitea

Kodetzeak prozesuaren garapen-aldearekiko enpatia irakatsi zidan.


Garrantzitsua da aitortzea garatzaileek sarritan presio izugarria jasaten dutela gauzak funtzionalak egiteko. Egunak arazketan eman ondoren, nahi duten azken gauza diseinu-elementu konplexuei aurre egitea da, beharrezkoak ez diren konplikazioak gehitzen dituztenak.


Hau da, diseinatzaile gisa, arazo-konpontzaile gisa sartu behar dugu. Sinpletasuna eta argitasuna bilatzen ahalegindu behar dugu, erabiltzaileari zein garatzaileari balioko dion forma eta funtzioaren arteko oreka.


Horrek ez du esan nahi diseinu guztiak erraztasunera arte sinplifikatzea. Estrategikoa izatea esan nahi du, interfazeak osagai kudeagarri eta eraikigarrietan banatzea, garatzaileek ulertzeko eta inplementatzeko errazak direnak.


Orain, hitz egin dezagun "atezaina" izeneko zerbaiti buruz ere. Gaur egun, UXn, normalean ezaugarri negatibo gisa ikusten da. Gatekeeping: zerbaitetarako sarbide orokorra kontrolatzeko eta normalean mugatzeko jarduera.


Baina diseinuan, "atezaina" izatea lanaren zati handi bat da. Defentsa lerroa gara zerbait martxan jarri aurretik. Gure eginkizuna sortzen laguntzen dugun guztiak erabiltzailearen ibilbidea hobetzen duela ziurtatzea da.


“Atezain” hau ez da zaila izatea. Erabiltzailearen beharrak lehen eta erdian daudela ziurtatzea da. Eta hemen kode pixka bat jakiteak aldea eragin dezake.


Garapenaren aldea ulertzen duzunean, diseinuaren xehetasun batzuk zergatik garrantzitsuak diren jakinarazteko egoera hobean zaude.


Demagun funtzio bat lantzen ari zarela non animazio zehatz bat behar duzun erabiltzailearen arreta bideratzeko, baina garatzaileak saltatu nahi du denbora aurrezteko. Badakizu nola egin daitekeen animazio hori, esate baterako, CSS doikuntza soil batekin edo lehendik dagoen JavaScript liburutegi bat erabiliz, zure kasua modu eraginkorrean argudiatu dezakezu eta garatzaileak litekeena da entzutea.


Hau da gakoa: kodetzen jakitea funtsezkoa da zure ikuspuntua argudiatzen laguntzeko modu eraikitzailean eta ez aldeetako bat zapuztuko.


Kodetzeak 'Wow Faktore'aren atzean dagoen magia ikusteko aukera ematen digu


"Avocado guy" behealdean elementu gehigarrien karga erakusten du. Garatzaileentzat delikatua izan zen, beraz, Lottie erabili nuen JSON bihurtzeko, eta horrek integrazioa ezin hobea izan zuen eta 15 minutu besterik ez zituen behar egunen ordez.


Gauzak funtzionalak egiteari begira, ezin dugu "wow faktorea" ahaztu.


Animazio bat isurtzen den moduak edo interfazearen koloreak ezin hobeto orekatuta dauden moduak esperientzia gogoangarria izan dezake. Lotura emozional hau funtsezkoa da produktuak erabilgarri ez ezik atseginak ere egiteko.


Erabiltzaileek tolerantzia handiagoa dute erabilgarritasun arazo txikiekin interfaze bat bisualki erakargarria aurkitzen dutenean. Azken finean, diseinu estetikoek arrakasta handiagoa dute funtzionalek baino.


Hala ere, "wow faktorea" ez da bakarrik gertatzen. Garatzaileekin lankidetza estuan lan egitea eskatzen digu, momentu horietarako dugun ikuspegia azken produktuan itzultzen dela ziurtatzeko. Lottie edo CSS animazioek bezalako tresnei esker, garatzaileei zer asmo dugun zehatz-mehatz erakusteko aukera ematen digute, trantsizio eta interakzioak biziarazten lagunduz.


Kodetzeak posible dena ulertzen laguntzen digu

Kodetzen ikasteak eraikitzeko zer den errealista ulertzen laguntzen digu, eta tarte bat izan daitekeena. Noski, Dribbble-ren zorro zoragarri bat ikusteko bikaina da. Baina, diseinu horiek ezin badira garatu, arte digitala besterik ez dira, ez produktu funtzionalak.


Kodetze-oinarri batzuk ezagutzen ditugunean, zer den posible ikusten hasten gara, hau da, sormenak izan gaitezkeela gure garatzaileak ideia praktikoekin larritu gabe.


Har dezagun, adibidez, saioa hasteko pantaila baterako mikro-interakzio bat diseinatzea. Imajinatu animazio sotil eta asegarri bat nahi duzula. Pasahitza idazten duten bitartean erabiltzaileei iritzia eman behar die. Adibidez, eremuak berdez piztu beharko luke formatu zuzena betetzen denean. CSS edo JavaScript pixka bat ulertu gabe, garapen-taldeak eraikitzeko orduak beharko lituzkeen zerbait konplexuegia plantea dezakezu. Kodetze jakintza batzuekin, jakingo zenuke zein efektu diren errealistak. Hotza eta lorgarriak diren ideiak aurkezten lagunduko dizu.


Diseinatzaileek "ura bezalakoa" izan beharko lukete: moldagarriak eta arina (eskerrik asko aipu honengatik, Bruce ). Sormenaren mugak gaindi ditzakegu oraindik, baina aurrean ditugun murrizketei erantzuten diegu.


Diseinu onenek inspiratzen dute erabiltzaileak eta garatzaileak eraikitzeko praktikoa dena baino haratago bultzatu gabe.


Eskuz esku diseinu eragingarria lortzeko

Diseinua ez da estetika kontua. Arazoak konpontzeko prozesu bat da, eskaintzen duzun produktuarekin eta zerbitzuarekin eta, azken batean, zure markarekin, pertsonen esperientziak hobetzea helburu duena.


Gaur egun, diseinatzaile hutsak baino gehiago gara; arazoak konpontzen ditugu, erabiltzaileen esperientziaren txapeldunak eta, batez ere, kolaboratzaileak gara. Gure sormena ezagutza teknikoarekin konbinatuz, etorkizuneko produktuei bidea zabaltzen ari gara: ederrak ez ezik, erabiltzaileentzat benetan esanguratsuak eta eraginkorrak diren produktuak ere.


Diseinatzaile gisa dugun lana prototipo eder bat lantzeaz haratago doa: garatzaileekin eskuz esku lan egitea da ikuspegi hori biziarazteko. Horrek esan nahi du garapen-prozesu osoan inplikatuta egotea, erronka teknikoak lantzeko hor egotea, beharrezkoa denean diseinu-doikuntzak egitea eta komunikazio-lerroak zabalik mantentzea. Etengabeko lankidetza hori da diseinu on bat aparteko produktu bihurtzen duena.


Diseinuak eboluzionatzen jarraitzen duen heinean, kodeketak garrantzia gehiago izango du. Diseinuaren eta teknologiaren bidegurutzean, berrikuntzarako potentzial ikaragarria dago, baina pentsamolde aldaketa bat eskatzen du. Kodeketa oinarrizko trebetasun gisa hartzeak diseinatzaileek ikusmen harrigarriak ez ezik, funtzionalak, garatzaileak atseginak eta eragingarriak diren produktuak sor ditzakete.


P. S: Badakit zer pentsatzen duzun, barazki karta koloretsu hauek nahi dituzu. Ireki bat prestatu nuen Figma zuretzat baliabide fitxategia: