How We’re Refreshing the OSTraining Brand

color wheel

For many years, OSTraining has taught people how to build websites with Joomla, WordPress and Drupal.

After hundreds of classes, thousands of videos and many thousands of users, OSTraining decided that it was time to refresh their brand. They’ve asked me to design their new logo and give them an identity that is clear, consistent and, at the same time, keeps them at the forefront of their industry.

My name is Chiara Aliotta. I’m an Italian designer with many years of experience in art direction, graphics, illustration and web design. I’ve worked with Vodafone, Nivea and many others.

With OSTraining we went through a normal rebranding process. What’s different is that the OSTraining team asked me to share that process with you. I’ll explain my thoughts on company values, colors, typography, logos and more.

I will share with you what we have achieved so far, and I’d love to hear your thoughts. So keep reading!

The First Meeting

At our first meeting, it was clear that the OSTraining team were not attached to their current logo. They wanted something new and young, but at the same time, something that would be able to communicate their extensive experience in the field.

Before the meeting, I prepared myself by reviewing their site and writing down some questions that I wanted them to answer for me during this open talk.

The team talked widely about their services, how they think people/users perceive their brand and what they would like to change about their current identity.

They promptly shared with me all the graphic materials that they use, online and offline, to communicate their products and represent the company.

It was an extremely constructive meeting and, by the end, I had already jotted down many keywords and values that would later help me build a values map and position their brand.

However, I asked the team to get together once again (without me) and collect three to five keywords that describe their brand. This is what they came up with:

  1. Trustworthy, Supportive, Helpful, Responsive
  2. Innovative, Geeky, Informative
  3. Engaging, Enthusiastic, Fun

Things they said in more detail included a couple of comments about mixing these genres:

  • “It is possible to be both trustworthy and enthusiastic, like Freshbooks”
  • “You can be both fun and geeky, like MailChimp”

The Values Map

As a designer, when I design a logo, I have the responsibility of forming the foundation of the brand. Building a brand is often erroneously seen as just a matter of bringing together colors, fonts, marks and a slogan. In reality, the process is more complicated than this.

Corporate images not only help companies communicate themselves consistently, through the use of the same colors, typefaces and marks throughout their materials, but they also reflect the values and aims towards which the company is oriented.

A brand like OSTraining, so widely known, already comes with a “suitcase” full of values and expectations that are shaped by the perceptions of their audience.

So in this case, it was really important to “extract” this vision and turn it into actionable points for my design. Along with the keywords and adjectives that I gathered during our meeting, I built this map of values and started designing inside these borders.

Values Map

As you can see, the chart shows the values divided into two groups: brand and service. In fact, some adjectives strictly refer to the product/service the company sells and others are related more to the company itself, as an institution.

The map also shows where these two groups overlap and which values they have in common.

The Color Palette

The previous step is really important and serves as the basis for the next one: defining a color scheme. I usually work with color schemes along with some logo sketches to be sure that these colors work well together and correctly convey the values I have previously listed. So usually colors are chosen based mostly on the values map and are later fine-tuned in the final logo, when the direction the company wants to take is clearer.

Color Scheme

I didn’t want to drastically change the current color scheme. I expanded the hues of blues to express values such as professionalism, clarity, and experience. I also kept blue and light blue because they are the common colors of the most important CMS’s that OSTraining is teaching: Joomla, WordPress and Drupal. So it was important to visually keep OSTraining and these 3 brands connected.

Finally, I warmed them up, adding some hues of orange and yellow, to communicate traits such as personable and enthusiastic.

In fact, I personally think that the current OSTraining image is a bit cold and impersonal, while their way of teaching is extremely supportive and helpful.

From the wheel, you can already appreciate that the scheme is sophisticated and trendy (even with limited color hues) but also friendly and intense.

The Typography

This is a really important stage of designing a logo. Choosing the right typeface is not a simple task. I personally think (and you will find that many other great graphic designers agree) that typefaces have personality and that their “character” can be perceived by everybody, even if you’re not an expert in the subject. So when you choose a typeface you should make sure it does not communicate the wrong message.

I have written different articles about how and why you should carefully choose a typeface and I do believe that this is the most delicate and demanding task a designer faces when he/she designs a logo or simply works with a font.

For OSTraining, I personally preferred to get rid of the “informal” Slab Serif font they are currently using in their logo, in favor of a cleaner, bolder, but still contemporary, Serif. My choice went to Nexa, a formal, geometric and highly legible font designed by Font Fabric.

nexa

Nexa comes in different weights and styles, making it extremely versatile and convenient for the wide variety of graphic materials that the company uses, both online and offline. I chose Nexa because, aside from its rigid and geometric construction (that reminds me of the most well-known typeface, Futura, designed by Paul Renner), it has something friendly and charming in its smooth terminals and in the “g” loop.

I have also removed the bold emphasis on the letters “OS”, preferring a more clean and balanced look of the company’s name.

The Logo

Before we start talking about how we will choose the logo, it is important to explain what a logo stands for.

A logo has the purpose of identifying the company. It is the company’s signature and, for this reason, it should be unique, authentic and remarkable. A logo should not be a “description” of the business. It does not explain what kind of business the company does (otherwise, Apple would be a grocery store rather than the most famous company in the digital market!). It is a symbol that identifies the company, communicating its values in a way that is memorable and recognizable.

The actual mark that OSTraining has been using all these years, even if it has already been well received by its audience, is far from including all these characteristics.

Analyzing what OSTraining’s main services are, we can easily sum them up with the following substantives: teaching, learning, explaining and, of course as the name says, training.

I imagine OSTraining as a valuable online, modern university where you can learn, in a professional and cost-effective way, how to build websites for yourself and your clients.

The OSTraining team has reviewed different marks and proposals in the past few days. We have now come to the final round, and this is where we need your opinion.

The two logos we are now asking you to evaluate and consider, both represent a shield.

It is common to see crests used by prestigious universities as symbols of nobility, descent, and also for their elite students and high recognition in society.

However, having a simple shield would give OSTraining’s audience a completely wrong impression of its brand; for sure trustworthy and reliable, but also negative attributes, such as cold, expensive and inaccessible.

So, I thought of building the crest out of a book and creating a friendlier and warmer shield. A book is the most traditional, common way to visualize concepts like “learning and teaching”, but turning it into a shield can properly communicate values such as professionalism and experience, the core values of the company.

logo1

Logo 01, presented here, shows the book open and the sheets (the orange part) and the cover (the blue external line) folded to form the shield. The prevalence of orange and yellow tones down the edgy lines of the book, which , in this proposal, are easy to identify and combine really well with the OSTraining slogan words: “explained” and “simple”.

logo2

Logo 02, presented here, is based on the same concept of a book that it is turned into a shield. However, the open book here is seen from a more unusual perspective (its open silhouette). In this logo, the shield shape is cut into 3 sections to represent OSTraining’s main services: online training, live training and books. In this way, the book is not immediately recognizable (innovative) but the shield shape reminds you of the company’s values: professionalism, trustworthiness and structure.

Summary and your thoughts

This was a long and challenging process and I do hope you have enjoyed reading of this journey.

Now the OSTraining team is asking you to participate in an open discussion to help them decide on the logo that will be used to communicate OSTraining’s new identity!
So please let us know your thoughts!

Author

0 0 votes
Article Rating
Subscribe
Notify of
52 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Kristoffer Sandven
Kristoffer Sandven
10 years ago

I like the first one best 🙂 The book signifies learning – and the shield shows strength, trust etc. Great work, Chiara!

steve
steve
10 years ago

Thanks indeed, Kristoffer. Yes, Chiara is an absolute pleasure to work with.

brianteeman
10 years ago

Great read – thanks for sharing the process and giving us an insight into both the process and your mind. It looks less like a shield to me and more like army sergeant stripes (they are reversed in the UK)

steve
steve
10 years ago
Reply to  Brian Teeman

Thanks Brian. Yes, the Logo 2 has been throwing out 101 different opinions from people. It’s an image people can read a lot into.

Anjan Dhar
Anjan Dhar
10 years ago

Wow, a great post. I like the Venn diagram method very much to get a crisp clear approach to the situation in hand. Thank You for sharing. 🙂
As per the logos I like the First one. As it is very easy to get the feel of gaining knowledge in it, compared to the second.
Best of Luck

steve
steve
10 years ago
Reply to  Anjan Dhar

Thanks Anjan. Those diagrams are a big help in designing a new site, based on these new colors. Some parts of the site need to be more professional and others need to be more enthusastic. Putting the mix down on paper is a big help.

Saurabh Shah
Saurabh Shah
10 years ago

Thanks for sharing the process. I like the 1st logo more which shows strong feel of learning / teaching.

steve
steve
10 years ago
Reply to  Saurabh Shah

Thanks Saurabh! #1 does seem to be the runaway favorite so far.

Dave Pantzer
Dave Pantzer
10 years ago

I like the first one best, too. It seems better visually defined and more stable than the second.

steve
steve
10 years ago
Reply to  Dave Pantzer

Thanks Dave. Yes, that’s a good point.

Dave Pantzer
Dave Pantzer
10 years ago
Reply to  steve

I’ve looked back at them again. I still think the first is much stronger and more framed/defined and less ephemeral than the second, but it’s much more book than shield to me. Just wondering if any thought had been given to a modification as simple as small 45 degree truncations of the top corners of the blue outline, suggesting the shield look familiar from US Route road signs. That idea might also entail rounding the left and right bottom corners too. Ha! Just a though! Thanks again for including us all in your discussion!

Lori Newman
Lori Newman
10 years ago

I agree, I like the first logo best. Very nice Chiara !

Buffylove
10 years ago

Once again this shows how much OSTraining is for helping their audience. Opening the window to allow their audience to see the decisions being made, why they are being made and how. Thank you for all your work and effort, Chiara, and especially for letting us inside your process.
Saying that. I truly like the first logo best. It really grabbed my attention, I completely understood the point coming across and it at once ‘felt’ right.

Uncle_Bulldog
10 years ago

As I enter graduate school for a degree in user experience design, I am extremely grateful for Chiara’s insights into the creative design process! As a library professional, I am really drawn to Logo 1. The open book largely highlights an “open source” of information available and accessible to all. Funny, but the design appears more simple yet feels complex at the same time.

patrick
patrick
10 years ago

Initially I was thinking the first one but as I look at it more I feel the second one. The second one seems cleaner. Something about the heavy stroke to represent the book cover on the first one is off-putting to my eye. When I saw the first logo I instinctively thought “book”. I never would have picked up on the shield if it weren’t mentioned in the blog post. Love the typeface choice.

David Hurley
David Hurley
10 years ago

This is a great post. Well done Chiara! You have an excellent eye for color and your detailed explanation behind your suggestions reveal a clear and planned approach where every detail is purposefully chosen. I like the first design best. I’m sure Steve and the rest of the OSTraining crew are quite pleased with these options!

patrick
patrick
10 years ago

Can I also say how glad I am that OSTraining is rebranding? Lackluster design makes me a sad panda, which I felt like OSTraining had up until now.

steve
steve
10 years ago
Reply to  patrick

Thanks Patrick. Yes, you won’t here me denying that! Time for an improvement.

Randy Carey
Randy Carey
10 years ago

In the top candidate I know it is a book, whereas for the other my mind searches for what it could be. Further, the top has a more 3D appearance, making it pop a bit more off the page. Sometimes I waffle between two options, but in this case I definitely perfer the top one.
I wish all logos came with a link to the explanation of the thought that goes behind it. Much appreciated.

chikisg84
10 years ago

Love the first one! I think it’s clearer to pick up the concept of the book turning into the shield without having to explain it whereas the second one is not. I also love the color scheme.

carson3511
10 years ago

Great work Chiara!

I like the first logo better. The book looks more like a book.

Something to think about would be to have the OS in a different color (or shade) to separate the initials from the word training.

steve
steve
10 years ago
Reply to  Mike Carson

Thanks Mike. Chiara was actually good enough to propose a few ideas with the initials. But, one of the things we threw around during the rebranding was the possibility of a name change at some point in the future, so we ended up not going down that route.

Jay Callicott
Jay Callicott
10 years ago

Very nice article! It was really informative on how graphics/fonts/colors affect perception.
I definitely like the first logo better. The second one does not look like anything. I think if most ppl cannot tell what a graphic is the ‘hidden’ meaning is going to be completely lost. I don’t think anyone would get a book/shield merging.

steve
steve
10 years ago
Reply to  Jay Callicott

Thanks Jay. Yes, logo #2 ended up being a mix of a lot of different meanings and maybe ended up with too many.

Sam My Web Coach
Sam My Web Coach
10 years ago

Steve I like the first one as well. nice work Chiara on sharing the process with us. When can we see the layouts for the website? 🙂

steve
steve
10 years ago

Hi My Web Coach. That’s coming too. There’s going to be a series of these posts as we work towards a full redesign.

vyatka
10 years ago

I like First one!

vernon
10 years ago

Logo 1 doesn’t read as a shield; it just looks like an open book. It also looks like plain old clip art, it feels unoriginal, boring. I vote for Logo 2, because it actually looks like a shield.

KarmicVisions
10 years ago

Thank you for sharing the process! I like the color choices and font. Option 1 would be my preference of the two because of the 3D effect and quick recognition of the book. Option 2 really make me think of chevrons, which brought me to the the AF and petro, so it didn’t really work for me. As far as the name discussion, I honestly never think of your full name, I always write and refer to you as OST.

steve
steve
10 years ago
Reply to  KarmicVisions

Thanks KarmicVisions. Maybe one day we’ll end up shortening our name to [url=http://OST.com]OST.com[/url] 🙂
You’re right. There are in fact similarities to the Chevron logo [urlcomment image]http://www.calwatchdog.com/…[/url]

givona1908
10 years ago

Hello. First one is THE LOGO. Nothing more to say. I like it very much. It’s clear, simple and actually beautiful.

Shahnawaz
10 years ago

The logo’s look too primitive and basic, though we might have a great logic there but the end result is what matters. I am wondering why the text color is grey and not fun,warm and optimistic ‘Yellow’ ,as it will add a very different look and feel. Blue has been done to death by many organizations.

steve
steve
10 years ago

Thanks Shahnawez. That’s a good point. It is worth putting more consideration into the color of the text.

johnjharvey
10 years ago

I enjoyed reading the process of creating a new logo for OSTraining. Another excellent learning opportunity from a pro! Thanks, Chiara! I agree with the majority of the people here – the first logo is the better one.

woodie
woodie
10 years ago

I like the first, as it has more life. The page can’t wait to turn!

dave-terry
10 years ago

Great post. Thanks for your transparency here Steve. My vote is logo 01. All the best, Dave

fuzzydingo
fuzzydingo
10 years ago

I agree with most here with version 1. To me, it conveys a learning environment but has appeal from the second because the second reminds me of a pencil logo I had seen at a big box store during a back to school push.

Webtueftler
Webtueftler
10 years ago

The second looks for me to “wavy”, first thought was a company to learn swimming. It looks more stronger (Better company?, they know more…, maybe much content – more work? o_O) than no1 (looks easy, fun, invites me more, cause of my hope to get complicated things in an easygoing way learned).
So, first look goes to the stronger, more “professional” look of no2, then irritated about the “Wavetheme” ;-), my hope went to no1 to get the things done easy …..
no1 looks more cheaper then no2. are they not so professional as no2 or is it easy to work with them? no1 has more white space in in his picture mark and looks lighter than no2 which is very “compact”.
In which company would i subcribe? I dont know, maybe if i think twice no2. Maybe they are more comprehensive and i will learn more or enough to do my work. maybe i will give no1 a shot in the hope i will learn there the really important things in a faster manner….(is this shield from no2 a pencil or a syringe? 🙂 ) maybe you are using a brand new supermethod of knowledge transfer? 😉

steve
steve
10 years ago
Reply to  Webtueftler

What great feedback, thanks Webtueftler
One of the things we’ve learned from this feedback is the people read a LOT of things into the second logo. You’ve added two more with a syringe and pencil 🙂

JoeJoomla
10 years ago

This is a great post! Lots of terrific comments too. I love the first logo. The second one made me think of a heart.

steve
steve
10 years ago
Reply to  JoeJoomla

Thanks Joe. That was actually one of the things we liked about it. We try do things with heart 🙂

qbparis
qbparis
10 years ago

Great article! Thank you Steve and Chiara for sharing both the design process and thought behind it! I like logo 1 for its simplicity and openness. Love the font! Congrats to all!

Charles Gaba
Charles Gaba
10 years ago

I definitely prefer the first logo. The second one could be for just about anything…it looks like a pencil, or a rainbow flock of seagulls or something. Doesn’t suggest “a book” or “training” in any way to me.
Go with the first one.

BillBentley
10 years ago

I like the first one for many of the reasons stated below but also because the 2nd one is very similar to an oil company logo (Chevron I think) and I don’t think you want to be unconsciously associated with a polluting oil company.

BillBentley
10 years ago

you need a special logo for people like me who buy the program then are too busy to use it. 🙁

steve
steve
10 years ago
Reply to  Bill

Hey Bill. Send us an email and we’ll see how we can help there 😉

David
David
10 years ago

Hey Steve: the first one, has sophistication and pops out to grab you.

Audun
Audun
10 years ago

Thanks for sharing the process! It’s very useful to know how a Professional work! I’ve been following Your email letters frequently, and find many of them interesting.

I actually like both the logos, the second one contains more “heart” I think, as the bottom yellow figure actually (to my mind) resembles a heart shape. The above stripes contrary to other’s interpretation as military seargent’s stripes, actually to me looks more like flying seagulls, which also gave me positive and high-flying Associations. However, that may not be what you want, and the first logo certainly gives a very serious and “School-like”/Academic impression. Though maybe even a bit too serious for me 🙂

steve
steve
10 years ago
Reply to  Audun

Thanks for the kinds words, Audun.
Yes, School/Academic was the impresssion we were going for there.
For the second one, you’ve come up with even more new meanings with seagulls and seargent stripes 🙂

Donald Moore
Donald Moore
10 years ago

I like the first logo best – looks like a book that is open.The second one to me reminds me somewhat of the Chevron logo….

Scott Greenwald
Scott Greenwald
10 years ago

Thanks for sharing your process Chiara. As fellow designer, it’s always nice to see how others approach their projects.
The shape, font and color scheme of the first logo compliment each other nicely. Looking forward to seeing the final version!

Iqbal Kharal
Iqbal Kharal
10 years ago

Thankyou regarding giving this drastically superior simple fact. All of us would like to point out the product or service besides some of our friends employing social websites. Be sure to turn out to be up-date along with your web site, now i am day-to-day purchaser associated with online web site. supply thank you again. [url=http://www.ratcode.com]http://www.ratcode.com[/url]

52
0
Would love your thoughts, please comment.x
()
x