• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Elements Of Web Design
 

Elements Of Web Design

on

  • 7,696 views

Lecture 1 for 2008/09 Web Design Principles class.

Lecture 1 for 2008/09 Web Design Principles class.

Statistics

Views

Total Views
7,696
Views on SlideShare
7,358
Embed Views
338

Actions

Likes
26
Downloads
732
Comments
1

12 Embeds 338

https://blackboard.uwe.ac.uk 267
http://www.slideshare.net 33
http://www.techgig.com 15
http://visualcommunication.tistory.com 6
http://softdevelopers.blogspot.com 6
http://softdevelopers.blogspot.in 3
http://www.linkedin.com 3
https://blackboard.uoregon.edu 1
http://www.brijj.com 1
http://www.softdevelopers.blogspot.com 1
http://www.fiserv.techgig.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi ,Dan D. I am participating in a contest and your slide I liked very much,because in my company we work with web design and SEO, so I invited, to visit my slide and if it likes, please addme to your favorites, thank you very much Check out this SlideShare

    http://slidesha.re/5Td1I5

    Please Addme to your favorite ’♥’ bye bye
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Elements Of Web Design Elements Of Web Design Presentation Transcript

    • The elements of web design
    • Duality • Technology • Semester 1 • Design • Semester 2
    • Design
    • A basic duality: The Web was originally conceived as a hypertextual information space; 30 March 2000 but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Web as software interface Concrete Completion Web as hypertext system Visual Design: visual treatment of text, Visual Design: graphic treatment of interface elements (the quot;lookquot; in quot;look-and-feelquot;) Visual Design graphic page elements and navigational components Interface Design: as in traditional HCI: Navigation Design: design of interface design of interface elements to facilitate elements to facilitate the user's movement user interaction with functionality Interface Design Navigation Design through the information architecture Information Design: in the Tuftean sense: designing the presentation of information Information Design Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding to facilitate understanding Interaction Design: development of Interaction Information Information Architecture: structural design time application flows to facilitate user tasks, defining how the user interacts with Design Architecture of the information space to facilitate intuitive access to content site functionality Functional Specifications: quot;feature setquot;: detailed descriptions of functionality the site Functional Content Content Requirements: definition of content elements required in the site must include in order to meet user needs Specifications Requirements in order to meet user needs User Needs: externally derived goals User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. User Needs for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Site Objectives Site Objectives: business, creative, or other internally derived goals for the site task-oriented Abstract Conception information-oriented This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. © 2000 Jesse James Garrett http://www.jjg.net/ia/ JJG - elements of web design
    • JJG - elements of web design
    • Web as hypertext • Information oriented
    • Web as software • Task oriented
    • The surface - visual design • Colour • Typography • Visual elements • Branding ➡ Emotion
    • Skeleton - layout • Interface design • Navigation design • Information design ➡ Readability ➡ Understandability
    • Structure • Information Architecture • Interaction Design
    • Scope - requirements NCE • Functional specification • What will it do? • Content requirements • What information does it hold? in which the various features and Just what those features and func-
    • Just what those features and func- Strategy of the site. Some sites that sell books s to save previously used addresses uestion of whether that feature—or • User needs te is a question of scope. • Who will be using it and why? • Site objectives • Who is creating it and why? ermined by the strategy of the site. nly what the people running the site
    • Exercise • Get into pairs • Look at exercise 1 on Blackboard
    • Technology
    • Technology • HTTP • Servers & Browsers • (X)HTML • CSS • Document Object Model • Javascript • AJAX
    • Standards • HTTP • (X)HTML • CSS • ECMAscript (javascript)
    • Servers & Browsers • Web Servers • Web Clients • Browsers, RSS readers, other sites • Proxies and Firewalls
    • HTML • HyperText Markup Language • Structurally describes content •
    • XML • Data exchange SGML • Description XML HTML • Dynamic RSS 2.0 XHTML formats
    • (X)HTML <ul id=quot;oParentquot;> <li>Node 1</li> <li id=quot;oNodequot;>Node 2</li> <ul> <li>Child 1</li> <li ID=quot;oChild2quot;>Child 2</li> <li>Child 3</li> </ul> <li>Node 3</li> </ul>
    • Document Object Model
    • Document Object Model • Use for Javascript • Use for CSS • DOM scripting is NOT DHTML
    • CSS • Cascading Style Sheets • Separate style from content • Cascade • Inherit
    • Standards based design • Using XHTML, CSS and javascript to deliver usable, accessible and beautiful sites • Open, and understandable to other designers and developers
    • Javascript
    • AJAX
    • Validation • HTML • http://validator.w3.org/ • CSS • http://jigsaw.w3.org/css-validator/ • Javascript • Tools > Console • FIREWALLS & PROXIES
    • View Source • View Source • View Source • View Source • View Source • View Source • View Source • View Source
    • Exercise • Get into pairs again • Look at exercise 2 on Blackboard
    • Exam question • Explain the differences between web sites as hypertext systems or as software applications. What are the key differences between designing for these two different kinds of sites?
    • Images JJ Garrett, Elements of Web Design Wikimedia, creative commons images ICHC for the image above.