Moving from Illustrator to Sketch+Invision
In the last 8 month, we made a complete shift in the way we design for web and mobile. But before that a little story/rant.
I was never a fan of using Photoshop for web projects and I really liked and endorsed working on Illustrator for the most parts. It offered more features to quickly try multiple variations and create and scale objects. But in the end, we had to convert the final designs to photoshop anyways because that is what the developers accepted. This was the part I personally hated the most. We had to meticulously convert the AIs files to PSDs using Adobe’s own broken ‘export to photoshop’ command where it could take from 5 minutes to 5 hours to get the right results.
The infuriating moment where our patience was tested came at a client meeting that we had set up to discuss why their new website didn’t look like the designs we had sent them. We asked their developers to open the Photoshop files we had spent gazillion hours converting to compare them with the HTML that they had produced.
Their faces went blank.
After a few minutes of fumbling around, they confessed that they were on a Linux ecosystem and didn’t have access to photoshop. They had never opened (or downloaded) the file and had been eyeballing the designs the whole time. That did explain why they were so unwilling to extract simple icons and assets from the file but it also left us raging over the wasted effort we had put in for them. It was clear they didn’t care or need the PSD outputs. Personally, I have never understood why the needed it in the first place since Illustrator is far better at displaying the element coordinates which most claim they need it for.
At the same time, we had been working with Invision for prototyping. We used PNGs and created hotspots on them to show our clients how their website/apps will look and work.
I had also worked on Sketch for wireframing but had to switch back to Illustrator because the rest of the team relies on Adobe softwares and it’s hard to break out of the ecosystem.
It wasn’t until we decided to redo our own website that we decided to use Sketch to its full potential. Although most designers I’ve read say that they got the hang of sketch immediately, I did miss a couple of features illustrator has like the outline mode and the shape maker tools. But I found it to be great in a lot of areas like the simplicity and the focus on UI designing, maintaining the entire project in one file. The best feature though was its tight integration with Invision through the craft plugin.
Creating prototypes is a breeze. Sharing the designs and assets with the clients and the developers is easy as a cake. The developers get all the information including font face, font weight, font size, element colors, copy and even some CSS directly from the inspect mode which saves their time. As for us, we don’t have to export each and every icon separately saving our time. Iterating designs and updating files and is immediate and collaborating with the coders works seamlessly even though they sit in a different part of the city.
We had to spend some time teaching our developers how to use Invision and why it would be great to move to it. Needless to say, it didn’t take a lot of convincing. The jump saved both them and us a great deal of time and effort.
The bad part of this great experience is that our designers using Windows cannot be a part of this workflow. It is really a shame and it seems that Bohemian, the guys behind Sketch don’t have the resources or intention to support more platform as of now. This is a real hitch because more and more designers want to use this workflow but are limited by their platform of choice. This also means that I cannot work on web projects at home because I use a Windows machine as my personal workhorse.
As more and more design softwares aimed at web and app are cropping up we are looking forward to integrating them into our workflow. We have started looking at Figma which has been gaining a lot of traction lately, is cross platform and can open sketch files. It does lack integration with Invision currently which I really love using. But seeing as Figma is web-based and easily accessible we might not need the middle man.
We’d love to hear your experience with new tools and workflows and how it has helped you with your productivity.