ADD 345 DIGITAL DESIGN | FALL 2011

315 445 0649 (h) | 315 480 1718 (m) | tonitoland (skype)

toni@tatoland.com

Office Hours: skype or email, weekly Connect sessions (TBA)

WELCOME!! This should be a fun, and challenging, semester...

I love working with interactive media, and created my first websites (paid jobs!) in 1996. I was working with Flash before Macromedia purchased it (then called Future Splash Animator), and all the sites were developed using straight HTML code-none of this sissy WISIWIG stuff we have now ;-)

The purpose of this course is to introduce you to the other half of the Adobe CS suite of software-t he pieces that create interactive communications, whether for advertising banners on the web, or a whole site design for a client. You should have at least a cursory knowledge of how sites are put together since any full-range media plan will include a web presence of some sort.

Eventually (not this semester), you will use these skills to create a website for yourself; it's one of the best ways to get your work out there, it's very economical in the long run, and it should demonstrate your skills as both a print and multimedia designer/developer. Consider investing in a domain and hosting plan of your own now, so it's ready when you need it. If you choose to use the SU server for the site you develop this semester, be prepared for serious frustration and heartache (trust me - or ask any Ad Design senior).

COURSE DESCRIPTION

This course is your opportunity to develop the skills needed to design and implement a web site. We will focus on using the web as an additional (visual) communication media, appropriate for advertising and marketing activities, an information resource, and maintaining a strong brand presence for a product, company, non-profit organization, or service.

LEARNING OBJECTIVES

By the end of this semester, you should be able to:

  1. recognize that the internet can be used as part of an integrated marketing plan
  2. demonstrate how the internet works from a developer’s point of view
  3. utilize the appropriate tools to construct a comprehensive, functional website
  4. use Flash to develop an animated sequence (either “cartoon” or in terms of presentation of content)
  5. design and implement a functional navigation menu using Fireworks
  6. create disjoint rollover effects using Fireworks
  7. optimize photographs using Photoshop or Fireworks
  8. develop graphics using Fireworks or Illustrator
  9. successfully launch a functional website (go live, online) by the end of the semester

 

REQUIRED MATERIALS

CLASS FORMAT

This is an asynchronous, online class. That means you "go to class" when you can each week. Log in to http://blackboard.syr.edu, and you'll see this course listed under the "courses I'm registered in" area.

Click on ADD345 to enter.

Because of time zone differences (some of you may be in Italy, some in England, and some here in the States) there's no way to expect you be online at any specific point in time. However, you are required to log in to class at least 3 times each week, post your thoughts to the discussion forum, and poke around to see what's new. I will be tracking your class participation as a means for ensuring you're active and to "take attendance" as it were.

You'll be working independently most of the time, and with a course that's pretty technical, that can be very challenging. I will be available via Skype-tonitoland-for messaging only. If you need to hear my voice, send me a message and we can meet in an online Connect session.

I also urge you to buddy up with someone (or two or three) to physically study/work together. In a situation such as this, it's very beneficial to have real-time peer-to-peer interaction.

You will have a small exercise due each week, designed to reflect your mastery of the course content covered that week, as well as an assignment geared towards completing the website you'll develop. All assignments are due at 11:59pm Sundays EST (New York time). Those of you dealing with a time zone difference, make whatever adjustments are necessary to meet this deadline.

You will also be working on a large-scale website due at the end of the semester. There will be some weeks when you will have to turn in your progress to date, and there will also be several opportunities for you to critique your peers' work.

GENERAL RULES

Obviously, there are no classroom rules for this course (aside from being sensitive to how you communicate online-more on that shortly) however, you definitely want to set aside at least 8 hours of time each week to work.

Here's why: this class is HARD. As design majors, you are going to have to learn at least two different CODE languages. Depending on your interests and skill set, this might be easy for you, but chances are it is going to be more challenging than other studio classes you've taken.

There is no text for this course. There are a lot of good third party books, however. And, the web is a great place to find tutorials on how to do specific things, especially if they are not covered in class (although I suggest you do not use youtube, as the quality of instruction in those is sometimes questionable, except for the tutorials I post, of course). Be resourceful!

CONTACT

I will be online using Skype from time to time to touch base with you-or rather, so you can touch base with me. My contact name is tonitoland. Please send me a message if you are having problems. Just let me know who you are since most screen names are always unique and often obscure. I will never contact you first, as I respect your privacy, unless it's urgent. I will also set up times to work with you remotely using Adobe Connect Pro, where I can demonstrate processes (share my screen) and answer questions in real time. It's awesome and if you ever need some one-on-one instruction, don't hesitate to ask!

If you need to email me for any reason (and please, feel free to contact me this way ANYTIME!) make sure the subject of your email is "ADD 345" so it doesn't get tossed into my junk folder for some reason. Address all email to toni@tatoland.com. Or, feel free to phone (315 445 0649).

ATTENDANCE

It is critical that you participate class each week. There are no "excused" absences. If you don't participate at least 3 times each week, you will be counted as absent. Three or more absences will result in you earning an "F" for this course.

I also have to caution you that having your computer blow up is not an "excuse" for not attending class. There are public clusters and internet cafes available in all the foreign countries I've visited (England, Italy, Spain, and Mexico) and I've had students who were stationed in Iraq and Iran (living in tents in some cases) participate quite successfully.

ONLINE ETIQUETTE

A majority of online class time is spent posting opinions and sharing information. Therefore, it is of utmost importance to communicate with courtesy and professionalism. Professional courtesy includes respecting others' opinions, and working together in the spirit of cooperation. Sexist, heterosexist, and racist language will not be tolerated, along with any religious proselytizing. While linking to outside websites can be beneficial to bring in outside research and content relevant to the topic at hand, please refrain from linking to personal websites (including twitter, myspace and facebook) unless an assignment specifically requires it.

The same guidelines for professional communication in the classroom apply to content that you reference in a discussion or assignment. Please make sure that all content that is brought into the online classroom is professional in nature. If you link to material that is non-professional, derogatory, pornographic, or promotes personal opinion (such as a political or religious agenda) the link will be deleted. Out of respect for our diverse population, religion, politics and other controversial topics should be avoided. Online discussions and assignments will be graded on quality, professionalism, and maintaining focus on the discussion topics at hand.

To be eligible for full credit in the discussion assignments each week, you should respond to the original question by Tuesday of the current week and post an additional two responses by Saturday at midnight (eastern). To ensure the integrity of discussions, you are not allowed to post all 3 responses on one day.

The purpose of the weekly discussions is to solicit feedback from others in the course as well as to respond to other students. Posting several times throughout the week will provide a richer and more rewarding educational experience for everyone.

The best posts:

ACADEMIC INTEGRITY

The academic community requires ethical behavior from all of its participants.

For designers, this means that the work you claim as yours must be conceived and developed by you alone.

You are not always expected to come up with new ideas; your thinking may build on the ideas of others. You are expected, therefore, to credit contributions from other sources and to clearly indicate the scope of your own contributions to the design solution. Failure to do so will result in serious consequences, including failing the project, failing the class, or being dismissed from the program.

Academic Integrity is not simply about plagiarism as it relates to written papers. Using objects, materials, and concepts created by another without attribution will also result in consequences.

Using Internet resources can be especially dangerous as it can blur the distinction between one's own work and plagiarism. If a web site is referenced in a project, it must be a verified site, and appropriately cited.

Damaging, manipulating, moving, or deleting another student's work is also an academic integrity violation. Please be very careful in this respect.

When working collaboratively, be honest and clear in your presentation as to which role you played in the final solution.

If you have any questions about a project see me; I may be able to help you use the work in a legal, ethical, and appropriate way.

Details regarding the Syracuse University academic integrity policy, and examples of how it may be violated, can be found in the Syracuse University Student Handbooks; or, online at: http://students.syr.edu/handbook/

INCOMPLETE POLICY

University policy states: The grade of Incomplete is reserved for exceptional circumstances that prevent a student from completing coursework by the time that grades must be submitted.

ACADEMIC ACCOMMODATIONS FOR STUDENTS WITH DISABILITES

Students who are in need of disability-related academic accommodations must register with the Office of Disability Services (ODS), 804 University Avenue, Room 309, 315-443-4498. Students with authorized disability-related accommodations should provide a current Accommodation Authorization Letter from ODS to me and review those accommodations with me no later than February 1. Accommodations, such as deadline extensions, or extra time for quizzes, are not provided retroactively, so plan for accommodations as early as possible.

ASSIGNMENTS

The objective for this semester is for you to develop a functional website about a topic that interests you.

Your site must:


You may NOT create a portfolio-based site for yourself.

Your site may NOT be created totally in Flash.

It's extremely important to understand that although possible, and even sexy, to build a site that's entirely done with Flash, the purpose of this course is to engage your creativity in a way that utilizes all the tools we'll play with this semester. Save the grand idea for next semester/year if/when you have an opportunity to create a portfolio site for yourself. If you are a senior and graduating in May, you may certainly design a portfolio site, but in addition to the course work, not in place of it.

If your site is not uploaded and fully functioning by exam week you will fail this course. No exceptions. Back up your work frequently. If you have not backed your work up, and your computer crashes, you are out of luck. While I will sympathize with you, I will not grant any extensions. Forewarned is forearmed. This is simply professional practice.
There will also be weekly exercises or assignments that you have to post to your webspace. See the Assignments tab in Blackboard.

GRADING

I will be looking for several things in your weekly assignments and the site design and development, including:

Originality: don't just mimic the example files. Use the weekly assignments as an opportunity to stretch your design vocabulary and your imagination while meeting the project objectives.

Design: look and feel are professionally developed with a sensitivity to fundamental design principles and communications objectives.

Continuity and navigation: consistent look throughout the site, easy to navigate in a non-linear fashion, appropriate sub-navigation as necessary.

Appropriate and necessary elements as specified in each assignment. For the final site: title, banner/logo, content area, sidebar (optional), footer.

Flash content for the final site: 10-20 second piece that flows well and employs appropriate animation techniques, based on content and intent. Small SWF size.

Fireworks content for the final site (optional): well designed and executed navigation, use and appropriateness of disjoint rollovers, and any other Fireworks content.

Image quality for all projects: appropriate optimization, no pixelation, no distortion.

Content for all projects: interesting, well written (no grammatical errors or typos), and accurate. Well-chosen images, that enhance the written material. Appropriate citations for any materials (text and/or images) that are not original.

THE WORK

There are several tasks you will need to complete throughout the semester. At the same time, you will need to be working on your site. In many cases, the tasks you need to do can be actual pieces you will use in your site. Others will be exercises that will teach you skills and processes that you might decide to use in your site, or save for reference for another site design.

Following are the basic steps you need to complete to develop your site. You will be required to upload works in progress from time to time during the course of the semester, so that there will be no excuse for not completing the major project (your site, uploaded and functional) on time.

OPTIONAL (at my discretion)

Quizzes at random, based on course lectures, demos and exercises.

WEEK 1 | August 29 - September 4

Pick a topic about which you are passionate. It won't be much fun to work on something you don't enjoy. It can be about a hobby or pastime, or something for your aunt's yarn shop or art gallery, something about a social organization (fraternity, club, team), or an historical look at your hometown. Just make sure that there is enough content to fill 10 pages, and that you love the topic.

Start working on thumbnail/roughs for your basic page design; remember that websites are generally horizontal, not vertical.

WEEK 2 | September 5 - 11

Create a grid in Illustrator or InDesign; this will serve as the foundation for the final site, which will be created using Dreamweaver. The pieces you should include are:

WEEK 3 | September 12 - 18

On new layers Illustrator or InDesign, create a layout for each "page" in the site. Use this to work out design decisions such as where the navigation will go, what it will look like, the banner or header graphics, content area (text and images), sidebar position and look, and footer information.

You can use lorem ipsum text and image placeholders without content, but determining position and size is critical at this point.

Save your site layout pages as PDFs to share with me and your classmates.

Create a site plan on paper (see example in the Dreamweaver lectures). Print it and keep it with your other class materials. Revise as necessary, refer to it a lot.

Create a checklist of the elements you are going to need; print it and keep it with your other class materials.

Change your mind about your topic or design now or never. This is your last opportunity.

WEEK 4 | September 19 - 25

Create the root folder for your site and organize it (on an iPod, flash drive, external drive, or laptop). Burning CD's for this project will not work, nor will trying to work off a server.

NOTE: Back up your work every time you finish for the day. Keep all your files within a single folder; do not transfer files from an external drive to a hard drive – work from the external drive only. Transferring files will absolutely mess you up.

Begin creating or finding/collecting all the images you are going to need. Use Photoshop to create/manipulate PSD images for use in your AI or INDD layout (150 ppi resolution). Later, you will optimize them as JPG, GIF, or PNG files for your actual site.

Create or find/collect all the text you will need; if you "borrow" the text, you must cite your source(s)! (Keep notes!)

Purchase a domain and set up a hosting plan, or set up your mysite.syr.edu account. Make sure it's functional, sooner, rather than later.

WEEK 5 | September 26 - October 2

Based on your site design, develop the banner/logo and other non-interactive graphics that will create the overall look of the site. (Photoshop, Illustrator or Fireworks—Fireworks has more options). Save it as a PNG file, and place it into your site layout file (AI or INDD).

Design and develop the primary navigation system (Fireworks is best). Save it as a PNG file, and place it into your site layout file (AI or INDD).

WEEK 6 | October 3 - 9

Create a storyboard for the Flash animation; include at least 12 image frames for content, and add text to each that explains the animation. Include text to describe any narration, dialog, sfx, and/or music that will be included.

Place all images into your site layout file (AI or INDD). Label each image with its file name (i.e. "sunflower.psd")

Place all text into your site layout file (AI or INDD).

NOTE: These AI/INDD files are planning documents; the final site contents will be created in Photoshop, Fireworks, and Flash, and then assembled in Dreamweaver.

WEEK 7 | October 10 - 16

Optimize your images (Photoshop or Fireworks). Save as PNGs, or JPGs.

Optimize and export the banner/logo and graphics. Save as PNGs, JPGs, or GIFs.

Optimize and export the primary navigation system. This will require multiple files. Make sure you save the images in a separate folder.

WEEK 8 | October 17 - 23

Define your site in Dreamweaver; test your connection and resolve any problems.

Create a template in Dreamweaver; place the graphics and navigation that will be consistent throughout, as well as content area(s) (editable).

Develop the CSS file that will control positioning of elements and look of content. CSSs dictate the color of your text, positioning of elements, and a variety of other formatting issues that can be applied to all pages in your site to create visual consistency and accurate HTML coding.

WEEK 9 | October 24 - 30

Catch up! Make sure everything you should have done by this date is done, and working correctly!

WEEK 10 | October 31 - November 6

Start working on Flash animation.

WEEK 11 | November 7 - 13

Continue Flash animation, and catch up on missing pieces.

Create your main page in Dreamweaver (index.html).

Create the other 9 pages in Dreamweaver, using the template you made previously.

Test everything as you go along in at least 2 browsers.

WEEK 12-14 | November 14 - December 4

Finish all your pages and upload the site to the server. Please be aware that this is a critical step and 2 weeks is not necessarily enough time to do it. If you wait any longer, you will be in serious trouble. Trust me.

Test the site in Safari, Firefox, and Internet Explorer.

Fix errors and upload revised files.

EXAM WEEK | December 12

Email me your URL for grading purposes (toni@tatoland.com) by 11:59pm (EST), Sunday, May 8, 2011, and upload it in a Word document in the final site upload area. If I do not get your URL, you will fail the class. If your site is not working, you will fail. If it has any functionality or design issues, you will not earn an A.