Suunnittelijan opas tyylioppaiden ja tyylilevyjen käsittelyyn

Luodaan a merkkituotteiden identiteetti ei ole helppo tehtävä. Se vaatii kovaa työtä, mutta se on myös yksi palkitsevimmista luovista tehtävistä. Web-projektit usein sekoita tuotemerkin käyttöliittymän suunnitteluun. Tämä voi olla hämmentävää, koska molemmilla alueilla on niin paljon tekemistä. Tyylioppaat ja tyyli laatat ovat suuria resursseja web-suunnittelijoille, ja vaikka ne kuulostavat samankaltaisilta, ne saavuttavat kaksi eri tehtävää.

Tässä viestissä haluan kaivautua molempiin ja kattaa hyödyt, joita saat näistä luovista hyödykkeistä. Kaikki eivät tarvitse (tai haluavat) luoda tyylioppaita tai tyylilevyjä. Mutta jokaisen suunnittelijan pitäisi ainakin ymmärtää, mitä nämä ovat ja miten ne toimivat.

Tyylioppaat Webille

Olen lukenut erilaisia ​​mielipiteitä tyylioppaista. Jotkut sanovat, että nämä ovat digitaalisia malleja, kun taas toiset sanovat, että koodipohjaiset tyylioppaat ovat hyödyllisimpiä.

Joka tapauksessa tyylioppaan tavoite on sama kuin verkossa kuin mikä tahansa muu projekti. Se määrittelee johdonmukaiset mallit, käyttöliittymämoduulit ja luovat asetukset suunnitteluprosessissa. Voit saada hyvin tarkkoja ja määrätä pikselin täydellisiä mittauksia tietyille elementeille tai voit pysyä löysänä ja tarjota ohjeita visuaalisten esimerkkien avulla.

Tyyliopasta ei voi tehdä yhdellä tavalla. Ainoa väärä tapa on luoda yksinkertainen resurssi toiset eivät voi ymmärtää.

Tavoitteena on luoda omaisuus, joka tulee olemaan uhmata ajan hammasta. Sen pitäisi olla avoin muokkauksille jos uusia resursseja luodaan. Sen pitäisi olla myös kaikkien saatavilla, jotka osallistuvat tiimiin sukeltamaan suoraan oppaaseen helposti.

Tyylioppaiden tulisi olla niin yksityiskohtaisesti kuin tarvitaan hankkeen kannalta. Se sisältää yleensä uudelleenkäytettävissä olevat varat, kuten typografia, painikkeet, värimallit, tekstuurit ja yleiset sivuelementit.

Olemme äskettäin käsitelleet elintapojen ohjaustyökalut joka voi auttaa sinua rakentamaan elintapoja oppaita tyhjästä. Nämä elävät oppaat ovat enemmän frontend-kehittäjille, mutta ne voivat olla yhtä hyödyllisiä suunnittelijoille. Voit lukea lisää tästä aiheesta Smashing Magazine -postissa.

Minun ehdoton suosikkiresurssi on StyleGuides.io. Se kattaa tyylioppaiden perusteet verkossa, mukaan lukien live-esimerkkejä ja tapaustutkimuksia.

MailChimpin kuvakirjasto on yksi parhaista esimerkeistä, jotka löydät osoitteesta StyleGuides.io. Se on online-live-tyylinen opas määrittelee MailChimpin ruudukon, typografian ja sivun elementit.

Kun suunnittelet tyyliopasta web-yritykselle, on yleistä laittaa kaikki online-tilaan, mutta voit myös luoda sisäiset oppaat, ja pidä ne paikallisessa intranetissä tai isännöi niitä yksityisesti käyttäjän kirjautumissivun takana. Tapa, jolla pääset tyylioppaaseen, ei todellakaan ole väliä. Ne kaikki palvelevat samaa tarkoitusta, että ne välittävät tiettyjä värejä, kuvioita ja kuvioita vastaavat verkkoprojektin teemaa.

Jos haluat lisätietoja aiheesta, tutustu muihin tyylioppaiden viesteihin:

• Etuosan tyylit-oppaat (24ways.org)
• Luo verkkosivuston tyyliopas (Creativebloq.com)
• Perfect Web Design Style -oppaan tekeminen (Dtelepathy.com)

Haarautuu tyylikkäisiin laattoihin

Tyyli-laatat ovat eri peto kokonaan. Nämä laatat ovat alkuvaiheen suunnitteluvaiheessa käytettyjä luovia voimavaroja kun yrität naulata tietyn estetiikan.

Style Tiles -sivuston on luonut Samantha Warren, ja sillä on kaikki mitä tarvitset tietää. On mitään erityistä mallia tyylilevyn suunnitteluun. Mutta Samanthan esimerkkejä käytetään otsikot ja kappaleiden tyypit, linkit, kuviot, ja mahdolliset värivalinnat yhdessä a tuotemerkin logo.

Työskennellessäsi tyylilevyillä päämääränä on lopulta esittää 2-3 eri tyyliä asiakkaalle tai luovalle johtajalle. Nämä laatat ovat yksityiskohtaisempi kuin mielialalauta, vielä paljon vähemmän yksityiskohtainen kuin täysi mockup.

Laattojen tulisi olla vain riittävän yksityiskohtaisia, jotta ne voivat tunnistaa verkkosivuston identiteetti ja tunnelma. Samantha kannustaa käyttämällä adjektiivia kuvaamaan jokaista laatta yksityiskohtaisesti.

Asiakkaat voivat katso läpi eri laatat, ja valitse heidän suosikkikappaleensa. Tämä säästää aikaa suunnittelussa, koska asiakas on jo nähnyt omaisuuttaan, joten heillä on vähemmän mahdollisuuksia korjaamiseen.

Tässä on hieno lainaus Style Tiles -sivustosta:

Tyypillisten laattojen vertailu sisustussuunnittelijan työkalupakettiin on varsin samanlainen. Et halua kaataa vaivaa pikselin täydelliseen makuun vain, jotta asiakas ymmärtää, että he vihaavat suurinta osaa väreistä ja kirjasimista.

Käytä sen sijaan tyyli- laattoja löytääksesi a yhteinen teema tai visuaalinen kieli käytettäväksi koko sivustossa. Tähän voi sisältyä branding / identiteetti mutta voi myös sisältää UI-ominaisuudet, kuten pudotusvalikot tai CTA-painikkeet.

Sinun tulisi käyttää näitä toimitettavat varat prosessin alkuvaiheessa. Kun olet valmis täydelliseen makuun, ei todellakaan tarvitse viitata tyylin laattaan enää. Alusta alkaen tyyli- laatat voivat olla ratkaisevia luovalle prosessille säästää suunnittelijan aikaa ja antaa asiakkaalle monia vaihtoehtoja.

Jos haluat kaivaa enemmän tyyliä tutustu näihin liittyviin viesteihin.

• Tyyli-laatat ja miten ne toimivat
• Tyyli-laatat: Vaihtoehto täydelliseen suunnitteluun
• Tyyli-laattojen luominen: helppo tapa suunnitella

Style Guides vs. Style Tiles

Tyylioppaiden ja tyylilevyjen välinen ero on epämääräinen, mutta selkeä. tyyliopas on paljon enemmän yksityiskohtainen ja sitä tulisi käyttää a jatkuva viiteopas luovalle tiimille. tyyli laatta voidaan käyttää a moodboard että kuvaa ideoita visuaalisesti itsellesi tai asiakkaalle. Niitä käytetään usein tutkia ideoita, ja kun hanke on valmis, ne eivät palvele suurta osaa tarkoituksesta.

Tyylit ovat usein paljon karheampia reunojen ympärillä, ja niitä käytetään vain alkuvaiheessa. Tyypillinen opas on tarkoitettu käytettäväksi koko suunnitteluprosessin ajan ja myöhempää käyttöä varten muille suunnittelijoille, jotka saattavat työskennellä sivustolla.

Molemmilla on etuja ja haittoja. Tyyli-laatat ovat nopea ja hauska, mutta lyhytaikainen luonnossa. Tyylioppaat ovat perusteellinen ja käyttäytyä visuaalisen dokumentaation tavoin, mutta he myös vaativat paljon työtä.

Joten mitä pitäisi käyttää? Se lopulta riippuu projektista.

Pienemmät hankkeet kuten pienyritysten verkkosivustot toimivat paremmin tyylikkäillä laatoilla. Pienyritysten koko tyylisuuntauksen rakentaminen vaatisi aivan liian paljon työtä ja laskutettavia tunteja. Tämä ei todennäköisesti ole kannattavaa useimmille asiakkaille.

Kuitenkin a suuri projekti kuten NY Timesin uudelleensuunnittelu hyötyisivät sekä tyyli- että tyylioppaista.

Kielen ja tunnelman löytäminen uusi hanke on aina arvokas prosessi. Tämä tekee tyylikkäät laatat sopii lähes kaikkiin skenaarioihin.

Voit myös saada luomatta kumpaakaan näistä varoista. Jotkut suunnittelijat menevät suoraan wireframes että yksityiskohtaisia ​​malleja. Ja jotkut asiakkaat eivät halua edes tyyliopasta, koska sitä ei käytetä.

Työskentele projektikohtaisesti ja päättää, mikä on parasta jokaiselle.

Live-esimerkkejä

Kääri tämä peittämällä esimerkkejä sekä tyylioppaista että tyylilevyistä. Löysin nämä mallit Dribbble-selaamisen aikana, ja mielestäni ne ovat esimerkkinä laadusta, jota haluat omassa tyylin oppaassasi tai tyylikkäät laatat.

Tyylioppaat

Tämä uskomaton Airbnb-tyylin opas on luonut Derek Bradley. Se on hyvin yksinkertainen, mutta se kuvaa selvästi tärkeimmät mallit, värit ja sivun elementit löytyy suunnittelusta.

Tässä on paljon suurempi digitaalisen tyylin opas, jonka on laatinut suunnittelija Naoshad Alam. Tämä esimerkki on paljon järjestäytyneempiä kanssa osia värejä, typografiaa, lomakkeita, liitäntäelementtejä ja muita UI-ominaisuuksia varten.

Yksityiskohtaisemmat tyylioppaat asettaisivat kaikki nämä suunnitteluelementit verkossa ja sisältää koodinpätkät jokaiselle.

Designer Cupi Wong teki tämän oppaan AfterShipille. Typografia, painikkeet, värivalinnat ja yhteiset sivuelementit ovat huolellisesti muotoiltuja järjestetään osiksi.

Tämä voidaan myös siirtää verkkoon ja rakentaa paljon suuremmaksi online-viiteasiakirjoina.

UI-suunnittelija Greg Dlubacz jakoi oman UI-tyylinsä opas web-projektille. Tämä asia on vakavasti valtava. Koko näytön esikatselu kattaa 21 000 pikseliä!

Ehdottomasti yksi parhaista digitaalisen tyylin oppaista, joita olen koskaan nähnyt. Tämä voidaan myös siirtää online-dokumentointisivulle, johon tiimin jäsenet voivat viitata.

Tyyli-laatat

UI / UX-suunnittelija Abdus Salam loi tämän tyylilevyn luomutuotteiden myymälän verkkosivustolle. Se on hyvin yksinkertainen litteät elementit, joitakin pieniä käyttöliittymän ominaisuuksia, ja a väripaletti.

Suunnittelija Adrian Cantelmi meni yksityiskohtaisesti myyntityylinsä laattaan. Se sisältää värejä ja typografiaa, mutta sisältää myös vektorikuvituksia.

Nämä vektorit auttavat määritellä tuotemerkki, tunnelma ja yleinen värimalli verkkosivuilla.

World Cup Advisorsin uudelleensuunnittelussa on oma tyylilevy, jolla on hyvin perusominaisuudet. Muutamia kuvakkeita, joitakin värivalintoja sekä pari-painikkeita. Yksinkertaisuus on pelin nimi.

Jos voit tuntea, mitä sivusto saattaa näyttää yhdellä silmäyksellä sitten teet sen oikein.

Tässä on hauska esimerkki hylätystä tyylilevystä, jota käytetään matkaprojektissa. Suunnittelija Brennan Gleason tarjoaa vain pienen näytteen laatta, mutta voit silti tuntuu verkkosivuston tunnelmasta.

Lopulliset sanat

Jos etsit verkosta löydät lisää esimerkkejä, vinkkejä ja resursseja rakennustyylin oppaat ja tyyli- laatat. Mutta toivon, että tämä artikkeli voi olla pohjustus molemmille ja saada sinut sujuvasti ymmärtämään ja luomaan nämä design-hyödykkeet.