Hogyan fejlesztheti felhasználói felületének / felhasználói felületének fejlesztési képességeit

Ha négy évvel ezelőtt megkérdezte tőlem, amikor CS diplomás lettem, milyen karrier utat láttam magam követni, akkor valószínűleg elmondtam volna Önnek a háttér Java fejlesztését vagy valami hasonlót. Soha nem voltam kreatív, a festék megfelel a vászonnak, így nem igazán gondoltam a front-end fejlesztéssel és tervezéssel kapcsolatos karrierutat.

Mint mindannyian tudjuk, a dolgok változnak. Pályafutásom során egyre jobban érdekelt az UI fejlesztése és a dizájn. Olyan szerencsém volt a munkám során, hogy kitettséget éreztem a front-end fejlesztés iránt, és hagyhattam, hogy időt fordítsak a front-end fejlesztőként szükséges készségek fejlesztésére.

Az elmúlt 12 hónapban arra törekedtem, hogy jobban megértsem az UI / UX tervezését, mind személyes érdeklődésem miatt, mind pedig azért, hogy hatékonyabb lehessek, amikor a tervezőkkel dolgozom.

Ebben a bejegyzésben szeretném megosztani a megtanult tanulságokat, az összegyűjtött erőforrásokat és a hibákat, amelyeket abban a reményben követtem el, hogy más fejlesztők is tanulhatnak az utamból.

Tartalomjegyzék

  • Ez nem csak tehetség
  • Nézz, gondolkodj, lopj
  • Ismerje meg az elméletet
  • Építs valamit
  • Ne add fel
  • Erőforrások
  • Következtetés

Ez nem csak tehetség

Ez most nyilvánvalónak tűnik számomra, de volt olyan időszak, amikor azt hittem, hogy a tervezők varázslók, akik csodálatos megjelenésű alkalmazások és webhelyek létrehozásának képességével születtek.

Kiderült, hogy nem azok. Éppen keményen dolgoztak mesterségük tökéletesítésén. Ugyanúgy, ahogy a kódolás megtanulása megkönnyíti néhány embert, vannak emberek, akiknek természetes tehetségük lesz a tervezéshez, de a tehetség nem sokat jelent kemény munka nélkül.

A design megtanulható. Ne kövesse el azt a hibát, amelyet én tettem, és írja le magát, mert nem a hagyományos értelemben vett kreatív. A programozási problémák megoldása kreativitást igényel; gondoljon ugyanúgy a tervezési kihívások megoldására.

Nézz, gondolkodj, lopj

Ugyanúgy, ahogy a jó kód elolvasása segít abban, hogy jobb fejlesztővé válj, a mások által létrehozottakból való tanulás segít abban, hogy jobb tervezővé válj.

Amikor legközelebb meglátogat egy weboldalt, vagy alkalmaz egy alkalmazást, nézze meg, és gondolkodjon el azon, hogy miért néz ki és viselkedik így. Miért helyezik el az elemeket ott, ahol vannak? Miért egy adott színű ez a gomb? Miért kell bizonyos sorrendben végrehajtania a műveleteket?

Vegyük például a Medium taps gombját. Miért nem használtak csak „like” gombot, mint minden más közösségi oldal? Véleményem szerint okos tervezési döntés volt, hogy nem. Ehelyett az interakció alapos megtervezésével képesek megerősíteni a webhelyet vezérlő közösség gondolatát. Egy cikk vagy válasz ötven tapsot igényel, mire a felhasználónak szüksége van rá, de ez segít abban, hogy valóban kapcsolatba léphessenek a megtekintett tartalommal és azzal, aki létrehozta.

Az Awwwards és a Dribbble oldalak felbecsülhetetlen értékűnek bizonyultak számomra az elmúlt évben. Sok általam készített terv liberális ihletet merített más nagyszerű tervezők alkotásaiból.

Ismerje meg az elméletet

Amikor először kezdtem összeállítani a saját terveit, nem tudtam megérteni, miért néznek ki és viselkednek ilyen rosszul. Az áramlások kínosak voltak, a színek nem illettek egymáshoz, az elrendezések pedig következetlenek voltak.

Úgy gondoltam, hogy egyszerűen beugorhatok, és felhasználhatom fejlesztői ismereteimet, valamint alapvető tudásomat arról, hogy a webhelyeknek hogyan kell működniük, és ez jól fog működni.

Nagyon-nagyon tévedtem. Végül a fejlesztők szempontjából készítettem terveket, ahelyett, hogy a tervezés elméletét használtam volna alapul.

A fejlesztők tudják, hogyan működik egy webhely , de a tervezők tudják, hogyan viselkedik és hogyan érzi magát a webhely . Van egy nagy hiányosság, amelyet csak akkor lehet kitölteni, ha megalapozza a tervezési ismereteket.

A tervezéselmélet alapvető megértése érdekében leginkább a Medium és az Udemy alkalmazást használtam. Az általam használt erőforrásokra mutató linkeket az alábbi szakaszban találhat.

Építs valamit

Bármely fejlesztő vagy CS professzor elmondja, hogy jobb programozóvá válás a kódírás. Ugyanez az elv érvényes a tervezésre is.

Nem számít, mit tervez, mindaddig, amíg tanul belőle. Kezeld valódi projektként: Gondolj a felhasználókra. Drótvázak, makettek és prototípusok létrehozása. Fejlessze az eredeti dizájnt annak javítása érdekében. Olyan webhelyeket használhat, mint a Reddit, hogy visszajelzést kapjon arról, amit létrehozott.

Párosíthatja akár fejlesztői képességeinek fejlesztésével is. Legutóbbi mellékprojektjeim többségét az a közös vágy motiválta, hogy fejlesszem webfejlesztési és tervezési ismereteimet. A projekt megtervezése után fejlesztheti azt, és láthatja az érme mindkét oldalát.

Íme néhány ötlet a kezdéshez:

  • Tervezzen interakciót. Használja a Medium taps gombját az inspirációhoz.
  • Tervezzen egy alkalmazást a kedvenc jótékonysági szervezete számára. Gondoljon a különféle felhasználókra: potenciális, ritka és rendszeres védnökökre.
  • Tervezze meg önéletrajzát. Gondoljon a használt színekre és azok jelentésére. Gondoljon arra, hogyan fogja használni önéletrajzát . Csak egy képernyőn nézhető meg, vagy ki lesz nyomtatva? Hogyan befolyásolja ez a formatervezést?
  • Létező webhely újratervezése. Ez lehet a helyi közlekedési szolgáltató vagy egy globális márka. Hasonlítsa össze a tervét az eredetivel, és gondolja át a különbségeket a felhasználó szemszögéből.
  • Tervezzen valami fizikai dolgot, például egy új szállítási módot, esetleg valami egyszerű alternatívát, például egy villát vagy egy széket. Azt tapasztaltam, hogy a mindennapi dolgok megtervezésén való gondolkodás valóban hasznos módja annak, hogy a gondolkodásmódba keveredjünk valami intuitív tervezéshez.

Ne add fel

Ha visszatekintek arra, amit egy évvel ezelőtt létrehoztam, nehéz nem összerándulni. De mindenki elindul valahonnan. Látni a haladást abban, amit létrehoz, megér. Amíg tanulsz abból, amit csinálsz, az időd jól telik.

Segíthet a tanultak rendszeres időközönkénti nyomon követésében. Minden hónapban visszanézek néhány dolgot, amin dolgoztam, és megpróbálok minél többet kihozni a tapasztalatokból. Még ha csak egy kis információt is felismer, amelyet egy cikk elolvasása során gyűjtött össze, akkor is ez a fejlődés.

Erőforrások

Az alábbiakban a kedvenc eszközeim, cikkeim és tanfolyamaim kis gyűjteménye található. Még sok mindent megtalálhat , amit itt és itt nem soroltam fel.

Eszközök

Figma - Tervezés és prototípus készítés együttműködéssel.

FramerX - Hasonló az Figmához, de hozzáadott React-tel és felfedezhető összetevőkkel.

Coolors - Fedezze fel és hozzon létre színes palettákat.

WebAIM kontrasztellenőrző - Győződjön meg arról, hogy a színei elérhetőek-e.

Archetípus - tipográfiai rendszer szerkesztő és generátor.

Cikkek

7 gyakorlati tipp a csaláshoz a tervezés során

10 csalókód a felhasználói interfészek tervezéséhez

10 kicsi tervezési hiba, amelyet még mindig elkövetünk

Jobb űrlapok tervezése

Az UX teljesítések teljes listája

A pszichológia alapelvei, amelyeket minden UI / UX tervezőnek tudnia kell

A színek használata a felhasználói felület tervezésében

16 idézet, amelyet el kell olvasnia UX tervezőként

A terméktervezés alapelvei egyetlen kártyában

Tanfolyamok

A felhasználói élmény tervezésének alapjai - Udemy

A teljes alkalmazás-tervezési tanfolyam - UX, UI és Design Thinking - Udemy

UXTraining.com

Következtetés

Remélem, tudtál venni valamit az utamból. Ha olyan tervezési tippek vagy források vannak, amelyek segítettek a tanulásban, szívesen hallanám őket a válaszokban.

Köszönöm, hogy elolvasta!