This was supposed to be Part 3 of my Wireframing with OmniGraffle series but the trouble is, I don’t use OmniGraffle for wireframes anymore! (It is still a great tool for building site maps, however)
Last year I transitioned to Bohemian Coding’s Sketch and it’s now my primary tool for wireframes and design comps. Sketch is fast, performant and renders type really well (I’m looking at you, Fireworks). These are some of the key features I find especially useful in regular use:
- type and object styles
- non-destructive image manipulation
- multiple artboards on each page (!!!)
- easy export of just about anything at multiple sizes and file formats
After using Sketch almost exclusively for about a year I’ve found myself repeating the same steps every time I set up a new project. Or, I’ll duplicate an old project and strip out all of the things I don’t need.
This got me thinking: why not just create a robust wireframe template to start from? So I did, and you can have it for free!
Included in the template:
- Most common layouts for desktop and mobile (1–4 column in various arrangements)
- Mobile navigation (up to 3 levels deep!)
- 12-column grid based on Twitter Bootstrap
- A full array of typography styles (built as Text Styles)
- Various UI elements (tabs, buttons, filters, etc.)
- Commonly-used icons (via FontAwesome)
- WYSIWYG elements (images with captions, related content, etc.)
- No headaches!
All of the elements in the template are cleanly grouped and easy to copy and paste into another document. The first page in the file has multiple artboards with the core set of elements, and the second page is a basic style guide with more detailed typography and UI elements.
I’ve already begun using this template on new projects and it’s saved me a ton of time! I hope you’ll find it useful as well. Check it out, rip it apart and put the pieces back together to build the wireframes of your dreams.
I’ve made it available under a Creative Commons Attribution license (CC-BY) which means that you can distribute, remix, tweak, and build upon this work, even commercially, as long as you provide credit.
Let me know if you find it useful, and if you have any suggestions for future improvements. Happy wireframing!
