Product

Tidying up the Stark UI so it sparks joy

With the updates, we focused on ease of use, clarity of features, ensuring similar if not identical experiences no matter what design tool you use, refining the details that make the house a home :) and preparation for some new (ridiculously awesome) stuff coming.

Team Stark

Team Stark

Jan 29, 2019

With the start of the new year, we wanted to make sure you weren’t going back to the same old UI. We spent the better part of last year nailing down our roadmap, solidifying partnerships and speaking to hundreds of you to get feedback on your needs and overall experience. Though the design we launched with did the job, what you saw was a version 1 of Stark in every sense, on each design tool. And before we started our regular cadence roll-out of some really awesome new features, we wanted to Marie Kondo the place and tidy up.

Aside from the design tweaks, we also re-wrote the code from the ground up, ensuring uniformity of both design and development across design software. With the updates, we focused on ease of use, clarity of features, ensuring similar if not identical experiences no matter what design tool you use, refining the details that make the house a home :) and preparation for some new (ridiculously awesome) stuff coming.

So what was updated?

You’ll notice right off the bat that the greatest UI overhaul comes to Sketch users as it was a tad behind the times. This includes a brand new colorblind simulator and contrast checker. The entire UI of Stark for both Sketch and XD look virtually identical now, and the rest of the design software we launch on will follow suite. And on Adobe XD, a minor re-design was just the ticket. For both, here is exactly what we worked on...

Contrast Checker

  • Changed the contrast results to be in two columns for better readability, to simplify the UI in general, to ensure the actual UI window isn’t being cut off on certain screen sizes (because it’s too long).
  • Removed the swap functionality when comparing colors in shape preview. We realized this simply wasn’t a feature that was used or needed as much as we anticipated. It takes up room in the UI and doesn’t need to, given it will rarely be an occurrence. Phew, feature creep almost got the best of us! But we won, so it’s removed.
  • We matched the width of the text preview box with the divider line above it.
  • Added a minor amount of space between the text preview box and the divider line above it.

Colorblind Simulator

  • Matched the width of the preview frame with the divider line above it.
  • Moved the zoom select to be in line with the artboard and colorblind selects rather than overlaying the zoom selector on the UI. Though the overlay was the ideal scenario, the API constraints across design tools don’t allow us to deliver it in a great, easy-to-use way. So we nixed that (for now) and actually prefer the new option.
  • We temporarily removed the colorblind simulation export in Sketch. It’ll be back very soon. With the complete rewrite of the plugin in Sketch (it really is, almost no code came over!), there are things that need to be adapted and because it has a janky experience, it isn’t get shipped.
  • Performance improvements on both XD and Sketch, but need to hone in on Sketch more.

Miscellaneous stuff, bugs & junk removal

  • Fixed an issue with the Windows version not working when a zoom value wasn’t set.
  • Fixed a bug that was not showing contrast check as passing when the ratio matched the min-requirement of AA or AAA standards.

What’s Next

Over the course of the next few weeks we’ll be not only shipping some new stuff (one of those being keyboard shortcuts), but our immediate focus is to improve the speed of the colorblind simulation to where there’s virtually no waiting necessary (or at least doesn’t feel like there is) as we grab the pixel data to simulate the different types of colorblindness (you’ll notice this when you switch between them).

As we roll out the new features, we’re super excited to be working with the teams at Invision and Figma to bring Stark to you there. We said from the beginning that our goal is to be the tool to help you design products that are accessible and inclusive. And in order to do so, we firmly believe baking ourselves into the products you use on a daily basis is where we help most. In order to do that, we need to be in all the design places :)


Stay tuned for more news on that! In the meantime, be sure to update, and subscribe to our newsletter for a top quality curated email on all things accessibility and inclusivity that goes out every week, along with updates to the product. Want to talk shop with folks discussing all things accessible, ethical and inclusive design? Join our Slack community. Questions, suggestions, or just want to talk shop? Check us out on Twitter.