Web Site Design

The first step in building a web page is deciding what you want it to look like. For an entire web site, you need an overall logical design as well as a way for your visitors to get from one page to another. That is called navigation. Let's assume that you are going to create a full web site.

You need to consider the purpose of the site and what you want it to contain. From there, you can decide how to divide the content into what will fit on an individual web page. Ideally, you don't want people to have to scroll down through a page that is many screens long. It is better to have more pages than long pages. Create an outline for the site, just as if it were a school report. That outline can become the basis for your site navigation and will help you decide how many pages you will need and a logical way to organize them.
Each page in a web site should have a similar appearance to the others, so a visitor can tell that they all belong to the same site. You can accomplish that by using a common color scheme, navigation method, and set of graphical elements. To make things easier, I recommend that you design and create one page first, then use it as a template from which you create the others.

I have provided below a selection of free books and other resources to help you work out the design of your site. Then you can go on to building your first page. It is good to decide on a destination before you pack for the trip...
horizontal bar
Web Style Guide: Basic Design Principles for Creating Web Sites book cover

This entire book (Second edition, published 2002) can be read online for free! In 160 pages of expert instruction, this transforms the essence of the Yale University Center for Advanced Instructional Media's wonderful online site design guide into traditional print. The book begins the presentation of its helpful and forward-looking advice with a discussion of the overall process of defining the objectives and users of your Web site, as well as the goals you will use to measure your progress. It clearly illustrates how to make your site interface welcoming and efficient. High-quality illustrations show how to design for overall style and professional appeal. The sections on typography and editorial style set this manual apart from many Web style guides with attention to the fine details that separate the good sites from the great. One of the great things about using this guide is that the actual site it is based on is available. You can read about a thoughtfully-written topic and then go online to see the concepts in action.

Yale Style Manual

This site is a guide to page layout, design, and typography. This is about how to present your text.

Deliver First Class Web Sites book cover

This entire book (published 2006) can be read online for free! Drawing on dozens of books, studies, and research papers, this book distills not-so-common wisdom into 500 digestible guidelines & checkpoints that can be quickly applied to any Web Development project. Organized by chapter, the guidelines cover everything from color usage & navigation, to accessibility, usability and webpage architecture.

By following all the guidelines, you will develop 100% best-practice Websites, ensuring their projects are built "the right way" from the start. This means the final Website will be:

  • Cross-browser & Cross-platform compatible
  • Easy to update & maintain
  • Usable by even novice Internet Users
  • Accessible to disabled visitors
  • Search-engine friendly

As a bonus, all the checklists are downloadable in PDF format, so you can print them out and use them over and over again.
Deliver First Class Web Sites book cover

This entire book (published 2006) can be read online for free! In 2000, Jakob Nielsen, the world's leading expert on Web usability, published a book that changed how people think about the Web—Designing Web Usability. Many applauded. A few jeered. But everyone listened. The best-selling usability guru is back and has revisited his classic guide, joined forces with Web usability consultant Hoa Loranger, and created an updated companion book that covers the essential changes to the Web and usability today. This is the guide for anyone who wants to take their Web site(s) to next level and make usability a priority! Through the authors' wisdom, experience, and hundreds of real-world user tests and contemporary Web site critiques, you'll learn about site design, user experience and usability testing, navigation and search capabilities, old guidelines and prioritizing usability issues, page design and layout, content design, and more!

Designing Web Navigation book cover

This entire book (published 2007) can be read online for free! Thoroughly rewritten for today's web environment, this bestselling book offers a fresh look at a fundamental topic of web site development: navigation design. Amid all the changes to the Web in the past decade, and all the hype about Web 2.0 and various "rich" interactive technologies, the basic problems of creating a good web navigation system remain. Designing Web Navigation demonstrates that good navigation is not about technology-it's about the ways people find information, and how you guide them. Ideal for beginning to intermediate web designers, managers, other non-designers, and web development pros looking for another perspective, it offers basic design principles, development techniques and practical advice, with real-world examples and essential concepts seamlessly folded in. How does your web site serve your business objectives? How does it meet a user's needs? You'll learn that navigation design touches most other aspects of web site development.

While it focuses on creating navigation systems for large, information-rich sites serving a business purpose, the principles and techniques in the book also apply to small sites. Well researched and cited, this book serves as an excellent reference on the topic, as well as a superb teaching guide. Each chapter ends with suggested reading and a set of questions that offer exercises for experiencing the concepts in action.