Why PSD to HTML Is Not Dead (Even in the WordPress Age)

 This is a guest post by Robert Hapiuc. He was the one responsible for designing the main CodeinWP website. 
“Come on, man, who needs PSD to HTML if I can just get a free WordPress theme and have a site launched in minutes?!” – is likely the response you’re going to get from anyone working with websites.

But would they be right? Is PSD to HTML really done?

Or maybe we’re missing something here…

What “PSD to HTML” actually stands for

Front-end developers and web designers have very different definitions of this.

Some of them see it as “slicing.” Others see it as a natural workflow and part of having a website launched. And entrepreneurs / business owners? Well, they don’t care altogether as long as they get their results.

Technically speaking, PSD to HTML is a process where the front-end developer converts a web page design file to a fully functional HTML web page.

(The format isn’t that crucial, actually. It can be a .PSD, an .AI, a .PNG, even a .PDF file.)

Why it’s still alive

Although claiming that PSD to HTML is still alive and well might seem strange, considering all the available frameworks, tools, and starter themes for platforms like WordPress, it actually couldn’t be more true.

Designers use it, I use it, and I bet even Paul Irish uses it on a daily basis.

The simple fact is that although the scope of its popularity isn’t always huge, it’s still part of the natural process when building a website.

Let’s see why, and start by addressing the elephant in the room:

“What about designing in the browser?!” – someone shouting from the back of the room.

With the tools available today, you can somewhat easily drag and drop things onto a canvas, re-arrange them and then have the final website ready relatively quickly. Without ever leaving your web browser.

However, it does require a particular set of skills.

Mainly, apart from being a front-end developer – knowing the tech side, your HTML, CSS, etc. – you also need to be in tune with the creative side of your brain.

Designing a quality website in the browser alone requires you to have a good feeling for site aesthetics, an understanding of colors and color schemes, typography, usability and accessibility, even user psychology and how they’re predisposed to consume content on a web page.

You need to have all of that if you want to be able to design a high-quality website in the browser.

Editor’s note. Think of it like buying planks of wood, some nails and hammers (your tools), and then attempting to build a wardrobe with all that.

This is what designing in the browser is. You have everything at your disposal, but putting it all together requires skills and a great sense of aesthetics (you do want your wardrobe to look nice, don’t you?).

On the other hand, we have Ikea … with their pre-designed elements that only need putting together. This is what PSD to HTML is. You get all the design work done for you, and then you can just focus on putting it all together. For that, you don’t need additional design skills.

At the end of the day, and in a real life scenario, most developers will get better results probably 90 percent of the time if they work with a designer who delivers them a PSD, rather than trying to build everything in the browser from the ground up.

That being said, if you are a slightly more design-conscious developer, you still might want to check out some of the cool new website builder tools out there. Those tools are meant to help you create a website without the need to write a line of code.

macaw

My favorite such tool is Macaw. Using it, you can design a responsive website, and make it work properly all within the tool, without the need to go to Photoshop or other similar software. When you’re done, Macaw will write good HTML and CSS for you (sometimes you may have to optimize it, though). In this scenario, all you have to do is adapt the site to either WordPress (by turning it into a theme), or to some other framework.

PSD to HTML vs. development costs

Slicing, or converting things from PSD to HTML, is a process of exporting different images and assets from a PSD file (or another design file) to individual files, which can then be used inside an HTML structure. This part is usually done by the front-end developer, but in some cases, the designer will export the files for them.

In that manner, PSD to HTML is always a two-person job. This means that the process can be expensive from a business perspective, both for the end client as well as the business owner employing those two people.

Designing in the browser, on the other hand, can be done by a single person. Like I mentioned before, pulling it off does require a specific set of skills, but it should still be cheaper purely because it’s just one person working.

As you can see, there are always trade-offs, and it’s hard to point out the better method purely focusing on one characteristic.

For example, PSD to HTML can be expensive for certain projects due to the amount of work that needs to be done. But it can also be a lot cheaper for other projects, since it helps avoid situations where the final result is sub-par due to the developer’s lack of design consciousness.

What is PSD to HTML still effective at

If you have removed the PSD to HTML process from your workflow entirely then maybe it’s a good moment to bring it back.

Let’s look into a couple of possible tasks that PSD to HTML is still effective at:

It makes your design unique

One of the problems with modern frameworks (like Bootstrap) and popular WordPress themes is that websites built with them tend to look alike. It’s therefore tough to build something that stands out.

With various forms of PSD to HTML, you can easily introduce elements that are unique and can be placed in various sections of the layout to make it one of a kind.

Doing it small-scale is quick

PSD to HTML doesn’t have to be this big, complete thing where a team of people creates a website from scratch. You can take a much more macro approach, so to speak.

For instance, get a handful of single site elements prepared and then include them in your HTML structure. One of such elements can be a unique frame for images, or various forms of buy buttons, custom social media buttons, unique charts, and so on.

Having any of such custom-made creations on the site adds to its originality.

Swapping default framework elements is simple

If you’re working with a framework like Bootstrap then you can easily swap some of the default graphic elements for your own custom creations. Just have PSDs sliced and then put specific graphic files in all the right places, so the Bootstrap framework uses your graphics instead of the default ones.

Why? Again, makes your design unique.

Problems with PSD to HTML

Now, I don’t want to pretend that PSD to HTML is perfect. There are still some serious issues and traps just waiting for you.

One in particular:

Getting a sliced PSD that’s not done properly

This is the most common issue out there. So you ask the designer to export the assets for you, they spend 2-3 hours to do so and all is good, until you discover that things haven’t been sliced properly, and it effectively makes building the final layout impossible.

So you have to go back and ask for a redo. That’s an hour or two more.

How to avoid this? Don’t rely on the designer’s ability to predict what you’ll need exactly. Give them a rough draft of the exact assets you need and how you need them. Although this will require some work on your part, it will pay off later on.

Possible workflows to go with

Okay, so if you want to give this a shot and try integrating PSD to HTML back into your workflow, here are the most used paths you can follow. (Tested by me in our agency.)

1. The traditional PSD to HTML workflow

In this scenario, the front-end developer receives the PSD files along with all the basic assets, including fonts, icons (mostly SVG icons), as well as some guidelines regarding the interactions and responsive design.

The rest of the information will be extracted by the front-end developer, according to their own work method and process.

This is the most basic and fastest approach available, and it can be used for all kinds of projects.

2. Designing in the browser

Here, the front-end developer receives the full brief for the website, and then proceeds to create the whole thing from scratch in the web browser.

A design-conscious mind is required here and some good work organization overall (the ability to switch from design tasks to development tasks).

In the end, this type of work is much more stressful and requires the front-end developer to be on top of everything. If something goes wrong, it’s they alone who has to fix it.

This process saves some management time and puts only one person on the job, which makes the development itself cheaper, but it’s not very scalable, and can create problems later on.

3. Using web design software

In this approach, after the designer receives the brief, they can build the website in Macaw, for example. Then, a front-end developer can clean up the code, and make sure that everything works properly.

In an alternative path, everything can be done from start to finish by the front-end developer provided they have some design skills.

Conclusion

Although long past its prime, PSD to HTML is still here, and still a process that has its place in the website building workflow.

Depending on the project at hand, it might end up being a more or less cost effective approach, but it’s still something worth considering nevertheless.

But that’s just me. What do you think? Is PSD to HTML still something we should bother with?

About the author: Robert Hapiuc is the founder of 9Pixels agency, a small WordPress development team. He’s passionate about WordPress and marketing.

All edits and witty rewrites by Karol K.