UI Design Tools: The Ones You You Need Need (Edition 2018)

Dit artikel verscheen oorspronkelijk op Truth About Design, het platform voor openhartige waarheden en richtlijnen voor de ontwerpindustrie.

Videoversie van dit artikel:
https://www.youtube.com/watch?v=vqGxYZKTTw0

Een van de belangrijkste vragen die ik krijg als ik studenten begeleid, is: "Welke hulpmiddelen moet ik gebruiken voor het ontwerp van de gebruikersinterface? Schetsen? Photoshop? Hoe zit het met Adobe XD? ”(Ze vragen altijd naar Adobe XD.)

TL; DR: gebruik Sketch voor werk met een lage en gemiddelde betrouwbaarheid en Principle voor werk met een hoge betrouwbaarheid. InVision zal binnenkort verouderd zijn. Let goed op Figma en Framer X. Vanaf december 2018 zijn geen andere UI-ontwerptools de moeite waard om te gebruiken in een echte werkomgeving.

Voor dit artikel richten we ons op tools voor wireframing, prototyping en animatie. Natuurlijk zijn er andere geweldige tools voor UX-onderzoek, samenwerking, enz

De waarheid over UI-ontwerptools: de meeste zijn hetzelfde

Tot 2011 was Photoshop de enige tool die UX-ontwerpers tot hun beschikking hadden. Photoshop is echter geen tool voor interfaceontwerp. Het is een afbeeldingseditor met een paar functies die handig zijn voor het interfaceontwerp en een heleboel functies die dat niet zijn. Maar omdat Photoshop zo groot en zo populair was en goed genoeg werkte, dacht niemand (inclusief ik) dat er ooit iets anders zou moeten worden gebruikt.

In 2011 werd de Sketch App gelanceerd. Het was de eerste speciale interface-ontwerptool. Omdat er op dat moment niemand anders speciale UI-ontwerptools maakte en mensen (waaronder ik) erg sceptisch waren over deze nieuwe, onbewezen tool, kon Sketch jarenlang veel marktaandeel opslokken voordat iemand anders kon reageren. Ze speelden het ook erg slim door van Sketch een platform te maken waar anderen extra add-ons voor konden ontwikkelen, waardoor hun bereik en ecosysteem snel konden worden uitgebreid.

Sketch bevond zich destijds in een heel speciale positie, omdat ze een tool boden die echt 10 keer beter was dan de concurrentie, en het de moeite waard maakte voor bedrijven en teams om geld en tijd te spenderen aan het overschakelen naar een nieuwe workflow voor hun organisaties.

De moed van de Sketch-ontwikkelaars om zichzelf daar te plaatsen en een nieuwe tool te maken, en hun daaropvolgende succes, leidde tot een stroom van trendvolgers die nieuwe UI-ontwerptools bouwden. De meeste bieden echter weinig tot geen onderscheid met Sketch.

Vragen "welke UI-ontwerptool beter is, X of Y" is als vragen "welke oefening beter is, Bosch of Dewalt." Ze doen allemaal dezelfde dingen op zeer vergelijkbare manieren. De echte beslissende factor voor welk hulpmiddel u gaat gebruiken, is niet wat het kan doen, omdat alle hulpmiddelen een gebruikersinterface kunnen bouwen met basisinteracties.

De echte vragen die u moet stellen zijn:

  • Wat gebruikt mijn team?
  • Wat gebruikt mijn bedrijf?
  • Wat zijn de industriestandaarden?

En in de meeste gevallen, voor het meeste werk, wordt dat Sketch. Bedrijven gaan niet meer overschakelen naar een nieuwe tool, nadat ze twee of drie jaar geleden gewoon zijn overgeschakeld naar Sketch, alleen omdat de nieuwe tool in het blok een of twee dingen iets beter doet dan Sketch.

Vragen "welke UI-ontwerptool beter is, X of Y" is als vragen "welke oefening beter is, Bosch of Dewalt."

Sketch bevindt zich in de positie waarin Photoshop zich vroeger bevond, maar ze rusten niet op hun lauweren zoals Photoshop deed. Sketch maakt langzaam InVision overbodig door cloudgebaseerde prototyping-tools op te nemen. Er zijn een aantal add-ons voor animaties van derden voor Sketch waarmee je je hele workflow van lage tot hoge kwaliteit binnen Sketch kunt houden. Ik heb ze echter nog niet geprobeerd en ze zien niet veel tractie in de industrie.

Gebruik het principe voor micro-interacties, animaties en hifi-prototypen

Sketch is de industriestandaard voor het maken van statische mockups en prototypes met elementaire interactiviteit. Complexere prototypen en animaties zijn momenteel echter niet mogelijk in Sketch. De tool die de meeste acceptatie ziet voor het doen van dat soort complexe animaties is Principle. Met Principe kunt u eenvoudig uw Sketch-bestanden importeren en complexe animaties heel gemakkelijk uitvoeren. Er is een reden waarom het is overgenomen door alle grote spelers in de ontwerpruimte.

Tools om naar te kijken: Framer X en Figma

De meeste UI-tools die er zijn, verschillen niet genoeg van Sketch om u een echte reden te geven om over te schakelen. Maar twee tools hebben een heel andere benadering van Sketch voor UI-ontwerp, en omdat ze helemaal opnieuw rond deze nieuwe aanpak zijn gebouwd, is er een kans dat dit zijn vruchten afwerpt op een manier waarop Sketch zich niet kan aanpassen.

Figma: Google Documenten maar voor interfaceontwerp

Weet je hoe jij en je vrienden in Google Documenten tegelijkertijd aan dat essay of die presentatie kunnen werken, en het wordt altijd automatisch opgeslagen in de cloud en je hebt er vanaf elke computer toegang toe? Dat is wat Figma heeft gedaan voor interfaceontwerp. Ze namen in wezen Sketch en stopten het in een browser.

Figma is momenteel de grootste kanshebber omdat:

  • Het heeft veel financiële steun van Silicon Valley
  • Ze brengen elke week updates uit
  • Het is gratis voor solo-ontwerpers
  • Ze zijn platform-agnostisch (werkt op elke computer), dus ze kunnen marktaandeel veroveren van niet-Mac-gebruikers en mensen die zich geen Sketch kunnen veroorloven
  • Het heeft een legitiem punt van differentiatie van Sketch, met zijn realtime samenwerkingsfuncties, die Sketch niet gemakkelijk kan kopiëren

Framer X: de kloof overbruggen tussen ontwerp en code

Framer X is een ander interessant hulpmiddel om naar te kijken. Wat hem onderscheidt, is zijn diepe integratie met ontwikkelingstools. Theoretisch kun je in Framer ontwerpen en productieklare code exporteren. Dit kan de workflow en samenwerking tussen ontwerpers en ingenieurs aanzienlijk versnellen. Maar is de verbetering van de workflow zoveel beter dat het de moeite waard is om opnieuw over te schakelen naar een andere tool? Zullen ontwerpers bereid zijn met code te spelen? Het is moeilijk te zeggen op dit punt.

Framer is ook niet gratis. Het is $ 15 / maand ($ 12 als u jaarlijks betaalt), wat duurder is dan een jaarlijkse licentie van Sketch. Met hun prijsmodel en functies weet ik niet zeker op welke doelgroep ze zich richten.

Mijn hypothese is dat de technische kant van dingen te complex en te diep is om door een ontwerptool te worden overgenomen. Het herinnert me veel aan wat mensen 15 jaar geleden probeerden te doen met editors zoals Dreamweaver. Die hebben nooit gewerkt voor echte hardcore productieomgevingen. Maar het is een goed doordacht hulpmiddel met veel bronnen, dus we zullen zien.

Hoe zit het met andere tools?

Voor levensechte werkinstellingen raad ik je aan om nu geen andere tools te gebruiken dan Sketch and Principle. Beginners in elke branche denken graag na over welk hulpmiddel ze moeten gebruiken omdat het veel gemakkelijker is om dat te doen dan om kwaliteitswerk te doen. Als je echter gewoon nieuwsgierig bent om zelf een beetje te experimenteren, is de beste bron om relevante nieuwe tools te vinden om te proberen http://uxtools.co/design - het is een ranglijst van alle populaire UI-ontwerptools die er zijn direct.

En als je geïnteresseerd bent in een carrière in UX-ontwerp, ben ik momenteel mentor bij Springboard en kan ik instaan ​​voor de kwaliteit van hun curriculum. Het biedt een-op-een mentorschap van experts in de industrie zoals ik en laat je werken aan real-world projecten om een ​​unieke portfolio te ontwikkelen. Ze garanderen ook dat je binnen 6 maanden na je afstuderen een baan krijgt, of ze geven je je geld terug.

Jamal Nichols runt Truth About Design, het platform voor openhartige waarheden en richtlijnen voor de ontwerpindustrie.