Part 1: How to Turn a Design Image Into a Working Web Page

Part 1: How to Turn a Design Image Into a Working Web Page

Do you sometimes struggle taking a design image and turning it into a working web page? Does your development start out well, but then you can’t seem to get one part of the design working? Are wireframes easier for you to create than code? Do you make it through development only to find that your site loads slowly and difficult to maintain?

Many designers have trouble turning their design images into working HTML/CSS web pages (some don’t even code at all), and often that trouble comes from their approach to developing the design and how they think about the development process prior to writing a single line of code.

Part 1: Turn Design to Web Page

[tut demo=”” download=””]

Contrary to what some believe, CSS is not a difficult language to learn and developing web pages and websites doesn’t have to be hard. Often, the problem is getting lost in the details before developing the foundational structure. Other times, problems arise from getting locked into keeping a minor and inconsequential part of the design that adds complexity to the code.

In this post, we’ll look at a design comp you can freely download, and see how we’ll turn the design into a working web page. I’ll keep the code light in this post, though you can download the code I used to build the page as well as the original code that comes with the design template. In the post itself we’ll concentrate mostly on the thought process for developing the design.

The Artificial Casting Template

Consider the design below, which you can download for free from Smashing Magazine (It’s the 3rd template down on the page). You can also see a demo as developed by the template creator here to compare to my demo above.

Artificial Casting

I chose this template, partly because it looks nice and I like to play chess, but mostly because it’s a typical 3-column layout and offers a few challenges and options when developing. It also includes a few details that we may or may not decide to include in the final page.

General Thoughts on Moving from Design to Development

Before getting to the specifics of the Artificial Casting template, let’s consider a few things that will be common to developing all websites.

Like it or not, every web page is developed with boxes. Every element in HTML has a box defining it based on the CSS box model. We’re ultimately building a big box made up of smaller boxes. Some boxes will sit next to each other, or on top of each other, and some boxes will fit inside other boxes. That doesn’t mean our design needs to look boxy, but rather that we need to think about the boxes that we need to create when developing.

At the highest level, a few larger boxes will make up your general layout and then the details of your design will fall into smaller boxes inside those larger boxes. Thinking about and seeing these rectangular boxes will help us determine what parts of our design will fit nicely into a box and what parts will need to break free of these boxes. First, always think about these larger layout boxes. Code from the outside in, as opposed to focusing on small details first and coding from the inside out.

Images and HTTP requests are two of the main things that slow down the loading of web pages. While we’re looking at our design, it’s a good idea to think about what absolutely needs to be an image and what could easily be recreated with code. We’ll optimize our images as one less image reduces both file size and the number of requests made on the server.

I often see images on web pages that are nothing more than large solid blocks of color. There’s no reason why a solid block of color ever needs to be an image. When we’re looking at images, we’re thinking about how we can reduce the overall file size of any images we need and reducing the number of images we have to use.

The Layout

The first thing we want to think about with the template is what our overall layout will look like. We’re going to divide the design into large blocks and in this case, it’s easiest to first do this horizontally. If you look at the design you can see 3 bands across the page. The bands will become our header, our content area, and our footer.

The Footer

At the bottom we have a clear footer containing 3 informational boxes and some text. Ignoring what’s inside the footer for a moment, the first decision we need to make is where to divide the footer from what’s above.


The ragged edge is going to be an image. It can be part of the footer or part of the box above. Either will work, but I decided to place the image in the footer.

While we won’t discuss it in this post, it will eventually make sense to use something like PHP include files to keep parts of the page that repeat across the site, in a separate file. Since this image will be on every page of the site, it made sense to me to include it in the footer, which will eventually become a footer.php file.

Everything else exists as details inside the footer, which we don’t need to think about while building the basic layout.

The Content

Right above the footer we have our content divided into 3 columns, 2 sidebars and a main content section between them. We’ll talk about these columns in a little more detail below. For now it’s enough to consider that we have one large content box that will be divided vertically into 3 columns or 3 smaller boxes inside our larger content box.

As with the footer, we have to decide where our content box begins and ends. There are 2 elements here that can cause some issues in developing. The login box which breaks across columns and the image of the chess pieces which break across the content and will be our header.

The original template was developed considering both as part of the header. I decided to place both of these elements in the content area. Same with the footer, I asked myself if these two elements would appear on every page of the site. They certainly would and were probably meant to be when the template was designed. However, I think it offers more flexibility to allow them to change from page to page.

Maybe, different sections of the site could show a different image of chess pieces and that the login form is only present on some pages and sections of the site.

We won’t be using an include file for our content area. It’s the one section that will likely change from page to page, so including design elements that we may want to change across the site in this box makes the most sense. We will have to figure out how to code the chess pieces image though, since it will now be located in both the content and header.

The Header


This leaves us with the header. By process of elimination our header will include the logo, the tabbed navigation bar and the gradient background behind both. Between the header and content area is a thin line across the page and since this also won’t change from page to page, I’m including it in the header, which will eventually become a header.php file that we’d include on every page of the site.

Developing the Layout


We can structure our HTML as follows:

<div id="header"></div>
<div id="content">
	<div id="primary"></div>
	<div id="main-content"></div>
	<div id="secondary"></div>
<div id="footer"></div>

Each of the main boxes or building blocks we described above becomes a div with a semantic id applied.

Since we know we’ll have 3 columns inside our content area, our content div has 3 additional divs inside of it. I named the 2 sidebars “primary” and “secondary” to reflect that one might be more important than the other as is sometimes the case with sidebars.

We’ll add our image of the chess pieces and login form inside the content div, but outside any of the three column divs, to allow the login form to break free of the column structure.

Now for the CSS:

#primary {float: left;}
#main-content {float: left;}
#secondary {float: left;}
#footer {clear: both}

One key to laying out a site with CSS is realizing when CSS isn’t needed and understanding the few places floats are necessary. Given our HTML, the content div will fall right below the header div on its own and the footer div will fall below the content div on its own. That’s the default behavior of a div and there’s no need for us to do anything to make it happen.

We float each of the divs inside the content div, because we want to change this default behavior. We don’t want these 3 divs to fall below each other. We want them to sit next to each other so each is floated to the left.

Once we change that default behavior we need to adjust our footer div. Since everything inside the content div is now floated, the footer div will not automatically fall below it. By adding clear: both (we could have just used clear: left here) we now force the footer div back into falling below the content div.

Naturally a lot more CSS will eventually be needed and if you try the code above you won’t see much because none of the divs have either a width or a height specified, or content inside them to create that width and height. What we have is an empty structure that we need to fill.

We’ll need to be especially careful when setting widths for the 3 floated divs as we need to ensure their combined width isn’t larger than the overall width of the entire page. You might have noticed that we didn’t specify an overall width yet which leads us to one more decision to make about the layout.

Fixed or Fluid Layout

The design image doesn’t really tell us whether or not the design is meant to be fixed or fluid by looking at it. It really could be either. Looking at the code that came with the template, it was developed so that each of the three horizontal bands (header, content, footer) extends to the edge of the window, while all the content inside each of those bands sits in the center of the page. That’s how we’ll do it too.

If we decide that we want everything to be fixed and located in the center, we would wrap a div around it, give it a width and center that wrapping div. You’re probably familiar with how to center pages with CSS.

Centering the whole page is rather simple, but it’s not what we want. We want everything inside our 3 horizontal bands to sit in the center of the window while allowing the background behind those 3 bands to extend to the edge of the browser. What we’re after is a liquid background with fixed content and fortunately Soh Tanaka provided a nice and very easy solution for us.

All we need to do is create a single class in our CSS and then apply it to selective divs inside the HTML structure.

.container {width: 960px; margin: 0 auto;}

If you’re familiar with centering, you’ll recognize the above as what you’d usually add to the wrapper div. Setting the CSS as a class gives us more flexibility and control for where to apply it. Our new HTML looks like:

<div id="header">
	<div class="container"></div>
<div id="content class="container"">
	<div id="primary"></div>
	<div id="main-content"></div>
	<div id="secondary"></div>
<div id="footer">
	<div class="container"></div>

For the header and footer I’ve added a new div inside with the container class applied. Now we can style the header and footer backgrounds to extend fluidly, while containing everything inside the new container div at 960px and have the div display in the center of the browser.

You could do the exact same thing with the content div, but in this we can take advantage of the body tag which is wrapping everything. We’ll set a background color on the body that will extend to the edges and save ourselves one div in the HTML structure. With the containing class divs set, our layout is almost set.

Our header, footer, and content areas are fixed at 960px (the actual content portion of each div). We still need to add widths to each of the 3 divs inside the content div.

#primary {float: left; width: 245px}
#main-content {float: left; width: 505px}
#secondary {float: left; width: 210px}
#footer {clear: both}

The above widths should add up to 960px. Note that in the final code you won’t see any of these widths actually specified. In the final HTML page some of the width for each div is in the left and right padding and possibly a left and right border. Each column (width + padding + margin) will add up to the numbers given above.

[tut demo=”” download=””]

Summary and Part 2

We’ll continue in Part 2 with the details of what goes into each of our large layout blocks and make a few more design decisions that will save us some coding and load time to the overall page.

Until then think about the higher level layout presented here. CSS layouts seem to trip up a lot of people, but they’re really much easier than they seem if you ignore the details and focus on the bigger picture. First think about how to organize your design into large building blocks. Try to see the layout in the absence of your design details. Picture those large boxes that will hold everything in place.

Once you’ve decided what boxes you’ll need, start to code your HTML. At this point all you should need is a few divs with an id applied to each. With your HTML in place, set up the very basic CSS needed to position each of you blocks and if appropriate like it was here, create and add a class or two as necessary.

Once your basic structure is in place you can begin filling up those boxes, which is something we’ll do in Part 2 of this post. Stay tuned!

Steven Bradley is a web designer and WordPress developer who moved to Boulder, Colorado to be near the mountains. He blogs at Van SEO Design and owns and operates a small business forum helping people learn how to run and market their business better.


  1. / Reply

    Conceptual tutorial. We can convert it in many ways depending upon the structure though.
    Thanks :)

  2. / Reply

    Nice tutorial, It is great to see tutorials like this that explain and give you options instead of all those ‘psd to html’ tutorials that might as well be copy this file and paste it here! I wish there were more of these turorials to ‘understand’ around when i was getting into coding.

    1. / Reply

      Thanks Patrick. Yeah, I’m not a big fan of the step-by-step do it exactly like this tutorials. I’d rather try and explain the “why” so people can take the tutorial and apply it to their own work. Plus there’s no one right way to develop a website. It really comes down to making choices.

  3. / Reply

    Your tutorial is great for beginners. For years ago i have been looking for something fantastic like this! Great work dude..

  4. / Reply

    Great tutorial for beginners, and great looking design to work with! Only thing i noticed when quickly taking a look is you should give the ‘read more’ links in the footer boxes some padding, so not only the text is anchored

    1. / Reply

      Good point. I thought I had done that, but looking at the demo I see you’re right. It’s only the text that’s clickable. Ideally the whole button should have been clickable. I think all it needs it adding display: block to the link, though I’ll have to double check that.

      Nice catch.

      1. / Reply

        No worries at all – i’m a fulltime developer and after doing it for a few years you certainly learn to catch anything you can!

        I wish there were tutorials like this around when i was learning – great stuff dude :)

        1. / Reply

          Thanks. I’m glad you liked the post. I have some ideas for similar posts on my own blog, but it’ll be awhile before I can get to them. I’ll have to remember to add more of my own thought process to posts in general though.

          As far as catching anything you can, the flip side is missing things you thought you’d done. :)

  5. / Reply

    Great start for the tutorial! I’ve been meaning to write one like this myself but have been pushing it back as it’s quite tedious. Looking forward to seeing the next parts.

  6. / Reply

    This is a really well written tutorial! Even though I’m not a beginner, I like to read about other developers’ thinking and coding process. It’s fun to see how everyone solves the same problem in different ways.

    1. / Reply

      Thanks Yvonne. I also like seeing how others solve problems. It’s amazing how many things I’ve adopted into my own solutions after seeing someone else’s process.

    • Gavin,
    • April 30, 2010
    / Reply

    Small typo ;)

    should be

    Great article!

      • Gavin,
      • April 30, 2010
      / Reply

      Lets try again ;)


      <div id="content class="container"">

      should be

      <div id="content" class="container">

  7. / Reply

    Yeah great article. I just wanted to point out the typo that Gavin allready did. ;) Nice job

    • Edgard,
    • May 29, 2010
    / Reply

    Truly great tutorial! thanks for sharing…

  8. / Reply

    Your information is good…..
    its very use article

  9. / Reply


    Good started point.

    But unfortunately the Artificial Casting Template download link is broken. You cannot download anymore from Smashing. Do you have the .psd?


    • peter ansderson,
    • January 15, 2011
    / Reply

    If you want a heads start they have sites where you can upload your psd and it will create the html in absolute divs such as than use this tutorial to help fine tune it.

  10. / Reply

    great article! :D

    • Mat,
    • April 22, 2011
    / Reply

    I’m pleased by results which I get with service of automatic psd to html conversion: . For simple designs I get good enough css code. For complex designs I would recommend hand coding though.

  11. / Reply

    Good collection of images and which makes more impressive.


  12. / Reply

    I incorporate a lot of charts into my sites.!!

  13. / Reply

    hai nice tutorial!

    but i have only using inline style sheet!
    how to learn external style sheet?
    please help me friends!

  14. / Reply

    good tutorial, thanks

    • AWC,
    • December 14, 2013
    / Reply

    Great tutorial!

    I know this is a bit dated since I just found your article. However, I’d like to point out that the template really isn’t responsive by today’s mobile-leaning standards. Of course, this poses an extra layer of complexity to our design efforts, but day-by-day the concept of ‘responsive design’ is becoming more of a requirement.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.