Cranium Web is a work in progress. You might say its very nature is a celebration of progress, or process. If you see this page and something looks terribly out of place, don't worry! You've just born witness to the beauty of process.

About the process

Posted: March 28th, 2011 | Author: Payton | Filed under: Site Design | No Comments »

Before I move any further into the design of this site, I thought it would be helpful to sit down and tell a little of what this site is all about. This is a study and celebration of the process of design. Well, that and to showcase my work to a wide audience.

When I say process, what I mean is the natural progression that I as a designer take when developing a solution for a client. Whether that client is a Fortune 500 company, or a small business comprised of five hard working individuals. Or even just myself.

To demonstrate this idea I would like to walk you through the process that I went through to design my personal brand, Cranium Web.

The Evolution of Cranium Web

The first step was to create a name. I won’t bore you with all of the details of that process, rather, I want to focus on the development of the design. Suffice to say, Cranium Web came into being.

Once the name had been determined and the web address registered it was time to begin creating the brand identity. A visual representation that is unique, recognizable and tells a story about who I am.

Normally I would put pen to paper and make several lists of what I know about a company, and begin to sketch ideas about how to best represent them. This would include things like word associations, pencil sketches, market research etc. Anything to get a more intimate awareness of what the brand is. But, I’m designing for myself, I should already know these things, right? I’ll just skip all of that and get to work.

Time to begin the design! This will be fun!

Ok, I’m not going to lie to you here. The first week of this process was excruciating. Armed with my intimate knowledge of self, I dove right into creating the perfect logo. The first thing that I did was stare at my monitor for a long, long time. I honestly had no idea where to start. Ultimately, I decided that the best way to get something done would be to just jump in and see where things went.

Attempt #1 – EGAD!

Option 1As you can see by the image, I decided to play around with the first two letters of each word of Cranium Web. C and W. Those are two pretty interesting looking letters. There’s a nice, open curve on the C, and distinctive angles on the W. Something good will definitely come of this. Well, maybe not…

Not to say that this is the worst thing I’ve ever seen, but it is close. The best thing about this design is that it tells me a lot about what I don’t want my logo to look like.

My next attempt will be much better! Let’s see here…

Attempt #2 – Meh…

option 2Yes, this looks better! I like the use of negative space to create the CW as opposed to the black and blue text.

The red, white and black circles or more dynamic in feel than the simple black and blue circle within a circle look. But this design is still missing something. Well, it’s missing a lot!

While the CW is more dynamic and pleasing to look at, its missing the rest of the site name. The name is not CW, the name is Cranium Web.

How do I incorporate that into this design? After toying around with typography for the next hour, I realized that I don’t. The round format leaves no natural area to place the Cranium Web copy. That copy is important to me, I don’t feel that just using CW says enough.

Attempt #3 – Begin regurgitation of previous meal

option 3Ok, the round logo didn’t work so well and this rectangular one obviously is no better.

The good thing about this design is that the copy fits. Other than that, I don’t find too much else redeeming about it.

In this design, the rectangle ultimately serves no beneficial purpose. The logo feels crowded and the C is given too much priority over the W. In fact, due to the prominence of the C in the design, my eye has a hard time even seeing the poor W stuffed way back there in the background.

So something without the rectangle that includes the CW and the Cranium Web copy. I think I’ve got it!

Attempt #4 – DUI (Designing under the influence)

option 4Ok, this is where I need to take a step back and re-evaluate what it is I’m trying to accomplish. None of the last three attempts have been successful, and this attempt is no better.

It has all of the original criteria, the CW is proudly on display and the Cranium Web copy is sitting noticeably underneath it. Even so, I. Do. Not. Like. Why is this?

Well, the real problem is that I am designing for the wrong brand. The brand is Cranium Web, not CW. I mentioned that above. The CW is a television station. So why do insist on using CW as if it were relevant?

Also, my identity is that of a web designer. Two criteria for web design are creativity and technical thinking. The last four failed logos do not speak to either of these ideas. Time to sleep on it and come back later.

Attempt #5 – At least its not The CW

option 5Now its time to come up with something that has a more technical feel. Maybe something a little more “web 2.0″.

This design would make a good button, perhaps but it fails as a logo. While it may be better than the previous attempts, I still don’t feel that it is successful in representing my brand.

Other than the word “web” in the copy, there is nothing that speaks to the essence of web. It may as well be any combination of two words smashed together. What would make this stand out?

Attempt #6 – The Atom Smasher

option 6 I’m finally beginning to feel like this design means something. I’ve put these four logos together, as they’re just variations on the same theme.

I like the little circle icon. It makes me think of information traveling around our world. Or electrons orbiting a proton. It feels like science. Technology. Its a good step in the right direction.

We’re not finished yet.

This whole time I’ve completely ignored poor Cranium. Cranium is the most interesting part of the brand name and it has no real identity in this design. Here, it is just a word, mashed up against another word.

In my opinion, the creation of a logo by mashing two different colored words together has been done to death. If you have a logo built using this method, more power to you. It’s not a terrible look. It can be elegant and simplistic if used correctly. But its time is over. Especially if you’re a practicing designer looking to be new and innovative.

Now would be a good time to do something that I should have done from the beginning. Research. Just because I know who I am doesn’t mean that I know how to best represent myself visually. At least not without putting some real thought behind it. I’ve always been a firm believer that everything in a design should have meaning. If it doesn’t, then your doing it wrong. None of my prior attempts in this process have really meant anything.

So what would best represent me? Well, what am I? I’m a designer, that much is obvious. I’m a guy, that may be important – I don’t want something that is too feminine. I have a fairly sarcastic personality, but all in good fun. I like things that are witty and playful.

I skipped over the creation of the brand name earlier, but now may be a good time to briefly revisit that process. The word “cranium” holds a lot of meaning to me. For one, my head is important. Several years ago I underwent brain surgery to have a tumor removed. Full recovery, but still an event that has shaped me.

The skull, or “cranium” is the home of the brain. The brain, or the mind, is the center of all human thought. All ideas, the creative process, stem from the mind.

Now how do I takes these concepts – designer, mind, guy, sarcasm, wit, creativity – and combine them into a representational image? This is the hardest part of being a designer and is what separates the good from the great. I’m not saying I’m the best, but I know in my mind that I’m far from the worst! I can do this.

Attempt #7 – Success!

option 7Finally, by stepping back and letting the process take over I was able to produce a design that encapsulated everything that I wanted. It speaks to who I am and it speaks to what I do.

Trust the process.


Cranium Web v.2.0 – The Process Continued

Posted: March 27th, 2011 | Author: Payton | Filed under: Site Design | No Comments »

Now that my brand identity has been established and the initial site has been launched, its time to get down to work on the actual site design. What you currently see on this site is just a quick and dirty placeholder. Something to get me started so that I can get up and running.

As I mentioned in my last post, it was important that the brand identity be true to who I am and what I do. I feel that I was successful in that endeavor, and had a lot of fun building the final logo. The process is nowhere near completed, however. Building a logo was just the beginning.

The next step in the process is to build the actual website. As you can see, I already have much of the framework in place. Fortunately, WordPress provides developers with a free, easy-to-use yet powerful web publishing system. This allows front-end developers like myself to save countless hours of time, as much of the back end system is already in place. The only thing needed is to customize a few options to suit my, or a clients, needs.

Cranium Web v.2.0

As with the logo, it is important for the design of the website to match the essence of what a company is about. Luckily, the canvas is much larger which allows you to take more liberties in the design than you can with the logo. Elements don’t necessarily have to be as precise, it all depends on the look you are trying to achieve.

Cranium Web v.2.0 Design CompFor Cranium Web I want the design to match the antique look of the logo. To make this work the colors, typography and image elements all need to be working together to form a common and cohesive theme.

Using a old paper texture found online (with a free use license) I first crafted a background that was suitable to the theme that I wanted. Next, I added the header elements to the page. The logo is added, with the addition of a new tag line that briefly describes the sites purpose. Graphical elements to serve as boundaries for the main two content areas were then created. The finished product is what you see before you. Click on the image to see a quick view or you can see the full size image here.

The design is by no means completed. There are still several aspects to work out, such as how will images be formatted that are placed into articles. How will examples of my work be displayed, and a hundred other little questions. At least I have a direction to move into, though!

As always, please feel free to comment or critique on anything found within these pages. I look forward to sensible feedback as it can be hard for me to be objective while designing for myself.


© Copyright 2012 Cranium Web All Rights Reserved