23Jul
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 open source-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 te zorgen dat het ontwerp past bij 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 tonen hun plaatsing op de pagina.
In het begin 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 fancy visuele elementen, verschuift de aandacht van de gebruiker naar belangrijke elementen zoals de grootte, lay-out en plaatsing van uw paginaonderdelen. We zullen meer inzicht krijgen in wat de klant 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 herkennen.
Aan de slag met een potlood
Download Pencil from add-on-pagina van Pencil. Zodra u Pencil hebt geïnstalleerd, is het toegankelijk via 'Extra' & gt;'Pencil Sketching'.
Zo ziet Brizzly eruit. Het is een vrij coole webtoepassing die je 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 van het maken van een draadframe-vorm 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 de rechthoek 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.
In 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 Home, concept, 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. Stel het in 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 voor 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 deze in Pencil 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. Potloodintegratie met Firefox maakt het voor ons mogelijk om andere Firefox-plug-ins te gebruiken om een beter draadframe te maken.
Links
Download Potlood
Download Colorzilla
W3C HTML Kleur Cheat Sheet