Session Two: Information Systems and Structures
The objective for this session is to develop an understanding of content organization, visual delivery and audience recognition. We will discuss key factors that relate to system organization, visual principles of information graphics and factors that relate to information effectiveness. Discussions will focus on hierarchical systems, mapping, diagrams, signage, typography and sequencing. The following discussions will be complemented with web sites that support these fundamental theories of design.
The goal of this session is to give the student tools in which to build information graphics that include charts, diagrams, maps and the effective use of typography in an online medium. They will build on skills gained in session one, which will be used to create and critique additional assignments.
Assignments
Create three web images:
1. Redesign a directional maps obtained online from a search engine such as yahoo or mapquest. A route example could be from my house the to neighborhood pool. Key factors to consider are significant landmarks, natural landmarks, different kinds of roads or paths and if the mode of transportation changes.
2. Design a diagram that demonstrates your process for cleaning clothes. It can include directional symbols, grouping elements, typography, illustration or icons.
3. Design a comparison chart, comparing two states population. Look for an interesting fact to be demonstrated. For example, Texas population is greater than Washington is, but Washington's growth rate has been greater in the past five years.
The following compositions will be created using Adobe Illustrator, PhotoShop and Image Ready. Create each image at 800 pixels wide x 600 pixels tall. Saved as a PhotoShop file
and GIF and posted to students server space for online critique.
Complete a web audit:
Attached is a web audit sheet to be completed by each student. The goal of this audit is to address how well information is delivered in a graphical context.
Web audit questions:
Name:
URL Address:
o Discuss how the site uses color to organize information.
o What hierarchical systems does the site use to convey information?
o Discuss how line and shape play a role in signifying for specific information.
o Was the information organized and comprehensive?
o What would you have done differently?
o How do you rate this site as an information tool (1 being terrible and 10 being great) and discuss why.
Complete the following sections in the required text: (optional)
These exercises are designed to complement your tool building skills. They offer additional design building skills that will enhance your ability to create stronger sites.
Web Design Essentials, second edition; Dennis, Anita and Giudice, Maria; Adobe Press (Peachpit Press), 2001
Chapter One:
Pg. 20 Mapping Made Easy
Pg. 22 Creating Artwork with Transparency
Chapter Two:
Pg. 32 Formatting Type for Comps
Pg. 34 Previewing HTML Text in Comps
Pg. 36 Transforming Type Using Vectors
Pg. 38 Preserving Type in Bitmaps
Pg. 40 Enhancing Type with Layer Effects
Pg. 42 Specifying Fonts for Web Sites
Complete "Term Project-Design Brief"
Please address the following questions and post to server for all instructors to preview. Note: you may want to set-up a separate link to "Term Project"
The following questions should be addressed when developing your design brief:
o Define the direction of your site.
o What is the goal of your site?
o Who is your intended audience?
o What are the unique needs of your audience?
o What types of information will your audience expect to gather from your site?
o Does your audience have any user-restrictions and how do you intend to address these restrictions?
o What value added components can you incorporate into your site?
o What structural paths will you take with your site?
o Address who will test your site and why?
o Conduct a visual and functional web audit, please list the URL's that closely address your sites goals.
Additional Resources
Recommended textbook for this course:
Adobe PhotoShop 6.0: Classroom in a Book, Adobe Press (Peachpit Press), 2000
Adobe Illustrator 9.0 Classroom in a Book, Adobe Press (Peachpit Press), 2000
Designing Web Graphics.3, third edition, Weinman, Lynda, New Riders Publishing, 1999
Information Architecture
Information Architects, by Richard Saul Wurman
Information, by Richard Saul Wurman
The Visual Display of Quantitative Information, by Edward R. Tufte, 1983
Envisioning Information, by Edward R. Tufte, 1990
Visual Explanations, by Edward R. Tufte, 1997
Typography
Twentieth Century Type, by Lewis Blackwell
Typography Now: The Next Wave, by Rick Poyner, Edward Booth-Clibborn
Typographic Design: Form and Communication, by Rob Carter
Type, Sign, Symbol, by Adrian Frutiger
http://www.monotype.com/index.html
http://www.microsoft.com/typography/default.asp
http://www.truetype.demon.co.uk/
http://info.med.yale.edu/caim/manual/pages/typography.html
Adobe Illustrator Online Tutorials
http://www.adobe.com:80/products/tips/illustrator.html
http://www.lynda.com/products/videos/illus9cd/sample_movies.html
http://thetechnozone.com/bbyc/Illustrator.htm
http://www.ruku.com/ilustutorials.html
http://www.illustrator-resources.com/links/Adobe_Illustrator/Tutorials/
Posting Your Exercises
To create HTML pages to post exercises, you can simply copy my code (in the browser, go under "source" in file menu and it will allow you to copy" and use my naming conventions for your images. File your html pages and images in a folder titled "ex_two" and upload the folder with html pages and images into your "public" folder on your server space. Your URL to this page will be http://students.washington.edu/user name/ex_two/index.html