Ako pogledate tvrtke poput Dropboxa, Googlea i Twittera, primijetit ćete da svaka od njih ima svoju jedinstvenu estetiku. U svim njihovim proizvodima, kako mobilnim tako i mrežnim, postoji osjećaj dosljednosti i ujednačenosti u njihovom dizajnu.
Načini na koji tvrtke i proizvodi postižu dosljednost jesu vodiči kroz stil. Vodič za stil skup je standarda koji dizajn usklađuje s glasom i misijom tvrtke.
Dosljednost je važna jer stvara povjerenje. A dizajn se sastoji od stvaranja odnosa između proizvoda i korisnika.Cilj ovog članka je upoznati vas s nekim dobro osmišljenim vodičima za stil i smjernicama za brendiranje. Također detaljno opisuje neke od najvažnijih elemenata koje bi svaki stilski vodič trebao imati.
Nadamo se da će ti elementi i primjeri poslužiti kao izvor inspiracije i utjecati na to kako dizajnirate održive proizvode u budućnosti.
Prije nego što započnemo ...
Evo nekoliko prijedloga za dizajniranje vodiča za stil.
- Prvo dizajnirajte svoj proizvod, a zatim stvorite stilski vodič. Ne započinjte s izradom vodiča za stil. Prvo shvatite što djeluje, a što ne. Zatim ga standardizirajte.
- Nikada nećete biti u potpunosti zadovoljni sa svojim stilskim vodičem. To je u redu. Stvaranje univerzalnog dizajnerskog jezika je iterativni postupak.
- Imajte dobro razumijevanje glasa i poruke koju želite da vaš proizvod prenese prije pisanja vodiča za stil.
Principi
Vodiči za stil uvijek trebaju imati stranicu s principima dizajna. Načela dizajna skup su smjernica koje utječu na način na koji dizajneri pristupaju i rješavaju probleme prilikom izrade proizvoda.
Jedna od ključnih karakteristika dobrog principa dizajna je da nije očit ili preširok. Dobar princip dizajna trebao bi biti dovoljno specifičan da pomogne dizajneru u donošenju odluka.
Pogledajmo Appleove smjernice za ljudsko sučelje koje imaju odjeljak o principima dizajna. Jedno od njihovih načela je izravna manipulacija .
Izravna manipulacija sadržajem na ekranu angažira ljude i olakšava razumijevanje ... Kroz izravnu manipulaciju oni mogu vidjeti neposredne, vidljive rezultate svojih postupaka.Ovaj opis objašnjava da je izravna manipulacija princip koji upravlja i posreduje u fizičkim i digitalnim interakcijama. Pomaže dizajnerima u odabiru načina interakcija, poput prevlačenja i rotiranja.
Kada osmišljavate principe dizajna, manje je više. Započnite s tri vodeća principa i ponovite od tamo.
Više o principima dizajna potražite u članku Julie Zhuo "Pitanje načela". To je izuzetno utjecalo na moje razmišljanje o principima dizajna.
Tipografija
Tipografija je ključna za postizanje jedinstva u više proizvoda i dizajna. Svaki vodič za stil trebao bi imati nekoliko odjeljaka s detaljnim specifikacijama tipografije.
Važno je ograničiti broj slova i veličina koje koristite kako bi vam dizajni bili jednostavni. Kao opće pravilo, započnite s najviše dva fonta - jednim za zaglavlja i jednim za tijela. Većinu vremena neće vam trebati ništa više od toga.
Također, uključite primjere slučajeva tipografije kako biste pomogli drugim dizajnerima i programerima da razumiju kada koristiti stvari poput podebljanog slova ili kurziva.
Ako imate problema s odabirom fontova, provjerite Typewolf i FontPair. Za veličinu slova pogledajte Modular Scale i pripadajući članak Smislenija tipografija.
Također imajte na umu da fontovi nisu postavljeni u kamenu. Uvijek ih možete kasnije promijeniti.
Slike
Pokaži, ne govori. Slike su moćan alat u rukama dizajnera. Slike su dinamične. Oni prenose značenje na prvi pogled i izazivaju emocije.
Ako imate imovine, razmislite o tome da uključite odjeljak u kojem se detaljno opisuje koje bi vrste slika drugi dizajneri trebali koristiti za prenošenje glasa i identiteta vašeg proizvoda.
Nike je dobar primjer tvrtke koja koristi slike kako bi prenijela svoju marku. Njihove fotografije imaju filmsku kvalitetu koja vas nadahnjuje za sudjelovanje u njihovoj misiji i brendu.
Slike nisu ograničene samo na fotografije. Tvrtke poput Dropboxa rijetko koriste fotografije u svojim dizajnom. Umjesto toga, svoju osobnost prenose ilustracijama.
Evo primjera Hubspotovog vodiča za stilove slika.
Prije primjera primijetite kako opisuju ton i cilj fotografije.
Pomoću smjernica za korištenje slika, dizajneri mogu bolje prenijeti značenje korisnicima i na kraju ih uroniti u kohezivno iskustvo.
Rešetke i razmak
Dobar dizajn brine o praznini koliko i o sadržaju. Vodiči za stil trebali bi odražavati ovaj mentalitet i uključivati odjeljak o mrežama i razmacima.
Važno je uspostaviti mrežni sustav koji odgovara svim slučajevima korištenja. U odjeljak o mrežama uključite informacije poput broja stupaca i redaka, margina i primjera uporabe.
For reading on grids, see A guide to creating grid systems that are built around your content as a primer. And follow it up with Modular Design For Grids.
Spacing should have its own section. Consistent spacing across a product creates a sense of uniformity and balance.
Having a list of margin sizes is useful to both designers and developers. In particular, developers can codify the space scale into Sass variables.
For example, using the Marvel spacing styleguide as a reference, the Sass counterpart might look like this:
$space-smaller: 5px;$space-small: 10px;$space-medium: 20px;$space-large: 40px;$space-larger: 80px;$space-largest: 240px;Color
Color is another essential element in styleguides. Color helps establish visual hierarchies and create emotional resonance.
Color sections in styleguides make the lives of designers easier. Instead of spending time fretting about which colors to use, designers can reference the styleguide. This allows them to focus on content.
Kako Buffer kaže u njihovom stilskom vodiču:
Upotreba boja neprestano unosi osjećaj bliskosti i jedinstva u proizvod. Shema boja pufera želi biti jasna, nenametljiva i prijateljska.
U gornjem primjeru, Buffer imenuje svaku od njihovih boja. To je posebno korisno programerima jer boje mogu pretvoriti u Sassove varijable:
$primaryColor = #168eea;$headingColor = #323b43;$bodyColor = #59626a;$borderColor = #ced7df;$lightBorderColor = #eff3f6;$fillColor = #f4f7f9;Primijetite kako Buffer koristi primaryColor umjesto imena poput brandBlue . Odaberite imena koja opisuju ulogu boje umjesto same boje. Ovaj pristup olakšava dizajnerima i inženjerima podešavanje vrijednosti boja bez potrebe za promjenom imena.
Ako želite saznati više o odabiru boje, pogledajte članak koji sam napisao o Dizajniranju u boji.
Komponente
A lot of designers and developers think about UIs as collections of components. The idea is that each UI component is its own entity. For example, a card is a single component.
Using this approach, designers can re-use components across multiple products and designs. This creates design consistency. It also minimizes the amount of time designers spend re-inventing the wheel designing UI components that already exist within an organization.
Component-based thinking also helps engineers. Design components can translate neatly into code. From an engineering perspective, components are like lego blocks that you can compose together.
While you’ll often see components in UI and pattern libraries, it’s also useful to include components in styleguides for other designers to reference.
For example, Mapbox has a styleguide that includes all of their commonly used components. This includes buttons, inputs, and forms. This way their designers and developers know what UI components are already available.
If you want to learn more about components check Brad Frost’s Atomic Web Design article.
Principles, typography, imagery, grids and spacing, color, and components. This list isn’t exhaustive, but these six topics form the basis of a good styleguide.
What are your thoughts on styleguides? What are some of the lessons that you’ve learned in the process of creating styleguides? Leave a note below or tweet at me.
If you enjoyed this article, you might enjoy Photos and stories from a designer.
Photos and stories from a designer
Some of the best designers are also some of the best storytellers.medium.com
You can find me on Medium where I publish every week. Or you can follow me on Twitter, where I post non-sensical ramblings about design, front-end development, and virtual reality.
P.S. If you enjoyed this article, it would mean a lot if you click the ? and share with friends.
