/ 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 09:55am

    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 13: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 7th Apr ’08 at 23:39pm

    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 04: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 11:38am

    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 15: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 16th May ’08 at 19:06pm

    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 02:24am

    I also look forward to reading OmniTI web site case study

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

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

  10. 10. By Shane on 24th Feb ’10 at 01: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. Anakin Tue, 26th Jun 2012 {4}

    I’m pleased to be able to say that Analog is joining forces with…

  2. We, Who Are Web Designers Mon, 19th Sep 2011 {67}

    In 2003, my wife Lowri and I went to a christening party. We were friends…

  3. Ampersand, the Aftermath Wed, 22nd Jun 2011 {4}

    The first Ampersand web typography conference took place in Brighton last…

  4. Design Festival, The Setup, and Upcoming Posts Mon, 20th Jun 2011 {2}

    Wow, this has been a busy period. I’m just back from the Ampersand…

  5. Web Design as Narrative Architecture Wed, 30th Mar 2011 {12}

    Stories are everywhere. When they don’t exist we make up the…

  6. Ides of March Tue, 15th Mar 2011 {5}

    My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

  1. By pixelangry in We, Who Are Web Designers:

    Unfortunately, here in Italy, the figure of the web designer is seen as a figure who plays a nerd on the computer,…

  2. By www.canadianseoagency.com in The Paragraph in Web Typography & Design:

    Yep, this would be arguably the best articles I’d ever gone through in the recent times. I do hear alot of…

  3. By George in Copywriting, Experience Design, Daleks & Julio:

    Thanks

  4. By Martins in Typeface != Font:

    Great post Jon, I stumbled across it by chance on Google..!!

  5. By OddsRİng Giriş in Ides of March:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

  6. By OddsRing Giriş in Ampersand, the Aftermath:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

People and XFN

Analog folks:

  1. Andrei Zmievski

  2. Chris Shiflett

  3. 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

Live the questions and one day grow into the answers.