Last Updated on March 3, 2023
So everyone is familiar with the term PSD to HTML – a term that fills every design agency popup ad. This is of course an essential process, but for the majority of updates, wouldn’t it be more practical for HTML to PSD instead?
So let me explain this idea. You’re working on a new client website, you follow the usual process of Photoshop screen mockups, which are approved before any coding begins. You keep your files and work from them to create the webpages, judging their completion against those initial screens to finish.
The site goes live, but two months later a design alteration is needed, something simple like a font size, adjust padding on an image ect. You needn’t go back to the Photoshop files, the change is so simple you test it with browser’s developer tools and adjust the css, job done.
But what if this trend continues. Six months have passed, you’ve made 10-15 tweaks, each simple and subtle, but when that next big feature needs building in, and you must go back to working from your Photoshop templates, the horror sets in…
The site now looks very different from your design.
You’re left with two ugly options; you make the same tweaks to your mockups (each one individually of course) till they sort of match, or you decide its too different and remake your design files from scratch based on screen-grabs. Not sure which is best but both are a wasted few hours.
Keep them in sync
Some might say simply plan better, you keep your local and remote site the same to avoid these very issues, just make all changes to both design and site as you go. It is often the case that the initial design setup is a small part of a long term partnership of constant maintenance. This is true, but opens up a bigger issue, the web never looks exactly like a Photoshop file anyway.
Fonts render differently, images need downsizing in quality and the UI is broken in practice so needs code fixes. Photoshop’s place as a web design tool is already under threat to the speed of quick coding platforms and open source alternatives, hence the recent work by Adobe to build more web support for its flagship software.
To tweak your mockups as you make the live changes is often nonsensical, and designers move from mockups to live screens at a much earlier stage now, making them a quick reference point before beginning a project. To support rapid development, it would be practical to grab the latest site version and turn div tags, paragraph tags and headings into pixel perfect Photoshop files.
A modern solution
Think about it, you carry on making quick fixes, then when a big new redesign is needed, just hit the button, open the files and begin designing. When you’re done, convert back to code or implement the traditional way, and once the work is implemented you can throw the files away, knowing you can grab an updated version at any time. Adobe has tools to auto generate CSS from Photoshop plus tools like Edge Reflow already, which bridge the gap between design and code, but would a browser plugin to create quick PSD files from a webpage be a practical next step?
I’d use it. The convenience of turning the web into a large open source design playground would be an irresistible option to new and experienced web designers, and surely enhance the progression of modern web standards. Please let me know your thoughts in the comments below or @StrategicApps
