design
I was going to write a really in depth post about why I'm unhappy with the way my blog is laid out. But then I thought, who cares? I don't need to talk about it, I just need to do it. It's the same with a lot of other areas in my life. If I could just shut up and put pen to paper (so to speak) I could be more productive.
I'm sure you've heard of Mike Rohde, and if not by name then more than likely by his SXSW Interactive 2009 Sketchnotes. They are truly beautiful and really freaking cool if you have an iPhone. I first found them a few months ago and was instantly inspired to do something similar.
Since my wife and I have been making an effort to go and fellowship on Sunday mornings at The Village I have been taking notes. But unlike Mike, who uses his moleskin, I enjoy my Field Notes as they are more compact and feel less intimidating. Also, I am the type of person who pays more attention when I'm drawing/doodling when someone else is talking. So while those next to me might be thinking I'm off in some la-la land, I'm actually in tune with the message. It's just my pen that's doing most of the looking, instead of my eyes.
You can view the growing set of my collection of Church Notes on Flickr.
The site was started by none other than Mike Rohde. After a few brief direct messages with him on twitter he said his initial idea was to have a place to organize sketchnotes for SXSW. But looks to me like this site is becoming a much bigger community than that. And I'm excited to see it grow and get new ideas from others out there sketching their notes. Check them out at SketchnoteArmy.com.
Thank you Mike for your inspiration and adding my sketchnotes to the site.
Where did the greats like Michelangelo, Da Vinci and Rembrandt draw their inspiration from? It's hard for me to imagine being that we live in the age of computers, where there are no limits to what we can find. Especially inside the design community where there is a huge playing field of resources available for all our inspirational needs.
But how much is too much?
Personally, I think we've already crossed that line and are now left to wade through all the muck. All of these inspirational blogs are only hindering us from creating something truly original.
Take a look at Shephard Fairey for example. He started out making "Andre the Giant Has A Posse" flyers and stickers. From there he took the stencil art world by storm. And we all remember his Obama campaign poster that gained him national (even global) attention. But how many rip-offs have we seen of his Obama poster? I'm not saying that it is wrong to be inspired by another artist. But I am saying that we shouldn't set the bar so low as to copy someone else's work and be proud of it.
So is it so hard to imagine that maybe the classic artists, the greats, were able to paint, design and craft magnificent pieces of artwork without having to look at hundreds of others work? Maybe there's something to be learned from a life without computers. Where people actually interacted with one another and had discussions face-to-face instead of on facebook. That's why I love meeting up for a drink with friends to talk shop or finding local meetup groups that share my interest. Or even taking my dogs to the park for that matter. Just getting outside and communicating with other people is so refreshing.
We need to be more creative in the ways we get inspired. I don't want to compare myself to others whose work is amazing and feel like giving up. I'm sure the people behind those great pieces of art/design didn't make it just to make the rest of us jealous. But instead did it from a place of passion and wanting to push the envelope. And I bet if you talked with any of those designers that inspire you they would tell you to do work that is original and that you can be proud of.
I think true inspiration is a gift that's given to us. Some have called it a Muse, others have called it drugs, but I think it's the One who created us that imparts it to us.
Originally posted on WeAreJustCreative.com on February, 05 2009
In this design-off, we will select a verse from the Bible from the book of Romans. Then based off each verse, we will each design a t-shirt concept for RedIsWhite.com. We will have one week to design our shirts and one week of voting to determine (me) the winner.
Chris, we all know you're a great guy with a good heart, but let's face it, you still use a pc. Don't go thinking just cause you got yourself a fancy new iMac that changes anything, I know you're still running Windows 7 on it. Plus, I'm not so sure about that whole shower thing, when I came and visited you I only remember you taking a shower once, and I saw no evidence of deodorant.
In the immortal words of The Doors: "The Time To Hesitate is Through".
Formerly known as Nectar, the guys behind Magnt are an incredible crew of web sophisticates (is that even a real word?). Apart from knowing them personally, just seeing the work that they produce is enough to make me admire them. If you're interested in learning more about the team behind Magnt you can read an old interview I did with them.
Pretty much their slogan says it all, "Beautiful websites that introduce you to the world". But if you don't believe me, then let me show you how easy it is to get yourself set up online with Magnt.
Seriously it takes no more than entering in your email address and a password to get set up with your free account. Magnt has really stripped the sign up process down to the bare essentials, all the while keeping is super sexy and intelligent (it will tell you if you enter in an invalid email address).
This next six steps are all available to you at your leisure. If you want to skip all six, go ahead, nobody is forcing you to fill out anything in order to get to your site. But I think you might want some content so when people see the hot new magntized version of yourself, they can recognize you.
Also, I suggest you utilize the "Keywords" on the site. They are there to help you describe yourself in brief snippets. Save the more lengthy description for the "About Me" section. Have fun with them. Don't take yourself too seriously, unless you're a serious person then by all means go for it. And if you're not good with words, don't worry, they're one step ahead of you. Type in any word in the "Need a better word?" field and watch the magic happen.
And if none of that still doesn't impress you, then maybe the way they've built the admin interface to sit on top of your site so there is no load time between editing your site and viewing your site should. I don't think I can describe all the programming that went on to make this happen, but I'm in awe with how simple and beautiful they made the whole thing work.
With a Pro account for just $9/month whereby you get your own custom domain, email forwarding, RSS feed, premium themes, mobile version of your site and have a downloadable resume, this is the perfect solution for anyone in need of a central hub on the web.
To sum it up, I'd definitely have to put the release of Magntize in my top three list for awesome new web apps in 2009. From engaging users on a simple level and allowing them to edit content on the fly, to beautifully designed themes and how seamless everything works. Magnt has really stepped up their game. So go sign up now and introduce yourself to the world.
As I mentioned in my last post, I wanted to save all the mushy design details for this post. I wish to spread the details out over three parts instead of trying to fit everything in to one gigantic post. So let's re-focus our attention on the choices I made that lead to my redesign. Some ideas were better than others, and some were just down right ugly. But nonetheless, I am here to share my experiences with you and hopefully we can learn something together. Let's get started.
You can't eat cereal without milk, you can't fly a kite without string and you sure as hell can't create a website without wireframes. Now of course you could eat cereal with water (I've done it before) or fly a kite with some dental floss, but the taste wouldn't be as good and the resistance to the wind wouldn't be as strong. In the same way, making a website without a wireframe is just asking for trouble. Basically what I'm saying is you can't have one without the other. Where will you turn when you run in to a problem with your design? If you don't have any initial plans laid out ahead of time it will be more difficult to work through those issues when they come up. And believe me, problems will arise.
Here are some of my initial wireframes:
Once I had a good idea of what the basic structure was going to look like I fired up photoshop. And when I start working in photoshop I always like to use the 12-grid template provided by 960 grid system. (If photoshop isn't your preferred method, they also have templates for Fireworks, InDesign, Inkscape, Illustrator, OmniGraffle, Visio and Expression Design.) The template is a good base to start with and helps me align my elements the way I like. Plus since I've been using it for a while now I find it much easier to convert my mockups in to HTML and CSS.
Here are a couple of my initial mockups:
As you can see I was having a major identity crises. My first attempt was safe and predictable. I was trying too hard to appeal to all the inspirations in my head. Either that or I was craving some Andes chocolate mints. The second approach held a little more weight in the personality department, but I still wasn't happy with the layout. However, I like the oversized illustration (courtesy of Brad Colbow) that is prominently displayed in the header. And my name in Archer was close, but no cigar.
I decided to take a break and put things on the back burner.
My biggest problem in the beginning of this new design was trying to find the right font to express who I am. But nothing fit quite right. The idea of doing my identity by hand didn't occur to me until I had exhausted all other possibilities. So I sat down one day and started sketching out some ideas when it clicked that I shouldn't settle for some "off the shelf" font, but create a unique, one-of-a-kind, font that embodies who I am.
Here are some of the preliminary sketches I made:
The personal touch I put on my brand is probably my favorite part of this new design. I have always been a fan of doing things by hand, so hand-drawn type was something that always appealed to me. I love what my friend Josh Hemsley wrote about it:
"The humbleness and transparency in your words can now be identified in your new mark."
Building a theme from scratch is no easy task. But thanks to Ian Stewart, and his wonderful 11-part How To Create a WordPress Theme Tutorial, I was able to get some much needed help. Of course though, tutorials aren't the end-all-be-all solution, and that's when I turned to some of my friends for help. Matt Simo was a huge help to me with all the WordPress custom functionality. Caleb White also lent me a hand with his ninjastic WordPress custom field knowledge. And where would my layout be without the 960 grid system? A huge thanks to Nathan Smith for his contribution to the design community.
With the layout of my custom home page I wanted to focus on keeping my content fresh and up to date. The new portfolio slideshow is a combination of two jquery plugins, the jquery tools scrollable plugin and this sliding boxes and captions plugin over at build internet. The three "most recent posts" section at the bottom is managed by some custom wordpress loops and controlled by the jquery accordion plugin. And instead of pulling in the_excerpt for each post, I chose to use the_content so it would pull in my images and videos from each post.
I knew I wanted a single column layout for my blog posts. I think it provides a clean and minimal look while allowing the focus to solely be on the content. I thought a lot about the comparison of reading online as opposed to reading a book. Wilson Miner has a great article called "Relative Readability" that talks about why he used a larger font-size in his design. He refers to this original article titled, "The 100% Easy-2-Read Standard", by Information Architects Japan which lists out 5 simple rules for better readability on the web.
I highly recommend this article for you to read, absorb and regurgitate back in to your own designs.
I'm not going to lie. I copied the comment styles from Thematic. Check my code. Go ahead. I dare you. I love the way they're styled so much that I couldn't find a way to really improve them. The only thing I added to my comments section was the Live Comment Preview plugin that shows you what your comment will look like in real time. I really love the client-side Javascript that shows you your gravatar image once you input your email address.
And now it's the time you've all been waiting for. I am pleased to offer my new hand-drawn font, appropriately named "Steed", available free to download in vector format.
Here's a preview of Steed:
I hope you enjoy the font and please tweet me a link anytime you use it.
Thank you all for all your continued support and encouragement. The feedback I've received so far has been nothing but positive. Please stay tuned for the third and final post in this series. I will explore the depths of my faith that I feel have brought about a change in my life and thus have lead to my need for redesigning myself.
This is a taste of what's to come for my new identity work. I have finished my whole name in this custom hand-drawn font and will be releasing it to go along with my new website redesign/realign.
