At Perpetual we work on a diverse range of projects from advanced professional news applications to web and mobile apps for fast growing startups. With the new year just beginning, one of my resolutions is to work on improving and refining my design process to tackle these challenging projects. While I’m still nailing down my ideal workflow, I’ve found some great tools and programs in 2017 that I’ll definitely be using this year. These tools are some of my favorites–they have either saved me time, given me new insights, or made it easier to share and collaborate on my work.
With just a quick keyboard shortcut, I get an in-browser image of a Sketch artboard. This has been infinitely helpful in ensuring the typefaces I’m using are actually legible in the colors, weights, and sizes I’ve selected for them. I’m also able to gather if the overall layout works–with each tweak I make in Sketch I can just cut to a new browser preview to quickly toggle between new and old versions of the same screen. Trust me, this beats waiting for InVision to finally sync–use this for a quick look at quick changes.
When I found myself designing for accessibility for a recent project, I realized that with each design decision I made, I had to check and double check that it was a good decision for all users. While I found a great resource in webaim.org, it wasn’t very efficient. I had to work in Sketch, copy a hex code, move to browser, paste in, and then check the output. Enter, Stark. This plugin has multiple capabilities to test text and color legibility. Simply open the plugin, select a text layer and a background layer, and click “run.” Right away, Stark lets you know the contrast value for the selected layers, and if that text is indeed easily read. Another interesting feature Stark has is the ability to simulate different types of colorblindness within Sketch–it provides a good exercise in establishing hierarchy and difference without relying on color.
As a self-proclaimed Google Girl, I love when things integrate with my existing apps. I use Draw.io to create user flows, but it can also be used for wireframes. The best part is that it can save right in Google Drive! Sharing work for review is incredibly easy, plus it’s one less document to bog down my laptop.
Another great way to preview your work. There are a ton of these kind of apps in the market, but I’m a big fan of Skala. With a quick keyboard shortcut, I get a preview of my work right on my phone. If I make a change, it updates instantly. (Plus, it works on Android phones!) By using this I just get a much better sense of the success of my layout and type choices.
Although I know many people who avoid browser plugins, I 100% recommend this one to any and all designers I know. We’ve all been there: you’re on a site and there’s some amazing typography, but you’re not sure what it is or how to find it. With WhatFont, just click on the toolbar icon and then hover over the typeface in question. Click it and you get the exact style, weight, size, line height, and color that it’s set in. I’ve found so many new typefaces this way, plus it’s been really helpful when testing sites–you can easily check whether that H1 matches the spec you worked so hard on.
