Wireframes gebruiken om uw ontwikkelingsproces te stroomlijnen

Een wireframe maken is een van de eerste stappen die u moet nemen voordat u een website gaat ontwerpen.

Een draadmodel helpt u de elementen en inhoud van een website te organiseren en te vereenvoudigen en is een essentieel hulpmiddel in het ontwikkelingsproces.

Een wireframe is in feite een visuele weergave van de contentlay-out in een websiteontwerp .

Het draadmodel fungeert als een prototype dat de plaatsing van paginafuncties weergeeft, zoals koptekst, voettekst, inhoud, zijbalken en navigatie.

Het specificeert ook de plaatsing van de elementen binnen deze inhoudsgebieden. Als u een website wilt ontwikkelen die nauwkeurig overeenkomt met de vereisten van de klant en projectrevisies minimaliseert, houdt wireframing u op het goede spoor.

Voordelen van Wireframing

Het creëren van een wireframe geeft de klant, ontwikkelaar en ontwerper de gelegenheid om kritisch naar de structuur van de website te kijken en stelt hen in staat om gemakkelijk revisies te maken in een vroeg stadium van het proces.

Wireframing biedt de volgende belangrijke voordelen:

Het geeft de klant een vroeg, close-up beeld van het ontwerp van de site (of herontwerp).
Het kan de ontwerper inspireren, wat resulteert in een vloeiender maakproces.
Het geeft de ontwikkelaar een duidelijk beeld van de elementen die ze moeten coderen.
Het maakt de call-to-action op elke pagina duidelijk.
Het is eenvoudig aan te passen en kan de lay-out van vele delen van de website weergeven.

Tools voor draadframe-ontwikkeling

Je hebt veel tools om uit te kiezen bij het maken van een wireframe:

Handschetsen op papier is altijd een goed uitgangspunt voor elke ontwerper. Het biedt een snelle en gemakkelijke manier om te focussen en te organiseren. Als je heel precies bent met schetsen, kun je dit zelfs gebruiken als je laatste draadframe. (Zie figuur 1.)
Flowchart- of mindmapping-software , zoals Visio . Deze software-opties worden geleverd met voorverpakte elementen waarmee u gemakkelijk flowchart-weergaven van uw draadframe kunt maken.
Web prototyping software , zoals Gliffy of Balsamiq . Dergelijke tools zijn speciaal gemaakt met het doel wireframes te genereren en ze hebben gebruiksvriendelijke prototypingmogelijkheden.
Grafische software , zoals Photoshop of Illustrator. Het voordeel van het gebruik van deze tools is dat het wireframe vervolgens direct kan worden omgezet in een grafisch mockup van het ontwerp van de website; het nadeel is echter dat je alle elementen met de hand moet maken.
(X) HTML- wireframes lijken bijna op echte sites zelf. U kunt het draadframe met code indelen voordat u de stijlen toepast, of u kunt een volledig opgemaakte, getrouwe lay-out maken die veel op een definitief ontwerp lijkt. (Zie figuur 2.)

Uiteindelijk moet de ontwikkelaar of ontwerper de tool kiezen die zij verkiezen. Persoonlijk gebruik ik Photoshop omdat ik hou van de manier waarop het het proces organiseert en hoe gemakkelijk ik het bestand in een mockup kan converteren.

Wireframe voorbeeld

Het detailniveau in een draadframe is afhankelijk van verschillende factoren, waaronder: hoeveel richting en inhoud de client heeft opgegeven, hoe complex de inhoud is, hoe ver je bent in het proces en hoeveel details je wilt dat deze bevat .

Hier zijn voorbeelden van wireframes die zijn gemaakt met verschillende hulpmiddelen en die verschillende niveaus van detail en kleur hebben:

Figuur 1: Deze eenvoudige wireframe-schets voor de Coastal Capital Partners-website (nu omgedoopt tot Broad Reach Retail Partners) werd gebruikt om grafische mockups en uiteindelijk het definitieve ontwerp te maken. Door Mike Rohde .

Figuur 2: Zeer low-fidel HTML-hiërarchief. Handig om aan te tonen hoe een site eruit zal zien voordat de styling wordt toegevoegd. Zeer nuttig voor gebruikers met een visuele beperking.

Figuur 3: Low-fidelity draadframe voor de Embrace Pet Community , door Jesse Bennett-Chamberlain van 31Three .

Figuur 4: Een voorlopige mockup van een sociale conferentietool waarop is voortgebouwd TiddlyWiki voor gebruik bij Le Web 3. De begeleidende notities zijn bij tiddleleweb.tiddlyspot.com . Wireframe door Phil Hawksworth.

Figuur 5: Deze is gebaseerd op geavanceerd gebruik van een blogpublicatiesysteem (WordPress). Door Mattheiu Mingassson of Activeside Internet Strategies and Consulting .

Figuur 6: Een draadframe voor de Embrace Pet Community , door Jesse Bennett-Chamberlain van 31Three .

Figuur 7: Een draadframe met kleur en afbeeldingen. Auteurspagina wireframe door Bokhandel .

Figuur 8: Nog een draadframe met kleur. Door Mattheiu Mingassson van Activeside internetstrategieën en consulting .

Beste praktijken

Om optimale resultaten te bereiken, zijn hier een aantal belangrijke zaken waarmee u rekening moet houden bij het ontwikkelen van een draadframe:

Eenvoud. De sleutel is om het eenvoudig genoeg te houden om duidelijk te zijn voor de klant en om flexibel te zijn voor de ontwerper, maar gedetailleerd genoeg om de programmeur te begeleiden. Zoals gezegd, zou u een high-fidelity wireframe kunnen maken, maar dit vroeg in het ontwikkelingsproces doen kan verwarrend zijn voor de klant, die het kan verwarren met een definitieve trekking.
Werk in grijstinten. Wanneer u elementen voor een draadframe maakt, kunt u het best in grijstinten werken, zodat u zich kunt concentreren op de lay-out zonder afgeleid te worden door het ontwerp. Als u een kleurenlogo hebt gekregen, converteert u dit ook naar grijstinten. Om verschillende elementen te onderscheiden en te categoriseren, toon je vormen en contouren in verschillende grijstinten.
Gebruik wireframes in combinatie met een sitemap. Een wireframe is een visuele weergave van een goede sitemap, geen vervanging. Een sitemap is een handig hulpmiddel voor elke website en zou zeker nuttig zijn om te verwijzen naar tijdens het ontwikkelingsproces.
Focus op het gewenste resultaat. Zorg dat u goed begrijpt hoe uw klant wil dat gebruikers op de pagina reageren voordat ze uw wireframe maken. De calls-to-action zouden heel duidelijk moeten zijn, simpelweg door naar het wireframe te kijken.
Maak een full-sized wireframe als het voor een website is. Dit geeft de meest nauwkeurige weergave van de daadwerkelijke pagina.
Plan de elementen door de inhoud van tevoren te beveiligen. In het beste geval heeft uw klant u al de elementen geleverd die op elke pagina moeten verschijnen, zoals het logo, advertenties, Flash- of videospelers, functies, navigatiesecties en zijbalk-, kop- en voetteksten. Als u deze informatie nog niet hebt, spreek dan met uw klant en verkrijg (of maak) een sitemap aan. Als u bestaande elementen opnieuw ontwerpt, kunt u deze verzamelen aan de hand van een zorgvuldige beoordeling van de website. Zorg er in dit scenario voor dat u eerst met uw klant bevestigt dat u geen elementen hoeft toe te voegen of te verwijderen, want als u geen duidelijk beeld hebt van hun verwachtingen, vertraagt u het proces.

Grijsschaal versus kleur

Bij het maken van een draadframe helpt het werken in grijstinten om de focus op de primaire functie van het proces te houden , namelijk het finaliseren van de lay-out en niet het ontwerp (zie Figuur 3). Een ander risico van werken in kleur is dat de klant het draadframe kan verwarren met de uiteindelijke mockup.

Kleur kan echter handig zijn bij het weergeven van de locatie van elke call-to-action. Omdat een pagina meerdere oproepen tot actie kan bevatten, is het belangrijk om deze prioriteiten te stellen. Wireframes kunnen helpen bij het bepalen van welke call-to-action het oog van de gebruiker het eerst moet worden getekend.

Ik heb recent aan een project gewerkt met een zeer levendig logo, dat in dat geval de primaire oproep tot actie was omdat het een nieuw gelanceerd tijdschrift was.

Wanneer u kleur gebruikt, kunt u gemakkelijker zien of bepaalde elementen de primaire call-to-action overweldigen. Dit proces valt nog steeds onder het bereik van wireframing, in plaats van mockup-ontwerp, omdat elementlocaties nog steeds worden bepaald.

Kleur kan geleidelijk aan het draadframe worden toegevoegd naarmate het project vordert , wat efficiënter is dan door te gaan met mockups voordat de locatie van elementen is geblokkeerd. Hiermee kunt u met grafische software direct naar een mockup overschakelen wanneer u klaar bent.

Wat te vermijden

Net als andere aspecten van uw ontwikkelingsproces, kan wireframing zijn valkuilen hebben als het niet goed wordt uitgevoerd. Hier zijn enkele tips over wat u moet vermijden om de meest effectieve resultaten te bereiken:

Te veel gebeurt op de pagina. Laat voldoende witte ruimte over, zodat het ontwerp niet te druk of rommelig lijkt.
Nadruk op kleur en design. Wireframing is voor het bepalen van de lay-out en locatie van elementen. Hoewel een draadframe het ontwerp kan beïnvloeden, zou het toevoegen van afbeeldingen en kleuren waarschijnlijk alleen maar afleiden van het doel.
Te veel details. Je kunt later altijd meer details toevoegen, maar als je te veel toevoegt in het begin, kan de client het draadframe verwisselen voor de uiteindelijke mockup.

Als u meer wilt weten over wireframes, Wireframe Magazine is een geweldige hulpbron die monsters deelt, technieken bespreekt en problemen met betrekking tot informatie-architectuur oplost.

Het creëren van een draadframe voor de website van uw klant biedt een effectief communicatiemiddel voor alle betrokken partijen.

Zelfs het bouwen van een eenvoudig draadframe zal op de lange termijn tijd besparen en het ontwikkelproces voor de ontwerper, ontwikkelaar en klant vereenvoudigen.

Exclusief geschreven voor WDD door Eric Shafer.

Gebruik je wireframes voor je ontwerp? Wat zijn enkele van de beste manieren om effectieve wireframes te maken?

ontwerp webontwerp wireframes