Beste bronnen voor het schetsen van op grid gebaseerde wireframes

Het proces van een interface ontwerpen begint altijd met idee generatie. Dit omvat visualisatie, onderzoek naar andere sites en rapid prototyping. Deze vroege idee fase is cruciaal voor begrijp de lay-out en gebruikerservaring je bent van plan om te bouwen. Dus hoe moet je de wireframing werken aan een nieuw project??

Ik ben een fan van traditioneel papier en potlood met extra gereedschap als dat nodig is. Maar digitale wireframing is ook groot en het is een haalbare optie voor moderne ontwerpers. In dit artikel wil ik de beste bronnen voor beide technieken delen om u te helpen bij het maken van uw eigen technieken op grid gebaseerde UI-wireframes.

Vroege UI / UX-conceptualisatie

Laten we beginnen met het verduidelijken van de verschillen tussen een wireframe en een prototype. Deze twee woorden worden vaak door elkaar gebruikt omdat ze betrekking hebben op hetzelfde proces.

EEN wireframe is een enkele statische schets van de gebruikersinterface van een webpagina of app. Het kan callouts hebben om knoptekst, marges, elementafmetingen of zelfs animaties uit te leggen. Maar wireframes zijn gewoon ruwe concepten voor afzonderlijke pagina's.

Evenzo, a prototype is zoals een stroomdiagram dat laat zien hoe verschillende pagina's aan elkaar gekoppeld zijn. Dus een prototype verbindt wireframes om te laten zien hoe verschillende knoppen of koppelingen naar andere pagina's moeten leiden.

Deze definities zijn niet in steen gehouwen, sommige ontwerpers hebben hun eigen terminologie en zijn het misschien niet eens met mijn exacte bewoordingen. Maar dit is hoe ik ze vaak heb beschreven, en het is hoeveel ontwerpers deze termen het best begrijpen.

Dus wat moet je precies doen met deze vroege conceptuele stukken? Zijn ze echt nodig? Ik zou zeggen dat prototyping niet altijd nodig is, maar het is een heel goed idee, vooral voor het ontwerpen van apps met complexe interacties.

Maar wireframing is altijd een goed idee voor elk nieuw project. Het helpt je focus op de grote foto zonder zorgen te maken over details. U krijgt een idee van hoe de algemene pagina is ingedeeld, en dit is van onschatbare waarde wanneer u een concrete lay-out ontwerpt.

Doelen voor wireframing

Elke keer dat u een nieuw project start, moet u nadenken wat je probeert op te lossen. Elke site is gebouwd met een specifiek doel voor ogen. Veel sites hebben zelfs meerdere doelen waarbij sommige doelen belangrijker zijn dan andere.

Gebruik wireframing als een gids om u te helpen de beste strategie te vinden voor het vastleggen van het (de) doel (en) van een website. Dit zal waarschijnlijk niet gebeuren op het eerste draadframe, dus wees voorbereid schets veel verschillende ideeën.

Zoek andere soortgelijke websites op en noteer hun beste eigenschappen. Analyseer hoe de inhoud is georganiseerd en hoe u door elke pagina gaat.

Denk aan wireframes van een interactief standpunt. Dit zijn niet alleen mooie foto's. Het zijn representaties van digitale interfaces en u wilt uw ideeën met dat in gedachten schetsen.

Het hebben van hulpmiddelen op basis van het raster, of ze nu van papier zijn gemaakt of digitaal zijn, kan veel helpen bij het snel schetsen. Laten we nu eens kijken naar de beste bronnen voor het maken van wireframes.

Raster Schetsblokjes

U kunt altijd beginnen met eenvoudige miniatuurschetsen op printerpapier alleen voor breng ruwe ideeën in kaart. Persoonlijk begin ik meestal met het werken met printerpapier, omdat ik me op deze manier minder zorgen maak om rasters en meer ideeën genereren.

Dot grid schetsblokjes zijn de beste manier om te gaan als je dat wilt een idee opruimen, en geef het meer structuur. Het raster helpt je schat de afstanden tussen items op de pagina en maak een soort symmetrie in het draadframe.

Er zijn veel geweldige producten beschikbaar als je dat wilt start wireframing op papier, zo is de Rhodia Dot Pad verkrijgbaar in verschillende maten voor dagelijks gebruik. Het komt alleen met 80 pagina's, maar dit is vrij typisch voor de meeste grid-schetsboeken.

Een ander zeer cool en aanpasbaar product is Dotgrid. Alle items van Dotgrid zijn duurder dan Rhodia-boeken, maar ze worden geleverd met meer materialen en aangepaste hoesontwerpen.

Dotgrid accepteert zelfs op maat gemaakte bestellingen die u dat toestaan ontwerp uw eigen schetsblok. Elk boek bevat iets minder dan 100 vellen, dus inclusief de voor- en achterkant krijg je ongeveer 200 pagina's voor rasterschetsen.

Een paar andere dot grid-sketchbooks die ik wil vermelden, zijn de Behance Dot Grid die hardcover en spiraalgebonden is, hoewel deze slechts 50 vellen papier bevat.

Het Responsive Design Sketchbook is een van de beste bronnen voor webontwerpers. Geen enkele andere productontwerper heeft een responsief ontwerpschetsboek nodig, maar webontwerpers profiteren enorm van de vrijheid om ideeën genereren op verschillende apparaatbreedten bovenop een rasterlay-out.

Deze responsieve ontwerp-pads hebben ook 50 vellen van in totaal 100 pagina's, maar elke pagina heeft vier verschillende responsieve netten vertegenwoordigen verschillende onderbrekingspunten in responsief ontwerp: desktop, laptop, tablet en smartphone.

Hoewel het ontwerp saai is in vergelijking met de Dotgrid-boeken, heeft niemand anders ontvankelijke schetsboeken overwogen voor webontwerpers. Als je van dat soort dingen houdt, is het de moeite waard om er een te bestellen voor een proefrit.

Als je echt van handgemaakte dingen houdt en geen geld wilt uitgeven, kun je dat ook print uw eigen rasterpagina's met Interface Sketch. Deze gratis site biedt verschillende rastersjablonen die u kunt afdrukken en gebruiken voor met de hand getekende draadframes.

De rasters zijn verkrijgbaar in A4- en US-letterformaten voor verschillende soorten printerpapier. U kunt uit vele opties kiezen, zoals sjablonen voor een volledige webbrowser of verschillende iPhone-schermen.

Al deze opties zijn geweldig en zeker de moeite waard om te verkennen als je zin hebt potloodschetsen. Papier is een van de gemakkelijkste media om snel nieuwe ideeën op te doen, dus het is vaak de voorkeur, zelfs door UI-ontwerpers.

Digitale hulpmiddelen en web-apps

Er zijn zoveel geweldige wireframing-programma's dat ze nauwelijks kunnen worden gedekt zonder de verlamming van de analyse te riskeren, dus laten we ons nu concentreren op enkele van de beste opties voor grid-gebaseerde wireframing.

Allereerst wil ik vermelden dat u Adobe-hulpmiddelen zoals Illustrator kunt gebruiken maak je eigen wireframes. Dit maakt geen deel uit van de workflow van iedereen en Illustrator is zeker niet gratis. Maar als u al met de Adobe Creative Cloud werkt, is het misschien een goed begin.

1. Moqups

Moqups is een van de beste online tools voor wireframing. U werkt met een visuele editor en een bibliotheek met items die u over de hele pagina kunt slepen en neerzetten.

Elk nieuw Moqups-project heeft een voorgedefinieerd raster, en gebruikt heldere paarse lijnen om u te helpen elementen in uitlijning te klikken. Het is een geweldige webtool die ontwerpen met een raster zoveel gemakkelijker maakt.

De site werkt standaard op een gratis abonnement dat de gebruiker beperkt tot 300 pagina-objecten. De site biedt wel premium-opties, maar het betalen van een maandelijks bedrag is misschien vervelend dan alleen maar werken met Adobe-tools of een eenmalige aanschaf van Sketch.

2. Grid Papr

De web-app Grid Papr is volledig gratis en biedt zowel publieke als private accounts voor uw wireframes. U maakt een naam voor uw project en krijgt uw eigen unieke URL voor het draadframe dat u vanaf elke computer kunt bewerken.

Elk nieuw draadframe wordt geleverd met een raster waarmee u snap-to-grid op alle elementen kunt uitvoeren. De functies zijn eenvoudig, maar ze zijn genoeg om maak binnen enkele minuten een lo-fi wireframe. Sleep gewoon wat je maar wilt naar de pagina en volg het raster om een ​​stellair draadframe te maken.

3. Wireframe.cc

Wireframe.cc is een van de eenvoudigste en meest minimale tools die u kunt gebruiken voor wireframing. Het beschikt over een overzichtelijke interface met een voorgemonteerd raster en georganiseerde werkbalken. U klikt en sleept om nieuwe elementen op het canvas te maken. U kunt uw werk ook opslaan en delen.

Dit is nog een gratis tool die gratis wordt aangeboden met optionele premium-abonnementen. Elk abonnement wordt maandelijks gefactureerd, dus het is vergelijkbaar met Moqups in prijsstructuur. De gratis tool is bruikbaar vanaf elke computer zonder account.

4. Spotvogel

Mockingbird is een andere geweldige optie, die veel meer functies biedt dan de meeste wireframing-tools. U kunt gratis aan de slag, maar de proefperiode is beperkt tot 7 dagen. Dit kan sommige gebruikers ergeren, maar de tool is echt ongelooflijk en werkt in alle browsers.

Mockingbird heeft een eindeloze bibliotheek met UI-elementen zoals tabbladen, accordeons, vervolgkeuzemenu's, videospelers en eenvoudige tekstlinks. Het standaardraster maakt gebruik van het 960gs-rastersysteem, maar u kunt kiezen 12, 16 en 24 kolommen.

Laatste woorden

Ongeacht of u kiest voor traditionele of digitale wireframing, het gaat altijd om het kwaliteit van de output. Er is veel te leren wanneer je dit soort werk doet, dus vind welk gereedschap het meest comfortabel voor je voelt.

Vooruitgaan is het beste wat je kunt doen start wireframing. Krijg een gevoel voor wat je het beste vindt (op papier of digitaal), en maak het helemaal naar je eigen smaak. De bronnen in dit artikel zouden je meer dan genoeg moeten geven om aan de slag te gaan met het verbinden van je eigen digitale interfaces.

(Coverfoto door Oykun Yilmaz)