Bruk Firefox til å lage enkle Mockups

Blyant er et wireframing verktøy som vi kan bruke til å skisse en mock up av brukerens brukergrensesnitt. Den gode tingen om blyant er at den er lett, enkel å bruke og tett integrert med Firefox. På toppen av alt er det en gratis åpen kildekodeapplikasjon! På 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'.

Slik ser Brizzly ut. Det er et ganske kult webprogram som samler Facebook og Twitter på en enkelt side.

Dette er sluttresultatet av trådrammen. Hovedformene i denne wireframe er rektangler, tekstbokser og faner. Neste del av artikkelen vil gi et enkelt eksempel på hvordan du lager hver form.

Opprette et rektangel

Det første trinnet med å lage en ledningsrammeform er å trekke en form fra 'Shape Collections' -menyen på lerretet.

Endre størrelsen på rektangelet til en passende bredde og høyde.

Vi kan tilpasse tekst, grense og bakgrunnsfarge av en hvilken som helst form i blyant. Høyreklikk rektangelet og velg 'Egenskaper' for å åpne Egenskaper-vinduene. Dette er bakgrunnsegenskapsskjermen. Sett rektangulær bakgrunnsfarge til hvit (#FFFFFF).

Klikk på kategorien 'Border' og juster grenseegenskapene. Angi kantfargen til svart (# 000000) og endre grensevekten til 1.

Tekst-egenskaper-skjermen lar oss tilpasse skrifttype, størrelse, stil, vekt, farge, lysstyrke og opasitet i teksten.

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.

Åpne skjermbildet for tekstegenskaper for å justere skriftfargen på kategorien "Bilder" og "Utkast". Sett den til Grå (# 989898).

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 presise 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