Web design links: Difference between revisions
m (using an external editor) |
m (using an external editor) |
||
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: | 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). | ||
== | == 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]] | ||
== | === 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://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
<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:
- Interaction design, user experience and usability, Design and usability methods and techniques and related articles in the
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
- A Design Method List Apart article by Ross Olson, July 2000.
- Beyond User-Centered Design and User Experience: Designing for User Performance by Larry Constantine, 2005. Argues that “model-driven approaches based on fine-grained task models have a proven record of leading to dramatic improvements in user performance through innovative designs.”
- Activity Modeling: Toward a Pragmatic Integration of Activity Theory with Usage-Centered Design by Larry Constantine, 2006. Activity theory and usage-centered design are outlined and the connections between the two are highlighted. Simple extensions to the models of usage-centered design are introduced.
- 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 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.
- 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".
- WDG's Design Elements. The Web Design Group is organization that fights for stable standards. (last update: 2007, as of oct 2011). Its Style guide for online hypertext is based on the W3C (Berners-Lee guide) above.
- Cool URIs don't change by TBL/W3C. Argues that URL's should remain stable. {quotation|URIs don't change: people change them.}}
- Art and the Zen of web sites Tony Karp / TLC (last modified december 2002). Quite similar to the W3C and recommendations.
- HTML Hell Page (probably written in the late nineties). Written by Eric Raymond, a well-known open source advocate and contributor.
- WebWonk Siegel's 1997 tips (still ok)
- Acessible Web Design
- CIWAS FAQ (comp.infosystems.www.authoring.stylesheets )
- 99.9% of Websites Are Obsolete by Jeffrey Zeldman, 2002
- Architectural Principles of the World Wide Web (a different suject, but HTML producers ought to know this)
Making icons
- The Anatomy of an Icon. Short technical "how to" article.
Graphics oriented design
- lynda.com, Lynda Weinmann's web master site includes design-oriented articles.
- Web Page Design for Designers
- Graphics at webrefence.com
- PraystationState of the Art Designed Site
- Monitoring Order: Visual desire, the Organization of web pages, and teaching rules of Design article by Anne F. Wysocki.
- whether a 2D or a 3D interface is better on-line Tutorial by Greg Trafton
- Kaliber10000 (The Designer's Lunchbox). CPU & bandwidth hugging
- 30 Must See Web Generator for Lazy Webmasters (Includes a list of online tools to generates various web page elements)
Various
- "People, Communities, and Service: Shaping the Future of the Internet" a Brenda Laurel Talk (some design principles for government services online)
- AUGMENTING HUMAN INTELLECT: A Conceptual Framework, D. Engelbart's 1962 text, read for some vision what we could use modern technology for .... see what he is doing today boostrap.org
- [http://thot.cursus.edu/rubrique.asp?no=5978 Comment citer un document �lectronique dans une bibliographie] (how to cite electronic source, english version needed too)
- MUST, Site of a danish Method for Participatory Design, includes a good short description.
- Understanding Interactivity A few online chapters from a book by Chris Crawford
- Persuasion and Web Survial A Webreference Newslettre feature
- On a related note: Technical Writing at Suite101
- So You Want to Write a Book (O'Reilly)
- Conference Presentation Judo (how to give conferences by M.J. Dominus)
Fun
- Here is very nice parody of Nielson's site
Journals
- DesignIssues The MIT Press Journal's site (a few on-line articles)
Printed Books
- INDEX: Jakob Nielsen has a list of recommended books including his own Designing Web Usability: The Practice of Simplicity (recommended)
- INDEX: Bruce Tognazzini also has a nice list of more general Design Books
Legibility of text
Serif fonts, all things being equal, are easier to read (except on a computer screen)
- Type Legibility and Readability Good reading, in particular for people also write for paper :)
- Fonts FAQ, old but still very useful, e.g. part 3 and its Rules of Thumb section.
Web Design Links, Portals & Zines
Also, dig in above's links, most major WebDesign resources have a link page !!
- Zeldman (Web designer related to [A List A Part
- Links at The Web Design Group
- Design Pages by Bruce 'Tog' Tognazzini at AskTog, a list with good unsorted pointers
- Usability 1st Usability Portal (including groupware)
- Susan Carter's links a Web Designer who works for small businesses
- Whuzzup by Eric Brooks
- Usability at webreference.com
- designshops.com A directory of Web design firms, news, tutorials, etc..
- Web Accessibility Initiative (a W3C group)
- WebWord Usability Weblog
- Interface Mafia
General Design
See also: usability, web usability, human-computer interaction, etc.
- European Usability Support Centres has free resources on-line (including papers and guidelines on design)
- The Design Management Institute has a few good links to general design
- Don Norman's Website
- Interaction Architect.com
- Participatory Design page at Computer Professionals for Social Responsibility
- HCI Bibliography
- Bad Human Factors Design
- Oxford Good Design Guide
- Standards: Designing For the Future by Ian Lloyd
- User Friendly, the Comic Strip (humour)
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
- Guide de concption pédagogique et graphique d'un site éducatif sur le réseau Internet (Univ. of Laval guide)
- Evaluating Web Resources (good teaching materials, ok for self-learning too). See also J.E. Alexander's and M.A. Tate's Web Wisdom book.
- évaluation d'un site Web (une petite liste)
- The CyberMetricssite has a lot of good links to quantitative methods (a lot on the quality of search tools)
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