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

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

In part 1 of this post we took a design template and thought about how best to turn the design into a working web page. Once we had an idea of how to approach the development of the page, we set up the basic layout for our site. However, we left off with an empty layout that was in great need of some real content inside. So what are we waiting for? Let’s start filling in that layout and finish developing the page.

As I mentioned previously, I won’t provide every bit of code in the post itself. You can download the code and see the working page below.

Design Image to Web Page Part 2

[tut demo=”https://onextrapixel.com/examples/design-to-web-page/” download=”https://onextrapixel.com/examples/design-to-web-page/design-to-web-page.zip”]

We’ll discuss again about approaching each section and I’ll offer some code for a few of the trickier parts. Let’s start at the top and dive into the header.

Artificial Casting

Developing the Header

If you remember from the last post, our header contains everything above and including the thin line just below the navigation. We need to account for the background, the logo, the tabbed navigation, and the line itself.

Header

The original template used one large image for the header background. It included the logo and the chess pieces as well. As the original divided the header and content areas are a little differently from what we have, we have some work to do creating images and some design decisions to make.

If you look at the original you’ll notice some grunge brush strokes. These present a bit of a problem. If we remove those brush strokes, we can develop the entire background of the header by using a thin, full height gradient as a background image on the header div and then repeat it horizontally.

#header {
	height: 158px;
	background: url(images/bkgd-header.jpg) repeat-x;}

In addition to this being easier to code, I think it looks a little better. I don’t see where the brush strokes add to the design and they cause an abrupt transition when viewing the site at a larger resolution.

The logo image includes the background behind it and is centered with CSS. I had a hard time getting the logo to look good using transparency and saved it with the background instead. I made sure that the top of the image was an exact match for the top of the background so we wouldn’t need to adjust it vertically, though if the backgrounds didn’t match, a little bit of margin-top would have sufficed to make them match.

There’s nothing particularly special about the tabbed navigation. It’s a simple list with an id applied to the unordered list. <ul id="nav"> and then styled. I used the original template image for the tab, which is placed as a background on the list-item <li>.

The entire unordered list <ul> has been floated to the right. If you recall, we added a container class to a div inside the header so floating the list right sets it against the right edge of the container class.

Here’s the CSS for the tabbed navigation:

#nav {list-style:none; margin:12px 0 0 0; padding:0; float:right;}
#nav li {float:left; width:76px; height:18px; background:url(images/menu.jpg) no-repeat; text-align:center; padding:7px 1px 5px 1px;}
#nav li a {color:#fff; text-decoration:none; font-size:13px;}

It was, however, displaying a little higher than it should be. A few px of margin-top pushed it down. The thin line was added as a border-bottom to the header.

A Word About Images

The original template and my version of the template set up the images for the header differently. The original uses 2 large images for the header background; one with the chess piece and logo, one without. My version uses 3 images; a small image for the repeating background, an image for the logo and one more for the chess pieces, which we’ll get to in a bit.

The total file size of the original is much larger, however it could easily be cut by nearly half had the background image (without the logo and chess pieces) been cropped thinner. Assuming it was, the total file size for the original and for my version would be about the same. The original’s file sizes would still be a little greater, but not significantly so.

The original makes one less HTTP request, which is a good thing. However that extra request would only occur on the first page viewed on the site and I felt the greater flexibility in using the extra image, was worth the extra request.

Neither solution is right or wrong or better or worse. They’re just different, each with their own pros and cons. Design and development doesn’t always have a single best solution. At times, you have to make a decision based on the information you have with the understanding that it comes with some gains and some loses.

Content

Developing the Content Area

The first thing we have to deal with in the content area is the image of the chess pieces. As the image is a transparent PNG, in order to get it to look just right I had to include the background for the content area in the bottom half. I couldn’t get the shadows to look quite right without it.

Chess

The CSS for the image is relatively simple. Floating it to the left places it against the edge of our container and adding a negative margin-top moves the image up so it appears to be partly located in the header.

#chess {
	width: 297px;
	height: 309px;
	margin: -146px 0 0 0;
	float:left;}

Note: IE6 has a bug when it comes to negative margins. The simplest solution I’ve found is to add position: relative to the element with the negative margin. If you download the demo and look at the CSS, you’ll see I’ve added this to the #chess image. Ideally it would be included via conditional comments, but to save another file I left it in the main CSS file.

We could use some jQuery to add the corners for other browsers, most notably IE, but I didn’t do that here. Quite honestly, the border looks fine squared off particularly since it’s thinner than in the original.

Everything inside the login box is pretty standard. There’s a heading, a simple form, and a bit of text below. The submit button is no longer an image. I added a CSS class to style it like the original. We’ll get to the details of that class in a bit.

Remember that both the image and login box are inside our content div, but outside any of the three column divs inside it, to allow the login box to break free of column structure.

<div id="header">
	<div class="container"></div>
</div>
<div id="content class="container"">
	<img id="chess" src="" alt="" />
	<div id="login"></div>
	<div id="primary"></div>
	<div id="main-content"></div>
	<div id="secondary"></div>
</div>
<div id="footer">
	<div class="container"></div>
</div>

The Primary Sidebar

The primary sidebar (the one on the left) was fairly simple to code. Each section of news is wrapped by a div. Inside I used another div to represent the calendar icon. The icon itself is the background image and the date is typed directly into the div. The whole thing is floated left to allow the news heading and author and time information to sit beside it.

Here’s an example of the HTML and CSS for the first news section.

HTML:

<h4>News &amp; Updates</h4>
<div class="news">
	<div class="lefticon">16</div>
	<h5>Pulvinar interdum…</h5>
	<p class="meta">By Jack Son | 11:55 AM</p>
	<p>Etiam auctor nisl adipiscing sem. erat urna fringilla sit ametvestibulum.</p>
	<a href="">read more…</a>
</div>

CSS:

.news {
	clear:both;
	margin-top:20px;
}
.lefticon {
	float:left;
	background: url(images/lefticon.jpg) no-repeat;
	width:36px;
	height:34px;
	margin:0 5px 0 0;

	padding:7px 0 0 0;
	color:#fff;
	font-size:11px;
	text-align:center
}
.meta {
	font-size:9px;
	background: #f1e0ac;
	padding:2px 0;
	display:inline;
}

The resources section below is even simpler. It’s an ordinary unordered list with a twist. Instead of using an image for the arrow, I used the HTML entity &rarr; (→), which is part of the text.

I’ll leave it to you to go through the source code for the rest of the details, but again it was all fairly simple.

The Main Content

Again there’s not a lot interesting happening here. As we’ve been doing throughout, images have been replaced with code where possible. The icons next to ‘add content’ and ‘read more’ at the top didn’t seem necessary, especially as the ‘read more’ icon is a pencil, which is more commonly used to mean edit.

I left out the background image in the latest projects box, again because it didn’t seem to mean anything to me. It could easily be coded as a background image if you wanted to include it.

In the same way the arrow images were replaced by HTML entities in the primary sidebar, the checkmark images have been replaced with the code &#10003; (✓) and the background image is now a solid CSS color. Otherwise, the boxes are two unordered lists sitting next to each other.

The dotted lines in between the 3 columns were created by adding left and right borders to this one column. Again a design decision was involved, since setting up the lines this way changes how they look in the design image. I think the dotted lines look much better by not creeping up into the login box and chess image, so it was an easy call for me.

The Secondary Sidebar

As with our other two columns, there’s not a lot special going on here. Everything you see is just a bunch of new paragraphs. It could have been coded as lists as well.

Now would be a good time to talk about the buttons. Sometimes a button image is a nice touch, but you can also create nice looking buttons with CSS alone. With this design they didn’t seem to be doing much and were easily replaceable with a class.

.button {
	background:#f4f4f4;
	color:#000;
	border:1px ridge #999;
	width:50px;
	padding:2px 5px;
	text-align:center;
	margin:10px 0; 
	font-size:9px;}

About the only thing that might not be familiar to you is the border-style, which is set to ridge. It’s somewhat browser dependent in how it will display, but it should add a slight bit of 3-dimensionality. It’s probably not very visible here as the border is so thin.

With the class set we can add a button anywhere with a single div.

<div class="button"><a href="">read more</a></div>

Developing the Footer

As much as I’d like to tell you there’s some interesting stuff going on in the footer, once again it’s all fairly simple.

Footer

The boxes are a div with a class added to style them similarly. I kept the background image since I thought it looked better with the gradient, but we could have used CSS alone to style it nicely. All three boxes are contained in a wrapper div and that wrapper div is centered within the footer.

<div id="footerbox-wrapper">
	<div class="footerbox"></div>
	<div class="footerbox"></div>	
	<div class="footerbox"></div>
</div>
#footerbox-wrapper {
	width:765px;
	margin:0 auto;
}
.footerbox {
	background:url(images/footerbox.jpg) no-repeat;
	width:181px;
	height:128px;
	float:left;
	color:#fff;
	font-size:12px;
	padding:20px 17px;
	margin:0 20px;}

The navigation below is an unordered list. You should always think of a list when you’re coding any navigation bar or menu.

Below the navigation are simple paragraphs of text and below those are two more buttons created with our button class from above. The footer div was set with text-align: center so there wasn’t much more to do with the text. The two buttons are wrapped in a single div and that div is then centered the same way the boxes above were centered.

[tut demo=”https://onextrapixel.com/examples/design-to-web-page/” download=”https://onextrapixel.com/examples/design-to-web-page/design-to-web-page.zip”]

Summary

That completes our walkthrough of taking the Artificial Casting template from a design image to a working web page. I hope it’s been helpful, not so much in developing this specific design, but developing designs in general.

While not every bit of code found its way into these two posts, you can download both my version here and the original design PSD and code from Smashing Magazine. It can be helpful to compare how two different developers code the same web page from the same design.

Remember, before starting development, take some time to think about how you’ll code the basic HTML structure. (I’ll usually keep development in the back of my mind while designing.) Think about how many large boxes you really need and develop those first. Get the HTML/CSS set for the basic layout before trying to fill in any of the large layout boxes.

Once your layout is set, filling in the boxes is usually not too difficult. Think of everything inside the large boxes as a bunch of smaller boxes and code each box one at a time.

Wherever you can, try to replace an image with code. Sometimes an image is necessary. Many times it isn’t. CSS3 adds a lot of new ways to style things in code and in time we’ll be able to use even less images to represent elements like buttons and background gradients.

Finally, keep in mind that there’s more than one way to develop a page and site. While I’ve done many things differently from the original template developers, their page is still quite well developed. Nothing here should be an indication that the original isn’t coded properly or will cause problems.

I decided to make a few design decisions, mostly to reduce image requests and add what I think is a little more flexibility in maintaining the page. Neither solution is automatically right or wrong, better or worse. They’re just different ways to solve the same problem.

Begin to develop your own solutions for solving common problems. Develop your own way to create different layouts and your own way to style common patterns that emerge in your designs. Over time, you’ll build a library of code that can easily be reused from project to project.

Deals

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.