Luonnosoppaat

9 vinkkiä nopeamman ja tehokkaamman suunnittelulle, jotta et mene hulluksi

Kyllä, se on luettelo. Mutta nämä ovat hyviä.

Kirjoittajan huomautus ja häpeämätön pistoke: Nämä ovat tekniikoita, jotka otin hakeessani rakentaessani UX-työkalujen suunnittelujärjestelmää. Olen aktiivinen suunnittelija ja käytän tätä järjestelmää 10 tuntia päivässä, samoin kuin kaikki tässä artikkelissa mainitut tekniikat. Jos en uskoisi siihen, en kirjoittaisi siitä

1. Käytä tyylejä

Minusta on tuskaa, kuinka usein tämä on sanottava, mutta jatkan sen sanomista, kunnes aloitat sen tekemisen

Perusteelliset muutokset ovat tulossa Sketchiin pian, mikä tekee elämästäsi niin PALJON HELPOSTA, jos vain soljet ja aloitat tyylien käytön. Ei ole parempaa aikaa kuin nyt.

Tekstityylien ja tasotyylien käyttäminen tekee suunnittelustasi johdonmukaisempaa, ja uskokaa tai älkää, päädyttekö työskentelemään nopeammin.

2. Tee tyylitaulukko

Ei-tarvita-mutta-erittäin kannusti käsittelyssä:

Tyylitaulut ovat erittäin tärkeitä CSS: ssä, koska niiden avulla voit hallita keskitetysti asioiden visuaalista näyttämistä verkkosivustolla. Tee muutos painikkeiden tyyliin, ja kaikki painikkeet päivittyvät koko sivustolla.

Ei ole syytä olla tekemättä sitä suunnitteluprojekteille, jotta hallitset samalla tavalla. Ainoa mitä sinun tarvitsee tehdä, on yksi ainoa taulu, jolla on yksi esiintymä jokaisesta tallennetusta tekstityylistä ja tasotyylista. Niin kauan kuin käytät näitä tyylejä koko suunnittelussa, voit aina käydä uudelleen tämän tyylitaulukon piirrosta, jos haluat päivittää fontin.

UX-työkalujen suunnittelujärjestelmä on rakennettu keskeisen tyylitaulukon päälle. Voit muuttaa fontteja ja värejä yhdellä sivulla, synkronoida muutokset, ja koko järjestelmä päivitetään vastaamaan päivityksiäsi. Se on aika siistiä ja säästää paljon aikaa, kun työskentelen massiivisissa asiakasprojekteissa.

3. Käytä Kalvoa

Tämä on todellakin vain hauska juhlatilaisuus, mutta osoitin tämän tekniikan etuosakehittäjälle viime viikolla ja siivoan edelleen kokoushuonetta, joissa hänen mielensä räjähti.

Miksi käytän läpinäkyvyyttä heksaarvojen sijasta?

Se on siisti pieni temppu varmistaa, että teksti näyttää hyvältä kaikilla taustavärillä. Alla olevassa kuvassa läpinäkyvyys (toinen rivi) näyttää paljon paremmalta kuin harmaa (ensimmäinen rivi), koska se on ottanut värin sävyn sen alapuolelle. Ei ole temppuja; toinen tekstirivi on täsmälleen sama jokaisessa väriskenaariossa. Juuri sinulle sopiva läpinäkyvyys saa heidät näyttämään erilaisista tekstityyleistä. Kaikki yhden hintaan. Kuinka kätevää!

Tätä pientä temppua voidaan käyttää myös painikkeiden reunoihin. Tiedät kuinka joskus haluat punaisen napin, jolla on hieman tummempi punainen reunus? Kokeile sisärajaa, jossa on 25% mustaa:

Läpinäkyvä musta reunus auttaa matkimaan tummempaa värisivua ilman heksaarvoista päänsärkyä.

4. Tee tyhjän tilan symboli

Olen aloittanut tämän tekemisen vasta äskettäin, mutta se on todella mukava ajan säästö. Jos kyseessä on tietoryhmä tai sivuja, joissa tietoja voi olla tai ei, sen mukaan, mitä on luotu tai määritetty, on hyvä idea saada mukava tyhjä tila, jotta käyttäjä voi tietää, että kaikki toivo ei ole kadonnut!

Suunnittele vakio tyhjän tilan symboli, niin voit käyttää sitä nopeasti uudelleen myöhemmin. Minulla on yleensä otsikko, kuvaus, kuva ja toimintapainike:

Kuva upeasti lahjakas kollegani, Parker McCullough.

Bonuspisteiden saamiseksi tee kuvasi sisäkkäisiksi symboleiksi, jotta voit vaihtaa ne sisään ja ulos riippuen käymästäsi sivusta.

Mikä vie minut ...

5. Luo kuvakokoelma

Tämä on vähän edistyksellinen tekniikka, mutta se on yksinkertainen konsepti, joka tekee elämästäsi helpompaa ja myös suosikkikuvittajasi elämästä helpompaa (kiitos, Parker)!

Sketch-kirjastot ovat olleet poissa jo jonkin aikaa, mutta suurin osa ihmisistä käyttää niitä hallitsemaan suunnittelujärjestelmiään. Suosittelen sen käyttämistä myös kuvakirjaston hallitsemiseksi!

Luo erillinen luonnostiedosto kuvituksia varten ja lisää se sitten kirjastoksi:

Luo kuvakirjastoissasi piirrokset jokaiselle tarvitsemallesi mukautetulle kuvalle ja tuota sitten nämä symbolit suunnittelutiedostoosi paikkamerkkeinä:

Kuvailija työskentelee omalla tavallaan millä tahansa haluamallaan vektoriohjelmalla (kuten Illustrator tai Affinity Designer). Kun he ovat lopettaneet piirroksen, heidän on vain pudotettava se sopivaan piirroskuvauskuvakirjastotiedostoosi. Luonnos ilmoittaa sinulle kirjaston päivityksistä, ja sinun tarvitsee vain synkronoida muutokset. Nyt kiiltävä uusi kuvasi on siellä kaikessa loistossaan:

Kuva upeasti lahjakas kollegani, Parker McCullough.

Aika siistiä, vai mitä?

6. Käytä johdonmukaisia ​​kuvakkeita

Nucleo-kuvakkeet ovat ylivoimaisesti parhaat kuvakkeet, joita Internetissä on. Paitsi, että joukko massiivinen ja monipuolinen, mutta heidän työpöydän sovellus on uskomaton.

Voit vaihtaa täytetyistä kuvakkeista viivakuvakkeiksi, muuttaa painoa ja jopa määrittää korostusvärin:

Aivan kuin se ei riitä jo en, en ole koskaan löytänyt helpompaa tapaa valmistella kuvakkeita kehittäjille kuin heidän vientiominaisuus:

Se ei todellakaan ole paljon helpompaa kuin se.

7. Käytä Ale Muñozin Artboard Organizer -laajennusta

Minulla on häpeä sanoa, etten tiennyt tämän olevan olemassa noin kuukautta sitten, mutta olen siitä lähtien käyttänyt pakkomielteisesti.

Tämän laajennuksen on luonut yksi Sketchin johtavista kehittäjistä, joten se. vain. toimii.

Lataa se täältä:

Näpäytä näppäimistön Hit Control-Option-Command-A ja kaikki piirilevysi maagisesti kohdistuvat ja ryhmittelevät itsensä pystysuoraan ja vaakasuoraan. Taidetaulujen rivit edustavat ryhmittymiä (50 kuvapistettä kunkin piirilevyn välillä), ja ryhmittelyt erotetaan pystysuoraan 250 kuvapisteellä.

Tämän laajennuksen kaksi parasta ominaisuutta ovat: Taidekarttojen napsauttaminen ja Kerrosten järjestys. Kun vedät kuvataulun uudelle riville, se napsahtaa automaattisesti paikalleen, vaikka vetäisit sitä muiden taulun välillä. Vielä parempaa, että taulu asettaa itsensä oikeassa suhteessa kaikkiin muihin taulujen luettelossa oleviin tauluihin. Sanon, en ole koskaan tuntenut elämääni niin järjestäytyneenä!

Niin siisti ja siisti!

8. Rakenna tuotearkkitehtuuri (katso yllä)

Kun olet asentanut nro 7 laajennuksen, tuotearkkitehtuureista (joille on todennäköisesti parempi nimi) tulee todella helppo rakentaa. Yllä oleva kuvakaappaus on todellinen tuotearkkitehtuuri, jonka olen luonut asiakasprojektille. Rivit edustavat ominaisuuksia, ja jokainen taulu edustaa tunnistettua näyttöä, joka on suunniteltava. Pienet ovat modaalit.

Ne ovat ihania, koska suunnitteluprosessista tulee kirjaimellisesti pelin täyttäminen tyhjäksi. Koko asiakirjan tarkasteleminen on helppoa nähdäksesi, mitkä puutteet ovat edelleen suunnittelussa, ja on selvää, jos piirilevyjä puuttuu.

9. Anna modaaleille oma taulunsa

Tämä on pieni kärki, joka on mainittu numerossa 8, mutta älä laita modaaliasi kokonaisten piirrosten päälle. On hienoa, jos teet sen kerran vain varmistaaksesi, että se tuntuu oikealta toisen näytön yhteydessä, mutta kun olet selvittänyt oikean koon, sinun ei tarvitse jatkaa sen näyttämistä muiden näyttöjen yläpuolella.

Miksi?

No, mitä tapahtuu, jos päivität näytön kyseisen modaalin alla? Nyt sinun on päivitettävä tämä näyttö kahdesti: kerran itse näytössä ja toisen kerran kyseisen modaalinäytön alla. Melko ärsyttävää.

Jos teet päivityksen vasemmanpuoleiseen näyttöön, sinun on päivitettävä myös oikealla oleva näyttö. Siitä tulee todella ärsyttävää, TODELLINEN NOPEA.

Toinen etu itsenäisten modaalitaulujen tekemisessä on, että voit linkittää niihin modaalikeskusikkunoina InVisionin prototyyppityökalun avulla. Tämän avulla käyttäjä voi napsauttaa painiketta InVision-mallissasi ja luomasi moduuli todella animoi näytölle. Sitten he voivat napsahtaa pois modaalista ja se suljetaan aivan kuten oikeassa sovelluksessa. Asiakkaat rakastavat sitä paskaa!

Kun en etsi lämpimiä ja sumeita tunteita, työskentelen UX-työkalujen kaltaisten resurssien parissa, jotta sinusta tulisi parempi, tehokkaampi suunnittelija.

  1. Seuraa UX-sähkötyökaluja Twitterissä
  2. Seuraa minua Twitterissä
  3. Sano hei LinkedInissä
  4. Opi juttuja ja tilaa agentuurin blogi