Rich effects and Pixel-saving?

Of course, while Saving the Pixel should be a constant discipline when designing web sites, when your goal is to impart a lot of “soft” information, sometimes you need to splash out. The trick is to keep disciplined about removing anything that really doesn't need to be there. And a big splash, while using a lot of detail in a certain area, can still be read by the visitor as a simpler effect or entity.

Think about a beautiful sky with clouds and lots of variation in light and colour. It's intense pixel-wise, but the overall effect washes over you, creating a “sit-back” emotional reaction without requiring a lot of eye work or thinking.

When a rich web site works, the same thing happens. A lot of detail can be presented, but it works in a way that you can take in and enjoy the soft info passively, leaving you free to get the harder info (facts, links, data) without hassle.

My list of favourite Rich Web Designs

 

#1 N Design Studio

A fantastic array of organic but highly coloured forms frame a conventional content area.

I feel the tabs recede from view, suffering from being small and drab compared to the high-colour background and high-contrast content.

N Design Studio screenshot

#2 Versions Mac SVN app

Classic Apple-style with a grunge twist.

The main content area in dark grey on a black background is minimal and excellent, with good use of text and sweet images. The link bar is soft and clean (again very Apple, totally appropriate for a Mac app).

All this is crowned with a gorgeous, rich header image with a fresco surface effect that feels both modern and old (i.e. classic).

Versions Mac SVN app screenshot

#3 Satsu Web Design Agency

One of the early examples of an often-copied style, I love Satsu's detailed sketched background and grunge-effect.

The way they've irreverently picked the corner of their logo sticker makes me smile, and the tape nav bar is great too.

Note how the content is pretty conventionally minimal, letting the info come straight at you.

Satsu Web Design Agency screenshot

#4 SEOMoz - SEO specialists

This design combines a lot. It's pretty clean, and gets an edge from the stark black/white contrast, and also from messing with the grid layout.

I appreciate the combination of imagery, which feels fresh and just on the right side of busy. For a content-rich site like SEOMoz, this is a pretty bold stance, which I respect.

SEOMoz - SEO specialists screenshot

#5 Outline2Design

I had to include this for the lovely rich dark-gold background. It's certainly a rich layout, and the portfolio items do stand out, but then you do feel they couldn't resist chucking in the silver icons and extra bits.

This site kind of feels like someone spilt the pot of “creative juice” onto the computer. All the bits are nice, but all together, they're a bit overwhelming. But the background is lovely, and the overall impact is pretty effective.

Outline2Design screenshot

#6 Ekisho font ad

This is minimal-rich, which is what Apple do so well. Cut out everything that's not needed, and pour creativity into the things that matter.

Here, a totally neutral page canvas is the perfect background for a soft & rich panel featuring just a few icons.

I love the gradients and the japanese characters in the background, and the icons have a lovely consistency in tone & lighting treatment that's hard to achieve. This does the job it needs to do, making you really want to pick up the product, and puts a smile on your face at the same time. That's great design!

Ekisho font ad screenshot

#7 Noodlebox

Noodlebox's design was one of the first times I saw such a rich mix of colours & tones on a background. There's a lot more of it around today.

It works here, because the overall effect has that “sky impact”. It's not overwhelming; you don't have to look AT it; you can just soak it in.

The feature image bursting with colours is clear and appealing, and you can also freely peruse the other content and get the text (OK, it's in Flemish, but you get the point). Nice logotype too.

Noodlebox screenshot

#8 Philippine Mango Seedling Farm

A more conventional layout than many on here. This feels like a layout from a few years ago that's had a very good rich treatment applied sensitively.

I really love the overlays & lighting effects in the header area, and the photos clipped into leaves impart a lot of information.

The main text could benefit from coming higher up the page. It feels a bit shoved off to one side, and there's not enough edge to the main nav. The text there is a bit narrow and there's not enough contrast with the rich background. I feel the nav could benefit from going flatter & plainer, as there's enough richness in the header to lend the sense of quality.

Philippine Mango Seedling Farm screenshot

Do you love our approach to crafting simple & effective web sites that just work for people?

We'd love to hear about your web strategy. Contact one of our team today!

Search this site
Pro Tips
Learn how to make fantastic web site designs..
Buy "Save the Pixel" now!
On “Save the Pixel”
Clicss templates, great robust useful CSS templates from £40
Share this Article
Send to a friend now&hellip
Follow Ben Hunt on Twitter
Floor 3
111 Buckingham Palace Road
London
SW1W 0WQ
UK
Phone
+44 (0)207 1600 989

Articles + tutorials in Graphic Design for the Web

Web Design index
List of articles and tutorials in Web Design section
Current Style in web design
My summary of the crucial advances in web design in recent years, why today's web sites are better than they were 10 years ago.
Web2.0 Design Style Guide
A guide to the Web2.0 web look, why each feature is effective, and tips on applying the Web20 style to your web sites.
White on White Web Design Style
An overview of my current super-clean design style that really lets the content stand out.
The 10 best-designed web sites in the world
My personal list of 10 favourite sites, and why.
8 Clean web site designs for inspiration
I love collecting links to sites that inspire me to push my own design further, and I thought I'd share my favourites to help inspire you too. The first set perfectly illustrates the core principles of pixel-saving in minimal, clean layouts that focus on the content.
8 Rich web site designs for inspiration
This bunch of sites are all graphcally intense, using a lot of pixels to create a rich experience that doesn't get in the way of successful communication.
9 Functional web site designs for inspiration
A varied group of excellent home page designs that are quite different, but manage to combine brand & functionality effectively on first view.
Clarity in web page design
Making a clear web page depends on making the most important elements appear important, less important stuff less important, related stuff look related, and different stuff look different.
Colour
General guidelines on how to use colour in web pages.
Contrast
The importance of tonal contrast in graphic design for the web
Effective text
Explores the strengths of using HTML text rather than words as graphics in web design
Imagery
How to use imagery to best effect
Attention Map
A low-fi tool for planning page layout, helping you plan what your page should do before you get your hands dirty
Content
Tips on creating effective content for your web pages
Zoom Your Content
Knowing how to size your content appropriately is a fundamental and critical basic skill. All is explained in this article.
Layout for web page design
Overview of the major graphic design devices
Containment
Containment is a layout tool that says visually This thing is part of that
Alignment
Using alignment in visual design for the web to associate related elements
Grouping
Associating elements through relative positioning in space
Rhythm and repetition
A further technique for associating elements is through repeating common styling
3D Effects in graphic design for the web
Guidelines on how to use 3D effects effectively in graphic design for the web
Branding
Tips for branding on the web
Logo design
The four attributes of an effective logo: shape, presence, weight, and contrast
Some Great Web Logos for Inspiration
Sharing my personal collection of almost 50 favourite logos gathered from round the web, with notes on what works & why.
Favourite logos
An older collection of my favourite logos from around the web, with analysis of why I think they work.
Real Web2.0 Design & Branding
Web 2.0 design is not the same as star flashes and shiny table effects - it's about simple, bold, honest brand experiences.
Case study: Artorg
Tweaking the layout to ehance the user experience of a nice community site for graphic artists
Case study: Business Improvement Network
Applies a totally new look and feel to the web site of a business networking organisation
Case study: Kemik's portfolio
Simplifying and enhancing an already attractive artist's portfolio to make it more engaging.
Case study: FairSay home page
A web doctor report for non-profit organisation's home page.
Case study: Media Volunteer
Simplifying and brightening the entry point for a charity application