Tea speaks to me of rainy afternoons and crackling fires. Of snow falling on a silent garden. Of a few quiet moments out of time, the ease of familiar movements, of being in yourself completely, at peace. It speaks of hospitality and comfort, companionship and home. Tea is more to me than just a drink.
But that is only peripherally what I’ll talk about today. I decided a little while ago that I wanted to take some of my TV-watching time and devote it to learning, specifically to improving my design sense. So I bought a bunch of design books and decided to do a little project.
The motivation
I’d been spending a lot of time reading Brand New, a designer-written blog reviewing identity and branding redesigns, and I quickly found that I didn’t have the knowledge to even look at the designs critically, let alone assess them. I wanted to gain that knowlege, and given that I learn best by doing, I thought it’d be fun to do a little rebranding project of my own.
The great thing about living in a city is that there are small, mom-and-pop businesses everywhere you look, and it is rare when you find one that has both a good identity design and a functional, usable, mobile-friendly website. I can’t tell you how many times I’ve walked by a menu posted in a restaurant window and wanted to redesign it for usability—or yeah, okay, maybe just do it so I have an excuse to use some of the fonts I collect.
So I picked a business in my neighborhood to rebrand: Dartealing, a tea room (see above) with a logo I could try redesigning, a menu I could typeset, and a website I could make responsive.
And no, before you ask, they don’t have any idea that I’m doing this. I just picked them because tea.
The goals
A logo design book I’d read recommended starting out with an ideation exercise: a free-association mind-map used to collect inspiration and aspiration, a sort of formless manifesto. Out of that came the following goals for the design:
- Elegant
- Timeless
- Appealing to both sexes
- Relaxing
- Unpretentious
The solution
Using a mix of traditional and modern design elements, I came up with something that I’m rather pleased with, and that more importantly I had fun building. Read on to see what I did and how I did it.
Color
For new web projects I usually start at palette generator sites like Adobe Color (the artist formerly known as Kuler) and grab a five-color palette to start from. I was looking for colors that were vibrant but soothing, sophisticated, and modern. Here’s where I began:
But five colors aren’t enough for most projects with a web component, so one thing I’ve taken to doing in the last few years is taking that initial palette and expanding it out to 20 colors. I like to do it by building a custom color wheel and following these guidelines:
- Ten main hues, each represented by two shades: one intense and one muted.
- Arrange the colors like a pie chart. Each color should go well with its immediate neighbors.
Logo
The logo comes in three color treatments and two orientations: full color, monochrome and monochrome inverse (for use on dark backgrounds), each in horizontal and vertical layout.
Business cards
This is my favorite part of the project, and I think the part that best shows the mix of traditional and modern that I was going for:
| Back | Front |
|---|---|
|
|
|
|
|
|
|
|
Tea packaging
These labels are designed assuming that they will be affixed, front and back, to a vacuum-sealed zip-top bag containing the tea sold. There are five types of labels, one for each category of tea the shop sells.
| Front | Back |
|---|---|
|
|
|
|
|
|
|
|
|
|
Finally, the website
This bit is where I had the surest footing, but I definitely learned from the experience. The first order of the day was to make it responsive:
But I wanted to go a bit further and, well, optimize the hell out of it, based on some tricks I’d learned at An Event Apart the previous week. I ended up doing pretty well, according to webpagetest.org:
I actually did put the whole subdomain under a DNS-level CDN, but it seems webpagetest is just looking for certain base URLs for asset fetches…well, I’ll stop yakking and let you see for yourself.
There it is, and there it was
So that’s it. I felt like I got a lot out of it, primarily since it was the first time I’d done a soup-to-nuts identity design and development project—special thanks to the friends who were kind enough to take a look part-way through and give me feedback. I definitely need more practice, but I think it went rather well. Most of all, I had a great time doing it. Thanks for reading.