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:27, 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:54, 22 October 2011 (CEST).


== Definition ==  
== Introduction ==  


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.  
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.  
Line 20: Line 20:
See also many entries in the categories [[:category:web technologies|web technologies]], [[:category:web technology tutorials|web technology tutorials]], [[usability]] and [[:category:Ergonomics and human-computer interaction|Ergonomics and human-computer interaction]]
See also many entries in the categories [[:category:web technologies|web technologies]], [[:category:web technology tutorials|web technology tutorials]], [[usability]] and [[:category:Ergonomics and human-computer interaction|Ergonomics and human-computer interaction]]


== Style recommendations (without visual design) ==
=== The process ===


== Visual design recommendations ==
=== Style recommendations (without visual design) ===
 
=== Visual design recommendations ===


== Web design links ==
== Web design links ==
Line 38: Line 40:
* 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.
* [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]
A nice complement for developers is [http://philip.greenspun.com/seia/ Software Engineering for Internet Applications]
 
* [http://www.web-redesign.com/ Web Redesign 2.0] by K. Goto and E.Cotler. The site is a companion site for a book. The online materials include some interesting check lists.


* [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.nathan.com/thoughts/ 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."
* [http://en.wikipedia.org/wiki/Web_design Web design], Wikipedia
* [http://en.wikipedia.org/wiki/Web_design Web design], Wikipedia



Revision as of 13:54, 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:54, 22 October 2011 (CEST).

Introduction

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

The process

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).
  • Web Redesign 2.0 by K. Goto and E.Cotler. The site is a companion site for a book. The online materials include some interesting check lists.

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