PCC Art 198, Spring Semester 2009

Design for the Internet

Course Projects

Due 3/12: Xtreme Resume Project:

purpose: to explore semantic markup and typography in web page with css, and create a good resume document.

Xtreme Resume Assignment Files:
Xtreme_ResumeMakeover zip files
Xtreme Tutorial and Assignment sheet (pdf)
Resume Project - Original tutorial on the Web:
http://www.digital-web.com/articles/css_101/

Resources:
http://www.typetester.org//
http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

Actual resume tips (you might as well make it a good one
while you are at it!)
http://www.jobweb.com/


Due 4/7 Postponed to 4/9: Newsletter Site for All Seasons (3 parts, 3 deadlines below) - Newsletter Project

Due week 4, Thursday, 3/19 Mood Board - Newsletter Site for All Seasons:

You rbirth month and choosen newsletter topic will be your guide as you create a "Mood Board" of found items that will help you set the tone of your newsletter site. It can be in a sketchbook or bigger board if you prefer. You can create your mood board digitally, using scans offound objects, photos of things" in the wild", typography, etc. Try to go beyound the digital for content, finding things in nature, signs, brochures, typography on book covers, tickets, flyers, etc. to come up with emotional and graphic content that inspires your theme. If your mood board is a pyhsical one, make a photo of it or scan it to turn it in digitally. Here are some examples of collecting visual content to inspire:

Be a sponge (pdf) - Jon Hicks, collect insiration and what is a mood board
http://www.design-skills.org/mood_boards.html

Mood Boards on Flickr
http://www.flickr.com/photos/jenvetterli/sets/72057594049575851/
http://www.flickr.com/photos/lushbella/577439171/
http://www.flickr.com/photos/killerxkim/2196300516/
http://www.flickr.com/photos/sfgirlbybay/824018198/
http://www.flickr.com/photos/neonfear/868326303/
http://www.flickr.com/photos/nashih/411673011/
http://www.flickr.com/photos/decor8/542492250/
http://www.flickr.com/photos/decor8/542796065/

Due week 5, Tuesday 3/24 Masthead image (sometimes called a header or banner) - Newsletter Site for all Seasons

Use the Fireworks Dreamcatcher tutorial or the other tutorials below as a guide. You may use Photoshop if you prefer, although ultimately we will be working in Fireworks and this will get you started. Be sure to use and name layers and groups to carefully organize your work.

Masthead image - create an image for the top of your monthly newsletter web page. Image 760 pixels wide for a layout that will fit into an 800x600 monitor window or 955 pixels wide to fit in a 1024x768 monitor window. The height is up to you. The tutorial we do in class is 760 x 150 pixels. Take a look at other web pages' headers to decide what height you think will work best. Use the Web Developer Toolbar ruler to measure what you find on the web (Web Developer Toolbar> Micellaneous>Display Ruler and click and drag to see measurements displayed in the toolbar above the web page).

You will design the masthead image to suit the season for the month of your birthday. The masthead will have a feel and tone to match with the month's season and time of the year. You should have your color palette planned either from this masthead image or before you create it.

Tutorial Resources:

Resources:

Due 4/7 4/9: Newsletter Site Complete Must include (see project pdf above for full details):

  • a main page
  • a masthead image that represents your month’s season.
  • a title page for your month – the name of a timely theme or issue for your month’s newsletter.
  • an image for the newsletter in column 2 or the right column that again follows the theme of your month.
  • a color palette that works with the season and month of your birth.
  • a CSS (cascading style sheet) attached externally
  • a link to one "full article" page with single column text.
  • remember to use XHTML 1.0 strict for your DOCTYPE. Both pages must validate for html and css.
  • you may use Loreum Ipsum text asparagraph filler, but your headings should be relavent to your newsletter topic.

Personal, smal business or non-profit Web site project (final project)

Personal, smal business or non-profit Web site project (pdf)

Tuesday, April 14: client info

  • Use client survey and creative brief worksheet to write a creative brief, and
  • typical user profile (persona).

Please turn in printed copies and digital files of your creative brief and persona.

Instructions for creating a typical user profile or persona

About Us | Site Map | Privacy Policy | Contact Us