How to Create a Beautiful Web Page

Beauty is in the eye of the beholder as the old saying goes. What looks good to you on your website may be off-putting to others. However, there are a few standard web design principles you can follow to get off to a good start. Most importantly, a website must be usable, the location of information needs to be intuitive (no hunting and guessing allowed) and the path to the information needs to be as short as possible. Lengthy page loads and confusing navigation is a sure way to lose visitors in a hurry.

Difficulty: Moderate

Instructions

Things You'll Need:

• Web editing software
• Graphics editing software
• Web browser
• Web design reference book (optional)

Plan the Website Content and Layout

1. Take a piece of paper and draw a mock-up of your home page divided into three columns. The "Rule of Thirds" is a graphic design technique used to create aesthetically pleasing layouts. It is based on the Golden Ratio/Divine Proportion theory developed by Pythagoras and his supporters.

2. Draw a rectangle at the top of the page that spans all three columns. This will be your banner.

3. Divide the space below the banner into columns 1/3 and 2/3 in size so you have a narrow column on the left (or right) for your navigation and a large remaining column for the page content. Alternatively, you could position navigation across the top below the banner and use the small and large columns for content.

4. Think about what you want to accomplish with the website, who your chief visitors will be and what information and service you plan to offer. Consider how the information on your website should be grouped and organized. You don't want everything on the home page, because that would be too much for visitors to read, but at the same time, you don't want secondary pages with only one line of information on them.

5. List out the pages you think your site should have based on your organizational analysis in the previous step. These pages would be connected to the starting (home) page by hyperlinks or buttons. Five or less is a good number to start with for a small site.

6. Decide on the type of imagery you want on the site. Colors and graphics and text styles set a mood. What is the message you want your site to send to visitors? How would you describe what type of site it is in one word? Come up with colors and images to reinforce that description. Check out websites on color theory to see what colors complement each other.

7. Take pictures or collect images you'd like to use on your website.

Create Website Graphics

8. Open your graphics editing software and create a large rectangle (approximately 700 pixel wide) for the website banner that will go across the top of your website home page.

9. 
    
   Banner Created with Adobe Fireworks

   Use the tools of your graphics editor to add photo images, text, colors or effects to the rectangle to complete your banner.

10. Export the banner from your graphics software in JPG format for the web.

11. Open any photographs or images you've obtained for your website and resize them to what you think you'll need for the website with the graphics software's Transform, Scale, or Crop tools. Always save the changed images as new files. You never know when you might need to use the original photo again.

12. Create any buttons you think you'd like to use on your website for navigation.

13. Export the additional image files as JPG or GIF for use on the web. Use the JPG format if they contain any photographic imagery. GIF is okay for text or illustrations.

Create Your Web Pages

14. Open your web page editing software and start a new page. A multifeatured WYSIWYG (what you see is what you get) web editing tool like Dreamweaver is recommend if you aren't familiar with HTML code.

15. 
     
    3-Column Table Inserted

    Insert a table of three columns and two rows to help you achieve the 1/3, 2/3 design you drew on the paper.

16. 
     
    Cells Merged for Banner

    Click the top row of of the table to select it and click the Merge Cells command to create one large cell to hold your banner graphic.

17. 
     
    Columns Merged

    Insert your banner graphic and center the image in the table cell. Then merge two of the columns below the banner and set their sizes to 33% width on the thinner one and 67% width on the wider one for the 1/3, 2/3 layout design.

18. 
     
    Website Content Added

    Add the rest of the content to your web page, inserting additional rows in the table if needed. Utilize the image tag ALIGN attribute to wrap text around images within the text content if you'd like.

19. Add hyperlinks by selecting the text or graphics you want to serve as links to other pages and entering the link information into your web editing tool's Add Link function.

20. Create the other pages in your website, then save your site and preview it in your web browser. Upload your web pages to your web server when you're ready to share your website with the public.

Tips & Warnings

• Study the design and HTML code of websites you admire to see how they are constructed and practice recreating what you see with your own web editing software.
• Websites are copyright protected. The content belongs to the website owner. You cannot copy someone else's page code, text or graphics and paste them on your page without permission.

Resources

• Color Scheme Designer
• Applying Divine Proportion to Your Web Design
• Beginners Web Design Tutorial
• Stock Photography for Websites