Assignments

June 15

CMS

Design a site about a topic of your choosing using Wordpress as a CMS.

specifications

Size — Should fit in a browser windor when seen on a screen set to 1024 x 768.

Scope — Should have at least three pages plus the home page.

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 — 60%
Craft — 30%
Process — 10%

Schedule

Thursday, June 16 — At least three ideas for a site with site map for each. Acquire domain name and off-campus web hosting service. Be sure the hosting service supports Wordpress, PHP and MYSQL.

Friday, June 17 — Wireframes and digital prototypes of your site.

Monday, June 20 — At least two page types (home, first click, second click, etc.) of your site framed up in HTML and CSS. You do not need to have a perfect design yet. You should focus on the page structure here.

Read!

http://wordpress.org/

http://wordpress.org/about/

http://wordpress.org/about/features/

http://codex.wordpress.org/Getting_Started_with_WordPress sections on Installation, Posting in WP and WP for Beginners

http://codex.wordpress.org/Blog_Design_and_Layout

http://codex.wordpress.org/Using_Themes

Anatomy of a WordPress Theme

Tuesday, June 21 — Wordpress, refine design.

Wednesday, June 22 — Wordpress, refine design.

Thursday, June 23 — Full site for review.

Friday, June 24 — Final crit and last day of class.

June 6

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–24 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. Include a link to a compressed .fla file from your web page.
Title Screen — Your project should start with a simple title screen with a start button. Make a simple animation of text and possibly images.

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

Wednesday, June 8 — 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 timeline may look like, how different sections of your timeline may appear and how (and where) you will give users control.

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, June 9 —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.

Friday, June 10 —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. The design and content can be rough at this stage. What is more important is that you can actually build this project in Flash.

Monday, June 13 — Refine those two sections and extend design, visual and motion language to the rest of the timeline.

Tuesday, June 14 — Whole timeline in Flash including title screen.

Wednesday, June 15 — Final crit

June1

Factory

In the spirit of Rube Goldberg create a factory with an animated assembly line with at least three separate machines, or sections, that give the appearance of moving an object from side of the stage to th other. Your object should undergo a transformation after it passes through each machine.

Animate your factory using shapes drawn in Flash or Illustrator. You can use images from Photoshop, too.

Animate each machine's motion using motion tweens for the moving parts. Each machine should be a separate movie clip and should play at least one sound. You can download sound files from flashkit.com (or other sites) to use in your animations. If you need help with working with sound, try looking at Flash's Help menu, Using Flash > Sound > Using sounds in Flash. You may need several looping movie clips for each machine. The machines in your factory do not need to resemble real machines. Keep them simple, especially if you are new to this. Each machine in your factory should perform only one task.

Start by thinking about the parts of machines – levers, gears, wheels, conveyor belts, pistons, lifts, etc. Try creating some of these parts and animate them in looping movie clips. Make two different parts and put them on your stage to see how they could interact.

Pay careful attention to timing. You'll want to make the object passing through your first machine to look like it enters the second machine seamlessly. If each machine's movie clip is the same duration, you'll create the illusion of your object moving smoothly through the entire factory.

specifications

Stage Size — 800 x 600 pixels
Frame Rate — 24 fps
Duration — Playback should loop so make each movie clip only as long as it needs to be. Not too long, not too short.
Colors — Solid black and/or white shapes only. No greys, transparency or colors.
Sound — You must use at least one sound synchronized to motion with each machine. May have looping background sound if needed.

Review Flash Help on the following topics

Utilize other learning resources as needed

Using Imported Artwork
Placing artwork into Flash
Imported bitmaps
Working with Illustrator AI files
Working with Photoshop PSD files

Creating and Editing Artwork
Drawing
Reshaping objects
Moving, arranging and deleting artwork
Colors, gradients and strokes

Symbols, instances and library assets
Working with symbols
Working with symbol instances
Working with the library

Timelines and Animation
Working with timelines
Animation Basics
Motion Tweens

evaluation

Concept/Creativity/Design — 60%
Craft — 30%
Process — 10%

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 factory. What insights did you have?

Type your repsonses using a word processor and print before class. Be sure to carefully proofread it and add your name to the top of your paper. Reflections not turned in at the start of class will not be accepted.

Schedule

Thursday, June 2 — Demo and review of work in progress.

Friday, June 3 — Review of work in progress.

Monday, June 6 — Completed assignment due at start of class. HTML, SWF and compressed FLA file should be on your homepage. Turn in process reflection at start of class.

May 27

Multiple Personalities

Using Flash, create four separate looping animations using simple geometric shapes and motion tweens to evoke the following concepts: harmony, loss, delight, and a concept/feeling of your choice. Use the exact same shapes for all of your animations.

specifications

Stage Size — 500 x 500 pixels
Frame Rate — 24 fps
Duration — Your loops must be at least five seconds long.
Colors — Solid black and/or white shapes only. No colors, shades of grey or transparency.

Review Flash Help on the following topics

Utilize other learning resources as needed

Workspace
Using Stage and Tools Panel
The Timeline
Undo, redo, and history

Managing Documents
Working with Flash documents
About Flash files
Create a new document

Creating and Editing Artwork
Drawing
Reshaping objects
Moving, arranging and deleting artwork
Colors, gradients and strokes

Symbols, instances and library assets
Working with symbols
Working with symbol instances
Working with the library

Timelines and Animation
Working with timelines
Animation Basics
Motion Tweens
Working with classic tweens

evaluation

Concept/Creativity/Design — 60%
Craft — 30%
Process — 10%

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 (about creativity, process, technology, etc.) did you experience?

Type your repsonses using a word processor and print before class. Be sure to carefully proofread it and add your name to the top of your paper. Reflections not turned in at the start of class will not be accepted.

Schedule

Monday, May 30 — Memorial Day. No class

Tuesday, May 31 — Complete three of the four personalities. We’ll review them in class and have time for refinement and development of the fourth. Save copies of all of your studies for your process documentation.

Wednesday, June 1 — Completed assignment due at start of class. HTML, SWF and compressed FLA file should be on your homepage. Turn in process reflection at start of class.

May 23

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 and, most importantly, to experiment with using motion to hint at and reveal content.

Start by answering all the questions on this questionnaire. Then, make sketches and mockups to explore the possibilities for layout. Use your type skills to design a page with impact and a clear hierarchy. Play with all the typographic parameters available to you as well positive and negative space within your composition. Use type specimens as examples. Do Google searches on “type specimen sheet” and “type specimen layout”).

You have a lot of information to present, but don’t think you have to show it all at once. Use CSS and jQuery to hide and reveal content.

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. No links to other pages.
Type — Use at least two different typefaces in a variety of styles.
Images — Yes, but only in a limited fashion. Images are for content, not decoration.
Colors — Yep.
HTML/CSS + JQ — Use HTML and CSS for styling and layout and jQuery at least once for motion. Tag your content according to what it is and use an HTML table somewhere.
Links — None. All content must appear on the page.
Motion — Somthing must move in response to a user’s action.

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

Tuesday, May 24 — Review of at least three wireframes for your page. Wireframes should include all content and be a print version of your design. Convert one wireframe to a working prototype using HTML and CSS. Be prepared to show motion studies/experiments.
Wednesday, May 25 — Review of second prototype using HTML and CSS.
Thursday, May 26 — 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.