How Sketch and InVision have revolutionised our design workflow

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 behavioral changes, and that’s always difficult to get traction
with.

There are some key advantages over Photoshop that make this User Interface design tool more effective. Although our team didn’t use Photoshop 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.

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.

Efficiency

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

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.

This post was first published on Digital Arts Online