Class 14 & 15

Requirements for final project and survey:

You can present up to 5 projects at survey. One of them can be digital if you choose. To present digital at survey you must have it loaded on your laptop. Digital presentation is up to two minutes.

There will also be a computer in the lobby of the 7th floor with interactive work loaded there.

I will create an intro page with all of your names.

It is not required for you to create intro pages for your site.

Due this coming Wednesday the 29th - you need to have the following ready:

Name
Email address
Site Redesign Name
Pratt url address of your site
Blog address of all your work
Photo of you (115 x 95)

2 line description of problems with original site
2 line description of your solution

List the 3 pages that you have redesigned

2 screen shots
1 - of the site that you redesigned
1 - of your homepage redesign
Each at a width of 225 pixels. Height can be whatever you like, but make the two of them consistent.

At least 2-3 pages of your site should be done and up on the server with the following:
All main menu links go to the one submenu page that you have redesigned.
All submenu links go to the one content page.
Banner ad – for review
Flash animation or video for review

May 6 Final Class
Your final presentation
CD of your work and all class files
Site files need to be in a folder with your name with an underscore between your first name and last name, ex. cheryl_stockton
Your site up on the Pratt server with working pages, no broken links.

Class 13

Individual site review
Questions
Changing styles for individual pages

• Adding a class to the body tag
• Creating separate style sheets or global styles

Class 12

Class workshop continues on css and page construction

• Prepare your questions
• Review - using classes to make changes from page to page
• A look at jquery, ajax and javascript (advanced programming)
• Creating Forms in html
  

Banner Ad sizes
webpencil

banner sample images

Banner Ad Guidelines

• Be professional, check your spelling
• Select fonts, sizes, styles and colors that enhance readability.
• Ask for an action - you want users to click on it.
• Keep it simple, clear and concise
• Use words that call to attention - free, special offer. etc. Would you want to click on it?
• State the benefits. Pay less, look great, etc. How can we improve our lives by this product?

Web Survey
An interesting link Jerome just sent me. Thought you would find the info of interest. (Thanks Jerome)
http://aneventapart.com/alasurvey2008/

Flash Overview
Interface

• Toolbar
• Timeline –represents changes in movie content over time
• Stage – displays the content of your frame currently selected in the timeline
• Properties – displays options for tools and movie
• Library - stores reusable elements called symbols
• Panels – palette options –in Flash called Panels

Setting up your page

• Make sure your Properties Window is open
• Set dimensions to match your page
• Frame rate – will change the speed of your animation. 12 fps is the default
• Set background color or image

Layers

• Good practice to keep each element on separate layers for ease of editing. The active layer is the layer that is highlighted
• New layer button-double click to name the layer
• Layer stacking order
• Layer modes
• Show / hide
• Lock / Unlock
• Show all layers as Outlines
• Layer Guides allow you to animate on a specified path

Scenes

• Scenes are used to organize your movie into sections, sections that you can view as independent pieces of a whole movie.
• Flash starts with one default scene
• Helps you to break up content into logical sections

Toolbar

• Drawn objects in Flash consist of strokes and fills, which can be moved and modified separately.
• Flash’s drawing tools have modifiers that control how drawn elements look and respond.
• Tools
• Arrow, fill and stroke color, circle, rectangle, line, paintbucket, bezier, etc

Tool Differences

• Fill and Stroke are separate objects and move separately
• To move them together double click to select both
• Clicking on an outline will select only part of it
• Double click an outline to select all of it
• If you place one object of a different color on top of another it will cut the fill of the object.
• If you place line across one another they will separate into individual pieces
• Place one fill color on another, deselect it and then go back and move it away, it will cut a hole in the object where it was placed.
• If you place one color on top of an object of the same color it will combine with it.
  
• To protect this from happening group the object.
• When an object is grouped it has a blue line around it.
  
• To make changes to stroke, fill, object transformation or exact positioning go to the Properties Window.
• The Ink Bottle changes the color of lines
• The Dropper Tool picks fill color and stroke. It will then switch over to that tool and as you click on another fill or stroke will swap over to what was selected.
• Pencil tool has some special modes to change the line to smooth or straight
• Brush –has a number of unusual options to try, such as paint behind, paint fill, etc.

Symbols
There are three different kinds of Symbols

• Graphic Symbols – static images
• Button Symbols - provides interactivity
• Movie Clip Symbols – independent, self contained movie components

Things to remember about Symbols

• In Flash a Symbol is a particular kind of content component that you can reuse thus making your file size smaller.
• You can convert your existing content into symbols or you can create symbols from scratch.
• These Symbols are stored in the Library
• When you want to use the symbols in the Library simply drag the symbol onto the stage.
• The original symbol stays in the Library and a copy or Instance of the symbol is placed on the stage.
• There is a link between the symbol and the instance. if you change the original symbol it changes the instances.
• You can change the Instance properties (tint, size, etc) without affecting the underlying symbol.
• If you double click on the instance it will take you into Symbol editing mode.

Creating a Graphic Symbol

• Create a New File and go to Insert / New Symbol
• Change the behavior to Graphic Symbol.
• This puts us into Symbol editing mode –not in the Scene
• Give the Symbol a Name
• The crosshair in the middle of the page is a registration mark
• You have layers and a timeline in symbol editing mode that will not affect the scene.
• It can be confusing to know if you are in symbol editing mode or the scene. Look above the Timeline to check.
• Show Info and select your graphic.
• Type in 0 for your X coordinate and 0 for your Y coordinate. This places your symbol in the center of the page.

Working with the Library

• You can now create folders (layer sets) to organize your symbols
• You can change the behavior of your symbol from the library.

Animation
Flash animation is based on the simple principle of representing change over time. When Flash “tweens”, it draws the frames in between two significant moments of action, which are defined by the content of Keyframes.

Motion Tweening

• Moving an object from point A to point B on the stage
• Will only work on Symbols or Grouped shapes
• On frame one draw an object and group it
• Go to frame 30 (for instance)
• Insert a Keyframe
• Go to the Frame tab of the Instance Panel and select Motion from the Tweening drop down menu
• You now should see an arrow showing your tween in the Timeline.
• You can scale objects in your motion animation
• And/ or rotate them

Easing
Use this feature to make your animation look more realistic
Easing in – make your objects start slowly and accelerate (-100 – 0)
Easing out – make your object start quickly and decelerate (0-100)
Create a Bouncing ball


Motion Tweening Effects
Fading with Alpha
Fading with Tint


Motion Guides

• Use a graphic symbol to animate
• Place it on the stage in a keyframe
• Add a new keyframe to the timeline where you want your animation to end.
• Move your object into it’s new position
• Create a motion tween
• Add a motion guide layer at the bottom of the timeline next to the new layer icon
• Select a pencil to draw your guide
• Select smooth for the path
• Draw your path
• On the first frame connect your object to the beginning of the line
• On the last frame do the same

Masking

• Animating a mask
• Have a background image to mask
• Have an object on a separate layer to use as a mask
• Create keyframes
• Move object in final frame
• Create Motion tween
• Control click layer and add a mask

Sound

• Do you need to edit your sound? I use Audacity - it’s free and pretty easy to figure out.
• Import sound into Flash
• Drag it from the Library onto your stage

Test your movie

• Hit the return key to run the animation
• Go to Control –Test Movie
• File / Publish / Preview

Publish your Movie
This creates your swf file to embed in your html document.

Actions
The fundamentals of interaction, events, and event handlers
ActionScript is Flashes programming language.
I suggest you use Action Script 2 for now.


Create your actions
After you have created your animation create a new layer (top layer)
Name it actions
Double click on the last frame
Add action “stop” to stop the animation from looping or not if you want it to continue

Save
Test
Publish
Test

Components
Check out Slideshow Pro
Set it up in Flash, edit components
Use an xml file to load your images and music.

Class 11

CSS Instruction & Review

• The Box Model
• Absolute verses Relative
• Id's and Classes
• Navigation Review
• list menus - vertical and horizontal, graphic and complex with pulldowns
  
• Understanding floats for layout
• Using Classes to make changes from page to page
• Technical Resource Links added to Resource page. Check them out.

Your site questions.

Stay tuned for extra workshop schedule.

Class 10

In class workshop - programming and css

Building navigation

Class 9

CSS stylesheet construction

• Setting up navigation
• graphics
  
• html/csc

• Layout and Column Positioning using CSS

Check the Resources section from January. I added a few new links on navigation design and potential books for your library.

Let's look at your sites and issues.

Stay tuned for extra workshop dates...

Class 8

FTP Construction page to the server

CSS
The Box Model

XHTML - setting up your content in Dreamweaver

CSS - Begin building your style sheet

Class 7

Site Design Review
Homepage, Submenu and content page due

FTP - File Transfer Protocol

• Use Cyber Duck or any FTP program to copy your files to the Pratt server
• Setting up your site on the Pratt server for the first time
• Uploading and downloading your files
  
• Check your page on the server

Graphics Production
Slicing your files using Photoshop

You will be using the slice and slice select tool in Photoshop or Fireworks to slice your design into parts.

Double click on the slices to name them.

Name them something that makes sense. Example for a menu item: nav_about

These images will then be added to your html in Dreamweaver.

In photoshop when you Save for Web, this is where you will optimize your graphics, jpgs for photography, gradations or shadows; gifs for graphic menu items, logos, etc; png 24 for images with transparency.

Select each slice and select your settings.

After you save out any graphic menu items and you have hover states for these items, you must rename the slices such as - nav_about_o. These slices then need to be saved out again.

Class 5

Review wireframes and site content

What is Interaction Design?

Basics of HTML and CSS in Dreamweaver

Assignment for Class 6

Site Design with Navigation and Rollover design Due

Class 4

Students Show
Final Logos
Give overview of your site architecture and flowchart

New Material
Wireframes in Fireworks
Resizing and Optimizing images in Photoshop

Class 3

Finish up blog presentations
Review names and logo sketches

Information architecture
Sitemaps and Flowcharts

Part 2 Assignment Specifics (for classes 3-5)

(Due Class 3)

Names and Logo sketches

(Due Class 4)

APPLICATIONS USED: Web Browser | Word or a Text Editor | Photoshop
Online Flowchart or Illustrator

Sitemap and Flowcharts
A sitemap is an outline of the sites content by listing its menu items and the hierarchical structure of the site.

You will create a sitemap of your homepage, submenu and content page for your site. How can you better categorize, organize the information?

A flowchart is a graphical chart of your site which shows how pages relate to each other.
Examples will be shown in class and files made available to you.

Start to research content for your site, both text and images. Are there textures you would like to use, graphics, illustrations, photos?

(Due Class 5)

Collect and organize your content for the site.

This assignment starts with creating this content before any design is added.

By focusing first on the content there will be time at the later stages of the assignment to do the technical coding (XHTML) and the designing (CSS).

There are 3 sections which require content: main section, submenu page and content page.

1. Open a word document and save file as “web-content.doc”
2. Copy/Type content that fits your websites main section
3. Copy/Type content that fits users brief
4. Find potential photos or illustrations to use on your site.


Create wireframe II.2-----------------------------

You will be creating a wireframe using Fireworks.

A wireframe uses boxes to represent the main components of your website.

You will label each element ie (navigation, advertisement, users, etc.).

A wireframe is a bit like a “skeleton” of your website.

In Fireworks, create a new file:
1. The file will be 950 pixels (px) width
2. and 900 pixels (px) height
3. Save the file to "web layout" folder as a png file depending on the application
4. Start to create boxes to represent the different sections of your website including graphics, content, links, etc...


Create web specs and dimensions in wireframe II.3----------------

You will now be adding specs and dimensions to each section of the wireframe

1. Open Fireworks
2. Create a new file
popup will appear requesting page dimensions
width: 950 pixels (px)
height: 900 pixels (px)
resolution: 72 pixel/inches
Canvas color: white
3. Save the file
4. Name the file "layout"
5. Make sure the file is a png
6. Save to "web layout" folder

Add a new page to the Fireworks file:
1. Using the pane that has "page and layers and history", create a new page (this appears to the right of the screen)
There is a white square that says “Page 1” to its right
2. You may edit “Page 1” by double clicking if you wish to change the name
*Note if you place your cursor over an icon a small description will appear describing the icon
There is an icon that looks like a small page right next to a trash bin icon
3. Click the small page and watch a new page appear called “Page 2”

To create exact dimensions we can use guides
1. Guides are pulled from the left and top rulers just like in other applications.

You will now recreate the boxes from the first rough wireframe to have the same dimensions as the wireframe example (print out example or digital example)

To create exact dimensions
1. Use the "info" pane from the "mixer and swatches and info" pane, which is also to the right. You can tell the boxes what their height and width are and where on the x and y axis of the page they go.
*Note the x axis runs right to left and the y axis goes up and down

2. Create all the boxes that represent each section
3. Using the “info” pane make each box it's specific width and height
4. Create guides to align each section
depending on where you place the guides here is where you can use the x & y axis to align the boxes
5. Move each box into its designated area
6. Using the text tool, which is in the toolbar on the left with the letter “A” input the name of each box (navigation, advertisement, logo, content, headers, etc...) for future reference also put the dimensions of each box (ie advertisement 400x 500). It may come in handy.

It may seem a bit redundant to create this version of the wireframe, but you didn't start with this to give you time to think about the basic wireframe

You can now use these dimensions to create the actual graphics for the website

Create web graphics II.4-------------------------------

APPLICATIONS USED: Photoshop | Illustrator

This is a very open section when you will create the graphics for the site as per your dimensions from your last wireframe.

Here you will be using Photoshop, Illustrator, or web images to create the graphics.

You can create the documents to fit the specs of each individual box or you can create larger graphics and than crop and shrink them to fit the boxes.

*Please note that resolution for the web is 72. Once you save your file via “save for web” it will automatically convert whatever resolution it was originally into 72.

You will be saving 2 versions of each element.
Version 1 will be the native (original) file
if using photoshop a (psd) file
if using illustrator a (ai) file
You will be saving these files into “web element originals” folder
Version 2 will be the web ready images( jpg, gif or a png file )

To save for web
1. Select > File > save for web & devices...
Shortcut press (Shift+Option+Apple+S)Mac

A window will open with multiple windows of your image
There will be a copy of the original image with the file size
The other images will allow you see the quality in various formats (gif, png, jpg, etc...)
To the right is the area where you can play with the quality and format
Once you are satisfied with the image quality you can save the image
*Please try to make the images as small in file size as possible and keep the best quality. (file size does not mean the width and height of the image) Try to get others to view your image quality because some see things a little clearer.

You will be saving these files into “web ready images”

(in the sample site, these images are created; use these as a guide)
1. Create 1 image for of the user (person who is signed-on from this community)
2. Create 1 image for small advertisement
3. Create 1 small graphic for external link (ie yahoo, google, etc...)
4. Create 1 image for youtube video
5. Create 6 images of friends
6. Create 1 small background via http://www.tartanmaker.com/ or look for other background generators online. Rename the file background.png

You now have all the images you need to create the homepage

Insert graphics into wireframe II.5

APPLICATION USED: Fireworks CS3

1. You will now create another wireframe, which will allow you to see what your site will look like.
2. You will open up the Fireworks file with the 1 or 2 wireframes created earlier
3. You will now create another new page
4. To keep the things aligned to match the previous wireframe we can copy and paste from the specs & dimensions wireframe page by selecting all the elements.
5. Select All (Hold Apple/Command + A)
6. Copy (Hold Apple/Command + C)
Now in the new page we can paste everything at once
7. Paste (Hold Apple/Command + V)
*Note that you can (select all, copy and paste) by going to “Edit” for each step

8. Now you will go into the “web ready images” folder and literally drag each image into the new wireframe and place it into its section, which will literally cover boxes that were copied from the last wireframe. Once this is done we see what the website will turn out to be with graphics.

You will now add the web content/text
1. Open “web-content.doc”
2. Copy content into it's designated section using the text tool, which is in the toolbar on the left with the letter “A”
3. Copy and paste the content
4. Create text to represent all web links
5. Create main navigation
6. Create supplementary navigation
7. Create website legal information

You now have the preliminary main page for your website.
*Note: You will not add the actual background until the CSS section because it will be a small gif/png file approximately 144 pixels by 144 pixels, which will repeat and tile through the whole website as seen in the live website.

Class 2

Show your blogs
Discuss your research and findings

Assignment for next week
Site Selected for redesign
Rename site and do logo sketches (you may also decide to keep the name) That is also acceptable.

Specs for web elements

Graphics
1. Logo = 200px x 75px
2. User Image = 200px x 138px
3. Small Advertisement = 200px x 160px
4. Feed Logos = 200px x 50px
5. YouTube = 450px x 363px
6. Friend Image = 80px x 80px
7. Background Image = 144px x 144px
8. Large Advertisement = 450px x 499px

9. User Content = 26 words
10. Main Content = 26 words and 71 words

11. Website Container = 850px x800px

Design a new logotype based on the research

APPLICATIONS USED: Illustrator | Photoshop

Make the dimensions of your logotype approximately 200 x 75 pixels and set the resolution to 300 dpi.

Set the color to RGB for the web/screen and NOT CMYK, which is for print.

Create and save your logo in “Web safe” colors. Web safe colors display accurately on all monitors. Because monitors vary in color bit-depth from 256-colors to millions of colors (24-bit), web designers must limit their color selection to ensure the accurate display of the site for all users.

To select Web safe colors, check the box in the lower left-hand corner of the Color Picker in Photoshop. It says “Only Web Colors” next to the box.

*Note: Resolution for the web is 72. Once you save your file via “save for web” it will automatically convert whatever resolution it was originally into 72.

You will be saving 2 versions of each element.

• version 1 will be the native (original) file
• if using Photoshop a (psd) file
• if using illustrator a (ai) file
• we will be saving these files into “web element originals” folder
• version 2 will be the web ready images
• jpg, gif or a png file.
  
• See our sample logo below.

See the diagram to view how it fits into the page layout.




















To save for web
Select > File > save for web & devices
Shortcut press (Shift+Option+Apple+S)Mac

A window will open with multiple windows of your image
There will be a copy of the original image with the file size
The other images will allow you see the quality in various formats (gif, png, jpg, etc...)
To the right is the area where you can play with the quality and format
Once you are satisfied with the image quality you can save the image
Save these files into “web ready images” folder

Resources

Sites

Please take some time to look at these site resources. You need to know where to look up the answers to your questions. This will not stop - no matter how much you know. Have fun. Enjoy!

http://reference.sitepoint.com/css

http://reference.sitepoint.com/css/boxmodel

http://reference.sitepoint.com/javascript

http://reference.site point.com/html

http://reference.sitepoint.com/css/positioning

http://reference.sitepoint.com/css/relativepositioning

http://reference.sitepoint.com/css/absolutepositioning

http://reference.sitepoint.com/css/floatclear

http://pxtoem.com/

http://csstypeset.com/

http://www.stylegala.com/

http://diveintoaccessibility.org/

http://beta.w3.org/

http://www.opera.com/company/education/curriculum

http://scriptandstyle.com

http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

http://www.webdesignerwall.com/

http://www.quirksmode.org

http://amosdesigns.net

IE - Issues and Answers

http://www.positioniseverything.net/explorer.html

http://www.stopie6.org/

http://www.bringdownie6.com/

http://www.end6.org/

http://www.browserupgrade.info/ie6/

http://wordpress.org/extend/plugins/shockingly-big-ie6-warning/screenshots/

http://www.sitepoint.com/blogs/2009/04/07/support-for-ie6-its-all-about-accessibility/



Pratt DES_681

World Wide Web Consortium (W3C)

CSS Tricks

Adobe Kuler

The Zen Garden

A List Apart

Jeffrey Zeldman

Lynda.com

Flash99good.com

Fresh Styles for Web Designers

Surfing the Creative Process

nathan shedroff

American Institute of Graphic Arts-AIGA

AIGA Los Angeles

Bruce Mau Design


Flowcharts

This is the free online app to make site maps

Navigation Design

smashingmagazine.com

Books

Books for 2009 recommended by webdesigerdepot.com

Visual Quickstart Guides - HTML, XHTML & CSS - 6th edition by Elizabeth Castro

Made to Stick by Heath Brothers

Transending CSS - by Andy Clark

Class 1

Syllabus Overview

The Project

The Process

Site Examples

Resources

Part 1 Assignment Specifics

Setting up folders I.1
On your external drive create a folder titled “Web Design DES-681”
Within that folder, create eight main additional folders with the following titles:(Within the main folders you will also create additional folders).

1. “research”, which contains additional folders (resources, PowerPoint)
2. “logo”, which contains additional folders (ai files, psd files, gif files, jpg files, png files)
3. “web layout”, which will contain a png file
4. “web element originals”, which contains additional folders (psd files, ai files)
5. “web ready images”, which contain these types of files (png, gif, jpg, ico files)
6. “flash”, which contains additional folders (fla files, swf files, resources)
7. “web content”, which contains the content for the website in text formats
8. “website”, which contains additional folders (html, css, images, flash)
9. *resources = any files that were gathered or will be used within that particular file, i.e., images, website, word docs, etc...

Creating the Blog I.2

APPLICATIONS USED: Web Browser

In this blog, you should keep all your notes, planning materials, sketches, photos, screenshots, interviews and photos from your work.

(Note: the following instructions may vary somewhat as the Blogger software is updated.)

• Go to Blogger.com website
• Click “Create Your Blog Now
• If you have a Google account already (like gmail account), click “sign in first”. If not, fill in the information and create your own Google account.
• Name Your Blog
• Choose a template
• You will get an email from Blogger to verify your email address and to activate your blog account.
• Click the link in the email, you will be able activate your account.
• When you go to your Dashboard in your own blog account (image below)
• Go to “+New Post” when you want to post a new blog entry.
• Go to “View Blog” when you want to see your past entries.
• Go to “Posts” when you want to edit your past entries.
• Go to “Settings” when you want to change the basic settings for publishing and formats.
• Go to “Layout” when you want to change the template, color and fonts

Making a post:

• When you post a new blog entry, click in dashboard.
• Start by giving your post a title (optional), then enter the post itself by clicking “Embed”.
• When you're done, click the "Preview" link to make sure it's ready to go:
• Once you're satisfied with your post, click the "Publish" button. This will publish your new post:
• When you want to upload an image, click the button with photo (add image) and select the image from your files.

Research existing traditional websites, choose three as possible choices of which you will pick one to redesign I.3

Ask your parents, other faculty, use search engines, etc. to find these websites aimed at an older audience.

Research younger audience habits and tastes I.4

“Gen-Next”, “Millennials” (check the web for other terms) are just a few of the current names for the teen and early adult generation. In addition to your own anecdotal observations and your knowledge about web and social network sites, do research on what professionals say about 16-24 year olds. This will help you tailor the content and design of your website–all the while, staying within the guidelines of the assignment).

You will need at least three sources, but find 10 or more to choose from. Your research should be about the habits, tastes and patterns of the behavior of this age group.

Take your digital camera, video camera and head over to Union Square Park, other schools or interview some of your classmates. Find your target audience to interview. A few of you could go together. Conduct interviews. Ask about the sites they visit and like for what reasons, what stores, other things they like to do. Take some photos or video clips, get audio if possible.

For content and design inspiration, find existing reference websites and documents 1.5

1. Use the knowledge you have gained about this audience from your research and your own observations about this group’s preferences to identify websites and social networking sites aimed at 16-24 year olds.
2. Find three to five sites (any content or purpose) aimed at this group, for color, font, logo and image inspiration.
3. Find two or three social networking sites aimed at this group. Collect these in order to learn more about the grammar / word usage and aesthetic style of this type of website.
4. Choose a theme for the site / social networking site related to a theme from the original site, adapted for a younger audience, then find one or more references (documents or websites) about the chosen theme to help you create appropriate text.

Create/present a PowerPoint using your work and your research I.7

APPLICATIONS USED: PowerPoint

Design a Power Point accompanied by speaking notes and prepare to present the Power Point to the class.

Guidelines for designing the Power Point:

• Use a consistent, simple background
• Establish a simple “grid” (layout) and stick to it
• Place the invented name for the site in the upper left, right or lower left, right and
• remain consistent from screen to screen. Put your name in another corner of each screen.
• Choose one system font family
• Use five to 20 words per screen
• Do not use clip art
• Use simple, bold images (when showing websites, zoom in on portions rather than showing the whole page)
• Have an intro “Welcome” screen and an outro “Thank You” screen

Organize the PowerPoint as follows:

1. Introduction screen, i.e., “Redesign of Sears.com as a Social Networking Site for ‘Tool-Lovers’, 16-24 years old”
2. Existing Website screen shot
3. List characteristics of 16-24 year olds (one-two screens of bullet point from what professionals say based on web research; one-two screens of bullet points based on your own anecdotal observations and what your friends tell you).
4. Reference Websites for color, images, text style, including:
   
5. Three or more sites (for any purpose) already aimed at the 16-24 year-old audience
6. Three social networking sites
7. Color palette you are proposing for your homepage redesign (usually one monochrome plus one to three other colors taken from the reference websites. In the PowerPoint, simply show the color palette as equal size blocks next to each other (touching), all on one screen.
8. Show the development of the new name. Create the new name based on a theme, product or activity extracted from the exiting site. Alter these word(s) to conform to the manner of naming found on the reference and social networking sites.
9. Thank You screen at end.

Generally, there will be 9-15 screens in total.

Syllabus Overview

Goals

1. To become familiar with the fundamental design principles of interactive media.
2. Develop an understanding of the conceptual and technical aspects of the web design process.
3. Acquire the skills necessary to conceive, design and develop an interactive product and related online media.
4. Develop communication and presentation skills necessary to discuss interactive projects in a team environment.

Objectives

Students will..

• be able to analyze and research a target audience.
• understand and know how to present and discuss their research in an interactive presentation.
• be able to evaluate and restructure the information architecture of a site.
• know how to explore identity and branding as it relates to their target audience.
• be capable of doing graphics production in preparation of building their sites.
• have the capability to design and build a website using html/Dreamweaver and Flash software.
• ftp and exhibit their sites on the Pratt web server

Class Structure

• Students present work assignments due
  
• Critique - of new work
• Lecture - new material
• In class work on assignments
• The percentage of time spent on each will be determined by project phase

Grades:

1. Based upon attendance, class participation and successful completion of assignments by specified due dates.
2. Demonstration of subject comprehension
3. Technical skills
4. Fulfillment of assignment specifications and revisions as requested
5. Deadline adherence
6. Be prepared with materials requested by instructor for participation in class work, demonstrations and lectures.
7. Present your final website in the last class. It must up and running on the Pratt server. It must WORK, no broken links, dead pages, etc. or it will severely lower your grade.

Pratt Attendence Policy

• 3 absences result in failure for the semester.
• Late arrival to class (15 minutes or more) results in an absence for the class.

Note: There is much to cover in this class. It is full of techniques and technical terms that you must learn each week. Missing even one class can cause significant disruption in your progress.

Departmental policy:

Please note that it is the departmental policy that incomplete grades will not be assigned unless there are documented medical or family reasons. Failure to complete assignments on time for any other reason will be reflected in your final grade.

---

Project
Redesign an existing website normally considered to be for an older audience and make it appropriate for a much younger group (16-24 year olds).

Combine a theme in some direct or indirect way related to the original site (“tools” in our example using Sears.com, since Sears in known for its tools), plus the look and feel of social networking (e.g., Facebook) to create the new site.

Research, plan, design and build the site with these elements:

1. Homepage based on example layout with a new name and new logotype
2. Navigation with rollovers (css based)
3. One submenu page
4. One content page
   
5. One embedded video on homepage or Flash animation
6. One animated flash advertisement in lower-level page
7. Other elements such as text and small photos

(There will be a separate post for a complete listing of all the elements and their exact sizes)

You will use a specific layout structure on the example provided.

Software
Photoshop, Illustrator, Dreamweaver, Fireworks, Flash, Web Browser

For the Blog

1. Screen-shots of existing older audience websites possible for redesign
2. Screen-shots of reference sites already aimed at the 16-24 year-old audience
3. Screen-shots of social networking websites
4. PowerPoint with research
   
5. Name and logo
   
6. New homepage and lower-level page designs
7. Your notes
8. CD with all files in the correct folder configuration

Project Overview
The creation of your site is divided into a number of steps grouped into three main parts of instructions.

In Part I, you will:

(Due next week - January 28)

1. Setup project folders on an external drive as per instructions below
2. Creation of Blog using (Google's) Blogger.com
3. Research existing traditional websites, present 3 possible choices, discussing problems and possible solutions.
   
4. Find marketing research on 16-24 year olds for tastes and habits
5. Find existing websites aimed at this audience for design inspiration, including logo, colors and images
6. Interview your target audience. Take photos, video, audio. Add to blog to discuss.
   

(Due in 2 weeks - February 4th)

1. Present a Power Point Presentation that shows the existing traditional website, reference, websites and social networking sites and possible color palettes in the context of your research.
2. Select your website to redesign. Write about the current problems with the site and how you will update it for the target audience.
   

In Part II, you will:

1. Create a sitemap and Flowchart for your site
2. Design a new logo for based on your research
3. Find/create your content - images and text
   
4. Create wireframes
5. Create web specs and dimensions in wireframe
6. Create web graphics
7. Insert graphics into wireframes
8. Test on server
   

In Part III, you will:

1. Setup website in Dreamweaver
   
2. Create Navigation using CSS lists
   
3. Create Cascading style sheets (CSS) in Dreamweaver
4. Setup the lower level pages of the website
5. Add YouTube Video or Flash animation
6. Creation of the flash advertisement