UX-i kujunduse alustamine visandis

Krunt uutele UX-i disaineritele ja disainiõpilastele

Oleme viimase kahe aasta jooksul palju kirjutanud visandite näpunäidetest UX-i tööriistades ja tahtsin neid korraldada viisil, mis aitaks disainereid, kes alles alustavad UX-i kasutuselevõttu.

Peaksin mainima ka seda, et ma ei hakka arutama, milline tööriist on parim - ma lihtsalt eeldan, et olete juba aru saanud, et Sketch on parim (praegu) ja tahan teada, kuidas seda UX-i kujundajana kasutada

Olen jaganud meie artiklid viieks jaotiseks, mis kaardistavad minu arvates uute disainerite arengu algajast meisterlikkuseni:

  • Ideede väljatoomine
  • Alustamine
  • Kiiremaks saamine
  • Targemaks saades
  • Visuaalseks saamine

Ideede väljatoomine

UX-i kujundamine algab enne, kui jõuate tööriistadeni - see algab ideede peast välja toomise kohast (... see algab tegelikult enne seda uurimistööga, kuid hoidkem seda artiklit vähem kui 20 minutit).

Tõsi, hüppan üsna varakult otse digitaalsete tööriistade juurde. Kuid see on suuresti seetõttu, et teen rohkem oma peas ja visandan oma disainimeeskonnaga tahvlile ühiselt. Äsja alustanud UX-i disainerid peaksid tõesti olema truuduses, uurides samal ajal probleemiruumi ja tehes vigu.

Kui olete valmis midagi ekraanil kuvama, on minu arvates kaks tööriista seda hõlpsalt hõlbustavat. Esimene neist on InVisioni tööriist Freehand, mille me vaatasime üle:

Teine tööriist, mis seda kujundusfaasi hõlbustab, on Matt D. Smithi poolt loodud Sketchi esmaklassiliste raamatukogude komplekt, mille nimi on Flowkit. See on väärt 29-dollarist hinnasilti.

See pole suurepärane mitte ainult lojaalse truudusega kaadrite kujundamisel, vaid seda saab kasutada ka hilisemates kujundamisetappides, kui peate oma kujunduse edastamiseks olulised töövood kaardistama.

Alustamine

Kaugelt ja teiselt poolt on Sketchi suurim tugevus UX Designis rõhuasetus asjade korduvaks ja kiireks muutmisel.

Endiselt on üsna murettekitav näha, kui paljud visandikujundajad ei kasuta nii lihtsaid ja võimsaid asju nagu jagatud stiilid, ega hilisemaid edusamme, nagu näiteks Pesastatud sümbolid. Ma arvan, et see on sellepärast, et disainerid on kannatamatud ja tahavad asjad lihtsalt ära ajada. Ma saan sellest täiesti aru.

Kuid suurepärane disain on ainult nii hea, kui disainer on korraldatud. Meile meeldib kokanduse metafoor:

Ja meile meeldib ka stiililehtede kontseptsiooni laiendamine koodilt disainile (alates sellest, kui me sellest kirjutasime, on disainisüsteemid sündmuskohale tõesti plahvatuslikult laienenud, kuid enamik neist tehnikatest on tänapäevalgi asjakohased):

Ja lõpuks artiklite püha graali kohta, kuidas Sketchis projekti käivitada, mis hõlmab seda kõike (otse kausta struktuurini):

Boonusartikliga, kuidas visandite visandit reageerivalt seadistada:

Kiiremaks saamine

Ok, nüüd, kui olete aru saanud, kuidas visandiprojekti tõhusalt käivitada, on aeg hakata tööriista abil kiiremini tööle. Mulle isiklikult tundub otsekohe solvav, kui disainer ei kasuta projekteerimisel ühtegi otseteed - ma mõtlen, et see teeb mu hingele tõesti haiget. Ära ole see tüüp / gal:

Pärast selle artikli kirjutamist on välja tulnud umbes poolteist uut tööriista ja pistikprogrammi, kuid tõsi, Sketchi parimad kaaslased pole minu arvates tegelikult muutunud (Nudg.itit toetatakse nüüd loomulikult Sketchis, Anima on endiselt kasulik ka siis, kui osa sellest on visand Sketchi paigutusfunktsioonidesse sisse lülitatud):

Näpunäiteid

Jon Moore on oma energiakasutaja tarkuse esitanud mõnedes artiklites, mis mõjutavad teie meelt nende lihtsuses ja võimsuses:

Targemaks saades

Teate, kuidas projekti seadistada, olete õppinud, kuidas visandiga kiiremini hakkama saada ja nüüd on aeg rakendada seda kõike UX-i kujundusele.

Nagu ma varem ütlesin, sobib Sketch ideaalselt UX-i kujundamiseks, kuna see teeb kordamise, järjepidevuse ja modulaarsuse lihtsaks. Siin on mõned näited, kuidas kasutada eskiisi UI-elementide intelligentseks muutmiseks (ja need kõik on koos tasuta pakkumisega ):

Ikoonide ja graafika tõhus käsitsemine

Järgmises jaotises käsitleme UX-i visuaalse kujunduse poolt, kuid graafikaga tegelemine jääb sageli UX-i disainerite roolikambrist välja. Ikoonide loomise pärast muretsemise asemel saate nutikamaks, kuidas neid kasutada:

Pesastatud sümbolid suudavad tegelikult üsna vähe automatiseerida:

Lõpuks oleksin vallandatud, kui ma ei osutaks Sketchi viimase 12 kuu suurimale edusammule - raamatukogud:

Visuaalseks saamine

Justkui kõigest sellest ei piisanud, on UX-i disaineritel tänapäeval visuaalse disaini osas palju kõrgem standard.

UX-i kujundamisega alustades oli mul keeruline tutvuda nende materjalidega, mida mul oli vaja kujundada: kuvasuhteid, kirjasuurusi, kaalu, värvide kontrasti jne.

Paremaks muutmiseks hakkasin kopeerima olemasolevaid tooteid, et saaksin aru, kuidas UI koosneb.

Kajasime seda eelmisel aastal ja pakume linke mõnele Sketchis uuesti loodud levinud tootele (ehkki mõned neist on hiljem ümber kujundatud):

Sealt saate tõesti hakata kasutama väikseid tehnikaid, et lisada oma kujundusele vaid pisut elegantsi:

Kuid ärge unustage, et täpsed näidisandmed on visuaalse kujunduse jaoks sama olulised kui visuaalid ise:

* me ei kirjutanud kunagi 2. osa

Ja pealegi peate oma karjääri mingil hetkel kujundama armatuurlaua ja see on UX-i disainerite jaoks sageli üks suuremaid õudusunenägusid. Isiklikult leian, et armatuurlauad annavad lauale marginaalse väärtuse, nii et ma ei kulutaks päevi graafikute hea väljanägemisega:

See on olnud hämmastav 18 kuud, aidates UX-i tööriistade kaudu disainikogukonda. Ja kuigi Sketch pole kindlasti ainus tööriist, mis disaineril nende arsenalis olema peaks, on see kindlasti kõige võimsam. Loodetavasti aitab see lisa neid, kes alles alustavad UX-karjääriga või kes on teie disaini töövoogude osas visandiks Sketchile.

Kui olete huvitatud vanillikujundussüsteemist, mis sobib suurepäraselt uute projektide alustamiseks, oleks hea meel, kui uuriksite meie loodud. Need säästavad teid tuhandeid projekteerimisaegu:

Kui ma ei kogu Sketchi artikleid keskmise kohta, siis töötan UX Power Toolsis eskiisi kujundamise tööriistade kallal, et muuta teid paremaks ja tõhusamaks kujundajaks.

Järgige UX-i tööriistu Twitteris
Jälgi mind Twitteris