Speed up your UI design process

Screen Shot of Craft Tool

Often it involves copying and pasting data to replace the lorem ipsum and placeholder images, using multiple apps to grab images and other data, and then plugging it in in your tool of choice, such as Sketch or Photoshop. You can be looking for photos online, taking screen grabs and creating user names to illustrate how the real product will look.

Now there’s a tool for it

Invision, the company behind the popular prototyping tool with the same name, have recently launched a simple yet exciting tool called Craft, aimed at helping designers populate their work with more contextually relevant content without having to switch between apps. Craft installs directly inside Sketch and Photoshop as plugins, and is broken into three different tools: Type, Photos and Duplicate.

What does it do?

The first one of the three tools, Type, lets you pull in real, or at least more relevant, copy either from the Web or custom-generated to replace simple placeholders. It’s something you could also do by copy-pasting text from another application. However, Craft comes with a few common presets such as names to auto-generate real-sounding user names, headlines from actual articles organized by content categories, names of countries, addresses and phone numbers. Best of all, you can add your own custom content, too. Craft takes care of automatically moving down the list of content items. Simply select a text layer in your design and apply the type of content you need.

Screenshot of Craft, using the Type option
Photos does the same as Type but with, yes, photos. You can bring in images from Dropbox, Unsplash.com, your own folder of UI elements or styleguide, or the Web. For the latter, Craft brings up a little browser window within the plugin to let you avoid having to launch your browser outside of Sketch or Photoshop.

The built-in browser seems to have some minor issues rendering certain types of Web content though, and working in its small window is more difficult than in your actual browser. By enlarging the window you end up covering the design you’re working on.

Nevertheless, Photos can come in handy when you need something “real” but not yet final, and I find myself using Unsplash images the most. That way I don’t need to worry about using copyrighted image content, as Unsplash offers all of its photos under Creative Commons Zero license.

Screenshot of Craft Photos tool


The third one of the tools available within Craft, Duplicate, is actually redundant with Sketch’s own Grid tool. It lets you clone a design element, set an exact number of duplicates, and set margins between the elements. This comes in more handy in Photoshop, and will certainly help you to create more accurate designs fast compared to lining up multiple items manually. This can be a small but significant aide also in ensuring accessible experiences by lining up the content for screen readers.

What’s the value?

Craft can indeed speed up the UI design process, and over time perhaps it can expand to include more tools. While there are thousands of plugins available for both Photoshop and Sketch, there hasn’t been anything dedicated to Web UI designers quite like Craft is. Designers who spend a lot of time working on the same product are likeliest to benefit from Craft.

But I have to ask, at which point of the design process do I really need to do this? There are reasons why we use placeholder content in our designs, to help focus the work and avoid inviting content-specific comments when working through concepts and layouts. Once past the wireframing stage, replacing placeholders with real, but still random images from the Web works well for certain types of content, such as profile pictures. But when production ready content is available, the step where Craft comes to assist may not be necessary.

A few things to consider

When creating detailed UI designs and plugging in content, here are a few things to consider:

The difference between “real” and real
Before the screen designs can move into production, someone needs to create the real content. That means the copy text for the UI elements, other copy content, as well as imagery. If it’s already available, use it instead of examples of what could be used.

Who will be looking at the designs?
If the design work is going to a group of stakeholders for approval, make sure the content you have plugged in doesn’t become a source of confusion. If you’re asking the stakeholders to focus on the visual design only, make it clear. If you don’t want them to care too much about the copy content at this point, be careful about when and where you use “real” content versus lorem ipsum.

What amount of design documentation is necessary before moving into production?
Depending on the framework for your design, detailed designs of each screen may not be a necessary deliverable. Having the page templates nailed, prototype to describe the functionality, annotations, and content easy to pull in may be all you need to move into the build phase.

Always consider what amount and type of design documentation is necessary for effective communication for moving the work forward.

While Adobe is looking to launch a new all-in-one solution for UX designers soon, Craft is here now for free. There is certainly a place for Craft in every UI designer’s toolkit, much like the UI Stencils we have talked about earlier are a great companion when sketching ideas. The free plugins are available at http://www.invisionapp.com/craft.