I’ve been a regular user of Adobe products since Creative Suite 2 and have sworn by them. There have been some big changes and improvements to the suite over the years and it’s served me well across print and digital. However, I’m always on the lookout for ways to optimise my workflow, and there have been great strides made in design tools recently.
After all, even if you’re convinced that the products you use now give you all the features and functionality you need, in overlooking what’s new you could be missing out on benefits such as increased efficiency, collaboration and cost-effectiveness. Here are some of the key challenges around those topics that new design tools can address, along with the useful tools I’ve discovered that are now a core part of my kit.
No matter the scale or scope of a project, being able to deliver the greatest value is very important. Reducing the effort required for the more mundane tasks allows more time to do what you do best: focusing on solving design challenges. Not only is this good news for a client who is investing in your skills and expertise as a designer, but it’s great for us too (I don’t think I’ve ever heard someone say, “I can’t wait to get this creative finished so I can write the styleguide”).
A simple review of your toolset might reveal that there are products out there to reduce these overheads. The big leap for the more process-driven designers among us is embracing the idea of change – and accepting that there might be better solutions out there than the ones we’re comfortable with. You don’t know until you try, right?
As someone who has relied heavily on Photoshop for the majority of web and UI work, trying Sketch for the first time was an eye-opener. It’s no surprise that Sketch is becoming the go-to software for User Experience (UX) and User Interface (UI) designers; it’s specifically built for them. Rapid wireframing is effortless, whether creating them by hand or using one of the many open-source libraries. These can then be used as a base to craft higher fidelity visual designs – all in one app (and one file – but we’ll get to that later).
Pages in Sketch can be used for versioning and managing artboards when building fidelity from wireframes
New plugins and integrations are emerging daily which help optimise the design workflow. It works seamlessly with Zeplin, an app that makes handing over designs to a development team a breeze. A quick export from Sketch automatically generates an interactive style guide and, by making some layers exportable in the source file (with a single click in most cases), you make them immediately available for download, directly from the Zeplin app.
Making elements exportable in Sketch will add them to Zeplin for developers to download when needed
The big question here is, are static files the best way to communicate an interactive experience? Trying to describe a user journey or an interaction idea can be quite troublesome: “..clicking ‘button 1’ on ‘screen A’ takes you to ‘screen B’ if ‘scenario Y’ or ‘screen C’ if ‘scenario Z’. And the state of ‘button 1’ on hover is shown on ‘screen Aa’…”. Not only are these notes quite difficult to write coherently, but misinterpretation can be disastrous. A client’s expectations might be totally misaligned with your proposal or a developer could waste valuable time implementing incorrectly.
As well as validating your thinking, introducing interactivity early in the design process helps communicate interaction ideas. This way there should be no nasty surprises for:
Recently, when we were extending the DesignSpark platform we’ve developed for RS Components, we used InVision to rapidly prototype initial designs helping to excite and secure buy-in from key stakeholders. InVision’s integration with Sketch ensured the latest designs were always visible in the prototype by automatically syncing them as fidelity was increased and screens were finalised. Comments could be added directly to the designs in InVision so there was no confusion with referencing the correct UI elements or screens.
InVision allows you to comment directly on the design so no need to reference files, versions or elements
Principle is a handy tool to create more involved interactions. It’s so simple to use, especially if you’re familiar with the Sketch interface. The output is simply a video or animated GIF which is great to show ideas, but probably not for you just yet if you want a fully interactive prototype to share.
Though expensive, I think an Adobe CC licence is unavoidable for most designers. Some clients still request certain file types (such as PSDs) as deliverables and there are some things Adobe does so much better than the alternative products. So, how could reviewing, and probably adding to toolsets, possibly lead to cost savings for designers?
Well for a start, some of the great new products I’ve talked about have cheap one-off licences; Sketch and Principle are just $99 each. And even those that are subscription-based have free starter plans or begin at around $13/month. Adopting a Sketch-to-Zeplin workflow could mean costly Adobe CC licences are made redundant on the developer side (Zeplin plans cover unlimited team members). Or for developers who like to get hands-on with the source files, Sketch is set up in a way that you can include everything needed (wireframes, style guides, vector assets and visual designs) all in one file, so no need to pay for a subscription to multiple apps.
Zeplin plans are reasonable and could allow you to cull some Creative Cloud subscriptions
Investing in new software and processes can be pretty daunting. Not do you need to commit to purchasing new software licences, it might seem like a big overhead in terms of time for testing and learning. However, it’s a small price to pay for improved efficiency and collaboration that could lead to saving costs. Using software that optimises workflow will drive up productivity, helping to minimise the risk of project overruns. Also, a tool that allows your team to communicate more effectively ensures stakeholder expectations are met; reducing iterations and re-work.
There are also some ways to minimise risk:
To find out more about the design services on offer at Box UK visit the Visual Design section of our site.