Allan Didier

Web Page Design Projects

Project 1: Skeletal Web Site

The first step of designing a web site is to create the rough skeleton structure of the site. Start by answering the following questions.

  1. What is the purpose of the website?
  2. Who will be visiting the site and why?
  3. What information will the site have?
  4. How will the information be organized? What are the links? 

Once you can answer these questions, you can begin building the site. For this project, create the rough structure of the site by designing the following.

  1. A home page with a sentence explaining what the site is about and one image. 
  2. Three to five other pages with one sentence and one image explaining what each page is about. 
  3. A link structure on each page to allow for navigation between the pages. 

Project 2: Add Material

Once you have the basic structure of the site created, you then need to add material to each page. Your site should now have the following.

  • A home page plus 3-5 other related pages.
  • One or two paragraphs of text on each page that is related to the page.
  • 3 or more images or videos on each page that are related to the page.
  • Every image or video has a caption describing the image or video. 
  • Widgets: add widgets for things such as calendars, image scrollers, social media, video players, and more. 

Project 3: Site Design

Now that you have some information and images on each page, you can focus on the look and functionality of the site. Make the site look good.

  1. Text
    1. Page titles should all have the same font, size, and color. 
    2. Paragraph text should all have the same font, size, and color. 
    3. Image captions should all have the same font, size, and color. 
  2. Images and videos
    1. Image borders should all be the same. They should highlight the images but not be distracting. 
    2. If you use an image viewer widget (scrolling images, fly outs, etc), make sure everything works properly and looks good. 
    3. Make sure videos play properly. 
    4. Background images
      1. Make sure they are related to the page.
      2. Make sure they are not distracting. 
      3. Make sure you can read the text on top of them. 
  3. Links
    1. Make sure your site link structure works and is accessible across all pages.
    2. Make sure all links to external pages work as well. 
  4. Widgets. Make sure they function the way you intend. 

Project 4: Polishing Up the Site

The last step is to make sure you have all the information you want and everything works properly on your site. Most websites are never actually finished. You can always add more to them. At this point, you should have everything in place so that if you need to add things in the future, you can do so easily. Things to work on for this project include. 

  • Have other people test your site and give you feedback. Test your site from different web browsers and devices (computer, chromebook, phone, tablet). 
  • Make sure all links, images, videos and widgets work properly. 
  • Double check all font and image formatting. 
  • Set up security and access to your site if other people need access to your site. 
  • Set up other features like accessibility features (image captions, text readers, etc). 
  • Publish the site and share it.