Ceruzka je nástroj, ktorý dokážeme použiť na vykreslenie modelu 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áta 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ú 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 plytvanie časom 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 sústrediť na dôležité prvky 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 ceruzkou
Stiahnite si Pencil from Pencil's add ons page. Po nainštalovaní ceruzky je prístupná z "Nástroje"> "Skicovanie ceruzkou".
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.
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.
Vytváranie textu
Pretiahnutím tvaru "Text" na plátno vytvoríte každú ponuku. 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ôteného rámu. 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ôtový nástroj. Integrácia ceruzky s prehliadačom Firefox nám umožňuje používať ďalší doplnok Firefoxu na vytvorenie lepšieho drôtu
odkazy Stiahnite tužku Stiahnite si Colorzilla W3C HTML farba Cheat Sheet
