Použite Firefox na vytvorenie jednoduchých modelov
Ceruzka je nástroj na vytváranie drôtov, ktorý môžeme použiť na skompletizovanie falošného používateľského rozhrania našej aplikácie. Skvelá vec týkajúca sa ceruzky je, že je ľahká, ľahko použiteľná a tesne integrovaná s programom Firefox. Na vrchole je všetko jeho voľné open source aplikácie! Na konci článku vám poskytneme jednoduché demo o tom, ako používať ceruzku na vytvorenie drôtu typu Brizzly.
Prečo vytvárame drôtené rámy ?
Drôtený rám je náčrt nápadu na rozloženie stránky. Drátový rám sa zameriava na informačnú konštrukciu stránky, aby sa zabezpečilo, že dizajn sa hodí do toho, čo používateľ potrebuje. Drôtený rám sa zvyčajne skladá z rôznych tvarov (ako sú škatule, ovály a diamanty), ktoré reprezentujú obsahové, funkčné a navigačné prvky. Tieto tvary zobrazujú umiestnenie na stránke.
Spočiatku to môže znieť ako strata času vytváraním drsných náčrtov stránky. Rám drôtu je dôležitý pre to, aby sa vaši používatelia sústredili na prvok dôležitosti na vašej stránke. Vytváranie hrubého náčrtu stránky bez fiktívnych vizuálnych prvkov posúva pozornosť používateľa k dôležitým prvkom, ako je veľkosť, rozloženie a umiestňovanie komponentov vašej stránky. Začneme sa lepšie porozumieť tomu, čo klient naozaj chce a potrebuje zo softvéru, keď sa používateľ začne sústrediť na dôležité prvky stránky. Vytvorenie drôteného rámčeka vám umožní účinne spolupracovať s vašimi používateľmi a urýchlene identifikovať potenciálny dizajnový problém.
Začíname s ceruzkou
Stiahnite si ceruzku z doplnkovej stránky Pencil. Po nainštalovaní ceruzky je prístupná z "Nástroje"> "Skicovanie ceruzkou".
Brizzly vyzerá takto. Je to celkom skvelá webová aplikácia, ktorá zhromažďuje vaše Facebook a Twitter na jednej stránke.
Toto je výsledok drôtového rámu. Hlavné tvary v tomto drôtom sú obdĺžniky, textové polia a karty. Nasledujúca časť článku poskytne jednoduchý príklad, ako vytvoriť každý tvar.
Vytvorenie obdĺžnika
Prvým krokom k vytvoreniu tvaru drôteného rámčeka je presunutie tvaru z ponuky "Tvarové kolekcie" na plátno.
Zmeňte veľkosť obdĺžnika na vhodnú šírku a výšku.
Môžeme prispôsobiť text, okraj a farbu pozadia akéhokoľvek tvaru v ceruzke. Kliknite pravým tlačidlom na obdĺžnik a vyberte možnosť Vlastnosti a otvorte okno Vlastnosti. Toto je obrazovka s vlastnosťami pozadia. Nastavte farbu pozadia obdĺžnika na bielu (#FFFFFF).
Kliknite na kartu "Okraj" a upravte vlastnosti okrajov. Nastavte farbu ohraničenia na čiernu (# 000000) a zmeňte hraničnú hmotnosť na hodnotu 1.
Obrazovka s textovými vlastnosťami umožňuje prispôsobiť typ písma, veľkosť, štýl, hmotnosť, farbu, jas a opacitu textu.
Vytváranie kariet
Záložky domov, koncept, obrázky sú tri karty, ktoré sú navzájom stohované. Presunutím troch panelov záložiek do obdĺžnika. Zmena veľkosti každej záložky tak, aby každá záložka zobrazovala vedľa seba.
Otvorte obrazovku s textovými vlastnosťami a upravte farbu písma v záložke "Obrázky" a "Koncept". Nastaviť na sivú (# 989898).
Vytváranie textu
Pretiahnutím tvaru "Text" na plátno vytvoríte jednotlivé ponuky. Môžeme upraviť vzhľad textu prístupom do okna vlastností textu.
Užitočné tipy pre zmenu farby
Farba je jednou z najdôležitejších častí pri dodávaní príjemného drôtu. Najpresnejší spôsob zmeny farby tvaru je zadaním kódu HTML farby. Zistenie kódu HTML pre konkrétnu farbu môže byť ťažké. Môžeme použiť hárok farieb HTML z w3cschools.com, aby sme vyhľadali správny HTML kód pre určitú farbu.
Rovnako radi používame colorzilla na výber farieb z obrazovky a použite ich v Pencil. Kliknutím na ikonu kvapky oka v ľavom dolnom rohu prehliadača Firefox vyberte farbu na obrazovke. Môžeme tiež otvoriť ColorZilla výber farieb dvojitým kliknutím na ikonu očnej kvapky. Stačí skopírovať kód Hex do farebného HTML kódu Pencil.
záver
Ceruzka je ľahko použiteľný drôtový nástroj. Integrácia ceruzky s prehliadačom Firefox nám umožňuje použiť iný doplnok pre Firefox, ktorý pomôže vytvoriť lepší drôtový rám
odkazy
Stiahnite tužku
Stiahnite si Colorzilla
W3C HTML Color Cheat Sheet
