Nejlepší zdroje pro skicování Grid-založené drátové modely

Proces navrhování rozhraní vždy začíná generace nápadů. To zahrnuje vizualizaci, výzkum dalších stránek a rychlé prototypování. Tato raná myšlenka má zásadní význam porozumět rozvržení a uživatelské zkušenosti hodláte stavět. Tak jak byste měli skutečně provést wireframing práci na novém projektu?

Jsem fanouškem tradičního papíru a tužky s dalšími nástroji podle potřeby. Ale digitální wireframing je také velký a je to životaschopná volba pro moderní designéry. V tomto článku bych chtěl sdílet nejlepší zdroje pro obě techniky, které vám pomohou vytvořit si vlastní drátové modely založené na mřížce.

Včasné UI / UX konceptualizace

Začněme objasněním rozdílů mezi a drátový model a prototyp. Tato dvě slova se často používají zaměnitelně, protože se týkají stejného procesu.

A drátový model je jedna statická skica uživatelského rozhraní webové stránky nebo aplikace. To může mít popisky vysvětlit text tlačítka, okraje, velikosti elementů, nebo vyrovnat animace. Ale drátové modely jsou jen hrubé návrhy jednotlivých stránek.

Podobně, a prototyp je jako vývojový diagram znázorňující propojení různých stránek. Prototyp tedy spojuje drátové modely a ukazuje, jak by různá tlačítka nebo odkazy měly vést k dalším stránkám.

Tyto definice nejsou vytesány do kamene, někteří návrháři mohou mít svou vlastní terminologii a nesouhlasí s mým přesným zněním. Ale to je to, jak jsem je běžně viděl popsal, a je to, jak mnoho designérů pochopit tyto termíny nejlepší.

Co tedy máte přesně dělat s těmito prvotními koncepčními kousky? Jsou opravdu nezbytné? Řekl bych, že prototypování není vždy nutné, ale je to velmi dobrý nápad, zejména pro navrhování aplikací s komplexními interakcemi.

Ale wireframing je vždy dobrý nápad pro každý nový projekt. Pomáhá vám to zaměřit se na velký obraz bez obav z detailů. Získáte pocit, jak je celá stránka vyložena, a to je neocenitelné, když navrhujete konkrétní rozložení.

Cíle pro Wireframing

Při každém spuštění nového projektu byste měli uvažovat co se snažíte vyřešit. Každý web je postaven s ohledem na konkrétní cíl. Mnohé weby mají dokonce více cílů, kde jsou některé cíle důležitější než jiné.

Použijte wireframing jako průvodce, který vám pomůže najít nejlepší strategii zachycení cíle (stránek) webové stránky. To se pravděpodobně nestane na prvním drátovém modelu, takže buďte připraveni načrtněte spoustu různých nápadů.

Vyhledejte další podobné webové stránky a zapište si jejich nejlepší funkce. Analyzujte, jak je obsah organizován a jak se pohybujete na každé stránce.

Přemýšlejte o drátových modelech z interaktivní stanovisko. To nejsou jen hezké obrázky. Jsou to reprezentace digitálních rozhraní a vy chcete načrtnout své nápady s tímto vědomím.

Mít po ruce zdroje založené na mřížce, ať už jsou vyrobeny z papíru nebo jsou digitální, může hodně pomoci při rychlém skicování. Nyní se podívejme na nejlepší zdroje pro tvorbu drátových modelů.

Mřížka Skicáře

Vždy můžete začít se základními náhledy na papíře tiskárny mapovat hrubé nápady. Osobně jsem obvykle začal pracovat na papíře tiskárny, protože jsem tak méně znepokojen mřížkami a více generování nápadů.

Bodové mřížkové skicery jsou nejlepší způsob, jak jít, pokud chcete vyčistit nápad, a dát jí více struktury. Mřížka vám pomůže odhadnout vzdálenosti mezi položkami na stránce a vytvořit druh symetrie v drátovém modelu.

Existuje mnoho skvělých produktů tam, pokud chcete začněte wireframing na papíře, například Rhodia Dot Pad přichází v různých velikostech pro každodenní použití. To přijde jen s 80 stránkami, ale toto je docela typické pro většinu skicáře mřížky.

Další velmi cool a přizpůsobitelný produkt je Dotgrid. Všechny položky společnosti Dotgrid jsou dražší než knihy Rhodia, ale přicházejí s více materiály a vlastními návrhy obalů.

Dotgrid dokonce přijímá zakázky na zakázku, které vám umožňují navrhněte si vlastní skicář. Každá kniha obsahuje jen méně než 100 listů, takže včetně přední a zadní strany získáte asi 200 stránek pro skicování.

Chci zmínit i pár dalších skicáků s bodovými mřížkami, jako je Behance Dot Grid, která je vázaná a spirálovitě vázaná, i když obsahuje pouze 50 listů papíru..

Responsive Design Sketchbook je jedním z nejlepších zdrojů pro webové designéry. Žádný jiný produktový designér by nepotřeboval citlivý design skicáře, ale web designéři těží ze svobody vytvářet nápady v různých šířkách zařízení v horní části rozvržení mřížky.

Tyto citlivé designové podložky mají také 50 listů o celkovém počtu 100 stran, ale každá stránka má čtyři různé mřížky představující různé hraniční hodnoty v responzivním designu: desktop, notebook, tablet a smartphone.

Ačkoli design je nevýrazný ve srovnání s knihami Dotgrid, nikdo jiný zvažoval citlivé skicáře pro webové designéry. Pokud jste v tom trochu věc, pak to stojí za to objednat jeden pro zkušební jízdu.

Pokud jste opravdu do ručně vyráběné věci, a nechcete utrácet žádné peníze můžete také vytiskněte si vlastní mřížkové stránky s náčrtem rozhraní. Toto volné místo nabízí různých šablon mřížky můžete tisknout a používat pro ručně tažené drátové modely.

Mřížky se dodávají ve velikostech A4 a USA pro různé styly papíru. Můžete si vybrat z mnoha možností, jako jsou šablony pro celý webový prohlížeč nebo různé obrazovky iPhone.

Všechny tyto možnosti jsou skvělé, a stojí za to prozkoumat, jestli jste do kreslení tužkou. Papír je jedním z nejjednodušších médií, jak rychle dostat nové nápady, takže je to často upřednostňovaná volba i u návrhářů UI.

Digitální nástroje a webové aplikace

Existuje tolik skvělých programů wireframing, že mohou být sotva pokryty bez rizika analýzy paralýzy, takže teď se zaměřme na některé z nejlepších možností grid-wire.

Nejprve bych rád zmínil, že můžete použít nástroje Adobe, jako je Illustrator vytvořte si vlastní drátové modely. To není součástí workflow každého a Illustrator rozhodně není volný. Pokud však již pracujete s aplikací Adobe Creative Cloud, může to být dobré místo pro start.

1. Moqups

Moqups je jedním z nejlepších online nástrojů pro wireframing. Pracujete s vizuálním editorem a knihovnou prostředků pro přetažení po celé stránce.

Každý nový projekt Moqups má předdefinovaná mřížka, a používá jasně fialové čáry, které vám pomohou přitáhnout prvky do zarovnání. Je to skvělý webový nástroj, díky němuž je navrhování s mřížkou mnohem snazší.

Web funguje standardně na volném plánu, který omezuje uživatele na 300 objektů stránky. Stránky mají prémiové možnosti, ale placení měsíčního poplatku může být otravnější, než jen jít s nástroji Adobe, nebo jednorázový nákup Sketch.

2. Grid Papr

Webová aplikace Grid Papr je zcela zdarma a nabízí veřejné i soukromé účty pro vaše drátové modely. Můžete vytvořit název projektu a získat vlastní jedinečnou adresu URL pro drátový model, který můžete upravovat z libovolného počítače.

Každý nový drátový model je dodáván s mřížkou který umožňuje provádět snap-to-grid na všech prvcích. Funkce jsou jednoduché, ale jsou dost vytvořit lominový drátový model během několika minut. Stačí přetáhnout, co chcete na stránku, a sledovat mřížku vytvořit hvězdný drátový model.

3. Wireframe.cc

Wireframe.cc je jeden z nejjednodušších a nejmenších nástrojů, které můžete použít pro wireframing. Je vybaven a rozhraní bez rušení s předmontovaná mřížka a organizované panely nástrojů. Jednoduše kliknete a přetáhnete a vytvoříte nové prvky na plátně. Můžete také uložit a sdílet svou práci.

Jedná se o další nástroj nabízený zdarma s volitelnými prémiovými plány. Každý plán je účtován měsíčně, takže je velmi podobný Moqups v cenové struktuře. Volný nástroj je použitelný z libovolného počítače bez účtu.

4. Mockingbird

Mockingbird je další skvělá volba, která nabízí mnohem více funkcí než většina nástrojů wireframing. Můžete začít zdarma, ale proces je omezen na 7 dní. To může být pro některé uživatele nepříjemností, ale nástroj je opravdu neuvěřitelný a běží ve všech prohlížečích.

Mockingbird má nekonečnou knihovnu prvků uživatelského rozhraní, jako je karty, akordeony, rozbalovací nabídky, přehrávače videa a jednoduché textové odkazy. Výchozí mřížka používá systém 960gs mřížky, ale můžete si vybrat z 12, 16 a 24 sloupců.

Závěrečná slova

Bez ohledu na to, zda si vyberete tradiční nebo digitální wireframing, je to vždy o kvalitu výstupu. Je toho hodně co se naučit, když děláte tento druh práce, takže najděte jakýkoliv nástroj, který pro vás bude nejpohodlnější.

Posunout kupředu to nejlepší, co udělat je Stačí začít wireframing. Získejte pocit, co se vám líbí nejlepší (papír nebo digitální), a učinit z něj vlastní. Zdroje v tomto článku by vám měly poskytnout více než dost, abyste mohli začít s vlastním digitálním rozhraním.

(Foto obálky Oykun Yilmaz)