Skip to a section
  • “Assessing the existing site](#assess
  • “Creating those first drafts](#drafts
  • “Coming up with a layout](#layout
  • “Designing the details](#details

Since “I was early](/early-reboot in launching “my (css) reboot](http://www.cssreboot.com/reboot/show/1029, I decided to take the rest of the time to write a little about how I put the whole thing together. I know that’s the first thing that goes through my mind when I browse through all the reboot sites. I didn’t cover everything here — it’s more why than how — but hopefully some of the more important steps I took and elements I have on the site. If there’s something not here just let me know. I’m pretty accessible, even when my site is not (note the menu). ;)

Just like any design, this new one took a lot of time and thought. I wish I could say design is just deciding the location of the sidebar and slapping a logo into a header. I wish I could tell you design is easy. It’s a lot of struggle, give, take, and like I tell my groom, it’s about as much strain on my brain as brick laying is on his body. He scoffs a bit, and honestly I’ve never laid a single brick, but I think it’s a fair comparison nonetheless. Design takes work. It’s not something that comes easily, even when there’s a flash of an idea that seems to come spontaneously. Actually putting the idea into a real, workable design still takes a lot of thought and careful planning. This post is for those who aren’t really designers but who would like to be and just don’t know where to start, and for critics, to explain a little about why I did certain things a certain way. This is how I put this site together, from inspiration to launch.

Wants and Wishes

!(right)http://static.flickr.com/53/125336593_5fc7ec4f21_m.jpg) When I first decided to sign up for the “CSS Reboot](http://cssreboot.com around February I didn’t really know what I wanted the site to look like. The old design was beautiful at first glance, but like a pair of heels, beautiful isn’t always comfortable. The first step in my redesign involved figuring out what I did and didn’t want to see on my site.

White Whitespace

I knew I wanted to have a white background because I use quite a bit of imagery to get points across, which means lots of images, many with white backgrounds or transparent ones. Those always work best on a white background.

Wideness

The other thing about the old design that I hated after awhile was the width of the post area. It was very narrow and even the short posts required a great deal of scrolling, nevermind writing anything of any real length. It was even more difficult to post a photo wider than 350px, which is nice to do once in awhile.

Let’s get to it

Now that I knew what I didn’t want, and a little of what I did want, it was time to try to figure out how to make that happen. It was a lot of trial and error, more error, and a coffee break, and a little more trial… read on…

A Few Good Drafts…

My only real goals with the new design were the white and wide wishes above, but beyond that I was free to make something pretty. My problem was, the things I was working on were never quite what I wanted. The one I almost went with was very clean and white, but it was still missing something. My first draft was based solely on a beautiful photo of grass and sky. It was a masterful plan.

p(center). !(plain)http://nataliejost.com/images/132.jpg)

This photo was perfect and I loved the layered background I put together, but I was really limited in my color scheme. The old design was limiting as well so it was something I was trying to get away from. With the old design I had black/white and then a few shades of green. With this new draft I was able to add blue but it still seemed something was missing. Just blue and green wasn’t enough for some reason, but I didn’t know how to add more color.

…and a Color Scheme

!(left)http://nataliejost.com/images/133.png! I needed some inspiration, and by this time I needed a break, so I took a look around some other designs by people I really admire. One of those people is Phu Ly. I ran into his “Simpla theme for Wordpress](http://ifelse.co.uk/simpla and it struck me. I immediately scrapped the above design with the inspiration from that template. It was amazing but just the simple use of those bright colors on a muted backdrop were perfect. I still think he pulled it off better because it truly is a ’simpla’ design, but using different colors I was able to incorporate 5 colors instead of 1 or 2, and I kept the green too! And so, with the help of “Color Schemer](http://www.colorschemer.com I had my color scheme.

p(center). !(plain)http://static.flickr.com/53/117311058_86f1bfdc4d.jpg)

Lay It All Down

!(right)http://nataliejost.com/images/134.png! From there it was a matter of layout. For that I went to Photoshop with a grid. I have my ruler set in pixels and I opened a file 1024×768 because I knew from “Mint](http://haveamint.com that 98% of my readership is on a monitor with a resolution atleast that size. I first turned on my grid which I have set in 100px increments with 25px blocks within those.

Fit the Flickr Photo First

The first thing I knew I wanted was my flickr photos. For this I was inspired by “Veerle](http://veerle.duoh.com/ who has her photos in the upper right corner of the page. I loved the location for this because it’s focal but out of the way. I decided against the foursome of photos though, partly because it’s been done so often, partly because one is simpler, and mainly because the images look better bigger and uncropped. Because I knew this already it made the first part of the layout easy… just make the flickr photo fit. So I put a photo in the top right corner and lined up the guides with about 10px on each side of the photo. This gave me my right sidebar at about 260px.

Header Has to Have a Home

Once the flickr photo was lined up, the header was next because the size of the header was determined by the height of the flickr image, in order to remain proportionate. So that was easy enough, but what about color. We’ll get there.

Containing the Content

The content was clear right away once I had the right side and header. It was a perfect size for posts. Even with an 800×600 resolution the entire post width would fit on the screen. There was no debate at this point that the content would be about 650px wide and would be white. The problem came in when I wanted to make the home page have a little more to start with before leading to the full posts.

I decided a small sidebar on the home page would be alright and still give focus to the excerpted posts in the middle. I needed a place for some basic lists and a couple of buttons I like to have on my blog.

Designing the Details

The process thus far took about a week between other jobs. Compared to the total project it was relatively simple, but only as much as choosing a frame for a painting. Creating a painting to put in the frame is the real work.

Making the Menu Mine

!(border)http://nataliejost.com/images/150.png!

Playing around with Adobe ImageReady one day I realized I could make a relatively simple hover effect by using an animated gif. Now wait just a minute, animated gif? Yes, folks, I’ve revived the anigif. ;) It’s actually not as bad as that sounds. It’s a simple gradient reduced to 1px width and used as the background on the hover. The hidden effect works because I made the text color on the menu links the same color as the background. The image is a whopping 614 bytes and can expand as wide as I need it to by repeating on the x axis.

The question has been posed about useability and I debated about it for a few days, but the one thing about the header that I loved once I got the logo up there is that it was clean. There was really no place to put a menu at all in my mind. I really wanted to leave the header area clean and having the menu hidden accomplished that. As for accessibility, normally I would not do something like this, but heck, it’s my blog, right? It’s my home, and as much as I love the compliments I get here, it’s really more for me. It’s the one place on the web where I don’t have to worry so much about details like that. The menu is for secondary things anyway, so if someone can’t find it they probably aren’t missing much. :)

The sidebar menus

!(border)http://nataliejost.com/images/149.png! Personally, I find blocked links easier to maneuver, so that’s how I worked them in. The left side are simple blocks with a background color and top and botom borders. If you do a live search, the results have a different background color so that you can tell a link is different from the main links on the sidebar.

!(border)http://nataliejost.com/images/148.png! On the right side I have the thin bars for the simple links to articles I’ve read recently in my feed reader. No need for anything fancy here and I made them white so they would blend with the main content and appear somewhat raised. The rest of the sidebar lists are meant to be a link with a description, so they get the block and borders like the left side but with a dark gray to add a third style to the mix. Again, it’s my blog, I do some funky things here because here is where I have the freedom to play.

Comment blocks display the number of comments

!(border)http://nataliejost.com/images/151.png! !(border)http://nataliejost.com/images/152.png! The comment blocks were something I had in the original stages of my design but removed at launch because I didn’t really want the emphasis to be on the number of comments but on the content of the post. I think some people are bound to join a discussion when there are a lot of people talking about it rather than when they have something worth contributing. I changed my mind a few weeks after launch because I realized there really was no other way to show comment counts and for me, occasionally I like to know how active a topic has been. So I compromised. I put the comment blocks back but made the number hidden so it’s not obvious but I know it’s there (and now you do too).

Well, I think that covers quite a bit. If there’s something more you’d like to know about, let me know and I’ll share what I can as I can. This has been an exhausting process so I’m just glad it’s over. Welcome, those who’ve come through the reboot site!

Other posts about the redesign