About a year ago I posted a blog about the pro and cons of designing in HTML. After designing one or two websites purely in HTML and CSS I felt the need to go back to Photoshop (but not entirely). In this blog I want to share my experience with you. Why did I go back to Photoshop and what does my design process look like.

Designing in HTML revisited

22/12/2012 - 01:00
Painting of an artist at work by Jan Vermeer.
You need the right tools to create the best results.

Back To Photoshop

Designing in HTML and CSS has a lot of advantages as detailed in the other blog post. But it was just too cramping for me. I felt I just repeated the same styles and layout. It was very hard to think outside of the box and create something different. So I went back to Photoshop. But just to make a start! I will never ever again present a webdesign only consisting of JPEG files.

My current design process

  • Usually I start of by sketching a rough layout on paper. Just so I can quickly experiment with some layouts without too much effort and also to get my mind in 'webdesign-mode'.
  • Next I'm firing up Photoshop and create the homepage and a secondary page within Photoshop. Every style and font decision is made (and final) within this stage of the process. This will be a finished design (even using the right content). I use the 960 grid 12 column PSD as a base for my Photoshop File.
  • I create a new folder on a sub domain we use to display our designs to our clients. These folders are open to the public (if you know the right folder name) but can also be made private if the client makes this request.
  • Then I download, unpack and upload the latest version of the HTML5 Boilerplate to the created folder.
  • Changing the basic files such as the Favicon, Touch Icons, humans.txt, meta description etc. so they resemble the project name.
  • By creating an extra 'templates' folder I can reuse some elements on the pages. For example I put the top of the included index.php into the file 'templates/html-top.php'. Now I can reuse this piece of code on every page by using the follow snippet of code  . This is very useful when you have created multiple pages and (for example) you need to change the meta description. Instead of editing every page separately you now only have to change one file (the 'templates/html-top.php' file). I use these 'templates' for things which are consistent on every page (such as the top, navigation and footer) and reusable elements (such as a news or events block).
  • Now I recreate the two pages designed in Photoshop with HTML and CSS.
  • On top of this I create a number of additional pages with HTML and CSS (most commonly a total of five pages are included in a project).
  • The final stage is making the website responsive (if included in the project).

Now I am ready to present the design to the client! As you can see it's quite some work from start to finish but going through this process the last eight months really showed me I am having best of both worlds. Photoshop enables me to be very creatively and converting it to HTML and CSS really brings the design to live. It's fun to see how clients can directly view the design on their own mobile, tablet or laptop. It makes getting the design approved a lot easier.

Hopefully sharing my process has give you some new insights. But maybe I can learn something from you as well! Let me know in the comments if you have any need tricks or share your process!