Blyant er et wireframing verktøy som vi kan bruke til å skisse en mock up av applikasjonens brukergrensesnitt. Den flotte tingen om blyant er at den er lett, enkel å bruke og tett integrert med Firefox. På toppen av alt er det en gratis åpen kildekode applikasjon! I slutten av artikkelen vil vi gi deg en enkel demo om hvordan du bruker blyant for å lage en Brizzly som wireframe.
Hvorfor lager vi wireframes?
En wireframe er en skisse av en sidelayout-ide. En wireframe fokuserer på informasjonsdesign av en side for å sikre at designet passer inn i hva brukeren trenger. En wireframe består vanligvis av forskjellige former (for eksempel bokser, ovaler og diamanter) for å representere innhold, funksjonelle og navigasjonselementer. Disse figurene viser plasseringen deres på siden.
I begynnelsen kan det virke som en sløsing med tid å skape grove skisser på en side. En ledningsramme er viktig for at brukerne skal fokusere på viktighetselementet på siden din. Skape en grov skisse av en side, uten fancy visuelle elementer, skift brukerens oppmerksomhet til viktige elementer som dimensjonering, layout og plassering av sidekomponentene dine. Vi vil begynne å få en bedre forståelse av hva kunden virkelig vil ha og trenger ut av programvaren når brukeren begynner å fokusere på de viktige elementene i en side. Ved å lage en ledningsramme kan du og dine brukere samarbeide effektivt og identifisere potensielt designproblem tidlig.
Komme i gang med blyant
Last ned blyant fra blyantens tilleggsside. Når du har installert blyant, er den tilgjengelig fra 'Verktøy'> 'Pencil Sketching'.
Opprette et rektangel
Det første trinnet med å lage en ledningsrammeform er å trekke en form fra 'Shape Collections' -menyen på lerretet.
Opprette faner
Hjemmet, utkastet, bildefanene er tre faner som er stablet ovenpå hverandre. Dra tre "Tabs Panel" i rektangelet. Endre størrelsen på hver kategori slik at hver fane viser side ved side.
Opprette tekst
Dra "Text" -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 wireframe. Den mest nøyaktige måten å endre farge på en form på er å spesifisere fargens HTML-kode. Å finne ut HTML-koden for en bestemt farge kan være vanskelig. Vi kan bruke HTML color cheat sheet fra w3cschools.com for å slå opp riktig HTML-kode for en bestemt farge.
Vi liker også å bruke colorzilla til å velge farger fra skjermen og bruke den i blyant. Klikk på eye drop icon i nederste venstre hjørne av Firefox for å velge farge på skjermen. Vi kan også åpne ColorZillas fargeplukker ved å dobbeltklikke på øyedråpeikonet. Bare kopi lim inn Hex-koden i blyantens farger HTML-kode.
Konklusjon
Blyant er lett å bruke wireframing verktøy. Blyantintegrasjon med Firefox gjør det mulig for oss å bruke annet Firefox-plugin for å bidra til å skape en bedre wireframe
lenker Last ned blyant Last ned Colorzilla W3C HTML Color Cheat Sheet
