Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

1 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 1 Web Design: Look, Feel & Function Courage and clarity in the face of complexity, agility for continuous change and growth, peaceful mind to sustain paradox, and a vision of all things connected. Presented by ~ Kenan Doyle Branam ~ Web Team Leader for mca-i.org

2 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 2 Web Design: Look, Feel & Function Objectives The Concept The Culture The Code The Content

3 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 3 I ntroduction Media Experience Art & Science TV Producer Video Artist Gestalt Facilitator Web Designer Media Consultant

4 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 4 I think, therefore, I am… …I think. Web Design: Look, Feel & Function

5 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 5 “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² Special Theory of Relativity

6 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 6 c c = light ~ Consciousness ~ Cognition squared squared ~ Consciousness Communicated m m = mass ~ Medium ~ Form ~ Meaning e e = energy ~ The Human Experience Special Theory of Media Consciousness e=mc²

7 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 7 The Media “The Medium a is the M a ssage.” The message is human consciousness sharing experiences. Herbert Marshall McLuhan The Official Website The Book

8 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 8 The Web Concept Evolution of Media Face to face Sign language Voice language Graphics Broadcast media Theatre Books Telephone Radio Television The Internet & the Web

9 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 9 The Web Concept Formal Language and Protocol Graphical User Interface with a metaphor Weaving the Web The original design and ultimate destiny of the World Wide Web, by its inventor Tim Berners-Lee with Mark Fischetti.

10 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 10 The Web Concept The Metaphor The Web is more like a “library” than a “shopping mall”. Familiar metaphor Appropriate content Intuitive navigation Usable & Accessible with standard code

11 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 11 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. The Web Concept

12 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 12 The Web Culture Information is Relationship Information is Power Advertising v Information Collaboration

13 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 13 The Web Culture Information is Relationship “Knowledge thus exists in relationship rather than in an ‘objective’ world or 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

14 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 14 Information is Power Hierarchical Flow Centric One-way One to many Linear logic (1D+Time) Segregated Filtered (Reductionistic) Static Structure

15 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 15 Information is Power Democratic Flow Distributed One-to-one Many-to-many Process logic (2D+Time) Networked Contextual Dynamically Structured

16 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 16 Consumer Metaphor Sleeping Beauty (Tired!) Citizen Metaphor Cyber 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 Information

17 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 17 Information Management Accessibility Equality Transparency Universality Sustainability Collaboration

18 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 18 The Web Code The Language Web Presence Web Grammar Web Design Content & Management The Shared Experience

19 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 19 Web Presence Web Presence POP = Point of Presence Build it… so they can find it so they can find it … then they will come! … then they will come!

20 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 20 Web Domain Name POP = Point of Presence yourdomainname.com Registered with InterNic Addressed to a Web Host IP, Internet Protocol Web Presence Web Presence

21 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 21 Web Presence Web Presence It’s about networking Search Engine Robots Get listed in Directories Be Online 24/7/365 Develop Community Customer Centric

22 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 22 Web 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…

23 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 23 Web Grammar HTML hypertext markup language Document Type Definition Metatags Body, chapters, subchapters Accessibility Standards W3 - Industry Standard definitions Everything you need to know about Web Standards

24 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 24 Web Grammar Header & Metatags “page title” “description” “keywords” “author”

25 _________________ Page Title Sub title … whatever ___________________________________ LinK source code 25

26 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 26 Web Design Elements of Style Graphic Look & Feel Composition Font Styles Color palette Icons, illustrations & photos Motion media

27 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 27 Cognitive Modalities Perception Attention (Focus) Stimulus/Response Pattern Recognition Association Concept Formulation Creative Adaptation Web Design

28 Global Header (site name) Submenu Items Header – Page Title Subheader 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 ui po jpo t r 6rasd’;jakf[pwkf[w & special notes Items Global Navigation Menu bar items items items items items 28

29 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 29 Web Design Design Management Server-side includes (*.ssi) Cascading Style Sheets (*.css) Templates

30 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: #8000FF font-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; } source code CSS 30

31 My first styled page body { color: purple; background-color: #d8da3d } [etc.] Paragraph text source code CSS 31

32 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 32 Content Management Web Weaving versus the Story Line Networked v Linear Segmented v Contiguous “Parsed” v Composite Interactive v Sequential Integrated v Isolated

33 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 33 Content Management 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 KilianCrawford Kilian : “Writing for the Web”“Writing for the Web”

34 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 34 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 Content Management

35 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 35 Content Management Every page should answer these questions: – Who – What – Where – When – Why – How

36 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 36 Content Management “About” suggested info –Company background –Vision & Mission –Management/Key personnel –Awards/Professional affiliations –Location & territory –Contact: , Phone, Address –Job postings

37 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 37 Content Management 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.

38 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 38 The 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 2001The Semantic Web Web Weaver Glossary of Terms

39 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 39 The Future of the Web 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 2 nd version) XHTML SVG (Scalable Vector Graphics) Here goes video!

40 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 40 The Future of the Web Bigger, Faster, Smarter, Cheaper… even the audience will be transformed into story tellers and weavers, creating the web of human experience…

41 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 41 The Future of the Web Hyper-Human Skills We’re alive. Electronic systems aren’t. caring judgment intuition ethics inspiration friendliness imagination. How to Succeed in the Hyper-Human Economy Richard W. Swason The Futurist The Futurist - Sep-Oct 2004.

42 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 42 c²m=e ~ The Experience 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.

43 …to be continued…

44 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 44 This PowerPoint presentation is available for download at: b_Design_pps/Web_Design_KDB.pps Suggested reading list: read.shtml Web Design: Look, Feel & Function

45 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 45 Integrating Motion Media Sample Websites Ray Kurzweil Artificial Intelligence - The Brain -

46 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 46 Web Resources Links Books 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:

47 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 47 Web Resources Links Online Readings

48 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 48 Web Resources Links Online Tools –Page size & download time –Spell check –Link check validator.w3.org –HTML, CSS validation –Accessibility check

49 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 Sense of the Information Age Copyright 2005 Paradigm Communications, Inc. 49 Web Resources Links Desktop 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.htmlhome.snafu.de/tilman/xenulink.html


Download ppt "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."

Similar presentations


Ads by Google