GenericUI Design Gallery
Page Designs that Inspire Our Guidelines
Back to GenericUI
There are five billion web pages out there.
Yes, you can create a new design, but the odds make it unlikely
that you will. More importantly, creativity is not the goal
for designing functional software. Instead, you should be applying
the lessons learned by others and good graphic art judgment.
The top pages by the top providers generally have "been
there—done that" a thousand times over. Learn from
them, as we have below.
By all means, E-mail
me to replace any of these with a superior example.
Table Row Shading, 3 colors
Table Row Shading, 2 colors
The Choice of Sans-Serif Fonts
Virtually all top sites use sans-serif fonts like Arial or
Verdana. Here's just one, UPS:
Links that Are Not Underlined, Philly.com
It's more common than you think...
"Fork in the Road"
Online check printing companies are often
good models of "application" sites because they are
expected to be very quick and easy sales. If you can't order
checks in 10 minutes, you're going to go somewhere else. This
one shows a login vs. new user fork in the road that we'll redesign
with our styles soon.
Procedure Steps on Home
This bullet-step motif is important if you
need to get users to perform multiple steps. We
reviewed a site that needed this format.
Our favorite search tool, Copernic
also shows how to list features available in multiple versions.
And one I modeled after it:
Tabs for White Pages
There's a million different formats for simulating
tabs, but the tricky part is coming up with a simple design
that is works with a white page body. These examples inspire
me to declare that using a white foreground tab is the new
"defacto standard" for web design. You heard it hear first.
- Notice the article name works as a link even
though it's not underlined.
- Search boxes top and bottom.
- Can't find it and advanced options
- Search criteria and results enumerated
No, it's not a web page but there's a real
strong pattern for the future in showing basic (wizard/step-through)
and advanced (direct access) tabs.
E-Mail Newsletter, Installshield
This is just great graphic design but there are some classic
"elements of style":
- Raised shadow page on darker background.
- White body, muted background
- Rounded corners
- Small fonts look sophisticated.
- TOC top left
- Nice "display fonts" for "Installshield Developer Wins..."
and other headers.
Error Message Design
Nothing fancy but does the job, graphically. How 'bout making
a link of the word "print" How many improvements can you recommend?
Next and Back Buttons
Gratuitous graphics are something to avoid, but a fading photographic
image is starting to become a staple in the body of intro pages,
like a watermark.
Left Nav with Tree Control
Full Client-Server-Type Interface, a Spreadsheet Tool
This is a picture of the product I've designed recently, proCube™
Web, a multidimensional database system for Excel-based financial
users, from www.SatoriGroupinc.com.
Download Time Estimate
We should find a better one pretty easily, but this caught
our eye. MS always has a way to put some new paint on such
Hmmm. Should they list the siblings (members) of the clicked
scope? I guess they have to, right? No, they have to work like
a menu... you click a breadcrumb that says Cats and the list
says "Cats, House, Tigers, Pumas," right?
OK, they're offering you free things, money, gasoline, and,
essentially sex, right? Thousands of years of biology, hundreds
of years of marketing and art knowledge, fifty years of technology—computer
and cosmetological, that is... it's all in this one image;
who am I to not publish it because it's spectacularly
sexist? How many subtleties can you find? Candy? (How many
customer service folks that look like this do you think they
have at JC Whitney?) See also my
article about seductive art...