Make Apps, not Wars! Improve Your Design – Development Workflow

It is a pretty rare case when a Developer and a Designer are one and the same person. In most cases, they are two totally different people, who — whether they like it or not — need to work together to create a great, complete product. How can we make this cooperation smooth and painless? Well, there are tools that can help you do it.

While working on my first commercial app design at Droids On Roids, I noticed that my workflow is not as dynamic as I would like it to be. It took me hours to export all the assets and prepare style guides that the developers needed to recreate my designs in code. To be honest, when I finished working on each screen, I wanted to move forward, do another one, while preparing all this stuff for the Dev team was just boring and holding me back.

How did I do it back then?

Well, my “old” flow, was oriented around Adobe Software. Firstly, I designed the proper screen in Photoshop, then I sent it to a client for approval and, with his blessing, I was moving back to Photoshop to create the style guide and export all the assets for the Dev team.

If I was lucky enough and had some spare time, I also prepared the animations using After Effects. So… basically I used the software that is able to create something like this:

and do nothing more than this:

The message was pretty clear — Adobe software was just too much for my needs. With bigger projects in the pipeline and slower PSDs, I knew I need to look for a new solution.

How do I do it now? Sketch is not enough

I have heard about Sketch for some time, but my loyalty and familiarity with Photoshop never allowed me to give it a proper try, but when I finally did, I haven’t opened Photoshop to do a mobile app or web design again. If you would like to know why, check out my previous article about my favourite Sketch features that Photoshop misses. Yet Sketch alone didn’t do the trick. It was the combination of plugins and software used around it as well.

Zeplin – powerful guides with killer features

Firstly, I felt in love with Zeplin — a small, but super powerful software, that creates style guides for you. If that’s not enough, they’re dynamic, so the Developer can check on what they really need at the moment instead of looking for the needed data on your fancy guideline sheet :).

If that’s not enough, the Zeplin team recently added another killer feature. Now, the Developer can connect Zeplin with his project in XCode or Android Studio, exporting all the needed assets directly to the right folder. All we need to do is to mark the elements in Sketch as exportable.

Principle – create interactive prototypes for mobile

After Zeplin, I found out about Principle — another great tool that works closely with Sketch. It helps you create animated prototypes that not only work on your desktop screen, but also on your mobile as well, and it’s fully interactive! It is easy to use and lets you create common animations and transitions within a few clicks. There is nothing better for a Developer than a great reference on how you want your design to work in the final app. No more guessing.

InVision Craft – the cherry on top

The cherry on top came out a few weeks later in the form of InVision Craft – a very powerful Sketch Plugin that helped me save quite a lot of time. I don’t know about you, but when I work on my designs and present them to the client, I want them to look as perfect as possible, so I also take care of the data that is shown on the screen. To be honest, it took me quite a lot of time to come up with some original content and it clearly should not have. With Craft, I fulfill my designs with great content, duplicate data and create libraries with reusable elements within seconds.

Most recently, the Craft team released an update that now lets you create a simple, clickable prototype out of your designed screens without leaving Sketch. When you’re done, you just have to export the file to the InVision platform and send the link to your Client and Developers.

Conclusion

I’m not hiding it — I’m a big enthusiast of Sketch, its fellow plugins and the software working along with it. Changing my everyday workflow not only allowed me to focus more on the design process itself, but also made life easier for my friends from the Development team. Do I still use Photoshop and After Effects? Well, I do, from time to time, mostly to prepare some more complicated animations, but those are rare and really special cases.

Whatever set of tools you choose in the end, it is always good to remember to use your most basic method of communication – talking. Nothing compares to a quick talk regarding the solutions you have in mind. Consult with the Development team and you won’t have to worry about additional work when they start to develop it.

This article is an essence of my Dribbble Warsaw talk about cooperation between Designers and Developers (May 2017).

ZapiszZapiszZapiszZapisz

ZapiszZapisz

Related posts