5 vaihetta suunnittelujärjestelmän luomiseen

Näkemyksiä siitä, kuinka olemme luoneet suunnittelujärjestelmämme Sketchiin

Conestoga College Doon -kampuksen suunnittelusäätiöiden studio

Suunnittelujärjestelmistä on tullut pääosa kaikissa suunnittelu- ja kehitysryhmissä. Teknologiayritysten, kuten Google (Material), AirBnB, Uber ja Facebook, edelläkävijöinä, niillä on tärkeä tarkoitus: tarjota yksi referenssipaikka digitaaliselle suunnittelulle, mukaan lukien ohjeet, komponentit ja koodinpätkät. Ne eivät ole vain teknisille yrityksille ja sovelluksille, vaan ne palvelevat kaikkia organisaatioita, joilla on digitaalinen läsnäolo. Tässä viestissä osoitamme sinulle askel askeleelta, kuinka loimme suunnittelujärjestelmämme ja valinnat, joita teimme matkan varrella. Aiomme viitata tuotepiiriin tuotteemme esimerkiksi suunnittelumme kehittämisessä ja olemme valinneet Sketchin suunnittelutyökaluksi komponenttien rakentamiseen ja luettelointiin.

Piirin universaalivalikko

Tietoja piiristä ja suunnittelussa esiintyvistä ongelmista, haasteista ja tavoitteista

Circuit on kiehtova sisältöalusta, jota käytetään luomaan virtuaalikiertoja ja uskomattomia sisältökokemuksia. Käynnistämisen jälkeen olemme keskittyneet käyttökokemuksen parantamiseen parantamalla ja lisäämällä uusia ominaisuuksia. Tuote on edistynyt nopeasti lyhyessä ajassa, mutta etenemissuunnitelmallamme on vielä paljon tehtävää. Kun tuotesuunnittelusta tuli keskeinen tehtävä kehityksen rinnalla, huomasimme, että törmäämme samoihin esteisiin yhä uudelleen:

  1. Oli vaikea suunnitella nopeasti uusia prototyyppejä ja prototyyppejä erilaisille näyttöruuduille ja yhdistää asiakkaiden tuotemerkkejä, logoja ja kuvia lennossa.
  2. Tiimimme kasvaessa oli enemmän tapauksia, joissa mallit eivät olleet synkronoituja ja suunnittelijat työskentelivät vanhentuneiden palettien kanssa tai alkavat tyhjästä.

Yrittäessämme virtaviivaistaa suunnitteluprosessiamme, päätimme ottaa käyttöön suunnittelujärjestelmän.

Mikä on suunnittelujärjestelmä ja miten se auttaa?

Suunnittelujärjestelmä (tai suunnittelukirjasto) on kokoelma ohjeita, tyylioppaita ja uudelleen käytettäviä komponentteja, jotka mahdollistavat nopeiden mallien luomisen ja tukevat ominaisuuksien nopeampaa rakentamista. Se voi vastata tiettyihin kysymyksiin siitä, mitä fontteja ja värejä käytetään verkkosivustoilla, kuinka painikkeet ja paneelit näytetään.

Käynnistämisen jälkeen suunnittelujärjestelmämme, mallien luominen ja mallien kokeilu on erittäin nopeaa. Pystymme suunnittelemaan erilaisia ​​näyttökokoja, mikä auttaa meitä tekemään parempia käyttöliittymäpäätöksiä. Voimme helposti palata takaisin ja muuttaa tekstiä, kokoa, kuvia ja muotoilua lennossa. Tämä on ollut hieno tapa mukauttaa näyttöjä asiakkaiden näyttämiseksi ja palautteen saamiseksi. Voimme myös lisätä rakenteen verkkosuunnitteluprosessiimme ja auttaa tunnistamaan ja virtaviivaistamaan nykyistä verkkosivustoamme, sovellustamme tai tuotteitamme niin, että kaikki ovat samalla sivulla. Lopuksi, se on ainoa totuuden lähde suunnittelijoille ja kehittäjille. Kirjoittamatta laajoja asiakirjoja pystymme luovuttamaan yhden tiedoston tulevalle suunnittelijalle ja välttämään sekaannusta tyylitietoihin.

Taulukko suunnittelujärjestelmän eduista ja haitoista (kaavio on tehty suunnittelujärjestelmämme kanssa!)

Suunnittelujärjestelmän luominen ei ole helppo tehtävä, ja se vaatii jatkuvaa työtä pysyäksesi linjassa aktiivisen verkkosivustosi kanssa. Se on kuitenkin ehdottomasti vaivan arvoista.

Kuinka luoda ja organisoida suunnittelujärjestelmä

Tässä on vaiheet, joita seuraamme suunnittelujärjestelmämme luomiseksi. Valitsimme Sketchin kirjastomme luomiseen. Jotkut suosituksista koskevat sen toiminnallisuutta, mutta käsitteemme, joita käsittelemme, ovat yleisiä. Muita käytettäviä työkaluja ovat Figma, Adobe Xd ja Adobe Illustrator.

Lopputulos voi näyttää tällaiselta.

Vaihe 1 - tarkista verkkosivustosi tai sovelluksesi ja tee luettelo

Aloittamiseksi tarvitset mallin; tämä voi olla malli, aktiivinen sivu tai sovellus. Tapauksessamme meillä oli live-verkkosivusto ja kokoelma komponentteja ja symboleja Sketchissä. Monet suunnittelutiedoston komponentit olivat vanhentuneita tai eivät koskaan saaneet niitä elävään tuotantoympäristöön.

Luo seuraavaksi luettelo kaikista komponenteista, jotka sinulla on, ja tee merkinnät eri tiloista, joissa ne voivat olla (tyhjäkäynnillä, siirtämällä hiiri, napsautettu, poistettu käytöstä, oletus jne.). Luettelomme koostui kirjasimista, väreistä, typografiasta, kuvakkeista ja pitkästä luettelosta komponenteista, kuten avatarit, painikkeet, kortit, alatunnisteet, navigointi, etenemispalkit jne.

Vaihe 2 - Järjestä sivut

Atomisuunnittelumenetelmä (vasen) ja kuvasivut (oikealla)

Riippumatta valitusta ohjelmistosta, käytät todennäköisesti sivuja kirjaston sisällön järjestämiseen. Voit tehdä tämän kahdella tavalla. Ensimmäinen on Brad Frostin Atomic Design Methodology, jossa elementit on mallinnettu viiden hierarkkisen ryhmittelyn mukaisesti: atomit, molekyylit, organismit, mallit, sivut. Toinen menetelmä, jota kutsumme mallisivuiksi, esittelee liittyvät komponentit omille sivuilleen, kuten värit, tyyppi, kuvakkeet, avatarit, painikkeet jne. Vertailun vuoksi, se on litteä rakenne ilman paljon heirarkya, joka voi tehdä siitä selkeämmän tulevat suunnittelijat paikallistamaan tietyt kappaleet, mutta puuttuu Atomic-menetelmän jäsennelty rakennusvirta.

Kuinka järjestämme suunnittelumme

Järjestelimme järjestelmämme atomien periaatteiden mukaisesti, vaikka yksinkertaistimme sitä huomattavasti. Meillä oli 5 pääsivua:

Suuntaviivojen sivu kirjalliselle dokumentoinnille, joka selittää suunnittelujärjestelmän standardit ja tavoitteet.

Hiekkalaatikkosivu, joka on suunnittelun 'dev-ympäristö'. Käytämme tätä kokeillaksemme uusia ominaisuuksia ja malleja. Kun ominaisuus on hyväksytty, rakennettu, testattu ja mainostettu tuotantoon, päivitämme suunnittelun ja mainostamme sen ydinkirjastoon.

Symbolisivu, joka sisältää kaikki atomimme, molekyylimme ja organismiemme, yksinkertaisista painikkeista ja kuvakkeista komposiittikomponenteihin, ryhmitettynä ja järjestettynä aakkosjärjestykseen. Teimme tämän, jotta komponentit on nopeasti löydettävissä ja voimme liikkua nopeasti sivulla kaikkien piirrosten läpi. Tämä ei välttämättä toimi suurempien suunnittelukirjastojen suhteen, mutta nyt se sopii tarpeisiimme.

Valmis symbolisivu

Tyyliopas, joka on yhdistelmä malliesineitä, kuten fontti, typografia ja kuvakkeet, komponentit, mallit ja sivut. Olemme sijoittaneet symbolit ryhmille tällä sivulla, ja koko tyyli-opas on helppo viedä PDF-dokumentiksi, kun meidän on luovutettava se suunnittelijalle tai kehittäjälle.

Yksi Style Guide -sivuista

Viimeiseksi muutosloki, jolla seurataan suuria muutoksia, luojaita ja julkaisuja suunnittelukirjaston kehittyessä ajan myötä.

Kaiken kaikkiaan se on sinun mieltymyksesi, ja tapan, jolla suunnittelujärjestelmäsi organisoidaan, tulisi sopia tuotteesi ja tiimisi tarpeisiin.

Vaihe 3 - Luo tasotyyli ja tekstityylit (ohita tämä vaihe, jos sinulla ei ole luonnos)

Kerros- ja tekstityylit ovat hienoja, koska niiden avulla voit ohittaa tyyleihin liitetyt muodot ja tekstin myöhemmin.

Kerrostyylien avulla voimme tallentaa objektien ominaisuuksia, kuten täyttö, reunat, varjot, kohdistus jne., Ja antaa meille mahdollisuuden soveltaa niitä johdonmukaisesti muihin kohteisiin.

Piiri-kerroksen tyylit

Tasotyylin lisääminen: valitse kohde ja napsauta Ominaisuudet-paneelissa ulkonäön alla napsauttamalla Ei kerrostyyliä ja Luo uusi tasotyyli tallentaaksesi kohteen ominaisuudet.

Tasotyylin nimeäminen: miten tyylit nimetään, riippuu siitä, miten ne näkyvät valikossa (yllä). Jos huomaat, että tyylisi saavuttaminen vie liian kauan tai jota on vaikea löytää, voit muuttaa sitä tyylit-ikkunassa. Kerros> Järjestä kerrosmallit. Näin nimitimme kerrostyylimme:

Piiri / Väri / Ensisijainen / Sininen / Medium

Tekstityylien avulla voimme tallentaa tekstin ominaisuudet, mukaan lukien fonttikoko, fontti, kohdistus jne., Ja antaa meille mahdollisuuden syöttää tai muuttaa nopeasti symbolien tekstiä myöhemmin. Täällä haluat todennäköisesti organisoida tyylisi verkkosivujen tekstin semanttisen luokituksen mukaan, ts. H1, H2, H3, runko ja niin edelleen.

Piirin tekstityylit

Tekstityylin lisääminen: valitse teksti ja napsauta Ominaisuudet-paneelissa ulkonäköäsi ”Ei tekstityyliä” ja sitten ”Luo ​​uusi tekstityyli”.

Tekstityylien nimeäminen: Samanlaisia ​​kuin tasotyylien nimeäminen. Ryhmittelimme tyylimme H1, H2, H3,… kappaleiden ja niiden komponenttien mukaan, jotka tarvitsivat sen oman tekstityylin.

Voit myös soveltaa tasotyylejä tekstityyleihin. Näin:
Valitse teksti> Kerros> Muunna ääriviivoiksi, niin sinun pitäisi pystyä lisäämään tasotyylit tekstiin kuten mikä tahansa normaali muoto. Jos sinulla on paljon tekstiä, tämän tekeminen liian paljon voi kaataa luonnoksesi tai tehdä siitä uskomattoman viivästyneen.

Vaihe 4 - Luo symbolit / komponentit

Tämä on hauska osa. Kiinnitä erityistä huomiota välimatkoihin, koon mitoitukseen, muotoihin ja muista soveltaa teksti- ja tasotyyleja komponenttien yksittäisiin osiin, mikä mahdollistaa osien ohittamisen myöhemmin. Tavoitteena on saada täysi kokoelma symboleja ja komponentteja.

Luo symboli: Ryhmittele piirrosluonnoksessa luonnos ja paina yläluettelossa ”Luo ​​symboli”. Aloita pienestä määrittelemällä esimerkiksi painikkeilla, avatareilla ja kuvakkeilla, siirry sitten rakentamaan komposiittiosia.

Nimeä symboli: Tämä määrittää kuinka ne näkyvät lisäysvalikossa. Painikkeen kohdalla nimitimme ne sellaisiksi:

Painike / Default / Idle
Painike / Default / Hover
Painike / Default / -palveluja

Nimeä ja järjestä symbolissasi olevat tasot: Tämä on erittäin tärkeätä, koska näin ne näkyvät ohittamisessa. Ajattele itsesi, onko tilauksella järkeä ja onko se nimetty ja tilattu, kuinka joku muu odottaa sitä?

Ohita korttikomponentin paneeli

Tietenkin, et voi aina tilata niitä tavalla, joka on järkevää löytää ohitus, koska tasot määrittävät edelleen, mikä elementti on päällä, mutta on silti hyvä pitää mielessä, kun luot symboleja.

Sisäkkäiset symbolit: Symbolien sisällä olevat symbolit. Käyttämällä pienempiä symboleja yhdistelmäsymbolien luomiseen, voit tehdä muutoksen yhdessä paikassa ja saada sen heijastamaan kaikki mallit kaikissa tapauksissa. Jos esimerkiksi muutat sanotun painikkeen ominaisuuksia, kaikki painikkeet koko maketissa myös muuttuvat.

Skaalaa uusi symboli testattavaksi!

Suurenna symboliasi: Responsiivinen suunnittelu on nyt yleinen käytäntö. Kun luot ensimmäistä kertaa symbolisi, saatat huomata, että elementit eivät ehkä ole mittakaavassa odotetulla tavalla. Voit määrittää, kuinka asiat skaalautuvat ominaisuuspaneelin koon muuttamisikkunassa. Hiiri hiiren osoittamalla esikatselun päälle näyttää, kuinka se skaalautuu.

Huomaa, että skaalata on helpompaa kuin pienentää, koska joskus asiat muuttuvat hieman hankaliksi. Joten jos olet epävarma, aloita pieni!

Luo malleja ja sivuja - Kun sinulla on kokoelma symboleja, voit aloittaa mallien ja sivujen luomisen koko näytön nopeiden mallien luomiseksi. On myös hyvä aloittaa symbolien kerääminen tyylioppaaseen niiden järjestämistä ja esittämistä varten.

Matkapuhelimen näytön malli, joka näyttää ohitusten soveltamisen

Vaihe 5 - Suunnittelujärjestelmän käynnissä olevat päivitykset

Et koskaan tiedä kuinka hyvin järjestelmäsi toimii, ennen kuin käytät sitä luomaan joitain malleja. Sitten saatat huomata, että joudut palaamaan takaisin ja säätämään symboleitasi, koska ne eivät mitoita haluamallasi tavalla, tai huomasit, että se oli liian tylsiä käyttämään joitain kerrostyylejä ja että sinulla olisi mieluummin vähemmän napsautuksia päästäksesi tyyliin .

Ja se on kunnossa! Muista, että suunnittelujärjestelmä on elävä kirjasto ja sitä on päivitettävä jatkuvasti.

Tässä on muutama ylimääräinen luonnosvinkki järjestelmän hallintaan:

  • Luo tietokansiot lisätäksesi oman kirjastosi ohituskuviin. Muista, että jos siirrät kansiota, sinun on linkitettävä se uudelleen. Luonnos> Asetukset> Data / kirjasto.
  • Kirjaston päivittäminen muihin asiakirjoihin - oikeassa yläkulmassa olevat ilmoitukset → Päivitä kirjasto (kirjaston on ensin tallennettava ja suljettava)
  • Sketch API on virallinen, päivitetty lähde, joka tarkistaa tosiasiat, koska kolmansien osapuolien verkkosivustoilla on joskus vanhentuneita tietoja.
  • SketchApp-lähteet ovat hyödyllinen paikka ilmaiseksi omaisuuden luonnokseksi

Laajennukset helpottavat suunnittelujärjestelmän käyttöä ja organisointia. Muutamia, joita rakastamme tällä hetkellä:

  1. Sketch Runner - lisää symbolit nopeasti näppäimistöllä!
  2. Symbol Organizer - tee symbolisivustasi mukava ja järjestetty haluamallasi tavalla.
  3. Unsplash It - Lisää kuvia Unsplashista.

Toivomme, että tästä artikkelista on ollut apua osoittamalla, kuinka voit virtaviivaistaa työnkulkuasi suunnittelukirjastolla. Hyvää luomista!