Designing and Planning Web Pages
This unit will give you a basic understanding of core design principles that apply to web design and development. It will help you to establish criteria for evaluating the quality of websites, introduce you to color theory and web design standards, and introduce you to the site planning concepts of developing a site plan.
Module 1: Basic Site Evaluation and Rubric Creation
These two lessons give you a basic understanding of the principles behind effective website design and implementation. You're probably eager to get started developing your first websites, but first things first! Web design requires careful planning and consideration of what it is exactly that defines a good website. In this module, you will visit a variety of websites and explore what you perceive to be good and bad qualities of each.
Also in this module, you will develop a tool for measuring website quality. This tool will be used throughout the course and will be used in evaluating the quality of your own work.
Lesson 1: Surveying the Possibilities
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.
At the completion of this exercise:
- you will have learned to critically evaluate websites.
- you will have learned the criteria that experts use to evaluate websites.
- What is a high-quality website? As a group, discuss the questions presented in the Overview section above.
- What do the experts say? Visit the websites listed below in the Resources section. 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? Discuss this as a group.
- Become a web critic. Individually, visit at least two high school websites and at least two commercial websites (look for good and bad examples of each type). Keep detailed notes about what you observe. Look at your own school website, plus other schools in your district, your state, and around the world. Record as many examples as you are able to find. 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?
Create a table for your notes which looks something like this:
1 2 3 4 5 6 +
Lesson 2: Developing a Website Evaluation Tool
The purpose of this assignment is to challenge, test and ultimately come to general agreement on evaluation criteria for websites. This exercise is student driven, but don't be surprised if your teacher offers some guidance along the way.
At the completion of this exercise:
- you will have developed a website evaluation tool as a way to critically examine the quality of websites.
- you will have developed experience documenting and sharing your ideas about what makes a high-quality website.
Develop a website evaluation tool. Use the knowledge and perspective gained in Lesson 1 to develop a rubric for measuring the quality of websites. Follow these steps:
- Pair up and take five minutes to share and discuss the merits and problems of two sites each from the activity in the previous lesson. One site should be a clear example of good design and one an example of poor design. Discuss specific traits that could be used to evaluate sites.
- On a piece of notebook paper write down the URL's of the four sites (two for each person) that have positive and negative traits and turn it in to the instructor.
- Join another pair and now, in a group of four, review your lists of traits that were generated in step one. Synthesize the lists to no fewer than four but no more than seven general traits that could be used to evaluate most any web site. As much as possible, make each trait discrete and clear. Combine similar traits. Eliminate redundant, obtuse, or invalid traits.
- Once you reach consensus on the traits, decide on a numeric scale to use for judging how well a website rates for each of the traits.
- Brainstorm a list of descriptors that define major point values on the numeric scale. What does a high score, a low score look like?
- Now that you have all the components for the evaluation rubric, sketch the complete evaluation rubric with a marker on butcher paper. Write boldly and large enough for others to read from a distance. Your poster (evaluation tool) will be displayed on a wall.
- Each person in your group will now individually use this evaluation rubric to evaluate the following site: http://www.lorewing.com/en/home. It is important that you evaluate the site without collaboration or discussion.
- After all members have had enough time to evaluate, compare how your group members scored http://www.lorewing.com/en/home with each major trait.
- If someone in the group rated a trait radically different from the rest, ask them to explain why. Can the group persuade the radical, or the radical persuade the group? Is a compromise necessary? Try to reach a consensus score for each trait. Does the tool need to be changed somehow to make it more useful?
- Decide on a reporter or spokesperson. Display your poster. Have the spokesperson share with the rest of the class how well your group's evaluation tool worked when applied to cheese.com.
- As a class, synthesize the various evaluation tools into a single rubric. Find what traits are most commonly used. Sometimes groups refer to the same trait using different terminology, so the class must agree on what term to use (a groups' shared understanding of a term is called nomenclature).