Stel je voor of denk aan die klant die naar je toe komt en jou opdracht geeft een website te ontwerpen. Het kan zijn dat je het thema moet ontwerpen dat het gaat gebruiken, en dat het de eerste indruk zal zijn die het zal achterlaten op de duizenden of miljoenen mensen die het gaan bezoeken. Hoe zou je het aan hem presenteren? Zou je screenshots willen maken van een website waar je aan het ontwerp hebt gewerkt en deze aan hen laten zien? Zou het niet beter zijn om een webmodel te gebruiken?
Aan het wachten, Wist je niet dat er ook een webmodel was? Nou, dan interesseert dit onderwerp je. En veel. Omdat u uw presentatie beter kunt presenteren en de klant veel gelukkiger kunt laten vertrekken na het zien van afbeeldingen waarvan het lijkt alsof de website al operationeel is. En de waarheid is dat het je niet zoveel zal kosten om het te doen.
Wat is een website-mockup?
Laten we eerst een beetje uitleggen wat a website mock-up. Zoals u weet, is een mockup eigenlijk een 'echte afbeelding'-weergave die laat zien hoe het uiteindelijke resultaat van uw werk eruit zou zien.
In het geval van een website, zou een afbeelding zijn van het resultaat van die webpagina.
Dit type collage ze worden gebruikt om meer realisme aan het werk te geven, aangezien het vaak, wanneer je het presenteert, leeg is of niet honderd procent vertegenwoordigt wat je hebt gedaan. Daarnaast heeft de opdrachtgever een meer visuele manier om een idee te krijgen.
En u zult zeggen, waarom laat u hem niet de website zien waaraan u heeft gewerkt? Het zou kunnen, maar niet als een presentatie van het werk, maar je zou de klant op internet moeten laten navigeren voor hem om haar grondig te leren kennen en vaak hebben ze geen tijd om het te doen, dus je weet niet zeker of hij alles heeft gezien.
Aan de andere kant, met een webmodel zou je het bereiken omdat je alles zou benadrukken wat je in die afbeeldingen wilt zien.
Hoe worden ze gemaakt?
Hoe worden deze web-mock-ups gemaakt? Is er een programma om ze te maken? Zijn het collages die van internet zijn gehaald?
werkelijk er zijn verschillende gratis tools dat ze je een handje kunnen helpen om deze te maken, en dat ze je opties kunnen geven, niet alleen met de voorbeelden die we je wat later gaan geven.
Hiermee zou je zelfs een verzameling van ze voor die klant kunnen maken, waarbij het ontwerp in verschillende volgorden wordt geplaatst waardoor het uiteindelijke resultaat er veel beter uitziet.
Deze hulpmiddelen zijn:
Gliffy
Deze tool is online en het is gratis. Hiermee kun je een webmodel maken omdat: heeft veel schema's en een API waarmee u de klus binnen enkele minuten kunt klaren.
In feite is het een van de meest gebruikte en dat geeft je veel mogelijkheden.
Cacoo
In dit geval moeten we u waarschuwen dat, hoewel we ons gaan concentreren op de gratis onderdeel, de tool het is ook betaald en dat betekent zal beperkter zijn in wat je kunt doen.
Om een idee te krijgen, kunt u alleen exporteren in PNG (dus het is niet zo aanpasbaar als je het met andere klanten wilt gebruiken).
Het mooie is dat als je met een team werkt, je tegelijkertijd (dus in realtime) kunt samenwerken.
wirificeren
wirificeren is een van de tools kan een website veranderen in een wireframe en daarmee werken met de klant om u het web naar uw wens te laten zien. Maar natuurlijk zou het hier nodig zijn om een foto van een computer, tablet of mobiel te kiezen om het resultaat van dit programma te monteren.
Zoals je misschien al geraden hebt, geven alle tools je een afbeelding van het webontwerp, maar het zou nodig zijn om het daadwerkelijk in een echte afbeelding samen te stellen. Hiervoor moet je toegang hebben tot foto's waar computers, mobiele telefoons, tablets worden weergegeven om je ontwerp bovenaan in te voegen en een foto te krijgen die beide verenigt (en die er goed uitziet).
Hiervoor kunt u kant-en-klare mockups gebruiken of deze zelf maken met een beeldbewerkingsprogramma.
Webmodel dat u kunt downloaden
Als je niet te overweldigd wilt raken om het werk te presenteren, laten we je hier wat achter voorbeelden van website mock-up die u kunt downloaden en gebruiken. U bespaart tijd.
Realistische website mock-up
We beginnen met een scène die iedereen zou kunnen hebben. Het is een bureau en een computerscherm bovenaan (toetsenbord en muis onderaan). Op de achtergrond een boekenkast met boeken. Deze boekenkast is echter in zwart-wit, net als de decoratieve elementen van het bureau (meer boeken en een lamp) en de muur, die in een grijze tint is.
Waarom? Zodat de blik is gericht op de pagina die door de monitor wordt weergegeven. in jouw geval zou de startpagina van de pagina kunnen zijn, of representatieve onderdelen die u aan de klant wilt laten zien.
Je download het hier.
Eenvoudig websitemodel
Een eenvoudigere weergave, waarbij met een grijze achtergrond (hoewel deze kan worden aangepast) geen scherm wordt weergegeven waarin we de webpagina hebben ingevoegd.
Het valt op dat, als je naar het scherm kijkt, het een lichter deel en een donkerder deel heeft, omdat het simuleert dat het licht erop valt.
Dit kan interessant zijn voor onderdelen waar je wilt de klant kijkt exclusief naar hen.
Je download het hier.
Samsung Galaxy S5-model
Dit is in het bijzonder een mock-up van de Samsung Galaxy S5, maar het kan perfect zijn om in dezelfde afbeelding drie delen van het webontwerp dat je hebt gemaakt te laten zien, zodat de klant kan waarderen hoe het eruit zou zien op een mobiel.
Houd er rekening mee dat Google bedrijven nu meer mogelijkheden biedt dan: gebruik een responsieve website, dat wil zeggen dat het er goed uitziet, of je nu een computer, een tablet of een mobiel gebruikt. Daarom is het niet genoeg dat het er goed uitziet op de computer, je moet ervoor zorgen dat het er op alle andere platforms uitziet.
U kunt het downloaden hier.
Mockup voor tablet en mobiel
In dit geval kunt u niet 100% van het web op een tablet laten zien, maar wel op mobiel. En het is dat als je je ontwerp op deze twee apparaten wilt laten zien, je dat ook kunt doen, zodat de klant een idee krijgt van hoe het eruit zal zien.
Houd daar natuurlijk rekening mee op de tablet wordt het weergegeven in liggend formaat terwijl de mobiel zal het hebben verticaal. Het is een manier voor hem om je ontwerp te zien veranderen zodat het op beide apparaten past.
Jij hebt het hier.
Heb je enkele voorbeelden van webmock-up? Je kunt ze delen in de reacties.