Blyant er et wireframing-værktøj, som vi kan bruge til at skitsere en mock up af vores applikations brugergrænseflade. Den gode ting ved Pencil er, at den er let, nem at bruge og tæt integreret med Firefox. Oven på det hele er det en gratis open source-applikation! I slutningen af artiklen giver vi dig en simpel demo om, hvordan du bruger blyant til at skabe en Brizzly-lignende trådramme.
Hvorfor opretter vi trådrammer?
En wireframe er en skitse af en side-layoutide. En wireframe fokuserer på informationsdesignet på en side for at sikre, at designet passer ind i det, som brugeren har brug for. En trådramme består normalt af forskellige former (som kasser, ovaler og diamanter) til at repræsentere indhold, funktionelle og navigationselementer. Disse figurer viser deres placering på siden.
Først kan det virke som spild af tid på at skabe 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 smarte visuelle elementer, skub brugerens opmærksomhed på vigtige elementer såsom størrelse, layout og placering af dine sidekomponenter. Vi begynder at få en bedre forståelse af, hvad klienten virkelig ønsker og har brug for af softwaren, når brugeren begynder at fokusere på de vigtige elementer på en side. Ved at oprette en trådramme kan du og dine brugere samarbejde effektivt og identificere potentielt designproblemer tidligt.
Kom godt i gang med blyant
Download blyant fra Pencils tilføjelsesside. Når du har installeret Pencil, er den tilgængelig fra 'Tools'> 'Pencil Sketching'.
Sådan ser Brizzly ud. Det er en ret sej webapplikation, der samler din Facebook og Twitter inden for en enkelt side.
Dette er slutresultatet af trådrammen. Hovedformerne i denne trådramme er rektangler, tekstfelter og faner. Det næste afsnit af artiklen giver et simpelt eksempel på, hvordan man opretter hver figur.
Oprettelse af et rektangel
Det første trin i oprettelse af en trådrammeform er at trække en figur fra menuen 'Formsamlinger' til lærredet.
Tilpas rektanglet til en passende bredde og højde.
Vi kan tilpasse tekst, kant og baggrundsfarve af enhver form i blyant. Højreklik på rektanglet, og vælg 'Egenskaber' for at åbne vinduerne Egenskaber. Dette er baggrundsegenskabsskærmen. Indstil rektangelbaggrundsfarven til hvid (#FFFFFF).
Klik på fanen 'Kant', og juster kantegenskaberne. Indstil kantfarven til sort (# 000000), og skift kantvægten til 1.
Tekstegenskabsskærmen giver os mulighed for at tilpasse skrifttype, størrelse, stil, vægt, farve, lysstyrke og opacitet af teksten.
Oprettelse af faner
Hjem-, kladde-, billedfaner er tre faner, der er stablet oven på hinanden. Træk tre 'Fanepanel' ind i rektanglet. Tilpas størrelsen på hver fane, så hver fane vises side om side.
Åbn skærmbilledet med tekstegenskaber for at justere skrifttypefarven på fanen 'Billeder' og 'Kladde'. Indstil den til Grå (# 989898).
Oprettelse af tekst
Træk formen 'Tekst' på lærredet for at oprette hver menu. Vi kan justere tekstudseendet ved at åbne vinduet med tekstegenskaber.
Nyttige tip til ændring af farve
Farve er en af de mest vigtige dele i leveringen af en behagelig trådramme. Den mest præcise måde at ændre en forms farve er ved at angive farvenes HTML-kode. At finde ud af HTML-koden for en bestemt farve kan være vanskelig. Vi kan bruge HTML-snyderark fra w3cschools.com til at slå den rigtige HTML-kode op for en bestemt farve.
Vi kan også godt lide at bruge colorzilla til at vælge farver fra skærmen og bruge den i blyant. Klik på ikonet for øjendråber 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. Kopier bare indsæt Hex-koden i blyantens HTML-kode.
Konklusion
Blyant er nemt at bruge wireframing værktøj. Blyantintegration med Firefox gør det muligt for os at bruge et andet Firefox-plugin til at skabe en bedre wireframe
Links
Download blyant
Download Colorzilla
W3C HTML Color Cheat Sheet
