⬤ Gratis software en apps zoeken:
Voordat u begint met de ontwikkeling van een website of een mobiele app is het raadzaam om eerst een mockup te maken. Dit is een visuele weergave van hoe de app eruit moet zien en welke functionaliteit erin moet worden opgenomen.
Met speciale software kunt u een mockup (ook wel prototype genoemd) zelfs interactief maken. Zo wordt u naar de volgende pagina binnen een app of op een website geleid op het moment dat u op een knop in de tekening klikt.
Op deze pagina vindt u een overzicht van goede gratis software waarmee u dergelijke (interactieve) mockups maakt.
Websites en apps zijn opgebouwd volgens een bepaalde digitale structuur, die als het goed is een fijne gebruikerservaring biedt. Met name UX/UI ontwerpers houden zich daar mee bezig, waar UX staat voor user experience. Die manier van ontwerpen heeft een aantal processen en stadia, van het doen van onderzoek tot het ontwikkelen van een prototype. Vaak wordt een programma als Sketch gebruikt, maar Adobe heeft met Adobe XD een fraai programma op de markt gebracht om eenvoudig en vooral snel prototypes te ontwikkelen voor websites, software en apps.
Adobe XD is gratis te gebruiken, maar heeft nog wel een betaalde versie met veel meer mogelijkheden. Het programma is beschikbaar voor Windows, macOS, iOS en Android.
Adobe Experience Design is een erg gebruiksvriendelijk programma met intuïtieve tools, dat uw dagelijks werk als ontwerper er een stuk makkelijker op maakt. De gratis versie komt met een leuk pakket aan templates, componenten en andere handige opties om snel een fraai prototype mee te maken.
Adobe XD is een zeer compleet programma, dat alle stappen en functionaliteiten biedt voor een ontwerper en waarmee u van begin tot eind een interactief prototype maakt. De interface van Adobe XD lijkt erg veel op die van Sketch, dus als u bekend bent met dat programma, dan zal Adobe XD voor u weinig geheimen bevatten. De interface is verder geïntegreerd met XAML, C++ en JavaScript.
U begint direct met het ontwerpen van uw eigen prototype. U begint een nieuw ontwerp, waarbij u direct al aangeeft waar het voor moet zijn. U kiest daarvoor uit een van de schermen, zoals iPhone, iPad, Android, computer of web. De afmetingen zijn nog te veranderen. Als u op een van de opties klikt wordt er een wit paneel geopend. Aan de linkerkant van het scherm al verschillende gereedschappen en objecten om mee te werken. U klikt op een object en plaatst of tekent het met uw muis in het venster. Aan de rechterkant vindt u veel andere opties, om al die objecten simpel mee te bewerken en aan te passen. Zo verandert u de vorm, de kleur, de grootte en meer. U maakt onder meer gebruik van vectorafbeeldingen en raster artwork om uw interactieve prototype, lay-outs of wireframes te maken. Dat is het voornaamste doel van Adobe XD.
U schakelt makkelijk heen en weer tussen bijvoorbeeld een prototype of een wireframe en de software is daarvoor opgedeeld in twee onderdelen: ontwerp en prototype. Een prototype of wireframe is nog te delen met anderen en dat is handig, want ze vormen de basis voor andere ontwerpers. Want dit programma staat aan de basis van het uiterlijk van een website, app of software en u en uw team weten met uw prototype, lay-out of wireframe meteen hoe een website of app eruit komt te zien. Adobe XD is overigens te integreren met Sketch of Photoshop.
Adobe XD heeft de volgende kenmerken:
Adobe XD screenshots
Website van de makers van Adobe XD
website van Adobe XD naar Adobe XD download pagina
Een mock-up is een soort van visueel prototype model om een ontwerp aan anderen te laten zien. Het is een manier die vaak gebruikt wordt in bijvoorbeeld marketing materialen. Het maken van een mock-up kost vaak redelijk wat tijd als u dat met Photoshop doet, maar als u hetzelfde resultaat wilt bereiken zonder al teveel moeite dan is een programma als Mockuuups Studio daar erg geschikt voor. Deze applicatie levert een flink aantal templates voor mock-ups waar u alleen nog maar de gewenste afbeelding of foto in hoeft te slepen of voor hoeft te uploaden. U heeft dan gelijk een fraai resultaat, zonder dat u iets hoeft te ontwerpen.
Mockuuups Studio is gratis te gebruiken, maar heeft dan wel beperkte mogelijkheden. Als u kiest voor de betaalde variant dan krijgt u meer veel opties en templates. De software is beschikbaar voor Windows en Mac OS X.
Een mock-up is bedoeld om te laten zien hoe uw ontwerp of logo er in een bepaalde omgeving of op een gebruiksvoorwerp uitziet. Het maken van een goede en essentiële mock-up is met Mockuuups Studio zo gedaan.
Nadat u het programma heeft geopend ziet u meteen een overzicht van de beschikbare templates. In de gratis versie is dat aantal dus wat beperkt. Als u meteen wilt zien welke templates u mag gebruiken dan klikt u bovenaan het scherm op 'Free'. Om dan te zien hoe een afbeelding of uw logo te zien is in een omgeving of op een product kiest u meteen voor het uploaden van een afbeelding, hier een 'Screenshot' genoemd. Deze optie is nog met de sneltoetscombinatie Ctrl + O te gebruiken, waardoor het upload venster meteen geopend wordt.
Nadat u uw afbeelding heeft geïmporteerd is het direct zichtbaar op alle templates en ziet u meteen al hoe het er in een bepaalde omgeving uitziet. Mockuuups Studio heeft dan een handig functie om aan te geven waar uw mock-up voor moet dienen, zoals een iPhone, iPad of voor Google. Daarbij is weer de ingebouwde achtergrond te gebruiken of u kiest voor een blanco achtergrond. Als u alles naar wens heeft aangepast dan klikt u onderaan het venster van de mock-up op de downloadknop en wordt uw mock-up naar uw harde schijf gedownload. Door op het hartje ernaast te klikken voegt u een mock-up toe aan uw favorieten.
Het programma is zeer geschikt om interessante posts te maken voor een blog of voor uw sociale media en om daar een stimulans aan te geven. Voor reclamecampagnes werkt het programma perfect. Als ontwerper is het een prima manier om uw klanten te laten zien of uw ontwerp een goede impressie is voor hun opdracht. Het is in principe meteen te gebruiken, maar inloggen is een handige optie.
Als u kiest voor de betaalde versie dan is het programma nog te integreren met Photoshop en Sketch.
Mockuuups Studio heeft de volgende kenmerken:
Mockuuups Studio screenshots
Website van de makers van Mockuuups Studio
website van Mockuuups Studio naar Mockuuups Studio download pagina
Er zijn meerdere manieren om een website te bouwen. Naast het technische gedeelte, wordt vaak gebruik gemaakt van bepaalde modellen en prototypes. Die dienen niet alleen als basis voor een site, maar maken het voor ontwerpers en ontwikkelaars makkelijker en sneller om de klant een voorbeeld te geven van de vormgeving van een site. Een project is zo eenvoudiger vorm te geven. Met Pencil creëert u die modellen, templates en prototypes en voegt u er nog allerlei andere elementen aan toe, zoals tekst, de schaal en meer. Zo geeft u uw klant al snel een behoorlijk goed idee van een uiteindelijke website. Pencil is gratis te gebruiken en de software is beschikbaar voor Windows, macOS en Linux.
Het blijft soms lastig om de wensen van een klant om te zetten naar een realistisch beeld en om een klant meteen een inschatting van het eindresultaat te geven. Daarom wordt vaak gewerkt met een document waarin dat allemaal duidelijk weergegeven wordt. Om uw klanten op die manier tegemoet te komen gebruikt u Pencil. Dat is een open source tool om webprototypes mee te ontwerpen om zo snel een voorstel te doen naar uw klanten toe. Pencil laat u simpel allerlei soorten prototypes maken, die mockups heten, en die te maken zijn voor GUI toepassingen en verschillende interfaces, zoals een computer of een smartphone. Zo weet uw klant hoe de vormgeving van een site er op verschillende schermen uitziet. Daarvoor beschikt de tool over een mooi arsenaal aan tools, waarmee uw mockups weer te bewerken zijn. Met het programma geeft u een hele website al vorm in een document en dat is vanuit het programma te exporteren naar meerdere bestandsformaten, zoals PNG, HTML en PDF.
De software is snel en makkelijk te installeren en heeft een gebruiksvriendelijke interface. Links vindt u een overzicht van allerlei tools, elementen en templates, die weer verdeeld zijn in meerdere tabbladen, en aan de rechterkant van uw scherm begint u met het creëren van uw ontwerp. Het is mogelijk om aan meerdere projecten tegelijkertijd te werken en om daarvoor tegelijkertijd dezelfde tools te gebruiken, die weer in categorieën zijn verdeeld. U opent een bestaand document of u maakt een nieuw document aan. Om een mockup te maken gebruikt u een van de templates en zo'n template is weer te bewerken. Daarvoor beschikt Pencil over een heleboel basisvormen, die u simpelweg in het document sleept. Het is mogelijk om nog meer objecten online te downloaden.
U gebruikt dus allerlei objecten en elementen, zoals een driehoek, vierkant, ovaal, rechte lijn en meer, en daarvan past u de afmetingen en de schaal aan. Daar zijn weer allerlei webelementen aan toe te voegen, zoals een tabel of HTML tekst, die weer onderdeel worden van webapplicaties. Alle objecten sleept u eenvoudig naar een andere plek op uw scherm en zijn weer samen te voegen in een diagram. Alle handelingen zijn weer ongedaan te maken of toch weer te bevestigen.
Pencil Project heeft de volgende kenmerken:
Pencil Project screenshots
Website van de makers van Pencil Project
website van Pencil Project direct naar Pencil Project download pagina
Pixate is een programma voor Mac en Windows dat speciaal gericht is op het ontwerpen van prototypes van mobiele apps. Dit programma is in 2015 door Google overgenomen maar wordt nog steeds aangeboden als onafhankelijke tool.
Met Pixate ontwerpt u een volledig interactieve demo, inclusief overgangseffecten tussen schermen en knoppen waarop geklikt kan worden om naar het volgende (aan de knop gekoppelde) scherm te gaan. Het is zelfs mogelijk om in de demo vast te leggen dat objecten versleept kunnen worden. Hiermee ontwerpt u bijvoorbeeld een functie waarmee gebruikers zelf een avatar samenstellen door verschillende kledingstukken, hoofden en kapsels naar het venster te slepen.
Het is mogelijk om helemaal vanaf het startpunt een nieuwe app demo op te bouwen, maar op de site van ontwikkelaars staan ook verschillende voorbeelden die gebruikt en aangepast kunnen worden. Dit zijn onder andere voorbeelden met de functionaliteit van Pinterest, Spotify en Twitter.
Het desktopprogramma van Pixate, genaamd Pixate Studio, is gratis te installeren en gebruiken op Mac en Windows systemen. Voor Pixate Cloud waarmee u ontwerpen via internet kunt delen met anderen en samen met teamleden aan prototypes kunt werken moet wel betaald worden. Binnen deze betaalde oplossing zijn ook verschillende project management functies opgenomen.
Pixate heeft de volgende kenmerken:
Pixate screenshots
Website van de makers van Pixate
website van Pixate direct naar Pixate download pagina
NinjaMock is een tool voor het maken van prototypes voor Android, iOS en Windows Phone apps. Standaard bevat het alle functies en knoppen die binnen deze drie mobiele besturingssystemen gebruikt worden.
Dit programma is gratis tot maximaal drie projecten en alleen voor niet-commercieel gebruik. De gratis versie bevat wel alle functies die ook de betaalde abonnementen bevatten.
Om nieuwe gebruikers op weg te helpen staan op de site van NinjaMock verschillende voorbeelden van interactieve prototypes.
NinjaMock heeft de volgende kenmerken:
NinjaMock screenshots
Website van de makers van NinjaMock
Met de online dienst van Moqups.com kunt u zonder eerst een account te hoeven aanmaken direct beginnen met het maken van interactieve mockups. Het mockup programma is gratis tot maximaal twee projecten met maximaal 300 objecten en 5 megabyte aan opslagruimte. Met de gratis versie kunt u ook samenwerken met andere teamleden.
U kunt gebruik maken van de standaard buttons, links, dropdown menu's, selectievakken, Google Maps kaarten etcetera om het prototype interactief te maken. Daarnaast kunt u eigen afbeeldingen uploaden.
Het eindresultaat van Moqups kunt u online delen of exporteren als PDF- of PNG-bestand.
Moqups heeft de volgende kenmerken:
Moqups screenshots
Website van de makers van Moqups
Op de website van de ontwikkelaars van deze gratis software kunt u meer informatie vinden en kunt u de software downloaden.