Design Web Page
Web Page Design - Attractive and User-friendly
Contact us
Custom Search
|
Share this Page
Cool Clicks
How to Design a Web Page
Web page design - keeping it simple
When you sit down to design your first web page you may feel a little out of your depth. I know I did.
Start by looking at websites you like. Become aware of web page designs. Create a folder in your bookmarks / favourites for designs you admire or might like to copy for your own site, so you can revisit those sites. Notice whether the pages are slow or quick to load in your browser.
For your own website, aim for a simple web page design, with as few elements as are necessary.
Uncluttered web page designs are usually quite appealing . Many sites have a simple two or three column design, with a heading banner on top which may stretch over two or three columns. A footer area may cover the full width of the page.
Design your web page to load quickly
Web page designs with many images or large detailed images will take a long time to download. Other elements such as advertisements, search boxes and the like will also add to loading time.
A long downloading time will rob you of potential traffic. Millions of web surfers still use 56k modems. Some websites take over a minute to download at 56kb/sec.
Even people with very fast access become used to sites downloading within two or three seconds. If yours takes seven seconds, their fingers may already be tapping!
Anatomy of a web page
You may be able to construct your web page layout in your mind. I use lots of paper!
Think about the essential elements like banners, logo, headings, menus, text blocks, images, forms, buttons, links. Make sure that everything you want is included, and positioned for maximum clarity, aesthetic appeal and ease of use by your visitors.
Heading banners should be at the top, or nearly so. Menus should be near the top or to the left. Text headings should be prominent. Text blocks are easier to read if they are not too wide. The elements of the page should be easily distinguished from each other.
Plan your site colours. Lots of white space is fashionable right now. When considering background colours, make sure there will be enough contrast between text and background. Don't plan too many colours on one page.
If you need more help with the design, there are lots of web articles aimed at this topic. See the selection in Links / Resources.
Start your web page design with an outline page layout
If you don't feel the need to design your web page first on paper, then skip to the next section, and work directly with the web editor.
Draw an outline page layout, positioning all the elements accurately on the paper. Don't try to make it realistic. Just draw a box and label it "header" and the same with "menu" and all other elements you want on your page.
Decide whether the layout for your home page will also work for your inner pages. If not, draw one further layout for all your inner pages. You want only one or, at most, two layouts, so that your whole site looks consistent.
Take your outline page and draw straight lines, vertical and horizontal, to separate each design element from its neighbours, creating a table of columns and rows.
Building your page in the web editor
The simplest way to create your web page in your web editor may be to use a table with multiple cells to recreate the layout you drew on your outline page layout. The most professional way is to use CSS Divs, but as this is harder for a beginner to master, I have stayed with table-design.
Don't try to put the elements into the table cells just yet. Make the sizes as near to correct as you can. They can be adjusted later. Aim for pleasing proportions,
The outer table should be between 800 and 960 pixels wide. People work with different monitors, but all except the oldest monitors (640 x 480 pixels or smaller) will be able to view that size page without scrolling from side to side.
For this site, I made a record of my steps, so that you could see how I approached it.
How I designed this site's web page in my web editor
First I defined a table 920 pixels wide and 420 pixels long. I gave it a border 10 pixels wide and then I divided the table into horizontal rows, for each of the elements I wanted. I chose the table's background colour. See how it looked in Page Layout Design Step 1.
Then I drew vertical lines where I wanted them to create "cells" in my table where I would later place various page elements. I changed the background colour for the main center column to white. That's where my text will go. Check out Page Layout Design Step 2.
Did you notice how fast that page loaded? That's because there's not much to it yet. Everything we add will make it slower and slower. That's why we don't want to put in too much, especially not too many external files (like flash files, images and script files, including CSS files). We want to keep our pages fast and light.
Copy this web page design (step 2) into your web editor
If you want to copy this table out of my Page Layout Design Step 2 for any purpose, be my guest. Call up the page with your browser and place your cursor on it. Right click your browser and tell it to display the source HTML. Then select the HTML code from the <table tag to the </table> tag and copy it to the clipboard. Paste it into the HTML code of a new web page in your web editor, after the <body> tag.
We've reached the end of this first tutorial on Web Page Design. Our page isn't finished, but all we have to do to finish it is to place various elements within the cells and change the colours of the borders. We'll do that in the next few tutorials.
The first element to consider is the heading banner, and that topic gets the next tutorial all to itself...
Links / Resources
Web Page Design articles:
Albany: Basic Web Design
Grantasic Designs: 5 Rules
Infoserve: Basic Web Site Design Tips
Math.Duke: Graphic Design Principles - Free Course
Twospots: Basic Web Design Guidelines
Page Layout Design Step 1
Page Layout Design Step 2
Build Site: Design Web Page Top Prev Next: Design Web Page Header
Copyright © 2009 / 2010 EasyWebsitePrimer.com Last updated: September 2010
Design your web page to be user-friendly and attractive