Redesigning Myself Part 3

So far we've looked at the events in my life and the creative process it took to lead to my new design. The other area I want to cover is how my faith has played a part in this whole ordeal. But I don't think it will be as easy to convey as my design process was, it's a bit difficult to make a wireframe of my faith. But nonetheless, I will fill you in with what God has been showing me.

Maturity and the Joy of Suffering

We learn by those things we suffer. Whether that be in life, design or faith.

"...though He was a Son, yet He learned obedience by the things which He suffered." Hebrews 5:8

In my relationship with God, the times I suffer are always the most rewarding. It doesn't always feel good to me at the time, but looking back on the hardships and bumps in the road I can see how I was being perfected.

In the same way that I suffer in my faith, I can relate that to design. Working with a difficult client, or on a stressful project, is a great way to exercise my faith. When things are going good it's really easy to forget the grace of God. But when times are tough and we struggle just for an ounce of inspiration, we are quick to remember the one who brings us peace.

During this redesign process I became completely overwhelmed and frustrated with the direction I was headed. No amount of outside inspiration could help, in fact it was hurting worse. That's when I had to take a break and rest from it all. I spent a week in Florida with no computer and no focus on design at all. It allowed my mind to clear and prepare a path for new ideas. When I got back home I felt refreshed and more at peace with not having to get my design done right away.

Growing Up is Hard To Do

"... though by this time you ought to be teachers, you need someone to teach you the elementary truths of God's word all over again..." Hebrews 5:12

Living a life of "what ifs" is a fantasy. Running from responsibility to fulfill our own desires is foolish. But thankfully, Jesus came to fulfill the law and set us free from having to be perfect. This is where His Grace comes in. So as I learn to grow up and face responsibility I am free to make mistakes along the way. And most assuredly I will. But it doesn't excuse my mistakes. No, rather it offers me the chance to get back on my feet, dust myself off, and try again.

We can use those little victories in our lives to pull strength from in time of need. When I feel defeated I like to remember all I had to overcome in the military. I didn't go to war physically, but there was a great spiritual war going on.

Our faith should be one of utmost dependence on our Heavenly Father.

So when I design something the process usually involves a lot of changes. Sometimes I get started on the right track the first time, but more often I end up having to go back and refine my original idea. The arrogance that I could get it right the first time is how I operated when I first started out designing. But over time I have been humbled enough to know that even though I may start on the right track, there is still room for improvement.

Bringing It All Together

The design process is an integral part of my maturity just as my life is an integral part of my faith. They are all interwoven together to form the fabric of what makes me, me. For example, I can't live my life without being a Christian, just as I can't live my life without creating something. That's as simple as I can put it.

I hoped this series helped give you a greater insight to the choices I made for my new design. If you haven't already, please go back and read Part 1 and Part 2.

Thanks again to everyone who continues to support me and show their love by leaving comments and re-tweeting. You rock.

Redesigning Myself Part 2

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.

Wireframing

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.

Branding

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

Layout

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.

Comments

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:

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.

Redesigning Myself Part 1

Hello and welcome to the new version of Kyle Steed on the web. This has been, at least what feels like, a long time coming. What started as simple sketches in my journal months ago has now blossomed in to a fully functional work of wonder. But I'll save the mushy design details for later. In this first part, of what I plan to be a three part series, I want to focus on how my life has affected the new look of my site.

This time it's personal

When I first started out blogging nearly two years ago I wrote about the simple things in life, what my favorite tv show was, the new movie I just saw at the theater or maybe a new band I just started listening to. It was me testing the waters of documenting my life online and how to approach it. There wasn't really much of a focus on what I was writing about.

Compare that with more than two years later where I have narrowed my writing down to three main topics, and I feel that I've somewhat found my voice in the creative community.

More than words

Another lesson I've learned in life is that my actions speak louder than words. And I wanted to convey that somehow in my new design. Hence the new portfolio slideshow. That's one thing that always bothered me about my previous designs. I had not created a decent way of showing off what I could do. Not that I mean to boast, but if I'm not going to promote myself, then who will?

I think that old saying "content is king" is a great way to start a blog, but if you can do more than that, then I would encourage you to do so.

Getting out more

One of my main goals in life is to get out as much as possible and spend time with those I love. There is nothing more important than building relationship with real people. So with that in mind, I don't want to constantly sit at my computer and worry about what to write/design next. I want my blog to be able to handle my absence for a week or so and not feel like it's growing stagnant. And I think with the creation of my custom home page template I have found a good solution.

---

So I'm looking forward to what lies ahead in life, and my goal is to stay as transparent as possible through my writing and designs. In the second part of this series I will go over, from start to finish, the design decisions I had to work through, some good and some bad.

Making a website is easy

Making a website really takes no skill at all. Today you don't have to be creative, you don't have to know code, you just need to know how to work a computer and type. Thanks to applications like Dreamweaver and it's predecessor GoLive and the ever popular FrontPage (sorry I think I just threw up a little in my mouth) you can slap something together in a few days. But making a statement with your website, I mean really setting yourself apart from the crowd, takes time and a little bit of elbow grease. And this is where a lot of people/companies make mistakes.

Over the past few months I have struggled with a client who came to us looking to update their website, but have lacked the effort to decide on what they want their site to say about them. From simple content to deciding on a look and feel they have been painfully slow. I won't go in to any further details about the company itself, but will expand on two reasons I believe this process of making a website is more than a simple "wizzy-whig" editor.

The Content

If you don't have content, then you might as well not have a life on the web. Without something to engage your users then all the pretty graphics and typography you put on a site will do you little good. I know this, because I've been there. When I first started out in web design, nearly two years ago now, I thought using lots of pictures and little text would draw in people by the masses to my site. Boy was I in for a surprise when all I heard was the sound of crickets chirping the next morning I woke up.

Now I'm not saying you have to know everything about anything, but you should be able to talk about what you love, right? I mean if you're serious about writing a blog, or telling people why your business is great, then you should be able share that with others. Think of it like your meeting some friends for coffee and conversation. Or if that's too casual then think of it like a formal dinner party. That's not really the point I'm trying to make. What is important is that you are comfortable with communicating to people who you are and why what you have to say is interesting. That's really all it is.

There is a great article on A List Apart titled "Better Writing Through Design" by Bronwyn Jones where she lays out some great ideas for putting your own voice in to your website. I particularly like what she says at the end of the article:

Design a voice for your site and you do more than make words and images play nice. You engage your users in a discussion you both want to carry on.

(For every rule there is an exception, and in this case I would have to say that creative people aren't held to this rule as strictly. Where they lack in content they make up for in a strong portfolio.)

The Layout

When I refer to layout I am talking about the look and feel of a website. Most of this work is usually done by a professional, such as myself and many of you who read this. And from my experience there is no real shortcut here. From an initial idea/concept to the first sketch on paper to the various mockups created, this portion of creating a website is at best, lengthy. It is also the most emotional. People can become really attached to certain images or colors or fonts for that matter. It's easy when building a new site from the ground up, but when you are working on a redesign things can get messy.

For example, the clients site I am working on uses a primarily red palette on the current version of their website, from the logo to the background to the font colors. So when I presented them with four initial mockups, each utilizing the same red color, I was surprised to hear that they didn't like any of them. Actually I was flabbergasted. So what I'm working on now is creating a more muted color scheme which uses more grays and blues with and a hint of red in the logo and some header text. Sometimes a subtle hint of color can make a bigger impact than using color all over the place.

Speaking of redesigning a website there is an interesting article on A List Apart titled "Good Designers Redesign, Great Designers Realign" by Cameron Moll. Even though the article is dated October 2005 I think it holds a timeless bit of information. Now whether or not I whole-heartedly agree with what Mr. Moll has to say is up for debate. While I can see his point on the whole emotional/aesthetic approach to a redesign, and a more business/market approach to a realign, I think the two can go hand-in-hand and don't necessarily have to be separated.

Final Thoughts

Obviously there is more to consider when creating a website, but I wanted to focus in on the two areas I think are really the backbone to any great project. Plus I've been so focused on these two areas here at work

redesign

As a part of this new redesign I ran across what seems to be a very common, yet seemingly frustrating problem with setting your sidebar to the full height of a page (not just the screen). It made sense in my mind to simply set the height of the sidebar div to 100%. But oh no, all that gets you is a headache and a pocket full of lint. I tried everything from setting the body and html tag height to 100% to using a min-height of 100% on the sidebar as well, but no luck. I'm still not sure whether this is a browser problem or a CSS problem. In either case I knew I was going to have to do my homework.

Type the words "full height sidebar" into google and you'll get over 300,000 results. With that many pages staring you in the face it can seem a little overwhelming. But I knew I wouldn't have to look that hard, what with Googles superb job of site indexing and all. After reading through a few forums I started to realize the problem I was having. Since my sidebar is floated right it sets the height according to the content that is inside of it, not to the height of the page itself. So for example, if I only had three lines of text in my sidebar it would only span the height according to those three lines of text. I think that worked fine in my old design, as seen below,

but with my new design using a dark background and a light grey sidebar it didn't look so pretty. And sure there are those out there who may say they like the sidebar to be cut short, but I think they're just being lazy.

Enter our hero, the magnificent, super-duper wrapper div. To be honest I don't know why I didn't think of this sooner, at work I always wrap my content. But in this case it hadn't occurred to me. But low and behold, as soon as I wrapped my content and my sidebar and set the background color to match that of my sidebar and set the height to 100% it worked like a charm. That is to say on some pages. You see the next problem came when my sidebar would extend pass the content, then my content would have this ugly grey area underneath it. And that wasn't going to work since I'm using #ffffff as the background color for my content. But even if I changed the wrapper background to white my sidebar would end up looking cut short when the content extended longer than the sidebar, which was my original problem to begin with. UGH!

Cue sound of angels singing. While taking a break from the code, washing my face to be exact, it clicked in my brain what needed to happen. It was so simple. Why hadn't I seen it before? All that was needed was a simple background image repeated on the y-axis that matched my sidebar and to set the background color to white. Now it didn't matter the length of the content or the length of the sidebar, all my pages were covered. Yay!

So what do you think of the new design? Do you like it better than my previous theme? Would you like to see it in the WordPress theme directory?