Assignments

April 19

Mobile Design

Your website can really get around. It shows up on different browers on different platforms (Mac and PC) and different devices (smartphones, tablets, etc.) You have no control over the screen size your site will be seen on so you might as well be flexible.

In our final assignment, you will redesign a site you have already developed using HTML and CSS bt this time the site’s design will be optimized for a handheld mobile device.

process

Begin by finding out how your current design needs to change and should change to work on a smaller screen.

What are some of the design considerations/constraints?
What CSS properties will not work or should be avoided?

Find answers to these questions online, type them up, print it out and turn in at the start of class on Thursday. Document your sources with page/article titles, dates and links. Example:

Shaving the Poodle
June 3, 2008
http://www.poodlebreedguide.com/shaving-the-poodle/

Based on your research into mobile design, come up with two different mobile designs for a site you have designed (Woodstock would work).

Use this site, testiphone.com, to see what your site might look like. Play with settings under tips and options to try different viewing options (click the green text). If you have your own computer, you can download an iPhone simulator here.

Use the simulators to compare A List Apart's website, http://www.alistapart.com and its mobile version, http://m.alistapart.com

If you load this page in Firefox, you can resize your browser window to the edges of the black shape. This shape matches the screen size of an iPod Touch.

Read

Chapters 5–7 of Programming the Mobile Web

Demos

My mobile website uses a two-tier CSS system for handhelds. It first loads the core.css file and if a handheld is showing the site it loads handheld.css. My CSS isn’t perfect (this is a work in progress), but this method works. The site doesn’t allow scaling (see the source) and sets images to have widths of 100%.

If you want to scale images on a handheld, see this example that displays an image at widths of 100%, 50% and 25%. See source for a line in the head section that allows scaling.

specifications

Design Prototypes — Use 3x5 index cards to sketch out at least ten different design approaches.
Size — Your mobile site should not require scaling to view on a mobile device. To keep things simple, we'll be designing for the iPhone (not the iPhone 4) or iPod Touch with a viewing size of 320 x 365 pixels (the screen is 320 x 480.
Scope — If you are doing the music festival site, include sections for artists lineup, schedule, tickets and directions.

process reflection

Yup. What worked, what didn't and what were the biggest difference between the two designs? What tradeoffs did you have to make? Which design is better? Do you want to rework the original based on the design for the mobile device?

evaluation

This project will be graded using the following:
Creativity/Design — 50%
Craft — 40%
Process — 10%

Schedule

Thursday, April 21 — Bring typed responses to above questions and index cards prototypes.
Tuesday, April 26 — Be prepared to show at least two working prototypes of the new design. Save your current site’s HTML and CSS with new names or duplicate the site and work with the copied files. Do not erase or overwrite your originals! Add these lines to the head section of your HTML files and change the CSS to make the design work when viewed on the testiphone.com site. Your new handheld stylesheet should be applied to all pages of your site.
9:00 a.m., Wednesday, May 4 — Final critique. Mobile site should be online and ready for viewing using simulators, iPhones or iPod Touches.

March 3

Music Festival

If a successful website anticipates the needs of its visitors then it makes sense to organize and design it based on these needs.

In class, you worked together to develop the information architecture of a website for a multi-day music festival. You came up with a lot of content that we’ll edit down for this assignment. I have compiled the sticky note groupings into a text file. Use it as a starting point for a refined information architecture and site design.

process

Give the organization and naming of groups more thought. Feel free to make changes to what you did in class, but be prepared to explain your rationale for changes if you make them. Use the text file to develop a site map of your site. Find a home for all of the sticky notes that fit into your final groups. Not all sticky notes will be used. Your sitemap should look like a flowchart (see this link for examples).

We will use your sitemap to make paper prototypes in class on the Ides of March, Tuesday, March 15.

specifications

Sitemap — Design on a computer and print on a letter size piece of paper. Your map should show names for all major sections and lists for content within them. For example, if you were designing a site about beverages, you could have major sections on Juice, Water, Alcohol, Soda, Coffee and Tea. Under Juice, you could have Apple, Orange, Pineapple, Other Fruits, and Blends. In your sitemap, you don’t need to include text about each content area (in the example, you wouldn’t need text about apple juice.)

process reflection

Write one up, as usual.

evaluation

This project will be graded using the following:
Creativity/Design — 50%
Craft — 40%
Process — 10%

Schedule

Tuesday, March 15 — Bring printed site map to class. Also bring pens/markers, tape, scissors and knife. We’ll make paper prototypes in class.
Thursday, March 17 — Use the feedback you recieved in class to refine the paper prototype of your site’s design. For this design, you should have the home page, the artists section (including all subsidiary pages) and another section (with subsidiary pages). As you work, think about ways to ground the visitors to the site and ways to let them navigate easily to other sections/pages. Do all of this with one design in mind and then do it again. Come up with a completely different approach for the same information. Bring your prototypes to class for review and testing with a partner.

Tuesday, March 22 — Digital prototypes of at least one section page. If you are not going to design a site for Woodstock, be prepared to show your alternative.

Thursday, March 24 — Refined prototype of one page plus wireframes of key pages in your site (home, main section, page within section). Wireframes should show basic structure and use actual text for heads/subheads. Greek text is okay for text.

Tuesday, March 29 — Convert prototype and wireframes to HTML/CSS. Be prepared to show two main section pages and one subsidiary page for each section. Put these pages online and set links from your homepage.

Thursday, March 31 — Refined versions of Tuesday’s HTML/CSS pages.

Tuesday, April 5 — Demo, in-class review.

Thursday, April 7 — Individual and grou crits..

Tuesday, April 12 — Whole site including home page.

Thursday, April 14 — Refined site. Post online.

Tuesday, April 19 — Final crit.

February 24

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 — Use any non-digital medium to produce your map. Concentrate less on form than on the content for your map. Strive for 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.
Audiences — On your map, have a section that describes the site’s potential audiences.
Places/Pages — For each place (or page) visitors can go, make a list of the things visitors would want to find or do at that page.
Size — Your map must be 2D and be pinnable (is that a word?) to a wall.

process reflection

None needed for this.

evaluation

This project will be graded based on its accuracy and clarity.

Schedule

Tuesday, March 1 — Completed project due at start of class.

February 8

Exercise: Slicing and Dicing

This will test your knowledge of CSS.

Convert a Photoshop mockup to a web page using HTML and CSS.

objectives

To become more familiar with using CSS to structure and style web pages.

To learn the benefits and drawbacks of using Photoshop as a web design tool.

specifications

HTML/CSS — Convert the Photoshop mockup to a page that centers within a browser window using CSS to define structure and style text.

process reflection

None needed for this.

evaluation

This project will be graded using the following:
Creativity/Design and Craft — 100%

Schedule

Thursday, February 10 — Completed exercise due at start of class. Post in your server space and have a link to the project from your home page.

January 27

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 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, look in books and go to the library. 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, 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.

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. You may be quizzed on this information so read it carefully.

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.

process reflection

Write responses to the following using a word processor:
» 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

This project will be graded using the following:
Creativity/Design — 33.4%
Craft — 33.3%
Process — 33.3%

Schedule

Tuesday, February 1 — 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 in class.
Thursday, February 3 — Based on feedback from last class, build your homepage and one second-level page in Photoshop or Illustrator. Save these files as PDF and bring them (and the original files) to class for review.
Tuesday, February 8 — Workshop on Photoshop slices.
Thursday, February 10 — Refine your design and convert the homepage to HTML/CSS.
Tuesday, February 15 — 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 17 — 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.

January 18

Superhero Personal Ad : HTML & CSS

Now that you have a design in mind, build it in HTML and CSS.

Based on the feedback you received in class, convert your design from the page to the screen. We'll start by hand-coding your first prototype using TextWrangler so you’ll get a good grip on how HTML works before heading off into Dreamweaver Landia.

Read

In HTML & CSS: The Good Parts, Chapters 2, 3, 5, 6 & 12

specifications

Content — Your design should include all of the content from your XML description.
Type — Choose from these fonts: Comic Sans, Courier, Georgia, Helvetica, Lucida Grande, Lucida Sans, Palatino, Tahoma, Times, Trebuchet, Verdana.
Style — Your design’s structure and typography should all be styled using CSS.
Design elements — Restrict your design to colored backgrounds and text, borders and rules. You may have one image.

process reflection

Write responses to the following using a word processor:
» 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

This project will be graded using the following:
Creativity/Design — 33.3%
Craft — 33.3%
Process — 33.4%

Schedule

Thursday, January 20 — Bring a first prototype (built with TextWrangler) of your design on disc. We’ll demo Dreamweaver and setting up your web space.
Tuesday, January 25 — Bring prototype of your page built with Dreamweaver. We'll review the page in class and troubleshoot any problems you may have.
Thursday, January 27 — Completed project due at start of class. Work should be on the web and linked from a simple home page. Print your reflection and turn it in at the start of class.

January 13

Superhero Personal Ad : Design and Style

Using the content from your superhero’s XML description, design a single page profile page for them using InDesign.

Yes, I know this is a class dealing with design for the web, but you need a good idea of what your design will look like before you actually build it for the web. You should already be familiar with InDesign so we’ll start there.

Create a single page document (landscape orientation may work better for this, but if you love tall versus wide go for it). Use a grid to align things well and use style sheets to set the type in your design (we’ll cover this in class).

Next week, we'll start building this page for the web so keep your design fairly simple to start with. With InDesign, you put stuff (images and text) in boxes. You do the same when designing for the web. Keep your arrangement of the boxes in InDesign relatively simple. Don’t overlap them for this assignment, keep them separated.

specifications

Content — Your design should include all of the content from your XML description.
Type — Choose from these fonts: Comic Sans, Courier, Georgia, Helvetica, Lucida Grande, Lucida Sans, Palatino, Tahoma, Times, Trebuchet, Verdana.
Style — All of your text should be set using InDesign’s style sheets.
Design elements — Restrict your design to colored backgrounds and text, borders and rules. You may have one image.

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.

Schedule

Tuesday, January 18 — Completed project due at start of class. Print your compositions in b&w and bring them to class.

January 11

Superhero Personal Ad : XMl Description

Describe a superhero in XML. You may already have a favorite superhero, but if you need help check out Marvel’s website. Using the XML format, try to paint a complete picture of your superhero.

This phase of the assignment is to familiarize you with the XML format, a critical aspect of HTML. Later, you’ll use this description in a web page. Start this in class if we have time.

specifications

Content
Your description should include, at least, the following:
» Name
» Real Name
» Aliases
» Citizenship
» Place of Birth
» Occupation
» Education
» Physical Attributes
» Powers
» Abilities
» Weapons

Format &mdash Type this up using a word processor. Use a small font to get more info on a page.

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.

Schedule

Thursday, January 13 — Completed project due at start of class. Print your description (be sure your name is on it).

Interactive Technologies Survey

What makes this all happen? What are you getting yourself into? What are you not getting yourself into?

You use interactive media everyday. From your alarm clock to the coffee maker to the mobile phone and computer, interactive technology is a part of our everyday life. Let’s survey the landscape of interaction design to gain a better understanding of what makes it work and what role designers play in its creation. Each of you will be randomly assigned a specific subject to research.

specifications

Format — Use the class blog to post your findings (use one post!). Be sure to include links and images (with captions if needed).
Content — Identify the hardware, software and the different roles of design team members.

process reflection

None needed this time.

Schedule

Thursday, January 13 — Your post to the blog should be up before the start of class.