9 Highly Functional Web Site UI Designs for Inspiration

My list of favourite Functional Web Designs

#1 Traineo

Traineo looks like a classic early-Web2.0 layout, with the dark header, light & open content area, and bright colours used to highlight and draw attention.

It’s an excellent example of where this style can work well, combining quite a lot of information and function while keeping the experience feeling straightforward (essential for the broad potential user base).

Good use of text where it works, great use of space, and simple nav. A super example to follow for modern UI design.

#2 iStockPhoto

iStockPhoto is at the more elegant end of the spectrum, with a more familiar proposition (selling photos, with the difference that they’re sourced from the user base).

There’s a solid top bar, which is kept as small as can be, and colours are kept neutral (i.e. grey) to let the particular qualities of the imagery come forward. You don’t want your UI to interfere with the content in this kind of app.

The home page is a good example of combining soft & hard information: The tiling photographic splash inspires the visitor, suggesting at a broad range of high-quality imagery inside, while the prominent search box tempts you just to have a look inside, and the simple pricing chart makes the whole thing feel quite obvious.

#3 Rememble

Rememble is a typical “fun” Web2 design, with friendly rounded fonts and a quirky logo.

Solid top bar again, lots of white space and almost no structural pixels to be seen, big titles, and colourful solid panels to illustrate things I’m likely to be interested in. Also notice the super-simple main heading and introductory paragraph that simply states what the thing does before you get into the “how”.

#4 ComponentArt

A bit less Web2.0 now… the ComponentArt site still combines a lot of info in a very simple interface. This time, a conventional branding & tab / L2nav bar does the business above a frugal page layout below.

There are 4 columns in evidence here, which does make the site feel quite busy, but there are a lot of wares on show. There’s nothing that’s significantly bigger than anything else on the page either, which means you have to read more, but if nothing is actually more important than anything else, maybe that’s OK.

I like the clean monochrome colour scheme, but I wonder if the red highlight colour is just a bit too prevalent to be as effective as it could be.

#5 Purina

Pet food provider Purina’s site uses a much more familiar solid-panel design.

What I like about this site is the way the simple Flash splash in the header fits so neatly into the layout – helped by the zoomed/cropped photography, giving a strong brand impression.

The rest of the layout is pretty clean and conventional. With just the 2 main columns, you’re never unsure where to look for the content, and the navigation is really easy to get, even though it uses dropdowns. Clasically simple, it’ll work for a wide audience, well worth remembering.

#6 Wishlistr

Wishlistr comes straight out of the Web2.0 huddle with the missing last “e”, grey/blue/green colour combo, and playschool fonts – and no bad thing.

The best thing about this site is the introductory paragraph that simply tells you what you can do with this: “Create a wishlist. Share it with friends and family. Keep track of the things you want.”. A lot of sites would benefit from simply saying what they do as plainly as this.

I like the 3 well-spaced columns below and the plain headings. You can’t spend 10 seconds on this page and not have a good idea what it’s for.

#7 My Musik Downloads

The density of the information on this site feels very un-2.0, doesn’t it? The reason it’s in this list is that, while there’s a lot of stuff around, it’s all well focused, and the home page does communicate what the site’s for very effectively.

I don’t think you have to reduce your home page down to the bare essentials (with lots of “more…” links) to be effective. If your site does a lot, or you have a complex proposition, then your home page should encompass all that, at least at a high level.

This home page combines a lifestyle positioning image, 3 strong differentiators, each with a call to action (if repeated), a couple of dozen musical links to specific genres, customer quotes, and a “How it works” section, along with a bunch of other necessary links, and it does it without making you feel overwhelmed.

#8 Burstcast

Another good example of seeing what it does by reading the tin… Burstcast condenses the “what it does” proposition into just 6 words: “Snap it. Send it. Share it.” Genius, if you can get your message into that short a space!

They take a small amount of area to explain more about how it works. Shame it seems to be spammed by mostly adverts for watches and – ahem – “medical supplements”…

#9 Unfortunate

unFortunate is quite an oddball in this list, in that its proposition is distinctly unusual. It’s basically a service for creating your own fortunes (like you’d get in a fortune cookie).

Why it works: It communicates what it does in as few/many words as it takes. It gives you examples of itself in use, and it has a bold box up-front saying “Create your own fortune!”

Although the concept is weird (especially to a Yorkshireman), what’s not to get? Plus, I really like the logo.

Check out the hall of fame for a smile too…