Original screenshot: Home page

(50% scale, click to enlarge)

bin.co.uk

Summary critique:

The BIN home page is pretty effective. It opens with a concise message introducing the Business Improvement Network.

The page layout is relatively clean and clear, but the visual style appears cheap and lacking in personality. A new logo and colour scheme can deliver quick benefits.

The relatively long menu hints at over-segmentation. The homepage needs a greater sense of activity and personality, to encourage the visitor to explore further into the site.

Detailed breakdown:

Page layout

Spatial layout is a conventional 2-column format, consisting of a single left-column and main page content area. The logo/navigation column is solid and full-length, while the main content area is otherwise unbordered. This gives a slight sense of emptiness.

A few pages on the site use an additional floating right-column. On the home page, the bulleted list and Amazon search box are out of place, floating in space. Their relationship to the other content is unclear: is it secondary callout content, or a second column of main content?

Layout changes can fix these small problems:

Branding and colour

The white and red colour scheme is bold and bright. However it tends to say 'cheap' (Several UK high-street brands that compete on price and use this colour scheme include Curry's, Comet, Argos, Staples, Safeway, Iceland).

The blue-green colour in the sub-head text doesn't fit with the red at all.

Aside from the simple and dated logo, the homepage uses no imagery to communicate. Relying on text alone gives an unnecessarily serious impression, probalby unhelpful for making new friends. The result is a homepage that feels a bit harsh and faceless.

A few images can say a lot about quality (professional links), personality, and reality (at least saying "we exist").

Content

On the whole, copy is brief and well-written. Paragraphs are short, typically one sentence, which is highly readable.

The tag line ("...share, learn and develop with fellow professionals...") is not sufficiently descriptive (doesn't differentiate qualitatively), and a bit too prominent considering the value it adds.

As a rule, instructions on how to use the site can be avoided. The home page says, in bold, "If this is your first visit to the site, we recommend at least a quick browse through this Introduction... Otherwise click here to skip the introduction."

(The hyperlink doesn't follow good principles, because it doesn't say what you'll get or where you'll go).

In this situation, it is much more efficient to trust the visitor's instincts, present them a clear menu of information, and let them choose how much they read.

Navigation

The menu seems to have a lot of items, which a bit off-putting. It makes the site seem big, and likely to take a lot of work to trawl through (it's at least 12 clicks wide, and we don't know how deep!).

Some sites that cover very broad content might need 12 level-one links to be usable. In general you should look for the balance that matches likely usage patterns, providing recognisable signs for content that matches typical goals (contact you, find out more about you, get stuff).

This site is, in fact, over-segmented. One area that looks prime for consolidation is the events: "Next Workshops", "Past Workshops", "Host a Workshop", and "Other Events" all fall neatly under "Workshops and Events", particularly when the "Other Events" link reveals a page saying "No other events are currently scheduled."

This is a great example of the risks of dividing a site into too many sections at the top level. Clicking the "Other Events" link gives a disappointing experience, which is totally unnecessary. If all event details: previews of future workshops and other events, summaries of recent events, and a call to action to host an event yourself, were collated onto a single page, the result would always be a rich, busy page that showed ongoing activity.

Original

Click to view full size (62k) »

bin.co.uk

Redesign

Click to view full size (53k) »

BIN redesign (homepage)

Notes on the redesign

A classic 3-column layout is used beneath a full-width page header that places a clean new logo boldly front-and-centre.

The green-based colour scheme is soft and vibrant, tempered by the juxtaposed greyscale body. The colours fill the space, which makes the site appear more 'full', yet the flat, square shapes require only a few small files.

A simple new logo re-uses the original's diamond format (an awkward shape for a logo), and applies simple colour and text.

BIN has an extremely impressive list of members, but this was concealed on the "List of Members" page. A selection of members' logos, a simple professional logo, and a member's mugshot (formerly on the "Members' feedback" page) combine to present a more professional and personal image.

Similarly, some of the excellent member feedback has been floated up to the home page. This takes advantage of the principle that "it's easier to let someone else sell you than it is to sell yourself". The member quote picks out an excerpt in bold that sells the BIN's benefits.

The menu has been halved in size to six items, and is now much plainer and easier to comprehend. It also allows use of a simple footer menu.

Menu mouseover on BIN template

The menu is CSS-only, and uses a CSS mouseover effect that makes it absolutely clear what is clickable. (Following good mouseover practice, the whole target highlights, and there is no dead space between hotspots. The active hotspot displays conventional bright blue text. )

 

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