Online Publication

Scenario: You are a web designer working for a full service Internet Company. The company provides web site design and development, web hosting, network design and installation, internet access,
e-commerce solutions and internet marketing.

A non-profit organization has approached the company to create an online version of their newspaper. The organization would like for you to come up with various ways in which users will interact with general content, animation, and audio. The client currently has an online version and would like to see 3 different approaches using the content provided.

You will have to do some research to select the most appropriate copy for your site. (It may be taken off the web or created by you.) Flash and audio may be used, if desired. The production manager will sign off on one of the roughs for final production.

The comprehensive design should include:

  • Site Map
  • Front Page News
  • Opinion Page
  • Arts & Entertainment
  • Sports
  • In-Depth Features
  • Advertisement Rates
  • Awards
  • Site search and e-mail contact page
  • Staff
  • Campus Link (Student Schedules, Campus Map)
  • NY Times News
  • Letters to the Editor
  • Archives
  • Classifieds (link to CraigsList)
  • Exclusively online

    The following publication techniques should be included:
  • Newspaper Nameplate
  • Dateline and coverlines (articles and content blurbs)
  • Photograph promoting a main feature article
  • Feature Spread
  • Photograph(s)
  • Typographic elements:

    1. Headline (the main title)
    2. Lead-in or Subhead (descriptive display type before or after the headline)
    3. Byline (the writer's name)
    4. Photo caption(s) (small descriptions of photo content)
    5. Text (the body of the article)
    6. Pull quote(s) (brief quotes from the text in large type)
    7. Jump line

Once a sign-off has been completed on the roughs, a tight comprehensive will need to be developed. All digital files will need to be uploaded to a server and supplied to the department.

2006 student examples

Step 1: Meet with the client and production manager

  1. Go to the online publication project objectives and criteria page
  2. Print out a copy of the sign-off sheet
  3. Gather essential copy and elements needed for the web site.

Step 2: Define the objectives

  1. Fill out and hand in a creative brief to the production manager.
  2. Create a site diagram
  3. Define the target audience.
  4. Define the client need.

Step 3: Start the site development process

  1. Go to the online publication process and criteria page
  2. Create a schedule for site map development, thumbnails, roughs, digital comps and final design.
  3. Collect examples of similar projects to use on the style board.

Step 4: Determine the technical and production aspects required on the project

  1. Go to the online publication Production and Technology objectives
  2. Set up and manage an FTP site (access provided by course instructor)
Step 5: Develop thumbnails
  1. Create three different concepts.
  2. Develop thumbnails of the front page and one or more interior pages.
  3. Verify that your work meets thumbnail criteria.
  4. Submit thumbnails for approva/sign-off by the production manager.

Step 6: Create three styleboards.

  1. Collect examples of similar projects to use on the styleboard.

    a) show thinking as it relates to the design principles
    b) state the objective and your creative strategy
    c) clearly shows an industry example
    d) clearly shows creative usage of typography
    e) clearly shows usage of a minimum of 3 design elements
    (ie: color, line, shape, texture, value, spatial depth)
    f) is linked to the roster page with your rough design
Step 7: Develop rough layouts.
  1. Develop roughs from thumbnails which were approved by the production manager.
  2. Develop rough designs that are in coordination with your style board(s)
  3. Rough layouts should be created as layer comps for review.
  4. Submit roughs for approval/sign-off.
Step 8: Submit rough layouts to the client for approval/sign-off.
  1. After the production manager approves your roughs, meet with the client and present your designs for approval/sign-off.
  2. The client will approve one of the designs to be taken to final stage.

Step 9: Review your digital strategy with your production manager.

  1. Orally state what software you will be using.
  2. Orally state what new media techniques you will be trying to incorporate.
Step 10: Produce the final site.
  1. Create all native files (raster and vector images) using Illustrator and Photoshop.
  2. Optimize images for most efficient download.
  3. Organize files/folders appropriately .
  4. Construct HTML pages using Dreamweaver.
  5. Using the roster template provided on the server...
    Link your creative brief, styleboard, site diagram and web pages into a functioning site.
  6. Make backup copies of all files after each work session.
  7. Make appropriate revisions.
  8. Copy all final documents to the server folder(s) specified by the client and production manager.
  9. FTP files to the web server.
Step 11: Verify correct file preparation.
  1. Using the web checklist have a "TECHNOLOGY PEER REVIEW" of your project files and submit to your production manager
  2. Verify:
    • Correct raster file sampling and preparation.
    • Correct font choices and styles.
  3. Submit the completed checklist to your instructor for approval/ sign-off.

Step 12: FTP final site to the server for client approval/sign-off.

Step 13: Link project to roster page provided.

Step 14: Fill out self-assessments: