Contrary to what lots of people might think, not everything related to web design is done using Photoshop anymore, and lots of programs are starting to arise. Designing in Photoshop isn’t as easy as it sounds, it can even sometimes be quite difficult. This is why, today we’re going to look at two alternatives, Sketch and Adobe XD, and compare them in terms of web and mobile design. Shall the battle between Sketch, Photoshop and Adobe XD begin!
Is Photoshop dead for Web??
With new technologies being launched everyday, Web Design is changing at a fast pace, as well are the methods used to design.
In terms of chronology, Photoshop 1.0 was launched in 1990 on Macintosh. Its source code, in Pascal, used pixels to define images. Therefore, Photoshop’s main use was to create and/or modify pictures. The evolution of the program was tremendous until Photoshop CS1 was launched. Unfortunately, there hasn’t been lots of big updates since then.
Web designers have been using Photoshop to create designs for years. However, there were lots of inconveniences using the program for that purpose; like the weight of the psd files, the incompatibility between the different versions, or the gigantic number of layers composing each psd (photoshop file). Not to mention that it complicated integration a lot! Nevertheless, at EVO, like at most companies, we tried our best to deal with it. We used dynamic objects as well as a second psd file for our style guides. Not the best of solutions…
One day in 2010, a revolutionary program came to life, directly imported from Germany: Sketch (the app designing program not the one people use to design your new kitchen). To say it was ahead of its time, is a euphemism. It’s actually probably the reason why it stayed unnoticed for a while. However, thanks to a fast-growing community and an addition of ressources, it re-appeared on our radars in 2015.
On the other hand, coming directly from the Adobe offices, a program was announced to be the revolution the UI & UX world needed: Adobe XD. This program was announced in September 2015 and launched in 2016 on Adobe CC US. Many people downloaded it because Android, iOS and web ressources were included in the app, but also because it came from Adobe (one could compare the level of exaltation around Adobe products to the one generated by the release of a new Tarantino movie: you might not like it but you HAVE to see it).
But let us return to the matter at hand: how do we work at EVO?
For years, here at EVO, we have been designing everything using Photoshop. It wasn’t the best solution but it kind of worked for everyone. The designers had their program and the developers used a complementary program to export the layers. It was no paradise on earth, but everyone managed.
But it was still a lot of work, though! You might already know this but a mobile design, for instance, has to be exported multiple times and using different methods because Android developers and iOs developers don’t have the same needs and the coding languages they use are quite different. Guidelines are also different wether you are coding for retina screens or not. Plus, the size of the screen often depends on the brand of the phone. Even in one brand, multiple formats are available. Compare the screens of an iPhone 4, iPhone 7 or iPhone 7+, for instance. That’s quite a lot of things to take in account. Our job is a constant struggle between formats, design and ergonomics. And one cannot create a different design for each screen!
Even with web formats, exporting layers takes a lot of time and is a waste of time for the frontend developers.
This is why Adobe XD was created. It was supposed to create bridges between designers and developers. But it was also a good way for Adobe to have more products to sell!
At EVO, we tried it as soon as it was available. With a promise of monthly updates, we hoped we had found the future of web design. What a disillusion! We discover the limits of the program very quickly especially in terms of final designs… Let’s not even mention all the trouble we had to go through just to make a few corrections and all the bugs within the system. Of course, it wasn’t all bad. The program was easy to use and offered many intuitive shortcuts. You had access to a very clean prototype mode. To sum up, it was a excellent wire framing tool, but nothing more. You could use it to check if your project was worth something and find solutions to make it work.
Different apps for different purposes: the story of why we decided to use Sketch
Sketch was created for the same reasons as Adobe XD. And it is really easy to use! Did I mention its minimalistic interface and unlimited web ressources?
Sketch contains a very nice and well-thought toolbar that you can use for every format: mobile, web, print, Facebook ads, etc. It adapts itself depending on the format of your design; even if it was originally conceived for mobile and web design.
There are also lots and lots of plugins available from gif animation plugins to prototyping and exporting plugins.
In terms of design, it is amazingly simple to use as everything is made with vectorial images.
There is also a symbol mode which, in my opinion, is a real game changer. You don’t need to go through each screen to change an element anymore. Symbols are sorts of dynamic objects within your Sketch file that you can create and duplicate very easily and that updates your element everywhere within the file when changes are applied to it.
Finally, there is also mirror app available for mobile phones from which you can see your design in real time and at the right format. It is pretty handy and quite awesome, I have to say!
I remember that, when I was still at school, my dream was to never have to use Photoshop again. Today my dream actually almost came true as I am using Sketch 80% of the time now.
So basically, this is how we work now at EVO: Photoshop is used for photo editing, Illustrator to create vectorial elements and Sketch is used to design mobile & web apps. It’s one small step for the UI Designer but a giant leap for our clients!