The logo is the first and most important visual mark of a tea package. It sets the tone for the entire tea-drinking experience. There are several different ways to drink tea – on the go, sitting in a favorite easy chair, or at a fancy luncheon – and the way teas are packaged and how they look ultimately influence which teas are consumed in which scenarios. One wouldn’t bring cheese-whiz to a fancy dinner party – in the same way certain teas belong in certain environments.

I’ve been able to distinguish three classes of tea – all based on their logos – for three different environments. These classes are also based on my knowledge of and research in the brand behind each logo.

Simply straightforward (middle class)

These are the kinds of everyday teas that one stocks for no particular occasion. There are no surprises here, for better or worse. The logos are what I expect tea logos to look like. The colors are bold, the type uninteresting, and if other design elements are used they are rather uninspired. These kinds of logos are so abundant that they are somewhat comforting- nostalgic even.

Mysteriously Magical (unclassifiable)

These teas are reserved for moments of needed calm or excitement – something different. These brands do a marvelous job of bringing out the mysterious side of tea. The type is beautiful but unusual, strange shapes are common, and if color is used, it is rich. For a glimpse of this strange world visit the Tazo website. (Sorry it’s in flash).

Effectively Elegant (high class)

Tea is nothing if not fancy and traditional. These brands appeal to that aspect of tradition and royalty. Elegance can come in many different ways, but the commonality here seems to be serif typefaces, lots of fancy lines, dignified illustrations and little or no color. Not surprisingly a lot of these brands are from England. Why is it that the British are always classier than us? I would (and do) buy tea from these brands just to make myself look classier.

I hope that after reading this post you are better equipped to do your own classifying of tea. If you discover a new class of tea I’d love to hear about it in the comments below.

I’ve gathered a range here for your viewing delight. For the sake of protecting these brands, (from scorn and ridicule) I’ve removed the names. In full disclosure I did not thoroughly investigate any of these brands to understand the history or what the logo designer was trying to accomplish. I’m critiquing these logos choosing to take the vantage point of the average man (speaking as a woman of course).

Grade: D-

D stands for dull. The above logos are my least favorite because or their obvious solutions. “Oh, it’s an outdoor outfitting company…let’s put a mountain in the logo.” This seems to be the thought process behind these logos. Seriously, half of them even have the sun or some sort of sky behind the mountain. These are supposed to be logos, not illustrations. These logos have the essence of Wil E. Coyote – lots of spirit, but no real strategy. It’s the lack of creativity that’s really a shame here.

Grade: B

B stands for better. These logos are not only better executed but they are attempting something. Dated though some of them may be, you can see an idea was there – it may not have stayed long, but it did visit. Perhaps one of the logos above was visited by his cousin adidas.

Grade: A

A stands for “alright!”. These logos may not be perfect, but if you had to have a mountain logo I would go this route. These logos not only have originality when it comes to mountain shapes (never mind one of them looks eerily similar to Motorola), but they have spunk. Now if I can just get one of these companies to send me a free jacket I think that’d just about do it.

Now, before we begin, keep in mind this ride is not intended for all audiences. I am a commuter and use my bicycle is primarily for utilitarian purposes rather than leisure or exercise. Also note that I am not a machinist or engineer and while I can design and dream all I want about my ideal bicycle I don’t have any of the skills necessary to build it. (Read: Urban hipsters: please do not contact me asking how you can get one of these bicycles. Engineers/Bicycle makers: please DO feel free to actually build a model of this and notify me immediately.)

Alright, what’s the first feature of my dream bicycle? Well, some of you may wish for a diamond encrusted bicycle, but remember I’m all for the practical and obviously would want my name spelled out in the frame of the bicycle, like so:

Secondly, seeing as how headphones are illegal while operating a vehicle (that goes for you too drivers) I would want the ability to play music on with my bicycle. What better way to make music than have the ability to play records around my wheels?

Speaking of tires, I’m always worried about bicycle safety and not being seen by drivers at night so why not add some snazzy led images to my tires?

On a practical note, I’d like my tires to be self inflating with a built in pump like so:

I would definitely want a pannier or two attached somewhere. Popularmechanics.com describes panniers as “A graduated basket… well worth the expense.”

Living in washington DC has its advantages- lots of free museums, outdoor film festivals in the summer and a fair amount of bicycle lanes to get there on a bicycle. What’s the trouble with that? Bicycle theft. While there has been lots of attempts at designs to quell the would be thieves I think one of the best inventions is to have the lock be part of the bicycle itself (better yet, an essential part). I saw this on a few sites including bicycledesign.net.

Any bicycle worth it’s salt should obviously be foldable – small enough to fit in the space in car trunks designated for a spare car tire. This idea Volkswagen came up with and I’m a big fan. That way you can drive to the countryside and have a leisurely afternoon of biking.

Besides a pannier or two another basket on the front of my bicycle couldn’t hurt- why carry things on your back when you’ve got a perfectly good machine that can hold things?

I would not want my ride to be a strenuous workout like the crazies who ride the ElliptiGo.

Being a social animal I regret that most bicycles are only build to hold one person. Not the case with my bicycle. Mine would have an extra pop out seat and pedals so my friend could join me in a jaunt.

And the final crowning piece of this bicycle? Well, first think of all the musky animals overrunning the streets of any city. I’m talking about squirrels. They’re not doing much of importance, and they’re friendly. Why not put them to work? I’ll devise the inside of my tire so that it’s something like gerbil wheel meets parrot swing. That way my tires can be powered by natural energy and when they get tired of running, they can jump on a tiny hammock and rest while I pedal. It’s brilliant! And think of all (government subsidized) jobs created because people will need to train these squirrels! It’s really a win-win-win.

I’m thinking the final product will look something like this:

To complete the dream machine I would get an airbag hoodie and a stylish nearly stylish helmet.

While it might not be the most feasible bicycle redesign, I think it’s better than the fake bicycle from Leonardo Da Vinci’s sketchbook and may just be crazy enough to work.

Obama. An obvious choice for next year’s election, not only because he is the current president, but because of his snazzy logo. Bold, clean type with the memorable “rising sun O of hope”.

Bachmann. Another strong logo. Bachmann chose to go with a classic serif with a bit of patriotic fun substituting the crossbar on the H with a waving flag. A slight twist on the same old political logos we’ve seen year in and year out.

Gingrich. Although very typical for a political logo – it does its job by presenting the name of the candidate clearly without a lot of fanfare.

Person. Somewhat lacking personality, this is another acceptable logo – using a modern style. The important items are communicated and legible.

Romney. Great design!… if the logo wasn’t white. (Case in point- I had to add the black background just to get it to show up here.) While it may work to put this logo on the website of a heavy metal band (which I’m not sure he wants to associate himself with) a (partially) white logo – like white pants- is simply not practical for everyday use.

Perry. While struggling behind I’d still include this logo in the acceptable – good category. A circular gradient may not have been the best choice, but the type is bold and readable.

Karger. It was hard to tell if this was Karger’s logo or just some type on his website. I like the font, I just wish it more thought was put into kerning (letter spacing) and the design team probably needs to take another stab at the american flag motif on the left.

Huntsman. While this logo isn’t “bad” I question it. When I see this logo I think construction company. Perhaps it’s the simplicity of the H, or the sans-serif font, but I wouldn’t be surprised if Huntsman had to field questions about the whereabouts of his foreman.

Roemer. I liked where the designer was going on this logo- I just don’t like where he ended up. Red, blue and gray does not make for a great logo color scheme.

Paul. Ron, what’s that protuberance coming from the A your name? It’s additionally confusing because of the great eagle behind you.

Santorum. I give this one props for originality. However, points must be deducted for the serif font and the awkwardness of the eagle.

Wrights. Dallas. Is this man from Dallas? He must be right? Otherwise he must be the star of the show – or a sheriff.

McCotter. Drop shadow. Need I say more?

Martin. White drop shadow. See above comment.

McMillan. This is getting beyond the real of questionable taste and I have to wonder- did he even try?

Alexander. No, I don’t believe Alexander does care. At least not judging by his “logo”.

Well, that about does it for the candidates. There were many more I could have chosen and so many more things I could have said, but I hope this will suffice to prove my point. For those of you considering running for a political office in the future, may this blog give you pause, but also hope and courage to do the right thing – and hire an expert.

Phase 1

After the initial kick off meeting with the introduction to the project I started sketching. I was thinking that I wanted to convey family from the beginning because I knew the focus of the foundation was on mothers and they are the hub of the family wheel. I sketched a more or less realistic interpretation of a mother and father holding hands with a child. Then I thought about how I would tie this logo to the middle east. Perhaps I should bring in the shape of the country? What about merging the beautiful architecture in Oman with the letters to create some kind of interesting typographic shape?

Phase 2

Then I started to think that abstracting the mark might be a better approach. That way it could still symbolize a family without showing the obvious and at the same time create a visually compelling mark. I played with a trinitarian design – symbolizing the family unit. Then of course the subject of hands came up. While hand logos have been done everyway to Sunday, I had to try: A mother’s hand reaching for her child’s, a close up of fingers overlapping, etc.

Phase 3

None of these options really encompassed the entire message of the foundation. So I went back to the idea of the family and tried to integrate the family into one shape. I thought about showing just one person instead of three, but that seemed too specific. Then I looked back on my sketches of a row of architectural columns and noticed that there was something there in the negative space between two columns. I drew a better sketch with more intention to create a family-like shape. After tweaking that sketch and rounding the edges a bit more the basic logo concept was born.

Final Logo

For an overview of the creative process you can refer to my previous post our recipe for the creative process.

To see the rest of the print pieces for this project please visit our portfolio page.

Vector images are created using geometrical formulas in programs such as Adobe Illustrator. Vector artwork is made up of a series of points and lines that uses math to determine how to fill the space between those points. Because it is math-based vector artwork can be scaled infinitely without losing quality, as opposed to raster or pixel based images.
Raster or bitmap images are made of pixels and are typically images such as JPEG, TIFF, & PNG. Because they are pixel dependent, enlarging them too much makes them look pixelated. Raster graphics are sometimes referred to as contones from “continuous tones” and vector graphics as “line work”.

JPEG (Joint Photographic Experts Group)

An image format best used for on the web, but is also acceptable for printed jobs. It uses a lossy compression method, meaning that it throws away image data/detail in order to make an image file size smaller. When saving a JPEG the user can choose a quality range from 1 – 100 with 1 being very poor, and 100 being the highest quality. The size of the file depends on the quality selected. The color range is limitless with millions of colors available. (To avoid confusion: the file extension is .jpg but is the file is referred to as JPEG.)

TIFF (Tagged Image File Format)

A preferred image format with which to print. It uses lossless compression meaning that it keeps all the image data. While great for detail, it can also create very large image file sizes. Tiffs are also used for as an alternative to PSDs for storing images because they support the same qualities without being software specific. They support layers as well as transparency.

GIF (Graphic Interchange Format)

Another image format for the web, but in contrast to JPEG, it supports transparency. It uses lossless compression but limits color availability to 256. Still more widely used than PNG. The only widely accepted format that supports animation.

PNG (Portable Network Graphics)

A lossless file format created as an patent-free alternative to GIF in the mid 1990′s. It has better compression and transparency options than GIF. It is largely supported across most browsers, except for Internet Explorer. Below IE version 4 it is not supported at all and even newer versions still do not support certain elements of PNG capabilities. It comes in two different kinds: PNG8 and PNG24. The difference is PNG24 supports millions of colors while PNG8 only supports up to 256 colors. As a result PNG8 files are much smaller.

EPS (Encapsulated Postscript File)

This is a vector file format which can be read across different programs on MAC or PC computers. Raster images can be saved as EPS files, but will still remain uneditable with a vector editing program such as Illustrator. Saving a raster image as an EPS file is essentially the equivalent of plastic fruit; it looks like real fruit, but you can’t really cook with it or change its form to fit your nutritional needs. If a designer asks for a EPS version of a logo, they are asking for the fully vector-editable version.

AI (Adobe Illustrator)

The native file format of Illustrator, the vector graphics creation software from Adobe. Most logos are created in this program (or its equivalent).

PSD (Photoshop Document)

The native image file format of Photoshop, the raster graphics and photo manipulation software from Adobe.

Bottom line: use the best image format for the job and when in doubt reference this handy chart:

“I’m just not creative,” a client will say,

“you’re a designer, can you help me think of ideas?”

All designers hear this – from clients, friends, even family members. The thing is, most of us wouldn’t say that we are exceptionally creative either; we just know the process of reaching out and finding those good, creative ideas. The best part about this process? It’s no secret. Yesterday, we listened to an Ellen Lupton “webinar” about this process, and came away with some great ideas for clients to spark their own creativity:

Visual brainstorming

Brainstorming can seem daunting: I remember being confused about what exactly my teacher wanted me to do back in kindergarten. While there’s no correct path, Lupton suggested lots of quick, little sketches to get your creative juices flowing. A sketch of a tree can lead to a sketch of a squirrel to a sketch of an acorn – you get the idea. By sketching a lot very quickly, you will start to form ideas you didn’t even know you were thinking about.

Visual brain dump

Similar to the visual brainstorm, the visual brain dump gives you a time limit and a goal number of sketches. Do 20 sketches in one hour, for example; the limits you give yourself put the pressure on and help reach an idea quickly.

Make lists

Just start writing. Any word that is at all associated with your subject is fair game. Try themed lists, picture lists, or make your sketches into a list.

Action verbs

Is your initial idea cliché? Maybe you’re designing a logo based on the phrase “apple of my eye”. Spice it up by reimagining it with action-oriented words. Stretch the apple, magnify the eye, multiply one of them. Melt, soften, freeze, squish, squeeze it: all verbs that help transform a bland idea into an original one.

Everything from everywhere

This might be the craziest idea-getting process of all: you can get inspiration from everything, everywhere! Really open your eyes and look around. There are thousands of colors, patterns, even full-fledged ideas sitting right before you. Turn on some music, take a walk through a garden, or browse a magazine; if you pay attention and use all your senses, an idea could come out of nowhere.

There’s no wrong way to come up with an idea. If you’re stuck, however, give some of these a try. You might come away with something extraordinary.

For additional reading on Ellen Lupton’s design thoughts, read this previous blog entry by Hannah.

Design is functional art

Art is more than aesthetic, it’s about making a statement: communicating. Design is like art, but focuses on the problem (function) first and then fashions communication (form) to produce a specific response. Bottom line: Design is primarily communication that combines aesthetic with creativity to produce a product that not only looks good, but has the potential to affect change.

Design is thinking sideways

Sometimes the best way to solve a problem is to not focus at the problem at all. Take the example of the power aware cord. Problem: People waste energy. Solution: Show them how much energy they’re using. Perhaps the solution is as simple as making people aware. Change can’t happen without knowledge of the problem.

Another solution is give people a choice. If you see a “problem” it might be widely used because it is the only option. Greg Holdsworth came up with an alternative solution with his biodegradable casket. He saw the problem: coffins that are gratuitously designed for eternal permanence and came up with a solution. He didn’t try to change what people are using, but simply offered a more environmentally friendly alternative.

These are brilliant solutions because the concept is so simple. Designers cannot force people to change. They can only create something better. The best designers reinforce positive behavior instead of criticizing negative behavior.

The best part about all this? These lessons apply beyond just the design discipline. Everyone has the power to enact change. If you see a problem don’t complain about it. Think like a designer: what would you do differently? How could you make it better?

We hope this post inspires you to make a change for the better. Please use our comments section below to share how you’ve made a positive impact in your community.

Small effort, bigger results

My friend Jacob Smith introduced this word “realignment” to me 5 years ago in a dark Virginia cave. The word evokes imagery of auto mechanics… NOT designers, engineers or factory workers but mechanics. Many times all a website needs is modest changes or a restoration to its former beauty. Not all realignments are equal but here are a few examples:

• To improve the action taken on your site, maybe all you need is a sitemap and universal navigation adjustment.
• Your homepage might need tinkered with to throw out the waste and bring in the useful — the same might be said about your secondary page templates.
• Are your key pages not getting traffic — redraw those calls to action prompts and reword some primary content.
• Sometimes you just need to refresh the page with cosmetic changes to the header and style sheets.

Relignment Example:

As BEFORE's activities increased, the need for a dynamic homepage increased too

It might be time to redesign

You cannot resuscitate chicken bones or put lipstick on a pig… a realignment might not help. How do you know if it is worth the investment to redesign your website:

• You would never drive your website to the prom let alone to a dumpster dive gathering. If your website is not attractive it could be conveying that your org is not trustworthy, not organized or worse, that you don’t care about your constituents enough to create a positive web experience.
• Your website is difficult to maintain due to no CMS being used or an out-dated CMS
• Your organization has gone through major changes and you need a new communication tool for your marketplace repositioning.

Redesign Example:

After many realignments, GraceDC was in need of a redesign (sneak peak!)

Like my dance moves, all websites can improve

The reasons for a realignment or redesign are many, but the most important reason is to improve the experience for a donor that results in a desired reaction. For some of you a minor change to your site might be the most cost effective way to see big increases. For others, it might be time for big planning to change. Let your business requirements drive the decision and get talking about your objectives, goals and technical requirements.

They chose not to allow the page to feel like one LONG straight line, but, instead, guide the user through in a thoughtful journey—which includes visual rest stops along the way.

FIRST PART: Scrolling Pages

There’s been a trend in websites that embraces the scrolling page.

I’ll give you some history as I perceive it: there were a lot of people against scrolling pages for quite some time, using such notable phrases as above the fold. Anything below the fold the user had to scroll down to see and so people thought content in that space would be perceived as less important. There was another side to this though. At the same time designers were avoiding content going below the fold they were also avoiding clicks. Common knowledge is —that the more clicks needed through any site, the more people get lost. Users drop off the site in large numbers with each click.

Long sites are being embraced now though! Perhaps this is a result of problem-solving the click issue, but it may be as simple as stating that it’s FUN to be unique! Who doesn’t want their site to stand out? And here’s the exciting part, some of the designs that have emerged from this trend are really creative in the way they bring the user through the long pages. They chose not to allow the page to feel like one LONG straight line, but, instead, guide the user through in a thoughtful journey—which includes visual rest stops along the way.

Here are some screenshots of sites that we appreciate:

SECOND PART: Immersion

For a designer to create an immersive experience it takes understanding the client and project—goals, audience, personality, tone, restrictions, etc. It also takes a great deal of adventure and experimentation to get to that perfect solution. Some of the solutions use artistic videos to pull the user into the mood and tone of the business—capturing and then imparting the feel of the business the site stands in for. Still other sites use interactive experiences to allow the user to navigate through the virtual space in ways fully symbolic of the business itself. It may be hard to explain, but you know when you’ve been immersed in an experience/journey and it’s distinctly different from the average site.

Here is a screenshot of a site that takes the user on an immersive journey by way of video:

Check out the Savoy site to see the video!