Voorbeelden van een website Wireframe.

Voorbeelden Website Wireframes

Nou, je moet niks, maar website-wireframe zijn een schets van een website, of onderdelen ervan, dus als jij alles in 1x kunt samenvatten, prima!

Maar voor het betere werk moet je zo denken:

Wireframes zijn een verzameling duidingen, die aangeven hoe een website, of onderdelen ervan, kunnen worden ontworpen. Elke vorm vertegenwoordigt een element op de pagina, zoals een afbeelding, een logo, menu-items, knoppen, enzovoort.

Een website wireframe is een soort schets voordat je een webdesign technisch echt gaat maken. Wij gebruiken eigenlijk altijd 3 opzetjes, (mobiel/Tablet/pc) omdat het op je mobiel er anders uitziet dan op je laptop of tablet. En website's zijn tegenwoordig standaard responsive, dus bij het ontwerp moet je daar ook rekening mee houden… zijnde: wat komt waar te staan!

Het opzetten van een wireframe voor je website is eigenlijk een soort van "overleg" moment. En veelal moet je je dan buigen over dit soort vragen:
» Gaat mijn menu vanuit boven of vanuit de zijkant?
» Moet dit plaatje hier of hier?
» Waar plaats ik die "Call2Action"knop?
» Is mijn opzet logisch, wordt dit mooi?
etc etc.

Ja, precies dat, een bouwtekening voor een huis. Maar dan van de website zoals je die in gedachte hebt. En vervolgens bespreek je de mogelijkheden en/of onmogelijkheden met je websitebouwer

Daarnaast kun je op die manier ook aangeven waarom je een knop of menu op een bepaalde positie wilt hebben, als je bijvoorbeeld iets speciaal onder de aandacht wilt brengen.

Stel dat je je website laat maken door een webbouwer, dan kun je aan hem je wireframe laten zien, samen met een moodboard is het dan klaar voor een webdesign. Er zijn gratis online-programma's waarmee je het kunt maken, maar met een gewoon tekenprogramma lukt het ook prima of zelfs gewoon met pen en papier.

Kleine tip, wat wij altijd aan onze klanten vertellen is dat je je Wireframe opzet op basis van dingen die je tegen komt op andere websites. Waarmee we bedoelen, je hebt natuurlijk je logo en je menu, maar stel dat je op website X een mooie foto-slider ziet, dan geef je in je wireframe aan "foto-slider" (voorbeeld = website X).

Of op website Y zie je een geïntegreerde google maps over de hele breedte van de pagina, dan verwerk je dat ook over de hele breedte in je wireframe met daarbij de aanduiding: "google-maps" (voorbeeld = website Y).

Kan je hier iets mee?

👍 graag gedaan!