Visandõpetused

Samm-sammuline juhend visandis uue rakenduse kujundusprojekti käivitamiseks

Ja miks ma mitte kunagi, ei hakka KÕIK neid kunagi nullist alustama.

Olen kindel läbipaistvuse uskuja, nii et enne kui alustame, võlgnen teile selle:
Mõni osa sellest postitusest viitab kujundusraamistikule, mille ise ehitasin ja mille müün. See juhend on siiski kasulik ka siis, kui te seda osta ei soovi.

Kujundusprojekti käivitamine on keeruline.

Pole tähtis, kas olete vabakutseline disainer, töötate kuuma toote agentuuris või aitate suurettevõtte disainimeeskonda toetada ... see on hirmuäratav.

Töötan disainibüroos, mis sõlmib igakuiselt uusi kliente. Minu mitteametlik pealkiri sarnaneb tootekontseptsiooni kujundajaga, mis põhimõtteliselt tähendab lihtsalt seda, et iga kord, kui alustame uue kliendiga, on mul põnev ülesanne luua visuaalseid kontseptsiooniekraane, mis aitavad inspireerida nende järgmise aasta (või kahe… või kolme) tootekaarti. ).

Need kontseptsioonid on piiratud tähtaegadega ja nõuavad kiiret muutust, nii et minu kogu maailm on keskendunud tõhususele ja täpsusele; minu maketid peavad probleemi lahendama, nägema ja olema sujuvaks üleminekuks tootmiskujundusele.

Niipalju kui ma oskan öelda, olen muutunud üsna tõhusaks ja arvasin, et teistel disaineritel võib olla kasu sellest, kui ma näen, kuidas ma uusi projekte alustan.

Märkus. Ma ei näita teile, kuidas valmistada kogu sööki ... vaid seda, kuidas hakkida koostisosi ja lülitada pliit sisse

Sisukord / lühendatud versioon / “Ma ei loe kõike seda”:

  1. Looge failikaustad (jah, päris)
  2. Valige värvid
  3. Valige kirjatüüp
  4. Seadistage ruudustik
  5. „Plokiraami” loomine
  6. Teisendamine Hi-Fi-ks

1. Looge failikaustad

Miks: et hoida minu disainifailid ja varad korrastatuna!
Tööriist (id), mida ma kasutan: Finder + automaatika (allpool)

Kui te ei alusta paremat jalga, siis läbite kogu tee. Minu kausta ülesehitus aitab mind korrastada ja annab mulle võimaluse jagada disainiressursse erinevate osapooltega (turundus, dev jne).

Lisan _underscore, et veenduda, kas need kaustad püsivad loendi tipus.
  • _assets: seda kausta jagatakse tavaliselt sisemiste / väliste arendusmeeskondadega. See sisaldab kõike, mida nad rakenduse ehitamiseks vajavad (näivpildid / sisu, fondid, ikoonid, pildid ja logod).
  • _eksport: igal ajal, kui eksportin ekraani PNG-sse, lähevad nad siia. Seda kausta jagatakse turundusega, nii et neil on alati olemas uusimad ekraanid erinevate turundusmaterjalide (tekkide, veebilehtede, sotsiaalmeedia) paigutamiseks.
  • ui-design: Need on minu lähtefailid. See on tavaliselt vaid üks fail, aga kui ma kunagi uusi loon, siis hoitakse neid siin.

Ma lõin automaatika, et kõik need kaustad minu jaoks luua ...

... ja siit saate seda tasuta saada:

2. Valige värvid

Miks: luua oma projekti jaoks aluskujunduse palett.
Tööriist (id), mida ma kasutan: Coolors.co

Värvide valimine on kõige lihtsam viis alustamiseks. Kui töötate olemasolevas disainisüsteemis, on need tõenäoliselt juba määratletud, sel juhul pöörduge kellegi poole turunduse või visuaalse kujunduse valdkonnas.

Minu disainisüsteemid põhinevad alati viiel põhivärvil:

  • Brändi esmane
  • Must
  • 1. aktsent (edu)
  • Rõhumärk 2 (hoiatus)
  • Rõhumärk 3 (oht)

Miks just need värvid? (vaadake selle artikli 2. jaotist)

Paleti loomiseks aitan kasutada Fabrizio Bianchi nimega Coolorsi rakendust. Vajutate tühikuklahvi ja see valib teie jaoks juhuslikult värvid. Kui leiate endale meelepärase värvi, lukustage see ja jätkake genereerimist, kuni leiate muud värvid. Kui teie brändi värv on juba määratletud, võite sisestada kuueteistkümnendsüsteemi väärtuse, lukustada selle värvi ja seejärel vajutada tühikutele, et ülejäänud värvid genereerida.

Kas näete head värvi edu? Lukustage see. Jätkake, kuni olete leidnud värvid iga 5 põhivärvi jaoks. (vaata seda paletti)

Kui olen kõik peamised värvid tuvastanud, ühendan need oma visandikujundusmalli failiga. Sellel mallifailil on kihistiilid juba määratletud, nii et värskendan neid lihtsalt äsja loodud värvidega:

Minu mallil on ka „sekundaarne” värv, kuid ma ei vaja seda alati.

Täieliku stiililehe loomise üksikasjade kohta lugege seda:

3. Valige kirjatüüp

Miks: et anda minu rakendusele mõni tegelane!
Tööriist (id), mida ma kasutan: Google'i fondid ja fondipaar

Kirjatüübid on kujunduse jaoks sama olulised kui värvid, nii et õige (te) valimine võtab natuke aega. Kuna olete kavandanud rakenduse, mida inimesed saaksid kasutada, on uskumatult tähtis, et valiksite hea kirjatüübi.

Hei Jon, mis teeb rakenduse kujundusest hea kirjatüübi?

Hei, mul on hea meel, et te esitasite Siin on mõned küsimused, mida ma küsin endalt, kui valisin kirjatüüpi:

  • Loetavus: kas see on pikka aega loetav?
  • Skaleeritavus: kas see on loetav, kui see on suur ja kui väike?
  • Varieeruvus: kas kaalu variatsioone on vähemalt kaks?

Google Fonts uuendas oma liidest eelmisel aastal ja seda on tõesti fantastiliselt kasutada. Proovin alati asju katsetada valgel ja mustal taustal, veendumaks, et kõik ikka töötab.

Parempoolsel paneelil olevad seaded on sellised, kuidas mulle meeldib oma otsingut laiendada.

Kui teile meeldib mitu kirjatüüpi - näiteks üks päiste ja teine ​​sisu jaoks -, siis kaevate fondi paari. Nad tegid teie heaks raske töö ja näitavad teile otse joonena, millised kaks fonti üksteise kõrval välja näevad. Kena välimusega paari valimine on tõesti väga lihtne. Lisaks hangib see kõiki fonte Google Fontsist, nii et te ei pea muretsema, et peate midagi maksma.

Testige fonte alati tähtede, numbrite ja kirjavahemärkidega. Mõnikord võite leida ilusa fondi, millel on veider välimus “9” või imelik hüüumärk. Te ei soovi selle veidraga kokku puutuda, kui olete oma kujunduses juba 24 ekraani.

Kui olete oma kirjatüübi (kirjatüübid) valinud, looge visandisse teksti stiilid, näiteks päised, põhiosa ja lingid. Te ei tohiks kunagi lisada kujundusele teksti, välja arvatud juhul, kui see on seotud tekstistiiliga. Kui otsustate fonti muuta ja teil on tekst „määramata”, siis fondi muudatuse sünkroonimisel neid ei värskendata.

Minu visandimalli failil on kõik need standardsed tekstisuurused juba määratletud, nii et saan need kõik lihtsalt valida, fonti muuta ja sünkroonida:

4. Konfigureerige ruudustik

Miks: joondamise järjepidevuse tagamiseks kogu rakenduses.
Vahend (id), mida ma kasutan: Visand ja kalkulaator

On üsna tavaline, et võrgud ehitatakse 8-kordsetest kordadest.

Miks 8?

Nagu selgub, jagunevad kõige populaarsemad ekraani eraldusvõimed 8-ga. Allolevas tabelis testivad veerud, kas laius ja kõrgus on 8x-ga ühtlaselt jagatavad:

Täpsem info siin: https://spec.fm/specifics/8-pt-grid

Selle teabe abil saate hakata otsustama oma võrgu suuruse üle. Kõigepealt otsustage, kuidas teie rakendus ilmub:

  • Täislaius: täislaiuse rakendus on servast servani. Kui see on veebirakendus, ulatub teie kujundus brauseri väga servadeni.
Mulle meeldib seada oma vihmaveerennid vähemalt 24xx. Sel juhul on vihmaveerennid jagatavad 8-ga, kuid veerud mitte. Pole tohutult palju.
  • Ujuv: ujuv rakendus kleepub kindla laiusega võrele, tavaliselt akna keskele.

Ujuvate rakenduste puhul meeldivad mulle, et mõlemad vihmaveetorud ja veerud jagunevad kaheksaga. Siin on lihtne võrrand:

(12 veergu * laius) + (11 vihmaveerennid * laius) = kogu paigutuse laius

  • Hübriid: hübriidrakendus on segu täislaiustest ja ujuvatest elementidest. Veebisait Medium on hübriidrakendus, kuna ülemine päis on kogu laiusega, kuid sisuala on fikseeritud 740 pikslile.
See paigutus on ujuv paigutus, millel on mõned täislaiusega elemendid.

Viimane märkus. Vaikimisi Shift + → kaugus visandil on 10 pikslit. Kui töötate 8 pikslise ruudustikuga, on see SUPER tüütu. Õnneks lubab Sketch seda eelistustes muuta.

5. Ehitage „plokkraam”

Miks: rakenduste paigutuste ja UX-i interaktsioonivoogude kiireks kordamiseks.
Vahend (id), mida kasutan: Noh ... ristkülikud.

Enne raamiraami režiimi sisenemist meeldib mulle ehitada nn blokkraamiks, et luua oma lehe paigutuse erinevad piirkonnad. Idee on hakata tundma just teie määratletud võrku ja blokeerima lehe kõige olulisemad osad kiiresti.

Siin on minu kavandatud vestlusrakenduse raamraam:

Värvide taga pole põhjust. Ilmselt tundsin end isamaalisena.

Selle genereerimiseks kulus mul ainult umbes 90 sekundit, kuid liidese kujundamise alustamiseks on vaja kõiki juhiseid. Ma eelistan seda rohkem kui täiuslik juhtmekujundus, kuna ma kipun hiirekiiresse minema, kui üritan ekraani iga elementi kaadrisse raamida. Võib-olla olen lihtsalt halb disainer? Ma näen lihtsalt paljusid raamiraami, mis on juba nii detailsed, et oleksite seda ka niikuinii esimest korda ringi tehes täielikus visuaalsuses. Lihtsalt minu arvamus!

Põhimõtteliselt on see UX-etapp, kus blokeerin rakenduste töövooge, et veenduda, et iga interaktsioon annab positiivse kasutajakogemuse.

6. Teisendamine Hi-Fi-vormingusse

Nii et ma ei taha teid rippuma jätta ...

… Aga siin teed oma võlu!

Ainus kõige olulisem asi hifi projekteerimisetapis on kinni pidada kõigest, mille oleme seadnud sammudes 1–5.

  • Salvestage asjad õigesse kausta.
  • Kasutage oma paletis ainult värve.
  • Ärge eemalduge oma tekstistiilidest.
  • Vastake alati oma ruudustikule.
  • Blokeerige uued küljendused enne nende täpsust.

Kokkuvõte

Need on sammud, mille astun uue rakenduse kujundusprojekti käivitamiseks. Kui olete huvitatud visandimalli failist, mida kasutan kõigi oma projektide jaoks, olen selle allpool kättesaadavaks teinud. Üksikasjad leiate siit.

Kui ma ei kirjuta, töötan ma visandite kujundamise tööriistade, näiteks UX-tööriistade abil, et muuta teid paremaks ja tõhusamaks kujundajaks. Kõik parimad visandikujundajad ja meeskonnad kasutavad seda ja arvan, et ka teile võib see meeldida. Vaadake seda Marvelist!

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