Hello royal subjects,
It’s been another few weeks, and that means more progress on the Tutor/Mentor project. The phase we’ve just completed was the creation of mood boards, which are mockups not of the website itself, but of the feeling and visual vocabulary it might take on. The boards look a bit like large print ads for the website – you might think of them as themes or templates, modeling, for instance, the way the new site might treat a headline or image.
Before making these, though, we created a spectrum of designs from which we could draw inspiration, covering a conference table in printouts of websites similar to T/MC and assorted magazine clippings. After selecting the examples we agreed were appropriate for the project, it emerged that there were two different design directions we wanted to explore. One was a more editorial aesthetic, with antiqued photos, newspaper-style type treatments, and organic colors and visual elements. The other skewed towards science and infographics, heavy on the transparency, with clean typography and bright colors.
The "editorial" feel on the left; the "infographic" on the right.
Inspiration found, Aaron and I went on to designing the boards, he exploring the editorial direction, and I the infographic. After several revisions, here is what we have:
I’m responsible for this design. I have to say that apparently somewhere along the line, Aaron and I wound up switching our directions; this certainly feels more editorial than it does like Wired magazine. I focused on a clean, readable diagram that expressed this quote from the T/MC site: “[Tutor/Mentor Connection is] the bridge that connects volunteers, donors and business leaders with students, families and schools.” The photos, too, are from the T/MC galleries. I like what came out of this, as I feel the sciencey diagram is balanced by the more personal touch that the quote and images bring to the board. It’s starting, as Tim said during one meeting, to tell a story, and I think the story is going to be compelling.
This is Aaron’s design. See why I said it seems like we switched directions? His is more content-heavy than mine; you can see he has been making these boards for some time. Aaron’s method was to show how the new site might make T/MC’s massive amount of content digestible by breaking it into clear, hierarchized chunks. His excellent typography does much to this end, featuring the quote we felt was key to T/MC’s message. Moreso than in my design, clear website elements are visible here, like tabs, body copy, and even a little footer with examples of a few ideas we’re still exploring to freshen up T/MC’s identity. Probably the cleverest elements on the page, I think, are the small bits of “school vernacular” Aaron included: dividers that look like “cut here” lines, a little pencil next to “Learn More,” checkboxes, and lined paper. His diagram illustrates same quote as mine, with arrows showing the connection TMC makes between the disparate groups. And don’t worry, we don’t really like the little people icons either.
As a personal note, I have to say that I found the mood boards to be the most difficult part of the process so far. They are a very high-level, abstract way of designing a brand, and yet the execution must be extremely concrete, with each part of the page there for a well-considered reason. I had some difficulty locating the line between conceptual branding and actual site design, but after all the revisions, I feel I have some sort of a handle on it now. In any case, we are moving on to creating actual webpages, and I’m very much looking forward to that.