Brug Firefox til at oprette Simple Mockups

Pencil er et wireframing værktøj, som vi kan bruge til at skitsere en mock up af vores applikations brugergrænseflade. Den fantastiske ting om blyant er, at den er let, let at bruge og tæt integreret med Firefox. På toppen af ​​det hele er det en gratis open source applikation! I slutningen af ​​artiklen vil vi give dig en simpel demo om, hvordan du bruger blyant til at skabe en Brizzly som wireframe.

Hvorfor opretter vi wireframes ?

En wireframe er en skitse af en side layout ide. En wireframe fokuserer på informationsdesign af en side for at sikre, at designet passer ind i, hvad brugeren har brug for. En wireframe består normalt af forskellige former (såsom æsker, ovaler og diamanter) for at repræsentere indhold, funktionelle og navigationselementer. Disse figurer viser deres placering på siden.

I starten kan det virke som et spild af tid, der skaber grove skitser af en side. En trådramme er vigtig for at få dine brugere til at fokusere på vigtighedselementet på din side. Oprettelse af en grov skitse af en side uden fancy visuelle elementer skifter brugerens opmærksomhed på vigtige elementer som dimensionering, layout og placering af dine sidekomponenter. Vi vil begynde at få en bedre forståelse af, hvad klienten virkelig ønsker og har brug for ud af softwaren, når brugeren begynder at fokusere på de vigtige elementer på en side. Oprettelse af en ledningsramme gør det muligt for dig og dine brugere at samarbejde effektivt og identificere potentielle designproblemer tidligt.

Kom i gang med blyant

Download blyant fra blyants tilføjes side. Når du har installeret blyant, er den tilgængelig fra 'Værktøjer'> 'Pencil Sketching'.

Sådan ser Brizzly ud. Det er en smuk cool webapplikation, der aggregerer din Facebook og Twitter på en enkelt side.

Dette er slutresultatet af trådrammen. De vigtigste former i denne wireframe er rektangler, tekstbokse og faner. Det næste afsnit i artiklen giver et simpelt eksempel på, hvordan man opretter hver form.

Oprettelse af et rektangel

Det første skridt i at skabe en trådrammeform er at trække en form fra menuen 'Shape Collections' på lærredet.

Ændre størrelsen på rektanglet til en passende bredde og højde.

Vi kan tilpasse teksten, grænsen og baggrundsfarven på enhver form i blyant. Højreklik på rektanglet og vælg 'Egenskaber' for at åbne Egenskaber vinduerne. Dette er baggrundsegenskabsskærmen. Indstil rektangel baggrundsfarven til hvid (#FFFFFF).

Klik på fanen 'Border' og juster kantegenskaberne. Indstil kantfarven til sort (# 000000), og skift grænsevægten til 1.

Skærmen til tekstegenskaber lader os tilpasse skrifttypen, størrelsen, stilen, vægten, farven, lysstyrken og opaciteten af ​​teksten.

Oprettelse af faner

Hjemmet, udkastet, billedfanerne er tre faner, der er stablet oven på hinanden. Træk tre 'Tabs Panel' i rektanglet. Ændre størrelsen på hver fane, så hver fane viser side om side.

Åbn skærmbilledet for tekstegenskaber for at justere skrifttypens farve på fanen 'Billeder' og 'Udkast'. Sæt den til Grå (# 989898).

Oprettelse af tekst

Træk 'Text' -formen på lærredet for at oprette hver af menuerne. Vi kan justere tekstudseendet ved at få adgang til vinduet med tekstegenskaber.

Nyttige tips til at ændre farve

Farve er en af ​​de vigtigste elementer i at levere en behagelig wireframe. Den mest præcise måde at ændre farve på en form på er ved at angive farvens HTML-kode. At finde ud af HTML-koden for en bestemt farve kan være svært. Vi kan bruge HTML color cheat sheet fra w3cschools.com for at finde den rigtige HTML kode for en bestemt farve.

Vi kan også lide at bruge colorzilla til at vælge farver fra skærmen og bruge den i blyant. Klik på eye drop icon i nederste venstre hjørne af Firefox for at vælge farve på skærmen. Vi kan også åbne ColorZillas farvevælger ved at dobbeltklikke på øjendråbeikonet. Du skal bare kopiere indsæt hex-koden i blyantens farve-HTML-kode.

Konklusion

Blyant er nemt at bruge wireframing værktøj. Pencil integration med Firefox gør det muligt for os at bruge andre Firefox plugin til at hjælpe med at skabe en bedre wireframe

Links
Download blyant
Download Colorzilla
W3C HTML Color Cheat Sheet