Průvodci návrhu jsou neocenitelným nástrojem pro maximalizaci výstupů týmu a pro zajištění konzistentní identity značky. Podíváme se na šest základních komponent úspěšných návrhových průvodců.

Návrhářská příručka je více než jen dokument, který přichází s novým webem nebo značkou identity. Dobrý návrhářský průvod je samo o sobě uměleckým dílem a má praktické uplatnění v každodenní práci. Zobrazuje, jaký je váš projekt a jaký má být. Mělo by přinést prvky designu, hlasu a dokonce kód dohromady způsobem, který je zvládnutelný, použitelný a snadno srozumitelný.

Začíná to s těmito šesti prvky návrhu, které musí být ve vaší dokumentaci. (Pokud tomu tak není, přečtěte si průvodce okamžitě!)

1. Příklady identit značky

Váš návrhářský průvodce by měl ukázat vaši identitu značky ve vizuálním formátu, který je reprezentativní pro to, jak chcete vypadat designové materiály. To je ukázka třídy, neříkej. (Ačkoli je v příručce nějaké vyprávění o vizuálních příkladech.)

Nejlepším příkladem jsou praktické příklady, které dokládají přesně to, co jsou standardy návrhu určeny k vykreslení.

Použijte obrazovky obrazovky z domovské stránky webových stránek, mobilní domovské stránky, aplikace nebo z jakéhokoli jiného místa, kde je design v nejlepším případě.

Co je na tom hezké Láska k jízdě průvodce je, že každá stránka brožury vypadá jako webová stránka a vytváří konzistenci značky. Průvodce dokonce přináší malé prvky designu do ohniska, například správný styl ikon aplikací v přesném zobrazení.

Nejlepší součástí o použití reálných příkladů v návrhovém průvodci je to, že nemusíte vytvářet další práci, abyste představili vizuální prvky; už je máte v ruce. Navíc členové týmu budou vědět, že písemné pokyny pracují ve skutečné praxi, protože je vizuální důkaz.

jezdit

2. Pokyny pro návrh

Všechno od barevných vzorů po typografické palety až po tvary a použití konstrukčních prvků by mělo být jasně vymezeno.

Proč design vypadá a funguje určitým způsobem? Jaká je filozofie za tím?

Vysvětlení těchto věcí může uživatelům pomoci přesněji a důsledněji aplikovat styl designu napříč médii. Pokud jde o návrh webových stránek, je dobré zahrnout prvky, které se mohou lišit od protějšků značky pro tisk a jak se na ně vztahují. Například mnoho návrhářů se rozhodlo pro jinou typografickou paletu online, která napodobuje tištěnou značku, aby maximalizovala používání písma Google Typekit pro snadné použití.

Ujistěte se, že jste si všimli, které písma jsou nahrazení, pokud je to součástí vašeho návrhu strategie.

Když je návrh návodu na návrh specifický, když je důležité - H1 tagy jsou vždy 88 bodů nebo miniatury jsou vždy 200 až 200 pixelů - ale nepřekomprimujte zbytečné detaily. Chcete, aby členové týmu viděli informace na první pohled a používali je, a nezkusili se snažit najít něco v specifikovaném moři.

netflix

3. Hlas a osobnost

Písemné pokyny ke stylu nejsou tak zábavné, jako by byly jiné vizuální prvky designového průvodce, ale jsou stejně důležité.

Popisný styl psaní pro kopírování může také ovlivnit obraz. Přispívá k typu snímků, které zvolíte, a dokonce k prvkům, jako je barva a typ. Všechny tyto položky společně tvoří celkovou osobnost značky.

Jak vás identifikuje vnější svět.

A co víc je, že silný hlas a osobnost se stávají součástí vizuální identity. Dobrá osobnost se projevuje v konstrukčních prvcích, protože uživatelé mohou téměř identifikovat designové prvky i mimo obsah zbytku značky. (Myslíte si, že Coca-Cola červená nebo typ písma Disneyho podpisu.)

hlas

4. SEO klíčová slova

Optimalizace pro vyhledávače může být jedním z nejvíce mluvených a nejméně zábavných částí návrhu webových stránek. Přemýšlejte o klíčových slovech brzy a často.

Zahrňte je ve způsobu, jakým hovoříte o značce, v deskriptivním jazyce o designu a vložte seznam nejlepších klíčových slov do samotného průvodce designem.

Urban Outfitters má dobře navržený (a zábavný) seznam klíčových slov ve své příručce značky. Zatímco značka oblečení používá spoustu různých klíčových slov, nejdůležitější slova jsou zvýrazněna barvou, takže je vidíte hned.

Takový seznam klíčových slov přináší slova, která chcete říci, vždy, když je uvidíte. Většina lidí, kteří píší kopii, vám řekne, že jakmile uvidíte nebo přemýšlíte o nějakém slově v určitém kontextu, dostane se vám do hlavy. To je přesně to, co SEO seznam klíčových slov má dělat.

Konstrukční prvky by měly vždy souviset s těmito klíčovými slovy, aby obsah byl souvislý s celým designem webu.

městský

5. Styly a elementy

S tolika různými médii online (nemluvě o společnostech, které také navrhují tištěné prvky), je důležité mít průvodce pro všechna možná použití.

To platí pro statické i animované verze log, palet barev, vzory a dokonce i prvky návrhu, jako jsou pole formulářů a navigace.

Kniha návrhů by měla obsahovat část věnované těmto prvkům. A pokud chcete, aby vás tým skutečně miloval, vytvořte v online umístění průvodci stylu a prvků tak, aby uživatelé mohli jednoduše kopírovat a vkládat prvky pro rychlé použití.

ollo

6. Úryvky kódu

Každá příručka pro tvorbu webových stránek musí obsahovat spoustu běžně používaných úryvků kódu. Od tlačítek po malá animace až po efekt posuvníku přidávají tyto malé bitové kódy hodiny do vašeho každodenního pracovního postupu tím, že eliminují potřebu ručně zadávat specifikace s každým novým prvkem.

To vše funguje od blogových příspěvků - přidejte kódový blok pro obrázky, které mohou blogovítři jednoduše kopírovat a vkládat pro správnou velikost a oříznutí - do detailnějších uživatelských efektů.

Firefox obsahuje informace o konstrukčních součástech ve svém návrhovém průvodci pro nedávno revidované používání značky a loga. I když neposkytnete úplnou knihovnu úryvků kódu, nezapomeňte zahrnout některé základní informace, např. Kde používat H1 až H4 na stránkách v rámci návrhu webových stránek a jak stylovat tlačítka a obrázky.

Firefox

Závěr

Nejlepší částí návrhu průvodce je to, že nemusí být statickým dokumentem. Může růst a měnit, protože vaše značka a vizuální identita dělají totéž.

Většina návrhářů - zejména návrháři webových stránek - se rozhodnou pro online verze návrhové příručky, takže změny a chycení kódu a barevných úryvků jsou rychlé a snadné. Zvažte přidání stránky s průvodcem stylu na svůj web a nezapomeňte často odkazovat na něj (a aktualizovat jej).