Several years ago, Photoshop seemed to be the standard for web and app design, at least at Outsourcify, the majority of files we would receive from designers would be PSD files, with the odd Illustrator file once in a while, or even worst InDesign files, but in general Adobe would dominate. Since a few years things have changed quite a bit.

To answer the headline, quickly, no Photoshop is not dead. Photoshop is cherished and detested at the same time, some designers still use it and it’s still OK to design websites that way and convenient for web developers to transform these designs into HTML. However, other tools now exist to create designs for UI (User Interface)/UX (User Experience).

We are Linux and Windows users at Outsourcify, we only have Macs for testing, but we are aware most designers work on Mac computers and a many of them seem to have moved to Sketch, which is unfortunately Mac only (and it seems will never be ported to Windows).

However for us, Windows users, Adobe now offers a new reasonable option, the Windows form of the new stallion in the Adobe’s steady, Adobe XD (Experience Design) which is getting up to speed with its Mac competitor. There’s also Figma, that is purely web based.

Follow the leader : Sketch

Sketch was first released in 2010, so it’s nothing new, but it took it a few years to be broadly adopted. It was created as a replacement for Illustrator and Photoshop while offering a more user friendly interface, and additional tools for interactive prototyping and easing web development by allowing to export assets and styles directly from the design.

It’s main issue is that it is and will remain Mac only. This might in the long run lead to Sketch losing its leading position among UI design tools, but fortunately designers can still achieve effective cooperation with developers with third party tools (Avocode, Zeplin, etc… see below).

Keep the trust with Adobe : Adobe XD

Adobe XD is much newer as it was launched in 2016 and seemed to be an answer from Adobe to Sketch. Like Sketch, it is a desktop application, and there is a Mac and a Windows version and it allows designers on Mac to collaborate with developers on Windows (and the oppposite?). Both versions are different though and it took some time for the Windows version to catch up with the Mac version. The latest updates of Adobe XD have brought the hotly anticipated layers management tools to the Windows version, in addition to a couple of improvements. Layers are vital, it’s a basic feature needed for any website design.

Both Sketch and Adobe XD got quickly adopted because they answered the needs of user experience designers. When UX was created in Photoshop or Illustrator, it was for lack of better tools. Nowadays, if you are as still working on those and sending PSD or AI files to web developers, it might be the moment to try out one of the new market leaders. Now that Adobe XD stands up to Sketch and is available on more platforms, it could be the opportunity to begin changing to Adobe XD. Learning the Adobe XD fundamentals is easy, much easier than Photoshop or Illustrator.

 

A new kid on the block : Figma

A few years ago, a barely 20-year-old guy raised millions from Silicon Valley investors for his startup Figma to build a browser based photo editing tool. In a browser as opposed to desktop applications that need to be installed on a compatible OS as Photoshop, Sketch or XD are. Figma deserve to be tried and seems to offer the most features for the least amount of money.

Third party tools for viewing designs

When we look at the out-of-box capabilities of UI design tools, it’s still is a pain to have to use another additional tool (which involve additional costs also) to allow designers and developers to collaborate, but in the other hand these tools have been evolving and now offer more then only being able to view the design files, it’s now possible to generate CSS from layers, export images, fonts, styles, pick colors, measure sizes, distances and more.

A selection of third party tools for viewing Sketch/Adobe files are :

Avocode (avocode.com)

Avocode is the first app we used to view and integrate designs created with Sketch. It’s been a while we haven’t used it and it evolved quite a bit since as it now allows to open Adobe XD CC, Adobe Photoshop and Sketch designs on macOS, Windows, and Linux, or in the browser.
Avocode v3 is coming out in 2018 and could solve all issues of collaboration between designers and developers : https://avocode.com/update-3-0

 

Zeplin (zeplin.io)

A direct competitor to the above, it allows to open  SketchSketch, Adobe XD CCAdobe XD CC, FigmaFigma, and Photoshop CCPhotoshop CC designs and export everything needed to build a HTML/CSS template from it.

 

Lunacy (icons8.com/lunacy)

A newer option, still in beta, from the “icon provider” company icons8, and it’s free but can only read Sketch files.

 

 

Design to HTML

Outsourcify can offer any kind of design to HTML services, we don’t mind receiving Photoshop files, we are actually not really sure we prefer Adobe XD, let’s say it depends on each developer, some still prefer their good old tools, and for good reasons also. But seriously, the web and application design scene has improved altogether since the old PSD to HTML days and there are reasons why it’s the time to switch to better tools.

All things considered, if you require a web development team that can deal with different kinds of web and application designs to transform them into the best HTML code you can expect, at Outsourcify, we do “Photoshop to HTML“, “Adobe XD to HTML“, “Sketch to HTML“, “Figma to HTML” and we are ready to try “anything you want to HTML” if you can convince us this new design/UI technology is the new trend for good reasons.