Sketching comes first

You received a web design project from a client, requirements and deadline are known—everything is fine. Before starting your graphic and text editors of choice, make sure you know what is expected from you. Don't try to design without having the real content of the page. This makes design decisions easier and more appropriate. Don't simply include graphics or text as placeholders—make sure they add real value to the overall layout.

After you have the content, decide how information will be organized (multi-level tree structure) and sketch how the web site will look like, decide what functionality it should offer and what feeling it should awake in the visitor. The concept allows you to concentrate on the real details, without worrying about tools and code. The idea flow is more natural and rapid on paper than on the PC. Try to create many different variants of the layout. Then evaluate them and decide, which one to choose, considering all the details.

Sketching in accordance to a working concept is hard. You need full concentration, perhaps to "sleep" on an idea or go out for a while to breath fresh air. When you come back, you may discover something, which was previously invisible to you. Even small details can be important if you don't want to redesign the user interface later, so invest more time in adjusting it upfront in a way that remains robust through the whole project.

After you are ready and you need to present your ideas to the client, create a mock-up from your sketch. If the client wants to see the functionality immediately and isn't very interested in the layout, it would be best to begin with writing the code as soon as possible.

You can work on iterations, adding the most important content first, and then gradually going to the least important one. For this to work, you need to have clear priorities. The client receives fast feedback on the most important issues, so he'll be more inclined to continue supporting you. The speed of writing quality, standards-compliant presentational code can determine the relationship.

bit.ly/12aYuOl