PSD to HTML – New Trends in the Web Building
The “PSD to HTML” workflow has been one of the most popular (and de facto standard) ways to create websites. But now more and more people say about new trends in web design and that the PSD to HTML approach is dead.
Let’s consider these [PSD to HTML] trends in more detail
The origins of this trend are related to the emergence and dissemination of responsive web design (RWD), as well as to attempts to make design a more organic and integrated part of the web development process, in particular, when the Agile / Lean development methodology is used.
We’ve collected some important articles on designing websites without Photoshop in the post To Design or not to Design in the Browser – 20 Pros vs. 6 Cons in which you can find a detailed description of the concept and recommendations how to use it correctly, as well as opinions and thoughts, and a list of special tools. Yet here I’d like to quote Continuous Design and the PSD Movement by Only PSD 2HTML.
So, Photoshop doesn’t “die”, it just plays a more modest role as one of the tools for image editing, wireframing and sketching, rather than the main and ultimate instrument for web design.
The current versions of the hypertext mark-up language and cascading style sheets – HTML5 and CSS3 – have a lot of impressive possibilities and powerful features. At the same time, the problem of cross-browser coding still exists and requires front end developers to write additional browser-specific code. The responsive web design adds a fair amount of complexity too. As a result, today HTML/CSS coding is more sophisticated than 15 or 20 years ago, and many designers would prefer to use auxiliary tools to facilitate it.
However, not all designers are happy with these tools and recommend to use them carefully.
Another way to avoid HTML/CSS coding is online automatic (free or paid) converters. In order to generate correct code they often require your .PSD file to be prepared in accordance with some rules. Also, there are plugins to transform .PSD files into HTML/CSS code.
At last but not least, you can take advantage of the opportunity to hire PSD to HTML services such as HTMLcut.com (sorry for self-promotion). It will cost you some money but the quality is better and requirements to your .PSD file and your knowledge of HTML and CSS are minimal.
A real dream for many web designers is to have a possibility to create ready-to-use websites with the help of a single easy-to-use tool (or a suite of related tools) with as less coding as possible.
One of the first attempts in this direction was Adobe Dreamweaver. The next prominent step was Flash which “let designers reliably produce fabulous design work with either little or no programming. And if a designer could muster the spirit to learn a little bit of Flash’s ActionScript code language, well then, almost anything was possible”
Today Adobe offers Muse for designing sites without writing code. Muse gives designers hundreds of fonts, a lot of widgets (drag-and-drop custom navigation, slideshows, forms, etc.), and possibility of in-browser editing. Muse allows creating websites that will render well across multiple browsers and devices.
Another popular way to build sites is WordPress, in both wordpress.com and wordpress.org versions. With the powerful WordPress’ community you can create professional websites with little or no HTML/CSS/PHP coding too.
The list of similar tools and services goes on and on and on. They differ in the idea and approach behind them, their functionality and features, and have some restrictions and shortcomings. However, quite a few people (both professional web designers and amateurs) can find among them one or several tools to satisfy their needs in the website building now.
If at least sometimes you value creativity in web design and want it to be a craft, you should go back to origins. One more quote, this time from the article How to become a Perfect Coder on your own:
– Say no to developer tools
– Avoid the code generators
– Write by hand
In other words, at least sometimes don’t follow fashionable trends, use simple and original tools, as well as experiment with new HTML5/CSS3 features, test case studies and let the process to flow in a natural way.