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]] 14:14, 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]] 14:23, 22 October 2011 (CEST).


== Introduction ==  
== Introduction ==  
Line 77: Line 77:
* [http://www.webhostingsecretrevealed.com/featured-articles/30-must-see-web-generator-for-lazy-webmasters/ 30 Must See Web Generator for Lazy Webmasters] (Includes a list of online tools to generates various web page elements)
* [http://www.webhostingsecretrevealed.com/featured-articles/30-must-see-web-generator-for-lazy-webmasters/ 30 Must See Web Generator for Lazy Webmasters] (Includes a list of online tools to generates various web page elements)


== Some technical issues ==
== Technical and specialized issues ==


See also:
See also:
* [[CSS tutorial]]
* [[CSS tutorial]]
* [[Computer colors tutorial]]
* [[Computer colors tutorial]]
 
* [[Font readability]]
=== Making icons ===


* [http://www.simplebits.com/notebook/2004/08/23/anatomy.html The Anatomy of an Icon]. Short technical "how to" article.
* [http://www.simplebits.com/notebook/2004/08/23/anatomy.html The Anatomy of an Icon]. Short technical "how to" article.
=== Legibility of text ===
Serif fonts, all things being equal, are easier to read (except on a computer screen)
* [http://desktoppub.about.com/cs/typelegibility/ Type Legibility and Readability] Good reading, in particular for people also write for paper :)
* [http://www.faqs.org/faqs/fonts-faq/ Fonts FAQ], old but still very useful, e.g. [http://www.faqs.org/faqs/fonts-faq/part3/ part 3 ] and its Rules of Thumb section.


== Various ==
== Various ==
Line 110: Line 102:
* Here is very nice [http://www.vestige.org/ parody of Nielson's site]
* Here is very nice [http://www.vestige.org/ parody of Nielson's site]


== Evaluation ==
=== Evaluation ===


* [http://www.aptic.ulaval.ca/GUIDEW3EDUCATIF/ Guide de concption pédagogique et graphique d'un site éducatif sur le réseau Internet] (Univ. of Laval guide)
* [http://www.aptic.ulaval.ca/GUIDEW3EDUCATIF/ Guide de concption pédagogique et graphique d'un site éducatif sur le réseau Internet] (Univ. of Laval guide)

Revision as of 14:23, 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 14:23, 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 general process / design methods

This selection of various resources should particular address web design.

  • Web Style Guide, 3rd edition by Patrick J. Lynch and Sarah Horon. This is a popular free onlinebook. It covers the whole design process (including interface design, site structure, page structure, page design, etc.). Excellent book for beginners who aim to start creating web sites. A very early (popular in the nineties) version of this book was called the "Yale Style Guide".
  • 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

  • Universal Usability, a free online book by Sarah Horton doesn't only cover usability. Web site design is understood as a combination of function, interface, and content and covers issues like document structure, text, images, data tables, page layout, etc.
  • 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.

Graphics oriented design

Technical and specialized issues

See also:

Various

Evaluation

Links

Links either point to indexes or larger web sites that we didn't mention above.

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) *


Bibliography

Journals

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

=== Bibliographies

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