Prototyping, als concept, bestaat al sinds het begin van het internet. Meestal bouwden mensen die een nieuw fysiek product ontwikkelden eerst het ding en zorgden ervoor dat het werkte zoals het bedoeld was. De eerste versie zou misschien worden gepatenteerd en aan potentiële investeerders worden getoond. Als de uitvinder toegang had tot zijn eigen productiemiddel (als ze bijvoorbeeld in een bestaand bedrijf zouden werken), zouden ze gewoon doorgaan en de bugs oplossen tot ze een productiemodel klaar hadden.

Weet je nog die oude demo-schijven? Weet je, degenen die met programma's met beperkte functionaliteit kwamen, of het eerste of tweede niveau in een game? Prototypes lijken veel op die demo's, alleen nog eenvoudiger.

U bouwt een prototype van een website of app om ervoor te zorgen dat het concept werkt zoals bedoeld

Hun doel is niet zozeer om potentiële klanten een product te laten kopen, maar om u te helpen een beter product te maken. U bouwt een prototype van een website of app om ervoor te zorgen dat het concept werkt zoals bedoeld. Je gebruikt het ook om je klanten of potentiële investeerders te laten zien hoe het zou moeten werken.

Onlangs hebben we veel apps gezien die zijn gericht op het bouwen van prototypen voor internet en ook voor mobiele apps. Nu is Adobe Experience Designer uitgebracht, waarbij de functionaliteit van een web-en-mobielspecifieke "design-app" is gecombineerd met die van een prototype-app. Gezien de reputatie van Adobe en hun marktaandeel in de professionele sector, is het logisch dat veel mensen die in het verleden nog niet veel prototypes hebben gedaan nu die stap kunnen zetten.

Dus, zoals de meeste andere ultieme gidsen, deze is voor beginners. Het is voor mensen die net beginnen met het bouwen van prototypen op een regelmatige basis, ongeacht hun eerdere ervaring (of gebrek daaraan) in de ontwerpindustrie.

In deze handleiding proberen we vooral de basisprincipes te behandelen. Daarna zijn er links naar gidsen met verdere informatie en natuurlijk een grote lange lijst met apps en hulpmiddelen waarmee u kunt werken.

Wireframes en testmodellen versus prototypen

Nu, en de ontwerper die al een tijdje bestaat, heeft waarschijnlijk al met wireframes gewerkt en / of mockups ontworpen in een beeldbewerker. Zijn dit geen prototypen?

Nee. Niet altijd, hoe dan ook.

Het probleem met wireframes en statische mockups is dat ze ... nou ... statisch zijn. Er is veel informatie die ze simpelweg niet kunnen overbrengen over de functionaliteit van een ding. Dit kan leiden tot misvattingen in de hoofden van klanten, of zelfs van je ontwikkelaars, over hoe het ding hoort te werken. Om deze reden zijn prototypen meestal op de een of andere manier interactief.

De meest voorkomende uitzonderingen zijn conceptuele prototypen en uitzonderlijk goed gedocumenteerde statische prototypen. Wat het verschil maakt, is niet de interactiviteit zelf, maar het overbrengen van informatie over de beoogde functionaliteit van een product.

Dat gezegd hebbende, wireframes en mockups worden vaak gebruikt bij het maken van prototypen, dus niemand verlaat ze.

Wanneer heb je een prototype nodig?

Wanneer je moet laten zien hoe iets hoort te werken. Dat is het.

Het voor de hand liggende voorbeeld is dat van een web- of mobiele app. Apps hebben meestal een behoorlijk beetje functionaliteit die misschien niet gemakkelijk kan worden gezien of afgeleid van een mockup. Maar zelfs vrij statische, inhoudgestuurde websites kunnen een prototype vereisen.

Ten eerste heb ik klanten laten kijken naar modellen voor een eenvoudige bedrijfssite en vragen: "Oké, dus als ze op die dingen bovenaan klikken, 'Over ons', 'Services' en zo, die ze naar andere bedrijven brengt pagina's? ", of" Als ze op verzenden klikken op het contactformulier, krijg ik een e-mail? "

Zelfs eenvoudige ... taken zijn vaak beladen met onzekerheid ... prototypen kunnen helpen om een ​​deel van het giswerk weg te nemen

Zelfs eenvoudige browsetaken zijn vaak beladen met onzekerheid voor sommige gebruikers en potentiële klanten, dus prototypes kunnen helpen om een ​​deel van het giswerk uit het aftekenproces weg te nemen.

Bovendien zijn ze altijd handig bij gebruikerstests. Immers, als u al gebruikerstests gaat doen, kunt u het beste beginnen met een vroege preview van het project. Het laatste dat u wilt is dat u grote veranderingen moet aanbrengen nadat het meeste werk al is gedaan.

4 soorten prototypen

Voordat u begint met prototypen, moet u bepalen welk type u wilt gebruiken. Je kunt altijd meerdere soorten gebruiken in een bepaald project; de meeste ontwerpers doen dat op een gegeven moment.

Het soort prototype dat u kiest, moet geschikt zijn voor u, uw klant, het project en zelfs de specifieke fase van het project waarin u zich bevindt. Nu klinkt dat misschien ingewikkeld, maar het is echt niet zo slecht.

Elk van deze is bedoeld om in verschillende stadia van de ontwerpfase te worden gebruikt. De rest is aan jouw voorkeur, en hoe goed jouw klant is in het begrijpen van abstracte visuals.

Klanten die minder ervaren zijn met moderne ontwerpprocessen, kunnen iets verwachten dat er "opgepoetst" uitziet, zodat ze u kunnen vertellen het logo groter te maken, deze lijn een centimeter naar links te verplaatsen en dat hun site niet in het Latijn is , dus zou je wat Engels in kunnen brengen?

Als je daar problemen mee hebt, zijn meer gedetailleerde prototypen - en veel koffie - de beste keuze. Als dat niet het geval is, kun je iets vaags gebruiken en je richten op het bespotten van de beoogde functionaliteit.

1: Conceptuele prototypen

Deze zien er op de een of andere manier helemaal niet uit als het eindproduct. Bij conceptuele prototypen doen de details en lay-out van de interface er niet toe. De enige dingen waar je aan werkt zijn interacties en processen.

Het doel van elk prototype is om te laten zien hoe iets werkt, of zal werken. In die zin is dit prototyping in zijn puurste vorm. Het gaat letterlijk om de functie en de vorm komt er zelfs niet in.

Ze kunnen er in dit stadium bijna alles uitzien. Je kunt een flow-chart gebruiken, post-it notities, een PowerPoint-presentatie, een video die het proces uitlegt met grove, op pictogrammen gebaseerde illustraties, of een opname van jezelf die in de camera spreekt en woest met je armen zwaait. Alles wat duidelijk wordt, zal het doen.

Conceptuele prototypen worden meestal in de allereerste fase van een project gebruikt. Uw project heeft misschien niet eens een naam. Het is gewoon een idee voor een app of een website en je zegt dingen als: "Ja, ik denk dat het zo moet werken als dit ..."

2: Low-fi-prototypen

Low-fi prototypen zijn waar je begint met dingen zoals de lay-out en schermgrootte, en andere meer tastbare zorgen op te nemen. Ze worden meestal snel gemaakt en sneller weggegooid.

Ze zijn bedoeld om de snelst mogelijke manier te bieden om uw ideeën te herhalen totdat u en / of uw klant tevreden zijn met de basis. Word dus niet gehecht. De meeste hiervan zullen niet lang bestaan, en dat is maar goed ook.

Zoals eerder vermeld, is de term "low-fidelity prototypes" vaak uitwisselbaar met "wireframes". Inderdaad, deze fase vindt vaak op papier plaats.

Wanneer het in een app is gedaan, is het raadzaam om er een te gebruiken met basisfuncties voor prototyping, zoals koppelen aan andere schermen, annotaties, etc. Wireframing-apps hebben het voordeel dat ze gemakkelijker kunnen samenwerken via internet, maar ze zijn vaak een beetje trager gebruik.

Deze worden ook gebruikt aan het begin van een project, maar je hebt nu waarschijnlijk een bedrijfsmodel en een idee voor een naam. Het is tijd om de talloze ideeën die rond je hoofd zweven te doorzoeken en te herhalen tot je iets hebt waarvan je zeker weet dat het zal werken.

3: Medium-fi prototypen

Soms komt een low-fidelity-prototype niet goed genoeg over, en een high-fidelity is op dit moment te veel werk. Misschien heb je de stijlgids nog niet helemaal verfijnd, of zijn al je grafische middelen nog niet gemaakt.

In elk geval is dit het soort prototype dat je kunt gebruiken in het begin tot midden van de ontwerpfase. Ze zijn vaak gemaakt met prototyping-apps, die veel gebruikmaken van gesimuleerde interactie. Ze kunnen ook worden gebouwd met HTML en CSS, meestal met behulp van een CSS-framework.

Yup, Bootstrap en Foundation zijn waarschijnlijk twee van de grootste tools voor prototyping die er zijn.

Je moet hiervoor gebrandmerkt beeldmateriaal gebruiken als je het hebt, maar voorraadafbeeldingen zullen het doen. Voorraad UI-elementen worden meestal gebruikt om de gesimuleerde interface sneller uit te bouwen. Veel prototyping-apps worden geleverd met bibliotheken van deze elementen om uw werk sneller te maken.

Dit soort prototypen is geweldig voor de meer letterlijke denkers die een nauwkeurige benadering moeten zien van hoe het eruit zal zien en zal werken. Het is gemakkelijker voor hen om een ​​koptekst te negeren die "nog niet af is", dan een schetsmatig uitziende vorm die niet lijkt op een koptekst van een website zoals zij die kennen.

Voor deze klanten wilt u misschien uw ideeën snel in kaart brengen en deze nooit aan de klant laten zien. Maak vervolgens een prototype met een gemiddelde getrouwheid waarmee ze gemakkelijker kunnen zien waar u naar toe gaat.

4: prototypes met een hoge fi

Wel, we zijn er. En zo is uw project. Je hebt je mockups voor elk scherm en alles ziet er goed uit. Het is tijd om mensen te laten zien hoe dit gaat werken, in al zijn glorie, wanneer iemand het eindelijk met de back-end-code integreert.

High-fidelity-prototypen worden meestal gebruikt voor een definitieve aftekening op het ontwerp van de klant. Maar je kunt ze niet gewoon de PSD's sturen. Dit spul moet interactief zijn.

Dit gebeurt meestal op een van de volgende twee manieren. Sommigen gebruiken statische HTML en CSS om de gefinaliseerde beelden samen te brengen op een manier die semi-interactief is. Anderen gebruiken apps die afbeeldingen importeren, of zelfs onbewerkte PSD-bestanden, en voegen pseudo-interactieve functies toe om de uiteindelijke functionaliteit van de app na te bootsen.

Afhankelijk van de app kunt u deze prototypen zelfs op internet (of op een mobiel apparaat, als u aan een app hebt gewerkt) demo.

Prototyping methoden

Nu we de belangrijkste soorten prototypen die u kunt maken hebben besproken, is het tijd om de hulpmiddelen te gebruiken die zijn gebruikt om ze te maken. Ik noemde de meeste van deze in de vorige sectie, en hun basisgebruik; maar ik zou graag wat meer details willen bespreken.

Nogmaals, de methode die u kiest, moet afhangen van wat zowel u als de klant prettig vindt.

Prototypes voor video of presentatie

Deze worden vaak gemaakt om een ​​idee te verkopen voordat er concreet werk is gedaan. Ze zijn dus meestal gericht op potentiële investeerders. Ze kunnen ook voor klanten worden gebruikt; maar er zijn vaak efficiëntere manieren om met een klant te communiceren. Uw kilometerstand kan variëren.

De prototypen op basis van video en presentatie die zijn gemaakt voor verkooppraatjes, volgen meestal een commerciële formule:

  1. Introduceer een probleem waarmee de kijker zich zou kunnen identificeren.
  2. Laat zien hoe uw product dat probleem zal oplossen.
  3. (Optionele stap) een digitaal gerenderde bedrijfsmascotte doet een vrolijke dans terwijl hij een slogan uitschreeuwt.

Sommige van deze prototypes gebruiken alleen pictogrammen, tekst en illustraties. Anderen hebben animatie; en weer anderen gebruiken live-actie om het punt over te brengen. En dat is, nou ... het punt. Zolang je je idee verkoopt, heb je het goed gedaan.

Hier is een geweldig voorbeeld dat combineert video-prototyping met papieren prototyping.

wireframes

Wireframes kunnen op papier of in apps worden gedaan. Ze worden bijna altijd beschouwd als low-fidelity prototypen, hoewel ze kunnen worden opgewaardeerd naar medium-fidelity als je er voldoende tijd aan besteedt. Het is echter zelden de moeite waard.

Meestal zijn wireframes ontworpen om snel te worden getekend en weggegooid. Dit is een van de dingen die het tekenen op papier zo aantrekkelijk maken. Apps kunnen veel preciezer zijn en u kunt eenvoudig bestaande wireframes bewerken; maar er gaat niets boven de snelheid van een schets die niemand hoort te zien, behalve jezelf ... ooit.

Zoals eerder vermeld, hebben app-gebaseerde wireframes echter het voordeel dat ze gemakkelijker de functionaliteit van een interface nabootsen. Het tikken op een papieren draadframe zal gewoon een aangenaam thunk-thunk-thunk geluid maken.

Dat kan leuk zijn, maar het kan je betekenis niet overbrengen.

Je kunt er voor kiezen beide te gebruiken: papier om de meest elementaire concepten vast te spijkeren, en een app om het uit te werken en gemakkelijk te delen.

Papieren prototypen

Deze verschillen van wireframes doordat ze veel meer zijn dan tekeningen. In dit soort prototypen wordt papier gebruikt om een ​​fysiek, zij het nog steeds tamelijk plat model van de interface te maken. Je kunt een van deze in de video hierboven zien.

Interface-elementen worden meestal getekend, uitgesneden, soms gekopieerd om extra's te maken en vervolgens op een ander stuk papier gemonteerd. Dit geeft hen het voordeel van flexibiliteit. Als u een volledig vel papier weggooit met een draadframe, kunt u de elementen van een papieren model opnieuw rangschikken totdat u tevreden bent. Heb je een element dat de verkeerde maat heeft, nadat je de dingen een paar keer hebt herschikt? Snijd gewoon een nieuwe versie uit.

Ze voelen zich ook een beetje "echt" aanvoelen dan een draadframe. Hoewel er niets interessants zal gebeuren, kan een klant een papieren model aanraken. Ze kunnen het voelen. Die tactiele sensatie kan soms meer uitleggen aan een klant dan alles wat je ooit zou kunnen laten zien.

Iedereen heeft lichamelijk contact nodig om een ​​object beter te begrijpen. De helft van UX-ontwerp gaat over het opnieuw creëren van het gevoel van fysieke interactie met een digitale interface.

Medium en high-fidelity prototypen gemaakt met apps

Deze hebben veel gemeen met papieren prototypes. Prototypen gemaakt met een app zoals Invision, of een van de vele andere opties die er zijn (zie de lijst hieronder), zijn meestal gemaakt van vooraf ontworpen interface-elementen en vervolgens samengevoegd om het uiteindelijke product na te bootsen.

Het verschil is natuurlijk dat alles op het scherm wordt gedaan. Oh, en je kunt het doen met de definitieve graphics en branding, waardoor het prototype er precies zo uitziet als het eindproduct. Dan, zoals ik eerder al zei, kunnen sommige apps het product in de browser en op mobiele apparaten demonstreren.

Dit brengt het voelbare gevoel weer in het spel en u wilt dit. Als je je klanten dat gevoel kunt geven, en ze vinden het leuk, dan heb je in principe hun definitieve goedkeuring gekregen.

Code

Natuurlijk, als interactie is wat je wilt, dan is het bouwen van prototypen van de interface met code een goede manier om het te krijgen. Nu kunt u om een ​​aantal redenen kiezen voor prototypes op basis van een code:

  • het past gewoon beter in je workflow (zoals als je het toch in de browser ontwerpt);
  • uw site of app heeft veel knoppen en andere dingen om mee te werken;
  • u kunt prototype-code in het eindproduct gebruiken, waardoor u tijd bespaart;
  • je wilt interfacefunctionaliteit in de browser demonstreren zonder je lastig te vallen met een app;
  • je vindt het leuk om op toetsen te drukken en haat te klikken.

Prototypen in de browser kan iets trager zijn, vooral als er nog belangrijke herzieningen worden doorgevoerd. Ik zou het niet aanbevelen voor de eerste fasen van een project, dus het is het beste voor medium-tot-high-getrouwe prototypen.

Toch is het een van de beste manieren om te pronken met een bijna voltooid project, als je al graag met HTML en CSS werkt.

Prototyping met frameworks

Opgemerkt moet worden dat het gebruik van een raamwerk om prototypes te bouwen de codering op basis van code aanzienlijk kan versnellen. Als een bonus, als u het framework gebruikt dat bedoeld is om te worden gebruikt voor het eindproduct, is er minder codering om in het algemeen te doen.

Als een kanttekening hebben sommige mensen een drag-and-drop webpagina-editor gebouwd op basis van populaire kaders bootstrap en fundament . Met behulp van deze kan eens mogelijk alles worden gemaakt, van de low-fidelity-prototypen tot het uiteindelijke product met code.

Sommige mensen gebruiken ze echter gewoon om prototypen snel te bouwen en gebruiken vervolgens aangepaste code voor het uiteindelijke project. Het werkt hoe dan ook.

Tutorials en handleidingen maken van prototypen

Nu we alle basisprincipes hebben behandeld, is het tijd om echt in details te treden. Zoals met bijna al het andere in ontwerp en in het leven, is er geen juiste manier om een ​​prototype te bouwen. Er is alleen de manier die voor u werkt. Dat gezegd hebbende, succesvolle ontwerpprocessen hebben meestal een paar dingen gemeen.

Hier zijn een paar verschillende handleidingen voor prototyping die zich richten op verschillende methoden en getrouwheden om u op weg te helpen. Neem van hen af ​​wat voor u werkt, negeer wat niet werkt.

(We voegen geen app-specifieke zelfstudies toe omdat er gewoon te veel zijn.)

Ontwerp beter en sneller met Rapid Prototyping

Deze gids van Smashing Magazine richt zich op een methodologie voor het snel bouwen van prototypen en vaak herhalen.

Hoe protocuter ik snel websites

Dit is een meer persoonlijk artikel door Nick Pettit op de Treehouse-blog die zijn eigen benadering van prototyping schetst.

Hoe u snel websites kunt bouwen, met de workflow voor snelle prototyping

Hier is een derde artikel over rapid prototyping. Het lijkt populair te zijn. Deze staat hier op Webdesigner Depot en het schetst een paar tips en valkuilen die inherent zijn aan het proces.

The Skeptic's Guide to Low-Fidelity Prototyping

Nog een artikel van Smashing Magazine , deze gaat meer in detail over low-fidelity prototyping.

Hoe we prototypen

In deze diepgaande, en eerlijk gezegd fascinerend artikel het Newfangled-bureau beschrijft hun proces diepgaand. Het draait om browser-gebaseerde greyscreen prototyping, en ze overtuigen je om het uit te proberen.

Hoe de bruikbaarheid van prototypen te testen als een professional

Nog een hier op WDD , dit artikel gaat er allemaal om te zorgen dat je prototyping een punt heeft. Als u alleen uw usability-tests uitvoert nadat u het laatste project hebt voltooid, doet u het waarschijnlijk verkeerd.

Gratis ebook: de ultieme gids voor prototyping door UXPin

Je zult een deel van je persoonlijke informatie moeten opgeven (of gewoon liegen) om te krijgen dit ebook , maar hey, ze vragen niet om geld! het bevat meer informatie over populaire prototypingmethoden, app-gebaseerde tutorials en best practices van grote bedrijven zoals Google, Apple, Zurb en meer.

Nu is het gemaakt door de mensen achter UXPin, een prototyping-app, dus kunnen ze enigszins bevooroordeeld zijn over welke app je moet gebruiken. Toch heeft het veel goede informatie.

Tools en apps voor prototypen

Oké, dus je hebt de theorie. Het is tijd om te kraken over het bouwen van prototypen. Ervan uitgaande dat je niet vasthoudt aan papieren modellen of codes, ga je op een gegeven moment een app gebruiken.

Het goede nieuws: er zijn veel geweldige apps om uit te kiezen. Het slechte nieuws: er zijn veel geweldige apps om uit te kiezen.

Nogmaals, het komt allemaal neer op hoe je werkt. Heeft u de mogelijkheid nodig om mobiele apps te demonstreren? Moet je je bestanden synchroniseren met Google Drive, Dropbox of een andere service? Hoe zit het met de Github-integratie? Low-fi, medium of high-fi? Geavanceerde scripts?

De onderstaande apps zullen sommige of al deze opties bevatten. Ik zal de meest relevante functies voor elke lijst weergeven om u een idee te geven van waar u moet kijken.

Opgemerkt moet worden dat veel van deze in de eerste plaats bekend zijn als hulpmiddelen om draadlijsten te maken. Het is gebruikelijk dat wireframing-software de functies bevat die nodig zijn voor interactieve prototypen. Uw kilometerstand met deze apps kan variëren.

Adobe Experience Design CC

Deze is het nieuwste aanbod op de markt en het is klaar om serieuze concurrentie te leveren aan een enigszins verzadigde markt. Het is niet alleen een app voor draadaanlijning of prototyping; het is een design-app. Het is als Schetsen of het nu dood vuurwerk , maar het gaat een stap verder door je toe te staan ​​prototypen te maken van alles wat je net hebt ontworpen.

Het is momenteel alleen voor Mac en in de preview-fase, maar voor het einde van het jaar is een Windows-versie vereist.

De pre-releaseversie is gratis, zodra de definitieve versie is geleverd, maakt deze deel uit van Adobe's abonnement op Creative Cloud.

Presentatie software

Microsoft PowerPoint , Apple Keynote , LibreOffice Impress , en Google Presentaties kunnen allemaal worden gebruikt om prototypen te maken. Meestal zouden deze prototypes van de conceptuele variëteit zijn. Je kunt een bepaalde hoeveelheid interactiviteit nabootsen door dia's gewoon aan elkaar te koppelen.

Het zou net zo goed kunnen werken voor het prototypen van inhoudgestuurde sites, en de kans is groot dat u al ten minste een van deze programma's gebruikt. Zo niet, dan zijn Impress en Slides gratis.

invision

invision is nog een van de "grote namen", met meer high-fidelity prototyping. Het benadrukt versiebeheer en is trots op de realtime samenwerking en feedbackfuncties. Net als de Marvel-app, heeft deze ook animatie, prototype-insluiting, in-apparaat demo's en meer.

Bovendien kochten ze onlangs Silver Flows, een tool die prototypingfunctionaliteit met Sketch integreert. Ze zijn van plan het te gebruiken om Sketch te integreren met hun online software.

Er is een gratis abonnement, maar je kunt maar één prototype maken. Daarna kunt u beginnen met $ 15USD per maand.

Justinmind

Justinmind lijkt opzettelijk gericht op het creëren van high-fidelity applicatie-prototypen. De site noemt ook prototypering van responsieve websites. Er zijn ook demo's in de app.

Prijzen beginnen momenteel bij $ 19USD per gebruiker, per maand, als u jaarlijks betaalt.

Marvel App

Marvel App is een enorme app (een van de 'grote namen' in prototyping) met een gratis abonnement en een bescheiden prijs voor alle upgrades. Opvallende kenmerken zijn onder meer: ​​ondersteuning voor Photoshop en Sketch, synchronisatie met Drive en Dropbox, inbedding prototypes in webpagina's) en functies die uw prototypen veranderen in geanimeerde presentaties.

Deze gaat zeker over high-fidelity prototypen.

Axure

Axure is een beetje een rariteit met functies voor zowel low-fi als high-fi prototyping. het is zelfs nog vreemder, omdat het een desktop-app is met een eenmalige prijs. Het is ontworpen voor zakelijke gebruikers en grote teams, met functies voor het schrijven van uw eigen documentatie, projectbeheer en meer.

De standaardedities komen op $ 289USD per licentie.

HotGloo

HotGloo gaat alles over de low-to-medium-fidelity draadframes en prototypes. Het begon vooral als een wireframing-app, maar de functionaliteit voor meer geavanceerde prototypen is er.

Waar andere apps zich richten op prototyping van apps, heeft HotGloo zijn start met webontwerpers. Je kunt het dus echt doen.

Plannen beginnen bij $ 14USD per maand, en dat plan kan maximaal tien personen omvatten die samenwerken.

Proto.io

Annnnnnd we zijn terug bij de high-fidelity prototyping met Proto.io . Er zijn complexe interacties, animatie, exporteren, afdrukken, insluiten en apparaatdemonstraties allemaal ingebouwd. Prijzen beginnen bij $ 24USD per maand, maar er is een gratis proefperiode van 15 dagen als je er een draai aan wilt geven.

Stollen

Stollen wordt ons aangeboden door Zurb, hetzelfde bedrijf dat het Foundation-raamwerk maakt. Het is ontworpen om alles te behandelen (en feedback te krijgen), van schetsen tot high-fidelity-prototypen en mockups.

In plaats van te focussen op animatie en andere presentatiemiddelen, biedt Solidify een overvloed aan gebruikerstestmogelijkheden. U kunt tests in persoon of op afstand uitvoeren en de resultaten met uw team delen.

KNAL

KNAL onderscheidt zich van andere apps door u te helpen een hybride van draadframe-schetsen en digitale prototypen te maken. U begint met het maken van foto's van uw schetsen met een iPhone, Android-telefoon of Windows-telefoon en maakt van die schetsen een interactief prototype.

Als u het meeste van uw werk op papier doet, kan dit een geweldige manier zijn om de resultaten te delen. De service is gratis voor twee projecten en de abonnementen beginnen bij $ 10USD per maand.

Flairbuilder

Flairbuilder is een andere desktop-app, hoewel het een online viewer voor projecten heeft. Het lijkt afgestemd op medium-fidelity wireframes en prototypes. Er zijn functies waarmee u interactie kunt toevoegen, in-apparaat-demo's kunt uitvoeren en er wordt speciaal de nadruk gelegd op ontwerp op basis van een raster.

Het is geprijsd voor een eenmalige vergoeding van $ 99USD. Dat is steil, zeker, maar een stuk goedkoper dan Axure.

Flinto

Flinto heeft eigenlijk twee versies: er is een Mac-app en een op het web gebaseerde Lite-versie. Het verschil? De Mac-versie brengt complexere animaties, functies en interacties naar de tafel. Hiermee kunt u ook uw items importeren vanuit Sketch, wat de webversie niet kan.

Het kost $ 99USD als een eenmalige aankoop. Interessant is dat de Lite-versie (die 20USD per maand kost) een licentie voor de desktopversie bevat, waardoor je het beste van beide werelden krijgt.

UXPin

UXPin is een medium-naar-high-fidelity prototyping-app met alle functies die we gewend zijn. Zoals een paar van de anderen, heeft het ook real-time samenwerking, ingebouwde usability-testfuncties en projectbeheer.

In tegenstelling tot andere apps wil UXPin een one-stop-designwinkel zijn. Net als in kunt u Photoshop, Sketch of wat dan ook overslaan en uw draadframes omvormen tot mockups. Dit is op zijn zachtst gezegd ambitieus, maar als het werkt zoals beloofd, kan ik zien dat het nuttig is voor veel ontwerpers.

Prijzen beginnen bij $ 19UD per maand, per gebruiker.