How does a website evolve from a concept into a finished design? Where does the concept come from? What steps take place along the way to turn a blank piece of paper into a fully functioning website? To answer these questions I thought it might be fun to give you a visual tour of my own design process in creating this site.
Before Pen Touches Paper
A lot of work goes into a design before the first images are created. Usually when starting any new design project I like to look at other sites in the same industry to see what already exists and generate some ideas. It gives me a sense of what’s likely necessary to include and what seems to be missing.
I’m also looking for descriptive words for the site through discussions with the client. The goal is to capture a sense of how the client wants their brand to be seen. One client might want visitors to think elegant and another might be after stability. In my case I was after words like community, honesty, and warmth.
The First Drawings
Once I have a sense of what I’m after I pick up pen or pencil and start sketching. Nothing fancy. I want to try different elements in different places and it’s much quicker to play with ideas in a quick sketch.
For whatever reason I didn’t do much sketching for this design. I can’t remember why, but one day I opened Photoshop and started working on design comps.
The first few comps didn’t get very far and didn’t get saved so I can’t show them to you. They were not good, but they did get me started.
As I often do when a design isn’t working I went out seeking inspiration from other designers. I tend to grab something I like and attempt to copy much of it in Photoshop. Along the way I’ll start to modify the original and come up with something new.
Here’s where that initial copying led me.
The original was a Joomla theme that you may recognize if you’ve come across the theme before. I think I changed it somewhat, but I know this design is still pretty close to the original.
Aside from not looking to copy someone else’s work I didn’t like the above comp for another reason.
You might not be able to see it in the image above, but the design tried to create a sense of depth in the use of shadows on different elements. The sidebar is actually casting a long shadow across the content. I felt it pushed the content too far into the background.
The design above eventually evolved into the one below
The header background image is the same. It’s from an image I captured of the mountains here in town and was an attempt to get in a sense of myself and where I lived into the design.
You can see the logo has changed and now includes a reflection and the tabs were dropped in favor of a more simple navigation bar, complete with xhtml markup around the links.
The sidebar has also moved to the right hand side. While there’s more to this site than a blog I realize most people visiting here are spending time on the blog and I wanted to provide the familiar right hand navigation. I also wanted to keep the content on the left with the idea that people would be reading left to right.
The big change to me was in simplifying the content area and removing the depth from the previous design. One thing that might stand out is the single oversized paragraph. Step, one of the design magazines I read, often uses oversized paragraphs in the copy. Aesthetically it’s always appealed to me and I thought it might be interesting online.
The next version of the design again evolved from the prior one
The header is mostly the same, though the logo is seeing another version and the mountains are gone. The color scheme has changed to a neutral gray background again in an attempt to keep the focus on the content itself and not the background.
As you can see I fleshed out the content area more adding in some social media icons, links to related posts, and a few comments. The sidebar has been given an RSS icon and search box and the navigation has become more prominent.
One of the common themes through most of the designs above was the use of light text on a darker background. In my head I kept thinking the type should be the more familiar dark text on a light background, but the designs didn’t want to cooperate.
It was the light on dark that led me into the final design comp
This last comp started out just to reverse the text and background colors, though you can see it too evolved. The heading is now completely new and I’ve gone back to a tabbed navigation.
I wanted promote the idea that each section of the site is different from the others and I think tabs get that across better than text links alone. Home is the usual company and me info, Design and SEO are the distinct services I offer, and the Blog is it’s own entity.
The color scheme has changed and become the one you see here now. It’s brighter than the others and I think that helps convey the sense of warmth I was after. Oddly the colors themselves are cool, but I think the brightness offers a welcoming feel to the site.
The logo in this comp is the one that ultimately found a home on the site.
I added a grunge effect in the sidebar. The idea was to make it look like a paint splotch that had dripped down and let dry. I liked it visually, but it didn’t really work with the rest of the design.
The Design Evolves During Development
If you can believe it the design above is the one I took into development. The essence of the design you see is in there, but clearly I’ve made a lot of changes since leaving Photoshop.
I reach a point where it feels like the time has come to develop the code, though I’ll still continue making design changes. I think it’s thrown off a few clients who saw less than polished design comps and were asked to trust me. Fortunately they did.
The background behind the menu in the image above turned out to be more difficult for me to replicate cross browser than I thought. I probably could have made it work, but the earliest versions of the site dropped it entirely.
I think I mentioned in the post where I discussed the decision for the new domain that the design work was done a year ago. Sometime during the last year I had new thoughts about what I wanted to include in the sidebar.
The biggest change is the addition of the Sponsors section. Once I made the decision to include ads it helped shape the dimensions of the rightmost sidebar.
For awhile the sidebars were looking very different here on the blog and on the rest of the site. Over time I made the decision to keep blog related elements in the rightmost sidebar and keep more general navigational elements in the inner sidebar. That’s when the design really started coming together for me.
Does The Design Meet The Design Goals?
I think it does. Despite the cooler colors I think the design is warmer and more inviting than the previous one. I hope the thread comments will get some of you to start replying to each other instead of only replying to me and the post. The poll I’ve added below the menu will be another way you can interact with me and the site.
The tone of the copy has completely changed from the former businesslike language to the now more personal language. Before I came across as something larger than a single person company. Now it should be clear this site and business is me and I’ve done what I could to inject more of myself and my personality into it.
The proof, of course, will be in the results. The stats I have since the changes are still limited, but I’ve already noticed people spending more time on the site and clicking to more pages than they had been. It’s still much too early to draw any conclusions, though.
Overall I’m happy with the new look and most of the comments I’ve received have been positive.
Is A Website Ever Finished?
Nope and neither is this one. I know there are still some minor bugs with the site that I need to fix and I’m not completely satisfied with everything about the design. The type could be more interesting and I’ll probably play around with a few things here and there.
I’m also considering some different things in the sidebar. I might drop the popular posts plugin for a list of posts I think are the best ones here and I’m not sold on the value of recent posts.
One thought is to include a tabbed interface in the sidebar that will show recent posts and comments on the different tabs. I may also include more social media related content such as links to my profiles and maybe Twitter updates. I think the social media connection fits in well with the idea of community.
For now I’m leaving things as they are. Outside of bug fixes I need a little time away from actively working on the site and I have enough client work to keep me busy for the next month.
In time expect to see some changes with the site as the design continues to evolve. No web site is every done.
I’m not sure if I fully answered the questions at the start of this post, but hopefully I’ve given you a little insight into my design process through the visual tour.
Download a free sample from my book, Design Fundamentals.