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 Page

This bullet-step motif is important if you need to get users to perform multiple steps. We reviewed a site that needed this format.

Feature List

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.

All Controls on a Single Page, Northwest Airlines

Search Results

• 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

Basic/Advanced Selections

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

Welcome Page

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

Email Alert

Splash Screen

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

Dropdown Breadcrumbs

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?

Chat Solicitation

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