Terwijl niet elk project een draadframe moet, kunt met behulp van een voor de bouw van een design lay-out u uw client op inhoud stroom vroege goedkeuring verkrijgen zonder het afleidende hen met kleur en textuur. U kunt met de wireframes ook brainstormen over de functionaliteit en de Stichting van uw ontwerp. U kunt gemakkelijk een wireframe maken in uw programma voor het bewerken van afbeeldingen, of gebruik een veelheid van online tools en grafische kits.
Voordat u begint
Beslissen welke elementen zullen aanwezig zijn in uw ontwerp. Gemeenschappelijke elementen op te nemen zijn: navigatie, inhoud, widgets of functie dozen, afbeeldingen en knoppen. Een voorbeeld van een lijst die u zou kunnen maken zou omvatten: navigatie, schuifknop voor afbeeldingen, inleiding vakken, sociale netwerk pictogrammen, laatste artikel links en een copyright/voettekst
Het bepalen van de breedte van uw ontwerp waarmee u beginnen wilt. Afmetingen van de standaard lay-out zijn 960px, 980px en 1020px, maar een voordeel van de wireframe is dat je experimenteren met de omvang van uw elementen kunt totdat alles er goed uitziet.
Kies een methode voor het maken van uw draadframe. Maken van een draadframe met de hand kan zijn de gemakkelijkste, maar het kan niet vertalen goed naar een digitaal bestand dat kan worden gebruikt als een nauwkeurige blauwdruk voor uw composiet. Software programma's zoals Adobe Photoshop, Illustrator of InDesign zijn niet echt optimaal is voor het maken van wireframes ofwel, maar ze verzekeren maximale compatibiliteit met uw composiet of daadwerkelijke ontwerp. De laatste optie is het gebruik van een framing-instrument, waarvan er verscheidene samenwerking en exporteren naar ontwerp-vriendelijke formaten.
Een draadframe zelf samenstellen
Maak een nieuw document dat op ten minste 1680px breed en hoog 980px. U zal zitten kundig voor ogen hoe uw ontwerp en de schaal eruit zien zal wanneer gepresenteerd in een webbrowser als uw werkruimte groter dan uw ontwerp is. Als u met de hand tekent, indien mogelijk, Raster papier gebruiken waar een vierkant is gelijk aan 10 pixels. Zonder een raster, één inch naar 100 pixels te converteren.
Eerst een gecentreerde rechthoek met behulp van de breedte en de hoogte van uw startende afmetingen van de lay-out, die als uw eerste frame fungeren zal maken. Tekenen van elk element in de gewenste positie met behulp van eenvoudige vormen en grijstinten. Als softwarematig, zoek draadframe en UI grafische kits van pas komen in dit stadium, u te voorzien van standaard elementen die u in uw draadframe zoals pictogrammen, tekstvakken plaatsen kunt, bars, menu's, enzovoort.
Label elk element duidelijk met nette handschrift of een schreefloos lettertype. Als u opnemen van afmetingen wilt, doen met behulp van een lichte kleur gestippelde lijn buiten het element en zorg ervoor dat het element vertegenwoordigt de gelabelde pixels nauwkeurig.
Ontwerpnotities toevoegen in de marge of houd ze in een apart bestand te presenteren naast de draadframe. Uw ontwerpnotities bijvoorbeeld ideeën met betrekking tot kleur, functionaliteit, of het doel van de elementen binnen het draadframe. Als een softwareprogramma gebruikt, controleert u of de notities zijn onopvallend en duidelijk betrekking hebben op de gelabelde elementen op naam of nummer.
Sla het bestand als JPG voor maximale compatibiliteit met wat software die uw klant gebruiken kan om het te bekijken. Als met behulp van software die lagen ondersteunt, een gelaagde kopie opslaan voor jezelf zo kunt u gemakkelijk elementen later wilt bewerken of deze draadframe opnieuw als een sjabloon gebruiken voor een ander project. Als u trok uw Draadframe met de hand, zal u moeten scannen van de afbeelding en het formaat aan te passen de accurate weergave van de ingestelde afmetingen kun je.
Een draadframe softwarematig Wireframe maken
Eerst de afmetingen van uw belangrijkste lay-out, die als uw primaire frame fungeren zal maken. Meeste draadframe-software wordt geleverd met standaard lay-out maten om uit te kiezen. Gebruik een licht gekleurde of transparante achtergrond.
Slepen en neerzetten of toevoegen van elementen uit de meegeleverde bibliotheken in het hulpprogramma. Dingen in gedachten te houden zijn witte ruimte, inhoud stroom en de beoogde gebruikerservaring. U kunt de omvang en de grootte van de elementen in deze hulpprogramma's aanpassen door hun dimensie grepen te slepen.
Label elk element duidelijk door te klikken op de tekst van het label binnen elk element en te typen van een naam of nummer. Als u opnemen van afmetingen wilt, doen met behulp van een lichte kleur gestippelde lijn buiten het element en zorg ervoor dat het element vertegenwoordigt de gelabelde pixels nauwkeurig. Sommige gereedschappen framing zal dit voor u automatisch doen.
Ontwerpnotities overeenkomt met elk element in de marge of in een apart document toevoegen. Uw ontwerpnotities bijvoorbeeld ideeën met betrekking tot kleur, functionaliteit, of het doel van de elementen binnen het draadframe. Als een softwareprogramma gebruikt, controleert u of de notities zijn onopvallend en duidelijk betrekking hebben op de gelabelde elementen op naam of nummer.
Exporteren of opslaan van het bestand als een PDF of JPG, zodat uw klant kan gemakkelijk bekijken. Als uw gekozen draadframe tool samenwerking ondersteunt, is het een goed idee om uit te nodigen uw cliënt inloggen en commentaar achterlaten.