We have updated our Privacy Policy and Privacy Options

Got It

How to Rapidly Design User Interfaces

Share

Brooks Bell UX Designer, Keith Clark, shares his tips for optimizing your UX design workflow.

These days speed and efficiency are critical skills for any medium of design. Whether you’re an entry-level graphic designer deep within layers of Photoshop or a senior product designer eager to see if Sketch will finally catch up to Figma’s team collaboration expertise, you know that time is a valuable asset that cannot be replaced.

I’d like to share a few tips on how to increase your workflow within Sketch (my design tool of choice). While I’m certain that nothing new or life-changing will be discussed in this article, it’s always the fundamentals that keep one from excelling and going to the major leagues.

Take advantage of symbols–especially nested components

When designing graphical user interfaces or GUIs, there are certain elements that are constantly being reused. Navbars, buttons, typefaces, color patterns. Expedite your workflow by utilizing the complete functionality of your design tool.

Once you see the speed, efficiency, and wizardry packed into symbols, you’ll never want to return to designing the old way. This is essential for rapidly prototyping ideas. But why stop there when you can nest components? Yes folks, welcome to the 21st century, we now have the ability to create a reusable piece of content and store it inside another reusable component.

Finally got the perfect border-radius on that CTA button but now need to include it in a container used on multiple steps within the user journey? Nest that baby inside of the container and voila–it’s now automatically updated on any artboards containing the parent component.

Don’t be afraid to create an entirely new artboard to illustrate a minor variation to your colleagues–not everyone is a designer and cannot tell just by your override what a particular instance or state is supposed to look like. Photoshop is great, but design tools specifically built for GUIs will dramatically increase your productivity and help get your tests running faster.

Name your layers

Rectangle 127 and Group 45 aren’t going to cut it in your layer panel. Organize your document as though someone is going to pick up your file and finish it later. If things are getting a little intense on the canvas, instead of continuing to fill it with artboards, try moving some to another page.

A clutter-free workspace ensures that you and others can quickly navigate to a particular portion of your design without needing to cmd + click! 

Designing variations for testing can involve a bit of back and forth. Creating documents that can quickly be manipulated, enable you to look beyond pixel-level details and into higher-level concepts–extrapolation, user behavior, accessibility, empathy–to add incredible value to your work.

Iteration or Innovation?

Why not both? A/B testing runs in our blood at Brooks Bell. This means that sometimes we create and implement completely custom solutions from scratch, but most often, just like in product design, we’re making small iterations to existing products, to test which design has the better performance and meets and/or exceeds metrics and KPIs set for it.

It’s something that I like to call iterative innovation: small, incremental changes over time—based on user research and analytics. If you’re iterating on an existing design, create the entire design file. Don’t rely on screenshots and uneditable components; you never know what you may need to modify or test down the road. Create dynamic, scalable content that is collaborative and future-proof your work.

Remember that Less is More–Sometimes

When you’re in a pinch, you don’t always need some fancy way to quickly communicate a strategy. And while prototyping tools, like InVision, are cool, don’t forget that Sketch has a native preview mode built-in–when you have time constraints for internal meetings, you can communicate your design right within the app.

On the other hand, with built-in features like Inspect, it is hard to ignore the power of design tools for developer handoff. Not every engineer has time to install a design tool on their machine to pick out attributes for code, and not everyone uses compatible computers. Often design tools can be OS-specific, so it is certainly a benefit to have a web-based platform for handoffs such as InVision or Figma.