Použití drátěných rámů pro zjednodušení vašeho vývojového procesu
Vytvoření wireframe je jedním z prvních kroků, které byste měli podniknout před navržením webových stránek.
Drátěný rám vám pomůže uspořádat a zjednodušit prvky a obsah v rámci webové stránky a je nezbytným nástrojem v procesu vývoje.
Drátěný rám je v podstatě vizuální znázornění uspořádání obsahu v návrhu webových stránek .
Drátěný rám působí jako prototyp, který zobrazuje umístění vlastností stránky, například záhlaví, zápatí, obsah, postranní lišty a navigaci.
Určuje také umístění prvků v těchto oblastech obsahu. Chcete-li vytvořit web, který přesně odpovídá požadavkům klienta a minimalizuje revize projektů, bude drátové zakódování udržovat vás na cestě.
Výhody zkosení
Vytvoření drátového rámce dává klientovi, vývojáři a návrháři příležitost k kritickému pohledu na strukturu webových stránek a umožňuje jim snadné revize včas.
Wireframing přináší tyto klíčové výhody:
- Dává klientovi včasný, detailní pohled na design (nebo re-design).
- Může inspirovat návrháře, což vede k tekutějšímu tvůrčímu procesu.
- Dává developerovi jasný obrázek o prvcích, které budou muset kódovat.
- To dělá výzvu k akci na každé stránce jasné.
- Je snadné se přizpůsobit a zobrazit rozvržení mnoha částí webu.
Nástroje pro vývoj drátěných rámů
Při vytváření drátěného rámu máte k dispozici mnoho nástrojů:
- Ruční skicování na papíře je vždy dobrým výchozím bodem pro každého návrháře. Poskytuje rychlý a snadný způsob zaostřování a uspořádání. Pokud jste s náčrtem velmi přesní, můžete ho dokonce použít jako svůj konečný drátový rám. (Viz obrázek 1.)
- Vývojový diagram nebo software pro mapování mysli , jako například Visio . Tyto softwarové možnosti se dodávají s předem zabalenými prvky, které vám umožní snadno vytvářet reprezentace vývojového diagramu vašeho wireframe.
- Web prototyping software , jako je Gliffy nebo Balsamiq . Takové nástroje byly vytvořeny speciálně pro účely vytváření drátových rámů a mají snadno použitelné prototypové schopnosti.
- Grafický software , jako je Photoshop nebo Illustrator. Výhodou použití těchto nástrojů je, že drátěný rám může být přeměněn přímo na grafickou podobu návrhu webových stránek; nicméně je nevýhodou, že budete muset vytvořit všechny prvky ručně.
- (X) HTML drátové rámy jsou téměř jako skutečné stránky samotné. Před aplikací stylů můžete rozložit drátěný rám s kódem, nebo můžete vytvořit plně stylizované uspořádání s vysokou věrností, které vypadá hodně jako konečný design. (Viz obrázek 2)
Nakonec by vývojář nebo projektant měl vybrat nástroj, který upřednostňuje. Osobně používám Photoshop, protože se mi líbí způsob, jakým proces organizuje, a jak snadno mohu převést soubor na mockup.
Wireframe Příklad
Úroveň podrobností v drátěném rámu závisí na několika faktorech, včetně: kolik směru a obsahu klienta poskytl, jak složitý je obsah, jak daleko v procesu jste, a kolik podrobností byste chtěli zahrnovat .
Zde jsou příklady drátových rámů, které byly vytvořeny pomocí různých nástrojů a vykazovaly různé úrovně detailů a barev:
Obrázek 1: Tato jednoduše provedená drátová struktura pro webovou stránku pobřežního kapitálu Partners (nyní přejmenovaná na obchodní partnery Broad Reach Retail) byla použita k vytváření grafických modelů a nakonec k finálním návrhům. Podle Mike Rohde .
Obrázek 2: Drátový rám s velmi nízkou věrností. Užitečné pro demonstraci toho, jak bude vypadat nějaký web před přidáním stylu. Velmi užitečné pro zrakově postižené uživatele.
Obr. 3: Drátová kostra s nízkou věrností pro Občanské sdružení Embrace Pet , Jesse Bennett-Chamberlain z 31 .
Obrázek 4: Předběžná maketa nástroje pro sociální konference Tiddlywiki pro použití na stránkách Le Web 3. Poznámky, které je k ní připojeny, tiddleleweb.tiddlyspot.com . Wireframe by Phil Hawksworth.
Obr. 5: Toto je založeno na pokročilém využití systému publikování blogů (WordPress). Podle Mattheiu Mingassson nebo internetové strategie Activeside a poradenství .
Obrázek 6: Drátový rám pro Občanské sdružení Embrace Pet , Jesse Bennett-Chamberlain z 31 .
Obrázek 7: Drátový rám s barvami a obrázky. Autorská stránka wireframe podle Bokhandel .
Obrázek 8: Další drátový rám s barvou. Autor: Mattheiu Mingassson z Aktivní internetová strategie a poradenství .
Osvědčené postupy
Abyste dosáhli optimálních výsledků, je třeba při vývoji drátového rámu mít několik důležitých věcí:
- Jednoduchost. Klíčem je udržet to tak jednoduché, aby bylo jasné pro klienta a aby bylo flexibilní pro návrháře, ale dostatečně podrobné, aby vedlo programátora. Jak již bylo řečeno, můžete vytvořit vysoce věrný drátový rám, ale to, co děláte brzy v procesu vývoje, by mohlo být pro klienta nejasné, kdo by mu mohl chybět konečný návrh.
- Práce v odstínech šedi. Při vytváření prvků pro drátěný rám je nejlepší pracovat ve stupních šedi, abyste se mohli soustředit na rozložení, aniž by vás to rozptýlilo. Pokud jste dostali plnofarební logo, převeďte jej také na stupně šedi. Chcete-li rozlišovat a třídit různé prvky, zobrazte tvary a obrysy v různých odstínech šedé.
- Použijte drátěné snímky v součinnosti s mapou stránek. Drátěný rám je vizuální znázornění dobrého souboru stránek, nikoliv nahrazení. Mapa stránek je užitečným nástrojem pro jakoukoli webovou stránku a rozhodně by bylo užitečné odkazovat se na ně během procesu vývoje.
- Zaměřte se na požadovaný výsledek. Jasně porozumět tomu, jak váš klient chce, aby uživatelé reagovali na stránku před vytvořením wireframe. Výzvy k akci by měly být velmi jasné pouze z pohledu na drátěný rám.
- Vytvořte drátový rámeček v plné velikosti, pokud jde o webovou stránku. Tím získáte nejpřesnější zobrazení skutečné stránky.
- Naplánujte prvky zajištěním obsahu předem. V nejlepším případě vám váš klient již poskytne prvky, které by se měly zobrazovat na každé stránce, například logo, reklamy, přehrávače Flash nebo videa, funkce, navigační části a prvky bočního panelu, záhlaví a zápatí. Pokud tyto informace ještě nemáte, setkat se se svým klientem a získat (nebo vytvořit) soubor Sitemap. Pokud přepracujete existující prvky, můžete je shromáždit z pečlivého přehledu webových stránek. V tomto scénáři nezapomeňte nejdříve potvrdit u svého klienta, že nebudete muset přidávat nebo odstraňovat prvky, protože nepochopení jejich očekávání zpomalí proces.
Stupně šedi vs. barva
Při vytváření drátového rámečku pracuje v odstínech šedi a pomáhá udržet soustředění na primární funkci procesu , kterým je dokončení uspořádání, nikoli návrh (viz obrázek 3). Další riziko práce v barvě spočívá v tom, že klient může chybět drátěný rám pro závěrečnou mockup.
Barva se však může ukázat jako užitečná při zobrazování polohy každé výzvy k akci. Protože jedna stránka může obsahovat několik výzvy k akci, jejich prioritizace je důležitá. Drátěné rámy mohou pomoci zjistit, která výzva k vykreslení oka uživatele na první.
Nedávno jsem pracovala na projektu, který měl velmi živé logo, které bylo v tomto případě primárním výzvou k akci, protože představovalo nově zahájený časopis.
Když používáte barvu, můžete jednodušeji zjistit, zda některé prvky přemohou primární výzvu k akci. Tento proces stále spadá do sféry skládání kabelů, spíše než do modelu mockup, protože umístění prvků je stále určováno.
Barva může být postupně přidávána do drátěného rámu při posunu projektu , což je efektivnější než pohyb vpřed s maketami předtím, než je poloha prvků zablokována. Tímto způsobem vám grafický software pomůže, když budete připraveni, přepnout přímo na maketu.
Co se vyvarovat
Stejně jako ostatní aspekty vašeho vývojového procesu může mít wireframing úskalí, pokud se neprovede správně. Zde je několik tipů, jak se vyhnout, abyste dosáhli nejúčinnějších výsledků:
- Příliš mnoho se děje na stránce. Ponechte dostatek bílého místa, aby se návrh nezdál příliš zaneprázdněný nebo přeplněný.
- Důraz na barvu a design. Drátěné rámování slouží k určení rozvržení a umístění prvků. Přestože drátěný rám může ovlivnit design, přidání grafiky a barvy by pravděpodobně odvrátilo od jeho účelu.
- Příliš mnoho detailů. Vždy můžete přidat další podrobnosti později, ale pokud začnete příliš mnoho na začátku, může klient zaměnit drátěný rám pro finální maketu.
Pokud máte zájem dozvědět se více o drátěných kostkách, Wireframe Magazine je skvělý zdroj, který sdílí vzorky, diskutuje o technikách a řeší problémy související s informační architekturou.
Vytvoření wireframe pro webové stránky klienta poskytuje efektivní komunikační nástroj pro všechny zúčastněné strany.
Dokonce i budování jednoduchého wireframe šetří čas v dlouhodobém horizontu a ulehčí vývojový proces pro návrháře, vývojáře a klienta.
Napsal výhradně pro WDD Eric Shafer.
Používáte drátové rámy pro návrh? Jaké jsou nejlepší způsoby, jak vytvořit efektivní drátové snímky?