Vodič web dizajnera za oblikovanje pločica

Ploče stila vizualna su referenca na jezik dizajna web stranice (ili drugog dizajnerskog proizvoda). Oni pomažu ispričati priču kroz fontove, kolekcije boja i stilova, a kada ih se gleda u kombinaciji s žičanim okvirima, kartama web mjesta i ostalim elementima korisničkog sučelja, definiraju tu priču na pristupačan i prilagođen klijentu način. U ovom članku objasnit ću vam kako najbolje iskoristiti ovu praktičnu tehniku.

01. Što sadrže pločice stila?

Uspješna pločica stila trebala bi sadržavati uzorke elemenata korisničkog sučelja, definirati shemu boja, pokazati kako će se koristiti principi tipografskog dizajna i pokazati odnos između klijentove marke i predloženog vizualnog rješenja. Na primjer, ako je klijent upotrijebio riječi 'pouzdan' ili 'pouzdan' da bi opisao svoje poslovanje, pločica stila to bi trebala vizualno predstavljati.

Najviše od svega, pločice u stilu nude polazište za raspravu i pojašnjenje klijentovih poslovnih ciljeva i osobnih preferencija.



02. Kada koristiti stilske pločice

Stilske pločice nude fleksibilno polazište za definiranje izgleda web stranice na pristupačan način koji klijenti mogu razumjeti. Shvatite ih kao nešto između a ploča raspoloženja i maketa - pomažu u definiranju i komunikaciji načina na koji će se vizualni stil primijeniti na web mjestu, uključujući korisnička sučelja orijentirana na stolna i mobilna računala.

Možete ih koristiti umjesto tradicionalnih prvih maketa, generirajući ideje i povratne informacije od klijenta kao pomoć u konačnom pristupu dizajnu. U Samanthe Warren Popis odvojeno U članku ona opisuje kako postupak oblikovanja pločica pomaže u 'isticanju strasti koja stoji iza brenda, otkrivajući grupice opisne dobrote, a istovremeno povezujući klijenta s projektom'.

03. Kako izgledaju pločice u stilu?

Pločice u stilu Washinton Examiner 1

Slika ljubaznošću Phase2 Technology

Pločice u stilu Washinton Examiner-a 2

Slika ljubaznošću Phase2 Technology

Pločice u stilu Washinton Examiner-a 3

Slika ljubaznošću Phase2 Technology

Ne postoji način na koji vaše pločice u stilu trebaju izgledati. Ključno je osigurati da ih ne zamijenite s pločama raspoloženja, koje nisu dovoljne za potpuno uspostavljanje vizualnog jezika, a istovremeno ne odlaze previše u smjeru pune makete dizajna.

Pogledajte gore navedene primjere iz tehnologije Phase2, stvorene tijekom rada na novom web mjestu za mjesto Washington Examiner 2012 Campaign.

04. Kako uspješno koristiti pločice stila

Nakon što shvatite principe stilskih pločica, one bi se trebale uklopiti u vaš proces dizajniranja. Obično će se generirati ranije u životnom ciklusu dizajna nego što ste mogli stvoriti svoje prve makete, a kao rezultat omogućit će vam da povratne informacije dobijete prije. Slijedite četiri sljedeća koraka kako biste pločice stila stavili u svoj tijek rada:

Slušajte svog klijenta

Stil pločice 1

Slika ljubaznošću https://twitter.com/heyitsgarrett

Sastanite se sa svojim klijentom na početku vašeg projekta i prikupite što je više moguće relevantnih informacija. Nekim će dizajnerima biti lakše provesti individualne razgovore s dionicima, dok će drugi preferirati grupni sastanak; radite ono što vam odgovara. Obavezno postavite svim ključnim donositeljima odluka i dionicima ista ključna pitanja.

Ako vam pomogne, možete stvoriti upitnik za svoje klijente prije prvog projektnog sastanka. Ako se trudite znati koja biste pitanja trebali postaviti svom klijentu, StyleTil.es web stranica ističe neke korisne resurse, uključujući i one iz Andy Rutledge i Kim Cullen .

Samantha Popis odvojeno Članak također pomaže definirati neke korisne tehnike ispitivanja kako biste na najbolji način iskoristili ove prve sastanke. Presudno je da morate prikupiti pridjeve kako biste korisno opisali priču koju vaši klijenti žele prikazati putem svoje web stranice.

Upotrijebite okvir dizajna za tumačenje sažetka

Style pločice 2

Slika ljubaznošću https://twitter.com/heyitsgarrett

Koristeći pridjeve koje ste zabilježili u prvom koraku, stvorite skupni skup za prepoznavanje tema u pridjevskom jeziku. Primijenite ove teme na svoj okvir dizajna, koristeći principi dizajna kao što su sklad i jedinstvo za donošenje izbora o elementima dizajna i njihovom vizualnom predstavljanju priče. Ne zaboravite upotrijebiti bilo koji postojeći jezik markiranja, pisanja rukopisa i vizualni jezik koji će vam pomoći kontekstualizirati dizajn i vaš odgovor.

Definirajte vizualni jezik

Pločice za stil 3

Slika ljubaznošću https://twitter.com/heyitsgarrett

Koristeći informacije koje ste prikupili u koraku 01 i izlaze generirane vašom interpretacijom u koraku 02, odredite prekomjerne teme i počnite ih usklađivati ​​sa stilskim uređajima. Izradite drugačiju pločicu za svaku vizualnu interpretaciju koju ste smislili. Ispunjene pločice stila omogućit će vam da brzo utvrdite jeste li na istoj stranici kao i vaš klijent iz vizualne perspektive jezika.

Web stranica styletil.es, koju je izradila Samantha Warren, pruža vam zgodan PSD predložak preuzimanje datoteka i koristite kao početnu točku za izlaz stilskih pločica.

Ponavljajte dok se stil ne dogovori

Pločice za stil 4

Slika ljubaznošću https://twitter.com/heyitsgarrett

Surađujte sa svojim klijentom na promjenama na pločici stila. Budući da se ponavljate izvan konteksta konačnog izgleda web stranice, možete se usredotočiti na to da vaš stilistički pristup i dalje odražava poslovne ciljeve i ciljeve dizajna.

05. Trebaju li pločice u stilu zamijeniti makete?

Stilske pločice: zamjena makete

Umjesto da stvarate makete na početku dizajnerskog projekta, stvorite pločice u stilu, tvrdi Samantha Warren

Uobičajen je pristup na početku dizajnerskog projekta za izradu maketa stranica, ali ako ste se ikad morali pregovarati oko hibrida - koji sadrži elemente iz dva ili više maketa i kompromitirajući pristup dizajnu - vi ' Bit će mi poznata frustracija koju upotreba maketa u ranom procesu dizajniranja može donijeti.

Iz perspektive klijenta, maketa predstavlja cjelovito rješenje za dizajn, ali kako je često prvi put da vide vašu interpretaciju dizajnerskog sažetka, razumljivo je da će prepoznati elemente koji im se sviđaju, a elemente ne. Također je prirodan zaključak da će vas povratne informacije primorati da spojite različite elemente različitih maketa, što dovodi do toga što Samantha Warren označava Rješenje 'Franken-comp' .

Makete mogu izgledati kao jednostavan, očit način definiranja kako projekt može započeti postupak prelaska s dizajnerskog uratka na završetak. Ali pločice stila mogu biti pametniji način za rješavanje stvari, dobivanje povratnih informacija i rano definiranje vizualnog jezika u suradnji sa svojim klijentom.

To može pomoći u izbjegavanju osjećaja frustracije i razočaranja zbog potrebe sastavljanja završne makete od pojedinih dijelova potpuno odvojenih dijelova, te pomaže u tome da klijent ostane potpuno angažiran i uključen u proces dizajniranja.

06. Gdje naučiti više

Riječi : Sam Hampton-Smith

Kao ovo? Pročitajte ovo!

Što misliš? Hoćete li otkloniti stilske pločice ili ostajete pri tradicionalnim maketama stranica? Javite nam svoje stavove u komentarima ispod ...