Steps in Designing a Web Page

Web design is something anyone can learn to do. The basic skills involved are easy to pick up, and there are many online resources to help build your skill-set. Web-page design involves visual design and a little coding, mainly using HTML and CSS (Cascading Style Sheets). If you want to create interactive elements in your Web page, you can include JavaScript. Even if you have never written code before, you can learn Web design.

Step 1

Sketch your design. Using a pencil and paper, or a graphic design program if you prefer, create a rough overview of what you want your page to look like. Although Web design is a digital process, starting to write code straight away can make the task more difficult. Taking the time to create a design before you start coding can make the task easier, as it gives you a clearer idea of what you are trying to create.

Step 2

Decide what content your Web page will contain. It may include data, text, images and other media such as video, audio or animation. Make sure your rough design can accommodate all of the content elements that you plan on including. Web pages are often designed with "dummy" content in the early stages, rather than the actual content that will end up being displayed. If possible, it is easier to include the actual content, or something close to it in size and appearance, as you will have a better sense of what the end result will look like.

Step 3

Build HTML to reflect your design. Using the following outline structure, create an HTML page by opening a new file in a text editor and saving it with ".html" extension (e.g. "mywebpage.html"):

A content section

Another content section

The "

" tags contain logical elements of page content, so create one for each content element you want to include. You can use elements such as paragraphs and images:

Paragraph content

(See References 1, 2)

Step 4

Create CSS rules to define your page style. Create a new blank file in your text editor and save it with a name to match the link in your HTML head section ("mypagestyle.css" in this example). Use the following sample syntax: body {font:12px arial, sans-serif;} #content1 {width:200px; float:left; color:#FF0000;} #content2 {width:400px; float:left; background:#FFFF00;} .someclass {border:1px solid #0000FF;} The "id" and "class" attributes in HTML elements are used to identify them in the style sheet, so you can group together elements you want to have the same style. Create CSS rules to display your Web-page content according to your design. (See References 3, 4)

Step 5

Add interactivity to your page using JavaScript. This is entirely optional, but can be used to make a site more stimulating and usable. The following is a trivial example. In the head section of your page: In the body:

Some text...

This simply changes the color of a paragraph when it is clicked, but you can choose interactive features to suit your own page content and purpose. (See References 5) Once your files are complete, test them by opening them in a Web browser or upload them to your server.

Tips

There are many free Internet resources such as tutorials, scripts and templates you can use to speed the process of Web design.

Warnings

Your Web-page design may vary in different browsers, so it's advisable to check it in as many as you can.

References

Resources

About the Author

Sue Smith started writing in 2000. She has produced tutorials for companies including Apex Computer Training Software and articles on computing topics for various websites. Smith has a Master of Arts in English language and literature, as well as a Master of Science in information technology, both from the University of Glasgow.