PSD to HTML is Dead

almost 9 years ago from , Designer/Front-end Dev

Accidently stumbled on this article a few months ago by Nick Pettit.

Does anyone here only use Photoshop as a communication tool when working with web design clients? Or do you skip a high detail mockup and prototype the mockup with a CSS framework and then work on the visual design later?

I know 8th Light work on the visual design after the prototyping and user testing is done, which I found very interesting.

Would love to know everyone's thoughts.




  • Florin RimaruFlorin Rimaru, almost 9 years ago

    I've never used any PSD to HTML services and we rarely ever use complex PSD mockups anymore. Since clients prefer more "aired" designs, we usually just do a sketch or wireframe before going into development.

    4 points
  • Bryan KulbaBryan Kulba, almost 9 years ago

    For the last 6–8 months, we've abandoned presenting clients a precise mockup (in our case, a pdf). We found that they never do justice to how the real website plays out. Also, high-fidelity mockups seem to get the client focusing on the wrong things (details in visuals vs communication goals).

    Instead, we've been presenting them with sketched mockups on large pieces of brown paper alongside style tiles (for the clients' sake, we call them mood boards). We've found that with this sort of mockup, the client has to use their imagination a bit more and it shifts how the discussion about the site happens. Basically, they're less distracted by colours and visual elements and more focused on structure and the goals of the site.

    This approach, however, needs to really be presented alongside research, rationale and a very explicit set of goals for the website. You need to ensure that the client is aware that you've deeply considered their project and are presenting them with what they need to understand what you're doing for them. Otherwise, it's easy for them to see this as an approach that seems lazy (or not worth what they're paying for). They need to trust you.

    That said, we still spend a bit of time building less than pixel-perfect mocks to help keep ourselves on track. Without it, it's easy to wander in the design and development and lose track of time.

    If you want to read more, we wrote a post about it a few months back:


    3 points
  • Shawn BorskyShawn Borsky, almost 9 years ago

    As an industry, we seem to be acting like designing in the browser is the new norm. But, I have experienced it in ideal form exactly 0 times. I see dozens even hundreds of articles and writing about it but its always discussed in the abstract and usually not in a very helpful way.

    With the exception of http://styletil.es - Its rare to see exact process discussion on how designers are no longer using PSDs.

    What I see as I work with different customers and clients is that in reality: the grand majority of designers are still more or less forced into using PSDs to communicate site design then performing a conversion step to HTML. Mainly because most stakeholders don't work well with prototypes and wireframes.

    Everyone gets it, a mockup is not a website and can't easily adapt to variable screens. But, HTML prototyping is still highly impractical for a number of project types such as custom products and at the least require a notable investment in pattern-style frameworks to be built before useful prototypes are produced. Not to mention tools like Marvel and Invision are still an extremely common complement among the best design teams.

    Even in 8th Light's process, they brush over what many of their steps actually mean and only mention an actual tool in their wire-framing step. PSDs to HTML may be on its way out but its not even close to dead.

    Personally, I think the industry has a long way to go before we agree on a paradigm shift in design and development process.

    1 point
  • Bryan McAnultyBryan McAnulty, almost 9 years ago

    I completely agree that the idea of high fidelity, pixel perfect mockups as PSDs that would then need to be recreated in HTML/CSS has not be the right away to approach a web project for awhile now. It is tedious and a poor way to communicate a high level of interactivity and adaptation to different screen dimensions.

    I wrote about this in 2012 in a Quora post: https://www.quora.com/What-is-the-best-way-for-designers-to-present-mock-ups-or-specs-for-responsive-web-design.

    I am sure some visual designers still follow this pattern, and for some small mom and pop businesses that only need a simple website that is not responsive, it would be fine. Anyone who does still work this way would be better off beginning to adapt or finding the same kind of work in the future may prove more difficult.

    1 point
  • Emily White, 8 years ago

    I also found a post for "PSD to HTML is Dead or Not". So I want to share it with you guys. http://www.csschopper.com/blog/psd-to-html-is-dead-is-it-a-myth-or-a-truth

    0 points
  • Cameron DaigleCameron Daigle, almost 9 years ago

    We here at Hashrocket still find that high-fidelity representations of visual direction are still an essential part of getting a project started. Once we've established a look & feel and overall structure, we move to code as soon as possible, but the initial broad strokes of a web app design are much more malleable in an environment where you're not making assumptions about code/DOM structure.

    And time and time again I've found that clients don't respond as well to incomplete ideas. So, tools aside, it's just most important to communicate your idea as thoroughly as possible. For us, high-fidelity mockups in Photoshop are actually quicker and more communicative than (potentially throwaway) markup, so that's what we do.

    (It's worth noting that we only hit Photoshop after a 3-day wireframing/storycarding session with clients – we don't just crack open Photoshop on day 1.)

    0 points
  • Andy LeverenzAndy Leverenz, almost 9 years ago

    I use a combination of http://styletil.es/ and higher fidelity PSDs. If you develop on your own then I would say do a quick sketch by hand or in photoshop and move straight to code. If you have to hand designs off to other developers the more detail the better.

    I use both of these routes on a day-to-day basis. I don't feel it is dead. With the current trend being flat it makes coding easier but It may go out of style soon. You never know...

    0 points