Použijte Firefox k vytvoření jednoduchých modelů

Tužka je nástroj pro vytváření drátů, který můžeme použít k vykreslení modelu uživatelského rozhraní naší aplikace. Skvělá věc na tužce je, že je lehká, snadno ovladatelná a pevně integrovaná s aplikací Firefox. Navíc je to jeho bezplatná open source aplikace! Na konci článku vám poskytneme jednoduché ukázky o tom, jak používat tužku, abyste vytvořili kostru typu Brizzly.

Proč vytváříme drátové rámy ?

Drátěný rám je náčrtem nápadu pro rozvržení stránky. Drátěný rám se zaměřuje na návrh informací stránky, aby se zajistilo, že návrh vyhovuje potřebám uživatele. Drátěný rám se obvykle skládá z různých tvarů (jako jsou krabice, ovály a diamanty), které reprezentují obsahové, funkční a navigační prvky. Tyto tvary zobrazují umístění na stránce.

Zpočátku to může vypadat jako ztráta času vytváření drsných nákresů stránky. Drátový rám je důležitý pro to, aby se uživatelé soustředili na prvek důležitosti na vaší stránce. Vytváření hrubého náčrtu stránky, bez fantazijních vizuálních prvků, posunuje pozornost uživatele k důležitým prvkům, jako je velikost, rozložení a umístění komponenty stránky. Začneme se lépe porozumět tomu, co klient opravdu chce a potřebuje ze softwaru, když se uživatel začne soustředit na důležité prvky stránky. Vytvoření drátěného rámečku vám umožní efektivně spolupracovat s Vašimi uživateli a předčasně identifikovat případný návrhový problém.

Začínáme s tužkou

Stáhněte si tužku z doplňkové aplikace Pencil. Jakmile nainstalujete tužku, je přístupná z "Nástroje"> "Skicování tužkou".

Tak vypadá Brizzly. Je to docela dobrá webová aplikace, která agreguje váš Facebook a Twitter na jedné stránce.

To je konečný výsledek drátového rámu. Hlavní tvary v tomto wireframe jsou, obdélníky, textové pole a karty. Další část článku vám poskytne jednoduchý příklad, jak vytvořit každý tvar.

Vytvoření obdélníku

Prvním krokem k vytvoření tvaru drátěného rámu je přetáhnout tvar z nabídky "Tvary kolekcí" na plátno.

Změňte velikost obdélníku na vhodnou šířku a výšku.

Můžeme přizpůsobit text, okraj a barvu pozadí libovolného tvaru v tužce. Klikněte pravým tlačítkem myši na obdélník a vyberte možnost Vlastnosti a otevřete okna Vlastnosti. Toto je obrazovka vlastností pozadí. Nastavte barvu pozadí obdélníku na bílou (#FFFFFF).

Klikněte na záložku "Ohraničení" a upravte vlastnosti okraje. Nastavte barvu ohraničení na černou barvu (# 000000) a změňte hmotnost rámečku na hodnotu 1.

Obrazovka vlastností textu umožňuje přizpůsobit typ písma, velikost, styl, hmotnost, barvu, jas a opacitu textu.

Vytváření karet

Záložky domov, koncept, obrázky jsou tři záložky, které jsou na sobě navzájem stohovány. Přetáhněte tři panely panelů do obdélníku. Změňte velikost každé karty tak, aby se každá záložka zobrazovala vedle sebe.

Otevřete obrazovku vlastností textu a upravte barvu písma na kartě Obrázky a Koncept. Nastavte jej na šedé (# 989898).

Vytváření textu

Přetáhněte textový tvar na plátno a vytvořte jednotlivé nabídky. Vzhled textu upravíme tak, že přistupujeme k oknu vlastností textu.

Užitečné tipy pro změnu barvy

Barva je jednou z nejdůležitějších součástí dodávky příjemného drátěného rámu. Nejpřesnější způsob, jak změnit barvu tvaru, je zadání kódu HTML barvy. Zjistit kód HTML pro konkrétní barvu může být obtížné. Můžeme použít šifrovací list HTML z w3cschools.com pro vyhledání správného HTML kódu pro určitou barvu.

Rádi bychom také použili colorzillu na výběr barvy z obrazovky a použijte ji v Pencil. Kliknutím na ikonu oka v levém dolním rohu prohlížeče Firefox vyberte barvu na obrazovce. Můžeme také otevřít výběr barev ColorZilla dvojitým kliknutím na ikonu oka. Stačí zkopírovat kód hexadecimální barvy do barevného HTML kódu Pencil.

Závěr

Tužka je snadno použitelný nástroj pro drátování. Integrace tužky s aplikací Firefox nám umožňuje použít jiný plugin aplikace Firefox, který vám pomůže vytvořit lepší drátový rám

Odkazy
Stáhnout tužku
Stáhnout Colorzilla
W3C HTML Color Cheat Sheet