Příručka projektanta pro práci s průvodci stylem a stylem dlaždic

Vytvoření značkové identity není snadný úkol. Vyžaduje to tvrdé úsilí, ale je to také jedna z nejvíce odměňujících kreativních úkolů. Webové projekty často mix značky s designem rozhraní. To může být matoucí, protože v obou oblastech je toho tolik práce. Průvodce stylem a styl dlaždice jsou skvělé zdroje pro webové designéry, a když to zní podobně, oni dosáhnou dva různé úkoly.

V tomto příspěvku bych se chtěl ponořit do obou, a pokrýt výhody, které můžete získat z těchto kreativních aktiv. Ne každý bude potřebovat (nebo jako) vytváření stylů nebo stylů. Každý designér by měl alespoň pochopit, co to je a jak fungují.

Průvodce stylem pro web

Četl jsem různé názory na styl průvodce. Někteří říkají, že se jedná o digitální makety, zatímco jiní říkají, že nejvhodnější jsou příručky založené na kódu.

Ať tak či onak, cíl průvodce stylem je pro web stejný jako jakýkoli jiný projekt. Definuje konzistentní vzory, moduly uživatelského rozhraní a kreativní předvolby v procesu návrhu. Můžete získat velmi specifické a stanovit pixel-perfektní měření pro určité prvky, nebo můžete zůstat volné a nabídnout pokyny s vizuálními příklady.

Neexistuje žádný jediný správný způsob, jak udělat průvodce stylem. Jedinou chybnou cestou je vytvořit zdroj, který jednoduše nemohou být pochopeny ostatními.

Cílem je vytvořit aktivum, které bude obstojí ve zkoušce času. To by mělo být otevřeno pro úpravy pokud jsou vytvořeny nové zdroje. Mělo by být také dostupné pro každého, kdo se připojí k týmu a ponoří se přímo do průvodce.

Průvodce stylem by měl být tak, jak je to nutné pro projekt. Obvykle to zahrnuje majetku, například typografie, tlačítka, vzorníky barev, textury a společné prvky stránky.

Nedávno jsme se zabývali nástroje pro živý styl průvodce , které vám mohou pomoci vytvořit živý styl průvodce od nuly. Tito živí průvodci jsou více pro vývojáře frontendu, ale mohou být stejně užiteční i pro designéry. Více se o tomto tématu můžete dozvědět v tomto magazínu Smashing Magazine.

Můj absolutní oblíbený zdroj je StyleGuides.io. Zahrnuje základy stylů pro web, počítaje v to živé příklady a případové studie.

Knihovna vzorů MailChimp je jedním z nejlepších příkladů, které najdete na adrese StyleGuides.io. Je to online živý průvodce definuje mřížku, typografii a prvky stránky MailChimp.

Když navrhnete průvodce stylem pro webovou společnost, je běžné dát vše online, ale můžete také vytvořit vnitřní vodítka, a uchovávat je na lokálním intranetu nebo je hostovat soukromě za přihlašovací stránkou uživatele. Způsob, jakým přistupujete k průvodci stylem, na tom nezáleží. Všechny slouží ke stejnému účelu přenosu specifických barev, vzorů a vizuálů téma webového projektu.

Chcete-li se o tomto tématu dozvědět více, podívejte se na tyto další příspěvky v průvodcích stylem:

Průvodci stylem front-end (24ways.org)
Vytvořte průvodce stylem webových stránek (creativebloq.com)
Jak si vyrobit Perfektní Web Design Style Guide (dtelepathy.com)

Větvení Do Styl Dlaždice

Styl dlaždice jsou úplně jiné zvíře. Tyto dlaždice jsou tvůrčí aktiva používaná v počáteční fázi návrhu když se snažíte přiblížit konkrétní estetiku.

Webové stránky Style Tiles vytvořila Samantha Warren a má vše, co byste možná potřebovali vědět. Tady je žádná specifická šablona pro navrhování dlaždic stylu. Samantha příklady používají záhlaví a typy odstavců, odkazy, vzory, a možné volby barev spolu s značkové logo.

Když pracujete se stylovými dlaždicemi, vaším cílem je nakonec prezentovat 2-3 různé dlaždice klientovi nebo kreativnímu řediteli. Tyto dlaždice jsou podrobnější než deska nálady, dosud mnohem méně podrobnější než úplná maketa.

Dlaždice by měly být dostatečně podrobné, aby dávaly smysl identity a nálady webových stránek. Samantha povzbuzuje pomocí adjektiv podrobně popsat každou dlaždici.

Klienti mohou Prohlédněte si různé dlaždice, a vybrat své oblíbené kousky. Tento šetří čas při návrhu, protože klient již viděl aktiva se jim líbí, takže je menší šance na statné revize.

Zde je skvělý citát z webu Style Tiles:

Porovnání styl dlaždic s návrhářem interiérů toolkit je docela apt analogie. Nechcete nalít úsilí do pixel-perfektní maketa pouze proto, aby si klient uvědomil, že nenávidí většinu barev a písem.

Místo toho použijte styl dlaždice najít nebo vizuální jazyk být používán po celém webu. To může zahrnovat značky / identity ale také Funkce uživatelského rozhraní, jako jsou rozbalovací nabídky nebo tlačítka CTA.

Měli byste je použít jako aktiva procesu. Jakmile dokončíte úplnou maketu, už nemusíte odkazovat na dlaždice stylu. Nicméně, na začátku, styl dlaždice mohou být rozhodující pro tvůrčí proces šetří čas návrháře a dává klientovi mnoho možností na výběr.

Pokud chceš ponořte se více do stylu dlaždic podívejte se na tyto související příspěvky.

Styl dlaždice a jak fungují
Styl dlaždice: alternativa k plnému designu Comps
Vytváření stylů dlaždic: Snadný přístup ke směru návrhu

Styl vodítka vs Styl dlaždice

Rozdíl mezi stylem a stylem je nejasný, ale jednoznačný. A styl průvodce je mnohem více detailní a měly by být použity jako kontinuální referenční příručka pro tvůrčí tým. A styl dlaždice lze použít jako moodboard na vizuálně nápady pro sebe nebo klienta. Často jsou zvyklí prozkoumat nápady, a jakmile je projekt dokončen, neslouží moc účelu.

Styl dlaždice jsou často mnohem hrubší kolem okrajů, a jsou používány pouze v rané tvorbě. Záměrem je použít průvodce stylem během celého procesu návrhu a i poté pro budoucí použití pro jiné designéry, kteří by mohli pracovat na webu.

Oba mají své výhody a nevýhody. Styl dlaždice jsou rychlé a zábavné, ale efemérní v přírodě. Průvodci stylem jsou důkladný a chovat se jako vizuální dokumentace, ale také vyžadují spoustu práce.

Který z nich byste měli použít? To nakonec závisí na projektu.

Menší projekty např. pro malé firmy fungují webové stránky lépe se stylem dlaždic. Budování celého průvodce stylem pro malé firmy by vyžadovalo příliš mnoho práce a fakturovatelných hodin. To pro většinu klientů pravděpodobně nestojí za cenu.

Nicméně velký projekt Stejně jako redesignování NY Times by bylo přínosem jak stylů, tak stylů.

Nalezení jazyka a nálady pro nový projekt je vždy cenným procesem. To je to, co dělá styl dlaždice ideální pro téměř každý scénář.

Můžete se také dostat bez vytvoření těchto aktiv. Někteří návrháři jdou přímo z drátových modelů na detailní makety. A někteří klienti nechtějí ani průvodce stylem, protože to nebude fungovat.

Pracujte na základě projektu a rozhodněte se, co je pro každou z nich nejlepší.

Živé příklady

Pojďme to zabalit příklady stylů a styl dlaždic. Našel jsem tyto návrhy při procházení Dribbble a myslím, že dokládají kvalitu, kterou byste chtěli ve svých vlastních průvodcích stylů nebo ve stylu dlaždic.

Průvodci stylem

Tento neuvěřitelný průvodce stylem Airbnb vytvořil Derek Bradley. Je to velmi jednoduché, ale jasně to ilustruje hlavní vzory, barvy a prvky stránky lze nalézt v návrhu.

Zde je mnohem větší průvodce digitálním stylem vytvořený designérem Naoshad Alam. Tento příklad je mnohem organizovanější s sekce pro barvy, typografie, formuláře, prvky rozhraní a další funkce uživatelského rozhraní.

Podrobnější průvodce stylem by dal všechny tyto prvky návrhu na web a zahrnovat úryvky kódu pro každého.

Designer Cupi Wong učinil tento průvodce pro AfterShip. Typografie, tlačítka, volby barev a společné prvky stránky jsou pečlivě vytvořeny a organizovány do sekcí.

To by také mohlo být přeneseno na web a vytvořeno mnohem více jako online referenční dokumentace.

Návrhář UI Greg Dlubacz sdílel svůj vlastní průvodce UI stylem pro webový projekt. Tato věc je vážně obrovská. Náhled na celou obrazovku pokrývá 21 000 pixelů!

Naprosto jeden z nejlepších průvodců digitálním stylem, jaký jsem kdy viděl. To by také mohlo být přeneseno na stránku dokumentace online pro členy týmu.

Styl dlaždice

Návrhář UI / UX Abdus Salam vytvořil tento styl dlaždice pro webové stránky obchodu s biopotravinami. Je to velmi základní ploché konstrukční prvky, některé drobné funkce uživatelského rozhraní, a barevné palety.

Designér Adrian Cantelmi se svým dílem ve stylu prodeje odprodal. Má barvy a typografii, ale také zahrnuje vektorové ilustrace.

Tyto vektory pomáhají definovat značku, náladu a celkové barevné schéma webové stránky.

Redesign poradců Světového poháru dostal svůj vlastní styl dlaždice s velmi základními funkcemi. Několik ikon, některé volby barev, spolu s párem tlačítek. Jednoduchost je název hry.

Pokud můžete získat pocit, co stránky mohou vypadat na první pohled pak to děláte správně.

Zde je zábavný příklad odmítnutého stylu dlaždice používané pro cestovní projekt. Návrhářka Brennanová Gleasonová poskytuje jen malý vzorek dlaždice, ale můžete stále získejte pocit z prostředí webových stránek.

Závěrečná slova

Pokud prohledáváte web, najdete zde mnoho dalších příkladů, tipů a zdrojů Stavební průvodce a styl dlaždic. Ale doufám, že tento článek může být základní na obou a získat plynule v pochopení a vytváření těchto návrhových aktiv.