Starting from scratch every time you mock up a design is a waste of time, especially when building on top of an existing product. On Envato Market we already have an established visual look and we’re working on a style guide to collate all our UI elements.
What we need is an easy way to create a clickable prototype using our UI library. A template with all the Lego pieces already in there, ready to be built.
Creating the Sketch Template
During the course of this tutorial I’ll be using my own experiences with Envato Market to demonstrate the process. However, all techniques discussed will be applicable to your own situation.
Icons
Step one in my case was to create the template mimicking our style guide.
I started by adding all our icon fonts: Considering we had an icon font that we wanted to use in our Sketch designs, first the icon font needed to be installed:
The best way to approach this is to open the font in Font Book. “Repertoire view” (⌘ + 2) needs to be active in order to see all the available glyphs. Copy each glyph and add them to an artboard in Sketch.
Symbols
Next I hand-made all the different UI elements. Each element was added to its own artboard and subsequently saved as a symbol:
I give each one a name. The names happen to coincide with the classes used in the actual build, but it’s up to you how you approach this:
Hit Enter. Done.
I repeated this process for each type of major UI element we currently have catalogued in the style guide. The result of this laborious work was the creation of 89 symbols in total.
Typography
The last piece of the puzzle was the typography. We have 17 different typographic variations, so each one was turned into a text style within Sketch.
Do do this add a text box and style the text using options in the sidebar:
Then, turn it into a text style:
Save
When we’re all done, we save by going File > Save as Template...
Now we’re ready to rock ‘n’ roll!
Rock ‘n’ Roll With the Template
Once I had all icons, major UI elements and typography prepared we were ready to start mocking things up.
Creating a new file using the Envato Market Style Guide template gives us all of the artboards, symbols, icon fonts and typographic styles that we created.
Clean Slate
To begin a new mockup I first remove all the artboards. The symbols created previously will still be accessible since they are embedded in the template. I use Font Book to quickly copy any icons for use in the mockup. Together this means that I can start with a clean slate and still have quick access to all the assets I need. Zen bliss!
Next I add a new artboard:
Now I’m ready to start adding our building blocks.
Boom! There it is:
Move it into place:
Then add the footer to finish setting up the blank page. Voila!
Dummy Page
Now let’s populate the dummy page with a form that links through to a confirmation page. Later on we will add this to an InVision project where we can get feedback from colleagues and test the flow by sending out a link to users testing the new interface.
This takes next to no time and the best thing is none of these elements need to be custom designed for the interface. It’s all a matter of using the building blocks we made in the template.
Export
Now let’s export these as images by selecting the artboards and going to File > Export:
Gathering Feedback Using InVision
The last and most important step is uploading the mockups to InVision and sharing the link with colleagues and test users to gather feedback.
Here I’ve created a new InVision project and uploaded my exported mockups to it. Click, for example, on the landing page to open it:
Using the build tool I create a hotspot to link through to the confirmation page:
Lastly I share the prototype with others by saying something like:
“Hey if you have a sec I’d love to hear your opinion on this new confirmation page flow I’ve been working on. Check it out on http://invis.io/RG1XC6XPA”
Yes, you can follow that link to play around with the mockup.
That’s it! Our first feedback cycle is complete.
Room for Improvement
This is the best process I’ve discovered to date with regards to quickly getting a prototype onto someone’s screen.
Having said that, it’s still not ideal. As soon as our UI Library changes someone (currently myself) has to update the Sketch template manually. The ideal process would be one where we could use HTML and CSS to create Sketch symbols making it possible to keep the style guide and Sketch template in perfect synchronisation.
