Pencil är ett trådlöst inramningsverktyg som vi kan använda för att skissa på en mock up av vår applikations användargränssnitt. Det fantastiska med Pencil är att den är lätt, enkel att använda och tätt integrerad med Firefox. Ovanpå allt är det en gratis applikation med öppen källkod! I slutet av artikeln ger vi dig en enkel demo om hur du använder Pencil för att skapa en Brizzly-liknande trådram.
Varför skapar vi trådramar?
En trådram är en skiss av en sidlayoutidé. En trådram fokuserar på informationsdesignen på en sida för att säkerställa att designen passar in i vad användaren behöver. En trådram består vanligtvis av olika former (som lådor, ovaler och diamanter) för att representera innehåll, funktionella och navigationselement. Dessa former visar placeringen på sidan.
Först kan det tyckas slöseri med att skapa grova skisser av en sida. En trådram är viktig för att få dina användare att fokusera på viktighetselementet på din sida. Skapa en grov skiss av en sida utan snygga visuella element, flytta användarens uppmärksamhet till viktiga element som storlek, layout och placering av dina sidkomponenter. Vi kommer att börja få en bättre förståelse för vad kunden verkligen vill ha och behöver av programvaran när användaren börjar fokusera på de viktiga delarna på en sida. Genom att skapa en trådram kan du och dina användare samarbeta effektivt och identifiera potentiella 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 'Tools'> 'Pencil Sketching'.
Så här 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. Huvudformerna i denna trådram är rektanglar, textrutor och flikar. Nästa avsnitt i artikeln ger ett enkelt exempel hur man skapar varje form.
Skapa en rektangel
Det första steget i att skapa en trådramform är att dra en form från menyn "Formsamlingar" till duken.
Ändra storlek på rektangeln till lämplig bredd och höjd.
Vi kan skräddarsy text, kant och bakgrundsfärg för vilken form som helst i penna. Högerklicka på rektangeln och välj 'Egenskaper' för att öppna fönstren Egenskaper. Detta är bakgrundsegenskapsskärmen. Ställ in rektangelns bakgrundsfärg till vit (#FFFFFF).
Klicka på fliken ”Border” och justera gränsegenskaperna. Ställ in kantfärgen på svart (# 000000) och ändra kantvikten till 1.
På skärmen för textegenskaper kan vi anpassa typsnitt, storlek, stil, vikt, färg, ljusstyrka och opacitet för texten.
Skapa flikar
Hemflikar, utkast, bildflikar är tre flikar som är staplade ovanpå varandra. Dra tre ”Tabs Panel” in i rektangeln. Ändra storlek på varje flik så att varje flik visas sida vid sida.
Öppna skärmen för textegenskaper för att justera teckensnittsfärgen på fliken 'Bilder' och 'Utkast'. Ställ in den på Grå (# 989898).
Skapa text
Dra "Text" -formen på duken för att skapa varje meny. Vi kan justera textens utseende 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 tilltalande 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årt. Vi kan använda HTML-färgfuskark 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 Pencil. Klicka på ögondroppsikonen längst ned till vänster i Firefox för att välja färg på skärmen. Vi kan också öppna ColorZillas färgväljare genom att dubbelklicka på ögondroppsikonen. Kopiera bara klistra in Hex-koden i Pencils HTML-kod i färg.
Slutsats
Pencil är enkelt att använda trådramningsverktyg. Pennintegration med Firefox gör det möjligt för oss att använda ett annat Firefox-plugin för att skapa en bättre trådram
Länkar
Ladda ner Pencil
Ladda ner Colorzilla
W3C HTML Color Cheat Sheet
