May 7, 2015 in PSD to HTML

Dear “PSD to HTML”, it’s time to evolve!

Of late, I often see a discussion as “Is PSD to HTML dead”? Having been involved in this art for few years, I am scared to answer ‘Possibly Yes’ to it, but we can rephrase this question as “Is PSD to HTML still relevant?” This is quite a thought-provoking question. So, lets discuss whether there is some merit in this topic.

Why PSD to HTML?

There was a time when Photoshop was considered as the best tool to design websites. This soon became a workflow, to make a design in Photoshop, get it approved from client, and get the design sliced and coded in HTML page. This process or workflow was named PSD to HTML conversion.

However designs was created in other software or tools such as Illustrator, Fireworks, GIMP, etc. Conversion of PSD to HTML was so widespread that it was used in general for all file formats, and not only for PSDs.

Why this question now?

Initially, Photoshop or other such design tools were a good option, since these were easy to use for basic design requirements. However, these are not meant for designing websites and so these were not evolving as the web designers were really expecting for.

For example, one common problem I have often faced is use of blending modes for layers in Photoshop. Designers use them very often while designing websites, but it’s painful when we need to turn off one of the layers using blending modes, such as to create a transparent image.

There are few new tools that are created specifically for designing websites, for example Adobe Muse, Sketch, Axure, etc. Since these tools are developed specifically to design websites, they now have features that were not available in previously used tools. These new features make the web designer’s life easier.

Do I really need a designing software?

Few designers, who are blessed with multiple skills, and who like to handle their projects from marketing, to design, and then development, prefer not to use Photoshop now. They like to create designs directly in browser, while coding HTML and CSS for page.

This often calls for issues later, for example when the decision maker suggests changes and we make iterations, the code is not as clean as it should be. Since they do not have a ready design reference, they revise code for design adjustments, and hence a less-optimized code. Ultimately, it costs more than the time saved earlier by skipping the design stage.

New Design Tools

There are few new software or tools available, which are created specifically for designing websites, let’s analyze them:

Axure

This is actually a prototyping tool, I included it in this list because in few scenarios it’s good enough to make a prototype, get it approved from client, and then make a websites directly using HTML and CSS. You don’t actually need to make a design if you don’t feel required.

But in most of the cases, its a good idea to make a actual design and show it to client. This gives a more clear picture to client about what you are going to build. Also if you are going to add some interactivity or backend functionality to your website, it will save you time and efforts later.

Adobe Muse

This is a new software from Adobe that allow you to develop your website while you design it. If you are using adobe muse you don’t need to write any code. Its capable of making fully functional responsive websites for you (static websites only).

But code created by Adobe Muse is not clean, similar to any other WYSIWYG editor. If you prefer quality in code, and you want full control over your code, you may not be interested in using this software.

Adobe Muse is discontinued by Adobe, and They have a new Software named Adobe XD, which is similar to Sketch.

Sketch

If you are familiar with Photoshop and Illustrator, learning Sketch will be very easy for you. I believe it is the best tool so far for designing websites mainly because it is actually developed specifically for designing websites. You can read about it’s features on their website.

The major drawback is that it’s only available for Mac.

This is a quick list as there may be more such tools that I am not aware of.

This is ‘Design to HTML’ Now

Considering that the basic process of ‘design files to HTML’ is still the same, and since there are many other tools available for designing, it is no more ‘PSD to HTML’ now. If you are always using Photoshop, the term makes sense, else, we need something more generic and not really too specific or file-format specific. Shall I call it ‘Design to HTML’? Why not? This term gives freedom to every ‘Design to HTML’ specialist to use it, irrespective of the tool or software.

Please share your thoughts below!