Reading Assignment

Instructions:  Read the following article and answer 1, 2 and 3 in the activity section

Lesson 1: Surveying the Possibilities Overview

The purpose of this lesson is to begin considering what makes a high-quality website. in pairs discuss the following questions and answer the following:

• 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.

Activities

1. What is a high-quality website? In pairs, discuss the questions presented in the Overview section above. 
2. 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.
3. 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:
   School/Co.
   URL
   Rating
   Design
   Content
   Features
   1           2           3           4           5           6           +          

Resources/Online Documents

• WWW Cyberguide Ratings for Web Site Design (requires Adobe Acrobat Reader)
• Jakob Nielsen: Ten Usability Heuristics
• Designing a Web Site for Yale University Library
• AskTOG: First Principles of Interaction Design
• WebPagesThatSuck.com

Assignment 1# Create a Aqua Button (30marks)-Due Sept 16th

Follow the Instructions below (or go to the following Wiki site for original instructions: http://www.wikihow.com/Create-an-Aqua-Button-in-Adobe-Illustrator-Cs3) and create a Aqua Button using Adobe Illustrator:  Due date Sept 16th

Steps

1. 
   1
   Go to File > New to start a new document. Set your colors to the default black outline with no fill. Use the rectangle tool to make the first part. Set a square to be 670 px x 670 px. Color this using the gradient tool. Set the colors to the following--first color at position C = 0, M = 0, Y = 0, K = 25; second color at position C = 0, M = 0, Y = 0, K = 12.5; third color at position C = 0, M = 0, Y = 0, K = 50. Set the stroke to "none" and then select "linear mode."
   
   
2. 
   
3. 
   
4. 
   
5. 
   2Making a reflection, copy two squares of the same size. Select a top one and position it as shown on in the image. Select both and then go to Pathfinder > Compound Shapes > Subtract. Position this on the bottom of the first part.
6. 
   3
   Create a button center. Choose the ellipse tool and click once on the page to open the options. Set the size of the ellipse to 490 px x 490 px and click "OK" to create the ellipse. Set the colors to the following--first color at position C = 0, M = 0, Y = 0, K = 12; second color at position C = 0, M = 0, Y = 0, K = 48 and then set the stroke to "none" and use radial mode. Select all of parts, then choose Object > Group.
7. 
   4
   Make the second button piece by choosing the ellipse and setting the size of the ellipse to 485 px x 485 px. Color this piece by using the gradient tool. Set the first color at position C = 19, M =4, Y = 12, K = 0.5; second color at position C = 55, M = 0, Y = 14, K = 0; third color at position, C = 90, M = 0, Y = 7, K = 50. Set the stroke to 
8. "none" and use radial mode.
9. 
   5
   Create an ellipse to make a reflection. Set the size of the ellipse to 275 px wide x 160 px tall. Use a linear gradient and set first color at position C = 0, M = 0, Y = 0, K = 0; second color at position C = 0, M = 90, Y = 0, K = 7. Set the stroke to "none." Position this part on the top of the second button part.
10. 
    6
    Make a shadow to make your button look shiny. Create a new ellipse and make it the same size as a second button part. Create another one at 700 px wide x 485 px tall and position it as shown on the illustration. Select both pieces and click Pathfinder > Compound Shapes > Subtract. Click at this part and position it on a second part as shown. Then select Transparency > Multiply.
11. 
    7
    Make a border shadow by copying a button part for two pieces. Position it as shown on the illustration. Select both pieces and click Pathfinder > Compound Shapes> Subtract, and then set it to "multiply" mode. Put it on the top of button. Select all of parts and choose Object > Group.
12. 
    8
    Position a second part on the center of a first part, as shown. You should now have a complete and realistic-looking aqua button.

Video:

https://www.youtube.com/watch?v=M8eQDPvvl-A

Other Resources:

1) http://www.wikihow.com/Create-an-Aqua-Button-in-Adobe-Illustrator-Cs3

2) http://veerle-v2.duoh.com/blog/comments/5_steps_to_achieve_nice_aqua_effect/

3) http://ndesign-studio.com/tutorials/glossy-button

4) http://wordpress-wd.com/2015/05/12/how-to-create-an-aqua-button-in-adobe-illustrator/