Web Design Projects

blog

Each one of you needs to have 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:

got to https://www.blogger.com/start
create a new account by following the instructions
Once you have your account set up, select a template for your blog, and practice creating entries.
ANswer the questions I have given you from the reaDINGS
LINK THE BLOG TO YOUR TOC INDEX (SEE BELOW)


Table of Contents project

Instructions:

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.
This page will have a list of projects and exercises that we can click on to view your work.
Select the text here and paste it into your index page.
"Put" and click on your name in the course list to see the results. Link the different items in the list, and experiment on changing the look and placement of the text
See an interpretation here
STUDENT EXAMPLE: Stecklair
How to link up content to this TOC index

Create and save a new html doc called statement.html.
Paste your statement into it (if you don't have one ready go to http://www.lipsum.com/ , generate some dummy text and use that.
Select 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.
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.
Add a contact link
Create dummy links for the others until you have created the content
NOTE: You will probably want to create folders in your root folder for 'portfolio' 'flash' and 'final_project'



readings

READINGS WILL BE ASSIGNED THROUGHOUT THE COURSE. SOME HOMEWORK QUESTIONS WILL BE POSTED IN YOUR BLOG. OTHER READINGS WILL BE ADDRESSED IN GROUP PROJECTS.

http://jeffprentice.net/web1 trial of forum style homework reading postings



Portfolio

Create a site that can be used for self promotion and/or personal exploration of the web environment following the design guidelines/required elements. 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 sideways 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.



Basic flash

Create a single movie demonstrating

motion (acceleration, de-acceleration, proximity, contrast between fast and slow)
transparency (evocative use of overlapping...)
scale (huge versus tiny)
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 consider icon based navigation and not just "back" or "replay".
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.
EXAMPLE Please keep in mind that this is basic flash. You will be covering more advanced flash in another course.
The best use for this information is to create looping ads and banners for the commerce site.



Commerce I 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. Consider current species extinction rates and rainforest destruction combined with other ecological warning signs. There are a number of scenarios you will want to consider, 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



Zine

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



Book

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

Choose File > Publish Settings. Select the HTML tab.
Choose "Transparent" in the WMODE setting to make the Flash movie's background disappear in browsers which support this feature.
Publish the document.
Dreamweaver will insert the correct HTML code automatically.
In Dreamweaver, insert the Flash movie into an HTML page.
Select the Flash movie in the Design View.
In the Properties panel, choose Parameters.
For the Parameter, enter "wmode" (without quotes). For the Value, enter "transparent".
Save the document. The HTML page is complete.
The above steps were taken from this link
download preloader here
pageflip zipped