Vodič dizajnera za rad sa stilskim vodičima i stilskim pločicama
Stvaranje a brandirani identitet nije lak zadatak. Za to je potreban naporan napor, ali i jedan od najvažnijih kreativnih zadataka. Web projekti često mix branding s dizajnom sučelja. To može biti zbunjujuće, jer postoji mnogo posla u oba područja. Vodiči za stil i stil pločice su veliki resursi za web dizajnere, i iako oni zvuče slično, postižu dva različita zadatka.
U ovom postu, želio bih se upustiti u oboje, i pokriti koristi koje možete dobiti od tih kreativnih sredstava. Neće svatko morati (ili voljeti) stvarati stilske vodiče ili stilske pločice. No svaki bi dizajner trebao barem razumjeti što je to i kako oni rade.
Stilski vodiči za web
Pročitao sam različita mišljenja o stilskim vodičima. Neki kažu da su to digitalne makete, dok drugi kažu da su kodni stilski vodiči najkorisniji.
U svakom slučaju, cilj vodiča za stil je isti za web kao i svaki drugi projekt. Ona definira dosljedne obrasce, module korisničkog sučelja i kreativne postavke u procesu projektiranja. Možete dobiti vrlo specifične i odrediti piksel-savršene mjerenja za određene elemente, ili možete ostati labav i ponuditi smjernice s vizualnim primjerima.
Ne postoji jedan pravi način da se napravi stilski vodič. Jedini pogrešan način je stvoriti resurs koji jednostavno ne mogu razumjeti drugi.
Cilj je stvoriti imovinu koja hoće izdržite test vremena. Trebalo bi biti otvoreno za uređivanje ako se stvaraju novi resursi. Također bi trebao biti dostupan svima koji se pridruže timu kako bi se s lakoćom zaronili u vodič.
Vodič za stil bi trebao biti koliko je potrebno za projekt. Obično uključuje sredstva koja se mogu ponovno koristiti, kao što su tipografija, gumbi, uzorci boja, teksture i uobičajeni elementi stranice.
Nedavno smo pokrili alati za vođenje stila života koji vam mogu pomoći da izgradite vodiče za životni stil od nule. Ovi živi vodiči više služe za programere, ali mogu biti korisni i dizajnerima. Više o ovoj temi možete pročitati u ovom časopisu Smashing Magazine.
Moj apsolutni omiljeni izvor je StyleGuides.io. Pokriva osnove stilskih vodiča za web, uključujući primjeri uživo i Studije slučaja.
MailChimp-ova knjižnica uzoraka je jedan od najboljih primjera koje možete pronaći na StyleGuides.io. To je online vodič uživo definira MailChimpovu mrežu, tipografiju i elemente stranice.
Kada dizajnirate stilski vodič za web tvrtku, uobičajeno je da sve stavite na internet, ali možete i stvoriti interne vodiče, i zadržite ih na lokalnom intranetu ili ih privatno smjestite iza stranice za prijavu korisnika. Način na koji pristupate vodiču za stil zapravo nije važan. Svi oni služe istoj svrsi prenošenja određenih boja, uzoraka i vizuala odgovaraju temi web projekta.
Da biste saznali više o toj temi, pogledajte ove ostale postove u vodičima za stil:
- Vodiči stilova s prednje strane (24ways.org)
- Izradite vodič za stil stranice (Creativebloq.com)
- Kako napraviti Perfect Web Design Style Guide (Dtelepathy.com)
Grananje u stil pločice
Stilske pločice su potpuno drugačija zvijer. Ove pločice su kreativna sredstva koja se koriste u ranoj fazi projektiranja kada pokušavate zabiti određenu estetiku.
Web stranicu Style Tiles izradio je Samantha Warren i ima sve što biste možda trebali znati. Tamo je nema specifičnog predloška za izradu pločica u stilu. Ali Samantini primjeri koriste naslovi i vrste stavaka, veze, obrasci, i moguć izbor boja zajedno s logotip.
Kada radite sa stilskim pločicama, vaš je cilj na kraju predstaviti 2-3 različite pločice klijentu ili kreativnom direktoru. Ove pločice su detaljnije od ploče raspoloženja, još mnogo manje detaljan od punog modela.
Pločice bi trebale biti dovoljno detaljne kako bi se dobio osjećaj identitet i raspoloženje web-mjesta. Samantha ohrabruje pomoću pridjeva detaljno opisati svaku pločicu.
Klijenti mogu gledati kroz različite pločice, i odaberite svoje najdraže komade. Ovaj štedi vam vrijeme prilikom dizajniranja jer je klijent već vidio sredstva koja im se sviđaju, tako da postoji manja vjerojatnost velikih izmjena.
Evo odličnog citata na web-lokaciji Style Tiles:
Uspoređivanje stilskih pločica s alatima dizajnera interijera prilično je prikladna analogija. Ne želite uložiti napor u savršenu maketu piksela samo da bi klijent shvatio da mrze većinu boja i fontova.
Umjesto toga, koristite pločice stila da biste pronašli zajednička tema ili vizualni jezik koji će se koristiti na cijeloj web-lokaciji. To može uključivati marke / identiteta ali također može uključivati Značajke korisničkog sučelja, kao što su padajući izbornici ili CTA gumbi.
Trebali biste ih koristiti kao isplativu imovinu rano u procesu. Jednom kad završite s punim modelom, zapravo više nema potrebe spominjati pločice stila. Ipak, na početku, stilske pločice mogu biti presudne za kreativni proces spremanje dizajnerskog vremena i Klijentu se nudi mnogo mogućnosti za odabir.
Ako želiš prekapati više u stil pločice pogledajte ove povezane postove.
- Stil pločice i kako oni rade
- Stil pločice: alternativa za cjeloviti dizajn
- Stvaranje pločica stila: jednostavan pristup smjeru dizajna
Stilski vodiči u odnosu na pločice stila
Razlika između stilskih vodiča i stilskih pločica je nejasna, ali definitivna. stilski vodič je mnogo više detaljan i treba se koristiti kao kontinuirani referentni vodič za kreativni tim. stil pločica može se koristiti kao a moodboard do nacrtati ideje vizualno za sebe ili klijenta. Često su navikli istražite ideje, i kada je projekt završen, oni ne služe mnogo svrsi.
Stilske pločice često su mnogo grublje oko rubova i koriste se isključivo u ranom kreativnom procesu. Vodič za stil namijenjen je za korištenje tijekom cijelog procesa projektiranja i čak i poslije za buduću referencu za druge dizajnere koji bi mogli raditi na web-lokaciji.
Obje imaju svoje prednosti i nedostatke. Stilske pločice su brzo i zabavno, ali prolazan u prirodi. Stilski vodiči su temeljita i ponašaju se kao vizualna dokumentacija, ali i oni zahtijevaju puno posla.
Koja bi trebala koristiti? To u konačnici ovisi o projektu.
Manji projekti kao što je za male poslovne web stranice rade bolje sa stilom pločice. Izgradnja cijelog stila vodič za male poslovne stranice će zahtijevati daleko previše posla i naplatnih sati. To vjerojatno nije vrijedno troška za većinu klijenata.
Međutim, a veliki projekt kao što je redizajniranje NY Times-a imalo koristi i od stilskih pločica i od stilskih vodiča.
Pronalaženje jezika i raspoloženja za novi projekt je uvijek vrijedan proces. To je ono što čini stil pločice savršen za gotovo svaki scenarij.
Također možete proći bez stvaranja bilo koje od tih sredstava. Neki dizajneri idu desno od okvira do detaljne makete. A neki klijenti ne žele čak ni vodič za stil jer se neće koristiti.
Radite po projektu i odlučite što je najbolje za svaku od njih.
Primjeri uživo
Završimo ovo pokrivanjem primjeri stila i stilskih pločica. Našao sam ove dizajne dok sam pregledavao Dribbble i mislim da su primjer kvalitete koju biste željeli u vlastitim stilskim vodičima ili stilskim pločicama.
Stilski vodiči
Ovaj nevjerojatni Airbnb stilski vodič izradio je Derek Bradley. To je vrlo jednostavno, ali jasno ilustrira glavne obrasce, boje i elemente stranice nalazi se u dizajnu.
Evo mnogo većeg digitalnog vodiča za stil kojeg je napravio dizajner Naoshad Alam. Ovaj primjer je mnogo organiziranije s odjeljke za boje, tipografiju, obrasce, elemente sučelja i druge značajke korisničkog sučelja.
Detaljniji vodiči stilova stavili bi sve ove elemente dizajna na web uključuju isječke koda za svaku od njih.
Dizajner Cupi Wong napravio je ovaj vodič za AfterShip. Tipografija, gumbi, izbor boja i uobičajeni elementi stranice pažljivo su izrađeni i organizirani u sekcije.
To bi također moglo biti preneseno na web i izrađeno mnogo više kao online referentna dokumentacija.
Dizajner korisničkog sučelja Greg Dlubacz podijelio je svoj vlastiti vodič za stil korisničkog sučelja za web-projekt. Ovo je ozbiljno. Prikaz preko cijelog zaslona obuhvaća visinu od 21.000 piksela!
Apsolutno jedan od najboljih digitalnih stilskih vodiča koje sam ikada vidio. To se također može prenijeti na internetsku dokumentacijsku stranicu za upućivanje članova tima.
Pločice stila
UI / UX dizajner Abdus Salam stvorio je ovu pločicu u stilu za web stranice s organskom hranom. Vrlo je osnovno ravne elemente dizajna, neke manje značajke korisničkog sučelja, i a paleta boja.
Dizajner Adrian Cantelmi doista je detaljno opisao svoj stil pločice. Ima boje i tipografiju, ali također uključuje vektorske ilustracije.
Ovi vektori pomažu definirajte marku, raspoloženje i cjelokupnu shemu boja web stranice.
Redizajn savjetnika Svjetskog kupa dobio je vlastiti stil pločice s vrlo osnovnim značajkama. Nekoliko ikona, izbor boja, zajedno s nekoliko dizajna gumba. Jednostavnost je naziv igre.
Ako možete osjetiti kako bi stranica mogla izgledati na prvi pogled onda to radiš kako treba.
Evo zabavnog primjera odbačene pločice stila koja se koristi za projekt putovanja. Dizajner Brennan Gleason daje samo mali uzorak pločica, ali još uvijek možete osjetite ambijent web-lokacije.
Završne riječi
Ako pretražujete web, pronaći ćete mnogo više primjera, savjeta i resursa izgradnju stila vodiče i stil pločice. Ali nadam se da ovaj članak može biti temelj na oba i dobiti tečno u razumijevanju i stvaranju tih dizajna imovine.
