Adobe Illustrator zažívá ve světě webového designu návrat. Nejenže se SVG začíná běžně používat na internetu, ale stále více designérů používá vektory pro tvorbu wireframů. Následující tipy vám pomohou využít Illustrator jako nástroj pro wireframing naplno.

Wireframing je o rychlé práci a rychlém iterování. Cílem není vytvářet atraktivní rozhraní; vaší prioritou číslo jedna je navrhnout informace a zážitek.

1. Vytvořte grafický návrh. Go Monochrome

Wireframy zpřehledňují hierarchii na webové stránce; vizuálně ukazují, v jakém pořadí mají uživatelé zpracovávat dostupné informace. Pokud chcete, aby uživatelé zpracovali titulek před stisknutím tlačítka „koupit nyní“, musí titulek „trumfnout“ tlačítko tím, že vyžaduje větší pozornost.

Tuto vizuální hierarchii lze definovat několika způsoby. Můžeme použít velikost, aby byl titulek působivější, můžeme použít umístění (umístěním před tlačítko). Mohli bychom použít barvu, kontrast a řadu dalších věcí, ale tím, že to uděláme v drátěném modelu, jen vše ještě více zamotáme.

Pokud z rovnice odstraníme barvu, je vizuální vztah definovaný pozicí, velikostí a (pokud chcete udělat další krok) kontrastem mnohem čistší.

Nestavíme zde hezké, pixelově dokonalé sady uživatelského rozhraní. Držte se omezené škály šedých odstínů, barvy pak používejte jen pro popisky a poznámky.

2. Ponechte si vrstvy pro konkrétní účely

Když už mluvíme o štítcích, poznámkách a komentářích, je skvělý nápad umístit každou z nich do zvláštní vrstvy. Totéž platí pro cokoli dalšího, co má specifický účel; například chování, interakce, gesta a podobně.

Vizuální prvky umístěte na jednu vrstvu, chování na jinou a štítky na další, abyste mohli v případě potřeby snadno přepínat jejich viditelnost.

3. Využívejte symboly

D.R.Y. se obecně používá jako programátorský termín, ale je stejně dobře použitelný i pro pracovní postup návrhu. V každém daném drátěném modelu budeme používat a opakovaně používat určité objekty. Proměňte tyto objekty v symboly a veškeré změny, které provedete na jednom z nich, se okamžitě promítnou do ostatních.

Příklad zde je jednoduché formulářové pole:

Přetáhneme jej do podokna Symboly (Shift + Command + F11)

Tento symbol nyní můžeme přetáhnout z podokna Symboly, kolikrát chceme, na pracovní plochu. Poklepáním na kterýkoli z nich jej izolujeme (trochu podobně jako seskupené objekty), abychom jej mohli upravovat. Veškeré změny, které provedeme, v tomto případě zaoblení rohů obdélníku, budou aplikovány na každý ze symbolů formulářového pole, které jsme použili.

Jakmile máme kolekci symbolů, můžeme je také uložit jako sadu:

To nám umožní v budoucnu je načíst do jiných souborů.

Chcete-li se o paletě symbolů dozvědět více, podívejte se na Rychlý tip:

4. Jak pracovat se symboly v aplikaci Adobe Illustrator? Hroty šipek jsou ideální pro ukazování

Jedním ze skvělých tipů je využití hrotů tahových šipek, které jsou v Illustratoru od verze CS5 snadno dostupné hned po vybalení z krabice. Wireframy jsou ideální příležitostí k vizuálnímu popisu interakcí, toku aplikace, navigace a pohybu.

V dnešní době můžeme snadno přidávat hroty šipek do tahů, a to přímo z panelu Tahy.

Můžeme dokonce upravit zdrojový soubor Illustratoru „Arrowheads.ai“, jak vysvětlil Ryan Cornwell, a přidat do něj vlastní hroty šipek.

Poznámka: Je nepříjemné, že nástroj kapátko neaplikuje hroty šipek spolu s ostatními styly tahů, takže není tak snadné, jak by mohlo být, duplikovat zvolený efekt. Ale i tak jsou pro tvorbu drátěného modelu perfektní.

5. Šipky se dají použít i v případě, že je chcete vyfotit. Přichycení k mřížce pro sjednocení rozestupů a velikosti

V mnoha ohledech to navazuje na nepoužívání barev. Sjednocení rozměrů a rozestupů odstraňuje z wireframů prvek rozptýlení a pomáhá nám vizuálně se soustředit na to, co je důležité.

Nezáleží na tom, jestli přesné rozměry neodrážejí to, jak bude uživatelské rozhraní vypadat později; pokud hierarchie a vztahy zůstanou věrné, můžeme pokračovat.

Použijeme mřížku na artboard tak, že přejdeme na Zobrazit > Zobrazit mřížku. Volba Zobrazení > Přichytit k mřížce vám pomůže přesně umístit objekty.

Chcete-li přesně určit, jak má mřížka vypadat (a nezapomeňte, že vám nejde o drobné detaily), přejděte do Illustratoru > Předvolby > Vodítka & Mřížka. Jakmile se tam dostanete, můžete definovat vzdálenost mezi liniemi mřížky a poté uvést, kolik dílčích dělení v rámci těchto linek chcete.

Poznámka: Klidně si mřížku obarvěte jinak než šedou barvou; nebude součástí výsledného produktu.

6. Zvolte si, jakou barvou chcete mřížku obarvit. Použití grafických stylů pro flexibilní tlačítka

V závislosti na úrovni věrnosti (nakolik věrný je výsledný web, o který usilujete) můžete mít uvnitř například tlačítek skutečný text. Aby se tato tlačítka zvětšovala a zmenšovala v závislosti na obsahu v nich, nepoužívejte objekty, ale grafické styly.

Začněme s řetězcem fiktivního textu.

Nyní otevřeme podokno Vzhled příkazem Okno > Vzhled.

Pomocí podokna Vzhled můžete k jednomu objektu přidat více výplní. Tyto výplně můžeme vrstvit v pořadí, v jakém je chceme zobrazit; na tomto obrázku jich vidíte několik, všechny naskládané na sebe.

Prozatím potřebujeme pouze dvě výplně, takže přidáme tmavou výplň pro text a pak světlejší barvu pro pozadí.

V současné době nevidíme světle šedé pozadí, protože má přesně stejný tvar jako horní výplň. Můžeme však izolovat a manipulovat s každou výplní zvlášť. V podokně Vzhled vyberte spodní výplň a přejděte do nabídky Efekt > Převést na tvar > Zaoblený obdélník…

Zadejte nějaké nastavení, jaké uznáte za vhodné, jen se ujistěte, že velikost je relativní vzhledem k objektu, na který ji aplikujeme.

Bledě šedá výplň dole nyní získala tvar zaobleného obdélníku vzhledem k velikosti textu. Tlačítko! Chcete-li tento vzhled použít na jiné objekty, otevřete podokno Grafické styly a přetáhněte do něj celé tlačítko. Jeho vzhled se uloží jako styl, který můžete znovu použít.

Například zde je delší řetězec textu. S vybraným textem klikněte na nově vytvořený grafický styl (na který jsem dvakrát kliknul a přejmenoval ho), aby se okamžitě použil.

7. Nastavení některých běžně používaných grafických desek

Rychlost je při tvorbě wireframu základem hry! Načmárejte rozvržení, jděte dál, načmárejte další, jděte dál. Proto má smysl mít připravený výchozí bod, ke kterému máte snadný přístup. Možná zjistíte, že se vám nejlépe pracuje nejprve na masivním artboardu a hotové objekty vytáhnete do samostatného souboru, nebo budete raději pracovat přímo s artboardy správné velikosti.

Tady je například rozvržení s obrazovkou iPadu (1536x2048px) a čtyřmi obrazovkami iPhonu 4S (640x960px), i když si můžete připravit soubor s libovolným počtem příkladů obrazovek zařízení. Buď nastavte preferované rozměry ručně, nebo si vyberte některou z dostupných předvoleb v Možnostech umělecké tabule:

Zapojte všechny společné vodítka, názvy vrstev, sady symbolů atd. které byste mohli použít, a pak to celé uložte jako šablonu pro budoucí použití (Soubor > Uložit jako šablonu..) Tento výchozí bod pak budete mít k dispozici příkazem Soubor > Nový ze šablony…, doplněný o všechny kousky, které jste tam nechali.

8. V případě, že se vám podařilo vytvořit šablonu, můžete ji použít jako šablonu. Použití nástroje TextExpander pro fiktivní text

Ilustrátor neobsahuje žádné nástroje pro fiktivní text. Existují skripty, se kterými stojí za to si pohrát, ale nejjednodušší způsob, jak do drátěných rámců Illustratoru dostat fiktivní text, je použít TextExpander.

Poznámka: pokud jste uživateli systému Windows, PhraseExpress nabízí podobnou funkci jako TextExpander

Přidejte řadu textových fragmentů, které běžně používáte pro wireframy (například velký nadpis, krátký nadpis, kopie těla různé délky, typický text tlačítek, položky nabídek a podobně), aby byly snadno dostupné z aplikace Illustrator.

Definováním klíčové fráze pro každý úryvek TextExpander nahradí tuto frázi vaším obsahem, kdykoli ji zadáte, což vám ušetří spoustu času. Pokud chcete, můžete také pomocí možností složky zajistit, aby se tyto úryvky projevily pouze v Illustratoru.

Chcete-li se dozvědět více o optimalizaci pracovního postupu v aplikaci TextExpander, podívejte se na článek Ovládněte aplikaci TextExpander pomocí těchto užitečných tipů & triků.

9. Vyzkoušejte aplikaci TextExpander. Procvičte si logické pojmenování souborů

Schopnost rychlé vizualizace změn a nápadů je základem wireframingu, ale pokud si nedáte pozor, může to vést k obrovské hromadě neuspořádaných souborů. Klíčem k úspěchu je ukládání ve významných fázích a logické pojmenování souborů.

Například můžeme chtít začínat každý název souboru názvem stránky, na které pracujeme. Pak by mohlo být rozumné použít nějaký název varianty a za ním číslo verze: page-variant-version.ai

Můžeme například pracovat na vstupní stránce, která se zaměřuje na propagaci e-mailové kampaně nebo elektronické knihy. Mohli bychom mít názvy souborů jako:

Nejenže to udržuje pořádek ve složkách projektu, ale funguje to i jako forma ručního verzování. Podrobněji se touto myšlenkou zabývá Matt Smith ve svém článku Wireframing With Illustrator and InDesign.

10. V tomto článku je popsáno, jakým způsobem lze vytvářet drátěné rámce. Uložení do Dropboxu pro snadné verzování

Pokračujte v myšlence verzování ještě dál a ukládejte své soubory přímo do Dropboxu, čímž tento úkol zcela odstraníte ze svého seznamu úkolů. Dokonce i bezplatný tarif od Dropboxu uloží kopii vašich souborů pokaždé, když je uložíte, a to na třicet dní.

Podobnou úžasnost nabízí i Layervault ve svém bezplatném tarifu.

V obou případech je to obzvlášť užitečné, pokud spolupracujete s týmem. Mít všechny členy, kteří pracují z jednoho centrálního místa, s možností obnovit libovolnou verzi, pokud někdo udělá něco divného, je pro týmovou práci ideální.

Závěr

Mnoho z těchto tipů je zcela osobních pro můj vlastní pracovní postup a nemusí se dokonale převést na váš vlastní způsob práce. Doufám však, že ve vás alespoň vyvolají zvědavost a přimějí vás přemýšlet o způsobu, jakým vytváříte layouty webových stránek. Pokud máte nějaké vlastní tipy, podělte se o ně v komentářích!

Další čtení

• Drátový rámování pomocí InDesignu a Illustratoru
• Drátový rámování pomocí Illustratoru a InDesignu (jemný rozdíl!)
• Průvodce začátečníka drátovým rámováním
• Illustrator a šipky

.