Luonnosoppaat

Vaiheittainen opas uuden sovellussuunnitteluprojektin aloittamiseksi luonnoksessa

Ja miksi en koskaan aloita heitä tyhjästä.

Uskon vakaasti avoimuuteen, joten olen velkaa sinulle ennen kuin aloitamme:
Osa tästä viestistä viittaa suunnittelukehykseen, jonka itse rakensin ja myyn puolella. Tämä opas on silti hyödyllinen, vaikka et osta sitä.

Suunnitteluprojektin aloittaminen on vaikeaa.

Sillä ei ole väliä, oletko freelance-suunnittelija, työskentelet kuumien tuotteiden virastossa tai autatko tukemaan suuryrityksen suunnittelutiimiä - se on pelottavaa.

Työskentelen suunnittelutoimistossa, joka allekirjoittaa uusia asiakkaita kuukausittain. Epävirallinen otsikko on jotain tuotekonseptisuunnittelijaa, mikä tarkoittaa käytännössä vain sitä, että joka kerta kun aloitamme uuden asiakkaan kanssa, saan kiinnostavan työn luoda visionäärisiä konseptinäyttöjä, jotka auttavat inspiroimaan heidän seuraavan vuoden (tai kahden… tai kolmen vuoden) tuotekarttaa. ).

Näillä käsitteillä on tiukat määräajat ja ne edellyttävät nopeaa käännöstä, joten KOKO MAAILMAni on keskittynyt tehokkuuteen ja tarkkuuteen; mallieni on ratkaistava ongelma, annettava visio ja hiottava sujuvalle siirtymiselle tuotesuunnitteluun.

Sikäli kuin voin kertoa, minusta on tullut aika tehokasta, ja ajattelin, että muut suunnittelijat saattavat hyötyä nähdessään kuinka aloitan uusia projekteja.

Huomaa: En näytä sinulle kuinka valmistaa koko ateria ... vain kuinka hienontaa ainekset ja kytkeä liesi päälle

Sisällysluettelo / Lyhennetty versio / ”En lue kaikkia näitä”:

  1. Luo tiedostokansiot (kyllä, oikeasti)
  2. Valitse värit
  3. Valitse kirjasin (t)
  4. Määritä ruudukko
  5. Luo "lohkokehys"
  6. Muunna Hi-Fi-muotoon

1. Luo tiedostokansiot

Miksi: Suunnittelutiedostojen ja omaisuuden pitäminen järjestyksessä!
Käytettävät työkalut: Finder + Automaatio (alla)

Jos et aloita oikealla jalalla, matka kulkee läpi. Kansiorakenne auttaa pitämään minut organisoituneena ja antaa minulle tavan jakaa suunnittelureursseja eri osapuolten kanssa (markkinointi, dev, jne.).

Lisään _underscore varmistaakseni, että kansiot pysyvät luettelon kärjessä.
  • _asetts: Tämä kansio jaetaan yleensä sisäisten / ulkoisten dev-tiimien kanssa. Se sisältää kaiken, mitä he tarvitsevat sovelluksen rakentamiseksi (tyhjät kuvat / sisältö, fontit, kuvakkeet, kuvat ja logot).
  • _vienti: Aina kun viet näytön PNG: hen, he menevät tänne. Tämä kansio jaetaan markkinoinnin kanssa, joten heillä on aina uusimmat näytöt käsillä, jotta ne voidaan laittaa eri markkinointimateriaaleihin (kannet, verkkosivut, sosiaalinen media).
  • ui-design: Nämä ovat lähdetiedostoni. Se on yleensä vain yksi tiedosto, mutta jos luon uusia tiedostoja, ne tallennetaan tähän.

Loin automaation luomaan kaikki nämä kansiot minulle ...

… Ja voit saada sen täältä ilmaiseksi:

2. Valitse värit

Miksi: luodaan pohjasuunnittelupaletti projektilleni.
Käytettävät työkalut: Coolors.co

Värien valinta on helpoin tapa aloittaa. Jos työskentelet jo olemassa olevassa suunnittelujärjestelmässä, nämä on todennäköisesti jo määritelty, jolloin voit kysyä joltakin markkinointia tai visuaalista suunnittelua.

Suunnittelujärjestelmäni rakentuvat aina viidelle päävärille:

  • Tuotemerkki ensisijainen
  • Musta
  • Aksentti 1 (menestys)
  • Aksentti 2 (varoitus)
  • Aksentti 3 (vaara)

Miksi nämä värit? (tutustu kyseisen artikkelin kohtaan 2)

Käytän Fabrizio Bianchin nimeltään Coolors-sovellusta, joka auttaa minua luomaan paletin. Painat välilyöntiä, ja se valitsee satunnaisesti värit sinulle. Kun löydät haluamasi värin, lukitse se sisään ja jatka luomista, kunnes löydät muut värit. Jos tuotemerkkisi väri on jo määritetty, voit syöttää heksadesimaaliarvon, lukita värin ja napsauttaa välilyöntiä saadaksesi loput värit.

Näetkö hyvä “Menestys” -värin? Lukitse se sisään. Jatka, kunnes olet löytänyt värit jokaiselle viidelle päävärille. (katso tämä paletti)

Kun olen tunnistanut jokaisen päävärini, yhdistän ne Sketch-suunnittelumallitiedostooni. Tässä mallitiedostossa on jo määritellyt tasotyyli, joten päivitän niitä juuri luomillani väreillä:

Myös mallissani on

Lisätietoja täysimittaisen tyylitaulukon luomisesta on seuraavassa:

3. Valitse kirjasintyyppi (t)

Miksi: Annan sovellukselleni hahmon!
Käytettävät työkalut: Google-fontit ja fonttipari

Kirjasinlajit ovat suunnittelussa yhtä tärkeitä kuin värit, joten oikea (t) valitseminen vie jonkin aikaa. Koska suunnittelet sovelluksen ihmisten käytettäväksi, on erittäin tärkeää, että valitset hyvän kirjasintyypin.

Hei Jon, mikä tekee hyvästä kirjasintyypistä sovellussuunnitteluun?

Hei, olen iloinen, että kysyit Tässä on joitain kysymyksiä, joita esitän itselleni, kun valitsen kirjasinta:

  • Luettavuus: Onko tämä luettavissa pitkiä aikoja?
  • Skaalautuvuus: Onko tämä luettavissa, kun se on iso ja kun se on pieni?
  • Vaihtelevuus: Onko painovariaatioita ainakin kaksi?

Google Fonts päivitti käyttöliittymäänsä viime vuonna, ja sitä on todella upea käyttää. Varmistan aina, että testaan ​​asiat valkoisella ja mustalla taustalla varmistaakseni, että kaikki toimii edelleen.

Oikeanpuoleisessa paneelissa olevat asetukset ovat miten haluan laajentaa hakua.

Jos pidät useista kirjasintyypeistä - esimerkiksi yksi otsikoille ja toinen sisällölle -, kaivaa kirjasinpari. He tekivät kovan työn puolestasi ja näyttävät sinulle oikealla viivalla, mitkä kaksi kirjasinta näyttävät vierekkäin. Se on todella helppo valita mukavan pari. Lisäksi se lähtee kaikki fontit Google Fontsista, joten sinun ei tarvitse huolehtia siitä, että joudut maksamaan mistään.

Testaa aina kirjasimia, numeroita ja välimerkkejä. Joskus löydät kauniin kirjasimen, jolla on outo näköinen “9” tai outo huutomerkki. Et halua törmätä siihen outoon, kun olet jo 24 näyttöä syvällä suunnittelusi.

Kun olet valinnut kirjasintyylisi, luo luonnoksessa tekstityylejä esimerkiksi otsikoille, tekstin sisällölle ja linkkeille. Älä koskaan lisää tekstiä malliin, ellei se ole sidottu tekstityyliin. Jos päätät muuttaa kirjasinta tiellä ja sinulla on "osoittamaton" teksti, niitä ei päivitetä, kun synkronoit fonttimuutoksen.

Sketch-mallitiedostossani on kaikki nämä standarditekstikoot jo määritetty, joten voin vain valita ne kaikki, vaihtaa fontin ja synkronoida:

4. Määritä ruudukko

Miksi: Kohdistuksen yhdenmukaisuuden varmistamiseksi koko sovelluksessa.
Käytettävät työkalut: Luonnos ja laskin

On tullut melko yleistä, että verkot rakennetaan kahdeksankertaisina.

Miksi 8?

No kuten käy ilmi, suosituimmat näytön resoluutiot ovat jaettavissa kahdella 8. Alla olevassa taulukossa sarakkeet testaavat onko leveys ja korkeus tasaisesti jaettavissa kahdella pikselillä:

Lisätietoja täältä: https://spec.fm/specifics/8-pt-grid

Näiden tietojen avulla voit alkaa päättää ruudukosi koon. Päätä ensin, kuinka sovelluksesi tulee näkyviin:

  • Koko leveys: Täysileveä sovellus on reunasta reunaan. Jos kyseessä on verkkosovellus, kuvasi venyy selaimen reunoihin.
Haluan asettaa kourut vähintään 24xx. Tässä tapauksessa vesikourut voidaan jakaa 8: lla, mutta sarakkeet eivät ole. Ei valtava juttu.
  • Kelluva: kelluva sovellus kiinnittyy kiinteän leveyden verkkoon, yleensä ikkunan keskelle.

Kelluvien sovellusten osalta pidän vesikouruista ja sarakkeistani jaettavissa kahdella 8. Tässä on yksinkertainen yhtälö:

(12 saraketta * leveys) + (11 kouru * leveys) = kokonaisasettelun leveys

  • Hybridi: Hybridi-sovellus on sekoitus täysleveitä ja kelluvia elementtejä. Medium-verkkosivusto on hybridi-sovellus, koska yläotsikko on täysleveä, mutta sisältöalue on kiinteä 740px.
Tämä asettelu on kelluva asettelu, jossa on joitain täysleveitä elementtejä.

Yksi viimeinen huomautus. Oletusvaihtoehto Shift + → etäisyys luonnoksessa on 10px. Tästä tulee erittäin ärsyttävää, kun työskentelet 8px-ruudulla. Onneksi Sketch antaa sinun muuttaa tätä asetuksissa.

5. Luo "lohkokehys"

Miksi: Sopeutua nopeasti sovellusasetteluihin ja UX-vuorovaikutusvirtoihin.
Käytettävät työkalut: Hyvin… suorakulmiot.

Ennen siirtymistä kehystilaan haluan rakentaa ns. Lohkokehykseksi määritelläkseni sivujen asettelun (alueiden) eri alueet. Ideana on saada tuntuma juuri määrittelemästäsi ruudukosta ja estää nopeasti sivun tärkeimmät osat.

Tässä on lohkokehys, jonka tein suunnitellulleni chat-sovellukselle:

Värien takana ei ole perusteluja. Ilmeisesti tunsin isänmaallisuutta.

Tämän luominen kesti vain noin 90 sekuntia, mutta se on kaikki ohjeet, jotka minun on aloitettava käyttöliittymän suunnittelussa. Pidän tätä mieluummin kuin täydellistä langankehystä, koska olen taipuvainen ajautumaan hifiin, kun yritän kehystää ruudun jokaisen näytön elementin. Ehkä olen vain huono suunnittelija? Näen vain paljon jo kehystettyjä kehysjälkeä, jotka olet jo saattanut tehdä sen täydellisessä visuaalisessa uskollisuudessa ensimmäisen kerran "ympäri". Vain mielipiteeni!

Tämä on pohjimmiltaan UX-vaihe, jossa lukitsen kehysten sovellusten työnkulut varmistaakseni, että jokainen vuorovaikutus johtaa positiiviseen käyttökokemukseen.

6. Muunna Hi-Fi-muotoon

Joten en halua antaa sinun roikkuvan ...

... mutta tässä teet taikuusi!

Tärkein hifi-suunnitteluvaiheessa on noudattaa kaikkea mitä olemme asettaneet vaiheissa 1–5.

  • Tallenna asiat oikeisiin kansioihin.
  • Käytä vain värejä paleletissasi.
  • Älä katoa tekstityylistäsi.
  • Noudata aina verkkoosi.
  • Estä uudet asettelut ennen niiden luotettavuutta.

Yhteenveto

Joten nämä ovat askeleet, jotka totean aloittaaksesi uuden sovellussuunnitteluprojektin. Jos olet kiinnostunut kaikissa projekteissani käyttämästäni Sketch-mallitiedostosta, olen asettanut sen saataville alla. Lisätietoja täältä.

Kun en kirjoita, työskentelen Sketch-suunnittelutyökaluilla, kuten UX-työkaluilla, jotta sinusta tulisi parempi, tehokkaampi suunnittelija. Kaikki parhaat luonnoksien suunnittelijat ja tiimit käyttävät sitä, ja luulen, että pidät siitäkin. Tutustu Marveliin!

Seuraa UX-sähkötyökaluja Twitterissä
Seuraa minua Twitterissä