Verkkosuunnittelijan opas tyylilaatoihin

Tyylilaatat ovat visuaalinen viittaus verkkosivuston (tai muun suunnittelun toimitettavan) muotoilukieleen. Ne auttavat kertomaan tarinan fonttien, väri- ja tyylikokoelmien avulla, ja kun niitä tarkastellaan yhdessä lankakehysten, sivustokarttojen ja muiden käyttöliittymän elementtien kanssa, ne määrittelevät tarinan helposti, asiakasystävällisesti. Tässä artikkelissa selitän, kuinka saada paras hyöty tästä kätevästä tekniikasta.

01. Mitä tyylilaatat sisältävät?

Menestyneen tyyliruudun tulee sisältää esimerkkejä käyttöliittymäelementeistä, määritellä värimaailma, näyttää, miten typografisen suunnittelun periaatteita käytetään, ja osoittaa asiakkaan tuotemerkin ja ehdotetun visuaalisen ratkaisun suhde. Esimerkiksi, jos asiakas on käyttänyt sanoja 'luotettava' tai 'luotettava' kuvaamaan liiketoimintaansa, tyyliruudun tulisi edustaa tätä visuaalisesti.

Ennen kaikkea tyylilaatat tarjoavat lähtökohdan keskustelulle ja selvennykselle asiakkaan liiketoiminnan tavoitteista ja henkilökohtaisista mieltymyksistä.

02. Milloin tyylilaattoja käytetään

Tyylilaatat tarjoavat joustavan lähtökohdan, joka auttaa määrittämään, miltä verkkosivusto näyttää, asiakkaiden ymmärrettävällä tavalla. Ajattele niitä jotain välissä a mieliala aluksella ja mallin - ne auttavat määrittelemään ja kommunikoimaan, miten visuaalista tyyliä käytetään verkkosivustolla, mukaan lukien sekä työpöydälle että mobiilikäyttöön tarkoitetut käyttöliittymät.

Voit käyttää niitä perinteisten ensimmäisten mallien sijaan luomalla asiakkaalta ideoita ja palautetta lopullisen suunnittelutavan saamiseksi. Samantha Warrenin Lista toisistaan Artikkelissa hän kuvaa, kuinka tyylilaataprosessi auttaa 'kiusoittamaan brändin intohimoa, paljastamaan kuvailevan hyvyyden palaset ja yhdistämään asiakkaan projektiin'.

03. Miltä tyylilaatat näyttävät?

Washinton Examiner -tyyppiset laatat 1

Kuva Phase2-tekniikan avulla

Washinton Examiner -tyyppiset laatat 2

Kuva Phase2-tekniikan avulla

Washinton Examiner -tyyppiset laatat 3

Kuva Phase2-tekniikan avulla

Tyylilaattojesi ei tarvitse määritellä tapaa näyttää. Tärkeintä on varmistaa, että et erehdy niihin mielialalevyillä, jotka eivät riitä luomaan visuaalista kieltä täysin, samalla kun et mene liian pitkälle toisella tavalla kohti täydellistä mallimallia.

facebook miten kuvista tehdään yksityisiä

Katso yllä olevat esimerkit Phase2-tekniikasta, joka on luotu työskenneltäessä uudella verkkosivustolla Washington Examiner 2012 -kampanjasivustolle.

04. Kuinka käyttää tyylilaattoja onnistuneesti

Kun ymmärrät tyylilaattojen periaatteet, niiden tulisi sopia siististi suunnitteluprosessiin. Yleensä ne luodaan suunnittelun elinkaaressa aikaisemmin kuin olet ehkä luonut ensimmäiset mallisi, ja seurauksena ne antavat sinulle palautetta nopeammin. Lisää tyyliruudut työnkulkuun noudattamalla seuraavia neljää vaihetta:

Kuuntele asiakasta

Tyylilaatat 1

Kuva: https://twitter.com/heyitsgarrett

Tapaa asiakkaasi projektisi alkaessa ja kerää mahdollisimman paljon asiaankuuluvaa tietoa. Joidenkin suunnittelijoiden voi olla helpompaa suorittaa yksittäisiä haastatteluja sidosryhmien kanssa, kun taas toiset suosivat ryhmäkokousta; tee mikä toimii sinulle. Muista kysyä kaikilta keskeisiltä päätöksentekijöiltä ja sidosryhmiltä samat ydinkysymykset.

Jos se auttaa, voit luoda kyselylomakkeen asiakkaillesi ennen ensimmäistä projektikokousta. Jos yrität tietää, mitä kysymyksiä sinun tulisi kysyä asiakkaaltasi, StyleTil.es verkkosivusto tuo esiin joitain hyödyllisiä resursseja, mukaan lukien nämä Andy Rutledge ja Kim Cullen .

Samanthan Lista toisistaan artikkeli auttaa myös määrittelemään hyödyllisiä kyselytekniikoita, jotta saat parhaan hyödyn näistä ensimmäisistä kokouksista. Tärkeää on, että sinun on kerättävä adjektiiveja kuvaamaan hyödyllisesti tarinaa, jonka asiakkaasi haluavat kuvata verkkosivustonsa kautta.

Käytä muotoilukehystä tulkitsemaan ohjetta

Tyylilaatat 2

Kuva: https://twitter.com/heyitsgarrett

Luo ensimmäisessä vaiheessa tallentamiesi adjektiivien avulla koottu joukko teemojen tunnistamiseksi adjektiivikielellä. Käytä näitä teemoja suunnittelukehykseen käyttäen suunnitteluperiaatteet kuten harmonia ja yhtenäisyys tehdä valintoja suunnittelun elementeistä ja niiden visuaalisesta esityksestä tarinasta. Älä unohda käyttää olemassa olevia tuotemerkkejä, käsinkirjoituksia ja visuaalista kieltä, jotka auttavat kontekstualisoimaan muotoilutiedot ja vastauksesi.

Määritä visuaalinen kieli

Tyylilaatat 3

neo iwata gravity-feed -sarjaan
Kuva: https://twitter.com/heyitsgarrett

Määritä ylikaareutuvat teemat ja aloita niiden sovittaminen tyylilaitteisiin käyttämällä vaiheessa 01 keräämääsi tietoa ja tulkinnassasi tuotettua tulosta vaiheessa 02. Luo uusi ruutu kullekin visuaaliselle tulkinnalle, jonka keksit. Valmiiden tyyliruutujen avulla voit nopeasti selvittää, oletko samalla sivulla asiakkaasi kanssa visuaalisen kielen näkökulmasta.

Samantha Warrenin luoma styletil.es-sivusto tarjoaa sinulle kätevän PSD-mallin ladata ja käytä lähtökohtana tyylisi laatatulostuksessa.

Toista, kunnes tyylistä on sovittu

Tyylilaatat 4

Kuva: https://twitter.com/heyitsgarrett

Tee muutoksia tyyliruutuun yhdessä asiakkaasi kanssa. Koska teet iterointia lopullisen verkkosivuston kontekstin ulkopuolella, voit keskittyä varmistamaan, että tyylillinen lähestymistapa heijastaa edelleen liiketoiminnan tavoitteita ja suunnittelutavoitteita.

musta perjantai Apple kannettava tietokone tarjoukset 2016

05. Pitäisikö tyylilaattojen korvata mallit?

Tyylilaatat: mallien korvaaminen

Luo tyyliruutuja sen sijaan, että luisit mallia suunnitteluprojektin alussa, argumentoi Samantha Warren

Se on yleinen lähestymistapa suunnitteluprojektin alussa sivumallien tuottamiseksi, mutta jos olet koskaan huomannut joutuvasi neuvottelemaan hybridistä - joka koostuu kahden tai useamman mallin elementeistä ja tinkimättä suunnittelun lähestymistavasta - sinä Tunnen turhautumisen, jonka mallien käyttö suunnitteluprosessin alkuvaiheessa voi aiheuttaa.

Asiakkaan näkökulmasta mallisto edustaa täydellistä suunnitteluratkaisua, mutta koska se on usein ensimmäinen kerta, kun he näkevät tulkintasi suunnittelun lyhyt, on ymmärrettävää, että he tunnistavat haluamansa elementit ja elementit, joita ei. On myös luonnollinen johtopäätös, että saamasi palaute pakottaa sinut tuomaan yhteen erilaisia ​​elementtejä eri mallista, mikä johtaa Samantha Warrenin tuotemerkkeihin Franken-comp-ratkaisu .

Mallit saattavat tuntua yksinkertaiselta, ilmeiseltä tavalta määritellä, miten projekti voi aloittaa prosessin siirtymisen suunnittelusta lyhyeksi loppuun. Tyylilaatat voivat kuitenkin olla älykkäämpi tapa käydä asioita, saada palautetta ja määrittää visuaalinen kieli yhteistyössä asiakkaasi kanssa jo varhaisessa vaiheessa.

Tämä voi auttaa välttämään turhautumisen ja pettymyksen tunteen, kun joudut kokoamaan lopullisen mallin täysin irti kytkettyjen tietokoneiden yksittäisistä osista, ja auttaa pitämään asiakkaan täysin mukana suunnitteluprosessissa.

06. Mistä oppia lisää

Sanat : Sam Hampton-Smith

Kuten tämä? Lue nämä!

Mitä mieltä sinä olet? Annatko tyylilaatat mennä vai pidätkö kiinni perinteisistä sivumalleista? Kerro meille näkemyksesi alla olevissa kommenteissa ...