Design Critique: Cantigas

Posted: 26 Apr 2012 05:30 AM PDT

How would you design a site for a Latino Chorus? What colors would you use? How would you set the type? How would you capture the essence of the chorus and encourage people to see them live?

These are questions likely in Jorge’s mind in regards to the Cantigas website, which he donates time and skill to maintain. Cantigas is the latest site I’ll be offering feedback on. Previously I critiqued.

As I did in those critiques, let me remind you the point of these critiques isn’t so much to help out another designer by offering feedback, though that’s certainly a nice side benefit. The main point is to get you to take the time to look deeply at someone else’s work, see what they’ve done well, and think about how you could make things better.

If you put in the effort, a review of someone else’s site can improve your design skills.

Quick Thoughts

As I’ve mentioned previously this exercise was adapted from a writing exercise I learned a few years back and begins with a few quick thoughts that aren’t meant to be explained in depth.

A lot of small css files are included in the html with an @import. Are all these necessary? Why aren’t they combined into a fewer stylesheets?
There are a lot of divs wrapping other divs in the layout. Are they all necessary?
There are a lot of clearfix classes in the html. Again are all these necessary?
Headings across the site appear set as h1. There’s no hierarchy to the structure

Given the above I’m thinking both the html and css for the site could be simplified. I haven’t taken an exhaustive look, but on the surface I’m guessing there’s a good deal of excess code.

3 Things I Like

Texture — I like the use of texture on the site. It’s subtle and not overdone. The most obvious texture in the design is the main background behind the site. There’s a little bit of noise in it giving a greater sense of depth that calls out to touch the screen.

The navigation bar has a slight gradient as do the social buttons at the top. These add to the sense of depth in the design. On some pages there’s also a box serving as something of a sidebar that includes slight shadow around it, once again adding some depth to the design.

Imagery — There are images of the chorus throughout the site. Most of these are “in action” shots and they help engage the senses so you see and hear and feel the chorus singing and performing.

Also included are an audio clip and a video clip of the chorus just in case the imagery isn’t enough to hear them. I would like to see more of these clips on the site as it’s the best way to show off the chorus. Maybe a video from a live concert could be used.

While here and there an image repeats, for the most part there are enough unique images used that they don’t feel repetitive to me. Each click to a new page generally presents a new series of images. Ideally these would all be unique and even better specifically chosen to best match the page content.

Color scheme — I like the use of red and black on a warm tan background. I like how they all work together. I might have gone a little lighter with the background for better a contrast with the text, though that’s certainly subjective.

The colors feel Latin to me, though I don’t really know why. I’m guessing it’s simply the choice of a warm color scheme, particularly the use of red which stand out to me and I associate with a passion I think is often associated with Latino culture.

I’m guessing the colors came from the images which also feature a lot of red and black as well as a brown or tan in the instruments.

3 Suggestions for Improvement

Color scheme — While I like the color scheme I wonder if it’s the most appropriate choice. Typically the colors of Latin America are brighter and more colorful and pull from a wider variety of hues. More greens and pinks and yellows.

The existing color scheme makes use of a warm palette that does suggest the Latin roots of the site, but perhaps it would convey a greater sense of the culture by opening up the palette to include the wider variety of colors that instantly suggest Latin America.

Typography — Fonts are set small, measures are allowed to run wide, and I don’t get the sense the leading has been greatly considered. On many pages I think the text is hard to read and the overall typographic choices could be improved.

On pages like the one for auditions, the measure is reduced due to the aside (in this case an audio track) and the smaller measure helps make the text more readable. However a shorter measure isn’t the only or even best solution.

What’s most important is that the font-size, measure, and line-height all work together in proportion. I think a combination of increased font-size along with a shorter measure would work best. I’d think the audience for the site skews older and would likely appreciate larger text. Larger text would allow the measure to remain longer, though it would still likely need to be reduced so it’s in the 50–75 character range.

Where line-height and vertical rhythm are concerned a look at Tim Brown’s modular scale site and presentation from the Build Conference (included at the bottom of this post) could come in handy. I’ll let you watch Tim’s 31 minute presentation for details, but using the modular scale calculator a series of measurements based on musical rhythms could be created.

I’m not familiar enough with Latin choral music to know what musical scales are dominant, but why not take advantage of an underlying typographic scale based on the music of the chorus.

Space — The use of space could be more purposeful. The navigation, breadcrumbs, main heading, border, and second heading feel too tightly packed. For example the Upcoming Concerts and Events page doesn’t contain a lot of text, but it’s all packed very tightly vertically.

More space between the different elements would help make everything more readable and allow some elements to stand out more and call attention to themselves.

On the Members page (seen above) all the text runs down the page in a narrow column on the left while the majority of the page is empty space. The visual balance doesn’t feel right and this page would benefit from using multiple columns for the list of members.

A 3rd example is the main Tickets and CDs page, which probably isn’t necessary as a standalone page. The main content (the 2 links) is lost in a sea of negative space and is easily missed even with so little else on the page. These links could probably be incorporated as larger elements on other pages as they’re the main calls-to-action across the entire site.

Summary

Overall I think the Cantigas design does a good job generating an emotional response through texture, color, imagery and media. I think building a typographic scale based on musical values could increase this emotional response, even if the reader isn’t consciously aware it’s in place.

While I like the color scheme I wonder if a greater use of bright hues, incorporating the cooler colors of Latin America into the warmer colors would be a better choice. It would more instantly suggest Latin America.

The typography across the site could use some work. Larger font-size, smaller measures, and more purposeful leading all built on a modular scale based on music would be an ideal way to subtly convey the chorus.

I’d also like to see more conscious thought given to the space used in the design. Elements are generally packed too tightly both vertically and horizontally and would benefit by more room to breathe. The negative space could be reduced and give up some room for the positive elements.