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

Make Better Web Pages!

How to make your web site sell - use my secrets

Find out How

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!

Leave a comment

Articles + tutorials in Graphic Design for Web

White on White Web Design Style
An overview of white-on-white web page design, a clean, appealing, modern web design style that draws focus to the content.
Zoom Your Content!
a Crucial Web Design Technique
Zooming your content is a basic but critical skill that every web designer should know.
9 Highly Functional Web Site UI Designs for Inspiration
A personal collection of 9 highly functional web user interface designs for inspiration
8 Rich Web Site Designs for Inspiration
Ben's collection of links to great, effective, current web designs with rich, highly graphical, and intense styles.
8 Clean Web Site Designs for Inspiration
Collection of clean, simple, effective, current web designs, put together by Ben Hunt
Some Great Web Logos for Inspiration
A collection of high-quality inspiring web site logos for inspiration.
Real Web2.0 Design, the essential Web2 design features
Real Web2.0 design is not about shiny visual graphic effects, but a bold, direct and challenging brand experience.
10 Best Designed Websites in The World
A list of the 10 best-designed web sites in the world, with explanation of which great web design techniques work most effectively and the importance of designing your content.
Web 2.0 How-To Design Style Guide
Web design guide. Web 2.0 how-to design style elements explained. A guide to why web 2.0 design works, how and when to use each design element
Creating Content for Web Pages
Best practice guidelines for how to create, arrange and design Content for web sites and web pages
Using Contrast in Web Design
The importance of contrast in graphic design for the web, and how to use tonal contrast effectively
Using Attention Maps in Web Page Layout
Always sketch an attention map before designing a web page, to indicate areas of relative importance where you want users to focus.
Containment in web design layout
Using containment in web page layout to group elements together is a powerful tool.
Selection of Favourite Great Web Logos
A collection of appealing logos gathered off the web by web designer Ben Hunt
Case study: Artorg makeover
Case study: Makeover of Artorg's community site
Clarity in Web Design – Designing Clear Web Pages
Hints and tips for making web page designs clearer and easier to understand by differentiating and organising visual elements on the web page
Rhythm and repetition in web page layout
How to use rhythm and repetition as layout devices in web page design
Using Alignment in web page layout and design
Tips on using alignment in visual design for the web to associate related elements
Current style in graphic design for the web
A summary of today's best practice in graphic design for the web. Simple, good webssite design examples, good web design and an explanation of modern web 2.0 design techniques.
Colour in Web Design
Tutorial on using Colour in web design to convey branding and improve usability in your web page designs.
Branding for Web Sites
Branding for web sites: How to create, develop and implement a brand for a web site
Grouping elements for clear web page design
Grouping, basic web page layout graphic design technique for associating web page elements on screen.
Usability Case Study: Kemik Portfolio
Case Study: Tweaking Kemik's online art portfolio
Use of 3D Effects in Web Design
Guidelines on how to use 3D effects effectively in graphic design for the web
Effective text for web design
Short article describing the benefits and strengths of using text rather than graphics in web design
Case study: Business Improvement Network redesign
Case study: Business Improvement Network redesign
Imagery: Using images in Web Page Design
Guide with tips on how to use imagery effectively in web page design, good images, graphics & icons
Logo Design for Web Sites
What makes a good web site logo, breakdown of key design factors for creating great web logos
Media Volunteer Redesign
Summary of redesign of Media Volunteer Center
© Scratchmedia Limited, 2006-2010
Floor 3, 111 Buckingham Palace Road, London, SW1W 0WQ, UK
+44 (0)207 1600 989