Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

The web design process: part 2

June 11th, 2009

Time for part 2 of 4 in the web design process series. Today I’m going to cover Photoshop comps, reviewing your goals, and coded comps. Check out the overview below to see all the main steps in the design process.

Make sure you check out part 1 in the web design process series.

Overview

» Defining the end goal
» Navigation planning and sitemap
» Hand-drawn rough layout
» Photoshop comps
» Review comps to ensure the end goal has been met
» Coded comps (alpha)
» Dynamic content integration
» Browser testing
» Launch checklist
» Soft launch (beta)
» Launch and promotion

Photoshop Comps

Alright, time to dive into Photoshop and polish up your hand-drawn comp. Before we get to far, I would highly recommend using a grid and/or a CSS framework. I currently use the Blueprint CSS framework, which is a free download. I’ve also put together a photoshop grid template that will work with blueprint, which you can download here.

At this point I’m not going to get into tons of design recommendations. This post is about the process not the design. Once you have created your Photoshop comp, it’s time to review the comp before you do any coding.

Review comps to ensure the end goal has been met

Once you have finished your comp, let’s run through a little checklist to make sure you are on the right path:

» Did you achieve all the end goals you set up in part 1?
» Is your navigation clear and easy to locate?
» Is your sitemap and hierarchy in tact?

If your answer to any of these is no, you need to go back to the drawing board and create a new comp. Once again, don’t go with the first comp you come up with. Try a few different ideas until you get to the best concept. If your comps are looking good and meeting all your goals, it’s time to start some coding.

Coded comps (alpha)

For me the coded comps, or alpha, phase includes the cutting up of your photoshop file, and your CSS and HTML coding. Make sure you start with your HTML file, ensuring your hierarchy is setup properly. Next move onto your CSS stylesheet. I don’t add any dynamic content at this point, like javascript. My preference is to get the frame of the pages up and running, test them, then to start adding the stuff like javascript, back-end tie-ins, etc…

If you have any dynamic content to add, I usually just leave an area (perhaps a box) in the coded layout with a reference to what is supposed to go there. Many times you might be working with a developer for the back-end stuff, so leaving notes in your layout and in the code are a good way to keep the process moving smoothly. Once you have finished off doing all your HTML and CSS coding, it’s time to move onto the dynamic content integration.

This is where we stop for today. I hope everyone is finding this series useful so far. Check back tomorrow for part 3 in the web design process.

Tags: blueprint, CSS, grid, html, photoshop, process