Using Wireframes to Streamline Your Development Process

Using Wireframes to Streamline Your Development Process

Creating a wireframe is one of the first steps you should take before designing a website.

A wireframe helps you organize and simplify the elements and content within a website and is an essential tool in the development process.

A wireframe is basically a visual representation of content layout in a website design.

Surveying the Possibilities

Overview

The purpose of this lesson is to begin considering what makes a high-quality website. As a group, we will explore questions such as these:

  • Why do you feel that some websites are good?
  • Why do you feel that some websites are not so good?
  • Do others agree with your opinion?
  • Does anyone disagree?
  • Who is the target audience for a particular site?
  • How might website quality be judged differently across different audiences?
  • Are there some qualities of websites that all audiences would agree are good? What are these qualities?

It is tempting in a web design course to plunge in and start right away creating and developing web pages. However, since our goal is for you to learn to develop high-quality websites, we first must spend some time developing an understanding of what “quality” means. This is important because if websites aren’t developed with quality in mind, visitors might be unable to find the content or features they’re looking for, or they may be unable to access or use these features. Users don’t give websites many chances. If they don’t like a site, they may leave quickly and never return. If they like a site, they’ll return to it again and again, plus they’ll tell others about it.

In addition to understanding website quality, you must spend some time planning a website before you begin to develop its content. Just as there are pre-writing steps that ought to be done prior to writing an essay, there are pre-coding steps to do before you create a website. Planning ahead will reduce the number of mistakes you’ll make while constructing the site. In the work world, this will save you time and money.

 

  1. What do the experts say? Visit the websites listed below in the Resources section below. Each of these resources provides someone else’s opinions as to what constitutes high-quality websites. Which of these resources do you most agree with? Do you disagree with any of these authors’ opinions? 
  2. Become a web critic. Individually, visit at least 10 commercial websites (look for good and bad examples of each type). Keep notes about what you observe. Of those you evaluate, identify which one is the highest quality website, and which one is the lowest.
    • Rate each site from 1 to 5 (5 being the highest).
    • Comment on the site’s design. Does the site look good? What is the eye drawn to immediately?
    • Comment on the site’s content. What seems to be the main purpose of the site? Is the purpose clear?
    • Comment on the site’s noteworthy features. How do the features enhance the site’s main purpose?

Resources/Online Documents