Gebruik Firefox om eenvoudige testmodellen maken

Potlood is een wireframing instrument dat we kunnen gebruiken om een ​​mock-up van de user interface van onze applicatie te schetsen. Het grote ding over het potlood is dat het licht van gewicht, eenvoudig te gebruiken en nauw geïntegreerd met Firefox. Op de top van dit alles is een gratis open source applicatie! Aan het eind van het artikel zullen we u een eenvoudige demo over hoe je het potlood te gebruiken om een ​​Brizzly maken als wireframe geven.

Een wireframe is een schets van een pagina-indeling idea.A draadframe staan ​​de informatiepakketten ontwerp van een pagina zodat het ontwerp past in wat de gebruiker nodig heeft. Een wireframe bestaat meestal uit verschillende vormen (zoals dozen, ovalen, en diamanten) om de inhoud, functionele vertegenwoordigen en navigatie-elementen. Deze vormen toont de plaatsing op de pagina.

Op het eerste gezicht lijkt misschien een verspilling van tijd het creëren van ruwe schetsen van een pagina. Een draad kader is belangrijk om uw gebruikers om zich te concentreren op het belang element op uw pagina. een ruwe schets van een pagina, zonder buitensporige visuele elementen creëren, verleggen de aandacht van de gebruiker om belangrijke elementen, zoals lijmen, lay-out en plaatsing van uw pagina componenten. We zullen beginnen om een ​​beter inzicht te krijgen op wat de klant echt willen en nodig hebben uit de software te krijgen wanneer de gebruiker begint zich te concentreren op de belangrijkste elementen van een pagina. Het creëren van een draad frame laat u en uw gebruikers effectief samen te werken en het identificeren van potentiële ontwerpprobleem vroeg.

Download het potlood van Pencil add ons pagina. Zodra u Pencil installeren, het is te bereiken via ‘Extra’> ‘Pencil Schetsen’.

Dit is wat Brizzly eruit ziet. Het is een vrij koele web-applicatie die uw Facebook en Twitter aggregaten binnen een enkele pagina.

Dit is het eindresultaat van het draadframe. De belangrijkste vormen in dit wireframe zijn, rechthoeken, tekstvakken en tabs. Het volgende deel van het voorwerp zal een eenvoudig voorbeeld te geven hoe elke vorm.

De eerste stap van het creëren van een draad frame vorm is om een ​​vorm van het menu ‘Shape Collections’ slepen op het canvas.

Formaat de rechthoek een geschikte breedte en hoogte.

We kunnen de tekst, de grens, en de achtergrondkleur van elke vorm in Potlood aan te passen. Klik rechts op de rechthoek en selecteer ‘Eigenschappen’ om de Properties ramen open. Dat is de achtergrond eigenschappen scherm. Stel de Rectangle achtergrondkleur op wit (#FFFFFF).

Het huis, ontwerp, foto tabbladen zijn drie tabbladen die worden gestapeld bovenop elkaar. Sleep drie ‘Tabs Panel’ in de rechthoek. Het formaat van elk tabblad, zodat elk tabblad toont naast elkaar.

Open de tekst eigenschappen scherm om het lettertype kleur van de tab ‘Draft’ ‘Pictures’ en aan te passen. Zet hem op Grey (# 989898).

Sleep de ‘Tekst’ vorm op het doek aan elk van menu te creëren. We kunnen de tekst uiterlijk aan te passen door de toegang tot het venster tekst eigenschappen.

Kleur is een van de meest essentiële deel een aangenaam op draadframe. De meest nauwkeurige manier om de kleur van een vorm te veranderen is door het opgeven van de kleur van de HTML-code. Het uitzoeken van de HTML-code voor een bepaalde kleur kan moeilijk zijn. We kunnen HTML kleur cheat sheet te gebruiken van w3cschools.com te zoeken van de juiste HTML-code voor een bepaalde kleur.

Wij willen ook ColorZilla gebruiken om kleuren te kiezen van het scherm en gebruik het in Potlood. Klik op het pipet in de linkerbenedenhoek van Firefox om kleur op het scherm te halen. We kunnen ook openstellen ColorZilla’s kleurenkiezer door te dubbelklikken op het pictogram van oogdruppels. Kopieer plak de Hex code in het Potlood van de kleur HTML-code.

Potlood is makkelijk te wireframing tool te gebruiken. Potlood integratie met Firefox maakt het voor ons mogelijk om andere Firefox plugin gebruiken om te helpen creëren van een betere wireframe

Links; Download Potlood, Download ColorZilla; W3C HTML Color Cheat Sheet

HTML ondersteunt veel meer dan alleen de 256 kleuren u verbonden onderaan.

Hi Garb

Bedankt voor de feedback. We hebben twee fantastische websites die HTML kleurcodes geeft voor een breed scala van kleurenpalet

Html kleurcodes Info; Color Scheme Designer

De hoeveelheid ijs opgesloten in Mars ‘zuidelijke ijskap bevat voldoende water om de hele planeet bedekken in een oceaan 36 voet diep.