De beste metgezellen van de UX-ontwerper voor schets

Een toolbox vol efficiëntie

Inmiddels denk ik dat we het er allemaal over eens kunnen zijn dat Sketch het beste ontwerpprogramma op de markt is. Afgezien van het aanbieden van een van de eenvoudigste interactiemodellen die ik ooit heb meegemaakt (ik schakelde letterlijk 's nachts over van Fireworks naar Sketch toen ik mijn eerste MacBook in 2014 kreeg ... het was een donkere tijd in mijn Windows-dagen, maar het bouwde zeker karakter).

Een deel van de goedkeuring van Sketch is ook te danken aan de eenvoudige integratie met andere applicaties van derden en de open benadering van plug-ins.

Er is een zee van tools en plug-ins. Dit is geen uitputtende lijst (u kunt daarvoor google.com gebruiken). In plaats daarvan beschouw ik het als een fantastische mix van tools voor UX-ontwerpers (dat wil zeggen dat ontwerpers zich meer richtten op schaalbaarheid, proces, communicatie en minder op visuele experimenten en animatie).

Schets sneller en efficiënter

Dat is de magie van plug-ins. Sommige plug-ins zijn mooi geïntegreerd met sneltoetsen, en andere hebben volwaardige interfaces in Sketch.

Sketch Runner door Roy van Rooijen (en team!)

Het is net Spotlight voor Sketch. Het is voor meer geavanceerde gebruikers, deels omdat de meeste opdrachtregelstijlinterfaces bedoeld zijn voor mensen die weten wat ze doen, maar ook omdat de plug-ins en symboolfunctionaliteit die het stroomlijnt meer gericht zijn op experts. Dat gezegd hebbende, maakt het op het meest basale niveau navigatiestijlen en symbolen een stuk sneller dan de onhandige dropdowns van Sketch.

Hernoem lagen door Rodrigo Soares

Ik gebruik dit altijd. Lagen in bulk hernoemen, of zoeken en vervangen. Voor de eindeloos georganiseerde ontwerper is het een must-gebruik.

Craft van InVision

Ik gebruik voornamelijk Craft Data om voorbeeldgegevens op te halen en Craft Sync om mockups naar InVision te pushen zodat ze kunnen worden bekeken met Inspect (daarover later meer).

Nudg.it van Anthony Collurafici

Als u een 8-px raster voor uw interface gebruikt (wat u zou moeten), dan heeft u deze tool absoluut nodig. Hiermee kunt u wijzigen wat de kleine en grote stappen zijn voor nudging in Sketch (standaardwaarden zijn respectievelijk 1 px en 10 px). Voorbij zijn de dagen dat ik SHIFT-Arrow Right, dan Arrow Left + Arrow Left zou gebruiken om een ​​object met 8 px naar rechts te verplaatsen. Ik kan geen eenvoudiger hulpmiddel bedenken dat me zoveel vervelende klikken in Sketch heeft bespaard dan deze.

Auto-layout door Anima App

Toen Sketch nieuw gedrag voor groepering uitbracht, was het een redder in nood voor diegenen die responsiviteit moesten mocken. Het grootste nadeel is dat het gedrag van deze besturing een beetje onduidelijk is. Auto-Layout lost dat op met een eenvoudig te gebruiken plug-in waarmee je responsieve lay-outs kunt maken

Deel met belanghebbenden

Marvel door Marvel

Dit wordt snel onze nieuwe favoriet. Iedereen kent InVision op dit moment, dus we zullen ons concentreren op deze app. Een belangrijk onderscheid hier is dat u uw ontwerpen openbaar kunt maken in een etalage of kunt kijken naar het werk van andere ontwerpers. Het heeft ook een AppleTV-app voor het tonen van tvOS-apps. Veel ontwerpers ontwerpen nog steeds niet op dit medium, maar het verandert snel.

Bekijk dit project hier.

Snellere ontwikkeling Handoff

Dit heeft de afgelopen 18 maanden een lange weg afgelegd. U hebt nu twee uitvoerbare opties, waarbij de ene veel volwassener is dan de andere. Je hebt ook de mogelijkheid om je eigen ontwerpen te coderen, waarmee je neerbuigende artikelen kunt schrijven waarin we allemaal ontwerpers vertellen hoe dom we zijn

Zeplin van Zeplin

Ik hou van het team en de ondersteuning die deze app heeft. Kortom, het heeft de UI-specificatie gedood. Exporteer tekengebieden van Sketch die u beschikbaar wilt stellen aan ontwikkelaars en deze wordt gesynchroniseerd met een deelbare URL. Ontwikkelaars kunnen op elk grafisch element klikken en krijgen bijna elke eigenschap (rand, kleur, lettertype, enz.) Met bijbehorende CSS. Zeplin blijft slim uit HTML, wat veel te moeilijk is om te extrapoleren vanuit een UI-ontwerp.

InVision Inspect door InVision

Dit heeft bijna identieke functionaliteit van Zeplin maar werkt als een uitbreiding van het InVision-prototypingproduct. Het is leuk dat het in de suite past, maar ik waarschuw je dat het ook je bronschetsbestand deelt via de knop 'Activa downloaden' in de rechterbovenhoek, wat waarschijnlijk een verbreking is voor degenen die bronbestanden als privé beschouwen.

Animeer uw gebruikersinterface

De belangrijkste beslissing die u moet nemen, is hoe complex u uw animatie wilt. Ik vermeld hier twee opties voor de eenvoudige en meer geavanceerde. Merk ook op dat ik volwaardige animatiesoftware zoals After Effects en Flash (lol jk) laat staan ​​die niet goed zijn geïntegreerd in de productontwerpworkflow.

Principle van Daniel Hooper

Principle is een zeer schetsachtige interface voor het toevoegen van eenvoudige animaties en overgangen aan uw ontwerp. Het vereist dat uw lagen goed gegroepeerd en benoemd worden omdat ze met die namen in Principle worden geïmporteerd en het besturen van de objecten een stuk eenvoudiger is met goede namen ... TIP TIP.

FramerJS door Framer Team

Ik heb hier niet veel mee gespeeld omdat ik niet veel animaties doe, maar het is veel krachtiger dan Principle. Het is moeilijker omdat je echte code moet schrijven. Maar het is geweldig omdat je de echte code moet schrijven.

Beheer bronnen

IconJar

Er zijn enkele andere alternatieven op de markt zoals Lingo by Noun Project, maar deze is goedkoper en werkt als een charme . Met IconJar kun je eenvoudig pictogrammen beheren, en als bonus kun je lettertypen toevoegen en worden SVG's voor elke glyph gemaakt. Dit betekent dat je een pictogramlettertype kunt invoeren en alle personages als afzonderlijke symbolen kunt krijgen in plaats van pijnlijke cheatsheets te gebruiken. Steeds meer pictogramontwerpers maken hun pictogrammen uit de doos compatibel met IconJar, wat betekent dat uw massieve pictogramreeksen moeiteloos worden georganiseerd.

Gewoon uw bronnen

Zoals we in het verleden hebben gezegd met betrekking tot het ontwerpen van applicaties, bouwen de meeste UX-ontwerpers apps zonder de luxe van aangepaste visuele elementen. Deze lijst helpt de zee van hulpbronnen te verzamelen in een kleine set die je gratis kunt gebruiken.

Icons

  • Google Material Icons - voor MD-projecten is dit de hoofdset.
  • Nova Icons - een geweldige uitbreiding van pictogrammen met een MD-gevoel.
  • Nucleo - diverse en groeiende reeks pictogrammen die wordt geleverd als een native app die u controle geeft over straal, kleur en grootte.
  • Magicons - een kleinere set maar geweldig als basis voor de meeste apps.

fonts

Het kiezen van lettertypen voor UI Design is niet bepaald raketchirurgie omdat je gewoon een leesbare sans-serif moet kiezen die veelzijdig en leesbaar is, die moet werken op knoppen, labels, headers, enz. Ik vermijd hier het vermelden van TypeKit-lettertypen omdat , eerlijk gezegd, er zijn te veel subtiele variaties van lettertypen die bij de rekening passen. De onderstaande gratis Google-lettertypen werken meestal voor de meeste van uw projecten.

  • Roboto - dit is een geweldig lettertype, maar erg gebonden aan Material Design, dus het kan moeilijk zijn om te gebruiken buiten MD-gebaseerde projecten.
  • Open Sans - Meest veelzijdige lettertype van het stel. Dit is al jaren in de mode en vertoont geen tekenen van vertraging. Het heeft veel gewichten voor al uw UI-behoeften.
  • Lato - ik gebruik dit niet voor elk soort ontwerp omdat het enkele dunne lijnen heeft die niet altijd goed worden weergegeven. Het is echter elegant en kan geweldig zijn voor headers met een ander lettertype dat wordt gebruikt voor UI-besturingselementen.
  • Cabine - Bijna net zo veelzijdig als Open Sans en lang niet zo alomtegenwoordig.
  • Montserrat - niet zo veelzijdig, maar ik gebruik het vaak voor draadframes. Het is perfect geschikt voor concepten of apps met een zachter gevoel.
  • Nunito - een nieuw lettertype van Google dat op het eerste gezicht aanvoelt als een gratis versie van Proxima Nova Soft
  • Jaldi - net genoeg stijl om je gebruikersinterface wat flair te geven. Het maakt ook goed uit bij kleine maten.

Vin. Hopelijk is het duidelijk dat dit niet uitputtend is. Dit zijn slechts onze favoriete bijbehorende apps voor Sketch terwijl we werken aan UX Power Tools. Als je wilt dat we meer toevoegen, proberen we je plug-in of app voor $ 65K, of hoeveel een nieuwe Tesla kost

Als ik niet op Gemiddeld ben, werk ik aan Sketch-tools bij UX Power Tools om u een betere, efficiëntere ontwerper te maken. Volg ons op Twitter @uxpowertools. Volg mij ook als de geest je beweegt!