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

 

Your Home page URL:

The address to your web site is:

http://students.oneonta.edu/yourusername/

Your Projects Page:

The address to your projects page should be:

http://students.oneonta.edu/yourusername/projects.html

Objectives

Setting up for the entire semester
Understanding and utilizing Web Architecture
Server Root
Local Root
File Transfering between server and local machine
Organization

Complete these Assignments

Check the class calendar for dates and deadlines. The calendar link is on top of this page.

Basics

Complete and submit the following on the due day (beginning of class always):

You will create 5 total pages for this assignment:

1. One "fluid" or "liquid" page desgin.
   Include Lorem Ipsum text to fill the cells and use one image (the same one) in each design.
   Save this file as "liquid.html"
   
   
2. Convert the same design to conform to two different "target resolutions" and save them as two separate pages.
   Targer resolutions:
   1024 x 768
   800 x 600
   Save two files: 1024.html and 800.html
   
   
3. Create one page that contains two images as "thumbnails" and link them to
   a) an html page that contains a larger version of the image
   b) the larger version of the .jpg file
   Save this page as thumb.html
   
   
4. Create one page with an image tiled background and include two links: one" relative" link and one "absolute" link.
   Save this page as links.html

Link to each of the 5 pages from your "Projects Page".
You must use descriptive language for the anchor text, i.e. the link that takes visitors to the "fluid" page should be named "fluid".

Number each one of your links on your project page so you don't forget any of the requirements above.

Objectives

Creating pages
Organizing conent on the page
Screen Resolution and design
Image optimization for web
Page backgrounds
Linking

Some useful links:

Google Search: Background Tutorials
Web page mistakes: Not Designing for Most Common Screen Resolution

Social Commentary

Create an entire web site (5 pages minimum) dedicated to a social issue you choose from this list.

Your web site should demonstrate good awareness of the concepts at hand, and it should demonstrate technical understanding of the web as a medium.

Research the social issue and create a compeling presentation that would engage viewers with the layout, images, and text.

You may copy wikipedia text and royalty free images, but you may not use text or images that you do not have written permission to use.

Your site must have:

1. An external CSS file that controls formatting.
2. Images in the right formats and optimized
3. Efficient navigation between the pages with a navigation bar and a "home" link on every one.
4. Organized page content in DIV tags with absolute width of 950 px.
5. Image background
6. Buttons (images that become the links)
7. A logo/header on top (some good examples)

Your site should reflect understanding of all the things you learned in assignment 1:

1. Page size control
   Control both width of page and file size. Target a common resolution and adhere to it (1024 is best right now).
   
2. Font control
   Don't use fonts that won't appear on other computers
3. Image optimization
   Show control of file size, format, width and height
4. DIV control
   Control width, borders, background color, padding, and margins
5. Backgrounds
   

Objectives

Connecting pages into coherent web site
Concept development
Design consistency
CSS
Web page structure: DIV elements
Web page structure: Layout
Web site architecture: Navigation
Fonts
Web Graphics
Copyright

Note

Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements.

Read
"Why Minimalism is the most important design style to master"

Look at some of the sites included in the the following link and analyze them:

Design Inspiration | Vandelay Design Blog

Consider these questions as you look at the different designs:

• 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?

Example of a three-column layout. Look at the source and examine the styles in the <head> to see how each <div> was setup.

Templates

For this assignment you will finish 5 separate pages based on the design of one template as follows:

1. First use Photoshop
   Your template (the design to be used on every page) must be made in Photoshop using the "slicing" concept. Export the html and the images to your www directory in your "as3" folder.
2. Then use Dreamweaver
   In Dreamweaver, you should be able to further prepare your exported photoshop design (the html page Photoshop created for you) to receive content (text and images).
   1. Add "editable regions" and save the page as "Dreamweaver Templates"
   2. Process the backgrounds: convert the images inside the div boxes to backgrounds for the same div boxes where necessary, and especially in the boxes where you plan to fill with text and images.
   3. Add photographs and text (use Lorem Ipsum)
3. Upload your templates to your server and test to make sure everything works as it should . Don't forget to upload all the images and style sheets along with the html pages.

As you work on your design keep these requirements in mind:

For this assignment:

• Each of the individual html pages you create must be connected to a Dreamweaver "Template" and it must have"Editable Regions" where appropriate.
• Vary the text for each page. Use many paragraphs on one page, use less text on another, and perhaps more images on one, to simulate a real web site environment.

Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements.

Traditionally, this seems to be the most technically challenging assignment for the students in this class. Plan to finish everything at least one class before the critique so you have time to test and troubleshoot. Don't wait until last minute to finish your work.

Objectives

Template development
Template interaction with resulting pages
Efficiency/ Consistency/ Maintenance
Advanced web graphics

Take a look at the designs in this link and 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?

More resources:
25 tutorials from speckyboy.com
40 useful Photoshop Web Layout Tutorials

Professional "sales" or "information" web site.

Create three (3) templates using the concepts you learned in assignment 2 and 3.

Use these templates to create a web site that simulates real product sales, information services, or subscription services.

Each template needs to serve a specific function of the site.

For example, one template will be used for the home page, the second template needs to present a number of products the viewer can choose from. A third template should allow the viewer to see more details of a particular product (if they clicked on one from above).

Each of the last two templates need to have a button to either "buy now" or "subscribe now"

Study online shops you frequent and try to simulate their look and functionality.

Create a logo, images for the products, buttons, navigational bars etc.

Every pages must have an advertisement banner for a real or imaginary product or service. Choose an appropriate size from the common ad sizes, and account for it as you design your original layout for the templates.

Remember that your assignments are graded on how good the art/design is and not only on presenting the "required" elements.

Some live examples:
amazon.com - B&H - Nike - Levi's

Some design examples:
web templates

Objectives

SEO
Goal oriented Web Architecture and Design
Monetization and Design

Client Project

We will have a half-hour quick critique and we'll start work on the next assigment right away.

You will be paired up with another student with whom you will work for as a designer. Meet with your client and discuss what kind of website they would like you to produce.

After the initial meeting, plan, design, and execute a comprehensive web site that fulfills your client’s wishes. Present your work to your client on the due date and they will give you feedback for further changes.

In turn, you will be the client for your partner. Tell your designer what type of web site you would like them to make for you. Be sure to give constructive feedback and provide your designer with enough information to grasp your web site’s objective.

As a client, you get to set the parameters. On a piece of paper, write the following and give it to the designer:

• Name of site
• Target audience
• Target keywords
• Overall "feel" of the site you expect

As a client, you also get to evaluate the web site you have received in the end.

On a piece of paper, rate the web site you received (rate on a scale from 1 to 5, where 5 is "very satisfied). You will receive five extra points in your assignment grade for completing this report. The closer your evaluation comes to my evaluation, the more points you will get :

1. Overall design satisfaction
2. Craftsmanship competency
3. Ambition of the designer

Rules

The web site must have a minimum of three pages.

Personal problems and problems about "collaborative" issues reported to Thomás will result in a 10 point penalty for both partners in this exercise.

Objectives

• Learning about the Client/Designer relationship
• Producing a design that fulfills a client’s objectives, not just your own
• Work within client restrictions
• SEO
• Work corroboratively
• Critical thinking/analyzing

http://www.thedesigncubicle.com/2009/11/questions-to-ask-clients-before-designing-their-website/

http://freelanceswitch.com/finding/web-design-client-questionnaires/

http://theoatmeal.com/comics/design_hell

http://theoatmeal.com/comics/design_changes

Many thanks to Marie for contributing this assignment, and Mary for theoatmeal links :)

Personal Portfolio, a complete web site.

Plan, design, execute, and upload a comprehensive web site.

Place emphasis on a clean, mistake-free design, and try to find a creative way to deliver your message. Concentrate on creating a visually compelling design that frames your best work in a mutually beneficial way.

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.

Here are some examples of Graphic Design portfolio web sites