Assignments

April 19

Mobile Design, Part I

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.

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.

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., Tuesday, May 3 — Final critique. Mobile site should be online and ready for viewing using simulators, iPhones or iPod Touches.

March 15

Interactive Timeline

Create a site using Flash to explain how a process or event unfolds over time. Choose a subject that interests you and is something you know well or will enjoy learning about. Historical events, current events or scientific processes are good topics. Whatever your subject, it should have key milestones in time.

Imagine that your timeline is a book. Think about how it will start. What will its cover be like? What is the first thing viewers will see and hear? Each milestone in your timeline could be the start of a new chapter in this book. Think about how you will relate your chapters visually. How will they be different? How will they be the same? Give serious consideration to how will you handle transitions from point in time to the next (or to a point in the past)?

Inspiration

Visit Second Story, the New York Times and the Communication Arts Interactive Annual.

specifications

Structure — Each milestone of your timeline must be accessible in your site at all times so users can easily move from any one point in time to another (forward and backward). Navigation must be accessibe to users at all times.
Size — Not too big, not too small. Your choice, but it must fit within a browser window when seen on monitor set to 1024 x 768 your stage will be smaller than that).
Frame Rate — 15 fps
Duration — As long as it needs to be, but no shorter.
Colors — Yes! Develop a palette and use it.
Sound — Yes, yes, yes! F/X, music, narration, by all means, yes. Make it sing. Make it speak.
Text — Y*E*S.
Images — Of course! Photos, illos, give us something to see with our ojos.
Presentation — Published the site and link it from your personal web site.

process reflection

Write responses to the following:
What went well with this assignment?
What did not go well?
What would you do differently if you could do this assignment again?
Reflect upon the process you took to create this project. What insights did you experience?

Type your repsonses using a word processor. Be sure to carefully proofread it and add your name to the top of your paper.

evaluation

Concept/Creativity/Design — 50%
Craft — 25%
Process — 25%

Schedule

Tuesday, March 13 — Present ideas, sketches, research. Bring a typed, written outline that shows how will organize your timeline. The outline should include major divisions of the timeline including an introduction and a brief description of the content for each section. Be prepared to show storyboards and sketches showing what your site may look like, how different sections of your timeline may appear and how (and where) you will give users control.

Tuesday, March 22 — Storyboards of your project showing navigation system and content.

Have storyboards for opening (what people see first). Think through how things change from opening to first point of timeline.

Storyboards should show where navigation system will be and how it will behave. Is it fixed? Does it move? Does it hide?

Storyboards should be of entire project showing how you will present content for all points of your timeline.

In addition to these storyboards, have digital prototypes of at least one main point of your timeline. Process documentation should include sketches and roughs that lead to this point. Prototypes do not need to be in Flash yet.

Thursday, March 24 — Refined storyboards and digital prototypes of all content within one section of your timeline. Be prepared to discuss transitions from one point in timeline to the next.

Tuesday, March 29 — If you haven’t worked in Flash yet, now is the time. Have working prototype built in Flash of two main sections of your timeline. Sections should show how they relate visually (don’t forget motion) and conceptually. Prototypes should have a functional navigation system.

Thursday, March 31 — Refine those two sections and extend design, visual and motion language to the rest of the timeline.

Tuesday, April 5 — Whole timeline in Flash including opening sequence.

Thursday, April 7 — Refined timeline in Flash with opening.

Tuesday, April 12 — Final crit

February 1

Woodstock 1969

Imagine, for a moment, what it would be like if the technologies available to us today were available in 1969. What would a website for Woodstock look like?

With this assignment, you’ll design a web site to promote the 1969 music festival, Woodstock before it happened using today’s technologies. As with any major concert event these days, there is a lot of information to get out. Woodstock's promoters will want to promoting the artists who will perform, but they also want to give people the information they need to attend the event. Woodstock runs over three days. People who come will need to know how to get there, where to stay and how to get around.

Process

I will give you a document that is a compilation of material from the 1969 event and some information lifted from the web site for Bonnaroo. I edited the text to make it seem as if it was entirely about Woodstock. You need to read this information and organize it in a meaningful way. I will also give you a current satellite image from Google of the festival grounds with an overlay of a map from 1969. You will need to make a map of the festival for the web site.

As you are working, if you find you are missing certain information feel free to generate or gather additional content.

You do not need to use the original Woodstock marketing materials. Come up with your own look for this site. Remember, the event hasn’t happened yet so you should avoid using images of the event itself.

Schedule

Thursday, February 3 — Present documentation of KJ process and a map of your site.
Tuesday, February 8 — Wireframe designs of three different designs for the home page and two other main landing pages.
Thursday, February 10 — Bring Photoshop prototypes of at least three designs for the homepage.
Tuesday, February 15 — Revised homepage prototypes plus at least three designs for a one-click deep main landing page and a two-click deep page
Thursday, February 17 — HTML and CSS for homepage
Tuesday, February 22 — HTML and CSS for homepage and interior
Thursday, February 24 — HTML and CSS for whole site
Tuesday, March 1 — Final critique. Site on a server with link from homepage. Turn in all digital and paper process documentation in a 10x13 envelope marked with your name.

specifications

Information Architecture — Use the KJ method to develop an information architecture for this site. Translate your process into a site map for the web site.
Wireframes — Do this in greyscale in either InDesign or Illustrator. Do these before any work in Photoshop or Dreamweaver. Make wireframes for the home page and at least two other landing pages.
Text — Use all of the provided text. If you need more, gather or generate your own.
Images — Do not use images of the event itself since it has not happened yet. If you want to use images of the artists, try to use ones from the same time period.
Publishing — Your files should be on a web server and the site should have a link from your homepage for this class.

evaluation

Concept/Creativity/Design — 40%
Craft — 20%
Process — 40%

process reflection

Write responses to the following:
» What went well with this assignment?
» What did not go well?
» What would you do differently if you could do this assignment again?

Type your repsonses using a word processor. Be sure to carefully proofread it and add your name to the top of your paper. Your reflection is due at the start of class on the project’s due date. You must write all process reflections for this class.

Janurary 25

A Sticky Mess to Come

Shaped by a designer’s creative and organizational skills, it serves as a bridge between a client and an audience (or audiences). A good web site anticipates the needs and desires of its visitors. If a site is there to provide answers, it helps to know the questions first.

With this assignment, you’ll form groups of three-to-four people to take a look at some web sites whose creators may not have been anticipating the right questions. Look for a local business or organization’s web site that is in need of help. Choose a web site that is small-to-medium size and go through the KJ-Method we went through in class. Do your best to put yourself in the mind of your chosen site’s different audiences. You are going to give this site a makeover—almost—by developing some proposals for a new information architecture.

Process

Start by identifying your site’s potential audiences. With each audience, individually answer this question, “What would someone coming to this site want to find or do?” Write your answers on sticky notes (one answer per note) and put them on the wall. Feel free to add additional notes as needed.

As a group, group like items in another part of the room. Do not discuss the sticky notes or grouping. If at any point, someone’s grouping doesn’t make sense, feel free to rearrange things until they do. Every sticky note must be in a group (you might have some groups with only one note). You’re done when all the sticky notes are in a group.

Then, each of you should give each group a name. Write the name on a different colored sticky note. If a group seems to have two themes, you can split the group. Every person must give every group a name. The only time you are excused from doing so is if someone else gave a group the same name that you had in mind. Do not discuss the names or groupings at this point.

Now, each of you should secretly choose what you think are the three most important groups. Write your answers on a piece of paper. If you can’t narrow your choices down to three, choose five and then cross out two. Once you have your three groups, rank them first, second and third most important. Then, put three stars on the sticky of the most important, two stars on the second most important, and one star on the third most important.

What should emerge from this process is a map of your site with all the content areas clearly defined and organized. The next step is to define the top-tier navigation using a process NewCity calls, Nav Bar Survivor.
» Imagine you are at a page deep in the site. Nominate links that should always be available no matter what.
» Consolidate any that are closely related.
» Everyone in your group votes on the top-five.
» Top seven are your main navigation plus “home.” The rest are second-tier or footer navigation.

Document/Translate

Have someone take digital photos of your sticky notes and their organization. Transcribe this information into a chart that shows each grouping and its contents. Use this information to sketch ideas for a new home page for your chosen site. Your group worked collectively up to this point. Now, you should work independently. Use Illustrator or InDesign to create a wireframe design of your page. You may want to work off the computer first by developing paper prototypes.

Schedule

Thursday, January 27 — Each group presents documentation of their KJ process and a map of their site.
Tuesday, February 1 — Wireframe designs of three different designs for the home page and two other main landing pages. We’ll stop at this stage.

specifications

Process Presentation — As a group, prepare a slideshow of your KJ process and compile your results on paper. Transcribe your sticky note groupings into list form. Include the site's name, URL and group members on the page.
Wireframes — Do this in greyscale in either InDesign or Illustrator. Save your wireframes as PDF and put them on a CD along with your group’s KJ documentation. Bring the files and CD to class for critique.

evaluation

Concept/Creativity/Design — 50%
Process — 50%

process reflection

Write responses to the following:
» What went well with this assignment?
» What did not go well?
» What would you do differently if you could do this assignment again?
» What insights did you gain into design for the web?

Type your repsonses using a word processor. Be sure to carefully proofread it and add your name to the top of your paper. Your reflection is due at the start of class on the project’s due date. You must write all process reflections for this class.

Janurary 11

Hello, my name is ...

Put your knowledge of HTML and CSS to the test. Design a web page that tells us a bit more about yourself using only type. Use this as a chance to play with typography for the screen.

Start by answering all the questions on this questionnaire. Then, use this PDF to explore the possibilities for layout. Your composition will be entirely type-based so use your type skills to design a page with impact. Look for ways of establishing hierarchy. Play with all the typographic parameters available to you as well positive and negative space within your composition. Use type specimens as examples (google “type specimen sheet” and “type specimen layout”).

specifications

Content — Fill out all blanks in the questionnaire and include all of your responses.
Format — Single web page. Must fit in a browser window on a screen set to 1024 x 768.
Type — Use at least two different typefaces in a variety of styles.
Images — Nope.
Colors — Yep.
HTML/CSS — Use HTML and CSS for styling and layout. You may not use any images as text.

process reflection

Write responses to the following:
» What went well with this assignment?
» What did not go well?
» What would you do differently if you could do this assignment again?
» What insights did you gain into design for the web?

Type your repsonses using a word processor. Be sure to carefully proofread it and add your name to the top of your paper. Your reflection is due at the start of class on the project’s due date. You must write all process reflections for this class.

evaluation

Concept/Creativity/Design — 50%
Craft — 25%
Process — 25%

Schedule

Thursday, January 13 — Review of at least three wireframes for your page. Wireframes should include all content and be a print version of your design. At this point, do not work in HTML or CSS. Create your wireframes using Illustrator, Photoshop or InDesign.
Tuesday, January 18 — Review of first prototype using HTML and CSS.
Thursday, January 20 — Review of second prototype using HTML and CSS.
Tuesday, January 25 — Completed project due at start of class. Work must be posted online and linked from your homepage. Turn in your process reflection at the start of class.