Posted: January 27th, 2010 | 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 individual 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 a precise, it all depends on the look you are trying to achieve.
For Cranium Web I want a 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.
Posted: January 26th, 2010 | 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 is all about. What this is a study and celebration of the process of design. Well, that and to showcase my work to a wide audience.
Now 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 myself.
To demonstrate this idea I am going to walk you through the process that I went through to design my new personal brand, Cranium Web.
The Evolution of Cranium Web
The first step in the process was to create a name. I won’t bore you with all of the details of that process, I want to focus on 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 ideas about how to best represent them. This would include things like word associations, a word matrix, pencil sketches, market research etc. Anything to get a more intimate awareness of what the brand. But I’m designing for myself, I should already know these things, right? Skip all of that and let’s 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 loooong time. I honestly had no idea where to start. Finally I decided to just jump in and see where things went.
Attempt #1 – EGAD!
As 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. Nice open curve on the C, distinctive angles on the W. Something good will come of this. Well, not yet!
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.
The next attempt will be much better! Let’s see here…
Attempt #2 – Meh…
Yes, 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
Ok, round doesn’t work and rectangle obviously is not good.
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 gains too much of a role in the design hierarchy. My eye is constantly drawn to the right edge of the rectangle. And its ugly. So that’s bad, too…
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)
Ok, here’s where I need to step back for a while. 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. I. Do. Not. Like. Why is this?
Well, my real problem is that I am designing for the wrong brand. The brand is Cranium Web, the brand is 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
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. While it is 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
Ok, now I’m beginning to feel like this is about something. I’ve put these four together, because their just variations on the same theme.
I like this little icon. It makes me think of information traveling around our world. Or of electrons orbiting a proton. It feels like science. Good step in the right direction.
Of course, this whole time I’ve completely ignored poor Cranium. Cranium is the most interesting part of the brand name and it has no real part of this design.
Also, the creation of a logo by mashing two different colored words together is pretty played out. 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 it’s time to do something 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. I’m also a firm believer that everything in a design should have meaning. If it doesn’t then your just doing it wrong. Up until now, nothing I’ve built has 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 is a good time to revisit that idea. 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 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!
Finally, 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.
For Cranium Web I want a 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. 
