/ log / 7th Apr, 2008 /

Iterations in Brand Design: OmniTI

OmniTI flames

OmniTI are instantly recognisable to almost anyone interested in open source development, scalability or security. Their client list reads like a who’s who of the Web. Many of their people are core contributors to open source technologies like PHP; some are co-creators of popular frameworks like CakePHP and Solar; they speak at many industry conferences and have written eight critically-acclaimed technical books; they’re probably one of the most technically erudite and accomplished consulting companies working on the Web today.

They asked me to work on their identity to mark their tenth anniversary and the separation of the email part of their business off in to a separate entity. This is an insight into the process and how the final design was created:

Scope & objectives

In June 2007 the initial scope asked for a redesigned mark that would still be recognisable to people already familiar with the brand. That meant retaining many of the elements of the original, including the typeface, over the course of five iterations. This was the existing mark at the time:

OmniTI original logo

These are the objectives of the redesign we arrived at during the specification stage:

  1. Simplify the mark “O” and incorporate it into the type to render well for the Web at small and medium sizes as well as large.
  2. Make the mark as easy to understand as possible with the correct enunciation.
  3. Clarify the typography for the Web and provide “balance”.
  4. Make the form colour–independant and suitable for all formats: print, screen or otherwise.
  5. Make the mark unique and suitable for trade mark purposes.

Type & typography

Identifying the original typeface was straightforward. It was Century Gothic from Monotype Imaging: A Bauhaus-inspired geometric face designed specifically for digital systems, based on 20th Century, which was drawn by Sol Hess between 1936 and 1947 and in turn inspired by Futura. Century Gothic shipped with Windows from Win98.

After reproducing the original type treatment, I quickly capitalised the name properly in order for it to be read more accurately. I converted the text portion of the mark to black and white, and began to play with anti-alias at low screen resolutions to show a quick revision to OmniTI before starting in earnest:

OmniTI typography

The weight of the capitals looked incongruous to me, but the quick revision gave us all food for thought. It set the tone for the direction the design would move in, and I got stuck in to the main body of work: Trying to find a way of simplifying the existing flaming comet and incorporating it in to the leading “O”.

Simple & Complicated Revisions

Iterating the existing mark forced me to go back to starting principles. Much of the form needed to be retained, but it had a significant problem: If this was an identity seen mostly on the screen, then the existing mark was too complicated, effectively breaking at lower sizes, and forcing OmniTI to use a comparatively large version for the “comet” to be rendered properly.

The first two revisions were deliberately simplified as far as I could make them with some movement retained in the stylised “O”, but stripped completely of decoration:

OmniTI revisions 1 and 2.

These revisions were deliberately provocative on my part by being extremely simplified and pushing the limits of the brief. However, having something tangible gave everyone room to think and react. It made the boundaries of the brief slightly clearer and allowed me to continue with more of a feeling for the direction we needed to go in.

From the super-simplified, the next two iterations re-introduced the trails from the original mark as flames, and swung the design in an opposite, more complicated direction:

OmniTI revisions 3 and 4.

This was deliberate, too. I’ve sometimes found that good results come from a design process that swings like a pendulum or an elliptical orbit around the final outcome. To find the right balance between the requirements it sometimes feel right to push the design out to the aphelion along certain lines of thought, then let the collaborative process pull it back to the perihelion where all the conditions are met and it works. That’s what happened for OmniTI. Collaborative discussion with them and their quality feedback was crucial to this approach.

Final polish

The final iteration combined the two approaches, with a more geometric comet that has echoes of the original, but more simply drawn. The letterforms were unlocked from the pixel grid, but with the anti-alias tightened. The acronym capitals were also adjusted. This was the result:

OmniTI revision 5.

During the OmniTI web site redesign (a case study will follow soon is now available) the logo was re-coloured to match the palette:

OmniTI site logo.

All of the iterations and development of the final brand mark were heavily influenced by the feedback of Chris Shiflett, Theo Schlossnagle, Brian Vaughn and the rest of the OmniTI folks who gave their time and opinions. This collaboration was crucial to get the end result. My job was to guide them through the technical design process and hold all of their requirements in my mind while the pixels and vectors appeared on the screen.

It was a real privilege to be trusted with their brand. I think we achieved a good result from what is often an emotive exercise, and I’m particularly happy that we managed to build on the work that came before to reach the final design.

Share

Browse More Articles

10 Comments

  1. 1. By johno on 7th Apr ’08 at 16:55pm

    A great write-up, Jon. Always interesting to discover how others approach design. I like how you illustrated the progress of the logo, and I think it would also work really well reversed out and at smaller sizes.

    It was a real privilege to be trusted with their brand.

    And the result demonstrates that—and your respect for the brand.

  2. 2. By Hamish M on 7th Apr ’08 at 20:30pm

    I have to agree with John, that logo is hot. :)

    Thanks for the insight on your design process. The final design fits really well with the OmniTI site look & feel.

    Out of curiosity, did you use Illustrator for the design?

  3. 3. By inspirationbit on 8th Apr ’08 at 06:39am

    That was a real treat to get behind the scenes of your creative design process. Thanks, Jon. Like the simplicity of the new logo along with some bonus flare.

    I also look forward to reading OmniTI web site case study. I already have a couple of CSS questions for that site, but I'll hold off until your article is up ;-)

  4. Jon 陳’s profile 4. By Jon 陳 on 8th Apr ’08 at 11:20am

    Thanks, John, much appreciated. One of the things I didn’t touch on was smaller sizes. It had to work at the level of a web button (88 x 31px) so that size was included in the tests. Inverted is an interesting thought, too.

    Cheers Hamish. The site design actually followed the brand redesign, and Fireworks was used for the vectors. I find it more intuitive than Illustrator.

    Vivien, feel free to email me if you have questions. Not sure when the study will be appearing. :)

  5. 5. By Ryan Miglavs on 9th Apr ’08 at 18:38pm

    That’s a beautiful logo mark, Jon. I love that you started with so much abstraction, because it seems to have guided you to a solution that is both evocative of the message and simple.

    I also love the site redesign. You have a very special talent with type. Although it bears what might be too much similarity in some regards to your Gr0w site, the clarity and understated beauty of it all is a perfect fit. The little touch that I loved discovering was the URL scheme: omniti.com/is/cool. The use of verbs rather than nouns made me smile.

    Cheers!

    {ryan}

  6. Jon 陳’s profile 6. By Jon 陳 on 9th Apr ’08 at 22:33pm

    Thanks for the exceptionally kind and eloquent words Ryan!

    There’s more on the URLs from Chris Shiflett. It was fun (and sometimes traumatic) trying to make it work as we wanted but I love the result. So much so, it will featuring in another site that will be launched this week.

    I fully acknowledge the comparison you make with Grow, only because I know that as the copy, IA, vision and design iterated it became clear to me that the similarities in approach between OmniTI and Grow made an evolution of that layout almost inevitable. In some ways it’s a design I created for Grow. Something I’m hoping to touch on that more in a case study to follow shortly (with luck). Thanks again! :)

  7. 7. By Mathew @ MB Web Design on 17th May ’08 at 02:06am

    Finally, someone else who prefers Fireworks over Illustrator! I spent a long while arguing with an illustrator on a contract I’m currently working on that Fireworks is better to use, notwithstanding Illustrator’s memory-hogging ways.

  8. 8. By kral oyun on 31st Mar ’09 at 09:24am

    I also look forward to reading OmniTI web site case study

  9. 9. By fernando on 15th May ’09 at 16:25pm

    Great post but where i cand find the fonts free??

  10. 10. By Shane on 24th Feb ’10 at 09:51am

    Great logo, its always good to see other designers processes and devel0pment.

    Really enjoyed the read.

Post a Comment

Required sections are marked § . Please remember, debate and courtesy are mutually inclusive.

Personal Details and Authentication
Comment

Lately in the Log

  1. Introducing Analog Wed, 30th Dec 2009 {16}

    Just before Christmas, a few friends and I launched a new company,…

  2. SxSW Pick ’n’ Mix for 2010 Fri, 4th Sep 2009 {10}

    I know I’m woefully late. Voting ends today! I don’t really…

  3. Review: HTML and CSS Web Standards Solutions Wed, 19th Aug 2009 {22}

    I’m so glad that this book exists. I’ve been hoping someone…

  4. All Change, Please Thu, 13th Aug 2009 {33}

    ‘One door closes, another opens’ is an idiom that has always…

  5. OSCON 2009: incoming! Sat, 18th Jul 2009 {2}

    Just a quick note. More of a test really. Can I crank out a quick post in…

  6. SkillSwap Goes Typographic Mon, 9th Mar 2009 {16}

    Right. I’m blitzing this. Two posts in one day. It’s unheard…

Remarks from the log

  1. By Annie Ha in Review: HTML and CSS Web Standards Solutions:

    Hi Jon, As a graphic design student, I strive for a better structure and well design website. I was looking for a…

  2. By Shane in Days like these:

    Great post, makes me feel better that not only I have days like these! Thanks.

  3. By Joey in Introducing Analog:

    Long time reader - first time commenter! Good luck with the new company, hope it all works out for you :)

  4. By Emcee Hao in Complex Type: CSS Fix, ClearType Miss:

    dude, awesome type. rock on.

  5. By Shane in SxSW Pick ’n’ Mix for 2010:

    Great post, hope 2010 is going well for everyone! Keep up the good work.

  6. By Richard Fink in Introducing Analog:

    Jon, know you’re involved with Rich Rutter and Fontdeck and you’ve written a bit on @font-face. just a…

People and XFN

Analog folks:

  1. Alan Colville

  2. Andrei Zmievski

  3. Chris Shiflett

  4. Jon Gibbins

Friends, colleagues, and authors with interesting voices:

  1. Ben Ramsey

  2. Dan Mall

  3. Denna Jones

  4. Ed Finkler

  5. Elizabeth Naramore

  6. Elliot Jay Stocks

  7. John D. Boardley

  8. Helgi Þormar Þorbjörnsson

  9. Joe Leech

  10. Jos Buivenga

  11. Kester Limb

  12. Nicola Pressi

  13. Patrick H. Lauke

  14. Piotr Fedorczyk

  15. Richard Rutter

  16. Rick Hurst

  17. Sean Coates

  18. Simon Pascal Klein

  19. Terry Chay

Work with me via ~ Analog ~ a creative consortium.