Marc Andrew has already done some great work with his tutorial series on how to set up a design system in Sketch. Marc’s work is great to help understand how to harness the features of Sketch but when I tried using his tutorial I had that familiar feeling that when I scratched the surface, something was missing. That something was the bridge between creating a design system in the abstract and creating a design system for the web.
I want to use Sketch for wireframes. It’s a great application. I find it much faster to work in Sketch than I did with Axure or Balsamiq. With the Sketch Mirror view, I can see my work on a real phone screen and hold it in my hand from the beginning. I also use Sketch Cloud to share my work with collaborators and clients. I find it to be the best platform out there for this kind of work. I’ve tried InVision too and it’s a great tool but with Sketch’s move into displaying prototypes, although it’s not perfect, it’s certainly good enough for demonstrating ideas and forming the basis of a meaningful conversation with clients or product managers.
Men of principle are always bold, but those who are bold are not always men of principle.
I want to use the principles of great UI design and web typography from the ground floor of the project when creating wireframes. I want to think in patterns from the start because no matter how much I try and avoid it when it comes to someone having to write the HTML, that’s what they have to do if they want to write excellent, readable, maintainable code.
I want to use a typographic scale that is harmonious so that type ‘just works’. I want to use negative space effectively so that wireframes are pleasing to look at. But I don’t want to introduce colour or texture into wireframes. Nor do I don’t want to second-guess, guide, control or steer the designer into certain choices. I want the wireframes to ‘get out of the way’ for the client and for the designer.
I want to hit the sweet spot where the wireframes are lo-fi enough the client instantly ‘gets’ that they are not looking at an iteration of a finished design, but hi-fi enough to reassure clients that they are dealing with professionals who care that things should look good.
I only want clients to see the visual hierarchy, screen layouts, and functions.
I only want to hear from them about what they think and how they feel about our suggestions.
I don’t want to spend the first part of our wireframe review meeting reassuring the client that the website won’t look super-basic, or fielding questions about which fonts they like. And when you get it right, that’s what happens. It’s a small, subtle victory but it matters.
For the developers and designers who’ll pick this up after me, I want them to know that I’m thinking about mobile first. I want to start from a place of having standardised elements: be they text elements, form inputs, images or repeatable patterns that I’ll use throughout my project. I want to start with the bones of the pattern library to which the developer will refer when they write their html and css.
Marc’s version hit its limitations around how I think developers will really take screen designs and turn them into real web pages. So I started from scratch and created my own.
You can download a copy of my Sketch wireframe file and start using it today. Let me know what you think in the comments below.
