Wireframes op de website zijn eenvoudige lijntekeningen die de plaatsing van elementen op een webpagina tonen. U kunt uzelf een hoop tijd besparen door de lay-out van een eenvoudig draadframe aan het begin van het ontwerpproces te bewerken in plaats van een complex ontwerp later.
Het gebruik van wireframes is een geweldige manier om een websiteproject te starten, omdat het u en uw klant in staat stelt om zich op de lay-out te concentreren zonder afleiding van kleur, type en andere ontwerpelementen. Concentreer u op wat er op uw webpagina's gebeurt en het percentage ruimte dat elk element in beslag neemt, wat kan worden bepaald door de behoeften van uw klant.
Wat op te nemen in een website-wireframe
Alle belangrijke elementen van een webpagina moeten worden weergegeven in het wireframe van uw website. Gebruik eenvoudige vormen in plaats van daadwerkelijke afbeeldingen en label ze. Deze elementen omvatten:
- Navigatie: knoppen voor gebruikers om de hoofdgedeelten van uw site te bezoeken.
- Bedrijfslogo: kan gewoon worden weergegeven door een kader.
- Inhoudsgebieden: waar worden uw verschillende inhoudsdelen weergegeven?
- Zoekvakjes
- Gebruikers login gebieden
Hoe Website Wireframes te maken
Er zijn verschillende manieren om een wireframe voor een website te maken. Ze bevatten:
Met de hand tekenen op papier
Deze methode is handig wanneer u oog in oog staat met een klant. Schets uw lay-outideeën op papier, met een focus op welke elementen waar moeten gaan.
Adobe Photoshop, Illustrator of andere software gebruiken
De meeste grafische softwarepakketten zijn uitgerust met alle basisgereedschappen die nodig zijn om wireframes te maken. Eenvoudige lijnen, vormen en tekst (om uw elementen te labelen) zijn alles wat u nodig hebt om een presentabel draadframe te maken.
Software gebruiken die voor dit type taak is gemaakt
Terwijl Photoshop en Illustrator de slag kunnen slaan, zijn sommige softwarepakketten speciaal ontwikkeld voor dit soort werk. OmniGraffle is een stukje software dat het maken van wireframes vereenvoudigt door hulpmiddelen voor vormen, lijnen, pijlen en tekst te gebruiken op een leeg canvas. Je kunt zelfs aangepaste grafische sets (gratis) downloaden bij Graffletopia, waarmee je meer elementen, zoals algemene webknoppen, kunt gebruiken.
03 of 03De voordelen
Met wireframes op de website heeft u het voordeel dat u een eenvoudige lijntekening kunt aanpassen om de gewenste lay-out te bereiken. In plaats van complexe elementen rond een pagina te verplaatsen, kan het erg weinig tijd kosten om een paar vakken naar nieuwe posities te slepen. Het is ook veel productiever voor u of uw klant om zich eerst op de lay-out te concentreren … u begint niet met opmerkingen als "Ik vind die kleur daar niet leuk!" In plaats daarvan begint u met een definitieve lay-out en structuur op om je ontwerp te baseren.
