Sample Database Application
This is where a lot of our example work will end up as time
goes on, as we develop a real application.
Introduction
What?
GenericUI is reusable foundation from which
software developers can create the visual components of Web-based
software applications. It includes a style sheet, visual design
elements such as tables and buttons, and icon artwork. It's
specifically designed for the presentation of data and functions
but it certainly can be used for "content-centric"
sites and pages.
The name, GenericUI is modeled after a reusable database
foundation, GenericDB.
The colors and some design elements are based upon Microsoft
Hotmail, with ideas from other great sites and my own experience.
It addresses the accessibility
guidelines of the WAI in that styles are used for all
formatting so users can assign their own style sheet. And
fixed font sizes are used as little as possible (table headings)
so users can enlarge their own text size. (The remaining
aspects of compliance are beyond the control of GenericUI...
they're things only you can control.)
The style names are prefixed with the HTML element that
they are designed for. This one technique alone will pay
for itself on any multi-developer project.
It's foranyone
who makes software applications presented in a Web browser,
from students and hobbyists to the largest corporations
in the world. Please don't be embarrased to use it even
for high-profile customers, you're saving money and enhancing
usability... it's not cheating or uncreative. It's smart,
and good design. And it's what people are accustomed to;
they're not accustomed to different designs on every interface
they use.
Why?
You're wasting time and money by starting
a design from scratch, and you're also asking your users to
learn a new interface if you create one. When you try to design
a Web application interface from scratch, it is equivalent to
retracing the last 11 years of Windows/Mac user interface design.
You can't do it on a project basis. All you are really doing
is finding out all of the things you haven't thought of.
How?
Look over the pages to understandthem and download the zip file.
It includes the CSS, images, and sample pages that you can
work from. Contact us if anything
is inaccessible. We intentionally place as much as possible
on this one long page so the information is easy to disseminate.
Commercial Use:
If you use it on a commercial system, please pay our shareware
fee of US$98.00. You're entirely welcome to wait until the
time you receive your first revenue from your system. This
is expected to save you thousands of dollars of equivalent
user interface design work so we hope it's well worth the
small fee.
And, when you register, you get periodic updates and
I will create three custom icons for you. Just E-mail
me with what you want!
Register
Now ($98.00)
Goods and services provided by Simax (PA, USA), our corporate
name.
Sold by 2CheckOut.com Inc. (Ohio, USA), our secure shopping
cart hosting site.
Design Philosophy
and Guidelines
"The goal of information design is the reduction of noise
in the communication channel by the elimination of extraneous
content, simplifying formal options, and limiting of interpetations."
We don't know who said it—probably R. S. Wurman—but
it's a good starting point for our direction:
We use a plain white background and dark text.
We use blue as the primary decorative color. Look at a
lot of sites and you'll see it's the most neutral, comfortable,
confidence-inspiring color. (Red is used for sales impact.
Beyond that you're into pure artistic judgment.)
We use sans-serif fonts because all of the top sites do.
They're better online. We like Verdana.
Unlike content-centric sites that benefit from links that
turn purple when you visit them, we keep our basic links
unchanged after visiting because our design is for functionality,
not information. Our style sheet has a link style for content-centric
links, "aContentLink".
We don't use underlining for links because it offends
our delicate artistic sensibilities. Underlining is the
most rudimentary of typographic techniques—the only
one an old manual typewriter can do—and we think it's
time to move on; it looks distracting. Our links are indicated
by bold blue text. It's your style sheet, though; do as
you see fit.
It would be great if graphic names and style names could
all be "purposeful" instead of "descriptive"
but it's just not that convenient to do so except for easy
things like "tableWarning." For instance, the
lightbulb icon could be named "idea" or "note"
and that would be handy if the we change from a lightbulb
to a thumbtack image, but sooner or later the disadvantages
outweigh the advantage. For styles, there are too many different
purposes for which we'll use each style. Perhaps some day,
with more inheritance and cascading, a level with truly
purposeful names would be possible but not yet.
We're not CSS gurus, just tired of seeing this wheel reinvented
so often, and so poorly... and I hate the idea of every
student programmer starting from scratch. If there's a better
way to do some of this stuff just
say so.
Colors
Use colors cautiously and conservatively. When in doubt, don't
use a special color.
General use. Used in headings, page
text, some functional links such as Expand/Collapse.
#000000
Light blue
Table row background, alternating
with white for row differentiation
#eff7ff
Light yellow
Table row background, for attention
or highlighting
#fff7e5
Red
Caution, warning, alert.
#CC6633
Green
Receipt header
#336666
Yellow
Error message header color
#F8EE36
Icons
All icons are 16 x 16 pixels.
Image
Filename (.gif)
Purpose
Statuses
no
No, warning, failure icon
check
Yes, OK, success icon
alert
Alert, caution, remember to do something
warning
Warning, danger, problem
info
Information, notice, results
lightbulb
Idea, suggestion, tip
Actions
undo
Undo icon
refresh
Refresh, reset icon
print
Print a page, printer-friendly,
3-D version
printSimple
Print a page, printer-friendly,
2-D version
Media and content
download
Download a file from a server
zip
Zip file
pdf
PDF file
page
Data page, document
pageEmpty
Data page, empty, new
video
Video or animated content
audio
Sound content
Destinations
home
Home page
topage
Indicates link to another page
inpage
Indicates link to another location
within the current page
popup
Indicates link to a popup over the
current page
globe
Indicates link to another site
VCR style controls for
data records, animations, items in a list, etc.
GoFirst
Go to first element
GoFirstDisabled
Go to first element, disabled
GoPrev
Go to previous element
GoPrevDisabled
Go to previous element, disabled
Play
Play a sequence
GoNext
Go to next element
GoNextDisabled
Go to next element, disabled
GoLast
Go to final element
GoLastDisabled
Go to final element, disabled
Stop
Stop sequence
StopDisabled
Stop sequence, disabled
More
coming every week... and you get three free custom icons if
you register!
Supporting Images
Purpose
Filename (.gif)
Image
Sorted column, descending
triangleDown
Sorted column, ascending
triangleUp
Emphasis bullet
triangleBullet
Warning box headers, left and right
barricade5Marks
Warning box headers, as background
barricade1Mark
Warning box header, center background
for tdHeaderWarning style
barricadeSlice
Decorative receipt edge, like money
or a certificate
certificate
Notepad checkmark
checkBoxChecked
Notepad failure mark
checkBoxX
Notepad empty checkbox
checkBoxEmpty
Notepad red divider line
notepadVertBars
Notepad header background
notepadHeader.gif
Link Styles
Name
Description
Example
Note
The first four styles below, redefining
the default link appearances, are specifically designed
the way they are because GenericUI is first-and-foremost
for software applications, not for content-centric sites.
You certainly can use GenericUI for content-centric
sites, and you'll save a lot of time and money, but
use the "aContentLink" styles for links that
users visit once.
a
Link appearance. Note that we've replaced the underline
attribute with bold, as the primary indicator or a link. This
is only intended for software application functions, not content-centric
links.
Link appearance when it has the focus, as when you've tabbed
to it. Also appears when you return to a page if it still
has the focus.
Static
example
a.hover
Link appearance when mouse is over it
Static
example
a.visited
Link appearance after visited. For our design, which is
intended for applications, not "content-centric"
sites, the visited state does not have a different color.
We've got another style for traditional, content-centric destinations,
where tracking visitation is meaningful; it's "aContentLink,"
and is listed under Custom CSS Styles.
This group specifies new attributes for built-in HTML elements.
Not all of the approximately 75 have been customized.
Name
Description
Example
body
Default for all text, we've made
it Verdana and "x-small" in size. This is a "relative"
size, meaning that users can enlarge it by using their browser's
text size control.
body
input
Text entry box, again Verdana with height and margin adjusted
a little.
textarea
Text entry box, multiple lines.
td
Table data default; 5 pixels padding
on the left and right so there's space at edges. And we top-align
text in table cells because it looks better for data (whereas
we bottom-align the text in the headers).
ul
Unordered list (a bulleted list).
Use bulleted lists when the order of the items is not significant.
Notice the square bullet.
List Item 1
List Item 2
ol
Ordered (numbered) list. Nothing
special but we've defined it so you have a place to define formatting.
Item 1
Item 2
img
Images, no border.
hr
Horizontal rule, 1 pixel, blue.
p
Paragraph, no padding top and bottom
so that custom styles can determine tight spacing
This is a paragraph.
And this is a paragraph!
H1
Heading 1, for major page sections;
not intended for page naming.
Heading 1
H2
Heading 2, for minor sections and
groups of fields.
Heading 2
em
Emphasis, bold
Look at this!
Custom CSS Styles
I think that technically these are called "class selectors"
since you assign them to custom classes.
Name
Description
Example
txtSupportingInfo
Small text for embedded help and
incidental messages, not "directive" (do this style)
information.
txtSupportingInfo
txtSupportingInfoCenter
Same as above but centered.
txtSupportingInfoCenter
txtWarning
Warning and caution text that is
inside our fancy yellow bar heading. Notice it's slightly gray,
connoting a sense that it's temporary.
Content images, for a shadow edge
effect. These are images that contribute to the message of a
page, as opposed to images used to support functionality that
a page provides. Another option: change to 1 pixel, black, on
all 4 edges.
Tables
Rules for Table Columns and
Alignment
These
are generalizations. Apply with a healthy sprinkling
of judgment.
Variable-length text: For columns with
variable-length text, left align the data and header
rows.
Numbers: When numbers represent quantities
or money, right-align the data and center align the
header row.
Fixed length data: For columns with fixed
length data, or nearly fixed-length data (such as
Yes/No/Maybe text), center the data and header rows.
Sorted column: If possible, place the sorted
column as the left-most.
Linked values: If the values in a column
are links to records, link a column that has distinguishing
values (Smith, Jones), not repetitive values (Member,
Member, Visitor).
Functions: If multiple functions are present
on rows, place them to the right.
Multi-Line Headers: If the header row might
be multiple lines of text, consider bottom-aligning
the text. It looks nicer.
Basic Table Characteristics
tableBorderAround
Getting a margin inside the blue border---via a single
style attribute---is turning out to be more difficult
than it should be. Using the table margin or padding doesn't
affect the stuff within the table unless it is within
another table or some other container. For instance, on
our ASP example page, the ASP stuff seems to inherit the
padding, but this text doesn't unless we embed it in another
table, which we have done.
Samples of Table Cell Styles
tdhead
tdHeadVertLine
tdheadCenter
tdHeaderSelected
tdHeadVertLineCenter
tdBottomSeparator
descending
tdBottomSeparatorLeftVert
ascending
tdBottomSeparatorCentered
tdbottomseparatorleftvertCenter
tdbottomseparatorRightVertCopy
Note: all of the following
row styles are top-aligned. That's the only reason that trWhite
is needed.
trYellow
For highlighted rows
(Microsoft Hotmail uses
this for new mail)
<p.txtInfoBoxCenter>
This is a side table typically used for secondary information,
supporting text, help information and so on.
A Notepad-Like Table, Great for a Checklist
This is great for a checklist, which we use for our Website Survival
Report Cards. Check
out this example.
tdHeaderNotepad
This row was just set
a little taller.
h2,
right aligned
Pass Fail
Let's talk
Logo in top left?
Pass
Fail
Let's talk
Tagline?
Pass
Fail
Let's talk
Welcome Blurb?
Pass Fail
Let's talk
All rows are trNotepad for the background
color
All cells are td.tdbottomSeparator
=imagesSupporting/checkBoxChecked.gif
The column to the left is td.tdNotepadVertLine
=imagesSupporting/checkBoxX.gif
=imagesSupporting/checkBoxEmpty.gif
=
imagesSupporting/notepadVertBars.gif
The cell to the left has the background manually
set to: imagesSupporting/notepadVertBars.gif instead of adding
another style.
The following table demonstrates each style a little better (the gray
border was just added for clarity.)
td.tdHeaderNotepad
tr.trNotepad
td.bottomseparator
To the left is td.tdnotepadvertline
Error Message, Option
1: Header Markings Use Images
Table: tableWarning
tdheaderwarning
txtWarning Do not do that! Look out, don't
bang your head. Is this cool or what?
This cell: tdWarningBody
Error Message, Option 2: Header Markings Use Cell Background
tdheaderwarning
txtWarning Do not do that! Lorem ipsum
dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor
sit amet Lorem ipsum dolor sit amet
This cell: tdWarningBody (for dashed border)
How the error message table is set up:
To the left is a cell with tdHeaderWarningMarks. This fills
the cell with a background graphic. If you want more control
over the width, use tdHeaderWarning and insert one of the graphics
barricade5Marks or barricade1Mark into the cell.
To the left is tdHeaderWarning, for the center of the header.
It has a thin slice set to the background.
This cell: tdWarningBody (for dashed
border)
Collapsing Outline Control
Ooooh, ahhhh. A collapsing/expanding outline control. We don't
write this stuff, we get it free from smart guys at DynamicDrive
and apply our styles. Full Details
Use the following formats for any data that is irrecoverable by the
user and should be printed. They share the table and body styles with
the warning messages. If you want special formatting clone and modify
the styles. Note that a subtable is used inside a single bottom cell.
Format 1, Plain
This is Your Receipt ~ Print
this Page
table: class= tableWarning
header row: class= tdheadReceiptCenter
single bottom cell: class=tdwarningbody
Format 2, Fancy
This is Your Receipt ~ Print
this Page
table: class= tableWarning
top header row: no class, background=imagesSupporting/certificate.gif
second header row: class=tdheadReceiptCenter
single bottom cell: class=tdwarningbody
Sample of a Detailed, Data Table Page, ala Ebay
Here's a data listing—simulated with static HTML—with lots
of links and details, to see the styles in action. Show
me>>>
Live Database Example!
Eli Robillard's GenericDB, interpreted with our styles.
This is where a lot of our example work will end up as time goes on,
as we develop a real application. See
it work>>>
