MTAT #15: Logo Design

What logo needs to communicate

- Primarily: the domain; emphasize the dot before "is" (to contrast against dot-com)

- Secondly, the site's functionality: can record and broadcast audio which is about this (another page)

- Social media site, current, young, trendy, movement, on par with Facebook and Twitter

- Business blogging tool (this goal is likely too much for the logo to communicate; don't worry)

Design elements


"About" and "" should be same font family, but "" should be a (slightly?) bolder weight, drawing the eye over to the right.  "About" in lavender (#FA8FE4... #FF6BE4?)  and "" in a royal purple with just a touch of red (#A60C4C... #ED127C?... #E40C5F? ... #E0004B?), (B80675?  329' hue 84004d?)  again showing a forward progression.  May want to make "A" and "T" ever-so-slightly larger than the rest... maybe not necessary.  The letters probably need a thin border.  (Can you even do that with an existing font?)  No idea about font itself, but would like to try the slab-serif font that oDesk (et. al.) uses for headlines.  Try to keep "h" and "i" as close as possible, carving out space at the bottom of the two letters' downstrokes for the dot if necessary.



The negative-space inside of the letter "A" is created with a microphone that's supported by a stand.  The crossbar of the "A" is the thinnest part of the stand, just underneath the mic.  (See below for the general idea.)  The microphone of course represents audio recording.  It's critical that we have full rights to the microphone graphic!  (This may means re-doing it from scratch.)  Note how the mic stand ends up mimicking the capital "U" in Museo 500, which is exactly where that designer started with this font!


Broadcast waves

Above the "A" are about three growing, (largest on top), concentric curved segments, (red?) representing audio/radio/Internet broadcast, and could be modelled on the curved segments in the RSS logo.

Alternatively, maybe the broadcast waves could rise from the dot in the "i"?  That might be more balanced, rather than crowding the "A", and also better communicate that the process goes from recording (microphone) on the left, to broadcast (waves) on the right.  Yeah, this makes more sense, especially with the arrow under the text.

Minimized logo

The "A"-plus-microphone, and possibly the waves above, will also be used as a minimized logo for things like buttons on other websites, much like Facebook is also known by its "f" and Twitter is known by its "t".

Two dots

The dot between "Th" and "is" should ideally match the dot over the "i" to further alert viewer that it really is a dot, and that it is just as important.  Color should be enough of a contrast, probably dark blue (#1549F4) or light blue (#72DBF8).  Caution should be taken that the color, while being different, doesn't outrightly clash, potentially jarring a negative vibe about the dot.  (Yes, I know that the current site's logo displays a serious clash.)

Here's a color idea regarding the purple "This" and the light blue dots:

Arrow under text

The arrow communicates action, forward movement, visually connects the About ("what is this idea/opinion about?") to the This ("it is about This"), and also serves to highlight the dot itself.  Red (#EF1E0B) arrow starts under the "bou" to the left of the bottom of the “A”.  Slight curved indentation at the top/left edge of the arrow's start echos/ follows the three curves of the bottoms of the letters "bou".  Gentle swoop comes down and then up as the arrow moves to the right (see right-hand image below) and narrows increases in width, and the arrowhead points to the dot between "Th" and "is" for emphasis.  The color might possibly get gradually stronger as the arrow goes from left to right.


If we use this Museo font (as shown) by exljbris, would probably want to make the mic a bit smaller, so as to show more of the upper strokes of the A, as well as a larger crossbar.  The mic design elements would also have to simplify as it shrunk; see the original green A above.  In fact, we may be able to communicate the microphone just fine without any inside details at all, i.e., just whitespace.  

This shows font weights 700 and 900.  Here I touched up the dot (changed the size to meet the serif stroke of the h) and pulled it closer to the h and the i.  I'm not keen on how the T meets the h right now.  I'd want to either: a. flip the h's upper serif to bend to the right, b. cut it off entirely, or, c. have the upper right bar of the T connect to the h's current upper left serif, probably with as much whitespace separator as between the h and the dot.  Finally, I'm not sure about the upper right ending of the s, whether it should stay as-is, or pretty much match its lower left ending.

Sketch with all components together


Use vector graphics so logo can be expanded to any size.  (Billboard!!)  All source and all legal rights needs to be delivered.  Full color versions of full logo, plus minimized "A" logo.  (Not sure how buttons might work if we kept the color of the "A", and then used the royal purple as the background of the square with rounded corners.)  Black-and-white and grayscale versions.  Reduced color version (e.g., t-shirts, which may not support gradual color changes).  Reverse versions for dark/black backgrounds, or when background matches color in logo.  Reduced detail for very tiny versions, e.g., 16x16 favicon of the A for browser address bar/tab.  What else?