Design Critique: La Tapisserie Au Point

Posted: 17 May 2012 05:30 AM PDT

Just when you think you’re out, they pull you back in. I had thought last week’s design critique would be the last I’d do for awhile. However, at the end of that post I again made the offer to review more and late last week I received a request.

The request was from Jean-Louis Taffarelli who asked me to review la tapisserie au point, a site about tapestries and needlepoint. The Parisian site is a shop and school, a gallery, and also a publisher for craft enjoyed by many.

A quick reminder about the other sites I’ve critiqued and as always to suggest you take the time to offer reviews like this to others. I know I’ve said this a few times throughout this series, but you can really learn a lot and improve your own knowledge and skills by taking a deep look at the work of others.

Quick Thoughts

As usual we’ll start with a few quick thoughts with little explanation to get started.

The site is in French. Yikes. how am I going to read it?
Google translator to the rescue
The logo isn’t sharp on all pages
I like the logo when it’s sharper and smaller
Why is the contact information set as an image instead of text?
Links sometimes show as visited and sometimes don’t
Why do links on the home page open in a new window?
On some pages the sub-navigation tabs shift around when hovered over.

3 Things I Liked

Alignment — Design elements on the site are generally aligned well. On interior pages the left edge of menu links are aligned to the left edge of text in logo. Elements have clearly been aligned to other elements on the page.

The left edge of the main text is usually aligned to other text elements creating a strong edge. The tops of images are often aligned vertically giving them a strong horizontal line.

While all elements aren’t aligned across all pages, overall there’s a clear effort being made to align elements and it generally leads to a well organized design.

Imagery — There’s good use of imagery throughout site. For example on the Who are we? page there are images from the gallery, but even better when talking about the school there are images of kids engaging, creating, and enjoying.

The subject of the site naturally calls for images and they’re generously used. The images pull you into the page content and communicate more than words alone and offer a nice way to show what the shop and school are all about. They help tell the story the site is attempting to share.

Contrast — The design employs contrast in several places. It clearly defines the menu and main content areas through a contrasting background color. Page headings are set apart with this same background color, though they’re distinguished from the menu by a border between them.

Images contrast with text and within the main text some copy is bolded to set it apart. The text on some pages is punctuated with red or green color helping it to stand out.

While the differences could go further (be bold here) the contrast helps set up the start of a hierarchy in the content.

3 Suggestions for Improvement

Make better use of a grid — Looking at the code I can see the 960 grid system was used. Divs have the add grid_11 and grid_5 classes, but there doesn’t appear to a consistent grid in place in the design.

Pages like this one showing the works of Hervé Lelong (see image below) present a grid of images, yet here none of the 960 grid classes have been used to create it.

Given that there have been clear efforts to align design elements and use a grid template, I’d like to see it taken further and have the design be built on a typographic grid. Because there’s such a mix of type and imagery I think this could help organize elements better and offer interesting design possibilities for arranging text and images.

Organize the navigation better — If I’ve counted right there are 19 links in the main menu and some get lost in that number. Some, though not all, pages have secondary navigation across the top in the form of tabs. I think the navigation could stand a round of organization and be made more consistent.

On the Who are we page? the site refers to itself as a shop-school, a gallery, and a publishing house. Navigation could be organized around these 3 or 4 different categories. The usual about, contact, and similar information could then be grouped under an additional theme or two.

This reduced global navigation could sit across the top as a horizontal navigation bar, with the sub-navigation all located in the vertical menu on the left. The opposite horizontal/vertical set up could also be used. This would make the navigation cleaner, help visitors get to what they want more quickly and generally help content stand out.

Additionally the left hand navigation could use greater space between links or perhaps a border between them to make the menu items stand apart from each other. Some pages of the site have done this, while others haven’t. The column for these links could also be widened given the length of some of the text or alternately the text could be rewritten to be shorter. Building the design on a grid would help here.

Add a more creative aesthetic — There are some really nice works being displayed on the site. The overall design could take a cue from them and use aesthetics to match.

For example the subject of the site calls for more texture to be used throughout. Canvas backgrounds, stitched details in a vary of colors. Full size images might be given a framed border and page headings could be made to appear as needle work.

There might be a danger of going overboard here and ultimately taking away from the works shown by placing focus on the design. Subtle use of textured details though shouldn’t cause any problems, instead communicating at a glance what the site is about.

Summary

Overall there’s some good things in the design of La Tapisserie Au Point. The design shows some attention to aligning elements and is perhaps on its way to being built on a typographic grid. It makes good use of imagery throughout and through contrast has begun to develop a hierarchy in the content.

The design is inconsistent in several places though. Here and there a page shifts from a strongly aligned left edge to centered text, the menu on the left has been given slightly different designs on some pages, and a few pages like the contact page show an entirely different design.

The alignment could be strengthened through the use of a typographic grid. The navigation could be better organized. I’d also enjoy seeing a more creative aesthetic based on the subject matter.

Again it’s a good start for someone who admits to no formal design training of any kind.

One more time if anyone else would like a critique please let me know. I probably won’t jump into them right away as I’ve now done 6 and would like to cover some other topics, but if anyone is interested I’ll certainly mix some in here and there.