![no[PSD to HTML] - New Trends in Web Building](http://www.htmlcut.com/blog/wp-content/uploads/2014/05/no-psd-to-html.jpg "no[PSD to HTML] - New Trends in Web Building")
For many years the essence of the website building process has been described in 3 short words: PSD to HTML. It means that you design a web page layout in Photoshop (or GIMP, or any other similar software suite) as a .PSD file, then slice it and code in HTML, CSS and JavaScript. You can code yourself, or use automated tools, or hire an independent provider of conversion services – such details don’t affect the production work order and are up to you.
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 no[PSD to HTML] trends in more detail.
noPSD Movement
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 NoPSD Movement by Andrew Carr, Ryan Boucher and Mike Gardiner:
“Andrew finds that most of the styling he would normally do in Photoshop can be done using CSS3.”
“Andrew says he’ll still do some sketching and Photoshop here and there, but it’s for wireframing and layout, not for perfecting pixels. Just like the NoSQL movement was about using alternative data stores to support better data-modelling, the NoPSD movement is about alternatives that better support the real movement: Continuous Design.”
“Continuous Design is applying the same practices we use in writing software and product development, to design.”
“This is where using a more dynamic tool like HTML and CSS comes in; your designs become more adaptive to the changing product. As a designer you’re no longer just projecting a good looking vision using Photoshop; you are involved in the development of the product.”
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.
noHTML
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.
One of the ways to simplify and accelerate HTML/CSS coding is to utilize CSS and HTML preprocessors and frameworks (for example, Saas, LESS, Bootstrap and many others), code generators and/or JavaScript libraries (jQuery and so forth) (for more information see the roundup 20+ Thoughts on CSS/HTML Preprocessors and Frameworks). These tools can speed up the development process very much and help you not to bother about cross-browserability and responsibility.
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.
no ‘to’
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” (Lance Evans).
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.
noCommodity
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
– Use the vanilla text editor
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.
