Přeskočit na obsah
Myšlienkové mapy · UX a UI dizajn

Ako sa stať UX/UI dizajnérom: 5 krokov od základov po prvé portfólio

Začať s UX a UI dizajnom sa dá v piatich krokoch: naučiť sa základy (princípy, vizuálnu hierarchiu, kontrast, typografiu), zvládnuť nástroje (Figma a jednoduchý wireframe), precvičiť ich na vlastnom projekte, otestovať návrh s ľuďmi a zostaviť prvé portfólio. UX je to, ako sa web používa, UI je to, ako vyzerá. Nikto vám nemôže sľúbiť prácu ani čas, za ktorý to zvládnete: rozhoduje, koľko praxe urobíte a ukážete.

  • 5 vetiev
  • každý list vedie na návod, pojem alebo službu
  • čítanie 5 minút
Chcem sa začať venovať UX a UI dizajnu. S čím začať a ako to ukázať?
1Základy4 kroky2Nástroje4 kroky3Prax na vlastnom projekte4 kroky4Testovanie s ľuďmi4 kroky5Portfólio a prvé zákazky4 kroky
Vetvy podrobne: čo skontrolovať a kam ďalej
ZákladyNajprv princípy, potom program. Program bez princípov kreslí pekné, ale ťažko použiteľné obrazovky.
  • UX a UI: čo je čoUX je zážitok a použiteľnosť, UI je vzhľad rozhrania; jedno bez druhého nestačíČlánok: UX a UI, v čom je rozdiel
  • Vizuálna hierarchiaveľkosť, farba a poloha povedia oku, čo je dôležité ako prvéPojem: vizuálna hierarchia
  • Kontrast a čitateľnosťtext aspoň 4,5 : 1, veľký text a prvky rozhrania aspoň 3 : 1Pojem: kontrast farieb
  • Typografia a medzeryjedno písmo, pár veľkostí, kratšie riadky a dosť priestoru okolo textu
NástrojeStačí papier a jeden program. Nástrojov sa nebojte, na začiatok ich treba málo.
  • Papier a ceruzkaprvý náčrt obrazovky nakreslite ručne; rýchlo sa maže a nikto nerieši farby
  • Wireframe: čiernobiely náčrt rozloženiariešite, čo kde je, nie ako to vyzeráPojem: wireframe a prototyp
  • Figma: rámce, štýly textu a fariebnávrhový program, ktorý beží v prehliadači; na začiatok stačia základné veciPojem: Figma
  • Komponenty: tlačidlo nakreslené razpoužijete ho všade a zmena sa prejaví narazPojem: dizajnový systém
Prax na vlastnom projekteUčí sa to robením. Vyberte si malý projekt a dotiahnite ho.
Testovanie s ľuďmiNávrh, ktorý nikto nevyskúšal, je len názor. Päť ľudí stačí na začiatok.
  • Päť ľudí odhalí väčšinu najčastejších chýbpodľa Nielsena cca 85 % v jeho modeli; netreba veľký prieskumČlánok: testovanie na piatich ľuďoch
  • Úloha, nie otázka„Nájdite cenník a napíšte nám“, nie „Páči sa vám to?“Pojem: test použiteľnosti
  • Mlčte a pozorujtekde sa človek zastaví alebo vráti, tam je chyba; nevysvetľujte, nenapovedajte
  • Nielsenových 10 heuristík ako kontrolný zoznamprevencia chýb, jasný stav systému, konzistentnosť a ďalších sedemPojem: použiteľnosť
Portfólio a prvé zákazkyPortfólio ukáže, čo viete. Nesľubuje prácu, ale bez neho sa o ňu ťažko žiada.
  • Dva až tri prípady, nie dvadsať obrázkovkaždý: problém, náčrt, test s ľuďmi, zmena po teste
  • Pred a po s dôvodomku každej zmene napíšte jednu vetu, prečo ste ju urobili
  • Prvé projekty menšieho rozsahujedna stránka, formulár alebo prekreslenie pre známeho; rozsah dohodnite písomne
  • Celý postup krok za krokomčo sa učiť v akom poradí a ako to ukázaťČlánok: ako sa stať UX/UI dizajnérom

Ťuknutím na vetvu v mape skočíte na jej detail. Vetvy sa dajú zbaliť ťuknutím na nadpis, odkazy vedú na články, pojmy zo slovníka a služby.

Mapa v texte

Základy

Začnite princípmi: čo je UX (ako sa web používa) a čo UI (ako vyzerá), vizuálna hierarchia (oko vie, čo je dôležité ako prvé), kontrast (text aspoň 4,5 : 1) a typografia (jedno písmo, pár veľkostí, dosť priestoru). Bez nich program kreslí pekné, ale ťažko použiteľné obrazovky.

Nástroje

Na začiatok stačí papier, čiernobiely wireframe (náčrt rozloženia) a jeden návrhový program, napríklad Figma. Naučte sa rámce, štýly textu a farieb a komponenty, teda prvok nakreslený raz a použitý všade. Viac nástrojov netreba, kým nenarazíte na konkrétny problém.

Prax na vlastnom projekte

Vyberte si malý projekt a dotiahnite ho do konca: prekreslite formulár, ktorý vás štve, alebo navrhnite štvorstranový web kaderníctva najprv na mobile. Nakreslite cestu človeka od príchodu po objednanie. Môžete si prejsť aj cudzí web podľa zoznamu otázok a zapísať, čo by ste zmenili.

Testovanie s ľuďmi

Ukážte návrh piatim ľuďom, ktorí ho nepoznajú, a dajte im úlohu (Nájdite cenník). Mlčte a pozorujte, kde sa zastavia. Podľa Nielsena takýto test odhalí väčšinu najčastejších problémov. Nielsenových 10 heuristík použiteľnosti slúži ako kontrolný zoznam pred každým testom.

Portfólio a prvé zákazky

Do portfólia dajte dva až tri prípady s postupom: problém, náčrt, test, zmena po teste a dôvod. Pekné obrazovky bez dôvodu vyzerajú ako obrázok. Prvé projekty budú menšie: stránka pre známeho, formulár, prekreslenie. Rozsah si dohodnite písomne; prácu vám nikto nezaručí.

Pojmy z mapy v slovníku

UX (používateľská skúsenosť)UI dizajn (používateľské rozhranie)Vizuálna hierarchiaWireframe a prototypFigmaTest použiteľnosti

Čítajte ďalej

Časté otázky

Musím mať na začiatok školu alebo certifikát?
Portfólio ukazuje, čo viete urobiť, a pomáha viac než samotný názov kurzu. Škola alebo kurz dajú štruktúru a spätnú väzbu, prácu však nenahradia. Požiadavky určuje každý zamestnávateľ alebo klient a nikto vám prácu nezaručí.
Čo je lepšie na začiatok: kurz, kniha alebo vlastný projekt?
Kombinácia: základy z knihy, kurzu alebo článkov a hneď vlastný projekt. Samotné čítanie nestačí, lebo dizajn sa učí kreslením a testovaním. Vyberte si zdroj, ktorý dokončíte.
Čo je v portfóliu dôležitejšie: pekné obrazovky, alebo postup?
Postup. Ukážte problém, náčrt, test s ľuďmi a zmenu, ktorú ste po ňom urobili. Obrazovky bez vysvetlenia nepovedia, či ste ich navrhli s rozmyslom alebo podľa vkusu.
Kedy sa oplatí mentor alebo kurz?
Keď potrebujete druhý pohľad na svoju prácu alebo neviete, ako ju overiť. Samoštúdium je lacnejšie, ale chýba v ňom spätná väzba. Overte si, čo kurz konkrétne obsahuje, a nenechajte sa presvedčiť sľubom zárobku.

Chcete to prejsť s nami?

Napíšte nám, kde ste sa v mape zasekli. Ozveme sa do pár hodín v pracovný deň, prvých 20 minút konzultácie je zadarmo a ponuku pošleme do 48 hodín.

Prejsť sekciu UI/UX dizajnNapsat nám