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

13. 6. 2012

Loga.

V prvním díle dvoudílného miniseriálu o nástrojích pro tvorbu webového layoutu jsme se seznámili se čtyřmi nástroji, pomocí kterých je možné provést návrh wireframe webu: Axure, Balsamiq Mockups, Cacoo a HotGloo.

A v dnešním druhém (a zároveň posledním) díle se seznámíme s dalšími čtyřmi nástroji...

iPlotz

Logo iPlotz.

Jako první si představíme nástroj iPlotz. Ve verzi, která je zdarma, si můžete vyzkoušet práci na jednom projetu s celkem pěti stránkami. Ostatní verze jsou neomezené, ale samozřejmě také zpoplatněné.

Po registraci a prvním přihlášení můžete začít vytvářet svůj první projekt.


Při tvorbě wireframe si můžeme vybrat, zda chceme tvořit pro web, iPhone/iPad či Android. Pak už jen myší přetahujeme jednotlivé prvky na pracovní plochu, měníme jejich umístění, velikost, barvu či popisky.


V horním menu máme možnost zobrazit si pravítko a pomocnou mřížku, která nám usnadní umisťování jednotlivých prvků.

Pomocí horního menu si také můžeme projekt uložit či vytisknout a samozřejmě také sdílet. Omezené sdílení je možné i ve verzi, která je zdarma.

MockFlow

Logo MockFlow.

Dalším nástrojem na tvorbu webového wireframe je MockFlow. Vyzkoušet si ho můžete zdarma – na jednom projektu s maximálně čtyřmi stránkami. Můžete spolupracovat s jedním dalším uživatelem, používat historii, nahlížet na web v HTML a exportovat výsledek do obrázku, pdf nebo doc.

Pro začátek je potřeba se zaregistrovat. Po úspěšném přihlášení do účtu už můžete začít s návrhem layoutu. V levém horním rohu si vyberete, co chcete navrhovat.


Otevře se nám nové okno s prostorem pro návrh webu. Myší přetáhneme na volnou plochu „Layout Builder“ a můžeme začít navrhovat.


Poklikáním na vložený layout můžeme provádět úpravy návrhu. Lze přidat další oddíl – horizontální i vertkální. A v dolní části stránky je také možné provést editaci výšky a šířky jednotlivých částí návrhu.


Provedené úpravy se samozřejmě promítnou do původního návrhu. V něm pak můžeme tažením myši přidávat z pravého panelu různé další prvky a sestavit si návrh wireframe.


Mockingbird

Logo Mockingbird.

Dalším nástrojem, se kterým se seznámíme, je mockingbird. Jde o další z řady online dostupných nástrojů pro tvorbu wireframe – dle informací na webu by měl fungovat v prohlížečích Firefox, Chrome a Safari.

K vyzkoušení není potřeba žádná registrace a nebudou vás zdržovat ani rozlišené uvítací obrazovky. Jakmile se na úvodní straně webu rozhodnete produkt vyzkoušet, budete přesměrováni do pracovního prostředí.


Prvky, které jsou umístěné na ploše, můžete využít nebo smazat. Z levého menu si, jako je to obvyklé i u ostatních nástrojů, přetahujete na pracovní plochu myší ty prvky, které chcete využít. Můžete je samozřejmě přemisťovat a měnit jejich velikost.


PhotoShare

Logo PhotoShare.

Jako poslední si ukážeme nástroj PhotoShare. K dispozici jsou tři různé typy (Standard, Professional, Business) a všechny jsou dostupné ve 30 denní trial verzi zdarma.

Po zaregistrování si nějakou dobu počkáte, než vám bude vytvořen účet. Pak vyplníte heslo, čímž se přihlásíte, a můžete začít pracovat na svém prvním projektu.


Pracovní plocha je podobná všem předchozím. K dispozici máme mřížku a pravítko a samozřejmě přehled všech dostupných komponentů.


Ovládání není tak intuitivní jako v ostatních nástrojích. Občas je problém upravit popisek nějakého prvku nebo změnit velikost, protože se nezobrazí šipky, které indikují možnost změny velikosti.


Zhodnocení

Testovány byly vždy verze, které jsou dostupné zdarma a ty jsou pochopitelně zásadně omezeny – převážně na počet projektů nebo spolupráci více členů týmu na jednom projektu.

Za nejlepší nástroj bych subjektivním hodnocením označila Cacoo. Jeho free verze totiž umožňuje mít až 25 projektů a nástroj i ve verzi zdarma nabízí opravdu široké možnosti.

Nemusí navíc sloužit pouze pro návrh wireframe, protože umožňuje návrhy diagramů (UML, ERD), aplikací pro Android, iPad a iPhone, sítí, ale také návrhy elektrických obvodů nebo rozmístění nábytku v kanceláři.




Komentáře

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