![[ ]](sp.gif) |
![[ ]](sp.gif) |
![[ 10th century Islamic (Iranian) bowl :: exquisite calligraphy ]](jpg/islamicBowl.jpg) |
"Planning before work protects you
from regret; prosperity and peace." |
![[ ]](sp.gif) |
Bowl. Iran. 10th century (45.7 cm) |
![[ ]](sp.gif) |
The Metropolitan Museum of Art
www.metmuseum.org |
| |
![[ ]](sp.gif) | |
![[ ]](sp.gif) |
![[ ]](sp.gif) |
Some thoughts about good web design |
![[ ]](sp.gif) |
Abstract:
Some ideas about good web page and website design.
These ideas are not proposed as the only guidelines for good web design, or
as good to apply to all websites. I feel they have proven to be good criteria for
this website, and that they are more broadly relevant. |
![[ ]](sp.gif) |
Selected pages from this website are offered
to illustrate these ideas, with reasons why each was chosen. | |
Note:
If you click the little webpage icon
( )
to go look at an example, please use your web browser's Back
button to return to this page. Please email me your
thoughts.
| |
|
![[ ]](sp.gif) |
![[ ]](sp.gif) | |
![[ ]](sp.gif) |
Web Design Criteria
n
important issue for every website, but one which becomes ever more important, the
larger the website grows, is to make it as easy as possible for the visitor to maintain orientation,
i.e., to keep the visitor from getting lost.
(This website currently has almost 400 static pages + numerous other pages
generated dynamically by "cgi scripts", and over 9,000 internal hyperlinks + over
1,000 links to external sites....)
Connected with this is the need to make
it as easy as possible for the user to find what's here, and to
arouse as much interest as possible to inspire the user to go check these things out.
--Unlike the Athenians sacrificed to the Minotaur in
the Labyrinth on Crete, if the visitor to my website finds it infelicitously
labyrinthine, they can simply click their web browser's Home button
and be done with me. --I cannot entrap a visitor in my website (I'm not
their teacher or their boss...); I must appeal to them to freely want
to stay on my website, and to explore and engage with it (i.e., with me).
I
have addressed the navigation and orientation issue
by including a rich variety of "layered" site maps,
tables of contents, etc., by employing a
consistent page format ("template", "style"...), and by liberally
displaying the "which way to?" icon (example at right),
to enable the user to return from wherever they are
to the Visual Site Map ("home base").
I have tried to help entice and facilitate the user to explore other
resources on the site by including links to related pages as part of the
navigation "apparatus" at the bottom
of each page.
A
secondary issue, once I have attracted the visitor's interest, is how to get them
to come back again (and again and again...). I have tried to
facilitate and encourage this by including near the top of my
home page, and in other "strategic" locations,
a "What's new here?" icon (example at right). A returning
visitor can quickly and easily get to what is new since their last visit, by clicking this icon to
go to the Change Log, where I list every
substantive modification to the site at the same time as I make the change itself.
Unless your website is very
simple and you change it infrequently, on every page, place last-modified date and
version number (since a page can be changed more than once in a single day).
This will help you know if you have lost anything, and enable you to
know what a visitor is responding to if they make some
response that does not make sense to you ("Which version is it you
are responding to? Please give me the version number at the bottom of the page....
Oh! I changed that long ago. Please let me know what you think of my current
version...." Place the URL of each page on the page so that if a person
finds some value in it, they can find it (find "you"...) again -- esp., if
they only see a printout of the page, or see it in a frame in somebody else's -- e.g.,
a search engine's -- web page.
In
the opposite direction, do yourself and your readers a favor and put an email response
link on every page. If the reader has a response and can't find a way to send it to you,
the reader gets frustrated, angry or just discouraged; you miss out on free advice. Do you have
any comments about this or anything else? Please
send them to me at: bradmcc@cloud9.net!
nother
of my design principles is: depth: I try to make as many things as possible on the
site link to some further elaboration of themselves. ("In my father's house are many
connecting rooms, attics and sub-basements"? -- contrast with the Levittown one-story house on a concrete slab....)
Example: The visual site map
is layered over the site Table of Contents, which is layered over
the site's "analytical table of contents" (and each "lower" level of
detail also links back to the higher levels...).... In addition, every image links to
something, if only to "itself", so that every page is as "alive" as possible. [Having
non-hyperlinking images link to themselves also facilitates users of the
Lynx "text mode"
web browser being able to view the images.]
A different kind of "depth" I cultivate is to make each page's
HTML source code syntactically correct
(web standards conformant),
and, hopefully, even itself beautiful, so that, if the visitor checks out the emperor
beneath his clothes, they will find that what's
"underneath"
is good, too.
"Depth" is also built up through formulaic deployment of
clearly and evocatively expressive elements (esp. icons
).
By encountering these same symbols over and over,
in different contexts, a person builds up around each an ever richer "associational aura",
so that when the element appears in one place, it evokes through referential allusion many other
enriching (in-form-ing) associations -- to rise as high as possible, above Pidgin, toward Shakespeare
and George Steiner.... Each page a little world (microcosm). The technical capability in HTML to traverse different
contexts of a symbol's use by clicking on it in one to go to another should be imaginatively
evocative (synergistic). [Is there also an analogy between iconic symbols on a webpage and
hallmarks in precious metal decorative arts?]
![[ ]](sp.gif) |
|
![[ ]](sp.gif) |
![[ ]](sp.gif) |
![[ Click me to visit website Icon Gallery! ]](gif/icon.gif) Icon
Gallery: Examples of icons I use in this website,
used to be here. Loading the many icons made this page very slow to load.
So I moved the Icon Gallery to its own page. To visit Icon Gallery,
Please click here.
Or: Click here to pop up Icon Gallery
in a new browser window. Thank you. |
![[ ]](sp.gif) |
No thin meaning ("superficiality"...),
and no "dead ends"! I hope the synergy of all the
methods I have described gives the visitor many places to explore,
and many ways to explore each ever further, while
never getting lost -- to enrich but not overwhelm (to offer an Internet
Rabelaisean study space,
and Abbey of Theleme, not a [Resnais-ean] "Last Year at Marienbad").

nother
basic design principle: Use only HTML 3.2, unless there is cogent reason to go beyond
it. This should help assure that the widest variety of web browsers, and not just recent
versions of Internet Explorer, can view the page in a way that doesn't
look too bad. [Of course, there is the still fortunately distant but alas not disappearing threat that
some day support for
<font color=maroon><b>formatting attributes in HTML tags</b></font>
may be removed from web browsers, even though those attributes are simple to understand,
easy to use, and part of W3C standards....]
The
main reason many of my pages are validated as HTML 4.01 Transitional instead of
HTML 3.2 is that I like to use different color backgrounds in table cells.
If a visitor's web browser does not support this feature, no major harm
will be done (my pages will just look more monochromatic...).
Also, I do not use HTML frames, in part because they are not universally
supported, but even more importantly, because Internet Search engines tend not
to index pages with frames well, and someone as "small" ("unknown", etc.) as myself
needs as good Search Engine rankings as I can get.
I
believe in the Bauhaus esthetic: "Less is more". I think exquisite
esthetic results can be produced with the restricted tag set of HTML 3.2 (especially
if extended with the single enhancement of the
TD tag BGCOLOR=
parameter! -- see, e.g.: my Katonah Museum page). I
strongly believe in deploying "white space" for all it's worth, for such reasons as to
give the person looking at the page "breathing room". (This derives from the
"Japanese esthetic" that the "negative space" around things is at least
as important as the "positive" shapes of the things in the space.)
![[ ]](sp.gif) |
Examples |
![[ Go to my home page! ]](GO/docimg.gif) |
Homepage. Provide as much important
information about the site as possible, in a clear, appealing, succinct way. Also:
Make it as easy a possible for Internet Search engines
(e.g., Altavista) to index the site -- since
getting high ranking on search engines is a primary way I can let persons know
the site exists and thereby give them the opportunity to visit (almost every page on the
site is at most 2 hyperlink "hops" from the home page). |
![[ Go to Visual site map! ]](GO/docimg.gif) |
Visual site map. Provide the visitor with
a "picture" (an over-view...) of the website, to help them find their way around in it. In addition to the visual
site map, the page also contains an HTML dropdown "selection list" of the site's
contents, and links to some site features of general interest (with brief descriptions of
why they may be of interest).
If the visitor clicks on the background of the visual site map (or on the "Table of Contents"
"button" in the map...), that takes
them to the site "Index/Table of Contents"
(a kind of "first basement" to the visual site map). |
![[ Go to website Table of Contents! ]](GO/docimg.gif) |
Website table of contents. It's dark in the
basement (go to the page to see what I mean here...). If the visitor is using
the Microsoft Internet Explorer 4.0+ web browser, however, each item lights up, when they
move their mouse cursor over it. (Clearly, the design I have used for this page
would not work well for most other purposes.) |
![[ Go to web page inventory! ]](GO/docimg.gif) |
Website page inventory. Page automatically
generated by a Perl script, from my "canonical" local disk
copies of the pages and their embedded HTML <TITLE> tags.
This automated process assures
the page inventory is accurate and complete. In the process of inventorying the pages, the script also checks them
for conformity to a number of formatting standards (e.g., making sure all the 1,400+
images have HTML ALT= parameters, and that the 15,000+
internal hyperlinks have valid target URLs). This
adds another "layer" of validation beyond my habit of submitting each page
to the W3C Consortium HTML syntax validator
each time I make any change. |
![[ Go to other interesting websites! ]](GO/docimg.gif) |
Links to other interesting
places on the Internet. I try to arouse the visitor's interest to visit these
sites, by offering each selection in its own little "presentation space"
(HTML table), by giving a synopsis of what the visitor will find if they
go there, and, where possible, also
displaying a little "teaser" picture from the site. |
![[ Go read things other persons have said that I like! ]](GO/docimg.gif) |
Quotes I like. Example of organizing
a lot of "tabular" information in a clear and appealing way. One reason for numbering as well as
dating each entry is, in yet another way, to try to help keep the
visitor from becoming disoriented among the large amount of material presented. |
![[ Find out: What time does your computer think it is? ]](GO/docimg.gif) |
What time does
your computer think it is? Example of a page that organizes a lot of hyperlinks
in an appealing way. See also: "it's About time" page, which uses
HTML tables to lay out
a number of quotes in a way that makes each stand out as distinct and special yet still
maintain their unity of theme.
(Also: Titles of these two pages are examples of how I try to use intriguing "word plays" to
engage the visitor.) |
![[ Visit the Katonah Museum of Art! ]](GO/docimg.gif) |
Katonah Museum of Art. Subtle use of "white space"
to make a web page in its entirety be a "work of art".
Note also: At the bottom of this page is a little box with numbers 1 thru 8:
Click these numbers to see other web pages which are mostly "visual" with very little
text. |
![[ Take the Bee-line bus line! ]](GO/docimg.gif) |
Convenient public transportation for the
Clintons' new home. Another example of "total design", in which even the
background plays a vital role in the page's expressivity. |
![[ Go to where you are! ]](GO/docimg.gif) |
Finally: this page itself --
including: its HTML source code....
I believe self-reflection is important -- so that we can give an accounting for ourselves,
have the delight of savoring our good experiences, and more....
As part of that orientation, I like self-referentiality (i.e., wherever possible,
an assertion should be evidence for the truth of what it asserts).
Question:
How well do you think this page illustrates the things I have said in
it?
|
![[ ]](sp.gif) |
|
Whenever I cannot think of something
interesting to add to this site, I feel discouraged.
Then I ask myself: "What is the worst, the least well done
thing I can think of on my website?" I then proceed to work on that,
to try to make it better. Raising the floor is at least as important as raising
the ceiling. | |
|
Whenever
else you do, Add value ("value added"). What
value are you going to add to human[e] culture [aka: Civilization...] in the next 24 hours? |
|
|
This
website is increasingly becoming an integrated self-auditing system. Item:
Icon Gallery page (iconGallery.html) does not just display the various icon images
I use throughout this website to improve navigational coherence (etc.). My site audit
script (titles.pl)
reads iconGallery.html, and builds a list of all the
images in it. The script uses this list to distinguish "icons" (pointer signs) from substantive
images (pictures which primarily say something in themselves),
in counting images used in the site. |
|
|
![[ ]](sp.gif) |
|
![[ ]](gif/sp1.gif) |
![[ ]](gif/sp1.gif) |
![[ ]](gif/sp1.gif) |
![[ ]](sp.gif) |
![[ ]](sp.gif) |
![[ ]](sp.gif) |
|
E-mail me your thoughts about my website
and website design in general. | | |
|
| |
![[ ]](sp.gif) |
![[ Doraemon and Fortune Cat wish you good luck! ]](gif/fr-maneki-neko.gif) |
![[ ]](sp.gif) |
Visit my icon Gallery.
See table of colors used in this website.
|
![[ Visit icons and color palette gallery! ]](sq/next2x.gif) |
Inspect
the HTML source code for this page.
Learn |
right vs wrong way to code HTML tags: Do it right! |
Read document announcing HTML 3.2.
Go |
to thoughts on:
What is the purpose, use and value of this website? |
Read |
website copyright © notice, and Terms and conditions of use. |
|
![[ What's new here? ]](WhatsNew.gif) |
What's new on this website?
Go to website Table of Contents.
Return to Brad McCormick's home page.
Go to site map. |
|
|
|
![[ ]](gif/sp1.gif) |
![[ ]](sp.gif) |
http://www.cloud9.net/~bradmcc/designGallery.html
Copyright © 1998-2006 Brad McCormick, Ed.D.,
Invenit et fecit. bradmcc@cloud9.net  |
![[ Loose HTML 4.01 Checked! Test me! ]](valid_html4_01.gif) |
![[ ]](gif/sp1.gif) |
![[ ]](sp.gif) |
16 January 2009CE (2009-01-16
ISO 8601)
|
|
![[ ]](gif/sp1.gif) |
![[ ]](sp.gif) |
|
![[ ]](sp.gif) |
|
![[ ]](sp.gif) |
|
![[ ]](sp.gif) |