When most people in the industry think of Agile Development, they think of an adaptable process meant to streamline a project, saving time and effort in the long run. But what does this mean for designers who often set the tone at the beginning of the project through creation of wireframes and visual mockups?
At Devbridge, our product owners, developers and designers all work in an Agile environment, as it allows us to remain nimble by adapting to changes in our projects as well as in the industry. We all contribute to this process in different ways, continually shaping and refining our workflow and collaboration within our team. Thanks to this adaptable environment, our design team has discovered a better way to work over the past few months, and made a big transition as a result.
Moving from Photoshop to Sketch: how the design team improved our workflow
For visual designers, an important aspect of our job, aside from the design itself, is communicating our designs clearly to both clients and developers. For years, Photoshop has been the leading tool for developing pixel-perfect mockups, with the shared language between developers and designers being a Photoshop document. Typically, when a designer has a design that is ready to be built, it is then passed to a developer who is able to extract assets—things like images, dimensions of elements and font information. Photoshop has always worked well enough for this purpose, but for an application originally developed for editing photos, it has had to expand drastically over the years to meet the needs of web designers. What we longed for was a better tool, one that was designed specifically for interactive design and layout.
A few months ago, we outlined the benefits of Sketch, a new application by Bohemian Coding that promised to combine the best features of the Adobe programs we use—features such as creation of vector shapes in Illustrator and export functionality of Photoshop—to create a program specifically tailored to web design.
Since that time, designers in our Chicago and Kaunas offices have had the opportunity to use Sketch on projects. Before long, Sketch became our primary tool for creating mockups. There were even instances where we migrated Photoshop designs to Sketch mid-project because it would speed up our workflow in the long run.
"Welcome changing requirements, even late in development. Agile processes harness change for the customer's competitive advantage."
-From the Twelve Principles behind the Agile Manifesto
So what led us to make this switch when Photoshop has been the industry-leading web design software for years? We discovered something better.
Here are some specific features of Sketch that sped up workflow and production, allowing more time for actual design:
Trusted Features: Although Sketch’s interface is unique, it is not completely foreign for Adobe users. Sketch has not only maintained some of the best features of Photoshop such as rulers and grids, but also allows easily toggling with short codes.
Export Options: Superior export options allow you to save assets in a variety of file types (PNG, SVG, etc). Sketch also allows for easy drag-and-drop export into prototype applications such as InVision.
Drag and drop from Sketch to InVision
Overall Speed: Gone are the days of selecting layers from the layer palette in Photoshop. With Sketch, elements can easily be selected, transformed and edited in less clicks.
All-In-One Application: Adobe hasn’t been replaced. It’s just being used for its original purposes. For instance, Illustrator is still the go-to application for vector icon and logo creation, and Photoshop offers far too many advanced image editing tools to be fully replaced.
Tailored for Web Design: The ability to easily create, move and scale art boards allows designers to rapidly iterate on an idea as well as design for a range of devices side-by-side on one screen. Creating simple vector elements with the ability to quickly export as SVG files is also a big plus.
Design for a range of devices in one workspace
Developers Like It, Too: Being a Mac-only program, our PC-using developers didn’t initially love Sketch as much as we did. But after experimenting with a few key plugins such as Avocode and Sketch Measure, we are now able to share full Sketch files with developers and easily annotate styles, dimensions and properties.
Thinking of trying Sketch?
If you or your team are considering adopting Sketch, here are a few things we learned from our experience:
Talk through the pros and cons with your development team. When our team initially began using Sketch, we were providing flat, annotated files and assets to our developers, which was not ideal, compared to Photoshop documents which allowed them to extract assets and styles as needed. Creating annotations also added production time for the design team. The implementation of an application called Avocode now allows us to share Sketch files with our developers on PCs and even offers a unique interface for them where they can easily view and extract styles.
Avocode's developer interface
Sketch offers a free trial for 30 days, but with the speed of projects, it took our team about 60 days to really get fully ingrained. Chose a project to test the program with from start to finish to give yourself ample time to decide if it is a good fit.
Be proactive in sharing knowledge with your co-workers to help everyone learn faster. We had a few early adopters who’s tips on various Sketch tools helped get everyone up to speed faster.
And finally, the most important thing our team learned from this is that if you discover a tool that offers you ways to do better work, don’t be afraid to make a change.
