May 04
NetSquared project part 1
2006 at 06.01 am posted by Veerle
Regular visitors will know that from time to time I write about some projects that we worked on. So today I like to introduce NetSquared. I was very excited to jump into this project because it was one those occasions that I had the opportunity to create a brand/identity from scratch. This involved creating a logo, stationary, style-guide, brochure and a of course a website. To me personally a first impression in what kind of company you’re dealing with starts by looking at the logo. Maybe that’s because of my job, I don’t know, but that’s where my thinking pattern always starts.
A logo is also the centerpiece in what will become the style direction for the rest of the brand identity. From the start of this project it was very clear to me that sharing was the most important aspect. But before I start to talk about that, maybe a little introduction to NetSquared would be in order.
What is NetSquared?
Net2 is an online and offline community created by TechSoup, a project of CompuMentor. The goals are to help hundreds of thousands of non-profit organizations (NPOs) and non-governmental organizations (NGOs) successfully utilize the community empowering capabilities of the Internet to increase their impact and achieve social change. It was our task to make the website the focal point for the Net2 community's activities. But that's running ahead of ourselves here :)
The logo development.
If you have been following closely you'll remember that sharing and a community feeling was the starting point. At first you would think that such a topic is rather easy, but I can assure you it's not if you want to try to stay as original as possible. When creating a logo I not always start by creating a shape but with finding the right typeface. It was going to be a modern contemporary look so after a lengthy search, I settled for Chalet. This was back in November 2005 and marked the first time that I used Chalet. That's when I also got the idea to use one of the fonts for this blog too.
The next step was trying to incorporate a shape that is as original as possible, not easy especially with such a common theme like networking/sharing. You always have to wary that it hasn't been done before. If I think about networking and remixing the web for social change, first thing that comes to mind is people. So I tried exploring various ideas that contained the thought of sharing and human/social factor. In that process there are always candidates that didn't make it.
Non aproved logos
Once you have the final shape that you want to use many, permutations follow until you finally get it right. I also like to add that I always start with black and white to get a better idea on how things will look like on a fax for example. But I have to confess that color is always on my mind and that I have a hard time in not thinking about it :) Later in the process NetSquared requested that I worked with bright colors, preferable colors that also appear in the TechSoup logo. My only options in colors where: black, purple, green and orange. So here is the final logo and icon.
Final logo and icon
Styleguide
When many people are working together on a project it's necessary to introduce a styleguide. We all know that people have a different taste and perception. If there isn't a guide that they can turn to you'll end up with a war zone of typefaces and colors that will make the brand less professional. Below are a few pages from the styleguide we created for NetSquared.
In the next part I will talk about the challenges that we faced in creating the website, like when the marketing people come in and wants everything on the homepage ;)
36served
1
Veerle,
This is really awesome. I love some of your logo concepts. You are really so creative. I was wondering if you couldn’t show the style guide in a little bit more detail. I am about to develop my first style guide for a company and I would love to see more clearly how other professionals (especially ones i look up to, like you) go about it. Anyways, this is really awesome. Keep up the great work!
William Doyle
2
Perfect! As usual.
I noticed a little Ubuntu influence there if I am not mistaken. I also would love to see this in more detail as I have taken on a lot of branding jobs at my company and would love to get more influence.
3
Great job !
I like the colors and the organic aspect.
I prefer the logo without the shadow, like in the orange area in top-left corner of the guidelines.
4
Time to de-lurk! Your work is simply amazing. As one who aspires to move into this field, your page stands at the top of my inspirational hot-spots.
5
Thanks for sharing Veerle, I cant wait for the second part.
Too bad not everybody uses the styleguide (see netsquared logo):
http://www.compumentor.org/
6
william doyle said:
I’m sorry but I’m afraid that is as far as it goes. I think I show you enough to get some idea ;)
Blair Christopher said:
Well I didn’t know Ubuntu back then, so believe it or not I wasn’t influenced by it. So that is EXACTLY what I was trying to explain how difficult it is to stay as original as possible. Chances are it’s done before, certainly with a subject of ‘people’, ‘sharing’ etc.
@Mark Marc Köhlbrugge, I know, I just saw that one too, ggrrr… Oh well I’ll notify them ;)
7
Interesting insight and brilliant work.
8
Ah, now we know where the just recently redesigned Quark Logo disappeared to. Here it is, sitting right on top of “net” ;-) Just kidding Verle!
In case you didn’t follow the Quark redesign nightmare.
Honestly, i am just kidding, the world doesn’t offer enough different shapes so that one will never look somehow similar than another eventualy…
9
Hi Veerle,
Really interesting article, thanks for sharing your experiences.
As a web developer I’ve been told I have the creativity of a brick, but I’m REALLY good at observation :p I’m not too good at coming up with concepts and symbolic logos and such but I am often tasked with putting bits together in a manner that doesn’t look like it was done by a programmer :) I guess you have the rare balance of logic AND creativity.
I have to say, on the non-approved logos, I particularly like the second down on the left.
Thanks again;
Poncho
10
Hi Veerle,
Thanks for your reply… Maybe if you can’t show me a closer look at the style guide (which I totally understand), you could give me some insight into what I really wanted to know. Beyond, logotype (and usage), colors and typography, what do you include in a style guide? I haven’t put one together before and since my clients have entrusted the project to me, I would really like to deliver, at least, the industry standard, but hopefully something greater.
Thanks
William
11
Love everything. Originality is easy. Being unique isn’t. Two days ago, I was working on a site template and came up with an idea for the navigation. Once I got a working version, I loved it.
Then yesterday I start looking at djangoproject.com, and voila! they have the exact same main navigation style, just with different colors.
12
I think it’s great that your giving everyone a glimpse into your process for branding and the initial design process. And, yes, it is hard not to “step on others’ toes”.
13
Hi Veerle
This subject sounds awesome. I had been thinking of doing something similar but on a much smaller scale. I will definately be keeping tabs on your project. Good Luck
Rob
14
From personal experience, I know how hard it is to design something original and fitting for things as broad as ‘community’ or ‘communication’
I especially like the combination with pattern-backgrounds I see in the styleguide. Do the patterns signify different parts of net squared?
15
william doyle said:
Nothing much actually. You’ve almost summed it all up ;) For Net2 I delivered the styleguide in 2 phases. The last phase included some examples of ads and examples of just text, with a title and subtitle. I also describe and explain what is shown on each page. For the colors I show the proportion between the usage of green and orange and black & white.
Stijn De Lathouwer said:
No not really, it’s just to represent the usage on different types of backgrounds.
16
this is fantastic, veerle. from netsquared, i just want to say thanks for creating such an attractive site and now letting everyone into the process. and thanks for not mentioning the fact that we gave you ridiculous requests, like “can you make it warmer—and more cutting edge”. which i still can’t believe you actually fulfilled perfectly.
17
Hello Veerle,
It’s really nice that you’re sharing so much information about what web-designing and making a corporate identity is all about.
I’m a student Multimedia and Communication Technology. Some lessons covered this matter too, but a real life example like this is much more valuable than theory.
So thanks very much :)
18
Great description of your process. Very helpful!
I can’t wait for the next post about “home page content creep”.
How come everyone likes a slick design and then they want to dump content to muck it up?
19
Excellent article. Very nice concept design and logo. As always, I appreciate the insight - keep them coming!
20
Veerle, did you use the same matrix method to create the top navigation on the netsquared website as you did on your own site?
21
Great stuff, looking forward to your next entry on the subject. :)
22
Very interesting and inspiring, as everything else on your website. Thanks for sharing all of this!
Absolutely agree with that last sentence:
“...when the marketing people come in and wants everything on the homepage.”
Can’t wait for Part II.
23
Your blog is fantastic - really keep up the good work
24
Hi, Veerle,
Thanks for sharing your thoughts on your projects.
Very silly question, but in what format do you present the Styleguide to your team? I guess the obvious answer would be HTML, etc. But then I thought, perhaps printed? Or PowerPoint?
25
A.J. Liptak said
I always use PDF for that because it most likely that everybody will have the free reader on their PC or Mac and it’s better for printing.
26
Love the idea of the styleguide. Never thought about adding that with the finalised logo design for a client. Makes perfect sense. Too many times the client changes the colour of the logo, or adds some terrible drop shadow to it. It gives off a false reflection of your work.
Defintely a lesson to be learnt here.
27
I’m curious about the concept behind the logo. How did you come to this form and what does it represent?
I really enjoy hearing about the process people go through to get from concept to product.
28
Hello Veerle,
Thanks for sharing your thoughts and experiences on the redesign and the use of Expression Engine. I look forward to reviewing “part 3”.
I thought I would mention that there is a style guide example in the book CSS Mastery.
29
Very nice article veerle. It is nice to read things about other peoples work.
I like the logo and icon, etc, by the way.
30
delurk time for me too… this and other articles are so inspiring, thanks for taking time out to help others!
:K
31
Always nice to receive public kudos.
Great job, Veerle!
32
thanks for the head’s up about proper use of logo on http://www.compumentor.org, Marc.
Veerle,
Please don’t be shy about letting us know when we’re butchering your wonderful work-- I can promise that misuse of your work is never a case of disrespect, but a sad case of design-ignorance on our part.
Thanks for understanding,
-bb
33
@billy, hehe ‘butchering’? Now that sounds a bit drastic ;) I know it’s just a matter of ignorance and I understand. I promise I’ll send you an e-mail in the future to let you know when I see something not OK. Thanks caring about this and keeping an eye on it for me. That’s much appreciated ;)
34
Thanks for sharing your experiences… Can you give me the name of the font in the non aproved logos, first row 2. typo?
Best regards
Peter
35
Waow, great stuff - it’s interesting to see how to lay out the final piece, of course everyone has a different style. May I ask, was that font from the “House Industries” collection of fonts? I think i remember seeing it there.
36
Peter said:
It’s a font from Veer. At that time I only experimented with this font and draw this by hand with the pen tool in Illustrator (since the name is pretty short). In case the client would choose the logo I would have bought the font. It was Karl Wide if I’m not mistaken.
Aaron said:
Yes that’s correct. I’ve actually written an article about this font family. It’s Chalet London 1970.