Ramen Logo & Brand Identity Design

The new Ramen Logo & Brand Identity Design

In response to my post about giving back to the Open Source movement, I discovered a free, open-source, cross-platform video compositing application that was in need of a logo design that could also be used as an application icon. The project is called Ramen and is lead by Esteban Tovagliari. I was tasked with developing, not only a new logo design and brand identity for the project but also an application icon, for use on docks and applications menus, and a splash screen.

ANY_CHARACTER_HERE

Brief

I want Ramen to be a useful tool for people to learn compositing and do creative things with it. Ramen is a node-based video compositor. It’s designed to process, composite and add special effects to video sequences. Video compositing is a very interesting (and complex) area. Node compositors like Ramen, are better suited to work with real footage. For motion graphics work, layer compositors (like After Effects) are better.
Ramen is still in the first stages and there’s a lot of work to do. It can’t compare with Nuke or Fusion and that’s not the idea anyway. I think it’s a good program for getting started. It’s freely available, easier to learn (and much less powerful) than Nuke and I plan to include some interesting “experiments” from my lab in the future.
Of course, it’s also open source. But that’s not the most important thing for me. Sometimes, open source means unpolished programs, directionless development and spaghetti code. I’m trying to do something different. I’d like people to use the program because they like it and it’s useful. Not because it’s free.
I’d like the logo to have a graphic element that can be reused without text, for icons and things like that. The ideas I’m using for the development are: correctness, quality, experimentation and sharing data with other applications.
ANY_CHARACTER_HERE

Research

As with all good logo designs, we start with research. What is Ramen? Where does the name come from? What is “video compositing”? Who uses video compositors? What can you do with video compositing? How was video compositing developed? What’s the history? What other video compositing apps are there? What’s a node-based interface? Lots and lots of questions gave me a fair tonne of answers, as seen in the mindmap below (click for a larger view, it’s quite big).

My mindmap when researching for the new Ramen logo

As you can see in the mindmap, already there were a lot of potential avenues to explore for the new Ramen logo. I liked the reasoning behind the Ramen name: in Japan, Ramen is a watery, noodle-based dish that’s been turned into a very popular convenience meal. It’s quite popular in the US too. And in a node-based interface, used in a lot of video compositors, the connections between the various nodes are called ‘noodles’.

Clever.

Could we implement this into the design somehow? I didn’t want to be obvious by, for example, designing a logotype that looked like it spelt “Ramen” using loopy noodles (plus you couldn’t use that as an application icon, this was important). We needed to be much more simple and subtle.

It was also important to find out what other video compositors there were available out there. Ramen is, and wants to be seen as being, different. This was an important aspect of the brief. So let’s see other video compositors are out there.

Competitors and/or similar video compositors

I also started searching for images and concepts that were brought up by the mindmap. Inspiration seeking, if you will. Seeing if certain key phrases and concepts produced certain images and visuals.

Off we go to search the web then.

Inspiration and concepts behind the new Ramen logo

Specific visual ideas researched behind the new Ramen logo

We’re getting a lot of potential ideas here. In particular, I liked the idea of blue and green screen compositing used in modern TV and film composting techniques and felt that this could definitely provide the colour palette. I also liked the symmetry of the film reel, and thought that could be used as a starting point.

So, with all this information swimming around in my head for a few days, it was time to start sketching.

Sketches that lead to the development of the new Ramen logo

More sketches and developing the new Ramen logo

You can see that I was starting from a very basic and almost elementary starting point—that of single shapes and how they interact. Sketching is an extremely useful and, in my experience, underused stage of the design process. Here you can read more about my personal design process.

You can see on the second page that I was starting to hit on the nodal connections idea and, at that point, I was starting to think about how I could suggest this in the new logo design. When I thought about this in context of the film reel image I mentioned earlier, a little lightbulb went in my head.

Time to start digitising the design.

ANY_CHARACTER_HERE

Developing The Logo

In thinking about what typeface to use in the logo design, I did consider making my own… until I came across this beauty, which I felt perfectly embodied the principles of simplicity and friendliness whilst also being clean, professional and different.

The typeface used in the new Ramen logo

Furthermore, I did decide to use bluescreen and greenscreen compositing as the base for the new Ramen colour palette. Not only was it a nice reference to video compositing, it provided a clean, modern and friendly feel.

The colour palette for the new Ramen logo

And so, like the idea of video compositing (the merging of basic elements into a single, new entity), when we merged together the typeface, the colour palette and the concepts of nodal connectivity and film reels, we arrive at something new…

The new Ramen logo

The new Ramen logo. A clean, simple and memorable design. Importantly, since the human brain recognises objects by shape first, followed by colour, it was important that the new logo design also worked in monochrome…

The new Ramen logo in monochrome

And we can also see how the logo can be applied with the designated colour scheme…

The new Ramen logo with the colour palette

And below, the construction and layout of the new design…

The construction of the new Ramen logo

Key features of the new design include:

  • a clean, simple and memorable design
  • the blue and green ‘nodes’ referencing blue and greenscreen compositing;
  • the shape of the graphic mark—a circle containing a wheel of circles around a central one—suggests the shape of film reels;
  • the ring of nodes connect, and point to, the central circle, signifying the very act of compositing—that of the merging of many basic elements into a single new entity;
  • the graphic mark can easily be used on its own as an application icon in menus and docks;
  • the design is simple and memorable enough for use in monochrome as well as colour.
ANY_CHARACTER_HERE

Case Usage

We can see here how the new Ramen logo can be used quite happily as an application icon in docks. It stands out rather well.

The new Ramen logo in docks as an application icon

Part of the brief was also to produce a splash screen for when Ramen was booting up as well.

The new Ramen logo used in the new Splash screen

Another view of the new Ramen splash screen

We can also see how the Ramen logo fares on the website as well.

The Ramen logo on the website

Monitor image provided by Harenome Ranaivoarivony Razanajato.

Another view of the new Ramen logo on the website

The new Ramen logo on a t-shirt

ANY_CHARACTER_HERE

Feedback

Ian designed a logo and other graphic elements for an open source project I’m developing. He did an extensive research and his work was perfect. I can highly recommend him.

–Esteban Tovagliari, Visual effects artist and developer

Ian Cylkowski aka Izo

Logo & Brand Identity Design

If you liked this post, feel free to share with the buttons below!

You should follow me on Twitter.


Comments

6 Comments so far. Leave a comment below.
  1. HarnoRanaivo,

    Very instructive post ! And it’s a nice job you’ve done here.
    Also, I’m glad to see that my little icon has been useful.

  2. Amazing work!! Congratulations!! 😀

  3. siva,

    Its very nice..i get inspired by reading your post.you have done a great work !!!!!

  4. UnconT,

    Just a slight note, I noticed that Blender was the only program that didn’t have “Node Based” in it’s interface section. Just a clarification, for compositing, Blender does have a node-based interface. And it’s a capable one.

    Just saying. 😀

Trackbacks

One Trackback

Add Your Comments

Disclaimer
Your email is never published nor shared.
Tips

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <strong>

Ready?
Required
Required