Home arrow Web Standards arrow Page 2 - Designing the Elements of a Web Page

Designing the Elements of a Web Page

My previous article on information architecture dealt with planning the content properly. Now, that great content needs a great design to sit inside. This is where the web design part steps in and it is equally intricate. Many people will say "I don't know where to start." There is no requirement to be a professional designer to create a web site.

Author Info:
By: Stephen Davies
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
August 13, 2007
  1. · Designing the Elements of a Web Page
  2. · The Starting Tools
  3. · Designing the Grid
  4. · Web Design Tips
  5. · The important principles of white space
  6. · Example of a Styled Template

print this article

Designing the Elements of a Web Page - The Starting Tools
(Page 2 of 6 )

This is a brief list of the recommended web design tools and languages. Try to gain at least a basic grasp of:

  • HTML
  • Style Sheets
  • JavaScript
  • A graphic design package like Photoshop or Paintshop Pro
  • A web design package like FrontPage or Dreamweaver
  • Flash

These are just examples; there is a whole host of free web design software perfect for the job. If coding is preferred, all that is needed is notepad. If some flashy vector graphics are planed then Macromedia Flash is required. There are lower learning curve software titles too, such as SwishMax and Incrediflash for creating appealing flash designs.

The Network Diagram

For the first design template idea, this should be the starting point in mapping out the flow of content and pages:

The Home Page will introduce the site and present the main menus and options for navigation across the site. Advertising will appear later on this page, which is not a concern right now. This is a basic diagram for illustrative purposes; the home page of a multifaceted information portal would have more than four menu items. There should be a diagram produced that is more ramified than the one above if the site theme research has been properly conducted. Use it merely as a frame of reference.

Links 1 to Link 4 are the main menu options. These lead to the initial TEXT pages of the site content. Normally, these pages will have links leading to a LINKED PAGE that may be the next page for that menu option, a linked keyword to another site page or another web site.

Next, it is time to create a mock template from a design grid.

blog comments powered by Disqus

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials