Wondering how Dr NAD made this above and these other multicolor images of cells by merging and colorizing multiple grayscale images?
...merged and colorized to...
Here are the instructions for doing it in Adobe's Photoshop.
| Dr. NAD's Web Design Tips|
Brief, preliminary thoughts
This page is poorly designed. It's principal intent is its content. Someday, I'll ambitiously design it. To see design based on the principles that follow, start surfing from the home page, not looking for much on this page. By the way, little notes to your audience, like this one, completely suck.
Consider making it easy on your readers
Look...hear this, repeat this, assimilate this, don't ignore it because you see it so often:
|Think about what computer set-up they may be usingit is likely to be significantly different from yours!|
Do you really want to exclude them by asinine snobbery ("they should get a clue, get current, etc.")? For example, you can almost always design without frames, or clickable image maps. And, though tougher, Java and other special features aren't essential for an effective site, whereas there is simply no substitute for the power of forms. Those are just opinions, but be informed before you form yours.
|Many of your prospective audience cannot/will not optimize or update their computer systems.|
Your pages may look and function sweetly on your system, but here are some thoughts to consider about how miserable they may be on others'. Make compromising assumptions, and use those settings when designing. (Dr NAD's assumptions are reflected in the "TIP"s sections.)
The form-text input boxes below in this column:
Only need to fill in e-mail once. Can wait to fill every comment box on the page before you click .
Netscape users: Though they don't look it when pointing to them, are clickable below; you'll notice activity after clicking them.
To experiment with screen resolutions on many PCs, click the icon for "ATI Desktop" or "Mach 64," or find the *.exe program in a "mach64" or "atidesk" folder.
First cardinal sin: Ignorance of user variation in...
Monitor screen size and resolution
They come in many sizes, and current monitors can be programmed to work at many "resolutions" (how much can fit on the screen).
- Typical screen resolutions are 640x480, 800x600, and 1024x768 (how many "pixels" fit across x how many fit vertically).
- At higher resolutions, text/pics are smaller (hard to read/see?) exacerbated by a smaller monitor.
- NN may make text a different size vs. MS Internet Explorer IE, which may also allow a user to select sizes (esp. easy in IE).
- Different text sizes and fonts (i.e., e.g., Times New Roman or Arial or Courier or text) may appear differently, too.
- The HTML used to render non-default text effects and formats does not appear to the user, but can make the file's size e.g. 5X larger than without longer for your user to load!
Assume most have ~15" monitor at 800x600.
640x480 need to get a clue.
1024x768- used to squinting, or >15" monitors.
Know other video control names?
Or about this stuff on a Mac?:
Color resolution is set usually by the same control as screen size/resolution (the *.exe program in a "mach64" or "atidesk" folder).
Second cardinal sin: Ignorance of variation in...
Monitor color "depth/resolution"
Current monitors can be programmed for many color settings (how many different colors the monitor can display). Typical designations:
256 colors (256)
16.7 million (16.7M)
- Different browsers display different colors.
- E.g., NN only displays 216 "actual" colors; others are "dithered" (see below).
- Colors may look different in NN vs. IE.
- Some nominally different colors might look identical in a browser (esp., e.g., @ 256 colors).
- By optical illusion or because of how a browser creates these things, a color may look different as a background vs. text vs. graphic (even on the same system!).
Assume most users are @ 256 colors.
This hurts for some reasons, but browsers aren't all too great at dealing with non-"actual" colors anyhow.
The biggest sadness is for "dithering" (see below) of sweet photos with intended "depth."
Many users don't even know about changing their monitor's color depth (or size/resolution).
Know other video control names?
Or about this stuff on a Mac?:
Anyone who ever designs anything with text must review the Web Wonk site for authoritative, professional typography insights.
Some cases in point
If you're at 800x600 right now, this section may not have as large an impact on you, so check it out at >800x600 (e.g., 1024x768). Also, if you're using IE instead of NN, the stuff that's coded to be smaller (on the yellow background below) may not look smaller. Adjust IE's font so it is.
Pure black on pure white isn't really too nice on a monitor. A very light background helps soften it for long reading. In fact, the background of this page isn't really pure white, it's FFFBF0 (you can tell this by observing the form's input text boxes in the far right columnthey are pure white.
Try ffffe0 (a light yellow used here; and recall variability in viewers' color resolution). This is especially recommended with TNR size 2 seen here.|
Here, the text is at the edge of the color bad. Use cellpadding / cellspacing (not used here).
Also notice how bold and how italics suck at this size.
Arial italics suck at any size.
IN LONG PASSAGES, OCCASIONALLY YOU MAY GET AWAY WITH SIZE=1 FOR FOR TNR OR ARIAL AS A "SMALL CAPS" EFFECT, but never use lowercase size=1 it simply can't be read at >800x600.
|Could you imagine reading 10¶s in this color combo? Bold might help, italics always suck, a smaller size is a joke, and Arial kills.
The text color really doesn't matter much they all suck for extended reading, though they may look fine for this limited use. I like this cccc00, this c0c0c0, and ffff66 in bold on black.
Again, these things are fine cool even when used thoughtfully for brief passages, a few sentencesnever use them for >1¶. Also, they can still be nightmares when you recall variation in viewers' color settings.
Text size, font, color, etc.
("TNR"="Times New Roman")
Ignorance makes these attributes heinous to some viewers. If you don't specify these, browsers' defaults are likely font=TNR, color=000000 (black), size=3, and these are generally fine catch-alls. Here are some points that are, pathetically, commonly ignored most people are entirely ignorant of the art/profession of typography. Do you think that magazines, textbooks, newspapers, etc. are produced randomly? See Web Wonk for authoritative, professional typography info.
For >1¶ (i.e., text-heavy, reading passages):
I concur with Web Wonk on the following:
- Text that is too big or spaced out sucks as much as text that's too small or crowded. Our eyes simply aren't trained for it (there is a scientific basis!).
Arial 3 or TNR 4 is too big.
- TNR size 3 (default)
- or Arial size=2
- Dark text against solid, light background.
- Human eyes hate it, but if you must use an image background, make it extremely light/bright.
- Human eyes hate it, but if you must use light text on a dark background, make it bold! The problem is that then it gets too large, and you cannot decrease the size of bold text without compromising its legibility.
- *Common, major foul: When the hell has anyone ever seen a 15" wide book, magazine, newspaper, etc., the text of which runs all the way across, with no columns? Why the hell do web page authors do it! The human eye absolutely despises it, and, truthfully, there is a reason that it makes most readers literally nauseous. The first thing all web authors must do is learn how to set up columns with tables! (Don't use the NN columns tags they aren't widely supported yet.) There ain't a single professionally designed web publication site that does this. You wanna be an amateur whose long passages no one reads?
- "White space" is as much a typography tool as text. The
<P> tag (and others like blockquotes and lists) interrupts ¶s too much in long passages. Just use <BR> and an indent method (
<DD> is not broadly reliable). Web Wonk recommends using a "single pixel gif (spg)" (heard of it? must learn of it). I don't. Instead, use a consistent series of "non-breaking spaces":
- The spg with vspace=# is great for "leading" the spacing between lines when a
<P> is too much or little (but use it wisely and sparingly).
- Web Wonk mentions using a gif image for dashes, too, but I'm not sure why, because:
ab – cd" renders "ab cd"
wx—yz" renders "wxyz"
- Common use of
<H#> is ugly and ineffective. You don't see such crap in print because eyes and our thoughts hate it. Use headings like here or at Web Wonk, and don't indent the 1st ¶ under a heading.
- Don't center long passages. Where the hell did you ever see that? Our eyes don't work that way.
- Overused italics, bold, colored text, etc. lose their intended emphasis. Why do so many people ignore that point?
To determine size minima, use 2 methods:
1) Check on >15" monitor at > or =1024x768.
2) Also on a < or =14" monitor at 800x600.
Here are some Dr. NAD sites that employ many / all of these principles.
Dr NAD's Science Pad
MultiColor Light Microscopy
Dr. NAD's Mini-course
Dr NAD's Not-Necessarily-Science Playground
Here are some professional / stellar sites that employ many / all of these principles. Surf around to the actual articles to see how pleasant they are to read, compared to the articles at these sites (TIME magazine, USA TODAY) that are painful to read once you get to the text of the articles (the tables of contents / front pages are ok).
The Chicago Tribune
Wall Street Journal
Discovery is one of the hottest web sites, but sometimes the articles here are stupidly designed (check for dumb text vs. background colors).