Design for the Internet

Gallery Syllabus Projects Calendar Resources

Due dates

Feb 7th Portfolio rough & exercises I

Feb 26 Portfolio Due & Exercises II

March 6 Flash speed, scale

March 13 Flash Transparency and text

March 20th Slideshow

Aprl 10th E Zine

May 9th Final Project

Please note that dates may change, and assignments added or altered as needed

WEEK ONE 1/22 - 24

NOTE: this schedule is subject to changes

Introduction, Syllabus

Note

1. For those advanced students who already have an understanding of the basics use this time to develop your skills in flash, video, audio, overall design and art making, and CSS - see Zen Garden to see the potential in using CSS, as well as Sifr and Hislide and Lightbox...
2. We traditionally started with tables in this course, although with the new version of Dreamweaver and the ease of using css we will reconr this. Do a google search for "tables versus css" to understand the difference.

For thurs:

• Get set up at home with a copy of Dreamweaver and Flash. Get the CREATIVE SUITE if you can afford it. If you need to download a 30 day trial version go to Adobe
• Go thru DW Tutorials on your own time either from a text or online or as a last resort in the help section of Dreamweaver. We will go over basic working environment, but the more familiar you are with the program on your own, the better. Spend time with the program, make test pages and save them as test 1 test 2 test 3 etc. Try placing text and images in DW pages and saving them in this folder.
• Go into photoshop or illustrator and create some roughs of your dream/imagined/desired web page design that we can cut up and place in tables - start with a cavas 750 pixels wide, as long/tall as you like - go to http://www.dailyslurp.com/  http://www.designmeltdown.com/ for ideas - just stay away from flashed sites.
• Create a folder on your computer. Name it with your last name. This will be your home/site folder where your index page will re. Put all of you work here.
• gather together any art or design work you have done - get it scanned and ready for the portfolio project

1/24

Warm up...

Review Student Index Page TOC ASSIGNMENT

Review Portfolio assignment - but this is just for reference at this time

 

Workshop objectives:

1. create an index page (from a css template?)
2. create links from websites (external)
3. create links to other pages (internal)
4. create an artist statement page and link to it
5. create a thumbnail and link to a larger image

DWEAVER Basic Workspace

Preferences: SET THE DW PREFS TO DISMOUNT AFTER 15 MINUTES.

NOTE: YOU CAN ALSO USE FETCH OR APPLE AFP TO CONNECT AND TRANSFER FILES

insert and property windows
FILE
new from HTML or self created template...OR premade Templates
Preview in Browser - setup for explorer and safari
File save, and save as template
VIEW
code, design, and code AND design (view the code for your first page)
INSERT
MODIFY
Page properties Links (Rollovers -will ultimately be in style sheet) Margins,
TEXT (see properties window)
COMMANDS Add scrubber extension (studio VII)
SITE
WINDOW - open BEHAVIORS

Setting up a local site:
Create a folder in "Save till Friday" using your last name to name the folder.
Go to SITE on the menu bar in Dreamweaver
MANAGE SITES
NEW - name it with your last name. Make your folder the ROOT Folder. When you leave MANAGE SITES you will create an index page. Go back into MANAGE SITES and under SITE LAYOUT browse and select your index page. Dreamweaver now knows how to organize your site, starting with your index page.

HOW TO SET UP YOUR SITE: FTP, PASSWORD, USERNAME.

(see SDSU server policies policies

• ftp host:design.sdsu.edu
• host directory: yourlastnamegoeshere
• login: pre344a
• password: see me in class for this

TEST, AND CLOSE WINDOW.

F8 will display your files. Click on the EXPAND FILES VIEW icon (the rightmost icon below) to see both remote and local files. It should look something like this:

SITE DEF 3 Now you can create files, save them, and PUT and GET them.

When you go home, go thru the same procedure described above.

Once you connect with the server, you can "GET" your files you created in the lab and continue working on them.

• Create AN INDEX PAGE WITH YOUR ASSIGNMENT LIST and "put" IT (MASTER PROJECT LIST)
• CHECK IT AT prentice/ WHEN YOU CLICK ON YOUR NAME YOU SHOULD SEE YOUR INDEX PAGE
• LINK TO A DUMMY STATEMENT
• LINK TO YOUR BLOG

note: mac users - you can also connect using AFP

• go to connect to server
• server "design.sdsu.edu"
• login with your password
• go to 'prentice' and you will see your folder
• drag it to the desktop (do not work directly off the server)
• work off of it as your local folder
• when done, drag back to 'prentice'

PREPPING IMAGES - EXAMPLE

• CREATE A NEW FILE (2 COL FIXED?) AND SAVE AS PORTFOLIO
• IN PHOTOSHOP CREATE A HEADER THAT IS 750 PIXELS ACROSS AND PLACE IT IN THE TOP ROW OF THE LAYOUT
• CREATE A THUMB AND CORRESPONDING LARGER IMAGE IN PHOTOSHOP
• PLACE THE THUMB IN THE MAIN CONTENT AREA
• LINK THE THUMB TO THE LARGER IMAGE

Homework WEEK 1

1. Start working on your Artist/designer statement that will be on your portfolio assignment ( see Aitken's for a very robust example of this, not what you would be writing, but worth viewing, and an older one of mine) AND SOME OF THE STUDENT STATEMENTS ON MY WEBSITE
2. Review previous student work from this course
3. Prereq proof
4. Start thinking about and creating layouts for a general design direction for portfolio assignment: Create Logo, pick fonts, color scheme, write bio
5. Get set up at home with Dweaver and Flash, other things you need
6. Collect and prep portfolio contents. The sooner you can get this together - the sooner you can finish the general layout THE BETTER.
7. Jump ahead to 1/29 and start looking at some websites, laying out your own

WEEK TWO 1/29 -31

do you have your statement posted on your index page?

prereqs?

did you review the previous student work?

did you do some prelim layouts?

get your software?

prep your port contents?

 

Workshop objectives:

1. review layout strategies
2. review page elements
3. build a basic css layout
4. edit styles and style sheets

layout strategies

So what are people using for web layouts? What do they look like? How do you make them?

Remember - we will all make standard header/column layouts to start - once you learn the basic grammar and ABCs of layout you can bend and break the rules.

Go to the following sites and check them out - some of these are from designmeltdown, dailyslurp.com
http://web2.0news.be/ http://pixelghetto.com/ header with 2 col, primary nav, logo, scaled text
HillmanCurtis Top NY designer. later try creating a bg element and place it with no-repeat - also create thumbs like his.
Apple Study their design and nav. later create a roll over.
Philip Greenspun old school quirky, but the nav is a great example of 'breadcrumbs'
Adobe
linkdup.com the best of web motion graphics weekly. header with 3 col layout
http://www.thefwa.com/
http://www.processing.org/ later create an html based nav, versus rollover images

There are many others in various categories - please review, dissect, analyze them - and emulate in order to understand the range of possibilities in web layout

Style guides, trends, web 2.0, tips and resources

webdesignfromscratch.com/ go to Graphic Design and look at basics, layout...
web-2.0 definition - find out more about this term - what IS web 2.0?
web-20-logos.cfm

You can also get inspiration and templates from places like elated.com/pagekits/

basic page elements

• site id
• location indicator (you are here)
• primary navigation (secondary navigation will come later)
• global elements (contact, search)

these things are placed in boxes called div tags (content boxes defined by CSS) usually called something like

• header
• footer
• main content
• right box
• left box

images (gif,jpg, png) can be used for

• site id
• button rollovers
• div bgs
• page bgs
• thumbnails that open larger images

images and content can be opened in

• self (the same window, making the user navigate back to the link)
• blank (a new window)
• pop up window (open picture window fever extension)
• new fitted browswer window
• lightbox

Build a basic layout

the best way to get started is to create a skeleton page (site) and build and design on the framework

first - cover prepping images in photoshop

open a graphic and resize it to fit the header (and it can 'fill' the header as well)Create a test thumb with a larger image cover GIFs JPGs and PNGs Plus Resolution and Save for Web

• create a page that has the basic elements like site id, divs for content, navigation (don't worry about rollovers, logos yet - they can be added later)
• put a location indicator on it called 'home' for your reference
• create primary nav links at top for graphic design, photography, about etc and link them to pages that don't exist yet using the names below(you will do that next)
• play with the CSS and change background color, sizes of divs, create new divs.

save it as portindex.html

options

change the loc indicator to graphic design and save as gd.html

change the loc indicator to photography and save as photo.html

test the site - preview in browser

you should be able to navigate from page to page with a consistent interface.

now you can focus on developing the pages -

adding a logo for site id to each page

creating rollovers for nav

adding thumbs with linked images to each page

some of this will involve adding things to each page, like a site id logo - this is a bit of overhead. As you get more experience you will learn to create a template and library elements that will make the process more modular.

again - this is a skeleton. We will cover buttons, rollovers, swap image commands etc in the coming days. But the important thing is to get the content in place. We an change the look and add and edit as we learn.

For thurs

have a link to a rough layout of your portfolio homepage that also links to the skeleton pages

a contact link

a link to a rough of your artist statement

email me with any questions

1/31

LAB activities

1. work on your index page - have your name, a working contact link, link to statement, and a link to the skeleton site we did tuesday, and a link to a rough of the portfolio page you are experimenting with. HEre is my example
2. check out this link http://www.alistapart.com/
3. We should cover changing div tag attributes, divs for thumbs, and clearboth tags so you can get going on your thumbs - copy the thumb classes and clearboth from my stylesheet at http://jeffprentice.net/box.css
4. presentation requirements and suggestions see this image - we can talk in class about resolution (150 dpi) Size (11 x 17) and flow chart iconography - this is from LEigh's course "

The prints are $.04/square inch. I have an generic example that I use for my class to illustrate the principles I expect them to incorporate into a flowchart, where the spheres might be screened-back illustrations or imagery indicative of their site designs. The text could be any form of brief explanation of navigation or design concept. Etc. Some would be far more complex than this; this is for basic illustration purposes only.

Hope this is helpful. I also think that you should give them a standardized size of 11 x 17 for paper size because it is too hard to fit it all on Letter sized paper and have it be seen in a crit. I would just make sure that your board requirements are ones that fit in a standard portfolio.

WEEK 3 2/5 - 7

There are things we need to cover in CSS - so let's edit styles and divs and place them on our TOC.

1. Do file new 2 col with header and footer. save this as "css examples" and at the end of this workshop link to it from the TOC. We will practice putting in different sized, outlined boxes - similar to the ones on my teaching site
2. CHange the h tags, background colors, outlines. TRy dotted, dashed, solid. Go to http://www.alistapart.com/ and look at their line styles. HEre is the CSS for the h tags - paste this into the head of the doc but edit it to look the way YOU want it-
   h1 {
   font-size: 18px;
   color: #FF6600;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   text-transform: lowercase;
   margin-top: 15px;
   margin-right: 0px;
   margin-bottom: 15px;
   margin-left: 0px;
   letter-spacing: 0.1em;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-color: #FF9900;
   border-right-color: #FF9900;
   border-bottom-color: #FF9900;
   border-left-color: #FF9900;
   border-right-style: none;
   text-align: left;
   padding-top: 5px;
   padding-right: 0px;
   padding-bottom: 5px;
   padding-left: 0px;
   }
   h2 {
   font-size: 14px;
   font-family: Arial, Helvetica, sans-serif;
   text-transform: lowercase;
   color: #FF9900;
   margin-top: 15px;
   margin-right: 0px;
   margin-bottom: 15px;
   margin-left: 0px;
   font-weight: bold;
   letter-spacing: 0.1em;
   text-align: left;
   padding-top: 5px;
   padding-right: 0px;
   padding-bottom: 5px;
   padding-left: 0px;
   }
   h3 {
   font-size: 10px;
   color: #333333;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   text-transform: uppercase;
   margin-top: 15px;
   margin-right: 0px;
   margin-bottom: 15px;
   margin-left: 0px;
   padding-top: 0px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
   }
   h4 {
   font-size: 12px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: normal;
   text-transform: lowercase;
   color: #000000;
   padding: 0px;
   margin-top: 10px;
   margin-right: 0px;
   margin-bottom: 10px;
   margin-left: 0px;
   }
   h5 {
   font-size: 10px;
   color: #333333;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: normal;
   text-transform: lowercase;
   padding: 0px;
   border: 1px none #CCCCCC;
   margin-top: 10px;
   margin-right: 0px;
   margin-bottom: 10px;
   margin-left: 0px;
   }
3. Go to http://www.lipsum.com/ and generate some text, and paste it into your columns
4. create 24, 16, 11 px Verdana
5. create 24, 16, 11 px georgia
6. create an all caps style
7. create an italic style
8. If you want to style your paragraphs, use this but edit it to look the way YOU want it:
   p {
   font-size: 10px;
   color: #333333;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: normal;
   text-transform: none;
   padding: 0px;
   text-align: left;
   line-height: 1.5em;
   margin-top: 10px;
   margin-right: 0px;
   margin-bottom: 10px;
   margin-left: 0px;
   }
9. here is a separator:
   .sep1 {
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-top-color: #CCCCCC;
   border-right-color: #CCCCCC;
   border-bottom-color: #CCCCCC;
   border-left-color: #CCCCCC;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
   }
10. here is a thumb - create a div, apply this style, and edit it for your page
    .thumbnail
    {
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #333333;
    border: 1px none #999;
    background-color: #eeeeee;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 10px;
    margin-left: 0;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    }
11. use this to keep elements from drifting up around your divs:
    .clearboth { clear: both; }
12. use this to get rid of the line around linked images:
    a img {border:none; }

go here http://jeffprentice.net/teachf/web/resourcesmin.html and look at the new links - add a bg element to your page - auto generate a list

Link what we did today to your TOC

Presentations Thursday - attendance mandatory

Go to http://www.eppspro.com/Serv-Contact/s-pageorganiz.html and talk about the strengths and weaknesses of their graph

see weblayoutprelim DON'T START TOO LATE - this took surprisingly long, trying different programs, line weights, arrowheads...

2/7

presentations

check out this link test.html I went home and did the same steps as our ill fated lecture and had wonderful results - let's go over this again

let's nail thumbs and divs and clearboth styles today

also - fever - let's apply fever to your thumbs so you can start opening images

swap image - a popular method - but what are the limitations, when should you use it, and what do you do if all pages don't use this method?

perhaps swap can be for next week -

also next week - tuesday would be a good open lab - but we do want to cover:

Rollovers (image next week?) and css
swap image command
Multiple links
Behaviors - download pop up window fever
Templates
Library elements
More thumbs opening to larger images - fever, lightbox...hislide

Written questions to be assigned and answered next week -

What is visual hierarchy?
What is color coding?

WEEK 4 2/12 -14

Hand in/put up flow charts - signed please

?

Did everyone create an Adobe account and download popupwindow fever? Scrubber? If not then please do it now (:

-----------------------------------------

Please answer these 2 questions and link the answers on the TOC for thursday

What is visual hierarchy?
What is visual weight?

-----------------------------------------

in class:

What is color coding? (check out this link http://www.siteprocentral.com/html_color_code.html

also - check out this link for an example

http://www.apple.com/iphone/features/index.html#phone

-----------------------------------------

LAB - go over port roughs quickly so I can grade them later - I started to last night and found some glaring errors - broken links etc - I don't want to hand out bad grades if I don't have to

some of you are ready for more advanced stuff already - and you can go to these links and just follow directions to apply them to your site -the rest of you? We can walk you through them when you are caught up and ready -

for the advanced group

Hislide http://vikjavev.no/highslide/

Sifr http://www.mikeindustries.com/sifr

lightbox 1 http://www.huddletogether.com/projects/lightbox/

lightbox 2 http://www.huddletogether.com/projects/lightbox2/

-----------------------------------------

Rollovers (see css image rollovers)
Using background images, CSS and how and when to use. Tiled and no-repeat - cheesy examples
theinspirationgallery.com/

-----------------------------------------
swap image command: swap image command - you need a thumbnail image, a larger image (400 x 400?) and a blank placeholder - it is important to name your images for this to work
Be careful about file size, loading times, naming your images, typing in javascript:; in the link box, and having the swapped images all be the same size. Don't forget to send the swapped images over to the server!
Even if your images are different sizes they can still be placed on a same sized canvas. You can use my thumbs in the resources page for the demo

-----------------------------------------
Multiple links on one page

-----------------------------------------
Templates
Library elements

-----------------------------------------
More thumbs opening to larger images - fever, lightbox...hislide...open browser window (do this with scrolling text and flash) Add this to the links page of your exercises

-----------------------------------------

Check list for portfolio:
A CSS style sheet
Site ID
Location indicator
Primary navigation - (second and third levels navigation?)
Clickable thumbnails and pages that open using open one of the following: browser window, window fever, or some other method you can discuss - lightbox?
Footer
Artist statement/about
Contact info
We also look for non-shifting page elements, consistency, creative design approach, evidence of time spent on the project

Portfolio Due a week from thursday

2/14

1. pu flow charts
2. Rollovers (see css image rollovers)
3. swap image command: swap image command - you need a thumbnail image, a larger image (400 x 400?) and a blank placeholder - it is important to name your images for this to work
   Be careful about file size, loading times, naming your images, typing in javascript:; in the link box, and having the swapped images all be the same size. Don't forget to send the swapped images over to the server!
   Even if your images are different sizes they can still be placed on a same sized canvas. You can use my thumbs in the resources page for the demo
4. Multiple links on one page and the anolink style for loc indicator
5. fever
6. lightbox 1 http://www.huddletogether.com/projects/lightbox/

next week: Templates
Library elements

WEEK 5 2/19 -21

Basically a LAB today to put together some of the things we covered last week and get input on the portfolios

make a place on the TOC for Exercises II

2/21

review swap image

lightbox 1 http://www.huddletogether.com/projects/lightbox/

WEEK 6 2/26 - 28

note: some student work/layouts is up under 'projects'

Ports due

We were going to do:

Things we may never get to but that you need to understand

• Templates
• Library elements
• named anchors
• indent
• lists

However - Let's hold off once again due to late night fixes and overall dreamweaver burnout

and instead

FLash - we will cover basic flash, creating 4 exercises, and placing them on out index page. Description

1. the flash interface
2. symbols, timeline, keyframes
3. exporting an fla to a swf
4. placing a swf in an html doc
5. linking to a link on your index page

Also - lets all create the same model that incorporates simpel nav and buttons

a slideshow

but for this class - as we put out any port fires - let's go over the flash interface, and create a simple animation that deals with tempo and speed.

LINK this animation to your TOC! To do so we cover open browser window - killing two birds with one stone

2/28

What are the due dates here, for our Flash projects? And what are our objectives? Why flash? And what about accessibility?

Flash cont'd - let's work with text today so we can conr incorporating the animations into our existing work, instead of making little squares and circles animate.

we need to cover movie clips, stop commands, and placing these movies on your html pages.

Homework

Create an animation for tuesday that you could use on your portfolio site if you wanted to - or someone elses. Have some text drop in, some background elements come in and stop, and then have a looping movie clip - will we get to the replay button?

WEEK 7 3/4 - 6

Let's do transparency and animated text with perhaps a button for replay...and a raster image. Like this

3/6

I want to circulate and answer questions and see your animations in action.

also this morning - please prep 4 images that are the same size, fairly small, less than 640 x 480 (flash size - 200 x 400?) for our slide show demo

this week (and next week?) in Flash: dissolving slide shows using jpgs, fade in images with animated titles, basic navigation (clicking from image to image, scene to scene), buttons, audio. all of these exercises linked to your index page
buttons
audio
rotoscoping - see student work joel barragan 'alphabet' and devlin 'flash'

all of these exercises (replay button, slide show, etc ) linked to your index page please

WEEK 8 3/11 - 13

Go over grading

Go over TOC - update

Slideshows in flash

putting it all together

The E Zine project - how to, when, and what

WEEK 9 3/18 - 20

Our flash assignments (speed, scale, transparency, text, slideshow) are due this week.

Let's have a lab and work on them while I circulate and go over the portfolio notes individually.

Thurs?

It would be nice to do an Ezine model, and kick off that project.

WEEK 10 3/25 - 27

Start the ezine project

due April 10th

check out previous student zines and the projet description at projects.htm

 

27

Tweak the example from tuesday - add frame labels and a preloader - you can download this in projects.htm at the bottom of the page - you can also go there and do a find and highlight

While you are there check out (download) PAGEFLIP ZIPPED for FUN

the template is built - all you need to do is replace the content on each page with your own

WEEK 11 Spring Break

WEEK 12

Ezine due thurs - mini presentation? Or lab day?

Kick off Final

Homework - come up with Final idea, prep next thrus presentation of final rough

 

13

4/15 - start final proj

4/17 - presentation/digital layout - make this similar to the print crit, but projected - do it in illus, pshop, omnigraffle...

Week 14

4/22 work on final -

4/30

http://www.topdreamweaverextensions.com/thumbnail-viewer

http://www.topdreamweaverextensions.com/comment-system

Week 15

work on final

16

May 8 Final project due at beginning of class - SDSU policy requires that I be available on the day of the final - if you need to see me, then email me and let me know so we can set up an appointment.