använder Firefox för att skapa enkla prototyper

Pencil är en wireframing verktyg som vi kan använda för att skissa en mock upp av vår ansökan användargränssnitt. Det fina med om Pencil är att det är lätt, enkel att använda, och tätt integrerad med Firefox. Ovanpå det alla dess en fri öppen källkod ansökan! I slutet av artikeln kommer vi att ge dig en enkel demo på hur man använder penna för att skapa en Brizzly som trådmodell.

En wireframe är en skiss av en sida layout idea.A wireframe fokuserar på informationsdesign på en sida för att säkerställa att konstruktionen passar in vad användaren behöver. En wireframe består vanligen av olika former (t.ex. lådor, ovaler och diamanter) att representera innehåll, funktionella och navigeringselement. Dessa former visar deras placering på sidan.

Till en början kan det verka som ett slöseri med tid på att skapa skisser på en sida. En trådramen är viktigt att få användarna att fokusera på vikten element på din sida. Skapa en grov skiss av en sida, utan snygga visuella element, flytta användarens uppmärksamhet till viktiga faktorer som storlek, layout och placering på sidan komponenter. Vi kommer att börja få en bättre förståelse för vad kunden verkligen vill ha och behöver ur programmet när användaren börjar fokusera på viktiga delar av en sida. Skapa en tråd ram låter dig och dina användare samarbeta effektivt och identifiera potentiella konstruktionsproblem tidigt.

Hämta Pencil från Pencil add ons sidan. När du har installerat penna, är den tillgänglig från “Verktyg”> “pennskiss”.

Detta är vad Brizzly ser ut. Det är en ganska cool webbapplikation som samlar din Facebook och Twitter inom en enda sida.

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

Det första steget för att skapa en tråd ramform är att dra en form från “Shape samlingar meny på duken.

Ändra storlek på rektangeln till en lämplig bredd och höjd.

Vi kan skräddarsy texten, gränsen, och bakgrundsfärg av någon form med blyerts. Högerklicka på rektangeln och välj “Egenskaper” för att öppna Egenskaper fönstren. Detta är skärmen bakgrundsegenskaper. Ställ rektangelbakgrundsfärgen till vit (#FFFFFF).

Hemmet, utkast, bild flikar är tre flikar som är staplade ovanpå varandra. Dra tre “Flikar Panel” i rektangeln. Ändra storlek på varje flik så att varje flik visar sida vid sida.

Öppna textegenskaper skärmen för att justera teckenfärg för “Bilder” och “Utkast till fliken. Ställ in den till Grey (# 989.898).

Dra “text” form på duken för att skapa varje meny. Vi kan justera text utseende genom att öppna textegenskapsfönstret.

Färg är ett av de mest viktig del i att leverera en tilltalande wireframe. Den mest exakta sättet att ändra färgen på en form är genom att ange färgens HTML-kod. Räkna ut HTML-koden för en viss färg kan vara svårt. Vi kan använda HTML färg fusklapp från w3cschools.com att leta upp rätt HTML-kod för en viss färg.

Vi vill också använda ColorZilla att välja färger från skärmen och använda den med blyerts. Klicka på ikonen pipett på det nedre vänstra hörnet av Firefox för att plocka färg på skärmen. Vi kan också öppna upp ColorZilla färgväljaren genom att dubbelklicka på ikonen ögondroppar. Bara kopiera Hex-kod i Pencil färg HTML-kod och klistra.

Pencil är lätt att använda wireframing verktyg. Penna integration med Firefox gör det möjligt för oss att använda andra Firefox plugin för att bidra till att skapa en bättre trådmodell

Länkar, ladda ner Penna, Hämta ColorZilla, W3C HTML Color lathund

HTML stöder mycket mer än bara de 256 färger du länkade längst ner.

hi Garb

Tack för feedback. Vi hittade två fantastiska webbplatser som ger HTML färgkoder för ett brett spektrum av färgpalett

Html Färgkoder Info, Color Scheme Designer

Mängden is låst i Mars södra polarisen innehåller tillräckligt med vatten för att täcka hela planeten i en ocean 36 fot djup.