Náčrt od A do Z: Staň sa UI dizajnérom

Sketch-Tutorial – staň sa dizajnérom UI a UX.

Jazyk: Nemčina

Návod na kreslenie – staň sa dizajnérom UI a UX.

Sketch je účinný a intuitívny nástroj, s ktorým vytvárate prototypy webových projektov. Pomocou UI- a UX-software vytvárate dynamické užívateľské rozhrania pre webové stránky a aplikácie. Dôležitou výhodou je, že sa dizajny riadia pravidlami webdesignu, čo umožňuje priamo predať vývoju následné použiteľné riešenie. Spoznaj Sketch v tomto viac ako päťhodinovom tutoriáli od Luca Kiedrowskiho, ktorý ťa prakticky zavedie od konceptu cez prototyp až k plne navrhnutému webovému rozhraniu.

Staň sa dizajnérom UI a UX: Vytváraj užívateľské rozhrania pre webové stránky a aplikácie s pomocou nástroja Sketch.
Pre rýchly štart: Získaj základy dizajnu Sketch, UI a UX.
Pre tvoj pokrok: Nauč sa pokročilé techniky dizajnu ako booleovské operátory.
Praktický tutoriál: Vytvorte moderné užívateľské rozhranie na príklade aplikácie.
Lepšia tímová spolupráca s vývojármi: Ponúkajte im priamo prototypy, ktoré je možné vyvíjať.
Porozumiete koncepciu UI a UX do 5 hodín: Tréner Luca Kiedrowski ukazuje príklady najlepších postupov.
Tak sa naučené udrží v pamäti: Vrátane pracovných materiálov na zapojenie.

Aj Google a Apple sú závislé na aplikácii Sketch - postupuj ako veľkí a nauč sa teraz, ako jednoducho vytvárať krásne, užívateľsky prívetivé a navyše pripravené na vývoj rozhrania UI.

Podrobnosti

Použiteľné s:
Obsah: 5 h Video-tréning
Licencia: súkromná a komerčná Práva na používanie
Bonus: vrátane pracovných materiálov

Kategórie

Návrh (ilustrácia, rozloženie a tlač)

Vytvorené s láskou od:

Luca Kiedrowski

Príklady použitia

Otvoriť galériu

Príklad: V tutoriáli vytvoríš pomocou Sketchu rozvíjateľnú aplikáciu.
Otvoriť galériu

Príklad: Tvoj tréner ti poskytuje tipy a triky týkajúce sa moderného UX a UI dizajnu.

Úvod

Zadarmo

Návod na kresbu: 1.1 Úvod

Srdečne vítame v návode na skicovanie: Nauč sa, ako môžeš vytvoriť vlastné aplikácie pomocou programu. Tu je prehľad kurzu.

Stiahnite si projektový súbor

Zadarmo

Návod na kreslenie: 1.2 Čo je Sketch?

Stručný úvod do programu "Sketch" a ako získať prístup k tomuto programu.

Návod na kreslenie: 1.3 Programové rozhranie

Návod na kreslenie: 1.3 Programe rozhranie.

Tu sa naučíš lepšie poznávať Sketch. Ukážem ti celý program a naučíš sa, ako s ním môžeš efektívne pracovať.

Návod na skicovanie: 1.4 Pomôcky.

Sketch by nebolo tak úžasné program, keby si nemohol použiť žiadne nástroje. Tu sa dozvieš, ako pridať tieto pomocné prostriedky.

Návod na kresbu: 1.5 Najdôležitejšie pluginy

Návod kreslenia: 1.5 Najdôležitejšie moduly

Pluginy ti pomáhajú pracovať s Sketch ešte lepšie a rýchlejšie. Ukážem ti, ktoré pluginy ti môžu najviac pomôcť.

Návod na kreslenie: Inštalácia knižníc 1.6

Návod na kreslenie: 1.6 Inštalácia knižníc

S knižnicami môžete priamo integrovať štandardizované dizajny od Apple alebo Android do vášho projektu.

Návod na kreslenie: 1.7 InVision

InVision je nástroj, ktorý vám výrazne uľahčí vašu projekt Sketch. Tam môžete vytvárať "drôtené modely", aby ste si mohli štruktúrovať projekt.

Základy dizajnu

Návod na kreslenie: 2.1 Farby

Farby ti poskytujú možnosť naplniť svoju aplikáciu životom. Tu nájdeš malý úvod do sveta farieb.

Návod na kreslenie: 2.2 Písma

Sociálna sieť „Medium“ ukazuje, ako veľmi môžu písma ovplyvniť používateľský zážitok. Písma vo vašej aplikácii môžu byť veľmi dôležité.

Vytvoriť prototypy

Návod na kreslenie: 3 prototypy

Teraz začneme s vlastnou aplikáciou.

Screen-Design --> Obrazovkový dizajn

Návod na kreslenie: 4.1 Hlavná obrazovka a dizajnové šablóny

Návod na kreslenie: 4.1 Domovská obrazovka a dizajnové šablóny

Teraz sa pustíme do našeho skutočného projektu a začneme s domovskou obrazovkou. Okrem toho sa tu naučíš, ako môžeme vytvárať dizajnové šablóny.

Sprievodca kresbou: Vytváranie skupín a štýlov textu 4.2

Návod na skicovanie: 4.2 Vytváranie skupín a textových štýlov

V tejto lekcii sa naučíte, ako vytvárať skupiny a ukladať štýly textu, aby ste ušetrili čas.

Návod na kreslenie: Nájsť, vytvoriť a prispôsobiť ikony 4.3

Ikony sú veľkou časťou aplikácie. V tomto videu sa dozvieš, kde nájdeš tie najlepšie ikony a ako ich integrovať do svojho projektu.

Návod na skicovanie: Navrhnutie chatu 4.4 a práca s vrstvami

Návod na skici: Návrh chatu 4.4, práca s vrstvami.

Teraz sa presunieme do chatu našej aplikácie. Tam pracujeme s vrstvami, ktoré by si tiež mal/a využiť, aby si ušetril/a čas.

Návod na skicovanie: 4,5 dizajn iPhone X

Návod na kreslenie: 4.5 dizajn pre iPhone X

iPhone X zmenilo niektoré veci v dizajne aplikácií. Designéri teraz musia pracovať s novým tvarom obrazovky. Tu sa dozvieš základy.

Návod na kreslenie: 4.6 Užívateľský profil, rozostrený efekt

Návod na kreslenie: 4.6 Užívateľský profil, rozmazaný efekt

S efektmi môžeš svojej aplikácii dať zaujímavý dizajn. V našom používateľskom profile používame rozmazanie efektu.

Návod na kreslenie: 4.7 Využitie dizajnu ako nástroja

V tomto videu sa dozvieš, ako môžeš využiť dizajn ako nástroj na zdokonalenie svojej aplikácie.

Návod na skicovanie: Využívanie knižníc 4.8 a vytvorenie akčného listu

Návod na vytvorenie náčrtu: Pracovať s knižnicami 4.8 a vytvoriť akčný list.

Teraz využívame knižnicu iOS na vytvorenie Action Sheetu. S knižnicami môžeš ušetriť čas nielen pri dizajnovaní, ale aj pri vývoji.

Poskytovať dizajny

Návod na skicovanie: Poskytnúť 5 dizajnov v InVision

Návod na kreslenie: Poskytnutie 5 dizajnov v nástroji InVision.

Ak má byť vyvinutá tvoja aplikácia, vývojári potrebujú tvoje návrhy. V tejto lekcií sa dozvieš, ako pripraviť svoje návrhy v InVision.

Poskytnúť dôležité informácie.

Návod na kreslenie: 6 Pomoc vložiť do aplikácie

Návod kreslenia: 6 vložte pomoc do aplikácie

Používatelia aplikácie často nenájdu správne tlačidlá alebo majú iné otázky, ktoré nie sú zrejmé. Preto vytvárame sekciu otázok a odpovedí.

Profesionálny dizajn

Návod na kreslenie: Vytvorenie grafov v plochom dizajne 7.1

Návod na kreslenie: Vytváranie grafiky v flat design štýle 7.1

Keď máš pre svoje projekty tvrdé termíny, často nemáš čas navrhovať všetko sám. Tu sa dozvieš, ako a kde získať pomoc.

Návod na skicovanie: 7.2 Prepracovanie domova

Návod na kreslenie: 7.2 Redizajn domova.

Na domácej obrazovke máme stále veľa priestoru na zlepšenie. Preto robíme redesign nášho prvého obrazovky.

Návod na kresbu: 7.3 User Experience nákupný proces

Návod na kreslenie: 7.3 Používateľská skúsenosť pri nákupe

Proces nákupu používateľa musí bežať ako po masle, pretože ide o jeden z najcitlivejších okamihov v user flow.

Novinky v Sketchu

Návod na kreslenie: 8 Prototypanie v Sketch-u

Návod na kreslenie: 8 prototypovanie v Sketch

V novej verzii Sketch máš možnosť vytvoriť prototyp priamo v programe Sketch.

Podrobnosti obsahu

Porozumieť mobilnému UI a UX dizajnu a implementovať ho pomocou Sketchu
Či už ide o aplikáciu, webovú stránku alebo blog - oživte svoj koncept UI a UX pomocou Sketchu. V tomto trvajúcom viac ako päťhodinovom video návode od trénera Luca Kiedrowskiho si rýchlo osvojíte všetky základy ovládania programu, aby ste už čoskoro intenzívne pracovali na interaktívnom príkladovom projekte dizajnu aplikácie.

Prečo by ste si mali pozrieť Sketch tutoriál

Pri dizajne UI a UX sa priamo spoliehate na profesionálny nástroj, pretože Sketch používajú aj známe spoločnosti ako Google, Facebook a Apple. Vďaka intuitívnemu ovládaniu sa program rýchlo naučíte ovládať, takže už v krátkom čase dosiahnete prezentovateľné výsledky.

Nehľadiac na to, či prichádzate s dizajnovým pozadím alebo bez neho: Tutoriál Sketch je vynikajúcim spôsobom, ako sa uviesť do problematiky dizajnu UI a UX a špeciálne realizovať svoje vlastné nápady na dizajn aplikácií pomocou Sketchu. Základy a aplikácie v jednom!

Ak už navrhuješ dizajny pre web a tlač (napríklad v programe Photoshop alebo Illustrator): Ochráňte si schopnosť previesť vaše dizajny a jednotlivé prvky ako ikony alebo symboly do dynamických a pripravených na rozvoj dizajnov rozhraní pomocou UI. S vašimi znalosťami v oblasti webdizajnu ponúknete vášmu životopisu veľké (a stále viac) požadované plus.

Zlepšite spoluprácu so webovými vývojármi: Použitím Sketchu pripravujete užívateľské rozhrania, ktoré sa už teraz riadia pravidlami webového dizajnu. V dôsledku toho predávate vývojárom dizajnové návrhy, ktoré možno priamo realizovať. Týmto spôsobom výrazne skracujete cestu od konceptu a dizajnu k vytvorenej webovej aplikácii.

UI a UX dizajn s Sketch od A po Z

Hlavný dôraz tutoriálu Sketchu leží na praktickom použití programu, ktorý je dostupný u poskytovateľa vo verzii s bezplatnou skúšobnou verziou. S vaším trénerom prejdete na príklade dizajnu aplikácie krok za krokom všetky fázy, od vytvorenia náčrtu až po hotový dizajn UI. Pracovné materiály sú súčasťou tutoriálu, takže môžete okamžite prakticky zapojiť:

Najprv hrubo nakreslíte, ako by mala vyzerať užívateľská rozhranie aplikácie v budúcnosti. Potom rozmýšľate o návrhu. Vytvoríte úvodnú obrazovku, pracujete s skupinami, vrstvami a textovými štýlmi a vyberáte vhodné ikony. Navrhujete chat, pomoc a používateľský profil a dozviete sa, ako pracovať s knižnicami, akčnými tabuľkami a efektmi. Na konci máte úplný dizajn UI, z ktorého môžete dokonca v aktuálnej verzii 52 programu Sketch vytvoriť prototyp.

Vopred si osvojíte základné poznatky o Sketchu a dizajne UI. Takže sa rýchlo zorientujete v užívateľskom rozhraní, poznáte hlavné doplnky a nástroje a viete o účelnom používaní písma a farieb. Váš tréner vám tiež ukáže, kedy sa oplatí Sketch kombinovať s InVision, napríklad vo fáze takzvaného wireframingu.