Nástroje na tvorbu webového layoutu - 1. díl

5. 6. 2012

Loga.

Jeden z obvyklých způsobů návrhu webového layoutu respektive wireframe, je kresba tužkou na papír, použití windowsovského Malování, textových polí ve Wordu nebo buněk v Excelu. Pro tyto účely však existují speciální nástroje a my si v tomto článku některé z nich představíme. A vezmeme to pěkně podle abecedy...

Axure

Logo Axure.

Jako první si představíme nástroj Axure, který je k vyzkoušení k dispozici jako trial verze, kterou je možné stáhnout, nainstalovat a poté začít používat.


Úvodní obrazovka po spuštění programu je členěna na mnoho oddílů a vypadá složitě. Zorientovat se však není příliš velký problém, ovládání je jednoduché a jednotlivé prvky mají srozumitelné popisky.


Při návrhu layoutu přetahujeme jednotlivé prvky z pravého panelu do pracovního prostoru myší.


Axure umožňuje návrhářům vytvářet nejen návrhy webů, ale také vývojové diagramy a další schémata.

Balsamiq Mockups

Logo Balsamiq Mockups.

Pokud jste zvyklí kreslit si návrhy na papír, bude vám jistě vyhovovat Balsamiq Mockups, protože právě kresbu rukou imituje.

Vyzkoušet tento nástroj si můžete bez nutnosti registrace či instalace přímo ve webovém prohlížeči. Pro zájemce je dostupná i demo verze na 7 dní.


Přetažením myši si na pracovní plochu umístíme imitaci okna prohlížeče a do něj pak vkládáme jednotlivé prvky webu. Ovládání je velmi intuitivní a výsledek atraktivní na pohled.


Cacoo

Logo Cacoo.

Jako další se podíváme na nástroj Cacoo. Pro jeho vyzkoušení je nutná registrace. Výhodou je, že jako výchozí jazyk si můžete zvolit češtinu a Cacoo je z části počeštěný, takže ho mohou využívat i ti anglicky méně zdatní.

Po registraci se vám zobrazí úvodní obrazovka a přes tlačítko v pravém horním rohu můžete začít vytvářet svůj návrh webu.


Nástroj je určen nejen pro návrh webů, ale i tvorbu různých typů diagramů. V nově otevřeném návrhovém okně si tedy v pravém panelu vybereme složku „Web“ a v ní „Wireframe“.


V této chvíli můžeme začít s návrhem webového wireframe. Přetažením myši si na pracovní plochu umisťujeme jednotlivé prvky, které můžeme následně libovolně upravovat.


Hotový návrh můžeme exportovat do různých formátů:


Cacoo umí i to, co Balsamiq Mockups, tedy imitovat ruční kresbu:


HotGloo

Logo HotGloo.

Poslední nástroj, který si dnes představíme, je HotGloo. Patnáctidenní trial verze s možností vytvoření jednoho projektu s pěti stránkami je na webu k nalezení jako „Free Plan“. Je potřeba se pouze zaregistrovat a registraci potvrdit kliknutím na odkaz v e-mailu. Po prvním přihlášení máte rovnou možnost vytvořit svůj první projekt.


Plná verze nabízí mnoho funkcí, například možnost spolupráce více členů týmu na projektu. Ve zkušební verzi některé funkce nejsou dostupné.

Okno projektu je přehledné, v jeho horní části je hlavní nabídky, vpravo pak jednotlivé prvky webu.


Příprava wireframe je snadná a rychlá. Při umisťování jednotlivých prvků však znatelně chybí vodicí lišty.


V příštím díle se seznámíme s dalšími čtyřmi nástroji pro návrh webového wireframe.



Komentáře

  1. Hlavní strana
  2. Blog
  3. 2012 - červen
  4. Nástroje na tvorbu webového layoutu - 1. díl