How can you tie together a lot of elements into one page? In this post I will explore some sites that have busy designs.

Here are some ways a site might make a busy design “work”:
Element Schemes – the design might use only certain colors or might repeat small, intricate details over and over again.

Expectations – if you repetitively post the same information in the same spot on the page, readers will expect to find information in that spot. Changing around where information is placed can be a bit like when a supermarket rearranges the aisles – the customer may have a hard time finding what was once familiar.

Repeated Shapes – similar to element schemes like repeated colors and design details, one can have a lot of the same shape (rectangles, squares, circles).

One Large Element – even if there are lots of details on a page, often one large, emphasized element can draw the design together.

Page Divisions – simple page divisions, often into three, is another way to unify a design.

The examples:

Rutgers University Home Page

Large universities have much information to present, and Rutgers is no exception. Rutgers has the red of Rutgers in the banner and the emblem below. The top section under the banner presents Rutgers’ highlights, and the white section below has many details. To my eye, the page division is a simple three parts. The Rutgers site gets updated often; however, when one returns, the user sees what is going as expected: news is on the right, highlights in that block right below the banner. See Rutgers University.

Tate Kids

The funky design of this page makes it quite busy; however, in terms of finding information, I see three navigation bars at top and four consistent rectangular shapes in the center. Even as the designer allows you to change the background, those main elements remain. The color scheme matches the funky design; you won’t find earth tones on this site, for example. See Tate Kids.

Amazon.com

What a busy site! Amazon hopefully will keep its information in expected places, unlike some supermarkets. The color scheme and the repeated shapes of the books help tie the page together. See Amazon.com.

Via Rail Canada

Via Rail Canada, a new site done in Drupal, uses the photo of a woman serving the public in a railway car as a way to draw the viewer into the page. Repeated colors include the red of the Canadian flag, yellow of the logo, and the beige of the cushioned train seats. The page is divided into two, with one long banner at top and boxes with information below. See Via Rail Canada.

Bob Reasso Soccer School

When the Reassos asked me to put *all* of Bob’s biography on the home page, I was hesitant. Wouldn’t that make it too busy? But with the idea of highlighting one element (Bob Reasso) and using the red color of the logo along with the grassy green of a soccer field, the design ties together. See Bob Reasso Soccer School.

Do you have an example of a busy site that works? Or perhaps a busy site that could use a better design?

Popularity: 13% [?]

Every day people are tweeting links on Twitter with jQuery tips (see how do I learn jQuery). If you want to see, go to Twitter search and type “#jQuery” or “jquery”. Recently Kevin of Queness posted Create a Fast and Simple Toggle View Content with jQuery. At quick glance it looked good; in fact, it looked like a tutorial that might enhance my old Services page. So, as one does with hair salon makeovers, here is the before:

If you click on it, you can see the after, how I redid the page with the jQuery tutorial.

As with many links I find, I don’t have time immediately to implement the tutorial. So I save the links I like to Delicious, a social bookmarking site. See my Delicious bookmarks here. Another place you can save favorite links for later perusal is StumbleUpon.

One of the reasons why I liked the idea of switching from the previous way I had set up the page is the new version is much easier to edit. The original way I set up the page, way back in about 2001, was with separate HTML files for each page. That method, if you have ever tried it, is a real pain to edit. Every time you make changes to one page, you have to update all the others. Then about two years ago I redid the page in PHP; better, because now I only had one page to edit, but one had to remember where everything was on the page and search if one wanted to do edits. With Kevin’s jQuery plugin, I am editing simple unordered lists – here is a sample piece of the code:

And here is how the page looks now:

Just to be sure it looked OK in IE6, because despite web developers and designers disliking the rendering abilities of IE6 many people still use that browser, I checked the new Services page with IE NetRenderer. It looked just fine.

Popularity: 4% [?]

First, the Code to Implement the Thumbnails

This is NOT a post on how to implement the new thumbnails code for WordPress 2.9 (latest is 2.9.1). If you want to implement the code, simply open functions.php and add the code as explained in these posts:

• Mark Jaquith: New in WordPress 2.9: Post Thumbnail Images
• WordPress Codex: Template Tags/the post thumbnail
• WP Engineer: About WordPress Post Thumbnail

This post is about how one can use thumbnails to enhance a site.

Why are thumbnails important to your site?

When you first come to a site, be it a blog or a website, what do you see? You might see a list or a menu of links and a header with an image reflecting the overall site. You might see one large image representative of the last item posted to the site. If all you see is lots of text or links, this may not entice to click further. But what if you are given choices, as in this library site:

Much more likely to click on one of these than on a plain link, right?

What if you want the posts organized differently on another page, say on a category page? How’s this:

Same thumbnails, but this page has tags, dates and category links as well. Same posts, but the layout has changed and more information added.

What has changed in WordPress 2.9 in regard to thumbnails?

Before WordPress 2.9, you could do thumbnails using a custom field. Now the thumbnail has its own spot on each post, and you can easily add the thumbnail (and change it) as well as descriptive text while working on the post. Also, thumbnail does not have to mean small; one can use a variety of sizes. See the links at the beginning of this post for detailed information.

Noteworthy Examples of Thumbnails

Lyza Danger’s projects page

News and Resources page of Connelly-Campion-Wright Insurance

Do you have an example that you like of a page with thumbnails? It doesn’t have to be done with WordPress – just good thumbnail design.

Popularity: 4% [?]

In preparation for a new header design for a cooking blog, I gathered eleven headers to explore how one might enhance a blog header for a kitchen, cooking or food-related site. Under each site, I noted what I liked about the designs. Feel free to add your own reactions in the comments.

Cooking with Amy

What’s notable about this site is the post-it note for linking to categories and the attractive photo of produce. The header itself is a bit large for my taste, but it certainly draws one’s attention. Note the color scheme: greens, bold blue, and a tan background.

Simply Recipes

In contrast, the header for Simply Recipes is quite simple. This allows the reader to focus on the inviting and tempting photos in each post. The typography and logo of the header are crisp and professional. Color scheme: brown with a pale pink, gray background.

Ecoki

The header is a professional-looking logo with 4 beautiful advertisements. There are plenty of menu links as well. One could easily have 4 parallel images that link to categories in a similar attractive fashion. The background is a grunge look – this is currently stylish for web design, especially an ecological site. Color scheme: greens and browns with some blue.

Start Cooking

This is the recipe index for Start Cooking. I like the simplicity and brevity of the header; the photo of food works well with the tabbed menu. The header takes up only a small part of the page, but it is useful and cheerful.

Design Sponge

The card-like menus of the Design Sponge would work well with a cooking site. As in Cooking with Amy, categories are linked in a creative manner. Design Sponge does a better job of integrating the pictorial menus into the overall layout.

A Year in Bread

A simple header with a great photo can be inviting and attractive. Maybe just incorporate a menu to jazz it up and make it more utilitarian.

Food on Food

A whimsical illustration can make a fun header.

The Kitchn

Header is a simple logo in green with a bar of bright yellow underneath; it pops out against the grays of the site. If you go to this site, note the clever little favicon.

What’s Cooking Blog

This blog header combines a friendly photo of mother and child cooking on the right with an illustration on the left. The subdued green and gray color scheme helps the photo pop out at the viewer.

The Organic Supermarket

An attractive photo with bold green labeling and an integrated menu captures the eye in this header.

Food Tease

Fun illustration incorporated with the navigation menu entices the reader into exploring the site. Color scheme: yellows with black and white and a splash of pink in the logo.

Which of these appeal to you and why? Thanks.

Popularity: 26% [?]

Zen Cart (or zen-cart) is a popular open-software shopping cart that is used to sell products online. The basic Zen Cart set up is rather dull; I wanted some examples of well-designed sites that use Zen Cart. Here are the ones I found (click on the graphic to visit the shopping cart site; under the graphic is a link to the designer’s site):

Peek A Tees

Site by CuriousLight

Dear Johnnies

Site by CuriousLight

Pomona Fruits

Site by JSWeb

Hobby Hill Farm

Site by 2 Dogs Design

Xtreme Beauty

Site by @janidhaval

Chan Luu

Clark and Mayfield

Site by Winnie Lim

You can see live shops on the Zen Cart site itself, and I admired this one:

eFabrics

Thank you to @curiouslt, @coolphotoideas, @janidhaval and @jsweb_zencart for your help with this post.

Note: I cannot attest to the customer service, security nor product reliability of any of these sites. All I can say was there was something about each one that I admired.

Update: Since it turns out that Clark and Mayfield no longer uses Zen Cart but it is a beautifully-designed e-commerce site, I decided to leave it on this post and add one more intriguing Zen Cart design as well:

Isabel Harris

I love how this site uses a subtle, neutral palette of tans and browns, even for the links. It doesn’t shy away from the boxiness of the Web but celebrates it with a grid of inviting products and text.

Popularity: 100% [?]

After content, navigation is the most important feature of a website. You want your users to be able to find what they need in an easy and enjoyable fashion.

When choosing a menu for the Scotch Plains Public Library, I wanted one that would be both functional and vibrant. Initially I set up the menu in basic white and gray. As the graphic designer chose a colorful and playful logo, the staff and I wanted a fun menu to go with it. The one I used is a mootools script by Jonathan Snook.

If you do choose a menu with Javascript (jQuery is a library of Javascript, so a menu using jQuery uses Javascript), make sure it works even with the Javascript turned off. You can try this with the Scotch Plains Library site. Go to the site, and try the menu. The colors should change in a wavy manner from royal blue to lime green. If they just change without waving, your Javascript is already turned off. To see how the menu works with and without Javascript, you can do (in Firefox) Tools -> Options -> Content and you will see this screen:

There’s a little checkbox near Enable Javascript, so you can either enable or disable it accordingly. Here’s instructions for Internet Explorer and for Safari.

Getting back to our main topic, which is choosing a menu: there are many choices. You can find a many that uses CSS sprites or one that makes use of jQuery. Don’t be surprised if you decide on one menu, implement it, and then discover that for some reason it is not a good option for your site. On another site I have been trying out several of Stu Nicholls’ excellent menus. Please be sure if you use his menus to follow his requests.

I will write more about menus and navigation in future posts. If any particular topic in this area interests you, please feel free to say so in the comments.

Popularity: 2% [?]