Creating an icon using mind mapping and sketching

I just wrapped up a quick iconography project that involved some mind mapping, sketching, and icon creation. It’s a classic graphic design practice project. That’s for a good reason – it makes you think at a certain pace, and in a bunch of directions.

Step 1: Pick some words

Start by picking a few words to work with. Words that are common but convey complex ideas are most interesting to use. I chose:

  • sight
  • smelly
  • love
  • laughter
  • fast

From there, it’s a free association exercise, writing ideas / things / concepts that the starting phrase makes you think of. It’s fun to trace the path your mind takes. What I came up with is below.

After you get to about 20 words, draw an icon for each of them. The objective isn’t to do a perfect job, but to sketch the first thing that comes to mind “pictionary” style.

Step 2: Combine words and icons

From there, take the root word, and put it together with a few of the words you linked to it. For instance, “laughter” + “loud” = “loud laughter”. Here are the combinations I created.

Step 3: Iterate and refine

Take a couple of the standout choices, and refine them. I liked “bright idea” and “smelly weird”.

Step 4: Pick an icon / symbol, and mock it up digitally

Out of my two nominees, smelly weird was the most fun to me. I think an important callout is that only after doing a lot of messing around and sketching is it worth taking this kind of thing to a digital level. When you’re in front of the screen, everything has plenty of white space and tends to look really good – sharp, perfect lines have a tendency to deceive the eye.

I tried out quite a few different sizes, strokes, and shading combinations.

And finally, I picked what felt best, and tested it at small, medium and large sizes.

The final product

A few things that stood out to me:

  • The combined question mark motif was really fun, to me.
  • Reducing an entire face down to 3 lines was an interesting exercise. I always like removing, removing, removing, until something is too abstract, and only then starting to add stuff back in.
  • There is a little bit of pseudo typography going on here – the question marks seem like the letter “S”, the nose a “L” and the mouth + chin an “E”. Together, they almost sound out “SmeLLY”

Check out a similar project I worked on recently – expressive typography

Expressive Typography

I just finished up an expressive typography project for a visual design course. Essentially, the ask was to use typography to represent what a word means. It’s a pretty classic graphic design challenge or “thought starter” (this blog strongly endorses leverages corporate jargon). I took a little bit different approach to solving the problem.

Words are really visual… but equally, or maybe more, auditory. And creating expressive typography means looking at what things mean from a few angles. So, I started by thinking about the audio waveforms of each word. I picked 4 words. I recorded myself speaking them, then looked at the resulting waveforms. I’m not gonna post those recordings – regardless of how greatly I dare to be vulnerable, hearing my own voice say a single random word makes me feel weird.

Besides the waveform, I also thought about the shape the tongue and mouth make speaking a word. To me, that’s more accurately the word’s “shape” than anything you’d see typing it out. Below are the results, solving for:

  • Dance
  • Grotesque
  • Nervous
  • Syrup

Takeaways

This expressive typography assignment was pretty fascinating to work on. I’d like to do lots more with typography. Honestly, I get the sense that it goes fairly overlooked for a lot of more web-focused designers (myself).

I have a couple theories as to why. So much knowledge that is inherited just gets taken for granted – when the typesetting in most design applications is tolerable or decent by default, there’s much less of a pressure to pay attention to it. And, speaking for my day to day work, without much font flexibility inside an experience, it’s hard to spend any dedicated time thinking about it in the scope of 10,000 other problems to solve for.

My favorite word to experiment with was “dance”. I love dancing, and something about bringing the feeling of dancing to a written word is a really fun challenge. I think my next challenge might be to animate a few of these words. It’d be a totally different project, and in some ways less challenging. But, motion and movement bring such an unparalleled level of expression to ideas.