First off, I'm not a graphic designer by profession and haven't received any kind of training in the field - so don't take this as a tutorial on how to create your company's logo because in all likelihood I haven't got the faintest clue what I'm talking about. I am, however, a huge fan of learning to do new things; and in my case that generally involves mashing together a bunch of Google searches until I find some information that gets me on the way.

I guess before I get started on the design of our new logo, I should probably look at some of our previous logos and how they were designed. It should probably be noted that I am a huge fan of typographic logos, to me they look far more professional than your average "logo" and tend to draw focus to the content of a page rather than the shiny logo at the top. That being said however, logos play a large role in brand recognition and it is often important to have a logo which is easily recognisable by your user base.

Our first actual logo was very type centric, settling for a simple gradiented monochromatic logo. We decided on the black and white look because it integrated well with our designs at the time, which also focused on a simple - gradient centric design paradigm.

First Logo

To be honest, when I designed this logo I had very little experience with any kind of design software and most of my experience with programs like Paint.NET was doing the odd funny picture at school; rather scary to see how far I've come in the 3 years since. I remember having read an article somewhere which mentioned that subtle gradients can be used to add a professional feel to otherwise simple designs, and I was intrigued enough by the idea to try it out. I was also busy writing code to generate rounded corners for a C# control library I was working on at the time, and with the built in Rounded Rectangle tool in Paint.NET it was spectacularly easy for me to do so. Also, while I was trying to go for a very text centric logo, it is a lot harder than you would imagine to get the kind of impact that a logo requires using only text, hence the use of the background on the word Sierra.

Another aspect of the design which is surprisingly difficult to get right is font selection. It is one of those things which if done right can really make a logo pop, but if done even slightly wrong can result in disastrous results. You will often see companies which specialise in design opting for fonts which fall into the Script category (similar to handwriting) as it tends to give the sense of a "free flowing" design. On the other hand, you will see companies who's areas of expertise are more structured rather settling for Sans Serif fonts, while print companies will often settle for Serif fonts (think New York Times). Obviously, there is far more to fonts than I am letting on here, and it is definitely worth a read if you are interested in the psychology behind all of that stuff but unfortunately far out of the scope of this blog post.

In the case of our logo, I decided to make use of a very simple, easy to read and professional font called Lao UI, which is based on the Segoe family of fonts. This font has become our primary font face for logos and other corporate titles due mainly to its clean lines and a weight which allows gradients to be applied to it without causing it to look forced.

One of the things that you might not realise when you first design a logo for your company is just how much of an effect it will have on your designs going forward, many logo designers are aware that a logo should reflect how a company designs their products but I don't think they realise that the converse is also true. As such, for the next 3 years after designing that logo most of the applications I wrote tended to make use of user interfaces which matched the logo's design, rounded corners, smooth dark and white gradients, drop shadows and easily legible fonts.

This of course brings us to our new logo, something which I must admit I am quite proud of. With the release of our new website I have been moving away from our previous highlight colour, #EE0000, towards using a blue highlight instead, #1FB3FF. We will still be using our original red highlights in our applications for logos and other such things, but we feel that the blue conveys a more professional image on our website and have decided to make use of it instead. In doing this transition, I have been looking at designing an actual logo for our company, to replace the HAL-esque ball which we were using previously. One of the main issues I had with our previous logo was simply the difficulty of reproducing it, especially in code; another was simply that we hadn't used it enough to actually create any kind of brand recognition with the logo, using it mostly as a Favicon on our website. The new logo aims to address both of these issues while also adding some extra depth to the logo (and maybe a bit of geeky humour as well, in the form of an easter egg, for anyone who wishes to search for it).

I guess, before I start discussing the design of the logo, I should probably give you a look at it (you can click on the image to get access to an SVG version of it).

Click for an SVG version, which you can zoom in on

The first thing you're likely to notice is the vast size of the logo - seriously, it is massive. Despite this though, it actually weighs in smaller than the original logo which is less than half the physical size. The logo itself is also stored in SVG form, which allows us to easily generate variants for whatever size we need without experiencing any loss in quality. We have two variants of the logo as well, the first is simply the logo without our company's name, and the second contains our name as well. We use the second to ensure that the two are always aligned correctly, regardless of where we use them, and it also allows us to use Lao UI legally on platforms which don't support it natively.

Onto the topic of designing our new logo; one of the big things that I kept reading when looking for advice on logo design was "Stay away from clichés" as they tend to make a logo look cheap, unprofessional, or just require replacement as soon as the trend dies out. It is an interesting concept, especially when you look at the trends that have passed over the previous few years and how many big name brands tend to steer them. So, first step was to try and come up with something which didn't look like your average logo from the past few years, something which is a lot harder to do given how humans think. Take the example of me asking you to design an elephant unlike any you'd ever seen before, and I can almost guarantee you won't draw something other than an elephant - for the simple reason that in trying to design something new, you get so caught up on what you're trying not to do that you end up with exactly that. Anyway, after realising that attempting to design a completely new logo unlike any I'd seen before was not really going to help me, I decided to take another approach. Most logos try to do one of two things, either they attempt to convey what a company does at a glance, or they rely on being so unique that any advertising you do for that logo won't be wasted on someone else's company image. Since I am not in the position to worry about the later, any logo I would design would probably need to convey what Sierra Softworks does, or at least give someone a decent idea of the company, without them having ever read about us or seen the name. So, how does one go about doing something like that?

My first step was to decide on a basic design, I have always been a fan of squares, they seem more perfect than other shapes in the digital realm and tend to mesh better with most websites designs (which will inherently make use of squares, rectangles and straight lines due to the difficulty of doing anything different). Great, so now I've decided to use a square, that doesn't exactly help much, but it is somewhere to start - so I started messing about in InkScape trying to figure out something which worked nicely. I fiddled around with trying to get a nice disintegrating block effect going, but it turned out to be very difficult to get right and too complex to fulfil my requirements. The problem is that if you make a logo too complex it actually makes it harder for your users to recognise it, or to link it with your company, not to mention the inherent problems with reproducing the image or scaling it to smaller sizes. One of the things that messing about with this effect did do was cause me to think about having a highlight region behind the shifted blocks, which in turn led me to just shifting a quarter of the full square slightly off (as though it were being revealed) to show the highlight underneath. This created a very nice effect, especially when combined with gradients - which helped add some additional depth to the image. At this point, I was quite happy with how the logo was turning out, but felt that I needed to add a little something to the logo to help make it special, hence the easter egg. Let me know in the comments if you find it, and if you like it.

Tools Used

  • Paint.NET was used to work with raster images (PNGs and JPGs)
  • InkScape was used to create the new logo in vector form (SVG)\