Upotrijebite Firefox da biste stvorili jednostavne makete
Olovka je alat za žičanu izradu okvira koji možemo upotrijebiti za skiciranje modela korisničkog sučelja naše aplikacije. Velika je stvar o Pencilu što je lagan, jednostavan za korištenje i čvrsto integriran s Firefoxom. Povrh svega, to je besplatna aplikacija otvorenog koda! Na kraju članka dat ćemo vam jednostavan demo o tome kako koristiti olovku za izradu ožičenog okvira.
Zašto pravimo okvire ?
Žičani okvir je skica ideje o izgledu stranice. Žičani se fokusira na informacijski dizajn stranice kako bi se osiguralo da se dizajn uklapa u ono što korisnik treba. Žičani okvir obično se sastoji od različitih oblika (kao što su kutije, ovali i dijamanti) koji predstavljaju sadržajne, funkcionalne i navigacijske elemente. Ovi oblici prikazuju njihov položaj na stranici.
Isprva se može činiti kao gubitak vremena stvarajući grube crteže stranice. Žičani okvir je važan kako bi se korisnici usredotočili na element važnosti na vašoj stranici. Stvaranje grube skice stranice, bez zamišljenih vizualnih elemenata, pomaknu pažnju korisnika na važne elemente kao što su dimenzioniranje, izgled i položaj komponenti stranice. Mi ćemo početi dobivati bolje razumijevanje o tome što klijent zaista želi i treba iz softvera kada korisnik počne fokusirati se na važne elemente stranice. Stvaranje žičanog okvira omogućuje vam i vašim korisnicima da učinkovito surađuju i rano prepoznaju potencijalni problem dizajna.
Početak rada s olovkom
Preuzmite Olovku s stranice Dodavanje olovke. Nakon što instalirate Olovku, ona je dostupna s alata "Alati"> "Skiciranje olovkom".
Tako izgleda Brizzly. To je prilično cool web-aplikacija koja objedinjuje vaše Facebook i Twitter unutar jedne stranice.
To je krajnji rezultat žičanog okvira. Glavni oblici u ovom žičanom okviru su, pravokutnici, tekstni okviri i kartice. Sljedeći dio članka dat će jednostavan primjer kako stvoriti svaki oblik.
Izrada pravokutnika
Prvi korak u stvaranju oblika žičanog okvira je povlačenje oblika iz izbornika "Oblici zbirki" na platno.
Promijenite veličinu pravokutnika na odgovarajuću širinu i visinu.
Olovkom možemo prilagoditi boju teksta, obruba i pozadine bilo kojeg oblika. Desni klik na pravokutnik i odaberite "Svojstva" da biste otvorili prozore Svojstva. Ovo je zaslon svojstava pozadine. Postavite boju pozadine pravokutnika na bijelu (#FFFFFF).
Kliknite karticu "Granica" i prilagodite svojstva granice. Postavite boju obruba na crno (# 000000) i promijenite težinu obruba na 1.
Zaslon svojstava teksta prilagođava vrstu fonta, veličinu, stil, težinu, boju, svjetlinu i neprozirnost teksta.
Stvaranje kartica
Kartice kućne, skice, slike su tri kartice koje se slažu jedna na drugu. Povucite tri ploče s karticama u pravokutnik. Promijenite veličinu svake kartice tako da se svaka kartica prikazuje jedna uz drugu.
Otvorite zaslon svojstava teksta da biste prilagodili boju fonta kartice "Slike" i "Skica". Postavite ga na sivo (# 989898).
Izrada teksta
Povucite oblik "Tekst" na platno da biste stvorili svaki od izbornika. Možemo prilagoditi izgled teksta pristupanjem prozoru sa svojstvima teksta.
Korisni savjeti za promjenu boje
Boja je jedan od najvažnijih dijelova u isporuci ugodnog žičanog okvira. Najprecizniji način za promjenu boje oblika jest određivanje HTML koda boje. Izračunavanje HTML koda za određenu boju može biti teško. Možemo koristiti HTML list varati od w3cschools.com tražiti pravo HTML kod za određenu boju.
Također volimo koristiti colorzilla za odabir boja s ekrana i korištenje u Olovci. Kliknite na ikonu kapaljke u donjem lijevom kutu Firefoxa da biste odabrali boju na zaslonu. Također možemo otvoriti ColorZillin odabir boja dvostrukim klikom na ikonu kapi oka. Samo kopirajte zalijepite Hex kod u HTML kod u boji.
Zaključak
Olovka je jednostavan za korištenje alat za ožičenje. Integracija olovke s Firefoxom omogućuje nam da koristimo drugi dodatak za Firefox kako bismo stvorili bolji okvir
linkovi
Preuzmite Olovku
Preuzmite Colorzilla
W3C HTML Color Cheat Sheet
