Lihtsa maketi loomiseks kasutage Firefoxi

Pliiats on traatvõrgu tööriist, mida saame kasutada, et visandada meie rakenduse kasutajaliidese mudel. Pencil on suurepärane asi, et see on kerge, lihtne kasutada ja Firefoxiga tihedalt integreeritud. Lisaks sellele on see tasuta avatud lähtekoodiga rakendus! Artikli lõpus anname teile lihtsa demo selle kohta, kuidas kasutada pliiatsit, et luua Brizzly-tüüpi traatvõrk.

Miks me loome traadiraamid ?

Wireframe kujutab endast lehekülje paigutuse idee visandit. Traadi karkass keskendub lehe infokorraldusele, et tagada, et disain sobitub kasutaja vajadustele. Traatraam koosneb tavaliselt erinevatest kujudest (näiteks kastid, ovaalsed ja teemandid), mis esindavad sisu, funktsionaalseid ja navigatsioonielemente. Need kujundid näitavad nende paigutust lehel.

Algul võib tunduda aja raiskamine, mis loob lehe karmid visandid. Juhtraam on oluline, et teie kasutajad keskenduksid teie lehe olulisuse elemendile. Ligikaudse visandjoonise loomine lehele ilma väljamõeldud visuaalsetel elementidel viitab kasutaja tähelepanu olulistele elementidele, nagu suuruse määramine, paigutus ja paigutus. Alustame paremat arusaamist sellest, mida klient tegelikult tarkvara vajab ja vajab, kui kasutaja hakkab keskenduma lehe olulistele elementidele. Juhtraami loomine võimaldab teil ja teie kasutajatel tõhusalt koostööd teha ja võimalikke projekteerimisprobleeme varakult tuvastada.

Pliiatsiga alustamine

Laadige pliiats pliiatsi lisamise lehelt alla. Kui olete pliiatsit installinud, on see saadaval käsuga „Tööriistad“> „Pliiatside joonistamine”.

Seda näeb välja Brizzly. See on päris lahe veebirakendus, mis koondab teie Facebooki ja Twitteri ühe lehe sees.

See on traadi raami lõpptulemus. Selle traatraami peamised kujundid on ristkülikud, tekstikastid ja sakid. Artikli järgmine osa annab lihtsa näite, kuidas iga kuju luua.

Ristküliku loomine

Juhtraami kuju loomise esimene etapp on lohistada kuju menüüst „Kuju kogud” lõuendile.

Muutke ristküliku suurust sobivale laiusele ja kõrgusele.

Pencil saab kohandada mis tahes kujuga teksti, piiri ja taustavärvi. Paremklõpsake ristkülikut ja valige atribuudid, et avada Atribuutide aknad. See on tausta omaduste ekraan. Seadke ristküliku taustavärv valge (#FFFFFF).

Klõpsake vahekaarti „Piir” ja reguleerige piirivalikuid. Seadke äärevärv mustaks (# 000000) ja muutke piiri kaaluks 1.

Teksti omaduste ekraan võimaldab kohandada teksti fondi tüüpi, suurust, stiili, kaalu, värvi, heledust ja läbipaistmatust.

Vahekaartide loomine

Kodu, mustand, pildi sakid on kolm vahekaarti, mis on üksteise peale paigutatud. Lohistage kolm vahekaarti paneeli ristkülikusse. Muutke iga vahekaardi suurust nii, et iga vahekaart oleks kõrvuti.

Avage teksti atribuutide ekraan, et reguleerida vahekaardi „Pildid” ja „Mustand” fondi värvi. Seadke see halliks (# 989898).

Teksti loomine

Iga menüü loomiseks lohistage lõuendile teksti tekst. Me võime teksti väljanägemist kohandada teksti atribuutide akna avamisega.

Kasulikud näpunäited värvi muutmiseks

Värv on meeldiva traatvõrgustiku üks kõige olulisemaid osi. Kõige täpsem viis kuju värvi muutmiseks on värvi HTML-koodi määramine. HTML-koodi näitamine konkreetse värvi jaoks võib olla keeruline. Me võime kasutada HTML-värvi pettuse lehte w3cschools.com-lt, et otsida õiget HTML-koodi teatud värvi jaoks.

Soovime kasutada värve ka ekraanilt ja kasutada seda pliiatsis. Värvi valimiseks ekraanil klõpsake Firefoxi vasakus alumises nurgas asuval silma tilguti ikoonil. Samuti võime ColorZilla värvivalijale avada topeltklõpsuga silmatilkade ikoonile. Lihtsalt kopeerige Hex-kood Pencil värvi HTML-koodi.

Järeldus

Pliiatsit on lihtne kasutada traaditarkvara abil. Pliiatsi integreerimine Firefoxiga võimaldab meil kasutada muud Firefoxi pistikprogrammi, et aidata luua paremat traati.

Lingid
Laadige pliiats alla
Lae alla Colorzilla
W3C HTML värvi pettuste leht