När det gäller att producera GUI-prototyper, flödesschema och andra affärsdisplayer är Microsofts Visio ofta go-to-verktyget på Windows-plattformen. Macen har också applikationer som den perfekta Axure och OmniGraffle. När det gäller Linux är Evolus Pencil ett av de bästa för att snabbt och enkelt skapa kvalitetsbilder.

Obs! Penna stöds i Windows, OSX och Linux. I den här artikeln kommer vi att fokusera på Linux-versionen av Pencil.

Installation

Penna är inte längre tillgänglig i Ubuntu-repositorierna (från Raring, åtminstone), men det är en enkel installation via DEB-paketet från projektets hemsida. Installera genom att dubbelklicka på det nedladdade paketet eller med följande terminalkommando:

 sudo dpkg -i evoluspencil_2.0.3_all.deb

Det enda beroendet är Firefox, så om du är på ett system som inte innehåller det här som standard måste du installera det (eller använd en GUI-pakethanterare, som hanterar beroendet för dig).

Användande

Med ett program som GIMP eller Krita behöver du generellt skapa egna grafiska bitar. Penna ger dig ett brett utbud av former som du snabbt kan dra på en sida och ändra efter dina önskemål. I rutan till vänster visas tillgängliga former, i grupper som "Vanliga former" (grundläggande rutor och cirklar), "Skrivbord - GTK Widgets" (om du vill prototypa en enhet eller GNOME-applikation) och "Sketchy" (en av min favorit för webmock-ups, som ser ut som en penna skiss). Objekt i dessa grupper kan blandas och matchas.

För att lägga till en av dessa på ritningen klickar du enkelt och dra den på en sida (nya sidor kan läggas till via knappen "Ny sida" längst upp till höger).

En gång på sidan kan storleken ändras genom att dra en av hörnen eller gränsarna till formen eller via fältet "Plats och storlek" i verktygsfältet (användbart om du behöver ritningen, till exempel en webmock-up, som passar en viss upplösning).

Dubbelklicka på de flesta former gör det möjligt att lägga till text, som kan anpassas med justering, teckensnitt, fetstil / kursiv och punktstorlek med hjälp av knapparna "Textformat".

Mock-up Basics

Jag ritar hela tiden trådramar och andra diagram, och den grundläggande processen jag använder är enligt följande (med exempel på en hemsida för en webbplats).

Bakgrund

För en webbsida börjar detta med webbläsarfönstret - "Fönsterramen" från Sketchy-samlingen används här för enkelhetens skull. För att placera detta vid 0px x 0px (dvs överst till vänster på skärmen) används kontrollerna "Plats och storlek". Botten och vänstra kanterna dras så det fyller hela skärmen.

En "Box" -form läggs hela vägen överst för att indikera URL-fältet ... Det är svårt att placera saker exakt med musen, men piltangenterna kan också användas för att flytta en form när den väljs ut:

Sidelement

En stor reglage kan läggas till sidan högst upp. "Bild" -formen används för att indikera bilden och två "Sketchy Triangles" för att fungera som fram- och bakkontroller. Om du klickar två gånger på ett objekt blir kant- / hörnhanteringen rosa, vilket gör att de kan roteras:

Slutligen läggs tre regioner längst ner för att hålla nyheter, en video och en kontaktformulär ("Box" -formen används för att skissera varje region). Nyheten kommer bara att vara en rubrik och en del text (med "Label" Sketchy-form med lite varierande textstorlekar), videoområdet skapas genom att man släpper en sketchy triangle i en "sketchy circle" inom en "box" (dvs. en "Play" -knapp), och den sista kommer att vara en "Etikett" åtföljd av tre "Textfält" och en "Button":

Genom att använda de färdiga formerna gör ritningsprogrammen dig mycket snabbt (ovan tog cirka tio minuter) illustrera idéer på ett sätt som andra kan förstå. Detta Microsoft Visio-alternativ gör att du kan skapa diagram på ett intuitivt och bärbart sätt (Evolus Pencil själv är plattform, och teckningar kan exporteras till PDF eller PNG) sätt att dela med kollegor.