Home Introduction The Concept The Concept The Culture The Culture The Code The Code The Content The Content The Future The Future Summary Resources Making.

Copyright 2005 Paradigm Communications, Inc.1

Home

Introduction

The ConceptThe Concept

The CultureThe Culture

The CodeThe Code

The ContentThe Content

The FutureThe Future

SummarySummary

ResourcesResources

Making Sense of the Information AgeMaking Sense of the Information Age

Web Design: Web Design: Look, Feel & FunctionLook, Feel & Function

Courage and clarity in the face of complexity,agility for continuous changeand growth,peaceful mind to sustain paradox,and a vision of all things connected.

Presented by

Kenan Doyle Branam ~ ~ [email protected] Team Leader for mca-i.org

mailto:[email protected]


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



Objectives

• The Concept

• The Culture

• The Code

• The Content


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


IIntroductionntroduction

Media Experience

• Art & Science

• TV Producer

• Video Artist

• Gestalt Facilitator

• Web Designer

• Media Consultant


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


I think, I think,

therefore, I am… therefore, I am…

…I think.…I think.

I think, I think,

therefore, I am… therefore, I am…

…I think.…I think.



Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


“A human being is part of the Whole... He experiences himself, his thoughts and feelings, as something separated from the rest... a kind of optical delusion of his consciousness.”

Albert Einstein

e=mc²e=mc²

Special Theory of Special Theory of RelativityRelativity


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


cc = light ~ Consciousness ~ Cognition

squaredsquared ~ Consciousness

Communicated

mm = mass ~ Medium ~ Form ~ Meaning

ee = energy ~ The Human Experience

Special Theory Special Theory of Media Consciousnessof Media Consciousness

e=mc²e=mc²


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


The MediaThe Media

“The Medium is the Maassage.”

The message is human consciousness sharing experiences.

Herbert Marshall McLuhan1911-1980

The Official WebsiteThe Book

http://www.marshallmcluhan.com/main.html

http://www.amazon.com/exec/obidos/ASIN/1584230703/kenandoylebranam/


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


The Web ConceptThe Web Concept

Evolution of Media

Face to face• Sign language• Voice language• Graphics

Broadcast media• Theatre• Books• Telephone• Radio• Television

The Internet & the Web


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



Formal Language and ProtocolGraphical User Interface with a metaphor

Weaving the WebThe original design and ultimate destiny of the World Wide Web, by its inventor Tim Berners-

Lee with Mark Fischetti.

http://www.w3.org/People/Berners-Lee/Weaving/Overview.html


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



The Metaphor

The Web is more like a “library” than a “shopping mall”.

•Familiar metaphor

•Appropriate content

•Intuitive navigation

•Usable & Accessible with standard code


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


It’s about the Experience

• The Web is literate, not just visual. • The Web is active rather than passive. • The Web is time-sensitive. • The purpose of the Web is sharing

knowledge. • The Web is global and local.



Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


The Web CultureThe Web Culture

•Information is Relationship

•Information is Power

•Advertising v Information

•Collaboration


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


The Web CultureThe Web Culture

Information is Relationship

“Knowledge thus exists in relationshiprather than in an ‘objective’ worldor in ‘subjective’ experience.

In information theory, ‘information’ is defined in terms of a ‘relationship’ between an input and a receiving devise. A book contains no information for someone who can't read.”

The Holographic Model John R. Battista


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Information is PowerInformation is Power

Hierarchical Flow

Centric• One-way• One to many

Linear logic (1D+Time) Segregated Filtered (Reductionistic) Static Structure


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Information is PowerInformation is Power

Democratic Flow

Distributed• One-to-one • Many-to-many

Process logic (2D+Time) Networked Contextual Dynamically Structured


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Consumer MetaphorSleeping Beauty (Tired!)

Citizen MetaphorCyber Beauty (Fresh)"Get outta my face! It’s my life and I’ll surf who I want to.“

Dominator v Partnership Relationship Win/Win

Advertising v InformationAdvertising v Information


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Information Management• Accessibility• Equality• Transparency• Universality • Sustainability

CollaborationCollaboration


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


The Web Code The Web Code

The Language • Web Presence • Web Grammar• Web Design• Content & Management• The Shared Experience


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Web PresenceWeb Presence

POP = POP =

Point of PresencePoint of Presence

Build it…Build it…

so they can find itso they can find it

… … then they will come!then they will come!


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Web Domain Name

POP = Point of Presence yourdomainname.com

Registered with InterNic

Addressed to a Web HostIP, Internet Protocol000.000.000.000


http://www.yourdomainname.com/


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



It’s about networking

• Search Engine Robots• Get listed in Directories• Be Online 24/7/365• Develop Community• Customer Centric


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Web GrammarWeb Grammar

Contract Professionals!

• A graphic artist is not a code expert

• A video producer is not a code expert

• A writer is not an Information Technologist

• An Information Technologist is not a writer

• Etc…


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



HTMLhypertext markup language

• Document Type Definition

• Metatags

• Body, chapters, subchapters

• Accessibility Standards

• W3 - Industry Standard definitions

Everything you need to know about Web Standards


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



Header & Metatags

•“page title”

•“description”

•“keywords”

•“author”

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

<html> <head> <title>_________________</title>

<meta name="copyright" content="&#copy; 2005 Paradigm Communications, Inc.">

<meta name="Web Designer" content="Kenan Doyle Branam"><meta name="Authorized by" content="Client"><meta name="description" content="__"><meta name="keywords" content=“150 words maximum"><meta name="resource-type" content="document"><meta name="distribution" content="global"><meta name="Robot" content="ALL"><meta http-equiv="Content-Type" content="text/html"><link rel="STYLESHEET" href="primary.css" type="text/css">

</head> <body> 



</body> </html>

sourcsourceecodecode

25

http://www.w3.org/TR/REC-html40/struct/global.html


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Web DesignWeb Design

Elements of Style

• Graphic Look & Feel• Composition• Font Styles• Color palette• Icons, illustrations & photos• Motion media


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Cognitive Modalities• Perception • Attention (Focus) • Stimulus/Response• Pattern Recognition• Association • Concept Formulation• Creative Adaptation


Global Header Global Header (site name)(site name)

Submenu

Items

Items

Items

Items

Items

Items

Items

Header – Page TitleSubheader

Introductory paragraph - The present standard screen resolution is 800x600 which gives you a 90% audience.

Sub Subheader

;ljasfopuikjf ayfopiu afopiydf oaoiuf oiausdfoiudso osdapiufoi aosdf soadifuopiu 8ouafoipu asdoi fuoa fpoiuadf asdoiufpoiausd fpoi asdfopiuasdf sdoapifusdaf opdasif asd fasd foaps idfoas[difuapsodfiuasd fpoasdif dfopiuasdf psdoaiu foads fasopdifuoasdiufoaspdif opasdifuo8ue0wt[0gikjiufsyaw9upgz o 7y oiu pu 9p8y op8u oi ]oi [pou o8y op87 poi [pi ][pi ][ i][ i][ I I ][I p[ oi[p oiu 89y 897 6 ui po jpo t r 6rasd’;jakf[pwkf[w

& special

notes

Items

Items

Items

Items

Items

Items

Global Navigation Menu bar items items items items itemsGlobal Navigation Menu bar items items items items items

28


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



Design Management

•Server-side includes (*.ssi)

•Cascading Style Sheets (*.css)

•Templates

body { font-family : Humnst777 Blk BT,Verdana, Helvetica, Arial, sans-serif;

font-size : 1em;background-image : url(images/bg-image.jpg);margin-top : 0px;

}

.intro { }

#contact_form { }

a:link { color: #8000FFfont-weight : bold;

}

H1 { font-family: Humnst777 Blk BT,Verdana, Arial, Helvetica, sans-serif;font-size: 2em;font-weight: normal;font-style: normal;color: #660066;text-align: center;

}

p { font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1em;font-weight: normal;font-style: normal;color: #000000;text-align: left;

• }

sourcesourcecodecode

CSSCSS

30

http://www.w3.org/Style/CSS/

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title>

<meta http-equiv="Content-Type" content="text/html"><link rel="STYLESHEET" href="primary.css"

type="text/css">

<style type="text/css"> body { color: purple; background-color: #d8da3d } </style>

</head>

<body> [etc.]

<p style=“font-family: Verdana Ref, sans-serif; font-size: 1.25em; font-weight: normal; font-style: normal; color: #660066;text-align: center;>

Paragraph text</p>

sourcesourcecodecode

CSSCSS

31


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Content ManagementContent Management

Web Weaving versus the Story Line

•Networked v Linear

•Segmented v Contiguous

•“Parsed” v Composite

•Interactive v Sequential

•Integrated v Isolated


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



Write for the Web• Use concise, short sentences• Facilitate scanning

• Lists rather than blocks of text

• Short paragraphs

• Bold key phrases

• Have abstract for long documents• Standardize spelling, language• Check spelling

Crawford Kilian : “Writing for the Web”

http://usableweb.com/authors/kiliancrawford.html

http://www.amazon.com/exec/obidos/ISBN%3D1551802074/102-6510407-7691319


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Content Planning– About the company or topic– Calendar of events– Product description (text, pictures, videos)– Customer testimonials or quotes– FAQs (Frequently Asked Questions) with answers– Press releases and contacts– Forms (general feedback, user surveys, follow-up

requests, order forms)– List of resellers/distributors– Industry directories (online or in print)– Industry associations or guilds



Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



Every page should answerthese questions:

– Who– What– Where– When– Why– How


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



“About” suggested info– Company background– Vision & Mission– Management/Key personnel– Awards/Professional affiliations– Location & territory– Contact: Email, Phone, Address– Job postings


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



Collaboration Software

• provides multiple “content providers” and “editors” with access to Web pages on a password protected basis.

• Allows content providers to edit text content while restricting branding and style changes.


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


The Future of the WebThe Future of the Web

The Semantic Web

"The Semantic Web is an extension of the current web in which information is given well-defined meaning, better enabling computers and people to work in cooperation."

-- Tim Berners-Lee, James Hendler, Ora Lassila, The Semantic Web, Scientific American, May 2001

Web Weaver Glossary of Terms

http://www.scientificamerican.com/article.cfm?articleID=00048144-10D2-1C70-84A9809EC588EF21&catID=2

http://www.w3.org/people/berneres-lee/weaving/glossary.html


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



Evolution of Web Languages

(Document Type Definitions) SGML, the basis of all HTM HTML (v.2.0, 3.2, 4, 4.01) XML (v. 1.0 is 2nd version) XHTML SVG (Scalable Vector Graphics)

Here goes video!


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



Bigger,Faster, Smarter, Cheaper…

even the audience will be transformed into story tellers and weavers, creating the web of human experience…


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources



Hyper-Human Skills

We’re alive. Electronic systems aren’t.

• caring• judgment• intuition• ethics• inspiration• friendliness• imagination.

How to Succeed in the Hyper-Human EconomyRichard W. Swason

The Futurist - Sep-Oct 2004.

http://www.wfs.org/futcontmj05.htm


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


c²m=e ~ The c²m=e ~ The ExperienceExperience

The Story

The Web we weave is the Story of the Human Experience.The Greatest Story Ever Told. A Story about Everything in a medium that enfolds and unfolds its true nature: multi-dimensional, multi-authored, collaborative, globally accessible, never ending.

…to be continued…


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


This PowerPoint presentationis available for download at: http://www.branam.com/makingsense/Web_Design_pps/Web_Design_KDB.pps

Suggested reading list:http://www.branam.com/makingsense/ms-read.shtml

Web Design:Web Design:Look, Feel & FunctionLook, Feel & Function


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Integrating Motion MediaIntegrating Motion MediaSample WebsitesSample Websites

Ray Kurzweil • Artificial Intelligence - http://

www.kurzweilAI.net/• The Brain - http://

www.kurzweilai.net/brain/


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Web Resources LinksWeb Resources Links BooksBooks

Steve Krug: “Don’t make me think” Jakob Nielsen: “Designing Web Usability” Louis Rosenfeld, Peter Morville:

“Information Architecture for the World Wide Web”

Robin Williams: “The Non-Designer’s Design Book”

“Webster’s New World Dictionary of Computer Terms”

More suggestions: www.ward.vt.edu/toolkit/books.phtml


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Web Resources LinksWeb Resources Links Online ReadingsOnline Readings

www.webtechniques.comwww.webreview.comwww.webmonkey.comwww.webreference.comwww.builder.comwww.useit.comwww.ward.vt.eduwww.ward.vt.edu/pubs/WebDesign.htm


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Web Resources LinksWeb Resources Links Online ToolsOnline Tools

www.netmechanic.com– Page size & download time– Spell check– Link check

validator.w3.org– HTML, CSS validation

www.cast.org/bobby/– Accessibility check


Home

Introduction



The CodeThe Code



SummarySummary

ResourcesResources


Web Resources LinksWeb Resources Links Desktop ToolsDesktop Tools

Macromedia Homesite 5+ or BBEdit– Coding by hand

Macromedia Dreamweaver 4– WYSIWYG editing & prototyping

Adobe Photoshop 6 & Fireworks 4– Prototyping & image

creation/optimization CSE HTML Validator 4.5

– Validation– Spell check

XENU Link Sleuth– home.snafu.de/tilman/xenulink.html

Home Introduction The Concept The Concept The Culture The Culture The Code The Code The Content The Content The Future The Future Summary Resources Making.

Documents