for ETEC637
Concordia University 2003

A WebQuest for the introduction of the 015A Screen Design Adaptation competency 582. A0 Multimedia DEC
Introduction | Task | Process | Evaluation | Conclusion | Credits | Teacher Page

Introduction

You're the final word! You know a good Website when you see it. Now you are going to back up your intuitive ability with a framework of principles on:

  • message and communication theory
  • design theory
  • color theory

Specific Course Objectives*

  • Analyze the structure of communication within the screen [015A-1]
  • Analyze the screen design [015A-2]
  • Propose modifications to the screen design [015A-3]
  • Organize the screen page [015A-4]
  • Verify the quality of the screen layout [015A-5]
* Partial completion of objectives

Learning Objectives for the WebQuest

You will be able to identify good visual design principles that promote clarity and simplicity in interface, page layout, and proportion.

You will demonstrate a basic knowledge of color combinations, contrasts, and harmonies in relation to color theory.

You will demonstrate a fundamental knowledge and understanding of the structure of a well designed Webpage, the elements of a well designed message, and the fundamental difference between communication design and Website design in relation to message and communication theory.

The rubric in the evaluation section of this site will be used to assess how fully you have understood the theories of message and communication, design, and color.

¬ top

The Task

Your mission is to explore Web to collect and organize a set of recognized principles upon which Visual Design and Æsthetics are e based. You will explore the Websites listed, and then compile a framework. of principles which guide good visual design and æsthetics.

You will then use your new knowledge to analyze three Websites.

Finally, you will write a set of discussion questions and then lead a class discussion on one of the Websites you analyzed.

¬ top

The Process

Read all the steps carefully before commencing your quest!

Step 1:

Your mission is to explore the Web to collect and organize a set of recognized principles upon which Visual Design and Æsthetics are based. Explore the Websites listed, and then compile a framework of principles which guide good visual design and æsthetics.

In the following links:

uncover the following about message and communication theory:

  • the characteristics specific to a Webpage’s structure
  • the elements of a well designed message
  • the basic elements required on a Webpage
  • the difference between communication design and Website design

In the following links:

uncover the following about design theory:

  • visual design principles that promote clarity and visual simplicity in the interface
  • page layout and proportion principles of good design
  • basic shapes and the computer screen

In the following links:

uncover the following about color theory:

  • contrasting and complementing colors in combinations
  • color harmonies and the Web interface
  • color and the computer screen

Gather your findings and compile them into a framework. This framework will become a powerful tool to help you evaluate Websites. Be as precise as possible and try to use your own words (or use quotation marks and reference the source of the information) . Remember, copying and pasting from the Internet is the same as copying out of a book, and that is plagiarism.


Your working framework might look something like this. Of course you need to fill in the blanks with information you find on the Web.

Screen Design

  

message and communication theory
  • specific characteristics
    • a
    • b
    • c
  • elements of message
    • a
    • b
    • c
  • basic elements
    • a
    • b
    • c
  • Website design specifics
    • a
    • b
    • c

design theory
  • visual design principles that promote clarity and visual simplicity in the interface
    • a
    • b
    • c
  • page layout and proportion principles of good design
    • a
    • b
    • c
  • basic shapes and the computer screen
    • a
    • b
    • c

color theory
  • contrasting and complementing colors in combinations
    • a
    • b
    • c
  • color harmonies and the Web interface
    • a
    • b
    • c
  • color and the computer screen
    • a
    • b
    • c

Step 2:

Now it's time to choose three (3) Websites and evaluate them according to the framework you developed in Step 1. You can browse and choose sites from the web or you can choose from the sites listed below. The choice is yours.

Evaluate the three sites using the framework you developed in Step 1. For each site and each theory, you must explain why it works (or not!). Instead of simply saying "That's a slick and funky Website!" or "This Website totally sucks!", you have now gathered enough vocabulary to make such statements as "The use of multiple fonts, the inadequate font size, as well as the lack of contrast make for an awkward viewing environment". You’re on your way to being quite the critic.

Step 3:

Now you have all the tools you need to lead a class discussion on one (1) of the Websites you analyzed in Step 2. Write a list of 5-8 open-ended questions which will help you lead the discussion. This is an opportunity for you to share what you have learned about visual design and aesthetics and specifically how you can apply that knowledge to the real world of screen design.

It's up to you to present your Website to your classmates and start a discussion on what you like or dislike about a particular site and survey them to see if they agree or disagree with you. This is not meant to be a formal presentation but rather a time for you to clarify a few points and/or express your now educated opinion!

¬ top

Evaluation

Your performance in the WebQuest will be evaluated according to this evaluation rubric.

Beginning
1

Developing
2

Accomplished
3

Exemplary
4

Score

 


Analyze the structure of communication within the screen

Student shows s/he is limited in analyzing the structure of communication within the screen.

Student uses a limited but appropriate analytical vocabulary to discuss some structure of communication within the screen.

Student uses a developed and appropriate analytical vocabulary to discuss many elements of structure of communication within the screen.

Student uses appropriate analytical vocabulary to fully discuss structure of communication within the screen message in terms of communication theory, design theory and color theory.

 

Propose modifications to the screen design

 

 

Student is unable to propose modifications to the screen design.

Student is unable to propose modifications to the screen design. Student proposes a limited number of proposals to the screen design, some are not appropriate.

Student proposes a number of modifications to the screen design, most are appropriate.

Student proposes appropriate modifications to the screen design in relation to communication theory, design theory and color theory.

 

Organize the screen page

 

 

Student shows s/he is limited in discussing organization of screen page.

Student uses a limited but appropriate analytical vocabulary to discuss some elements of the organization of screen page.

Student uses an appropriate analytical vocabulary to discuss many elements of the organization of screen page.

Student uses appropriate analytical vocabulary to fully discuss organization of screen page in terms of message and communication theory, design theory and color theory.

Verify the quality of the screen layout

 

Student shows s/he is limited in discussing verification of the quality of screen layout.

Student verifies the quality of the screen layout in a limited but appropriate fashion.

Student verifies the quality of the screen layout identifying many appropriate elements.

Student fully verifies the quality of the screen layout fully identifying appropriate elements in relation to message and communication theory, design theory and color theory.

 

Analyze the screen design

Student shows s/he is limited in analyzing the screen design.

Student uses a limited but appropriate analytical vocabulary to discuss some elements of screen design.

Student uses a developed and appropriate analytical vocabulary to discuss many elements of screen design.

Student uses appropriate analytical vocabulary to fully discuss screen design in relation to communication theory, design theory and color theory.

¬ top

Conclusion

By participating in this WebQuest, you are embarking on a learning experience that will reward you with a number of important lessons about visual design and æsthetics. As important as this discovery of new design knowledge is, the WebQuest will help you to understand that even though there is a huge amount of information available on the Web, not all of it is accurate, complete or well designed. By working through the steps of the WebQuest, we hope that you will develop a more critical eye when searching for quality information on the web.

Designing for the computer screen requires a hybrid knowledge of technology and design. You may already have knowledge of print design theory and want to focus on the differences between on paper and on screen. Then again, you may have a good grasp of technology and perhaps you simply want to focus on how to polish your look.

You may also like to continue your exploration of design and aesthetics with a look at some sites that have won awards for excellence in design.

And some other sites that have won awards for being so bad!

We hope you enjoy your virtual journey and that you walk away with some valuable tools for your continued learning. Enjoy!

¬ top

Credits & References

¬ top

Last updated on July 17th, 2003. Based on a template from The WebQuest Page