23Jul
Ceruzka je drôtový nástroj, ktorý môžeme použiť na naskenovanie falošného používateľského rozhrania našej aplikácie. Skvelá vec na ceruzke 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é ukážky, 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 zapadá do toho, čo používateľ potrebuje. Drôtený rám sa zvyčajne skladá z rôznych tvarov( ako sú boxy, 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 zdať ako strata času vytváraním hrubý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 získať lepšie pochopenie toho, čo klient naozaj chce a potrebuje zo softvéru, keď sa používateľ začne zaoberať dôležitými prvkami stránky. Vytvorením drôteného rámčeka môžete účinne spolupracovať s vašimi používateľmi a identifikovať potenciálny problém návrhu skoro.
Začíname s tužkou
Stiahnite si ceruzku z doplnkovej stránky Pencil. Po nainštalovaní ceruzky je k dispozícii nástroj "Nástroje" & gt;"Skicovanie ceruzkou".
Vyzerá to, čo Brizzly vyzerá.Je to celkom skvelá webová aplikácia, ktorá zhromažďuje vaše Facebook a Twitter na jednej stránke.
Toto je konečný 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 pri vytváraní tvaru drôteného rámčeka je presunutie tvaru z ponuky "Tvorba kolekcií" na plátno.
Zmena veľkosti obdĺžnika na vhodnú šírku a výšku.
V Pencil môžeme prispôsobiť farbu textu, okrajov a farieb akéhokoľvek tvaru. Kliknite pravým tlačidlom myši 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 záložku "Hranice" a upravte vlastnosti okraja. Nastavte farebnú hranicu na čiernu( # 000000) a zmeňte hraničnú hmotnosť na 1.
Obrazovka vlastností textu umožňuje prispôsobiť typ písma, veľkosť, štýl, hmotnosť, farbu, jas a opacitu textu.
Vytváranie kariet
Záložky domov, konceptu, obrázkov sú tri záložky, 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 na karte "Obrázky" a "Koncept".Nastavte ho na sivú( # 989898).
Vytváranie textu
Presuňte tvar "Text" na plátno a vytvorte každú ponuku. Môžeme upraviť vzhľad textu prístupom do okna vlastností textu.
Užitočné rady 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 určitú farbu môže byť ťažké.Môžeme použiť farebný hárok 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 očných kvapiek 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ôtený nástroj. Integrácia ceruzky s prehliadačom Firefox nám umožňuje použiť iný doplnok Firefoxu, ktorý pomôže vytvoriť lepší drôtový rám
Odkazy
Stiahnite tužku
Stiahnite si Colorzilla
W3C HTML Color Cheat Sheet