Nick Pettit’s article PSD to HTML is Dead on Treehouse stirred a passionate debate quite some time back. In this article, I will show why PSD to HTML is not dead.
Nick articulated that newer web technologies like Responsive Web design, CSS3 and CSS frameworks like Bootstrap and Foundation make PSD to HTML workflow useless. With these technologies, designers can directly convey their design in code and bypass drawing high-fidelity visual designs in graphic tools like Adobe Photoshop.
Designing by Coding vs Coding by Designing methodologies.
Nick proposes a designing by coding approach for UI/UX design. This is not something new, the argument for it has been going on for quite some time.
If you are a designer, your natural language is visual. With visual language, you create objects, behaviors, and relationships between them by drawing them. Whereas with the programming language you create objects, behaviors, and relations declaratively by defining object properties and procedures, that is by coding.
Now imagine, what is the most effective way to create a rectangle quickly to convey its design, that is look and feel? Definitely drawing is faster and more effective rather than coding it. Now imagine putting together thousands of such shapes to build coherent UI/UX design of a product. Do you still think coding is more effective language to convey the whole design?
Achieving your creative goals by designing by coding isn’t an effective workflow.
You could end up spending a lot of time perfecting your code than perfecting your design. This could lead to lesser creativity than your actual potential.
It’s about production quality code.
Do you think designing by coding approach will produce production quality code? Most certainly not.
If your priority, expertise, time and focus are on the creative aspect of a project, it is highly likely that you will skip necessary and complex processes involved in creating production quality code.
That’s where modern PSD to HTML workflow comes in. From writing semantic and reusable code to optimizing pages for load time, to cross browser and responsive device testing, a front-end developer involved in PSD to HTML conversion in today’s time has to go through many complex and time-taking steps to engineer code that finally runs in production.
Nick, however, oversimplified the process of PSD to HTML to such an extent that it looks redundant and totally useless. This is far from the truth. Check out Paul Boag’s – The Imposter Episode . It’s a great discussion on various topics, especially whether designers should code or not. Here is a quote from Andy in his discussion:
But things have just changed massively and have got more technical, I think there’s more involved in actually writing production code.
If you design and make multiple design revisions directly into code, its quality will pollute as your progress with the project. Also, it becomes harder to keep the code optimized and tested every time there is a design revision.
Bypassing PSD to HTML doesn’t scale.
Are you a freelancer who has the luxury of making a living out of doing one project at a time? Or your client is generous enough to give you an endless deadline? Then probably you have all the time in the world to be the jack of all trades and deliver great results.
However, if you are planning to scale as a freelancer or are already running an agency, you have to deal with multiple projects, team members, and stakeholders in parallel. It, therefore, makes sense to build specialized job profiles and standardize workflows.
Designing high-fidelity mockups first, act as a critical communication tool when working with team members, clients, and other stakeholders. Imagine you wrote a lot of code to present your web design in a web browser, only to discover it’s not what the client wanted!
You end up in long revision cycles and messing up with the code quality in the process. Instead, it’s efficient to discuss, deliberate and get approvals on you high-fidelity mockups first. Then code the designs afterward. It can also help you in preparing more accurate time and cost estimates for overall development.
Also, PSD to HTML workflow enables you to have separate profiles for designers and front-end developers. This frees your creative design team to handle the creative aspect of the project, while your front-end team takes care of all the nitty-gritty of making code work on web browsers and devices perfectly.
So is PSD to HTML dead?
Scrapping PSD to HTML workflow can lead to efficiency, quality and scaling issues.
But there is a genuine concern that designers have which puts them in dilemma of scrapping PSD to HTML process. Here is another quote from Paul Boag’s – The Imposter Episode:
I get it into HTML and CSS and I can look at it on my phone or look at it on an iPad or where ever, adjust the typographic’s scale and do all that kind of stuff I need to do.
The problem designers have is that they need to see how their designs look and feel in a real web browser or a device as they design for various reasons. This problem can be solved by many innovative ways rather than hacking your way through the design process.
There are now many promising tools, for example, Sketch or Macaw, both these tools allow you to draw your designs like you do in a graphic tool like Adobe Photoshop however, at the same time you can you can auto-generate code which can be used to quickly see your design in real browser or device. Then hand it over to a front-end developer and he/she can actually do the proper stuff that hits the client’s browser.
So instead of expressing our condolences, let’s end with a more positive message – the PSD to HTML workflow is not dead, like anything else it evolves and adapts to current designers and developers needs and towards more automation.