Sunday, May 18, 2008

WEEK 8-GUIDELINES FOR PROJECT 06: WEBSITE DESIGN

In this project, you are asked to design, set up and publish a basic website by using Dreamweaver or an animation in Flash. It's up to you which program you decide to work in. I have handouts for you in either program. You will be completing the lessons in the handouts and turning them in for in-class exercise credit. You will need to design a website with at least three pages:
Home, About Us, Content (Products, Services, Information, etc.).
REMEMBER TO CHECK THE DROP OFF BOX FOR RYAN'S TUTORIAL ON DREAMWEAVER.
I WILL GIVE YOU THE PROPER FTP INFORMATION IN CLASS.
Otherwise you will be creating an animation using Flash. I will instruct you on your assignment if you choose to use Flash instead of Dreamweaver for your final project.
Also extra credit is available to you, if you insert a flash animation or an after effects video into your dreamweaver final project.

Some ideas for this project are:
• A writer’s website
• A movie producer’s website
• A graphic designer’s website
• A singer’s website
• A video game animator’s website
• A fashion designer’s website

Design Process

To get started, please think and work through your design concept clearly:

1. ANALYZE and PLAN

Before designing your Web page, you need to brainstorm and think about defining goals and purposes of your Web site. For example, "You want to create a web site in order to..."
• promote a product or service
• tell customers about your company
• tell a story
• teach people a skill
• entertain your audience
• generate leads or increase your social/professional/academic network

2. EMPHASIZE USER-CENTERED INTERFACE

Ask yourselves: Who is my target audience? Who will be using this website?

3. DEFINE TASKS AND INTERACTIVITY

What will the users (audience) do when they visit your site?

4. RESEARCH AND COLLECT INFORMATION

What information or content is needed for this website?
How will I collect this information?
What are my sources?
What elements or pictures will you need?
What file configuration is required for your website?

5. SKETCHING

Please complete your design process by sketching
1. a mock-up or wireframe of your website
2. a navigation flowchart
3. select your color theme and “feel & look” view.
For more information, please refer to: http://www.strangesystems.net/archives/000005.php
http://www.bunlimited.com/web-site-look-and-feel.html

Implementation

1. Optimize your files for the web; especially if you are using pictures.
2. Save all files selected for your website under appropriate configuration and data management. This is important when you upload your files in dreamweaver; otherwise, the application will not find your files.
3. Ensure your FTP access in aisites works perfectly. Your student’s e-mail account must be active
4. Link your class blogiste to your website.

Presentation

In order to get a perfect score in this project, you must pretend you are selling your website to a potential client and must include the following requirements:

1. Have your website published up and running.
2. Pictures, movies, audio must be functional.
3. Tell us about your concept design. Again the steps are:
a. Planning (analysis)
b. Audience
c. Interactivity
d. Research (mention at least 3 sources of inspiration)
e. Sketching (you must present a mock-up or wireframe, navigation flowchart, color theme, look and feel, typography, etc. in a digital or print form.

Extra-Credit- 5 points- Add a flash or after effects animation to one of your website pages

WEEK 8-LESSON PLAN: DREAMWEAVER/Flash

1:00 p.m. Roster. Blog Review, Announcements. DUE TODAY: WEBSITE RESEARCH AND CREATIVE PROCESS FOR PROJECT 06- WEBSITE DESIGN MUST BE COMPLETE. REFER TO MY E-MAILS AND BLOG POSTINGS.

1:10 p.m. Tutorial-Dreamweaver DVD

3:00 p.m. Break

3:15 p.m. Roster. Announcements

3:16 p.m. Reality check on Final Projects due. (questions, concerns, issues)

3:30 p.m. Studio Time- Getting started with Project 06- WebSITE Design (You had enough time to complete your research and creative process. Now you can jump into Studio Time and start building your website)

4:30 p.m. Time to update your Blog Project and back up your data.

5:00 p.m. Class resumes next Friday.

WHAT'S DUE ON WEEK 11- 6/13/08

1) FINAL EXAM

2) PROJECT 06- WEBSITE PRESENTATIONS

3) PROJECT 01- BLOGSITES

4) EXTRA-CREDIT, IF ANY.

Friday, May 16, 2008

After Effects Assignment-Project 5

Project 5 Guidelines
After Effects and Photoshop animations to design a short animation.
Due Date: May 16th

1. Remember during presentation time, your audience (instructor and classmates) is your client. Imagine yourself selling your idea to your most challenging client and don’t be afraid to break a leg.

2. Prepare an animation no less than 2 minutes including the following categories:

Try experimenting with the pre-set templates to produce the following:
a. Animating text
b. Inserting a background
c. Using Photoshop to isolate and image and importing it into After Effects and then animating this image, but moving it in some way
d. Extra credit, add sound


3. Remember to project your voice across the room when presenting your animation.

4. Relax and do your best! We are "ALL" learning. Look at class critiques as a positive experience since there is always room for improvement.

5. During presentation time, you will be asked to critique your classmates’ project. Please provide constructive feedback and elaborate your opinion into a coherent statement.

Due Date: May 16, 2008

Evaluation

As you know, every project in this class will be evaluated under the rubrics system.

Sunday, May 4, 2008

WEEK 6 – Recommendations to prepare for the mid-term exam

Please follow the next recommendations to help you prepare for the exam:

1) Raster vs. Vector Images

If you are unable to review the movie provided by the instructor at home, conduct a little research on your own in the Internet.
From research and In your own words, describe the main differences between raster image and vector image.
Ensure you include at least two main advantages presented by the use of raster images and two main advantages presented by the use vector images.

2) Photoshop ManipulationInstructions will be provided before the exam, but to help you prepare for this questions, ensure your photo manipulation includes the following main steps:
ImportResize (Image dimensions, resolution, and mode)
Layering
Color Enhance
Retouch and background add
Effect
Save
Optimize for the web
Know the tool bar in both programs

Also check out the links on the blog page.

See you on Friday.
Ragan

Lesson Plan for Week 6

Class, Good Afternoon!

The topics for this evening are:
1:00 p.m.
• First Call of the Roll
• Announcements (food policy in the lab and Summer Happenings)
• Blogsites reviews and critiques
2:15 p.m. Presentations Project 04: InDesign Presentations
3:00 p.m. Break
3:15 p.m. Second call of the Roll and any other announcements.
3:16 Review and Demo basics in After Effects
4:30 p.m. Idea Week- Project 05- After Effects
Take the time to organize your folder in the Drop and Blogsite for mid-term assessments
5:00 P.M. Class resumes until next Thursday.
5:10P.M.-5:45 P.M.If you wish to have extra-time with the instructor and address any specific questions regarding class tutorials and/or projects.

Sunday, April 27, 2008

InDesign Guidelines

Project 4 Guidelines
Page Layout- Preparing a book or magazine cover page using InDesignCS3

Design Process:

1. Select a magazine of your preference, review it, analyze its layout, typography, color theme, etc. Your job will be to sketch out some ideas about what the next cover of your favorite magazine will look like for its next edition or publication.

2. Prepare a mock-up of your organic composition in a piece of paper or digital source.

3. You can also do a quick research in the Internet.
For your reference, some good sources in Typography are:
http://www.httpcomunicacio.com/
http://www.identifonts.com/
http://www.sonybmg.com/musicbox/video/matisyahu/?bclid=14270485&bctid=5743543
http://www.energyhill.com/#highlights

4. The next step is to format and assemble your content (what stories will this magazine feature in the cover page).
Your layout can be assembled in Photoshop, Illustrator, In Design during studio time.

Due Date: May 9, 2008.


On May 9, 2008, you are required to present your project in the form of a 3-5 Power Point Slides addressing the following questions:

a) what was your thought process when making a mock-up (design by hand)?

b) in composing your project or layout, what's the message you want to send and to whom?

c) describe the tools, effects and printing options applied to your project.
SPRING 2008: WEEK 5 – LESSON PLAN – CS3 InDESIGN INTERFACE BASICS

Class, Good Afternoon

The topics for this evening are:

1:00 p.m.
• First Call of the Roll

• Announcements

• Blogsites reviews and critiques (Mid-terms are coming up and your grades will reflect if you are posting comments or not!! Please see your first assignment about blogs and I should be seeing your comments every week and your first photoshop final image assignment posted, tonight post your logos)

• Feedback on Project 03 (Logos)

• Check Points toward Mid-Term Assessment

1:15-3:00 Finish up all illustrator files and get them ready for presentation.

3:00 p.m. Break

3:15 p.m. Second call of the Roll and any other announcements.

3:30 p.m. Presentations Project 03:Logo Design in CS3 Illustrator


4:00 p.m. In Design Interface Basics
• Lecture and Tutorials.
• Typography: Working with Text
• Working with Images
• Production Sequence: Page Layout- Printing
• Tutorial 1: DVD
• Tutorial 2: Text Frame
• Tutorial 3: Document Set-Up

4:30 p.m. Studio Time-Getting Started with Project 04- The Cover of a Magazine.

4:45 p.m.
• Mid-Term Exam Review
• Time to update your Blogs, DropOff Folder and Flash Drives.
• Due next class:
• Mid-Term Exam and Assessments
• Presentation Project 04- The Cover of a Magazine in CS3 InDesign.

5:00 P.M. Class resumes until next Friday.

5:00 P.M.-6:00 P.M.If you wish to have extra-time with the instructor to address any specific questions regarding class tutorials and/or projects, Ragan will be available until 6:00 p.m.

Friday, April 18, 2008

Illustrator logo sample


This is a quick logo concept. Keep your images simple and clean and above all, legible.
Make sure your "icon" is smaller than your actual name or title.
You don't have to use an icon, but you can design using text.
Have fun and be creative.
But keep it legible.

Monday, April 14, 2008

Project 3-Illustrator logo design

Spring 2008: PROJECT 3 – Designing your first logo in Illustrator

Project 3 Guidelines

Logo Design in Illustrator CS3

Now, it is time to think about your next project. After learning the basic concepts in Illustrator in class, your task is to create a revamped logo design.

Suggestions for Inspiration Sources:

1. Do you want to brand yourself? Go ahead! Market yourself as an artist. Design a logo that says the very best about you. How do you want your audience to think about you?

2. Are you working on launching your own business? Great! How do you want the logo to represent your business? What color theme do you want to use? What fonts? Do you want to use graphics, text, both?

3. Do you disagree with any of the most known logos in the market? We love risk takers in this class! Select a popular logo (i.e. Yahoo, Google, Apple, CocaCola, IBM, Cingular, etc.) Then, research their web sites and learn what the company is all about. Does the logo reflect the mission or essence of the company…? … No…? Then, go ahead and recreate your own version of this logo. Our uniqueness lies within our ability to be or portrait ourselves as "different." Don't hesitate to take a risk.

Fundamental steps in creating a logo:

1. Sketch 3-5 different ideas. Start mixing letters and graphics, colors, textures, contrast, etc. Scan and save your ideas.

2. Scan, save and place your final sketch in Illustrator.

3. Apply the basic techniques learned in class and explore other techniques that will enhance the image of your logo.

4. Remember, a logo must be simple and memorable.

Presentation Guidelines:
• Due Date: April 25th , 2008

• Number of Slides: at least 3 not more than 5 slides.

• Duration: no more than 5 minutes.

• Making your point across:
For example, if you have a 3-slide power presentation, cover the following:

1. Slide 1- Scanned sketch of ideas

2. Slide 2- Logo in process, maybe 2-3 of your ideas being worked out.

3. Slide 3- Final Design.

Ask yourself: Does my final design blends with the purpose of the logo?

• How to say it:
Pretend you are making a client presentation. Make a point to be organized, consistent, skillful, knowledgeable and enthusiastic. Connect with your audience by engaging eye contact and projecting your voice across the room.


SPRING: WEEK 3 – LESSON PLAN:
MASTERING PHOTOSHOP


Good Day, Class!

Today, we will visit the following topics:

1:00 p.m. First call of the roll.
Announcements. Students Blogsites/ Critiques and Issues.
Do’s and Don’ts so far.

1:15 p.m. Lecture and Tutorial - Working with Illustrator

2:30 a.m. Break

3:00 p.m. Roster (2nd call)

Studio Time: Working with Illustrator, cont'd.
Learning the pen tool and doing an in-class exercise

4:00 p.m. - Working with your sketches and ideas for your logo design. Getting approval.

Recap - What’s due next class:

Project 3 sketches and ideas, ready to work on project in class. Scan your work before returning to class next week! Be time efficient!
5:00 p.m.
Class resumes until next Friday.

Friday, April 4, 2008

WEEK1 – PROJECT O1 – THE BLOGGER

Welcome, Class!

In this course, you will be asked to keep a “blog site” through the entire class. You will be responsible for your blog as a single author with the objective to link it in your website at the end of class. This blog is your space to upload your weekly class assignments, reflect on readings and discussions, and exchange information throughout the class. You may post ideas, thoughts and opinions, links to news articles you find on the web, questions you have about the material, etc. You should also read other students’ blogs to gain knowledge and exercise constructive criticism.

The topic of each of the blogs will be provided weekly in every class in alignment with your student plan.

The audience of your blogs will be your classmates as well as your instructor and guests who want to learn more about your skills.

Weekly, you will be asked to write 50-100 words including questions for your audience and post a picture or link to support your class assignment (it is a good idea to write your posting on Word and then copy and paste it to the blog so that you have an extra copy). Be sure to site any sources you use when writing your blog (with a link to the website, for example).

Deliverables:

On week 3, you will have to present your blog in class. Plan your presentation for 5 minutes and make it professional and well organized. We will divide the class in two groups to manage the review of the blogs. Each group will name a team leader to assist in the blog moderation process.

On the following weeks, you should visit your classmates’ blogs. Visit will alternate both group's participants and comment on what they posted/wrote/said and answer any questions they might have left. If you as the author then respond to those comments left by your classmates, demonstrating in your answer that you read the comment, you will receive one point extra credit on your blog assignment per response.

All of your blog postings should be posted every Monday with the comments left by the following Monday. If you choose to respond to comments for extra credit, that should be completed by the following Monday.

On week 10, we will have a little contest and ask each student to vote on which blog they felt was the most informative, entertaining, and creative.

Recommendation:
While blogs are less formal than other kinds of academic writing, your blog entries and comments should be substantive and meaningful, reflect a respectful tone, and be written with attention to clear and error-free prose.

Resources:
To get set up a blog, you need to visit a blog-hosting site and set up an account. The process is simple and takes only few minutes. You will be guided in class during studio time.
Some free hosting sites are:

www.blogger.com
www.tblog.com
www.blogeasy.com
www.myblogsite.com

Welcome again, CLASS and Enjoy It!
Ragan

Spring 08 – PROJECT 02 – PHOTOSHOP

Project 2 Guidelines

Photoshop interface and Photo Manipulation to design a collage and Advertisement
Using Olympic images to create your design. Pick a recognizable shape, like a snowboarder, or a full bodied runner and then pick about 10 images, high resolution, 150-300 dpi and we will "mask" these images into the shape you create. (See sample provided.)

Due Date: April 18, 2008

1. Remember during presentation time, your audience (instructor and classmates) is your client. Imagine yourself selling your idea to your most challenging client and don’t be afraid to break a leg.

2. Prepare a power point presentation with three (3) slides to organize your ideas in the following categories:

Slide 1.
Share with classmates and instructor your initial idea(s) for your project in a form of sketch or mock-up. Tell us about the purpose of your idea(s).

Slide 2.
Display format and show us the "before" and "after" version of your project.

Slide 3.
Explain Elements of Design: Value, Color, Form, Shape, Line, Space and Texture in addition to all the tools and techniques provided in class plus any other technique you may have figured out on your own for extra-credit. Make sure your presentation is consistent with the purpose of your project? Explain.

3. Remember to project your voice across the room. Keep a professional demeanor. The more comfortable you get making your presentations, the closer you are to make a big impact on your client.

4. Relax and do your best! We are "ALL" learning. Look at class critiques as a positive experience since there is always room for improvement.

5. During presentation time, you will be asked to critique your classmates’ project. Please provide constructive feedback and elaborate your opinion into a coherent statement.

Due Date: This is the only 2-part project in this class, which is due on April 18, 2008.

Evaluation

As you know, every project in this class will be evaluated under the rubrics system.


Spring 2008– LESSON PLAN – WEEK 2

Good Day, Class!

Today, we will visit the following topics:

1:00 P.M. First call of the roll. Announcements. Students Blogsites/ Critiques and Issues. Do’s and Don’ts so far. Corbis Login. Discuss extra-credit project.

2:15 p.m. Lecture and Tutorial

1. What is Photoshop? A discovery tour. DVD Beginner Basics and Demonstration

2. Learning Photoshop Interface Basics:- Menu Bar and Tool Bar- Palettes- Tool Palettes- Saving Workspaces- Image Window- Image Processing- Open/Browse

3. Understanding Image Essentials

4. Understanding Resolution Image (Raster Image)

5. Navigating Images

6. Color correction

7. Image Correction

8. Viewing Multiple Documents

9. Selection Tools and Techniques

3:00 p.m.- Break

3:15 p.m.- Roster (2nd call)

Studio Time:
Getting started with Project 02:

Photoshop Manipulation (Part I)

4:45 p.m.- Blogsite Updates- Data Management- Save your class work.- Recap and next class workload

5:00- Class resumes next Friday.

See the sample for your photoshop assignment.

These will be due at the end of class and will be turned in to the assignment drop box, as well as posted to the blog, so everyone can see it and comment on your ideas and process.

Also remember you will be presenting your 3 slides at the end of class a week from this coming Friday April 18.

Remember to have your blogs updated by end of day Thursday.

I need to see writings about writing your first blog or what you might want to use as your first Photoshop assignment. Please refer to your first assignment on writing blogs and to your syllabi. You will be graded on your blogs and your assignments.