Portfolio Website Evaluation

Session Aims

• To introduce participants to website evaluation techniques for portfolio websites

Session OutcomesEvaluate a portfolio website in terms of its:•purpose•target audience•identify five style aspects•test three areas of web accessibility

Portfolio website showcase

http://www.workatplay.com/

Form Troopers http://www.formtroopers.com/

Valerie Phillips http://valeriephillips.com/

Kari Jobe http://www.karijobe.com/index.php

Portfolio websites

•What is a portfolio website?

•What is visual style?

•Name an aspect of visual style you should consider when designing a portfolio website

•What is web accessibility?

•How would you find out if a website is accessible to all members of the population, regardless of any impairments, e.g. visual?

Vanity Claire http://www.vanityclaire.com/

Portfolio website evaluation

• What is the purpose of the website?

• Who is the target audience for this website?

• How has it been styled visually to appeal to its target audience?

• Name a feature of the navigation of the website.

• Is it accessible to all members of the population?

• How can we find out?

Website Evaluation Worksheet

• Q1. Give an overview of what the purpose of this website is?

• Q2. Who is the target audience for this website?

• Q3. Explain the overall visual style of the site. Comment on colour scheme, layout, typography, use of text, graphics and other media. Give three reasons why it would appeal to the audience you have identified. For example how colour is used, font styles, graphics, animation, sound, and style of writing.

• Q4. Do you think the visual style appropriate for the type of work being promoted? Why, state your reasons?

• Q5. Is the layout easy to navigate and use? What makes it easy to use?

• Q6. Resize the text using command + and -, is all the text still legible? Check this on a PC in Internet Explorer to see if there is any difference. Note what the differences are.

• Q7. Navigation. What methods are used to help the user/reader know where they are in the site? For example, links, hover colour, title of section appears, colour changes, breadcrumb trail.

Website Evaluation Worksheet (continued)

• Q8. Comment on the gallery section. Is there enough background information about why it was done eg. When, how, who for? Are the images big enough at a decent quality? Does it need more examples of the same project perhaps showing details? Is it easy to navigate to the different types of work, are they grouped into same themed sub sections?

• Q9. Could any of the above change/ be added to/ modified to make it more suitable for the content and target audience?

• Q10. Web accessibility. Paste the URL into http://wave.webaim.org to get an accessibility report. Write down any major errors it finds. Click on the disable styles (CSS) to see if the import content is still visible, comment on your findings.

• Q11. Paste the URL of your chosen portfolio website into: http://www.accesskeys.org/tools/color-contrast.html to get a report on the contrast levels of the site. Does it pass the test? If not what are the problems?

• Q12. Paste it into http://webanywhere.cs.washington.edu/wa.php to hear how a screenreader will read the HTML of a website. Screenreaders are used by people who might have visual impairments or other disabilities that restrict the use of a mouse or keyboard. Comment on if the audio description gives a sense of what the site is about or is it confusing?

Website accessibility http://www.accesskeys.org/tools/color-contrast.html

Website contrast report

Vanity Claire

Screenreaders http://webanywhere.cs.washington.edu/

Web accessibility tool

http://wave.webaim.org/

Finally

• Name 5 style aspects for the website you’ve evaluated

• Name the purpose of the website

• Name the target audience

• How would you assess accessibility, and in particular, the contrast of colours used in a portfolio website?