23Jul
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. Udover 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-lignende 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) til at repræsentere indhold, funktionelle og navigationselementer. Disse figurer viser deres placering på siden.
I første omgang 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 vil have og brug for ud af softwaren, når brugeren begynder at fokusere på de vigtige elementer på en side. Oprettelse af en ledningsramme giver dig og dine brugere mulighed for at samarbejde effektivt og identificere potentielt design problem tidligt.
Kom godt 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' & gt;'Pencil Sketching'.
Dette ser Brizzly ud. Det er en smuk cool webapplikation, der samler 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 en rektangel
Det første trin for at oprette 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 af 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 giver os mulighed for at tilpasse skrifttypens type, størrelse, stil, vægt, farve, lysstyrke og opacitet.
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 til 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 ændring af 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åbikonet. Du skal blot kopiere indsæt hex-koden i blyantens farve-HTML-kode.
Konklusion
Pencil 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 Pencil
Download Colorzilla
W3C HTML Farve Cheat Sheet