Sketch Wireframe Template
Sketch Wireframe Template download available at the end of this article.
As Sketch continues to play a larger role in our team’s workflow here at PRPL, we thought it would be a good idea to create a document internally to show our information architecture team some of the benefits of creating wireframes in Sketch, and make it a breeze to do so.
For those unfamiliar with Sketch, it’s a Mac OS app that has been gaining a lot of traction over that past two years for its more targeted approach to digital design. It has a very lean interface and takes a lot of its styling cues from web development. Multiple artboards are especially helpful in this app when designing multiple screen states and sizes at the same time. And with its growing number of open source plugins, it is increasingly cementing its relevancy as a digital designer’s go-to tool.
Features of the template document below include:
Placeholders
A big strength of this kit is the placeholders. By setting the icons as backgrounds, you can resize placeholders and still retain the same aspect. Placeholders include, person, image, video, graphs/data, etc.
Text Styles
I advocate using text styles to keep styling consistent, especially across large projects. When defining a text style, alignment is fixed, so after applying a style, you best not change alignment. The workaround is creating multiple styles for alignment. For the purpose of keeping this document lean, all text styles are simplified and centered.
Icons
This kit uses the open-source icon set Entypo. Font Awesome is also a great option, if you prefer it.
Annotations
Using a plugin called Text to Specs, you are able to create annotations that can be easily resized and customized. Make sure you group all of your annotations and use Toggle Layers to turn them on and off.
Download the Sketch Wireframe Template and comment below with any questions you have about getting started with this tool!
