From PSD to HTML. Why did PSD Layout die?

Layout building is workflow. Firstly, web page is created in Photoshop Document (PSD), and then converted into the code (using HTML, CSS and JavaScript). Photoshop can be replaced by any other image editor (such as Pixelmator, GIMP, and so on.), but the principle is the same. Here’s a little more detailed step by step guide of old from PSD to HTML process:

  1. Draw a highly precise layout in Photoshop with pixel precision as you would like to see your site.
  2. Use the slicing psd to html tool to export images in a web layout.
  3. Write the HTML and CSS, which use the exported style layout.

At first glance, this may seem like a good idea.
From psd to html? Easily!
Of course, it can be difficult start to code, if you do not know the final web-page look, that’s why experiments with Photoshop and then “export” to the HTML, may sound reasonable.

Psd to responsive? That’s a big question.
Many web companies have used PSD HTML as a template for the workflow team. In other words, a designer creates the layout of Photoshop, and then sends it to the developer, who writes all the code. Nowadays, the work of a web designer, as a rule, covers the aesthetics as well as HTML and CSS coding .

Was slicing PSD to HTML good idea at all?

Yes, the process of slicing PSD to HTML layout was one of the best ways to build websites. There are two big reasons:

  • The first reason – quality of pictures. Before the browsers support all the wonderful CSS opportunities (shadows, rounded hips, gradients, and others) it was very hard to create a cross-browser effects without the use of pictures. Designers had to create shadows and angles, when clever tricks in the code used to place images on the page. These qualities were necessary for everything, therefore creation of highly precise layout pictures saved time.
  • The second (and perhaps most important) – Internet was used only on desktop browsers, and did not go through phones and tablets as today. Development of a single fixed resolution of 1024×768 was a quite ordinary option.

For these two reasons it becomes clear why the designers looked at Photoshop as their main tool. Images were needed for one screen resolution.

What’s wrong with the PSD layout now?

In comparison with other areas of art and technology, the web is relatively young and rapidly evolving. We – GNS made dozens of websites using some variation of PSD to responsive HTML. Here are the main reasons why we believe this way is dead.

Adaptive Web Design

Firstly, there are many ways to surf the internet now. Phones, tablets, desktops, laptops, TVs, and others. No single screen resolution, which the designer can focus on.

Without going deeper into the intricacies of the adaptive design, we can state that Photoshop is based on pixels. Web pages are flexible and constantly changing.

CSS design

Secondly, the new CSS features have become publicly available. There are a few issues left here and there, but support has grown significantly over the past few years. Common effects such as shadow, gradients, rounded corners may be formed in CSS and often do not require any more images.

Conclusion

Thirdly, the web industry has grown. We had plenty of time to improve our current understanding of what works and what does not. Today’s companies are more likely to take a designer who knows CSS and HTML as well as aesthetics.

It also means better support for current processes. PSD to responsive – not  a problem anymore. CSS frameworks like Bootstrap and Foundation provide more opportunities for design in a browser. Layouts drawn on paper in pencil, as well have stood the test of time, because they allow very fast iteration.

Does this mean that we can complete converting psd to html without Photoshop?

No! Not even close! Photoshop is very important for web design. The problem occurs when Photoshop is used to solve everything without thinking about higher goals (website design). Photoshop is perfect for editing and exporting photos to the web. There are still situations were generation of fully fully detailed layout (in Photoshop, Illustrator, or other) makes sense. Here are some examples:

  1. Layout with high accuracy can be a critical tool in design for communication with the customer. It may seem, that it is quicker to skip creating highly precise layout, but it may come out later, because not all customers can understand how a prototype (frame) of the site can then be transferred to the browser. Layout can serve as a tool during the discussion before writing the code.
  2. Layouts can be very important when working in medium or large teams. We often create models of high definition when planning new design features of the site, because it is a powerful way to synchronize each mental model with a look of new functionality or finished project.

We learned the subtleties of adaptive design long time ago and can say for sure that  in “from PSD to html” process, psd is a good visual measure, but not a major working tool.

More About Web Development By GNS