web development workshop, summer 2003
web development workshop, summer 2003
ARTD 4o8 Department
of Art, University of Oregon
Monday - Friday 9am - 5pm The Advanced Lab, Lawrence Hall
Associate Professor Mary Flanagan
mary@maryflanagan.com ; http://www.maryflanagan.com/courses/2003/summer
This quickly paced, intensive summer workshop explores the study of, creation, and development of web sites. We will explore how artists and the software industry meet (collide?) in the creation of "real" projects for the community, and will learn and practice software development models useful for both client-driven and personal projects in the future.
We will focus on "what works" as well as "what looks good," for function is as important as aesthetics. Special attention in this software development course is given to the conceptual systems of interactivity how the interactivity and architecture relate to the content of a particular site and the needs of a particular client, whether they are an outside client or yourself.
Students will work on teams to create a web site for an organization or group by interacting a real client (one of three nonprofit clients pre-arranged to work with our class)
There will be a high emphasis on teamwork, energy, open critique, creativity,
and flexibility for each and every class member. Team members will learn a great
deal and also have a lot of fun during the class. We will produce a functioning
and finished web site for each client by the end of the week!
In order to do this effectively, we will follow detailed design exercises. Please use your sketchbook from "the get-go." Details on each day's activities follow in this document.
Schedule:
Day 1: Introduction, Web Principles; Meet Client, Beginning Concept and Design: Proposal.
Day 2: Concept and Design, continued; Paper Test; Finalizing Design, Approval
Day 3: Material Gathering, Images,
<<Alpha Approval>>
Day 4: Content, Compression, and HTML; Testing and Uploading
Day 5: Finish
Site, Final review
Grades:
Grades will be based on the following: teamwork (25), creative involvement +
vision (25), productivity + follow-through (25), documentation (25). Tardiness
+ absence will result in an invitation to drop the course or failure as this
is a 5 day course.
Day 1: Introduction Web Principles; Meet Client, Begin Concept/Design; Proposal
Morning
9:00 am Introduction to the course
10:00 am What Works?
Ideas and form before technology;
S+F, L+F (Structure+Function, Look+Feel).
10:30 am-
Noon Particulars: How HTML works, media embed, Download, file size
Technical review:
GIF (Graphic Interchange Format) is an "indexed-color" format. "Indexed"
means that it can only use colors from a pre-set list. GIF is also an "eight-bit"
image format. Eight-bit means that even though your monitor can probably display
millions of colors, the humble GIF's list of available colors is limited to
just 256. Even more unfortunate is that differences between Mac and PC mean
that only 216 of those colors are "safe" colors - colors that you
can be sure will look fine on the web no matter who's looking at them. Any internet-savvy
graphics application should include the option of saving a GIF using the "web-safe"
color palette.
JPEG (Joint Photo Experts Group) is an RGB format, meaning that it colors pixels as different levels of Red, Green and Blue, and as such it can use the full range of the 16 million colors that modern monitors can display. (It's 16 million, by the way, because there are 256 different levels of each color, and 256 reds x 256 greens x 256 blues = 16,777, 216 colors). As a result you can have as many colors as you like with JPEGs, but they do have their own limitations Some images look better as GIFs, others as JPEGs -you must test.
Checking Download
Time + Size
The average connection speed in the United States is 28.8. If you are designing
for an intranet, you may want to choose 1500 (T1 speed) to calculate.
25 k @ 14.4 k modem = 14 seconds (1k = .56 of a sec; 1 sec = 1.7k)
25 k @ 28.8 k modem = 7 seconds (1k = .28 of a sec; 1 sec = 3.6k)
25 k @ 56 k modem = 4 seconds (1k = .16 of a sec; 1 sec = 6.25k)
25 k @ T1 line = 1 second (1k = .04 of a sec; 1 sec = 25k)
11:45 am Divide into teams
Noon (possible meeting)
Afternoon
1:00 pm Review of sites and requirements
2:00 pm
Meeting 1: the students interview the client to get a feel of what they would
like to have in the design; Students also receive relevant material for the
site (images, text files, maps, etc) from client.
TAKE NOTES!!!
3:00 pm Brainstorming session: lists of words, 5 minute sketching exercises
4:30 pm-
5:00 pm Wrap Meeting! Create schedule, document your day and design. Create
plan of work for the rest of the week, paragraph description of project as a
proposal.
Day 2: Concept and Design Paper Test; Finalize Design, Approval
Morning
9:00 am Site Architecture Discussion and Interface; 3 Levels rule.
10:00 am Technical design considerations: Javascript, Flash
10:30 am-
Noon Mockups and Paper Testing Interface.
In the designing phase, every team member has equal creative weight/say
Afternoon
1:00 pm -
3:00 pm Meeting 2: the students present to client 3-5 possible designs (look
and architecture) for the site, and client's group will choose one style to
go with, with suggested changes, etc
3:00 pm Define Storage Scheme, Naming Conventions/extensions, Backup Plan. Begin Production
4:30 pm-
5:00 pm Wrap Meeting! Document your day, Create plan of work for the rest of
the week, backup work, write paragraph description of this stage in a new word
document called "product documentation"
Day 3: Content Material Gathering, Images, text
Morning
9:00 am Content Acquisition: Image, Video, Text
9:30 am Contingency Plans: the "What Ifs"
10:00 am-
Noon Teams divide into content producers/processors and architects/site creators.
Create structural, functioning mockups
Afternoon
1:00 pm -
3:00 pm Meeting 3: the students meet with clients to show functioning sites
for approval, final content gathering
3:00pm - Production; Someone on team tests target server with test files.
4:30 pm-
5:00 pm Wrap Meeting! Document your day, Create plan of work for the rest of
the week, backup work, write further in the "product documentation"
Day 4: Content, Compression, and Code HTML; Testing
Morning
9:00 am Production
10:30 am-
Noon Assembling and Preparing Content; optimizing files
Afternoon
1:00 pm - Production
4:30 pm-
5:00 pm Wrap Meeting! Document your day, Create plan of work for the rest of
the week, backup work, write further in the "product documentation"
Day 5: Finish Site, Final review
Morning
9:00 am Testing and Tweaking
10:30 am-
Noon Writing Behind the Scene User's Guide and backing up file
Afternoon
1:00 pm Finalize documentation, Fix Bugs, Finalize Site, Backup.
Meeting 4: the students hand over the site and the site archive with documentation to clients, and upload the site to client's server if necessary.
4:30 pm-
5:00 pm Wrap Meeting!
Appendix:
Useful Questions, Topics, Forms
1. Meeting 1: Students Interview Client
At the first meeting, be sure you document everything the client says. Good listening and understanding the client correctly at first will save hours of headaches later on. Document this with a list of "client's needs" in your notebooks. You might even wish to videotape or audiotape the meeting to make sure you catch what the client is saying; or, simply take good notes!
Remember you are responsible for getting feedback from the client, ie, arranging all future meetings. Thus, exchange phone numbers and email addresses. One person on the team needs to be the contact person to make sure the group moves forward. You may need to meet off-campus; you may need to meet once in the evening, or in a chat session online to get the feedback. Do what it takes. In any event, each meeting must be documented by all in attendance via notes.
2. Meeting 2: the students present to client 3-5 possible designs
Like in any critique, you need to present your work. One person should NOT do all the talking. You should all be informed about each person's design decisions. Act like a unit. Don't apologise for what you did not do, but rather emphasize your interpretation and vision of the client's needs.
This design needs to account for all of the functionality requested by the client, or an argument why something is not reasonable or doable by your team.
At this meeting it is essential that you make clear the process: that as of this decision your team will go ahead with this set of designs. THIS IS A KEY MOMENT OF THE PROJECT. The client cannot add new features, sections, etc after you commence on the design, or you will not finish the project.
3. Meeting 3: the students meet with clients to show functioning sites for approval,
final content gathering
At this meeting it is important to be able to show what the project can do as complete. The design must be finished, but you could be using placeholder graphics and text.
4. Meeting 4: the students hand over the site
This is where your hard work pays off--presenting your fabulous work to an adoring client! Make sure you have created archives for each team member as well.
Brainstorming: Questions to get it going
Have the client think of 7 words that describe their organization, and 7 words
that describe how they wish their mission to be perceived.
What images come to mind about this client's company/work?
What is the most stereotypical image that comes to mind about this subject?
What is the opposite?
What's the weirdest thing that comes to mind on this subject?
The current client's image is ______________.
The opposite of the current client's image is ___________.
What is a romantic way to describe this client's work?
What is a techno-way to describe this client?
What would be the most obnoxious treatment of this subject? Elegant?
What would this site look like if it were upside down?
How can color and design by themselves describe this client's mission?
What sounds relate to these ideas?
Etc etc
______________________Project Documentation_______
Product Documentation
Web Site Design and Construction for
_________________
(group and individual's name)
Created by
Xxx, yyy, zzz, aaa, bbb
of the University
of Oregon, Department of Art, Multimedia Design Program
in Professor Mary Flanagan's summer 2002 Internet workshop
I. Abstract of Project
(150 words)
II. Analysis of
Client Needs
(1/2 page)
III. Our Creative
Approach
(1/2 page)
IV. The Design
(1/2 page, with sketches)
V. Technical Strategy
(1/2 page)
VI. About the site: Behind the Scene User's Guide
1. How the site
is arranged and archived
(here include structure, compression notes, fonts used, point size, colors used,
any other details)
2. How to upgrade the site
3. Future ideas