Web Page Design for Designers

CNET Builder.com

CNET Builder.com - Web Authoring - Building an Accessible Web Site - 7/20/99

Webmonkey: Tutorials

Webmonkey: HTML tag reference

Webmonkey: Webmonkey for Kids

Web Color (By Lynda Weinman)

Hexidecimal color codes reference

RGB to Hexidecimal conversion chart

The mouseover machine

HTML Tables (Webmonkey)

HTML Frames (Webmonkey)

Freewarejava.com- Menu and navigation applets

General Reference Tools

Glossary of Terms

Glossary of Terms (Webmonkey)

Internet History

Online Maps and Mapping :
http://www.mapsonus.com

Hotline

How to assign behaviors to an image map by editing HTML

CLASS MATERIAL
1. at least 4-Zip disk
2. you must have a back up disk!!!!!

WED 13/01
Project 1-WHAT TURNS YOU ON?
This project was developed as the beginning of a self evaluation/examination. Now that you have had 3 1/2 years of design training/education—stop to consider what drives you, what turns you on as a designer and as a person. What experiences have you had that makes you think you can speak for others/convey ideas for the masses /fringes.

WHAT TURNS YOU ON?

We believe that 'content' is something you do - not something you are given - from Doors of Perception rules of engagement between design and new technology - by John Tackara

Everybody experiences far more than they understand. Yet it is experience, rather than understanding, that influences behavior - Marshall McLuhan

I was afraid that by observing objects with my eyes and trying to comprehend them with each of my other senses I might blind my soul altogether. - Socrates

The situation between an observer and an observed can never be neutral, however, since the power relationships are inevitably unequal. The graphic designer shares a similar dilemma of being both instrumental in the making of cultural artifacts and living in the society through which they are distributed. Graphic designers are often asked to remove themselves from their social positions and experiences and offer themselves as professionals, specialists in the various forms of visual communications. This detachment creates the mythical, autonomous observer in the design process... The graphic designer is, of course a member of society and thus lives with the artifacts of his of her making , as well as with the artifacts of other designers...
- Andrew Blauvelt - In and Around: Cultures of Design and the Design of Culture. Emigre #32

Part 1 Consider
Consider the non-design parts of our culture that turn you on and in turn have influenced you as a designer.

Part 2 - Write - one paragraph each - minimum of 10
Select cultural things/events/happenings/hobby/passion from the list below or use your own topics and write one paragraph for each, explaining how the things/events/happenings/hobby/passion has influenced you as a designer?

A book
A car
A movie or genre of movie
A place you visited
A speaker you have heard
your religion
A game
A person you have meet
A person you have not meet
A play you attended
A concert you attended
An event you attended
An event that you did not attend
A song you heard
A sport
A political view point

Part 3- visually express
Create an expression of what turns you on. This should be a thought provoking gesture of who you are and what makes you culturally relevant as a designer. This project should convey an attitude that represents your opinion of who you are and how you have learned to think. - and it must be interactive.

WE will spend about 3 - 4 weeks on this project.

MON 19/01 - MLK DAY - NO CLASS

WED 21/01
DUE - PROJECT ONE - PART ONE AND TW0
CRETIQUE ON VISUALS / SKETCHES / PHOTOS / WRITING / CONCEPTS /SOUND - BRING LOTS OF STUFF

FYI - Personal Web Site set up - Pick url... and more
All student must have ftp access to a website that they can post all of their class work on.

"It is all part of growing up and being an interactive designer." some guy

You may use any host service, as long as you have your own unique url, ftp access and there are no advertisements on your site. You may choose any url you wish.

We suggest http://www.i-dentity.com
It is cheep and easy to use... And no, we make no money off of this.

W
E
E
K

3

MON 26/01
DUE - PROJECT ONE - PART ONE AND TW0
CRETIQUE ON VISUALS / SKETCHES / PHOTOS / WRITING / CONCEPTS /SOUND - BRING LOTS OF STUFF

W
E
E
K

4

W
E
E
K

5

MON 09 / 02

Due - Part five - Part 3- visually express
Create an expression of what turns you on. This should be a thought provoking gesture of who you are and what makes you culturally relevant as a designer. This project should convey an attitude that represents your opinion of who you are and how you have learned to think. - and it must be interactive.


PROJECT TWO: BRANDING AND CO-BRANDING
This project allows a senior to take a closer look at who they are as a designer - and how do others perceives them as a designer - In conjunction with the concept from your senior thesis papers consider the following:

READ
Read the following articles about branding:
“Branding”, by David Peters from Eye magazine
http://www.eyemagazine.com/feature.php?id=23&fid=170

“Branding as Mythology” by Will Novosedlik from Eye magazine
http://www.eyemagazine.com/feature.php?id=51&fid=287

“Marketing vs. Branding” by Jacques Chevron
http://www.findarticles.com/cf_dls/m0BDW/22_40/54787827/p1/article.jhtml

Some Brainding examples:
http://www.uie.com/branding.htm

Branding by Ryan Bigge - adbusters http://www.adbusters.org/magazine/21/branding.html

The following books are suggested for further research into branding:
Brand You: Reinventing Work by Tom Peters
No Logo by Naomi Klein

DEFINITION OF BRANDING AND CO-BRANDING
Branding is a current term being used in marketing, advertising and design and, especially, corporate takeovers. It refers to the perception / reputation that a brand, product, service or company has among individual users of the brand.

Branding is a bit of a buzzword these days, but while the strategy of “creating a brand” often costs corporations millions of dollars in creative work and media buys, there are some principles of branding that can be of use to anyone who has a product or service to sell.

From a cultural point of view, branding is not a simple issue. There is more than one side. Naomi Klein in the book No Logo has a lot to say about branding:

“But today, a clear pattern is emerging: As more and more companies seek to be the one overarching brand under which we consume, make art, even build our homes, the entire concept of public space is being redefined. And within these real and virtual branded edifices, options for unbranded alternatives, for open debate, criticism and uncensored art–for real choice–are facing new and ominous restrictions. If the erosion of non-corporate space is feeding a kind of globo-claustrophobia that longs for release, then it is these restrictions on choice–restricted by the same companies that promised a new age of freedom and diversity–that are slowly focusing that potentially explosive longing on the multinational brands, creating the conditions for anticorporate activism. Naomi Klein, No Logo

It’s the 21st marketplace. Products don’t matter, brands, and the perceptions of brands do. Eli Carrico

Let’s look at some definitions of the term, courtesy of the international design firm, Frankfurt Balkind Partners:

PRODUCT
A product is something that is produced to function and exists in reality. (Let’s say, a pair of jeans. The jeans are produced to be worn as clothing and are sold off the shelves of stores.)

brand
A brand has meaning beyond its function and exists in people’s minds. (A brand of jeans conveys a fashion sense, perhaps a lifestyle, an attitude. You can’t buy those qualities, you just think about them when you buy the jeans.)

Brand identity
Brand identity is the way in which a brand is expressed visually and
verbally. (For example, it’s the logo in ads, the tag on the jeans, the web site, the subtext in news releases, and what the president of the company says when he’s interviewed on TV.)

Okay, so now let’s look at the entire process of branding.
Branding
Branding is viewing every customer-related activity as part of the branding process and managing it accordingly. Everything your company does that affects your customers affects the value of your brand. Think about it, you’re not just selling jeans (or long distance service, books, pediatric care, or legal advice). You’re selling a brand that represents more than your product/service.

Determining what your brand is or should be is tough work. Some brands naturally evolve from an internal attitude at a company. Some brands are the result of consumer response. Some brands are calculated after months of market research. All successful brands need to be supported through integrated marketing, public relations, and advertising because that integration builds your brand and your customer base. “If brands are about ‘meaning,’ not product attributes, then the highest feat of branding comes when companies provide their consumers with opportunities not merely to shop but to fully experience the meaning of their brand.” (Naomi Klein) So your company or organization becomes more recognizable. And your customers are loyal not just to your product or service, but to the “experience” your company’s brand represents. And that means you’re a brand worth buying.

BRANDING SELF
The branding of an individual is not new. People like Michael Jordan and Madonna have been branded through the use of marketing strategies and millions of dollars. Both have different but strong brand reputations or brand equity.

The form of calculated branding used to create mega stars does not always work to build a positive perceived value. Using traditional marketing strategies to brand a product or a person in a fringe group would most likely fail. However, this does not mean the brands used by the fringe do not build brand equity. In this case the brand identity develops from within the fringe culture as opposed to being developed and projected by a marketing strategy. The loyalty of a brand in these markets can be strong as long as the brand is perceived to be for that market only. A marketing strategy may move a fringe brand to the middle – by creating wider recognition and acceptability of the brand.

In order to successfully brand yourself, you have to deliver on brand expectations. In other words, you have to set up an expectation and then fulfill that expectation in the “audience” experience. A reputation can be “created”, but if the branding is phony the brand equity will not last.

Examples of people as brands
Madonna
Michael Jordan
Martha Stewart
Paul Rand

CO-BRANDING
Co-branding is a collaboration of two entities whose purpose is to positively impact both brands’ identities or to create a third combined identity. Based on your current brand reputation, the co-branders reputation, and the collaborative relationship one of the following may occur:

1. Both brand reputations are equally improved but stay separate.
2. The collaboration forms a third brand and brand reputation.
3. The collaboration improves one brand more then the other.
4. Other...?The project

STEP ONE: brand yourself
Write at least one page on the following questions in defining your brand identity as a designer:

1. How do you define your design sensibility?
A short paragraph, and also describe it in 3-4 words.
2. Who is your audience?
3. How do you interface with your audience? (How do you get your voice out there?)
4. What is your brand equity?
5. What makes you valuable? (What service or product to you provide?)
6. What media do you like to work in?
7. What media do you work in best?
8. What media do you think you should explore?
9. How do others perceive your current brand?
10. How would you define the brand you want to create for yourself?
11. How is it packaged?

STEP TWO: c0-Brand
Consider your goals as a designer and how co-branding with another designer, artist, musician, photographer, writer, product, or corporation would re-position your brand identity.

If you choose to work with a large company like Nike, you will most likely take on more of Nike’s brand reputation than Nike will take of yours. If the collaboration is more equal and long term you may create a new brand and identity for both parties.

Choose an entity for co-branding. This entity should have some history with, or interest in design. Using traditional and non-traditional methods, research your subject.

Choose an entity to co-brand with (not necessarily from the following list, and something you feel passionate about.)

1. What product or service is that entity currently providing in the marketplace?
2. Who is their audience?
3. What kinds of interfaces does this entity develop/use?
4. How does this entity interface with the marketplace?
Consider media as well as visual presence/form: identity, graphic language, advertising, verbal language, body language, location, etc. In other words, how do you know that it is what it is.
5. How will the co-branding re-position you as a brand?
6. How will the co-branding redefine the co-brander as a brand?
7. How does that product or service serve your goals if you are to co-brand?
8. In what capacity will you work in the collaboration? How will you interface with your chosen entity?
9. What form / media will your work/brand take?
10. Will you provide a new product or service or will you redesign a current one?A FEW

EXAMPLES OF ORGANIZATIONS, CORPORATIONS, INDIVIDUALS, ETC.
Red Cross
Holocaust Museum
Smithsonian Institute
Barbara Karmanos Health Center
Focus Hope
Maya Lin
Jimmy Carter
Noam Chomsky
Shigeru Ban (architect, works with cardboard and recycled paper to house the homeless)
Yamasaki
Claude Cormier (architect)
Bust Magazine
Koffi Anan
National Science Foundation
Janet Frame
Jane Campion
Abbas Kiarostami
Cygnus Inc. (makes GlucoWatch for diabetics)

A FEW Examples of co-branding
Walker Art Center / Laurie Haycock Makela
Detroit Artists Market / Ed Fella
Nike / Scott Makela or Nike / Robert Nakata
Cooper Hewitt / Ellen Lupton
AOL / Time Warner
Time Warner / EMI
Utne Reader / Jan Jancourt
Cranbrook Academy of Art / Katherine McCoy

W
E
E
K

6

MON 16 / 02
Due - step one and step two - turn in papers

WED 18 / 02

PROJECT TWO: BRANDING AND CO-BRANDING
STEP TWO: PROJECT DEFINITION, VISUALIZATION

CONCEPTUALIZE: All of the projects must be completely considered from concept to final packaging and promotion. Projects must ultimately be a form of digital new-media or interactive interface. The project itself may actually be a working interface. If not, an interface must be used to illustrate the final concept and idea (for example if you redesign a product interface). If you design a new mouse you would need to illustrate the design and function of it with an interactive presentation, web site or video project. Projects must be one of the follow forms of interface:

> screen interface
> exhibit / display or spatial interface
> product design interface

Begin by defining / outlining your project
Who will you co-brand with?
What is the interface/product you will be creating?
How will it be used?
Is it utilitarian? Is it entertaining?
How will it function?
Describe the product through a scenario of its use
(write this out as a narrative or a series of steps).
How will you collaborate with your co-branding partner?
To what extent will co-branding be an extension of their current brand, or an extension of your brand?
Who is the audience for the project?
Make image/lifestyle boards to describe (visually) your audience and your project.
How will the project be promoted (how will it interface with the public: packaging, web, etc.)

Project 2, Step 2 is designed to begin the development of content and form into a working model of interface design. You will consider how your interface functions as a communication vehicle, as a brand, and how you intend to set up audience expectation and fulfill that goal. Determine what form and media your project will take: screen based, product interface, 3D interactive space, etc. Consider the use of multisensory models of interface.

COLLECT
Collect your content from your various sources. Some may be influenced by the information you find regarding the co-branded entity, some will be written by you. Some will be the information required for the navigation, etc.

ORGANIZE
Look at your information (content). Devise 3 different ways to organize the information into hierarchies or categories. Look at different ways of finding relationships between the parts of information. Obvious ways to do this might be by color, place, time. Use different ways of organizing the information to influence how you design the 3 different interface prototypes.

Are there interesting categories within the content itself that can be used as organizing principles? For example, point of view: personal vs. public, young vs. old; the senses: things you can see, things you can hear, etc.; emotion: things you love, and things you hate. Is there a PROCESS that would organize the content?

STRUCTURE
Get visual with the organizing process. This is kind of like building a dummy or a grid for a printed piece that contains many kinds of information. What is the visual relationship of one part to another in a grid of complex relationships? Organize, DRAW the relationships in a matrix, in maps, structures, grids, etc.

>Structure your information using a design system, or a combination of various systems. Are the systems linear or non-linear? How do the system/s control the navigation of information? What systems are intuitive? Some obvious organizing systems to consider:

Icons
Content:
divide into categories, hierarchies, narrative, etc.
Place / location / geography
Color
Numbers
Language: alphabetical, indexical, associative, etc.

PLAY
Start making. Start sketching in the medium you intend to use for this project. What user group are you designing for? What is the appropriate medium to reach your audience? What are your technical goals for this project? If you are doing technical research, consider it part of your “playing” or making process.

W
E
E
K

7

W
E
E
K

8

WED 3 / 03
Process Critique - CONCEPT - WHAT IS YOUR PROJECT - show collection and organization process -

W
E
E
K

9

W
E
E
K

10

W
E
E
K

11

W
E
E
K

12

MON 29 / 03 - Unfortunately i will not be in class again today - please go to room 004 in basement - you will be participating in Alex's class - getting and giving feedback.

WED 31 / 03 - I am going to be out of class again today - I am trying to get someone to site in and give you a feedback on your projects.

Class will be meeting with Alex Braidwoods class TONIGHT.

If you have any questions or would like me to give you feedback online, you can post jpg file, pdf files or any other type of file and i will take a look at them. E-mail me and i will get back to you with my input. Keep working - if you are completely stuck ask for input from a class mate or another instructor.

W
E
E
K

13

W
E
E
K

14

W
E
E
K

15

W
E
E
K

16