Daniel K. Schneider: Text replacement - "$" to " {{edutechwiki}}"

2021-04-10T00:19:20Z

Text replacement - "$" to " {{edutechwiki}}"

← Older revision		Revision as of 02:19, 10 April 2021
Line 158:		Line 158:
	[[Category: Web technology tutorials]]		[[Category: Web technology tutorials]]
	[[Category: Ergonomics and human-computer interaction]]		[[Category: Ergonomics and human-computer interaction]]
			{{edutechwiki}}

Daniel K. Schneider: 1 revision imported

2021-04-09T22:19:26Z

1 revision imported

← Older revision	Revision as of 00:19, 10 April 2021
(No difference)

Daniel K. Schneider: Text replacement - "" to ""

2016-08-22T16:58:33Z

Text replacement - "<pageby nominor="false" comments="false"/>" to ""

New page

{{Stub}}


This page is '''horribly''' outdated. - Fixing it a bit right now over the next two days - [[User:Daniel K. Schneider|Daniel K. Schneider]] 14:41, 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 [[Category:Interaction design, user experience and usability|category Interaction design, user experience and usability]]
* Articles on general and other subjects-related [[:Category:Design methodologies|design methodologies]]

'''Things to do''' - [[User:Daniel K. Schneider|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 [[: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 ===

=== 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.

* [http://webstyleguide.com/wsg3/index.html 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".

* [http://www.alistapart.com/stories/method/index.html A Design Method] List Apart article by Ross Olson, July 2000.

* [http://www.foruse.com/articles/beyond.htm Beyond User-Centered Design and User Experience: Designing for User Performance] by Larry Constantine, 2005. Argues that {{quotation|model-driven approaches based on fine-grained task models have a proven record of leading to dramatic improvements in user performance through innovative designs.}}

* [http://www.foruse.com/articles/activitymodeling.htm 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 [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://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

=== 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. 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://www.universalusability.com/index.html 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.

* [http://www.w3.org/Provider/Style/Overview.html 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 "''do''s" and "don'ts".

* [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://catb.org/~esr/html-hell.html HTML Hell Page] (probably written in the late nineties). Written by Eric Raymond, a well-known open source advocate and contributor.

* [http://www.digital-web.com/features/feature_2002-09.shtml 99.9% of Websites Are Obsolete] by Jeffrey Zeldman, 2002

=== Graphics oriented design ===

* [http://lynda.com/ lynda.com], Lynda Weinmann's web master site includes design-oriented articles.
* [http://www.wpdfd.com/wpdhome.htm Web Page Design for Designers]
* [http://www.webreference.com/graphics/ Graphics at webrefence.com]
* [http://www.PRAYSTATION.com/ Praystation]State of the Art Designed Site
* [http://www.hu.mtu.edu/~awysocki/mOrder/mOrder0.html Monitoring Order: Visual desire, the Organization of web pages, and teaching rules of Design] article by Anne F. Wysocki.
* [http://iota.gmu.edu/users/trafton/305st.html whether a 2D or a 3D interface is better] on-line Tutorial by Greg Trafton
* [http://www.k10k.net/ Kaliber10000] (The Designer's Lunchbox). CPU & bandwidth hugging
* [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)

== Technical and specialized issues ==

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

* [http://www.simplebits.com/notebook/2004/08/23/anatomy.html The Anatomy of an Icon]. Short technical "how to" article.
* [http://www.w3.org/TR/webarch/ Architectural Principles of the World Wide Web], W3C Recommendation 15 December 2004 (a different suject, but HTML producers ought to know this)

== Various ==
* [http://www.tauzero.com/Brenda_Laurel/Recent_Talks/PeopleCommunitiesService.html "People, Communities, and Service: Shaping the Future of the Internet"] (1999), a Brenda Laurel Talk (some design principles for government services online)

* [http://www.op.net/~mjd/judo/presentation/ Conference Presentation Judo] (how to give conferences by M.J. Dominus)
* Here is very nice [http://www.vestige.org/ parody of Nielson's site]

=== Evaluation ===

; General quality

* [http://library.usm.maine.edu/research/researchguides/webeval.php Checklist for Evaluating Web Resources] A short list made for judging the quality of a web page. (USM, retrieved oct. 2011).
* [http://olinuris.library.cornell.edu/ref/research/webcrit.html Five criteria for evaluating Web pages] (Cornell, retr. oct. 2011 based on Kapoun, Jim. "Teaching undergrads WEB evaluation: A guide for library instruction." C&RL News (July/August 1998): 522-523.
* [http://www.widener.edu/libraries/wolfgram/evaluate Evaluate Web Pages] (Widener Univ., retr. oct. 2011).

== Links ==

Links either point to indexes or larger web sites that we didn't mention above. The selection is very poor. For now I just killed the dead links (most of what I had) - [[User:Daniel K. Schneider|Daniel K. Schneider]] 14:13, 23 October 2011 (CEST).

See also (and always) the links in the [[Interaction design, user experience and usability]] (includes essential introductory resources), [[usability]], [[web usability]] and [[User interaction and user interface design]] articles.

=== Web Design Links, Portals & Zines ===

* [http://www.zeldman.com/ Zeldman] (Web designer related to [[http://www.alistapart.com/ A List A Part]
* [http://www.htmlhelp.com/links/ Links at The Web Design Group]
* [http://www.asktog.com/menus/designMenu.html Design Pages] by Bruce 'Tog' Tognazzini at AskTog, a list with good unsorted pointers
* [http://www.ericbrooks.com/whuzzup/ Whuzzup] by Eric Brooks
* [http://www.mezzoblue.com/cgi-bin/mt/mezzo/archives/000238.asp Standards: Designing For the Future] by Ian Lloyd

=== Programming ===

* [http://java.sun.com/products/jlf/dg/index.htm Java Look and Feel Design Guidelines]
* [http://www.fawcette.com/interviews/beck_cooper/ Extreme Programming vs. Interaction Design]

=== Design of documentation ===

* [http://www.acm.org/sigdoc/ sigDOC / ACM]

=== Examples ===

* [http://Suck.com Suck.com]

* [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)
* 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)
* Some Players in design world: [http://www.organic.com/home.html Organic] * [http://www.entropy8zuper.org/ e8z] (A Harvey) *

== Bibliography ==

=== Journals ===

* [http://mitpress.mit.edu/journal-home.tcl?issn=07479360 DesignIssues] The MIT Press Journal's site (a few on-line articles)

=== Bibliographies ===

* INDEX: Jakob Nielsen has a [http://www.useit.com/books/ list of recommended books] including his own Designing Web Usability: The Practice of Simplicity (recommended)
* INDEX: Bruce Tognazzini also has a nice [http://www.asktog.com/books/booksDesign.html list of more general Design] Books

=== Academic ===

* 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, [http://dx.doi.org/10.1080/10447310801920508 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. [http://www.paper.edu.cn/index.php/default/releasepaper/downPaper/200903-866 PDF]
* Engelbart, Douglas C. (1992). [Augmenting Human Intellect: A Conceptual Framework], Read for some vision what we could use modern technology for. See also: [http://www.dougengelbart.org/ other publications and projects]).
* 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). [http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.83.2059&rep=rep1&type=pdf PDF]

[[Category: Links]]

[[Category: Web authoring]]
[[Category: Web technology tutorials]]
[[Category: Ergonomics and human-computer interaction]]

Web design links - Revision history

Daniel K. Schneider: Text replacement - "$" to " {{edutechwiki}}"

Daniel K. Schneider: 1 revision imported

Daniel K. Schneider: Text replacement - "" to ""