300570

Human-Computer Interaction
Tutorial 6 Week 7

REMINDER – There are no classes next week (week 8) as it is the intra session break.
Due to the long weekend there will be no face-to-face classes to attend in Week 9, but there will be
activities to complete for the portfolio as well as online lecture modules to view.

Colour (or Color)

Activity 1 – Creating Colour Palettes using the Colour Wheel

Open up Color Scheme Designer http://colorschemedesigner.com

Experiment with the different schemes (mono, complimentary etc). Move the hues around by dragging the spots on
the color wheel.

Adjust saturation, brightness and/or contrast after selecting the ‘Adjust Scheme’ tab. View the Light Page example
and the Dark Page example.

When you have a color scheme that you like - export it to HTML + CSS (Option available from the Export Tab on
the top menu).

Obtain a print screen of the exported page and the css code of the page (Hint- View the source of the HTML page) to include in
your portfolio.

Activity 2 – Creating Colour Palettes using Images

Open up the Adobe Kuler tool at http://kuler.adobe.com/#create/fromacolor

Experiment with the various schemes (called rules in Kuler) and try dragging the spots on the color wheel around.
Have a look at some of the palette themes that users have uploaded.

a. Click on the flickr button to choose an image from flickr. Experiment with the different ‘moods’ and by moving the
spots on the image to different places. When you have created a palette that you like obtain a print screen. In your
portfolio include the original image and a print screen of the palette.

b. Repeat the above using one of your own images that you have uploaded. In your portfolio include the image and a
print screen of the palette.

Tutorial 6 1
 What Does The Research Say?

Activity 3 – Research into Color

Using the Research-Based Web Design & Usability Guidelines you downloaded in Week 2 -
http://usability.gov/pdfs/guidelines_book.pdf

Answer the following questions about the use of color on the web, based on the research evidence (hint – you can
search on ‘Color’)

a. Why should you not use color alone to convey information?

b. How can color be used to provide feedback on users’ location?

c. What is the best color for links and to designate used links?

d. How can you use color to provide grouping and help users understand what does, and does not, go together?
 

Activity 4 – Color & Culture

If you use color on your Web site, then you should be aware of how your audience views those colors. This is
especially important if you are designing a site that is intended for an audience of a different culture than your own
(or a global audience).

The cultural basis for color symbolism can be very powerful, and if you don't understand what you're saying with
your colors, you can make big mistakes.

Visit the following website http://webdesign.about.com/od/color/a/bl_colorculture.htm

to help you answer the following questions –

a. If you were to design a wedding site intended for an Asian audience and you used a lot of white color, why
might you be disturbing the people you're trying to reach?

b. Do you think that any eastern brides (eg. from China) wear white? Why do you think this is so?

c. Which colors would you use for a website with information on

o Saint Patrick's Day?

o Halloween?

Read http://webdesign.about.com/od/color/a/aa072604.htm to answer the following question –

d. What factors, other than culture, might influence a persons color preferences?

Tutorial 6 2
 Graphic Design (for non-designers) 4

Activity 5 – Blur into Focus

Read the information at http://www.articulate.com/rapid-elearning/blur-your-course-into-focus/

If you don’t have access to a graphics package such as PhotoShop and you are not familiar with applying a blur effect,
view the tutorial located at http://www.articulate.com/community/blogdemo/blur_howto/player.html to see how
to apply a blur using a free online tool.

a. Describe the purpose of applying a blur effect in this way.

b. Use an appropriate image to demonstrate this effect. Include a before and after image in your portfolio.

Activity 6 – Visual Alignment

The figure on the next page has poor alignment.

Print a copy of the figure and draw the current virtual lines created by the text and pictures.

Print another copy of the figure and using scissors and tape, create a better version by aligning the text and the pictures.
You won’t have to move any one element very much, but you want to create as many unbroken virtual lines as
possible. Feel free to modify the horizontal line in any way that will help make a stronger alignment.

Make a photocopy of your improved version and draw in the virtual lines.

Tutorial 6 3
Tutorial 6 4