Gebruik Firefox om eenvoudige testmodellen te maken

Pencil is een wireframing-tool die we kunnen gebruiken om een mock-up van de gebruikersinterface van onze applicatie te schetsen. Het mooie van Pencil is dat het licht van gewicht is, gemakkelijk te gebruiken en strak geïntegreerd is met Firefox. Bovendien is het een gratis opensource-applicatie! Aan het einde van het artikel geven we je een eenvoudige demo over hoe je Pencil kunt gebruiken om een Brizzly-achtig wireframe te maken.

Waarom maken we wireframes ?

Een draadmodel is een schets van een idee voor een paginaopmaak. Een draadmodel concentreert zich op het informatieontwerp van een pagina om ervoor te zorgen dat het ontwerp past in wat de gebruiker nodig heeft. Een draadframe bestaat meestal uit verschillende vormen (zoals vakken, ovalen en ruiten) om inhoud, functionele en navigatie-elementen te vertegenwoordigen. Deze vormen worden weergegeven op de pagina.

In eerste instantie lijkt het een verspilling van tijd om ruwe schetsen van een pagina te maken. Een draadframe is belangrijk om ervoor te zorgen dat uw gebruikers zich concentreren op het belangrijkheidselement op uw pagina. Het maken van een ruwe schets van een pagina, zonder mooie visuele elementen, verschuift de aandacht van de gebruiker naar belangrijke elementen, zoals de grootte, indeling en plaatsing van uw paginaonderdelen. We zullen beginnen om een beter begrip te krijgen van wat de cliënt echt wil en nodig heeft uit de software wanneer de gebruiker zich gaat concentreren op de belangrijke elementen van een pagina. Door een draadframe te maken, kunnen u en uw gebruikers effectief samenwerken en een mogelijk ontwerpprobleem vroegtijdig identificeren.

Aan de slag met potlood

Download Pencil from Pencil's add-ons pagina. Zodra je Pencil hebt geïnstalleerd, is het toegankelijk via 'Tools'> 'Pencil Sketching'.

Dit is hoe Brizzly eruit ziet. Het is een vrij coole webtoepassing die uw Facebook en Twitter verzamelt binnen een enkele pagina.

Dit is het eindresultaat van het draadframe. De hoofdvormen in dit draadframe zijn, rechthoeken, tekstvakken en tabbladen. In het volgende gedeelte van het artikel wordt een eenvoudig voorbeeld gegeven van het maken van elke vorm.

Een rechthoek maken

De eerste stap om een draadframe-vorm te maken, is door een vorm uit het menu 'Vormverzamelingen' naar het canvas te slepen.

Wijzig de grootte van de rechthoek in een geschikte breedte en hoogte.

We kunnen de tekst, rand en achtergrondkleur van elke vorm in potlood aanpassen. Klik met de rechtermuisknop op de rechthoek en selecteer 'Eigenschappen' om het venster Eigenschappen te openen. Dit is het achtergrond eigenschappen scherm. Stel de achtergrondkleur in Rectangle in op wit (#FFFFFF).

Klik op het tabblad 'Rand' en pas de randeigenschappen aan. Stel de randkleur in op zwart (# 000000) en verander het grensgewicht in 1.

Op het scherm met teksteigenschappen kunnen we het lettertype, de grootte, de stijl, het gewicht, de kleur, de helderheid en de dekking van de tekst aanpassen.

Tabbladen maken

De tabbladen Thuis, Concept en Afbeelding zijn drie tabbladen die op elkaar zijn gestapeld. Sleep drie 'tabbladen' naar de rechthoek. Wijzig de grootte van elk tabblad zodat elk tabblad naast elkaar wordt weergegeven.

Open het scherm met teksteigenschappen om de lettertypekleur van het tabblad 'Afbeeldingen' en 'Concept' aan te passen. Zet het op grijs (# 989898).

Tekst maken

Sleep de vorm 'Tekst' naar het canvas om elk menu te maken. We kunnen het uiterlijk van de tekst aanpassen door het venster met teksteigenschappen te openen.

Handige tips voor het veranderen van kleur

Kleur is een van de meest essentiële onderdelen bij het leveren van een aangenaam draadframe. De meest precieze manier om de kleur van een vorm te wijzigen, is door de HTML-code van de kleur op te geven. Het uitzoeken van de HTML-code voor een bepaalde kleur kan moeilijk zijn. We kunnen HTML Color Cheat Sheet van w3cschools.com gebruiken om de juiste HTML-code op te zoeken voor een bepaalde kleur.

We gebruiken colorzilla ook graag om kleuren uit het scherm te kiezen en in potlood te gebruiken. Klik op het oogdruppelpictogram in de linkerbenedenhoek van Firefox om de kleur op het scherm te kiezen. We kunnen ook ColorZilla's kleurkiezer openen door te dubbelklikken op het oogdruppelpictogram. Kopieer gewoon de Hex-code in de HTML-code van Potlood in kleur.

Conclusie

Potlood is eenvoudig te gebruiken wireframing tool. Dankzij potloodintegratie met Firefox kunnen we andere Firefox-plug-ins gebruiken om een beter draadmodel te maken

Links
Potlood downloaden
Colorzilla downloaden
W3C HTML Color Cheat Sheet