Använd Firefox för att skapa enkla Mockups

Blyertspenna är ett trådverktyg som vi kan använda för att skissera en mock up av vår applikations användargränssnitt. Den fantastiska sak om penna är att den är lätt, enkel att använda och tätt integrerad med Firefox. Ovanpå det är allt en gratis öppen källansökan! I slutet av artikeln kommer vi att ge dig en enkel demonstration om hur du använder blyertspenna för att skapa en Brizzly som wireframe.

Varför skapar vi wireframes ?

En wireframe är en skiss av en sidlayoutidé. En wireframe fokuserar på informationsdesignen på en sida för att säkerställa att designen passar in i vad användaren behöver. En wireframe består vanligtvis av olika former (t.ex. lådor, ovalar och diamanter) för att representera innehåll, funktionella och navigeringselement. Dessa former visar placeringen på sidan.

Först kan det verka som ett slöseri med tid som skapar grova skisser på en sida. En trådram är viktigt för att få dina användare att fokusera på viktelementet på din sida. Skapa en grov skiss på en sida, utan fancy visuella element, skifta användarens uppmärksamhet åt viktiga element som dimensionering, layout och placering av dina sidkomponenter. Vi kommer att börja förstå vad kunden verkligen vill ha och behöver ut av programvaran när användaren börjar fokusera på viktiga delar av en sida. Genom att skapa en trådram kan du och dina användare samarbeta effektivt och identifiera potentiellt designproblem tidigt.

Komma igång med penna

Ladda ner Pencil från Pencils tilläggssida. När du har installerat Pencil, är den tillgänglig från "Verktyg"> "Pencil Sketching".

Så ser Brizzly ut. Det är en ganska cool webbapplikation som samlar din Facebook och Twitter på en enda sida.

Detta är slutresultatet av trådramen. De huvudsakliga formerna i denna trådram är rektanglar, textrutor och flikar. Nästa avsnitt i artikeln kommer att ge ett enkelt exempel hur man skapar varje form.

Skapa en rektangel

Det första steget att skapa en trådramform är att dra en form från menyn "Shape Collections" på duken.

Ändra rektangeln till lämplig bredd och höjd.

Vi kan anpassa texten, gränsen och bakgrundsfärgen av någon form i penna. Högerklicka på rektangeln och välj Egenskaper för att öppna Egenskaper-fönstren. Detta är skärmens bakgrundsegenskaper. Ställ in bakgrundsfärgen för rektangel till vit (#FFFFFF).

Klicka på fliken "Border" och justera kantegenskaperna. Ställ in gränsvärdet till svart (# 000000) och ändra gränsvikt till 1.

Skärmen för textegenskaper låter oss anpassa typsnittet, storleken, stilen, vikten, färgen, ljusstyrkan och opaciteten i texten.

Skapa flikar

Hemmet, utkastet, bildflikarna är tre flikar som staplas ovanpå varandra. Dra tre "Tabs Panel" i rektangeln. Ändra storlek på varje flik så att varje flik visar sida vid sida.

Öppna skärmen för textegenskaper för att justera teckensfärgen på fliken "Bilder" och "Utkast". Ställ den på Grå (# 989898).

Skapa text

Dra "Text" -formen på duken för att skapa varje meny. Vi kan justera textutseendet genom att öppna textegenskapsfönstret.

Användbara tips för att ändra färg

Färg är en av de viktigaste delarna i att leverera en behaglig trådram. Det mest exakta sättet att ändra färg på en form är att ange färgens HTML-kod. Att räkna ut HTML-koden för en viss färg kan vara svår. Vi kan använda HTML Color Cheat Sheet från w3cschools.com för att leta upp rätt HTML-kod för en viss färg.

Vi gillar också att använda colorzilla för att välja färger från skärmen och använda den i penna. Klicka på ikonen för ögondroppar i nedre vänstra hörnet av Firefox för att välja färg på skärmen. Vi kan också öppna ColorZillas färgplockare genom att dubbelklicka på ögondroppsikonen. Bara kopiera klistra in Hex-koden i Pencils färg HTML-kod.

Slutsats

Penna är lätt att använda trådverktyg. Pencil integration med Firefox gör det möjligt för oss att använda andra Firefox plugin för att hjälpa till att skapa en bättre wireframe

länkar
Ladda ner penna
Hämta Colorzilla
W3C HTML Color Cheat Sheet