Design for the Internet

Gallery Syllabus Projects Calendar Resources

Exercises and Table of Contents Project

Instructions:

1. Create a page, index.html, that is saved in your ROOT FOLDER (a folder named with your last name, all lower case) that will be associated with your name in the course list.
2. This page will have a list of projects and exercises that we can click on to view your work throughout the semester.
3. We will add items as workshops are conducted and assignments are completed.
4. Completed STUDENT EXAMPLE: Stecklair

How to link up content to this TOC index

1. Create and save a new html doc called statement.html.
2. Paste your statement into it (if you don't have one ready go to lipsum.com/ , generate some dummy text and use that.
3. Type the text "statement" on the index page and in the properties window click on the folder that allows you to browse for the file you want to link to: statement.html.
4. Test the link by previewing in the browser. This is the basic way to link. Note how you have to hit the back button to go back to index. We will be talking about navigation.
5. Add a contact link mailto:youremail
6. this index page is yours - personalize it.

Readings

To be assigned throughout the course. We have used Site Seeing and Internet Art previously.

Blog

Each student creates a blog where you can enter your responses to the questions on the readings and homework. You may have a blog already at blogger, or at myspace or facebook. You will need to give us that link. If you don't have a blog, then do the following to create a blog at blogger.com:

1. Go to blogger.com
2. Create a new account by following the instructions. NEW: You will need to set up a google account first before setting up the blogger account.
3. Once you have your account set up, select a template for your blog, and practice creating entries.
4. Answer the questions I have given you from the readings
5. Link the blog to your TOC list. See TOC project, below.

Portfolio

Create a portfolio site following the design guidelines/required elements listed here.

We will be covering a number of topics, from background images and rounded table corners to cascading style sheets and drop down jump menus. It is up to you to experiment with the various elements, and develop your ideas on form and content, navigation, contemporary design standards and iconography.

Please note that for this project we want to maintain an high level of professionalism. No snapshots of friends and family, cute or jokey welcome messages, profanity.

Site checklist/required elements:

Page templates
Library elements (optional)
A CSS style sheet
Site ID
Location indicator
Primary navigation - and perhaps second and third levels navigation
Clickable thumbnails and pages that open using open browser window, window fever, or some other method you can discuss - lightbox?
Footer
Artist statement (new) this replaces the bio used previously
Contact infO

We will be looking for design and navigation consistency, display of craft and understanding of the program - tables AND LAYOUTS that don't shift, pages that fit in our browser window without scrolling ways AND down, text legibility - and spelling. These first sites don't have to be technological wonders, but they should be thoughtfully designed and carefully built. Be ready to discuss your design decisions.

Ideas for content:

YOUR ORIGINAL Professional/Commercial designS
Photographs
Illustrations
Multimedia
Stories
Bio
Other

Note: All web images have to be jpg or gif, 72 dpi, and around 600 x 800. You will also need thumbnail images. Look into actions and automation in Photoshop that create these in a single stroke. Look at the student gallery homepages for ideas. Collect resource and inspiration links. I have a large number on my site on the links and resources pages.

PRELIM presentation:

In order to iron out any nav or design issues we will want to see a printed and mounted version of your rough portfolio site ideas, navigation flow.

the standard mounting board, spray mount, color images, graphs etc can be used.

The objective here isnot just to get input from us, but to practice presenting your ideas to a group - something you will be doing in the work world.

Graded on apparent effort, presentation, comprehensiveness.

examples:

Jo-Allan Yuchongtian

Phil Blas

Natalie Wayte

May Ho

Flash I

Create a single movie demonstrating

1. motion (acceleration, de-acceleration, proximity, contrast between fast and slow)
2. transparency (evocative use of overlapping...)
3. scale (huge versus tiny)
4. text as a graphical element (illegible? morphed? combined? reversed?)

You should have one movie clip that loops at a stop command, and a replay button
please conr icon based navigation and not just "back" or "replay". EXAMPLE

Flash II

Create 4 movies demonstrating

1. motion (acceleration, de-acceleration, proximity, contrast between fast and slow)
2. transparency (evocative use of overlapping...)
3. scale (huge versus tiny)
4. text as a graphical element (illegible? morphed? combined? reversed?)

think of speed relationships, pauses, zips and zooms. emphasize relationships: equal, looming, dwarfed. reveal, hide, combine.
think of natural equivalents: swarms. flocks. parasites and giants.

Please keep in mind that this is basic flash. You will be covering more advanced flash in another course.

Commerce 2020

Create a commerce web site that sells a product that you imagine will be used in the year 2020. Be inventive. Stay away from products that already exist, or if you do use them, see that they are topical and presented in a future context. Analyze existing commerce pages online. Please donate links for us to visit in class.

The future has been described by people as diverse as O Wilson in The Future of Life, Neil Stephenson in Snowcrash. There will likely be a lot more people, and a greater discrepancy between individuals and countries. Conr current species extinction rates and rainforest destruction combined with other ecological warning signs. There are a number of scenarios you will want to conr, both positive and negative.

Products may address issues such as pollution, vacations ( see total recall) armor, guns, food (hydroponic gardening) fashion, radiation detectors...Come up with ideas and we will discuss them in class.

Required elements:

Header/main primary nav
Secondary nav
Global nav (contact, site id, privacy policy, copyright...)
Footer
Site id (see global nav)
Shopping cart (non functional)
Shipping or download info
Pages or popups for items
Flash elements such as banners.
Site map
Contact page
Search atomz
Third party Ads

How to start - ideas:
Create a table with a row on top for main header content - add 2 or 3 columns below for content, body, secondary nav. Experiment with tabs similar to apple and amazon. Collect images and text. For placeholder text use dummy text (lorem ipsum).

Analyze previous student work
Note on about or about us links: students tend to erroneously place product info under these links, when in fact the about link should be info about the company or the people at the company - go to hillmancurtis.com and read what he has under his about link.

Commerce II

Theme: globalization, community, current events, anti-consumerism

Create a site that sells a product or an idea. It can be for profit, or a non-profit. If you have an idea for something different - run it by me for approval.

adbusters
The World is Flat Tom Friedman
Snowcrash Neil Stephenson

Required elements:

Header/main primary nav
Secondary nav
Global nav (contact, site id, privacy policy, copyright...)
Footer
Site id (see global nav)
Shopping cart (non functional)(optional)
Shipping or download info
Pages or popups for items
Flash elements such as banners, ads, Third party Ads
Site map
Contact page

Search atomz How to start - ideas:Create a table with a row on top for main header content and primary nav- add 2 or 3 columns below for content, body, secondary nav. Experiment with tabs similar to apple and amazon. Collect images and text. For placeholder text use dummy text (lorem ipsum).Analyze previous student work, keeping in mind it was for a different type of site - but you can get an idea of the scale and scope of the site. Note on "about" or "about us" links: students tend to erroneously place product info under these links, when in fact the about link should be info about the company or the people at the company - go to hillmancurtis.com and read what he has under his about link. Example. Define and describe the site.DescriptionDescription. I went to Tecate recently and we stopped at an herb store that sold potions, saints, candles, and other paranormal spiritual paraphenalia. One of my companions bought some love potion and a love candle custom made for her by the proprietor, carved with her name, with specific instructions fo lighting and maintenance. My idea is to create an online enterprise that sells similar potions and concoctions, but the target audience will be international instead of local. This way I address three of the assignment requirements: Globalization: Through the internet my audience can be global - the flattening of the world as described by Friedman allows for unprecedented marketing opportunities.Community and current events: Many futurists write of markets for personal explorations of identity through things like personal trainers, dietiicians, and in this case, an expansion of personal understanding of multicultural beliefs. I also address the needs of Mexican expats, immigrants, both legal and illegal.

Examples of my images can be found here and the start of a website using them here Mission statement (to be placed on the home page, or in the primary or global navigation)Aristeo's Herbs, Icons, and Potions. Mission statement goes here. Google "how to write a mission statement". Here is the first link. Commercial sites to view: Target Ikea Readymademag Red Cross Peace Corp

Ezine

Create an ezine or graphic novel with at least 10 pages. Evaluation will consider layout, originality, navigation and overall effort and scale.

Example 1 my own ezine "Atlas/Junglelogic" and a flashed version more like the book project - But it provides an idea of how a zine could be presented Example 2 Pages from "Refuge" using the program Comic Life for layout

Currently the emphasis is on a flashed ezine, an electronic magazine or sketchbook type of experience like the ones you see in the student gallery under Stecklair, Grails, many others. Note how Stecklair uses the open browser window command to open a swf - interesting...someone should check and see whether this opens on a PC.

here is one I did last night - download the fla and we will walk thru it

FLA

SWF POPUP

Book Project

(see student work in gallery and below for examples)

How does the virtual environment differ from traditional non-digital experiences? How is an online book or other sequential form different than its physical counterpart?

Google the word "book". Go to the dictionary and thesaurus and read the definitions, looking for key words. Do the same for “hypertext”.

You need to put together a minimum of five html pages designed around this theme. Each page has to include some element of flash animation, either a slide show of images or a subtle detail, perhaps near the bottom or top of the page.

You should use stylesheets, templates and library elements. All pages MUST be titled for a passing grade.

Please, no scrapbooks or photo albums of family, friends, travel. If you went to China and want to create a digital experience using photographs from your trip, then include commentary and personal interpretation - take it a level above “my trip to China and where we went drinking” and make it more “What I learned and saw in China.”

One of the project objectives is to have you develop a greater sense of typographic style on the web. Try designing headers, footers, page elements in photoshop or illustrator.

Ideas for content include a poem broken up into five parts, a digital sketchbook, and exquisite corpse.
One of our technical objectives is to introduce the use of div tags/layers. Another is the placement of flash over html content. This will be covered in demonstrations in class.

This is our final assignment, and we are looking for a mastery of course material. It is also one of the more open-ended assignments in terms of content. Make something interesting.here is one by Muroshima that is a hybrid , another by Miclat , Mokhtari - note how the project is placed in the upper left corner to eliminate problems with centering layers. Here is a flashed book project by Samarkand

How to make a Flash movie with a transparent background that you can place over a table, using layers:In FLASH

1. Choose File > Publish Settings. Select the HTML tab.
2. Choose "Transparent" in the WMODE setting to make the Flash movie's background disappear in browsers which support this feature.
3. Publish the document.

Dreamweaver will insert the correct HTML code automatically.

1. In Dreamweaver, insert the Flash movie into an HTML page.
2. Select the Flash movie in the Design View.
3. In the Properties panel, choose Parameters.
4. For the Parameter, enter "wmode" (without quotes). For the Value, enter "transparent".
5. Save the document. The HTML page is complete.

The above steps were taken from this link
download preloader here
pageflip zipped

Final Projects

This is similar to an independent study, as it is open as to what shape it may take.

Stipulation - All web work needs to be done using CSS -

Content may include

• typography
• poetry, lyrics and music
• portfolio
• commerce sites
• another more robust ezine
• Information graphic projects
• collections of images
• web sites for second parties

see http://www.slanted.de/node/1361

for an excellent example of a design project completed with a walk outside and a camera.

My advice? Go to the student work on our web home page and look through the work that has been done.

We will have a preliminary presentation of the rough, layout, in class. Rather than a print piece as we did earlier for the portfolio, this will be projected, preferably in web format, linked up on the exercise page. The rough can be HTML, photoshop/illus images, omnigraffle screen shots, etc.

We need to see layout, images, color ideas, technical info such as use of flash.