Transitions can be painful, time intensive, and costly. Especially when that transition impacts the workflow of a five person design department that relies on a piece of software to create complex and elegant UX/UI designs. Photoshop has been the cornerstone of our production workflow at Spyder Trap since our inception; but UX/UI design is constantly changing, and as designers we must adapt to new technologies and master new tools so we can stay competitive.

A real world example of this impact is when Spyder Trap adopted InVision three years ago. InVision has transformed the way we communicate with clients and enhanced the way we demonstrate proposed user interactions while presenting our work. Having the ability to quickly create prototypes opened up the possibility of doing in-house user testing. Could switching to Sketch provide similar gains?

Why we loved Photoshop

Like a great deal of other web design departments, Photoshop was our go-to software tool. Each designer had the full Adobe Creative Suite at their fingertips, but Photoshop was the true work horse of the department. Although it is a beast of a program, we love the wide range of features, the options to style drop shadows and create masks, and the recent addition of artboards. The shortcuts that were inherent to the programs (once learned) offered us speed and efficiency, while the use of paragraph styles and custom color palette maintained consistency.

However, over time the limitations of Photoshop spawned frustrations in our department. With the addition of artboards files, size become bloated, which slowed down performance. Exporting capabilities were restrictive, smart objects were losing their luster, and our developers didn’t appreciate working with nonvector based elements. Was it time for a change? If we continued to revolve our workflow around Photoshop, were we risking getting left in the dust?

Why we gave Sketch a try

In assessing whether or not to move forward with the implementation of Sketch into our process, we took cues from the Invision application. With the release of the Invision Craft suite, plugins for Sketch and Photoshop were created to improve efficiency by directly linking Invision to your design tool of choice and offering simple ways to create and duplicate placeholder content within your designs. Being that Craft is ingrained in our process, we noticed that enhancements to the Craft plugin were being made for Sketch far in advance of its Photoshop counterpart. This was motivation enough to give Sketch a try; add in a growing trend of leading with Sketch for wireframing and UI resources in general and we were sold.

But first, our design department needed to understand what Sketch could offer our company and the potential benefits it could provide to our existing workflow and clients. The endorsement of Sketch from Spyder Trap’s development team was also a key influencer. Sketch has incorporated CSS logic into the app. This makes converting designs into CSS much easier, as designers have to use CSS logic when applying styles to their UI elements.

The approach

Now that we determined that we were going to give Sketch a try, we had to decide how we wanted to organize the trial to minimize disruption to our current workflow and projects. The strategy was simple: one designer, one project. We would choose one designer to do an intensive deep-dive into learning Sketch with the expectation that their gained knowledge and skills would be disseminated throughout the team. If other designers had downtime during the trial period, they would be encouraged to introduce themselves to Sketch. However, they would continue to do project work within Photoshop. At the conclusion of the trial an informed decision would be made, and if needed, a transition plan would be created.

How I learned Sketch

I love a good challenge and I love to learn new software, so I jumped at the chance to be our team’s guinea pig. The project chosen for the trail was a responsive marketing website. The first task was to gain a basic understanding of how Sketch works, the advantages of using it for UI design, and how to navigate through the program. Free online tutorials from InVision, YouTube, and other sources were a great place to start. From there I read blog articles on how to structure your files, exporting options, utilizing plugins like Craft, how to sync my files to InVision, and the best ways to collaborate with other designers while using Sketch. Another helpful exercise was to dissect free online Sketch templates by examining how elements were created and practice manipulating shapes, styles, and file structure.

Armed with my new knowledge and skills, I was able to produce my first project in Sketch. However, once I was in production mode, I noticed that I missed the shortcuts that became my second language in Photoshop. In order to increase speed and productivity in Sketch, I took the time to learn the shortcuts in Sketch and create several custom shortcuts that were familiar to me in Photoshop. This investment allowed me to maintain my production pace.

A new day with Sketch

It has been four months since the trial began. The responsive marketing website design is complete and I can say that I am in love with Sketch. By the end of the first month, I knew the transition to Sketch needed to happen within our company. Designing in Sketch is like using a simplified version of Illustrator with the layer management of Photoshop. Sketch offers the things that are vital for web and UI projects, enabling a designer to finish their work at a much faster pace.

Once the decision was made to make the switch, it was decided that all new projects would be created in Sketch. Archived projects would remain in Photoshop. We are currently in the process of expanding the use of Sketch to all of our UX and design deliverables. UX research documents, process flows, and wireframes will all be created in Sketch.

Here is just a short list of our favorite Sketch features and benefits:

* Super easy to use. The app is very intuitive, and never feels complex or overwhelming, but at the same time it’s powerful. You can get comfortable using it within a few hours.

* It’s vector-based. All elements can easily scale without degrading, including drop-shadows, gradients, blurs and strokes.

* Text is rendered exactly like it’s displayed in an app or on a website in a browser.

* Smart guides. You can easily line things up and see the pixel distance from one object to another. You don’t understand how much time this saves.

* Built-in grids! * iOS mirroring. Using their iOS app, Sketch Mirror, you can see your designs on your phone in real time.

Final take-aways

When looking to make a software change, we found the trial and phase-in approach worked really well for our company. If you’re looking to make the switch, take the time to do the research and test the software before disrupting your workflow. Also, it needs to be a team/company decision. Buy-in is critical from all parties and discussion need to happen around process changes and possible drawbacks before the transition is made.