Pencil er et wireframing-verktøy som vi kan bruke til å tegne en mock up av applikasjonens brukergrensesnitt. Det som er bra med Pencil er at den er lett, enkel å bruke og tett integrert med Firefox. På toppen av det hele er det et gratis open source-program! På slutten av artikkelen vil vi gi deg en enkel demo om hvordan du bruker blyant til å lage en Brizzly-lignende trådramme.
Hvorfor lager vi trådrammer?
En trådramme er en skisse av en sideoppsettide. En trådramme fokuserer på informasjonsdesignet til en side for å sikre at designet passer inn i det brukeren trenger. En trådramme består vanligvis av forskjellige former (for eksempel bokser, ovaler og diamanter) for å representere innhold, funksjonelle og navigasjonselementer. Disse figurene viser plasseringen på siden.
Først kan det virke som bortkastet tid å lage grove skisser av en side. En trådramme er viktig for å få brukerne til å fokusere på viktighetselementet på siden din. Når du lager en grov skisse av en side uten fancy visuelle elementer, skifter brukerens oppmerksomhet til viktige elementer som størrelse, layout og plassering av sidekomponentene. Vi vil begynne å få en bedre forståelse av hva klienten virkelig ønsker og trenger ut av programvaren når brukeren begynner å fokusere på de viktige elementene på en side. Ved å lage en trådramme kan du og brukerne dine samarbeide effektivt og identifisere potensielt designproblemer tidlig.
Komme i gang med blyant
Last ned Pencil fra Pencils tilleggsside. Når du har installert Pencil, er den tilgjengelig fra 'Verktøy'> 'Pencil Sketching'.
Slik ser Brizzly ut. Det er en ganske kul webapplikasjon som samler Facebook og Twitter på en enkelt side.
Dette er sluttresultatet av trådrammen. Hovedformene i denne trådrammen er rektangler, tekstbokser og faner. Den neste delen av artikkelen vil gi et enkelt eksempel hvordan du lager hver form.
Opprette et rektangel
Det første trinnet med å lage en trådrammeform er å dra en figur fra 'Shape Collections' -menyen til lerretet.
Endre størrelsen på rektangelet til en passende bredde og høyde.
Vi kan tilpasse teksten, rammen og bakgrunnsfargen til hvilken som helst form i blyant. Høyreklikk på rektangelet og velg ‘Properties’ for å åpne Properties-vinduene. Dette er skjermbildet for bakgrunnsegenskaper. Sett rektangelbakgrunnsfargen til hvit (#FFFFFF).
Klikk på 'Border' -fanen og juster kantegenskapene. Sett kantfargen til svart (# 000000) og endre kantvekten til 1.
Tekstegenskapsskjermen lar oss tilpasse skriftstypen, størrelsen, stilen, vekten, fargen, lysstyrken og opasiteten til teksten.
Opprette faner
Hjemmet, utkastet, bildefanen er tre faner som er stablet oppå hverandre. Dra tre ‘Tabs Panel’ inn i rektangelet. Endre størrelsen på hver fane slik at hver fane vises side om side.
Åpne tekstegenskapsskjermbildet for å justere skriftfargen i kategorien 'Bilder' og 'Kladd'. Sett den til Grå (# 989898).
Opprette tekst
Dra “Tekst” -formen på lerretet for å lage hver meny. Vi kan justere tekstutseendet ved å åpne tekstegenskapsvinduet.
Nyttige tips for å endre farge
Farge er en av de viktigste delene i å levere en behagelig trådramme. Den mest presise måten å endre farge på en form på er å spesifisere fargenes HTML-kode. Å finne ut HTML-koden for en bestemt farge kan være vanskelig. Vi kan bruke HTML-jukseark fra w3cschools.com for å slå opp riktig HTML-kode for en bestemt farge.
Vi liker også å bruke colorzilla for å plukke farger fra skjermen og bruke den i blyant. Klikk på øyedråperikonet nederst til venstre i Firefox for å velge farge på skjermen. Vi kan også åpne ColorZillas fargevelger ved å dobbeltklikke på øyedråpeikonet. Bare kopier og lim inn Hex-koden i blyantens HTML-kode.
Konklusjon
Blyant er enkelt å bruke wireframing verktøy. Blyantintegrasjon med Firefox gjør det mulig for oss å bruke et annet Firefox-plugin for å skape en bedre trådramme
Lenker
Last ned blyant
Last ned Colorzilla
W3C HTML Color Cheat Sheet
