Moderní doba vyžaduje moderní nástroje. Dříve jsme většinu přípravy přenášeli pomocí tužky na papír nebo mapu stránek připravovali do evernotu. Hledali jsme proto nástroj, který by nám ušetřil práci s přípravou a rozvržením stránek a dal nám možnost se hlouběji věnovat celkové myšlence projektu.

Aplikací splňující naše potřeby je hned několik (axure, ux-app,…). Naše pozornost ale spočinula na UXpinu. On-line aplikaci určenou pro vytváření wireframů a funkčních prototypů. Proč?

Líbilo se nám nejen rozhraní, ale i intuitivní rozmístění prvků. A navíc jsou klávesové zkratky podobné těm z Photoshopu.

Představím vám nějaké základní možnosti a práci právě s UXPinem.

Sitemap

Prvním požadavkem byla možnost vytvářet strukturu projektu a propojení jednotlivých části webu.

Sitemap – pomocí funkce drag&drop je možné vytvářet stromovou strukturu projektu

Lze vytvořit nekonečný počet  stránek pomocí „Add page“ a následně pomocí drag&drop funkce vytvořit jednoduše stromovou strukturu projektu. Kliknutím na stránku pak dojde k přechodu na konkrétní návrh stránky.

Knihovna nástrojů

Aplikace umožňuje používat opravdu veliké množství předpřipravených prvků. Jejich výběr spočívá ve výběru knihovny, kterou zrovna potřebuji. Dejme tomu, že do svého návrhu chci umístit hlavní nadpis stránky.

Mohu si usnadnit práci a napsat klíčové slovo „text“ do pole určeného k vyhledávání a nebo si projít nabídku dostupných nástrojů a vybrat nástroj přímo. Knihovna obsahuje i svého manažera. S jeho pomocí lze vybírat další nebo nové dostupné prvky (ikony, obrázky, …).

Plocha

No a potom tu máme pracovní plochu. Pracovní plocha je místem, kde uchováváme myšlenky a vytváříme stránku po stránce. Vkládáním jednotlivých bloků, obrázků, textu, ikon atd. lze vytvořit rozvržení celé stránky. A to není vše. UXPin umožňuje vytvářet i interaktivní prvky (formuláře, vyhledávání,…), prvky animovat (zobrazení při najetí kurzoru, zobrazení navigace po kliknutí, …) a spoustu dalších vychytávek.

Export

Závěrečnou fází po vytvoření struktury a jednotlivých stránek je export. Pro prezentaci u klienta využíváme obvykle výstup v PNG nebo PDF formátu. Při vytvoření potom vygenerovanou HTML stránku, která podporuje již zmíněné animace a lze na ní provádět i uživatelské testování.

Z aplikace UXPin jsme doslova nadšeni a s klidným svědomím ji můžeme doporučit každému, kdo má potřebu vytvářet wireframe nebo prototyp pro uživatelské testování.