Web design links: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 2: Line 2:
<pageby nominor="false" comments="false"/>
<pageby nominor="false" comments="false"/>


This page is '''horribly''' outdated. - Fixing it a bit right now over the next two days - [[User:Daniel K. Schneider|Daniel K. Schneider]] 13:09, 22 October 2011 (CEST).
This page is '''horribly''' outdated. - Fixing it a bit right now over the next two days - [[User:Daniel K. Schneider|Daniel K. Schneider]] 13:27, 22 October 2011 (CEST).


== Definition ==  
== Definition ==  
Line 38: Line 38:
* John December's [http://www.december.com/web/develop.html Web Development] (John Decembmer has built the first widely used Web Portal about Web Design in 1992).  
* John December's [http://www.december.com/web/develop.html Web Development] (John Decembmer has built the first widely used Web Portal about Web Design in 1992).  


* [http://philip.greenspun.com/panda/ Philip and Alex's Guide to Web Publishing] by Philip Greenspun (M.I.T). This free online book covers two broad categories of Web sites. The first is Web Publishing, i.e. vaguely magazine-like. The second broad category is Web-based Application.
A nice complement for developers is [http://philip.greenspun.com/seia/ Software Engineering for Internet Applications]


* [http://glassdog.com/design-o-rama/index.html Glassdog's Intro to Webdesign] (Lance Arthur)
* [http://www.w3.org/Provider/Style/URI Cool URIs don't change] by TBL
* [http://www.arsdigita.com/books/panda/index.html Philip and Alex's Guide to Web Publishing]
* [http://www.web-redesign.com/ Web Redesign] support site (some downloads) for the K. Goto's and E.Cotler's book
* [http://www.web-redesign.com/ Web Redesign] support site (some downloads) for the K. Goto's and E.Cotler's book
* [http://www.hypertextnavigation.com/ Rapid Navigation in Online Documents] Several good texts by Michael Hoffman on "Design of documents and viewers to support structured hypertext and easy skimming"
* [http://www.hypertextnavigation.com/ Rapid Navigation in Online Documents] Several good texts by Michael Hoffman on "Design of documents and viewers to support structured hypertext and easy skimming"
Line 49: Line 48:
=== Style in the light of usability ===
=== Style in the light of usability ===


As we pointed out in the introduction, you also may have a look at our resources on [[Category:Interaction_design,_user_experience_and_usability| Interaction design, user experience and usability]]. Pointers below rather point to simple technical recipees of what to do and not to do in a web design.
As we pointed out in the introduction, you also may have a look at our resources on [[Category:Interaction_design,_user_experience_and_usability| Interaction design, user experience and usability]]. Pointers below rather point to simple technical recipees of what to do and not to do in a web design. Other's can be rather found in the usability literature, e.g. Nielson's well known [http://www.useit.com/alertbox/9605.html Top 10 Mistakes in Web Design]


* [http://info.med.yale.edu/caim/manual/ Yale Style Manual]
* [http://info.med.yale.edu/caim/manual/ Yale Style Manual]
Line 56: Line 55:


* [http://www.htmlhelp.com/design/ WDG's Design Elements]. The Web Design Group is organization that fights for stable standards. (last update: 2007, as of oct 2011). Its [http://www.htmlhelp.com/design/style/ Style guide for online hypertext] is based on the W3C (Berners-Lee guide) above.
* [http://www.htmlhelp.com/design/ WDG's Design Elements]. The Web Design Group is organization that fights for stable standards. (last update: 2007, as of oct 2011). Its [http://www.htmlhelp.com/design/style/ Style guide for online hypertext] is based on the W3C (Berners-Lee guide) above.
* [http://www.w3.org/Provider/Style/URI Cool URIs don't change] by TBL/W3C. Argues that URL's should remain stable. {quotation|URIs don't change: people change them.}}


* [http://www.tlc-systems.com/webtips.shtml Art and the Zen of web sites] Tony Karp / TLC (last modified december 2002). Quite similar to the W3C and recommendations.
* [http://www.tlc-systems.com/webtips.shtml Art and the Zen of web sites] Tony Karp / TLC (last modified december 2002). Quite similar to the W3C and recommendations.
Line 156: Line 157:
== Examples ==
== Examples ==


*  
* [http://Suck.com Suck.com]
 
* [http://webmutant.com/webpaper.html WebMutant's Design Paper]
* [http://webmutant.com/webpaper.html WebMutant's Design Paper]
* [http://www.fivesevensix.com/studies/onetruefit/ One True Fit - standards design] by Ryan Carver, paper will attempt to give an overview how he built Lee Jeans - One True Fit. (2003)
* [http://www.fivesevensix.com/studies/onetruefit/ One True Fit - standards design] by Ryan Carver, paper will attempt to give an overview how he built Lee Jeans - One True Fit. (2003)
* On-line Zines are always a good source of inspiration. [http://www.jwz.org/bookmarks.html jwz's] bookmarks point to a number of them (dig a bit)
* On-line Zines are always a good source of inspiration. [http://www.jwz.org/bookmarks.html jwz's] bookmarks point to a number of them (dig a bit)

Revision as of 12:27, 22 October 2011

Draft

<pageby nominor="false" comments="false"/>

This page is horribly outdated. - Fixing it a bit right now over the next two days - Daniel K. Schneider 13:27, 22 October 2011 (CEST).

Definition

Right now, this is a quick and dirty (!!) page with pointers about WWW design and style. Entries should have real contents useful to web designers.

See also:

Things to do - Daniel K. Schneider 17:27, 1 September 2008 (UTC)

  • Move the french pointers to the french wiki
  • Check links and kill a few useless ones
  • Comment the better links
  • Reorganize (!)
  • Add a few definitions

See also many entries in the categories web technologies, web technology tutorials, usability and Ergonomics and human-computer interaction

Style recommendations (without visual design)

Visual design recommendations

Web design links

The process / design methods

Here is a selection of various resources

  • John December's Web Development (John Decembmer has built the first widely used Web Portal about Web Design in 1992).
  • Philip and Alex's Guide to Web Publishing by Philip Greenspun (M.I.T). This free online book covers two broad categories of Web sites. The first is Web Publishing, i.e. vaguely magazine-like. The second broad category is Web-based Application.

A nice complement for developers is Software Engineering for Internet Applications

  • Web Redesign support site (some downloads) for the K. Goto's and E.Cotler's book
  • Rapid Navigation in Online Documents Several good texts by Michael Hoffman on "Design of documents and viewers to support structured hypertext and easy skimming"
  • Nathan Shedroff's papers and presentations ( Quote: ".... to understand the mechanics of communication on a deeper level. The components of expressing and communicating in several media as well as the elements of creating rewarding experiences are important for me to master--no matter what medium."
  • Web design, Wikipedia

Style in the light of usability

As we pointed out in the introduction, you also may have a look at our resources on. Pointers below rather point to simple technical recipees of what to do and not to do in a web design. Other's can be rather found in the usability literature, e.g. Nielson's well known Top 10 Mistakes in Web Design

  • Style Guide for online hypertext. This document was written by Tim Berners-Lee in the early days (1992). Still an interesting read. In particular, it includes a few basic "dos" and "don'ts".
  • Cool URIs don't change by TBL/W3C. Argues that URL's should remain stable. {quotation|URIs don't change: people change them.}}
  • HTML Hell Page (probably written in the late nineties). Written by Eric Raymond, a well-known open source advocate and contributor.

Making icons

Graphics oriented design

Various

Fun

Journals

  • DesignIssues The MIT Press Journal's site (a few on-line articles)

Printed Books

Legibility of text

Serif fonts, all things being equal, are easier to read (except on a computer screen)

Web Design Links, Portals & Zines

Also, dig in above's links, most major WebDesign resources have a link page !!

General Design

See also: usability, web usability, human-computer interaction, etc.

Programming

Design of documentation

Examples

  • One True Fit - standards design by Ryan Carver, paper will attempt to give an overview how he built Lee Jeans - One True Fit. (2003)
  • On-line Zines are always a good source of inspiration. jwz's bookmarks point to a number of them (dig a bit)
  • Some Players in design world: Organic * e8z (A Harvey) *

Evaluation

Bibliography

  • Michael Bauerly and Yili Liu (2011). Effects of Symmetry and Number of Compositional Elements on Interface and Design Aesthetics, International Journal of Human-Computer Interaction, DOI: 10.1080/10447310801920508
  • Bi, L., Fan, X., Zhang, G., Liu, Y., and Chen, Z. 2009. Effects of symmetry and number of compositional elements on Chinese users' aesthetic ratings of interfaces. International Journal of Human-Computer Interaction, accepted for publication. PDF
  • Wolf, T.V., Rode, J.A., Sussman, J., and Kellogg, W.A. 2006. "Dispelling design as the "Black Art" of CHI," Proceedings of CH, 2006 Conference (Montreal, Quebec, Canada, 22-27 April). PDF