How Sketch and InVision have revolutionised our design workflow


Image: InVision

Oliver Newbery is the creative director at one of Melbourne, Australia’s leading digital design agencies, Webplace. Oliver has helped lead, create and deliver award-winning websites, creative campaigns, and various other applications for brands such as the AFL and Telstra. Here he tells us why they ditched Photoshop for Sketch and InVision.

It was in late 2016 that our agency first made the switch to Sketch from Photoshop. Changing tools and processes requires not just team buy-in, although company-wide acceptance too. You just have to ensure that these changes will meet client project deliverables.

Quite often, Photoshop source files are handed over to the client. We had to ensure that Sketch files would be acceptable, and for developer hand-off. Traditionally, they will have received PSD’s. We were trying to make behavioural changes, and that’s always difficult to get traction
with.

There are some key advantages over PS that make this User Interface design tool more effective. Although our team didn’t use PS solely for our digital design process (we used Illustrator also), these just aren’t tools built for designing apps and websites exclusively – whereas, Sketch is. This means Sketch isn’t bloated with options the UI designer will never use.

What are Sketch and InVision?

Available exclusively for Mac, the Sketch App has been built for digital designers. The app gives designers the capability to create fully editable symbols which allow you to be very flexible, especially with rapid changes, which make creating resizable responsive artwork a breeze.

The InVision App enhances the functionality of Sketch, and makes the design ready for presentation to the client, and then for the developer to start coding.

Benefits of the technology

There were various benefits for Webplace in implementing each application into our workflow. If I had to narrow it down to three key improvements, they would have to be the use of advanced gestures and transitions, more collaboration, and also efficiency.

Let me explain:

Advanced Gestures & Transitions

Advanced gestures and transitions are available out-of-the box, enabling us to construct high-fidelity prototypes with static designs. This helps the design team creativity with the user experience and user journeys.


Digital designers can use Sketch for creating advanced gestures and transitions.

Collaboration

When working on a project, collaboration is such a key component of a successful design. The capability for shared libraries so that team members can access and update the same assets, along with developer handoff with InVision Inspect or the Zeppelin extension is far more
effective.


Developers can view each element on the grid, and copy-paste the relevant CSS attributes to the development environment, all without needing to open the source files.

Efficiency

The prospect of improved efficiency was a major contributor to why our team have made the switch. Achieving an even better result in a shorter amount of time has benefits for all parties involved in the project.


Constructing design systems with nested symbols ensure a consistent design outcome and are very flexible when the inevitable design changes need to be implemented.

Why we chose to implement

Our team is always looking for new opportunities to improve our design workflow. With our UX team working in Axure, and the design team in the Adobe suite, there was always a disconnect with handover between the two teams.

With both the UX and design teams switching to Sketch, we saw immediate continuity returns by being able to pick up the same files. We used our internal website – webplace.com.au – as a project to learn with. A lot of the app tools were very familiar, so it didn’t have the long teething
process that could have potentially been a roadblock.

Expectations play a part too. You can’t be a master overnight, so we were realistic that it was going to take time to get short term gains. But I was always confident that it was beneficial to be an early adopter. Internal presentations to the client-facing producers were necessary, so that
they felt comfortable in introducing it to the client.

Ultimately, it must be easy for the client to get to grips with, as client stakeholders are obviously an integral part of the feedback process.

A few months on

Seamless syncing of shared assets between team members remained a long term goal when we made the switch to Sketch. The latest release now has a shared library function which has enabled our team to push and pull changes between libraries and artwork really easily.

I’d be interested to hear the feedback from larger teams who are working on enterprise-level projects whose experience with this feature might be quite different.

Integration with animations and transitions – especially HTML5 and SVG – would be high up on my wish-list. Using Adobe After Effects is akin to replicating the same problem that web
designers were experiencing with Photoshop – employing complex, powerful software for a scenario it wasn’t built for.

Although producing responsive artwork for different device sizes is a lot easier, there is still a disconnect.

A final word

These observations and gripes could be answered very soon however. Available next month (Jan 2018), comes InVision Studio, with the promise of being ‘the world’s most powerful design tool’.

It offers super-quick prototyping and full control over transitions and gestures and what looks to be a very interesting approach to responsive design.

Having switched software so recently, I’m loathe to entertain the idea of swapping again, so it’s going to have to be a compelling argument to convince me. InVision Studio is definitely worth keeping an eye on in the first half of 2018 to gauge industry reaction however.

If you’re new to digital design, and learning the tools, the future looks bright.

Comments

Don Droga said: Axure is like having a to work with a grumpy person everyday.

Santosh Nirankari said: if you can make a tutorial about it then please do share it on hackr, they'd quite like it. https://hackr.io/tutorials/...

Elsewhere on IDG sites

Read Next...