IxD1, Spring 2012

Schedule

• March 13 & 15 — Spring break, no class.
• Tuesday, March 20 — KJ exercise.
• Thursday, March 22 — Use the KJ transcript as a starting point for developing an information architecture for your festival. What we did in class is a basic framework to build yours upon, but you may need to make changes to it to reflect the spirit of your festival. As you tailor this to your festival, put yourself in the minds of potential audiences for your site. You’ll need to analyze this list and make one of your own. Add/delete/change as needed to make it an accurate outline of the content for your site. Prepare a text file similar to the combined transcript with cleaner and more consistent language. This is an outline so be both thorough and succinct. Finally, design a letter-sized site map that is a diagram of the content groups. If you need sub-groups for main groups make them and show where they fit in your diagram. Have both the outline and site map printed and ready for class on Tuesday. Also gather content for your site based on your outline. You'll need performer info, venue info, location info, etc. If you need to write original content do that, too.
• Tuesday, March 27 — Bring at least three paper sketches of site designs to class.
• Thursday, March 29 — Power of Design Workshop. No class.
• Tuesday, April 3 — Digital prototypes of three site designs with three pages.
• Thursday, April 5 — Review refined digital prototypes. Begin HTML/CSS in class.
• Tuesday, April 10 — State Holiday. No class.
• Thursday, April 12 — Review of homepage, perfomers page and schedule.
• Tuesday, April 17 — Review revisions to design and include all other pages of site.
• Thursday, April 19 — Review of whole site. Post online for class review.
• Tuesday, April 24 — Review of whole site.
• Thursday, April 26 — Final crit.

March 6

Bigger Site: Part I–Mapping

Now that you have some experience with the design of a small site, let’s back up for a moment to take a look at the thinking behind a site.




Designing for the web isn’t just about HTML code and CSS. A site that is designed has more than the right look for its content. It is also organized well. Navigating throughout the site is easy and handled with a sensitivity to its viewers. Information on the site is organized in such a way that the designers anticipated the needs and interests of its visitors.

In this assignment, you’ll take an analytical and critical look at the website for a local business or organization. This site will serve as an information architecture case study. In this study, you will map the organization of the site and explain the rationale behind it.

specifications

• Source — Choose a website for a local business or organization. The site must have at least eight different pages.
• Map — Concentrate on the content for your map and strive for a map design with accuracy and clarity. Your map should chart the paths visitors can take as they move through the site. It should define the places (or pages) one can visit and the means of getting from place to place. Label the various elements accordingly. Your map should fit on an 8.5 x 11 page.
• Audiences — On a second letter-sized page, describe the site’s potential audiences. Name each one and briefly describe them.
• Places/Pages — On a third letter-sized page, for each place (or page) on the website, make a list of the things visitors would want to find or do at that page.
• Output — Print your maps before the start of our next class. You may use color.

process reflection

None needed for this.

evaluation

This project’s design and content will be graded based on its accuracy and clarity.

Schedule

• Thursday, March 8 — Completed project due at start of class.

January 27

Small Site: Architect

Now that you have some experience styling and structuring a page, it is time to design a small web site. Choose an architect (living or dead) whose work you find to be inspiring and design a small website to showcase their work.



Your site should have four sections:
• Homepage with your architect's name, an image of their work and links to pages within your site
• Biography page with a short biography and image of the architect
• Gallery of their work with at least six images with captions
• Page with list of significant projects (ordered chronologically with name and date). Include links for at least five projects to an image or website that shows it.
You can find prize-winning work at these web sites:
• Pritzker Prize
• American Institute of Architects, Gold Medal
• Royal Institute of British Architects, Royal Gold Medal
• The International Union of Architects, UIA Gold Medal

objectives

• To become more familiar with using CSS to structure and style web pages.
• To successfully use typography and color to categorize information.
• To organize information in a logical way and provide a means for users to navigate through a site.
• To become more familiar with optimizing images for the web.
• To develop methods for creative expression in a web environment.

process

Research your architect. Surf the web, go to the library, look in books. Gather images of their work by scanning or photographing books and saving images from the web. Are there signature images or styles you can use or adapt for your site’s design?

Think about how you want users to navigate through your site. Where do you put the site's navigation? On what pages does it appear?

Make sketches of your site on paper before moving to the computer. Make numerous paper prototypes to test different ideas. You can use this PDF to print and sketch on.

Once you have some promising directions, choose three of them to develop further on the computer. Using Photoshop or Illustrator (try 960.gs templates), make mockups of each of the key pages of your site—home, bio, gallery (thumbnails and large images) and significant works. Try different page structures, typefaces and colors here before moving to Dreamweaver. Figure out the design first, then make the move to html and css.

After review in class, slice up your design and prepare it for Dreamweaver. Once there, refine your page layouts with CSS.

Read

Designing with Web Standards, Third Edition, Chapters 9 & 10.

specifications

• Size — your site's width should fit within a browser window on a 1024 x 768 monitor. Build your site based on a 960 grid.
• CSS Stylesheet — Use an external style sheet for page structure and style.
• Number of pages — Your site should have at least four pages (home, biography, gallery, and list of significant works.
• Gallery — Should have a thumbnail page and other pages for showing large images. Images should have a caption or label.

Schedule

• Tuesday, February 7 — Make presentation to class about your architect and show samples of their work. Be prepared to show at least five different paper prototypes of your homepage and one other page (to see how they relate). Also, bring images of their work and all of your content (bio, list of significant works) on disc to work with during class.
• Thursday, February 9 — Based on feedback from last class, build your homepage and one second-level page in Photoshop/Illustrator/InDesign. Save these files as PDF and bring them (and the original files) to class for review.
• Tuesday, February 14 — Refine and extend design to whole site. Bring mockups created in Photoshop/Illustrator/InDesign.
• Thursday, February 16 — Refine your design and convert the homepage to HTML/CSS.
• Tuesday, February 21 — Bring refined HTML/CSS homepage and one second-level page to class for review. Have working (and styled) links, images and all text.
• Thursday, February 23 — Review of whole site in HTML/CSS
• Tuesday, February 28 — Completed project due at start of class. Work should be on the web and linked from your home page. Bring digital and paper process documentation and turn it in with your reflection in a 10x13 envelope at the start of class.

process reflection

Write responses to the following using a word processor. Type it up and e-mail a .doc or .pdf before the start of class. Filename should be formatted as “lastname_firstname-superhero”. Example: “nystrom_mark-sitereflection.pdf”

• What went well with this assignment?
• What did not go well?
• If you had to do it over again, what would you do differently?
• What are some of the biggest challenges you personally face when designing for the web?

evaluation

• Creativity/Design — 60%
• Craft — 25%
• Process — 15%

January 24

Superhero : Part Three

Now the fun begins. Take your print-based mockup and translate it into HTML and CSS.

Read

• Zeldman, Chapters 6, 8, 9, 10 and 13
• and this,CSS Floats 101.

Schedule

• Tuesday, January 24 — Bring printed translation (in color). We’ll have demos in class and work on many exercises.
• Thursday, January 26 — Bring first prototype of your superhero page to class for review. Be prepared to work in class.
• Tuesday, January 31 — Review complete HTML/CSS prototypes in class. Best one should be on your server for review. Bring it and others on disc to work on in class.
• Thursday, February 2 — Final project due at start of class. Project should be online and linked from your homepage. Turn in print-based process document in a 10 x 13 envelope with your name written a the top. Digital process work should be compressed into zip format, placed on your server and be linked to from your homepage.

process reflection

Write responses to the following using a word processor. Type it up and e-mail a .doc or .pdf before the start of class. Filename should be formatted as “lastname_firstname-superhero”. Example: “nystrom_mark-superhero.pdf”

• » What went well with this assignment?
• » What did not go well?
• » If you had to do it over again, what would you do differently?
• » What are some similarities and differences between designing for the screen or page?

evaluation

• Creativity/Design — 33.3%
• Craft — 33.3%
• Process — 33.4%

January 19

Superhero : Part Two

Now that you have some content, let’s tag it and define a structure, too.

Process

In this phase we’re going to be translating your text into an xml description of your layout. In class, we’ll markup content and structure and create an xml file that you will hand off to a classmate. They’ll translate your file back into a layout. We’ll start on this in class and leave time to cover some basic html tags.

For next week, you’ll need to bring a printed translation of your classmate’s superhero description.

Schedule

Tuesday, January 24 — Bring printed translation (in color).

process reflection

No reflection this time. You'll write one for the final phase of the project.

evaluation

This is one component of a larger project and should be included with your process documentation.

January 17

Superhero : Part One

We’re kicking off this class with a BANG! POW! KAZAP! and THWOK! Pick a superhero to work with for the next few weeks. They’ll be your trusty sidekick as you’re indoctrinated in the arcane languages used in web design. You may already have a favorite superhero, but if you need help choosing one check out Marvel’s website.

Process

In this phase of the assignment, you will become familiar with markup languages and be exposed to a conceptual framework for web design. For our next class, use InDesign to design a one-page profile (landscape orientation) about your superhero.

specifications

Use landscape orientation and style sheets for all text. Must have one (and only one) image of your superhero. Background colors/patterns are okay. Borders on boxes are okay, too.

Content — Must include the following:

• » Name
• » Real Name
• » Aliases
• » Citizenship
• » Place of Birth
• » Occupation
• » Education
• » Physical Attributes
• » Powers
• » Abilities
• » Weapons

Format — Make b&w print and bring electronic file (with fonts and images!) to class.

Schedule

Thursday, January 19 — Bring print, file, tracing paper, and at least four colored pens/pencils/crayons to class. Also, write a separate (typed and printed) description of your superhero in XML format. Read Zeldman, Chapter 2.

process reflection

No reflection this time. You'll write one for the final phase of the project.

evaluation

This is one component of a larger project and should be included with your process documentation.