Overview

This title of the course describes the content: visual communication and web design. The course is divided into three sections:

• The first third of the course deals with the pragmatic issues of creating web pages, web sites and web images.
• The middle third of the course examines visual communication - what it is and how can it be used effectively. We will learn the elements and syntax of the design vocabulary and how to apply these elements for design success.
• The last third of the class looks at some of the refinements of web site design and graphic communication, such as usability, style sheets, typography and a quick dip into design history.

Schedule

Required texts:

Design Basics (sixth edition) by David Lauer and Steven Pentak (previous editions are acceptable. The illustrations will vary from edition to edition, but the content is similar)

Web Style Guide (2nd edition) by Patrick Lynch and Sarah Horton (can be accessed online)

Optional texts (available online- free):

Web Design in a Nutshell by Jennifer Niederst (available online through netlibrary, or you can buy a used copy very cheaply. I have the first edition and it is fine for this course.)

Other Readings:

In addition to the textbooks, there will be weekly assigned readings .These readings are stored online and (typically) are password protected.

Course Expectations:

This course may be quite time intensive, depending on your familiarity with web technologies. . You should plan on spending at least six to nine hours a week working on assignments, readings or projects.

The discussion forum constitutes our virtual classroom, and you are required to "come to class" by participating in each week's discussion on a regular, consistent basis. There is a grading Rubric for participation, which will provide more information on expectations for forum participation.

Please have the readings completed as early as possible during the assigned week. Ideally the readings should be done by Monday, or Tuesday at the very latest. You should post your contributions to the discussion board. Check the discussion boards daily. You should read your classmate's comments and respond to those each week

All class discussions must be completed by 11:00 pm on Saturday of the assigned week!

Each week runs from Sunday to Saturday, and there are regular deadlines each week. All course deadlines are Eastern Standard Time. I will try to respond to any question within 24 hours, though response time on weekends may be longer.

You cannot make up work from previous weeks. On the same note, I do not offer extra credit as an option to improve your final grade (out of fairness to all students). With no set class time, you can, however, participate at times during the week that are convenient for you, making sure to post your work on the dates due.

Assignments:

All assignments are due by 11:00 pm on Sunday of the assigned week!

This is a course in web design. You will learn by doing. Many of you have never created a web site. Don't be intimidated or feel alone in this new venture. Please ask questions! There are no dumb questions! If you are wondering it, probably every one of us has wondered the same thing at some time or other as we learned the web design.

You will be creating and uploading a new web page each week. It will be difficult at first, but your skills and comfort level will rapidly increase.

Do not obsess about the design issues at first. Focus on the mechanics of web page and web site creation. Your first pages will probably be ugly. Expect it. Accept it. You are learning something new. It doesn't all come together at once.

"Love your experiments (as you would an ugly child). Joy is the engine of growth. Exploit the liberty in casting your work as beautiful experiments, iterations, attempts, trials, and errors. Take the long view and allow yourself the fun of failure every day." Incomplete Manifesto

This is intended as a broad scope, fast moving course that will cover a wide range of subjects relating to visual communication and web design. Each week we will focus on a different topic and explore how is it being applied within the web and other digital media. There will be readings, discussion and hands-on design assignments.

Lesson 1 - Introductions and Overview

• Introduction to the course and to each other.
• Review of the basics of communication theory
• Overview of the design process

Required Readings

• Autism and Visual Thought, Chapter 1 Thinking In Pictures by Temple Grandin
• Developing Effective Communications by Dick Lee (review of basic communication theory)
• Bruce Mau, An Incomplete Manifesto - print out and read - at least once a week

Recommended Readings

• Backup Strategies: How to Save Your Files: from UNC-Chapel Hill's Information Technology Services (ITS) site

Assignment

• Review the course page.
• Introduce yourself via the discussion forum. Due by 11:00 pm Wednesday.
• E-mail your contact information (preferred first name, phone number[s], e-mail address, and degree status) to me by 11:00 pm Friday.
• Complete the assigned reading.
• Create your NetLibrary account.
  Follow the tutorial instructions. Note that you will need your UNC PID (personal id) to create this account. You can find this on your student card.
• Complete discussion forum participation by 11:00 pm Saturday.

Discussion

• Introduction
  • Who you are
  • Where you live
  • Your interest in design and the web
  • Your experience with web design
  • Other design experience (magazine, books, newspapers)
• Communication theory
  • Have you studied the basic communication theories before (Developing Effective Communications)?
  • What is your response to the Grandin article? Grandin is describing an extreme case, but most people fall somewhere along with perception spectrum between visual thinking <---> verbal thinking. Where do you fall on the spectrum?

Lesson 2 - Web Technologies

"the purpose of the design is to create something that fulfills certain needs, and a part of the design process is to plan ways in which the new thing will meet those needs." J Bennett

Topics

• Understanding basic web and html technologies
• Creating basic web pages 'by hand'
• Formatting text using html
• Uploading pages to the server (ftp)
• Visual Thinking

Required Readings

• The Design Process(pdf) - Chapter 2 of Design Fundamentals for New Media by J Bennett
• Web Design in a Nutshell by Jennifer Niederst (available through netlibrary)
  Ch 4 – Servers
  Ch 5 – HTML overview
• File Naming and Site Planning Conventions for Web and Unix

Recommended Readings

• How do I set up my personal web page and where can I find help on creating it?
• ATN's Unix Security Environment
• Web Design in a Nutshell by Jennifer Niederst (available through netlibrary)
  Ch 6– Structural HTML
  Ch 7 – Formatting Text

Reference Resources

• If you are having an upload problem, please contact the folks at the ATN help desk: http://help.unc.edu/ Do not be shy about calling them or emailing. They are a wonderful resource and have experience in walking folks through the problems.
• WDG's Web Authoring FAQ: Web Design.
  This document answers questions that are frequently asked by Web authors. While the focus is on HTML-related questions, it also answers some questions related to CSS, HTTP, JavaScript, server configuration, and so on. This is the definitive reference on how to solve almost any HTML problem and be in compliance!
• Try-it-Yourself pages (html) from W3.org
  • This is a set of interactive pages to try writing html properties and then view them immediately!
  
  

Assignment - worth 60 points

• Install file transfer software for your isis web server space:
  • Install OpenAFS and explore your UNC network space using AFS.
    There is a lecture on how to do this on the lectures page!
• (Revised Link!)Create one basic web page by hand ; save it as firstpage.html
• Upload it (using AFS) to the isis server.
  There is a lecture on how to do this on the lectures page!
• Complete the assigned reading.
• Complete discussion forum participation by 11:00 pm Saturday.
• Complete the web page assignment by 11:00 pm Sunday.

Discussion

• Which of Bruce Mau' s An Incomplete Manifesto statements resonate with you?
  • Do these statements support your experiences with creative working environments?
  • Which statements seem contrary to your experiences?
• Propose a manifesto statement that reflects one of your beliefs in how the creative process operates.
• Please post question and technical problems to the forums. Help each other solve the problems. If you are having a problem, the chances are that someone else is having the same problem.
• Read and respond to forum comments made by your classmates. Be respectful, but thoughtful in your comments.
• Complete discussion forum participation by 11:00 pm Saturday.

[ Top ]

Lesson 3:Web Site Planning & Information Architecture

Information architecture: Term used to describe the organization of information, the content, functionality, navigation and usability of a web site.

Topics

• Analyze the audience.
• Determine the purpose of your message.
• Decide where and how your message will appear (whether it will be a printed publication, presentation, or web site).
• Establish goals.

Required Readings

• 3 Steps to Branding Your Website by John Williams
• Web Style Guide - Chapter 1 : Process
• Web Style Guide - Chapter 2 - Interface Design
• Web Style Guide - Chapter 3 - Site Design
• Denim web site design tool video (6.5 minutes) Note: we will not be using denim. This movie provides a good overview of how to create a web site plan or architecture.

Recommended Readings and resources

• Introducing Site Management - sample chapter from Dreamweaver MX 2004: The Missing Manual (pdf)
• brandchannel
• Churches put Their Faith in Branding
• Adobe Web Tech - Site Design
• Denim web site

Assignment- worth 60 points

Create a web site plan with information architecture for your course web site. Save your page as siteplan.html

You will need to refer to inventory of all assigned web pages (updated link!) for this course. Your site plan should consist of two elements, which are consolidated into one web page:

1- Written statement of use - following the steps outlines in Adobe's Site Design tutorial:

• Define the site's goals.
• Define the site's intended audience(s).
• Determine the site's content.

2- Simple schematic drawing of site architecture. You will need to show the sequences, hierarchies or webs that form the page relationships.

Note that there can be many types of site diagrams. Site file and directory structures show two basic level plans. You will turn in the concept diagram of the site, but be sure to consider how you will actually be arranging the pages on the server.

Begin working on your critique of a web site. This will be due at the end of lesson 4. You will want to be looking at potential web sites to critique.

Discussion
You do not have to answer every question. Consider the issues and post a response in the forums.

• We will be talking about branding throughout the semester. With every visual image you create, you are creating a set of impressions about the product, idea or concept. What are some of the common brands that you interact with every day? If you are stumped, take a visit to brandchannel
• How do these brands communicate their message? What is the message?
• How can a web site reinforce that message?
• What message should or could non-commercial (academic?) web site communicate? Is it appropriate for an academic web site to have a personality? If you have no thoughts on this, skim the article, Churches put Their Faith in Branding.

[ Top ]

Lesson 4: Web Page Creation Using Dreamweaver

"The primary task of graphic design is to create a strong, consistent visual hierarchy in which important elements are emphasized and content is organized logically and predictably." Web Style Guide

Topics

• Organize text and graphics.
• Choose an appropriate format and layout.
• Select appropriate typefaces, type sizes, type styles, and spacing.
• Add and manipulate graphics.
• Organize text and graphics.

New! Citrix login information for remote access to Dreamweaver and Fireworks

Required Readings

• Differences Between Print Design and Web Design by Jakob Nielsen
• Page layout checklist - usability
• Chapter 4, Page Design; Web Style Guide
• Movie Tutorials from Lynda.com:
  • Dreamweaver MX 2004 Essential Training with Garo Green - watch all of the green linked movies (a little over an hour of movies)
  • Defining the site
  • Insert and modify a table
• Readings from Web Design in a Nutshell by Jennifer Niederst (available through netlibrary)
  - Ch 1 – Browsers
  - Ch 2 – Displays

Recommended Readings

• ATN's Dreamweaver: Defining Sites and Advanced Design
• Dreamweaver MX : A Beginner's Guide; Essential Skills Made Easy by Ray West and Tom Muck; eBook ISBN: 0072230398 (available through netlibrary)

• Part 1 - Module 2 The Dreamweaver MX Environment
• Part 1 - Module 3 Creating a Web Page

• Content Organization Checklist - usability

Assignment- worth 60 points

Create a two web pages using Dreamweaver. These pages should be alike and both should use tables and formatting to create a an organizational framework .

The first page will be your home page and should be named index.html

• index.html will need some identification that it is your home page for this course. We will make a banner next week, so create a verbal header.
• index.html will be a pattern page for the rest of your site (note: do not create a Dreamweaver 'template' These are handy, but too restrictive for our current needs). Allow flexibility in your page design. Some future pages will be long; some will be short. Some will have lots of images; some will have very few.
• index.html must have the following links:
  • links to current and future assignments (the future links can just be placeholders of unlinked text)
  • link to the course homepage: http://www.ibiblio.org/vc/

The second page that you will create is for your web page critique (Web Page Critique Assignment)

• Be sure your pages have the essential elements:
  • An informative title (which also becomes the text of any bookmark to the page)
  • The creator's identity (author or institution)
  • A creation or revision date
  • At least one link to a local home page or menu page
  • The "home page" URL on the major menu pages in your site (this is a link back to your home page)
• Save the page as critique.html

Discussion

• Most web sites now use grids in their layout in one form or another. Some grids seem forced or cluttered, while other seem to be able to pour information into their grids with relative grace and panache or even an air of understated mystery.
• Post one site to the forum that uses a grid layout in a pleasing manner (not merely expedient.)
  • Why is the grid effective in this case?
  • Does the site strictly adhere to the grid, or does it break the grid?
• Read and respond to other's postings.
• How do most sites handle links back to their home pages?
• What are some typical and expected ways? Have you come across any unusual or interesting ways to link back to a home page?

[ Top ]

Lesson 5: Web Image Creation using Fireworks

"The sequence of cognition.. The brain acknowledges and remembers shapes first. Visual images can be remembered and recognized directly, while words have to be decoded into meaning. Reading is not necessary to be able to identify shapes, but identifying shapes is necessary to be able to read. Since a distinctive shape makes a faster imprint on memory, the importance of designing a distinctive shape is imperative in identity design.

Color is second in the sequence. Color can trigger an emotion and evoke a brand association. Distinctive colors need to be chosen carefully, not only to build brand awareness but to express differentiation. Companies such as Kodak and Tiffany have trademarked their core brand colors.

Content is third in the sequence behind shape and color. This means that the brain takes more time to interpret language." Alina R. Wheeler: A Complete Guide to Branding

Required Readings/ Viewing

• chapter excerpt from A Complete Guide to Branding (pdf) by Alina R. Wheeler
• File Formats and Compression (pdf) from Technical Advisory Service for Image:
• Web Style Guide - Chapter 7 (pages 153-190)
• Fireworks buttons tutorial: This is a wonderful tutorial movie by Joyce Evans, who has written several books on graphics software. This tutorial is probably the easiest way to do the image swap for your assignment.
• Basic Fireworks Rollovers: a Macromedia tutorial

Recommended Readings/ Viewing

• Fireworks Best Practices (Macromedia video tutorial) - 1 hour 5 minutes (this has a slow start, but it gives great insight once they get going)
• Readings from Technical Advisory Service for Images:
  Finding Images Online
  Scanning Images for the Web
  Can I use images found on the Internet?

Assignment- worth 60 points

Create a banner for your site that conforms to these requirements:

• Includes your name and course title
• Font choice should be appropriate for an academic site (but does not have to be stiff)
• Font usage should reflect hierarchy of content (which is more important - your name or the course title?
• Color selection should be appropriate to the spirit and design of your site

Integrate this banner into your existing homepage and use it for all future class web pages.

Discussion

Bruce Mau's Manifesto statement: 19. "Work the metaphor. Every object has the capacity to stand for something other than what is apparent. Work on what it stands for."

• Is this Manifesto statement important in web design? Why?
• Discuss a metaphor that you have encountered as a part of a web design (specific, unique metaphors, not generalized icons like the home or shopping cart icon)
• You might want to browse cssZenGarden. Many of these pages are based on metaphors.
  cssZenGarden is a set of pages, all containing the exact same information. Each page is formatted differently using cascading style sheets (css).
• Post to the forum any tips or questions on using Fireworks.

[ Top ]

Lesson 6: Visual Communication

Topics

• Visual Thinking
• Semiotics: noun; a philosophical theory of the functions of signs and symbols
• Symbols as an evolving communication
• Desktop icons - symbolic communication in the digital age

Required Readings

• Pictures, Symbols and Signs (pdf) - excerpt from Visual Thinking by Rudolf Arnheim
• Understanding Comics, Chapter Two (pdf) by Scott McCloud
• Interface Metaphors

Recommended Readings and Resources

• AIGA standard international symbols
• Standard Highway Sign Shapes
• AIGA’s Compilation of Transportation symbols
• EyeWire’s catalog of Universal Symbols (pdf)

Assignment- worth 60 points

• Read Stoop & Scoop icons
• Propose a new icon to solve the stoop and scoop problem. Create this proposal as a new web page on your site. Your proposal should have one paragraph explaining the rationale behind your design and an image of your design (minimum size 300 pixels X 300 pixels)
• You can create your image in any format:
  • sketch it and scan it.
  • draw it in fireworks
  • create a photo collage (uses the resources listed above)
  • make a sculpture and photograph it
• You are not going to be graded on the slickness of your image
• You will be graded on the creativity and rigor of your solution
• Find a reason for creating a new symbol. It is humorous? Demure? Stern? Bashful? Angry?
• You might want to create a story of the client that you are creating this sign for?
  Is this sign for the only park in Price, Utah, on the edge of the salt flats? There is one poor patch of grass that is withering in the desert heat and being mistreated by a pack of wily sheepherding border collies and their cowboy owners? How can you get the idea across to this collection of lunkheads?
• Save your web page as icon.html

Discussion

• Look around you right now. What icons or symbols do you see? Is that icon/symbol a pictorial, a non-pictorial or a totally abstract icon?
• Is the icon/symbol successful at conveying its meaning? Which are more successful and why? .
• Nouns are easier than verbs to turn into metaphors. But we are surrounded by verbal icons (no parking, cross the street now). What is necessary to create a successful icon for an action?
• Metaphors and icons only function if they are suitable and well fit to the audience. How can you know what a suitable fit is?
• How could you verify that the user has understanding of what a metaphor is meant to signify -- commonality of cultural assumptions and interpretation

[ Top ]

Lesson 7: Design Principles

• Unity
• Emphasis and Focal Point (grids)
• Scale/Proportion
• Balance
• Rhythm

Required Readings

• Design Basics - Chapters 2-6 (pages 23-116)
• Rule of thirds
• The Grid: The Structure of Design (pdf)
• Basics of Design, Layout and Typography for Beginners - Chapter 5 - Alignment (pdf)

Assignment- worth 60 points

Critique of a graphic design using the DAIJ technique - full directions in assignment handout (pdf)

• First read the assignment handout (pdf)
• Select an image for critiquing (there are three to choose from, listed on the handout)
• Read the handout again and look at the image for a minimum of 10 to fifteen minutes.
• Make an inventory of what you see. Do some internet research if you need to learn more about the artist, his style or the period.

Post your DAIJ critique on a web page and save it as daij1.html

Reference Resource

• A Brief History of the Poster
• A list of links to poster history and archives

Discussion

• Post an example of a design with great visual unity and explain how the elements of unity work well in this design:
  • proximity
  • repetition
  • continuation
  • continuity
• .How does this same image take advantage of rhythm as a design element? (this will be a separate discussion forum thread; repost your example with your answer)

• Degas is well known for creating paintings and drawings that are very visually active (your eye darts all over the image, trying to take it all in and seeing more and more details on each visual scan.
• Select one of the three images below.
  Although Degas is a master of composition, he is particularly clever in his use of focal point, repetition and continuation. Analyze how you think he does this in your selected work - and see if you agree or disagree with your classmates.

La Classe de Danse, painted 1874.
The Bellelli Family. 1858-67
Dance Class. About 1871

• Below is a screenshot from the Cingular website
• Thinking about Degas' work, what similarities do you see between the compositional devices of Degas and of the Cingular website. Refer to: focal point, repetition and continuation.

[ Top ]

Lesson 8: Design Elements

• Line
• Shape/Volume
• Texture
• Space
• Motion

Required Readings

• Design Basics - Chapters 7-11 (pages 117-222)
• Take a good look! A format for looking at and talking about photographs from Describing, Assessing and Judging (DAJ) technique by Terry Barrett.
• Poster Design - Sample chapter from Graphic Design Portfolio-Builder: Adobe Photoshop and Adobe Illustrator Projects. (pdf)

Just for fun:

61 Optical Illusions & Visual Phenomena

Assignment- worth 60 points

Critique of a web page using the DAIJ technique - full directions in assignment handout (pdf)

• First read the assignment handout (pdf)
• Select an image for critiquing (there are three to choose from)
• Read the handout again and look at the image for a minimum of 10 to fifteen minutes.
• Make an inventory of what you see. Do some internet research if you need to learn more about the magazine, its audience or market.

Post your DAIJ critique on a web page and save it as daij2.html

Discussion

[ Top ]

Topics

• Color Trends & Forecasting
• Effective color use

Required Readings

• Design Basics - Chapters 12-13 (pages 223-270)
• Color Association of the United States and the history of color forecasting (pdf)

Recommended Readings and Resources

• List of Open Source and/or out-of-copyright image archives <--New
• A Brief History of Color Spaces (pdf) from Razorfish report
• The color forecasting process
• Home Color Forecast - Diversity, Fantasy And Fun In 2005
• Tonal Value (a series of linked reports on color and value for artists)
• Creating Color Palette from a Photo <--New
• Use color like the ipod ads <--New
• Pantone ColorVANTAGE color chart (pdf) <--New
• PANTONE Color Chart Instructions (pdf) <--New
• Legal issues in Color Branding and Emotions (pdf) <--New
• RGB Converters Revised
  http://www.kenjikojima.com/java/RGBHexConverter2.html
  http://www.inquisitor.com/hex.html
  http://www.dave-stephens.com/computers/rgbconverter.htm

Assignment- worth 60 points

Create a color palette from a photograph

• Read Palettes by Joe Gillespie.
• Create a color palette for your web site based on a photo from nature as per Gillespie's directions:
  " To do this yourself, get hold of a picture of some natural object or scene that you find pleasing and scan it. You can use your eye-dropper tool to select the most prominent colors and create a new file containing just squares of those colors. Save the file as a GIF (or jpg) mapped to the web-safe palette and use that for your swatches."
• Be sure to start with a photo from nature!
• You may find it easier to select colors if you apply a blur first, as described in How to Find the Perfect Color. (pdf) It gives you broader areas of color to select from.
• Do not adapt the colors to the web safe palette (now obsolete)
• Create a new web page for your site based on these colors.
• Include your photo and your color palette on your new web page.
• Write a short paragraph describing your color selection process.
  • Why did you select this photo
  • Does the photo evoke a mood?
  • Did you select major color areas or minor ones?
  • Do your colors evoke that same mood, or work against the expected?
• Save your page as color.html

Resource: How to Find the Perfect Color (pdf)

Discussion

[ Top ]

Lesson 10: Graphic Design History

• Through the Past Knowingly? by Steven Heller
• Graphic Design history - a short overview
• Graphic Styles Timeline (pdf)

Recommended Readings & Resources

• A Brief History of the Poster
• Yahoo directory listings for Graphic Design History <--New
  
• Collection of 18 online Graphic Design History Lectures by Paul Young <--New
  
• Kat's Class - Design Research Unit (Australian perspective) <--New
  
• Wikipedia - Bauhaus <--New

Assignment- worth 60 points

The graphic design history multiple choice quiz.
Yes, it is open book. The quiz materials will be taken from the slideshow lecture(s).

Discussion

Between 1850 and 1930, the pendulum of design swung from organic realism to stylized expressionism to streamlined analytical design .

• Which of the styles of that era do you identify with and why? Provide specific examples.
• Which era seems to relate most closely to our present time? Or do any of them?

Pictorial Realism (American Kitsch)is a catchall category that designers are slowly beginning to recognize. It's design of everyday objects and icons for the common person.

• Is this a valid category? If not, what would make it as valid as, say, Futurism?
• What should go in there?
• Is there anything that should be out-of-bounds?
• Why or why not? (too good; too bad; morally reprehensible?)

[ Top ]

Lesson 11: Emotional Design

"Affective design aims to create a product that has expected levels of functionality and usability but, additionally offers the user a positive emotional experience." Barnes, Southee, and Henson

Required Readings

• Emotion Commotion by Aaron Marcus (pdf) interactions; Volume 10 , Issue 6 November + December 2003
• Emotional Design by Don Norman
  Prologue: Three teapots (pdf) and Chapter 1: Attractive Things Work Better (pdf)
• Once More With Feeling by Wade Lough

Recommended Readings

• Look and Feel: Proposal by Virginia Postrel
• Once More With Feeling by Wade Lough <- New!
• Branding Worksheets (pdf) from e-agency.com

No assignment this week!!

Discussion: Added 3/28/2006!

In the quote below, Don Norman suggest that attractive things make people feel good, which in turn makes them think more creatively. It is widely recognized that in the 21st century, a health issue is information overload and its subsequent burnout. Recalling the 'demotivators' listed in the course lecture:

• Harmful actions that are outside of the individuals control.
• The use of unfamiliar terminology.
• High levels of stress.
• Insufficient reward.
• Not knowing what one is supposed to do.
• Not knowing what one is responsible for.

What are some thing that we, as designers can do to create positive emotions in a web design (since the focus of our course is web design?)

"New scientific advances in our understanding of the brain and how important emotion is to everyday life, how valuable ...when people are anxious they tend to narrow their thought processes, concentrating upon aspects directly relevant to a problem... when people are relaxed and happy, their thought processes expand, becoming more creative, more imaginative." Donald Norman

[ Top ]

Lesson 12: Usability, Accessibility and Compatibility

Topics

• Usability User Needs vs Handicapped Accessibility
• Multi-browser support (compatibility)
• What are Heuristics
• How to do heuristic testing

Required Readings

• Research Based Web Design and Usability Guidelines (pdf) CH 1-3 (pg 1-26)
• The Five Es of Usability
• How people with disabilities use the Web Brewer, Judy, ed. 2001
• The Humane Interface by Jef Raskin.
• Steve Krug - Don't Make me Think - sample chapter: 'How We Really Use the Web"
• Approaches to Graphical User Interface (GUI) Design by Shiralee Saul

Recommended Resource

Use the Screen Reader simulation available at http://www.webaim.org/simulations/screenreader to experience something of what it is like to access the web using a screen reader.

Recommended Readings

• Practical Persona Creation by D. Keith Robinson <- New!
• Creating a Cover Image for the Atlantic Magazine <- New!
• Readings from Web Design in a Nutshell by Jennifer Niederst (available through netlibrary - this is review - you should have read this already)
  - Ch 1 – Browsers
  - Ch 2 – Displays

Assignment- worth 60 points

Drive by Heuristics (personas exercise).

• There are four different personas cited on the Drive by Heuristics page.
• Select one persona and have them plan a trip to the Museum of Modern Art in New York City by using the MOMA web site.
• Each persona has particular information that they need to find in using the web site.
• Keeping in mind their personality, their needs and their limitations, does the web site work for them?
• Write up your findings as a walk-through of their site interaction. Present these on a web page. Save the page as personas.html
• You will probably want to do screenshots to illustrate your findings. I use a small screen capture program called Snagit They offer a free trial download, if you want to use that.
  Or you can use the the default Windows XP print screen command

Discussion

• Are you making sense of what is meant by heuristics and the heuristic process?
• Steve Krug says: "We’re thinking “great literature” (or at least “product brochure”), while the user's reality is much closer to “billboard going by at 60 miles an hour.”"
  Agree?
• What is a good approach to applying this usability information?

[ Top ]

Lesson 13: Web Typography and Style Sheets(2 weeks)

Typography is an art.
Good typography is Art.
- Paul Rand

Required Readings

• History of Typography Timeline (pdf) by John Kane
• Web Style Guide - Chapter 5 (pages 114 -141)
• Typography and the User Interface by Daniel Kuo
• Five simple steps to designing grid systems by Mark Bolton <- New!
• Designing with CSS with Dreamweaver 8 – from Macromedia <- Updated!
• Designing with CSS with Dreamweaver MX 2004 – from Macromedia <- Updated

• Designing with CSS – Part 1: Understanding CSS Design Concepts from Macromedia old
• Designing with CSS – Part 2: Defining Style Properties and Working with Floats from Macromedia old
• Designing with CSS – Part 3: Creating Your First Design Without Tables from Macromedia old

Recommended Reading

• Liquid Layouts The Easy Way <- New!
• One page CSS Cheat Sheet (pdf)
• CSS Tips and Tricks for Dreamweaver MX 2004 (pdf) by Rachel Andrew
• Dreamweaver MX 2004 Bible by Joseph Lowery; eBook ISBN: 0764543504 (available through netlibrary)
  CH 7 - Building Style Sheet Web Pages
• Head First HTML with CSS & XHTML - Chapter 8 (pdf) by Elisabeth Freeman & Eric Freeman, 2005.
• Web Design in a Nutshell by Jennifer Niederst (available through netlibrary)
  CH 23 - Cascading Style Sheets (pdf)
• Fluid layouts (with css) from Bulletproof Web Design (pdf) by Dan Cederholm
• Absolutely relative (layout placement) by Joe Gillespie
• Film-strip rollovers (using css) by Joe Gillespie
• Try-it-Yourself pages (css) from W3.org
  • This is a set of interactive pages to try writing css properties and then view them immediately!

Assignment- worth 100 points

Recreate your homepage (index.html) using css and include these changes:

• alter the color scheme
• add a new DIV with its own CSS style
• validation badges for (x)HTML and CSS

Create a new web page on any subject (or with any imagery) using css. It must apply include:

• at least three seperate DIV
• tableless layout (a.k.a. positioning)
• background
• text properties (height, spacing)
• margins/padding
• borders

This new page should reflect a summation of what we have been discussing in this class. Specifically

• It should have a brand or a personality
• it should be directed to communicate to a clear group of users or readers
• Layout should reflect Gestalt elements and principles of design
• Color should reinforce the experience and provide cohesiveness with the images
• Usability and accessibility will need to be addressed (this includes legibility of color - green background with red text merits an automatic 0)

Discussion

• Is there a clear consensus among the class of what constitutes good design? Can you now identify good design?
• How about bad design?
• How much is good design a question of usability or accessibility and how much do aesthetics come into play?
• Is accessibility only for the disabled? Where does information architecture play into accessibility?
• If there is a clear consensus of good design, what did Bruce Mau mean when he wrote:
  "6. Capture accidents. The wrong answer is the right answer in search of a different question. Collect wrong answers as part of the process. Ask different questions."

[ Top ]

Lesson 14: Information Architecture and Universal Design

• Structuring of data and information
• Organizing web data
• New Insights into Visual Theory

Required Readings

• Revenge of the Librarians by Peter Morville
• Defining Information Architecture (pdf) - Chapter One from Information Architecture for the World Wide Web by Morville and Rosenfeld
• Cultural Adaptation and Information Design: Two Contrasting Views (pdf) by Charles Kostelnick
• Chinese, Americans Truly See Differently, Study Says

Assignment

Finish the css assignment from Lesson 13

Discussion

[ Top ]

Grading Policy

Definitions of grades for graduate students:
Graduate students will be awarded the following grades:

H: High pass - Clear excellence; this is equivalent to a high A.
P: Pass - Entirely satisfactory
L: Low pass - Equivalent to a low C or a D
IN: Incomplete
F: Fail

Note: There are no detailed definitions of regular graduate grades H, P, and L comparable to the definitions of undergraduate grades, and no direct correspondence between particular graduate and undergraduate grades.

Course changes
The instructor reserves the right to change course content, requirements for assignments, grading procedures and other alterations, as appropriate, to the course. While such changes will be discussed and decided in class, under exceptional circumstances, the instructor may incorporate changes without notice.

Grade issues
We are committed toward grades that are fair and appropriate. It is important for students to know that the final grade is an average of several grades that are earned over the semester. Final grades are not negotiable. Doing extra work to improve a final grade is not an option because that would not be fair to other students in the course. If you wish to earn a good grade, work hard from the beginning of the semester.

Honor Code
Remember that as a student of UNC-Chapel Hill, you are bound by the University's Honor Code: "It shall be the responsibility of every student at The University of North Carolina at Chapel Hill to obey and support the enforcement of the Honor Code, which prohibits lying, cheating, or stealing when these actions involve academic processes or University students or academic personnel acting in an official capacity." An especially serious Honor Code violation is plagiarism. If you are uncertain about what is considered plagiarism, please consult your course instructor.