Plan a Website Design- Tutorial

Plan a Website Design: Video Lesson

            This video lesson, titled “Design Considerations and Planning,” shows you how to plan a website design. This video is from our HTML5 and CSS3 training, titled “Mastering HTML5 and CSS3 Made Easy v.1.0.”

Plan a Website Design: Overview

            Before you sit down to design your first webpage, you should plan a website design. Take out a piece of paper and pen or pencil and draw a rough sketch of your page. Lay out where you want to place your pictures, text and other elements. Your draft will be your blueprint as you develop your page. If you are designing an entire website (that is, a collection of webpages at a single URL), the ability to plan a website design layout is especially important.

            When you plan a website design, in addition to deciding on how you want each page within the website to look, you have to decide how to organize the pages within the website so that information is easily accessible to people as they view your site. Many websites have common characteristics (home page, contact page, FAQ page, etc.). A home page is probably the most basic. It’s the main page of your site that usually provides a brief introduction to the entire site. Home pages are usually named index.htm or index.html, and provide links to the rest of the pages.

            As you are getting started, visit a few of your favorite websites. Take note of things you like and don’t like. How is the information laid out? Can you easily navigate from one page to another? How could the information be better organized? In addition to layout considerations, this is also a great way to inspire your design details. What makes the site more user-friendly? Are there creative uses of text or images that are particularly appealing?

            After you have decided on and documented your content and layout, make a simple flowchart of the pages that will be contained within your site. It will give you a visual map of the website from which you can work. Below is an example of a simple website flowchart diagram.

Plan a Website Design- Tutorial: A picture of a simple website page layout diagram.