WEB DESIGN
Web Design is
a course taught by Thomas
Sakoulas at the State
University of New York at Oneonta.This
site is designed as an auxiliary tool for the students participating in this
class.
Required: Purchase a portable Hard drive
Buy your own portable hard drive and save your work in it. You are responsible for your own work, so use your hard drive to back it up.
If you choose to ignore this requirement, remember: you are responsible for your own work.
Back up your work daily.
How to submit your work for grading
(Critiques)
In order to evaluate your work I need to be able to find it. Please make it easy by following these simple instructions:
- Create one simple html page that we'll call "Projects Page"
- The "Projects Page should contain a list of text links that take me to each completed
project you have finished. Please include your full name, and the semester on top of the page.
(Here is an example)
INCLUDE YOUR EMAIL ADDRESS ON THE TOP OF THIS "PROJECTS" PAGE
- Email me the URL to your "Projects Page" by the due date (the date is on your syllabus)
Click here to
email Thomás (only use this email to contact me. I don't monitor my other accounts as often)
Subject: CART206-01 (or 206-81) yourlastname
Body: your URL
- After you email me this URL in the beginning of the semester, there is no need to email me every time you finish a project. Simply add a link to this page an I can find it. I check this URL and your projects often throughtout the semester, and I grade your work after the due dates.
If your work is not linked from our Projects Page by the due date, it will be considered a "late" project.
Make sure the links on this page represent the assignments in numerical
order, and that are appropriately labeled.
Please TEST your pages to make sure that they are working properly
on a browser before submitting them. I use these links to grade your work.
A WORD ABOUT THE CRITIQUES
Critiques are a valuable part of the studio experience. Think of them as exams, and don't miss any critiques during the semester.
A critique is an oral presentation of your work.
Our critiques have several purposes. First, they allow you to gain experience with organizing and verbalizing your thoughts regarding your work. They also allow you to gather valuable feedback from your professor and your peers on how your work is perceived, and how it can be improved.
After each critique, I take the time to evaluate what I consider to be the finished projects and I assign a grade based on the quality of the work. What you say in the critique also gives me a good insight into your thought pattern. It is possible to devalue your work in my mind with a sloppy presentation, and it is possible that you can elevate the value of your work with a professional and methodic presentation.
Since critique time is finite and to ensure that each student gets a fair chance to present their project, we will start the critiques as soon as the class starts. This means you will not have time to work on your project during critique time, and it also means that I can't help you if you come up with last minute problems.
Please keep your presentation under five minutes. Prepare a written statement if this would help, and/or practice before the critique with a friend to ensure that your presentation is concise, precise, and efficient in delivering your message.
Reworked assignments
If you go back to improve an assignment after a critique, save the improved version in a different folder in your web structure. I need to see both the original and the improved assignment if you want me to re-evaluate it.
Re-working and improving old assignments is allowed throughout the semester. The deadline to submit all improved assignments is the beginning of the final critique
How to submit your work For the Final Critique
>>>>In addition to linking all your finished assignments from your "Projects" web page, burn your www directory
on a CD, label it with:
Year, Semester, Class, your name, assignment
numbers contained, and submit it on the due date.
Submit this CD with the entire semester's work after the critique.
|
Assignments:
| # |
Check the class calendar (on the back of your syllabus) for dates and deadlines |
| |
Required Set up:
Create
server space and submit URL
Setting up your local site:
In your portable hard drive create a folder and name it www
Setting up Dreamweaver:
Perform the following actions every time you sit on a computer
for the first time. Open Dreamweaver
Site > New Site (or "Edit Site" if you already have one created)
Select "Advanced" (on top)
Select "Local Info" and fill it the form like
this. Click "Remote Info" and set it up like
this (replace "maasjr23" with your own user name)
Your URL:
http://students.oneonta.edu/yourusername/
Your Projects Page:
http://students.oneonta.edu/yourusername/yourlastname-as.html
You email this page to your professor so he can grade your assignments .
email to:
sakoult@oneonta.edu
subject: CART206-01 yourlastname
body: your assignments page (http://students.oneonta.edu/yourusername/yourlastname-as.html)
|
| |
Complete these Assignments
Check the class calendar for dates and deadlines. The calendar was distributed with the syllabus you received the first day of classes. |
| 1 |
Social Commentary
Create an entire web site dedicated to a social issue you care about.
Your web site should demonstrate good awareness of the concepts at hand, and
it should demonstrate technical understanding of the web as a medium.
Your site must have:
- An external CSS file that controls formatting.
- Images in the right formats and optimized
- Efficient navigation between the pages
- Organized page content in invisible tables
- Image background on at least one page
- Efficient navigation between pages
- Buttons
- A logo on top
Your site should reflect understanding of:
- Page size control
Control both
width of page and file size. Target a common resolution and adhere to it.
- Font control
Don't use fonts that won't appear on other computers
- Image optimization
Show control of file size, format, width and height
- Table control
Control width, cells, borders, formatting, padding, and cell spacing
- Backgrounds
Control tilling and interaction with the other page elements (tables, text, and images)
Your site must be
Creative, visually exciting, and innovative
Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements.
Look at the following sites and analyze them. Consider these questions:
- What makes them appealing?
- Do the pages appear to be part of the same site?
- How does the visual style reflect the content?
- How do the visual elements (fonts, backgrounds, color schemes,
banners) enhance the unity of the pages?
- How are they organized in terms of navigation?
Eystorm
thetruth.com
a
pinch of salt
Whitney
Museum
Google Search: Background
Tutorials
|
| 2 |
Templates
For this assignment you will finish 5 separate design templates as follows:
- Use Photoshop
Your templates must be made in photoshop using the "slicing" concept. Export the html and the images to your www directory (you should make a separate folder just to save these pages in).
- Use Dreamweaver
In Dreamweaver, you should be able to further prepare exported pages to receive content.
- Add "editable regions" and save them as "Dreamweaver Templates"
- Process the backgrounds
- Add photographs
- Add at least five paragraphs of text (use Lorem Ipsum as text holder)
- Upload your templates to your server and test to make sure everything works as it should .
As you work on your design keep these requirements in mind:
Your design must be able to accommodate:
- Text that's different for each page which will be based on the template.
- An advertisement banner 468 x 60
- At least one image that's different for each page which will be based on the template
- Footer with contact and other auxiliary information
Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements.
Take a look at the designs in this link.
Do you relate to any of them? If yes, what makes them interesting (composition, color, image/space utilization, lines, typeface). Can you use some of the same elements in your design without copying? Can you create competent designs without resorting to animation or scripting tricks? |
| 3 |
Animation that Illustrates a Process
In this assignment you will work with Flash and Dreamweaver to do the following:
- Create one original flash movie that illustrates a process
- Export the movie as a SWF file
- Embed the SWF file in an html page
- Upload the finished page and animation to your server
Your animation should contain movement, defined steps, and interactivity in the form of "Goto" and "GetURL" actions.
Create a small flash animation that illustrates a process in several
steps.
You choose the process you would like to illustrate. This could be a continuous movie, or a step by step explanation of the process.
Here is a nice little example of Kayaking instructions
A few good rules: please, no violent cartoon humor, and no stick figures.
If you are new to Flash, you might want to get more familiar with the software. Flash is a complex application and has a steep learning curve. Most beginners confuse themselves by not focusing on what's essential.
For this assignment allocate the considerable amount of time to do the following:
Open Flash and click Help.
Read the following
- Using Flash
- Workspace
- Creating and managing documents
- Using Imported Artwork
- Drawing
- Working with graphic objects
- Using symbols, instances, and libraries
- Creating animation
- Publishing Flash content
- Publishing Flash documents
- Exporting from Flash
- Exporting Flash content, images, and video
- Best practices
Pay particular attention to the layout, the color combinations, and generally the composition of your animation.
It takes a long time to create competent drawings in Flash. Take the time to make sure your drawings are worthy of an advanced art student like you.
A few good rules: please, no violent cartoon humor, and no stick figures.
Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements. |
| 4 |
Professional "sales" or "information" web site.
For this assignment you will create:
- 10 web pages that simulate a professional site that is designed to sell products or to provide professional services or information.
- 5 banners that advertise an imaginary product (jpg, or flash)
Use one or two of the templates you created in assignment 2 to create an entire web site that contains 10 pages.
Every page of the site must be based on the same template you chose.
Every page must contain:
- One banner 468x60 of your own creation (simmulate advertising something similar to the content or something completely different).
- At least one image that illustrates either a product or an idea
- Text in varying lentghts (use Lorem Ipsum). Some pages should have one paragraph, others up to five.
Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements. |
| 5 |
Personal Narratives, a complete web site.
Plan, design, execute, and upload a comprehensive web site.
This is site could be either a self-portrait, or it could focus around a single
event that has defined you as a person.
Place emphasis on a clean, mistake-free design, and try to find a creative way to deliver your narrative. Remember that just because it is YOUR story, does not mean that anyone else will find it interesting. The form must do justice to your idea.
During the final critique your entire site must be in perfect shape, and available
for viewing. If during the critique your site is unavailable you are responsible
for it. Make a CD back-up and have it handy just in case the server that hosts
your pages is down.
All work must be original, the entire site must be technically immaculate,
and all pages must be live on your web server.
This is your final assignment. Present it during the final critique.
Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements. |
| |
Final Critique:
Check your class calendar for the date and time
- Present the final Assignment
- Submit a CD with ALL the assignments
- Update "yourlastname-as.html" file to include the final
assignment.
Note: The work on the CD you submit will not be returned. Label your CD as indicated at the top of this page under "For the Final Critique"
Another Note: Your work will be graded from the "yourlastname-as.html"
file. Make sure all links work and that your site is up for at least two days after the final critique. |
|
|
|
