Fireshop or Photoworks

Quite frankly I'm tired of the ongoing debate over whether a designer should use Photoshop or Fireworks. They are only one tool a designer carriers in his/her design toolbox. So why then do we continue to stay in our corners defending the reputation of one app over another? An app is an app is an app. Meaning, if you've got the goods to make the hotness then it shouldn't matter what app you're using to design with. I read an article this morning on a very popular design blog telling us why we should "stick with" Photoshop. I'm sure the author has all the best intentions in the world, but comes across quite naive in my opinion. The sum of the article wasn't even a good one, arguing why we should design with photoshop instead of in the markup. I feel like that's comparing apples with a top sirloin steak. They aren't even in the same food group.

At the end of the day we just have to use what works for us. Design is not about choosing sides in “defense” of one particular app. Design is about making the best visual decisions to help communicate the message of our clients.

Redesigning Myself Part 2

part-two 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:

kyle steed hand-drawn identity

kyle steed hand-drawn identity

kyle steed hand-drawn identity

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.

The Home Page

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.

The Blogroll

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.

  1. Standard font size for long texts
  2. Active white space
  3. Reader friendly line height
  4. Clear color contrast
  5. No text in images

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.

Get to Gettin

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:

steed hand-drawn type

Download 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.


My Mom recently told me a story about the death of her friends dog Olive. Even though it's just a dog, they are very much a part of our families. I know when my two dogs die I will be an emotional mess. So when my Mom emailed me last week asking if I knew how to crop people out from photos I responded with confidence, knowing that I've only done this once or twice before. But I love a photoshop challenge and a chance to expand my skill set. Below you will find the altered photos I created in photoshop followed by the original image. Olive is the yellow lab in the middle.

The feedback from my Mom's friend was very positive, and I have to say I'm pleased as well.  But above all I was happy to create these images to help a family in a time of their loss.