PINGDOM_CANARY_STRING
Hoe u een wireframe maakt

Een wireframe maken in Lucidchart

Leestijd: ongeveer 6 min

Geplaatst door: Lucid Content Team

Je bent geen wireframer, maar je hebt er wel een nodig. Gewoon iets simpels om de webontwikkelaar te laten zien waar je aan zit te denken. Een handgetekende wireframe gaat niet werken — je bent geen kunstenaar — en je hebt geen tijd om ingewikkelde wireframesoftware te leren gebruiken.

Met Lucidchart kun je snel online wireframes en mockups maken en delen, ongeacht je eerdere ontwerpervaring. Hoewel UX-ontwerpers waarschijnlijk een geavanceerdere wireframetool nodig zullen hebben, is Lucidchart de perfecte oplossing voor niet-ontwerpers. Maak verzorgde wireframes en mockups om je ideeën nauwkeurig over te brengen aan webontwikkelaars en UX-ontwerpers.

En het mooiste? Het is volledig gratis!

Een wireframe maken in Lucidchart

Met Lucidchart kun je zowel wireframes als mockups bouwen voor websites en mobiele apparaten. Mockups zijn visuele modellen van wat je wilt gaan bouwen. Ze lijken erg op het eindproduct maar hebben niet dezelfde functionaliteit. Wireframes daarentegen richten zich meer op het uitbeelden van de functionaliteit en minder op de vorm.

Beide soorten diagrammen zijn nuttig als je nadenkt over UI/UX-eigenschappen — je haalt het meeste uit je wireframes en mockups door ze samen te gebruiken. Deze handleiding leert je om in Lucidchart wireframes te maken, zowel van sjablonen als helemaal vanaf nul.

Bespaar tijd met wireframesjablonen

Of wireframen nu nieuw voor jou is of je gewoon tijd wilt besparen, vertrekken van een sjabloon is een prima keuze. Omdat de eenvoudige vormen al geblokt zijn, hebben sjablonen de basis alvast gelegd — je hoeft alleen nog maar inhoud toe te voegen. Lucidchart heeft diverse wireframesjablonen die alles bestrijken, van startpagina's voor je websites tot mobiele apps.

Om de sjablonenbibliotheek van Lucidchart te openen, ga je naar je documentenbibliotheek en klik je op de pijl naast '+Document'. Scroll door de categorieën aan de linkerkant tot je de rubriek wireframe vindt.

Klik op een sjabloon om er meer over te lezen en, als je er een gevonden hebt die aan je behoeften voldoet, klik je op 'Document aanmaken'. (Je kunt ook dubbelklikken op een sjabloon om een nieuw document te openen.) Als je een sjabloon gekozen hebt, kun je verder gaan met stap drie hieronder.

Bekijk onze videotutorial voor meer informatie over hoe je de wireframesjablonen van Lucidchart gebruikt.

standaard wireframevoorbeeld voor startpagina
Wireframesjabloon voor startpagina (klik op de afbeelding om hem groter weer te geven in Lucidchart)

Begin je liever vanaf nul? Volg deze stap-voor-stap handleiding om je eigen wireframe te maken met Lucidchart.

1. Kies je vormbibliotheken

Voor je je eigenlijke wireframe maakt, moet je je werkruimte voorbereiden door de vormbibliotheken die je nodig hebt op je werkbalk vast te pinnen. Als je een leeg document open hebt staan in de Lucidchart-editor, druk je op 'M' om de vormbibliotheken te openen. Kies de bibliotheken die je wilt gebruiken en klik op 'Opslaan'.

Afhankelijk van je project kan het zijn dat je er meerdere tegelijk wilt gebruiken. Dit zijn een aantal mogelijkheden:

  • Stroomdiagramvormen: deze standaard geometrische stroomdiagramvormen zijn al op je werkbalk vastgepind en het kan handig zijn om ze bij de hand te houden. Gebruik rechthoeken om een website in secties te verdelen of gebruik pijlen om de stroom van het ene naar het andere UI-element te illustreren.
  • UI-mockups: deze vormbibliotheek bevat een standaard reeks van UI-vormen en -widgets. Je vindt er lege websitevormen, maar ook placeholders voor video's, kaarten, grafieken, foto's en kalenders.
  • Android-mockups: bouw je een app of een pagina voor een Android-apparaat, dan is dit de plaats waar je terecht kunt voor Android-telefoons en -tablets, maar ook voor dialogen en pictogrammen die specifiek zijn voor dit besturingssysteem.
  • iOS-mockups: als je met iPhones en iPads werkt, vind je ze in de iOS-vormbibliotheek, samen met specifieke UI-componenten voor iOS.
  • Afbeeldingen: vergeet de afbeeldingengalerij niet. Of je nu een stijlvolle achtergrond of een specifiek logo nodig hebt, je kunt het direct vanuit Lucidchart zoeken en toevoegen.

Deze mockup is samengesteld uit een combinatie van standaard stroomdiagramvormen, afbeeldingen, en de vormbibliotheek voor UI-mockups.

een mockup maken

2. Voeg vormen aan je wireframediagram toe

Begin je wireframe met de meest elementaire vorm — het kader dat alle andere elementen zal bevatten. Afhankelijk van de aard van je ontwerp zal dit waarschijnlijk een silhouet van een mobiel apparaat zijn of een browservenster. De eerste vind je in de vormbibliotheken 'iOS-apparaten' en 'Android-apparaten'. Voor browservensters ga je naar de bibliotheek met 'UI-containers'.

Naarmate je meer elementen toevoegt, werk je van algemeen naar specifiek, waarbij je eerst grote ontwerpelementen plaatst en dan overgaat op kleine details. Gebruik containers om secties binnen je diagram te maken — dit kunnen bijvoorbeeld werkbalken of zijmenu's zijn.

Als je de grotere elementen geplaatst hebt, begin je met het toevoegen van afzonderlijke knoppen en tekstblokken. Bewerk specifieke ontwerpdetails — zoals lettertypes, kleuren, foto's en logo's — als laatste.

3. Gebruik links, lagen en hotspots om functionaliteit toe te voegen

Als je klaar bent met het indelen van je wireframe, simuleer je de websitefunctionaliteit met behulp van links, lagen en hotspots. Met deze drie functies kun je knoppen maken die echt werken, pop-ups creëren, links naar externe inhoud toevoegen, en van de ene pagina van een wireframe naar de andere gaan. Probeer het zelf uit in het interactieve diagram hieronder!

Meer informatie over links, lagen en hotspots.

4. Breng gebruikersreisstromen in kaart met mockups

Gebruikersreisstromen laten het verloop zien van de interactie van een gebruiker met een toepassing. Ze kunnen gericht zijn op de frontend interface die de gebruiker ervaart of op de backend infrastructuur die de ontwikkelaar bouwt. In plaats van een gebruikersstroom te schetsen met alleen stroomdiagramvormen, kun je proberen om er mockups in op te nemen, zodat je teamleden een idee krijgen van hoe de toepassing er uit zal zien.

voorbeeld wireflow voor bankapp
Wireflowsjabloon voor bankapp (klik op afbeelding om hem groter weer te geven in Lucidchart)

5. Publiceren, delen of presenteren

Het maken van mockups en wireframes kan nogal wat tijd kosten. Als je klaar bent, kun je je harde werk op een aantal manieren laten zien:

  • Gebruik de presentatiemodus van Lucidchart om een live website te simuleren. Hotspots en links zien eruit als echte knoppen en pop-ups, en gedragen zich ook zo.
  • Sluit een dynamisch diagram in op je website. Als je je Lucidchart-document bijwerkt, worden de veranderingen overal zichtbaar waar je document is ingesloten.
  • Publiceer je wireframe als pdf of website. Iedereen met de URL kan je diagram bekijken en uitproberen.
  • Deel een link naar je document met bijdragers. Je kunt ze om feedback vragen over je ontwerp en vragen voor ze achterlaten als commentaar.

Ben je een ervaren wireframer? Geef ons je beste tips en trucs in de reacties hieronder!

Begin vandaag nog met diagrammen maken met Lucidchart - probeer het gratis!

Gratis registreren

Nu populair

what does HR do

Wat doet HR eigenlijk? 11 kernactiviteiten

Over Lucidchart

Lucidchart is de intelligente diagramtoepassing waarmee teams complexe dingen helder kunnen maken, hun inzichten kunnen afstemmen en sneller aan de toekomst kunnen bouwen. Met deze intuïtieve, cloudgebaseerde oplossing kan iedereen visueel werken en in realtime samenwerken bij het bouwen van stroomdiagrammen, mockups, UML-diagrammen en meer.

Lucidchart is het meest populaire online alternatief voor Visio en wordt in meer dan 180 landen gebruikt door miljoenen gebruikers, van verkoopmanagers die doelorganisaties in kaart brengen tot IT-managers die hun netwerkinfrastructuur visueel willen presenteren.

Aan de slag

  • Prijzen
  • Individueel
  • Team
  • Bedrijf
  • Contact met sales
Nederlands
PrivacyJuridisch
Downloaden op Apple App StoreDownloaden op Google Play Store
© 2022 Lucid Software Inc.