DES-681: January 2009

Tuesday, January 27, 2009

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

Tuesday, January 20, 2009

Resources

Class 1

Syllabus Overview

The Project

The Process

Site Examples

Resources

Monday, January 19, 2009

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).

“research”, which contains additional folders (resources, PowerPoint)
“logo”, which contains additional folders (ai files, psd files, gif files, jpg files, png files)
“web layout”, which will contain a png file
“web element originals”, which contains additional folders (psd files, ai files)
“web ready images”, which contain these types of files (png, gif, jpg, ico files)
“flash”, which contains additional folders (fla files, swf files, resources)
“web content”, which contains the content for the website in text formats
“website”, which contains additional folders (html, css, images, flash)
*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

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.
Find three to five sites (any content or purpose) aimed at this group, for color, font, logo and image inspiration.
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.
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:

Introduction screen, i.e., “Redesign of Sears.com as a Social Networking Site for ‘Tool-Lovers’, 16-24 years old”
Existing Website screen shot
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).
Reference Websites for color, images, text style, including:
Three or more sites (for any purpose) already aimed at the 16-24 year-old audience
Three social networking sites
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.
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.
Thank You screen at end.

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

Sunday, January 18, 2009

Syllabus Overview

Goals

To become familiar with the fundamental design principles of interactive media.
Develop an understanding of the conceptual and technical aspects of the web design process.
Acquire the skills necessary to conceive, design and develop an interactive product and related online media.
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:

Based upon attendance, class participation and successful completion of assignments by specified due dates.
Demonstration of subject comprehension
Technical skills
Fulfillment of assignment specifications and revisions as requested
Deadline adherence
Be prepared with materials requested by instructor for participation in class work, demonstrations and lectures.
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:

Homepage based on example layout with a new name and new logotype
Navigation with rollovers (css based)
One submenu page
One content page
One embedded video on homepage or Flash animation
One animated flash advertisement in lower-level page
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

Screen-shots of existing older audience websites possible for redesign
Screen-shots of reference sites already aimed at the 16-24 year-old audience
Screen-shots of social networking websites
PowerPoint with research
Name and logo
New homepage and lower-level page designs
Your notes
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)

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

(Due in 2 weeks - February 4th)

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.
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:

Create a sitemap and Flowchart for your site
Design a new logo for based on your research
Find/create your content - images and text
Create wireframes
Create web specs and dimensions in wireframe
Create web graphics
Insert graphics into wireframes
Test on server

In Part III, you will:

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

DES-681