When I got chance for a first look at Sketch I was impressed but not convinced that it would beat the mighty Adobe Creative Suite to industry dominance. But at that time Adobe XD wasn't yet ready and so Sketch established itself and has stood the test of time. It has given designers an amazing toolset to be faster, more efficient and better able to accommodate the Lean UX process than ever before.
Solving clients’ problems is a UI/UX Designer's day to day. A critical part of this is convincing stakeholders that a proposed solution works. Not by the power of persuasion, but by proving it works, empirically, simply and quickly.
It works well in theory. You work with your client and an IA or Content Strategist to establish content, tone and style. You’re awed by the gorgeous web-friendly prose that your digital copywriter provides. You build an interactive wireframe and share it online in a form that your client can annotate and interact with. You bring them in at key milestones to establish that the navigation strategy and content hits the established goals for the website and its visitors, you….
Wait a minute… back to reality. Sometimes you need to heed the signs that you've presented way too many black and white wireframes with too much talk and not enough Visual Design. After a certain point you risk your client zoning out. Your wireframes may as well be the plans to the Death Star that many rebels died to obtain a long time ago in a galaxy far, far away. Probably crucial, but not that interesting in and of themselves. And, I would caution against using online wireframing tools like Protoshare to encourage client collaboration. It sounds great but the reality is, you're increasing your client's workload. Not good.
The flip side of this scenario is worse. You scamp up gorgeous pixel-perfect page designs for the first presentation, your client is expecting to see a sure-handed fusion of their brand values and business goals succinctly expressed in a handful of images. Sure, you’re prototyping behind the scenes, but now you’ve given your client an insatiable appetite to see more pages presented at every meeting. If you're not careful this can spiral into a full mockup of every single page of a website. Finally a front-end developer has to reconstruct multiple ‘signed-off’ UI scamps. Needless to say, this route is hugely time consuming.
So what’s the solution? Understandably it’s critical to present a client with a proper visual representation of a product, and the interactions you are designing. On really large builds interactive wireframing detailed to the nth degree in AxureRP is standard, but for smaller projects why use a sledgehammer to crack a nut? Balsamiq takes the opposite approach – they reason that wireframes should be really quick to do, never mind the bells and whistles, then you can invest the time saved in the build. Sounds good and I like Balsamiq, but I think a few bells and whistles sometimes – particularly the ability to see how content reflows across viewport sizes can be important.
I’ve tried solving these issues several ways. The variable that proves tricky to control is client expectation versus time spent. There is variable appreciation for wireframes among clients and unless yours is prepared to come with you on the wireframe journey, then they are best kept as a reference. But you do need to justify your reasons for designing pages and interactions your way, and why – exactly – your way is of genuine value. And, there’s the prospect that if you can get sign-off on a set of detailed wireframes, then you can go away and build it exactly as agreed without the goalposts getting moved halfway through.
Macaw held out a promise of a better way and there was a time that I embraced it as a possible solution. The idea with Macaw was that you build a responsive interactive wireframe and as you work into the design you develop a pattern library bit by bit. Over many iterations the wireframe gets closer and closer to an actual website and Macaw compiles succinct semantic code for easy handover to developers. I found it excellent for the first part – responsive wireframing. but iterating closer to a real site was, in practice time consuming. In any event, Macaw sold their technology to the excellent InVision and aren’t supporting Macaw any longer.
Designing in browser was another promising avenue. I’ve seen some amazing front-end developers work in this way and it is impressive. At first I thought, “Genius, it’s the wave of the future!”. On closer examination I’m less convinced. Although it’s super-quick, the problem lies in the process. There's an inevitable a tug of war between building what the UX/UI research and designs dictate, and the design being led by what what's simplest to achieve in terms of technology.
Enter Sketch. David to Adobe’s Goliath. Suddenly Sketch has become my go-to application for UI/Visual design for websites. I can create a design in sketch, build out a real pattern library as I go along, populate with mock content instantaneously, present a proper design to a client first as Low-Fi User Flows and later as fully realised Hi-Fi screens. I can then use Sketch assets to demonstrate interactions easily using InVision. All the while knowing that what I’m creating is vector based and will not need to be recreated. The assets are fully in control of the designer, and subject to critical review every step of the way. It is beautifully straightforward to handover to engineers without any duplication of effort. I recommend Zeplin for the handover because of the way it delivers developer-friendly specs and resources.
I decided to write this post is because I was thinking about the ‘Touchbar’ on Apple's new MacBook Pro. I could do without the extra tap to change the volume, but that is my only quibble thus far. It feels very natural to use. Apple’s resident smooth-talking Brit, Jony Ive, says that they had to build it in a very finalised form so that they could test it internally at Apple. When you’re talking custom hardware that may never see mass production that's a significant cost. But it shows that some things need to be experienced in a polished form to understand if they will work or not. That’s the beauty of the Sketch, Invision pairing. A prototype doesn’t have to be a dry set of schematic-like wireframes like the plans to the Death Star. We can actually show how interactions work in a tactile, hands-on manner that designers, QA testers, UXers and most importantly, clients can get hand-on with across all devices. Sketch is major step forward for web design, I'm sold.
