Accentsconagua
Share
Laten we een paar prototyping-tools bekijken die vandaag beschikbaar zijn voor webontwerpers, in willekeurige volgorde:
Het uitproberen van ideeën naar belanghebbenden en klanten kan in het begin moeiteloos lijken, maar wanneer de zaken moeilijk worden, hebben we hulpmiddelen nodig om het feedbackproces te versnellen. Het web wordt steeds gecompliceerder voor front-end ontwerpers, met steeds meer interactieve verzoeken. Acties zoals vegen en slepen vormen slechts het topje van de ijsberg, en uitvinden hoe de hele puzzel bij elkaar past, is waar de ware kunst van prototyping ligt.
Per definitie is een "prototype" een vroeg voorbeeld dat is gebouwd om specifieke concepten te testen. Een prototype wordt gebruikt om een systeem te evalueren en verbeteren om beter inzicht te krijgen in het project als geheel. We werken allemaal dagelijks aan projecten en sommige zijn veel ingewikkelder dan andere, maar wanneer is het tijd om te vragen om een hulpmiddel om te helpen in de feedbackvoedselketen?
Sommigen beweren dat code in het begin veel sneller is, maar er zijn momenten waarop tijd beter besteed kan worden aan het gebruik van een prototype in plaats van tijd te besteden aan het ontwikkelen van iets dat snel in de schaduw zou kunnen raken. Prototyping nodigt uit tot feedback over interactie en plaatsing. Het is een interactief draadmodel waarmee klanten beter begrijpen hoe het project bij hun gebruikers past.
Andere tijden, prototyping vóór codering kan het project ten goede komen door eventuele randgevallen te identificeren die mogelijk zijn gemist.
Wanneer we ons afvragen waar dit vandaag in het landschap past, kunnen we de steeds toenemende vraag naar bewegingswerk zeker aanmerken. Interfaces worden levende organismen met interactieve inhoud. Eenvoudige interacties kunnen worden verbroken en droog om verbaal uit te leggen, maar in andere contexten helpt het om inzicht te krijgen in hoe een interactie kan worden geactiveerd - en meer klanten eisen een bewijs van concepten voordat ze zich afmelden. Het is belangrijk, nu meer dan ooit, om een idee te hebben over waar te schakelen wanneer de noodzaak tot prototype moet ontstaan.
Met zoveel tools op de markt, welke moet je dan gebruiken? Laten we kijken.
FramerFramer geeft de vertrouwdheid van visuele bewerking met de flexibiliteit van code, waardoor een naadloze workflow wordt geboden, aangevuld met apparaatvoorbeelden, versiebeheer en eenvoudig delen. Een app die nieuwe interactiepatronen helpt pionieren om baanbrekende apps te maken. Trek gegevens aan uit uw favoriete API, leg echte gebruikersinvoer vast om te testen en werk met echte gebruikers en feedback. Importeer afbeeldingen rechtstreeks vanuit Sketch, Photoshop of Figma.
Hoewel Framer lijkt alsof het alleen voor mobiele apps wordt gebruikt, kan het ook worden gebruikt voor niet-app-projecten of als zelfstandige bibliotheek. Wanneer u de Framer JS-bibliotheek alleen gebruikt, vermijdt u de IDE volledig. In wezen is het een open source JavaScript-framework voor rapid prototyping. Definieer animaties en interacties, compleet met filters, veerfysica, 3D-effecten en meer. Hoewel CoffeeScript niet vereist is, gebruiken de documenten zowel CoffeeScript als de IDE.
Het moet bekend zijn dat Framer niet bedoeld is voor het maken van productieklare animaties.
@UXDesignDad @framer Hey Andre! Framer is een prototype-tool voor de Mac. Dus geen productie-apps 😁
- Krijn Rijshouwer (@krijnrijshouwer) 2 februari 2017
Omdat Framer zijn eigen concept van lagen heeft en behoorlijk zwaar is qua code, kun je het niet gebruiken in gewone (bestaande) DOM-dingen zoals je met GreenSock zou kunnen doen. In feite plaatst het zijn eigen canvas in de DOM en alle animaties worden in dat canvas uitgevoerd.
Adobe XDTeken, hergebruik en remix vector- en rasterafbeeldingen om wireframes, schermlay-outs, interactieve prototypen en productiegereedschappen te maken allemaal vanuit dezelfde app. Werk met krachtige hulpmiddelen zoals Repeat Grid, speciaal gebouwd voor XD, en met lagen, symbolen en penhulpmiddelen voor UX-ontwerp. Voeg interacties toe met behulp van verschillende animaties om overgangen tussen kunstborden te maken om de stroom van uw app / website te simuleren.
Cliënten kunnen rechtstreeks opmerkingen maken over uw prototypen wanneer u deze rechtstreeks deelt en ontwerpen in realtime bekijken op echte apparaten. Ontwerpen kunnen worden aangepast en automatisch worden bijgewerkt op verschillende platforms. Schakel eenvoudig van wireframing, visueel ontwerp, interactieontwerp, prototyping, preview en delen, alles in één krachtige tool.
XD is nog steeds een bètaproduct, maar het valt nog te bezien of het nog zal blijven bestaan in de nabije toekomst. U kunt meer lezen over de functies die hier zijn uitgegeven om op de hoogte te blijven van aanstaande wijzigingen en verbeteringen. We hebben zelfs een 15-delige serie gepubliceerd die alle essentiële gereedschappen omvat die je nodig hebt om te beginnen met ontwerpen en prototypen met Adobe XD:
Adobe na effectenAfter Effects is niet specifiek een prototyping-tool voor websites en applicaties (hoewel je er nog steeds mee wegkomt), maar het helpt prototypen van bewegingen voor mensen die op zoek zijn naar een manier om comp / mockup-animaties voor klanten te maken. Maak bewegende beelden voor video of maak animatie-effecten voor het web. Hier is een geweldig artikel over Tuts + door Charles Yeager:
Bekijk ook deze tiendelige serie over Tuts + genaamd Welcome to After Effects.
Adobe Animate CCAdobe Animate is een ontwikkeling van Flash Professional. Het is een tool met functies zoals tijdlijnen, keyframes, uitgebreide exportopties, ondersteuning voor JavaScript-bibliotheken van derden, aanpassingen van de camerapositie en nog veel meer. Hoewel het meer gericht is op animators, laat je dan niet misleiden door te denken dat je het niet voor andere doeleinden kunt gebruiken. Onthoud dat tools zoveel doen als u wenst en alleen worden beperkt door uw verbeeldingskracht. Gebruik het voor wireframes op websites, animatietesten voor apps en meer. U kunt in dit artikel lezen over de werking van Adobe Animate door ondergetekende:
Craft PrototypeBouw hifi-prototypen met je echte ontwerpbestanden. Ambacht maakt deel uit van de Invision-familie; een bedrijf dat tegenwoordig veel tools (zoals Macaw en Easee) aanschaft van externe entiteiten.
Craft Prototype is een krachtige set gereedschappen waarmee u kunt ontwerpen met echte gegevens en met één klik stijlgidsen kunt maken. Met een prototype kunt u het werk direct vanuit Sketch uitvoeren; alles in één ruimte. Met real-time mirroring naar je telefoon kun je prototypes van ontwerpen meteen uittesten. Wanneer u klaar bent om te delen, kunt u uw werk rechtstreeks in Invision publiceren om direct feedback van klanten en belanghebbenden te krijgen. Je kunt zelfs prototypen met een hogere getrouwheid met beweging, waardoor je een tijdlijn hebt om visueel aan te passen met behulp van keyframes. Genereer HTML en CSS, native swift code en documentatie voor uw ontwikkelaar. Bekijk deze korte video over Craft 2.0 Preview - Prototype in Sketch on Vimeo.
BeginselPrincipe maakt het eenvoudig om geanimeerde en interactieve gebruikersinterfaces te ontwerpen. Of je nu de stroom van een app met meerdere schermen ontwerpt of nieuwe interacties en animaties, met Principe kun je ontwerpen maken die er geweldig uitzien en er fantastisch uitzien. De app lijkt erg veel op de gebruikersinterface voor Sketch, inclusief andere bekende aspecten voor uitlijning, het maken van artboards en schermverbindingen, plus realtime voorbeelden. Klik op animatielagen om dieper in de hoofdframes te duiken en aangepaste versnellingscurven aan te passen, net als bij andere animatiegereedschappen. Principe geeft je de vrijheid om te experimenteren zonder je te beperken tot vooraf gedefinieerde overgangen, plus je kunt ook tekengebieden van Sketch importeren.
Met de app Principlespiegel voor iOS kunnen anderen je ontwerpen op hun apparaat bekijken. Tijdens het ontwerpen kun je direct communiceren door je apparaat op de computer aan te sluiten of een zelfstandige Mac-app te exporteren zodat anderen deze kunnen bekijken.
atomairAtomic is een webgebaseerde app die integreert met Sketch, zodat u ontwerpen vanuit daar of waar dan ook naar keuze kunt importeren. Het invoeren van ontwerpen in Atomic is eenvoudig; gebruik de krachtige Sketch-plug-in of laat elementen uit uw favoriete ontwerptool vallen.
Atomic heeft ingebouwde teken- en lay-outtools voor het ontwerpen van de grond af of het bouwen op geïmporteerde ontwerpen. Koppel uw ontwerpen snel aan een reeks gebaren en overgangen voor mobiel of desktop. Gebruik aangepaste CSS om aanvullende stijlen toe te passen en exporteer ook uw CSS om te delen met andere ontwikkelaars. Lees meer over de functies van Atomic op hun website.
ProtoBouw geavanceerde animaties voor elk interactiepatroon met de eenvoudig te gebruiken tijdlijn met Proto. De app wordt geleverd met een complete set UI-bibliotheken, zoals iOS9, Material Design, Windows 10 en meer. Ontwerpen kunnen worden geïmporteerd met behulp van de Sketch of de Photoshop-plug-in; importeer ze in lagen en synchroniseer met Dropbox. Exporteer UI-items rechtstreeks. Bekijk prototypen in een browser of apparaten met de proto-app voor IOS of Android. Deel met klanten of teamleden om samen te werken en feedback te genereren. Proto kan worden geïntegreerd met toonaangevende gebruikerstestingtools om krachtige feedback en inzicht te krijgen.
Lees meer over de functies op de Proto-website.
JustinmindJustinMind is een app-gebaseerd product voor het transformeren van eenvoudige mockups in interactieve prototypen voor iOS en Android en het maken van web- en mobiele wireframes. Profiteer van vooraf gebouwde UI-bibliotheken, sluit HTML en documenten in alles wat uw hart begeert. Met betaalde accounts kunnen meerdere gebruikers tegelijkertijd met hetzelfde prototype communiceren, waardoor feedback moeiteloos te winnen is. Het heeft zelfs een uitgebreide bibliotheek met vooraf bestaande widgets die zijn afgestemd op de apparaatsjabloon die voor uw project is geselecteerd. Elementen zoals interactieve knoppen, checkboxes, lijsten en zelfs parallax-lay-outs staan tot uw beschikking.
Als u nog niet bekend bent met deze tool, zit deze boordevol geweldige tutorials en begeleide video's voor iedereen, van beginner tot expert. Hoewel het een gratis abonnement voor het delen van browsers biedt, moet je upgraden naar een betaald account voor samenwerking tussen je teamleden. Met JustinMind Prototyper kunt u afbeeldingen importeren vanuit elk ontwerpprogramma of rechtstreeks vanuit uw webbrowser en ze veranderen in spannende en boeiende webprototypes met de tool "image hotspot". Exporteer uw prototype naar een volledig functioneel HTML-document en maak het direct beschikbaar voor weergave in elke webbrowser.
Origami wordt door Facebook-ontwerpers gemaakt en gebruikt en is gebruikt om dergelijke apps zoals Instagram, Messenger en Paper te maken. Kopieer alles van Sketch en plak native layers in Origami Studio. Pas snel aan, voeg gedrag toe en animeer elke laageigenschap zonder terug te gaan. De tool biedt ontwerpers een reeks gebaren en overgangsanimaties die gemeenschappelijk zijn voor UI-patronen.
Origami biedt handige functies voor interactieve prototypes, samen met plug-ins voor Sketch en Photoshop, evenals een documentatiebibliotheek met forums.
Er is een functie "Exporteren naar code" waarmee u uw visuele ontwerp kunt converteren naar geschreven codevoorbeelden voor iOS, Android of internet. U kunt prototypen niet rechtstreeks delen met personen die op andere apparaten werken dan die van uzelf, hoewel u uw prototypen kunt bekijken met Origami Live, beschikbaar voor Android en iOS. Bekijk de tutorials voor meer informatie over de Origami-website.
FlintoFlinto voor Mac is een app-gebaseerde tool waarmee je alles kunt maken van eenvoudige doorzichtige prototypen tot uitgebreide prototypen met interacties. Er is geen programmering of tijdlijn; het is een hulpmiddel voor prototyping voor ontwerpers in de kern. Plaats voorwerpen en componenten waar u maar wilt. Overgangen kunnen eenvoudig of complex zijn en overgangen zijn herbruikbaar. U hebt nauwkeurige controle over elke laag, inclusief verjonging met veren of cubic bezier.
Gebruik de "behaviour designer" om micro-interacties te creëren die binnen één scherm bestaan. Dit is perfect voor dingen als knopeffecten, tuimelschakelaars, looping-animaties en op scrollen gebaseerde animaties.
Het toevoegen van schuifgebieden aan je schermen is ook eenvoudig; selecteer lagen en klik op de knop "schuifgroep". U kunt een verscheidenheid aan opties aanpassen, paging-scrollgroepen maken, scrollgroepen nestelen en zelfs op scrollen gebaseerde animaties maken.
Alle wijzigingen die u in Flinto voor Mac aanbrengt, kunnen onmiddellijk worden getest in het voorbeeldvenster of op uw met WiFi verbonden iPhone of iPad met behulp van de gratis iOS-viewer-app.
Flinto's iOS-viewer-app is gratis in de App Store voor iedereen om te downloaden, dus je kunt je Flinto-bestanden verzenden naar iedereen met wie je wilt delen.
WebflowWebflow is een andere webgebaseerde app die rechtstreeks wordt uitgevoerd in de nieuwste versies van Chrome en Safari. Dit betekent dat het momenteel is geoptimaliseerd in de genoemde browsers, maar de geproduceerde code heeft ondersteuning voor verschillende browsers.
"Bouw dynamische, responsieve websites zonder code te schrijven. Lanceer met een klik en geniet van de snelste en betrouwbaarste hosting op internet. Exporteer schone, semantische code om aan ontwikkelaars over te dragen. "
Webflow is sterk gericht op webanimaties, interacties en responsief webdesign. Interacties 2.0 komt eraan en biedt meer controle over animaties en interacties tussen breekpunten (vaak een pijnpunt dat ontwerpers uitdrukken), en natuurlijk het gemak van visueel bouwen versus een proxy van code.
Om u een voorproefje van de Webflow-mogelijkheden te geven, kunt u deze live demo bekijken die ook te bekijken is in Webflow of de code nakijken die in deze CodePen-demo is geproduceerd. Het is ook nuttig om een voorproefje te krijgen van de gebruikersinterface in deze video.
De kwaliteit van de code die wordt geproduceerd is semantisch, leesbaar en gemakkelijk om mee te werken als u het extern exporteert en gebruikt of afgeeft aan een ontwikkelaar. Hier zijn een paar demo's waarin de geproduceerde code wordt getoond.
Momenteel is interactie V1 beschikbaar en zal Interactions 2.0 meer aanpassingen bevatten met animaties van het type parallax en visueel ingebouwde interactiviteit; animaties op basis van cursor / live-schuifpositie. Webflow hoopt binnenkort de bèta te lanceren, dus Interactions 2.0 zal een groot deel van de interface zijn en een grote reden voor veel ontwerpers en ontwikkelaars om Webflow te gebruiken.
Dank aan Waldo Broodryk van Webflow die de tijd nam om veel van mijn vragen te beantwoorden en zijn demo's en kennis te delen.
Met de browsergebaseerde editor van Marvel kunt u al uw ontwerpen aan elkaar koppelen, bewegingen en overgangen toevoegen om uw prototype net een echte app of website te laten voelen. Maak prototypen voor de iPhone, iPad, Desktop, Apple TV, Apple Watch en Android.
Marvel biedt functies zoals samenwerken, reageren en ontwerpen in je browser met "Canvas", plus je kunt afbeeldingen toevoegen met Photoshop, Sketch of pen en papier. Gebruikers kunnen klikken en slepen om interactieve hotspots te maken op ontwerpen die reageren wanneer erop wordt geklikt of aangeraakt. Marvel wordt geleverd met andere coole functies zoals een Sketch-plug-in en zelfs een iOS-tool. De iOS-app bevat nu Canvas (eerder genoemd), de snelle ontwerptool van Marvel waarmee je vanuit het niets app-mock-ups kunt maken. Deze app bevat ook Iconfinder en Unsplash, waarmee je een epische database van meer dan een miljoen stockfoto's en pictogrammen kunt opnemen die je kunt gebruiken in je ontwerpen.
Marvel biedt ook functies zoals gebruikersrollen, projectorganisatie met behulp van mappen, het synchroniseren van ontwerpen uit Google Drive, opties voor het insluiten van video en audio van YouTube, Spotify, Vimeo en SoundCloud..
Placeit: mockup-generatorPlaceit is een mockup-generator; een online tool waarmee u uw eigen ontwerpen (of het nu om UI-ontwerpen, logo's of andere brandingactiva) in presentatie-omgevingen kunt insluiten. U kunt bijvoorbeeld een app-ontwerp hebben dat u in een iPhone op een salontafel wilt plaatsen, of uw logo op het shirt van een model leggen.
Misschien wil je je ontwerpen zelfs laten embedden in video's zoals deze:
UI-ontwerp ingebed in Placeit-voorraadvideoMet bijna 3000 sjablonen en tellen, heeft Placeit gegarandeerd wat je zoekt.
Ongeacht de tool die u besluit te gebruiken, kies degene die bij u past en degene die u het prettigst vindt. Laat hieronder een opmerking achter als u ervaring heeft met een van de genoemde hulpmiddelen om anderen te helpen beslissen welk hulpmiddel u moet gebruiken. Ik hoop dat dit artikel je helpt meer inzicht te krijgen en tot een weloverwogen beslissing komt wanneer het tijd is om te kiezen.
Speciale dank aan deze mensen voor hun inbreng, kennisuitwisseling en meningen tijdens mijn onderzoek:
