Als het gaat om het maken van GUI-prototypen, stroomdiagrammen en andere zakelijke diagrammen, is Microsoft's Visio vaak de beste tool op het Windows-platform. De Mac heeft ook applicaties zoals de uitstekende Axure en OmniGraffle. Als het om Linux gaat, is Evolus Pencil een van de beste om snel en gemakkelijk kwaliteitsafbeeldingen te maken.

Opmerking : Potlood wordt ondersteund in Windows, OSX en Linux. In dit artikel zullen we ons concentreren op de Linux-versie van Pencil.

Installatie

Pencil is niet langer beschikbaar in de Ubuntu-repositories (althans van Raring), maar het is een eenvoudige installatie via DEB-pakket van de website van het project. Installeer door te dubbelklikken op het gedownloade pakket of met de volgende opdracht terminal:

 sudo dpkg -i evoluspencil_2.0.3_all.deb

De enige afhankelijkheid is Firefox, dus als u zich op een systeem bevindt dat dit standaard niet bevat, moet u het installeren (of een GUI-pakketbeheerder gebruiken die de afhankelijkheid voor u afhandelt).

Gebruik

Terwijl je met een programma als GIMP of Krita over het algemeen je eigen grafische stukken moet maken. Potlood biedt u een breed scala aan vormen die u snel naar een pagina kunt slepen en naar wens kunt aanpassen. In het deelvenster links worden beschikbare vormen weergegeven, in groepen zoals 'Common Shapes' (basisvierkanten en cirkels), 'Desktop - GTK-widgets' (als u een Unity- of GNOME-toepassing wilt prototypen) en 'Sketchy' (een van de mijn favoriet voor web-mock-ups, die eruit ziet als een potloodschets). Items in deze groepen kunnen worden gemixt en gekoppeld.

Om een ​​van deze aan de tekening toe te voegen, hoeft u alleen maar op een pagina te klikken en deze naar een pagina te slepen (nieuwe pagina's kunnen worden toegevoegd via de knop "Nieuwe pagina" rechtsboven).

Eenmaal op de pagina kan de grootte worden gewijzigd door een van de hoeken of randen van de vorm te slepen, of via de werkbalkvelden "Locatie en grootte" (handig als u de tekening nodig hebt, zoals een webmodel, om te passen een bepaalde resolutie).

Dubbelklikken op de meeste vormen laat toe om tekst toe te voegen, die kan worden aangepast met uitlijning, lettertype, vet / cursief en puntgrootte met behulp van de werkbalkknoppen in "Tekstformaat".

Mock-up Basics

Ik teken altijd wireframes en andere diagrammen en het basisproces dat ik gebruik is als volgt (met behulp van het voorbeeld van een homepagina voor een website).

Achtergrond

Voor een webpagina begint dit met het browservenster - Het "Window Frame" -item uit de Sketchy-collectie wordt hier eenvoudigheidshalve gebruikt. Om dit te plaatsen op 0px x 0px (dwz linksboven op het scherm), worden de besturingselementen "Locatie en grootte" gebruikt. De onder- en linkerranden worden gesleept zodat het het hele scherm vult.

Een "Box" -vorm wordt helemaal aan de bovenkant toegevoegd om de URL-balk aan te geven ... soms is het plaatsen van dingen precies met de muis moeilijk, maar de pijltjestoetsen kunnen ook worden gebruikt om een ​​vorm te verplaatsen nadat deze is geselecteerd:

Pagina-elementen

Aan de bovenkant van de pagina kan een grote schuifregelaar worden toegevoegd. De "Afbeelding" -vorm wordt gebruikt om de dia aan te duiden, en twee "Schetsmatige Driehoeken" om als voorwaartse en achterwaartse besturing te fungeren. Door tweemaal op een object te klikken, worden de rand- / hoekhandvatten roze, waardoor ze kunnen worden gedraaid:

Ten slotte worden onderaan drie regio's toegevoegd om nieuws, een video en een contactformulier vast te houden (de "Box" -vorm wordt gebruikt om elke regio te schetsen). Het nieuws zal slechts een kop en wat tekst zijn (met behulp van de "Label" -schetsvorm met enkele variërende tekstgroottes), het videoregio wordt gemaakt door een "Sketchy Triangle" in een "Sketchy Circle" binnen een "Box" (dwz een "Play" knop), en de laatste zal een "Label" zijn, vergezeld van drie "Tekstvelden" en een "Knop":

Door de vooraf gemaakte vormen te gebruiken, kun je met tekenprogramma's heel snel (het bovenstaande duurde ongeveer tien minuten) ideeën op een manier illustreren die anderen kunnen begrijpen. Met dit Microsoft Visio-alternatief kun je diagrammen maken die intuïtief en draagbaar zijn (Evolus Pencil zelf is platformonafhankelijk en tekeningen kunnen worden geëxporteerd naar PDF of PNG) om met collega's te delen.