Tonight, I spent a lot of time re-working my blog layout.
Lets face it, when you becoming a web developer/design/coder for a living, you just don’t really want to do that shit when you come home.
For this project, I was going to make a whole custom design. Well, it somewhat fell through. I am using Thesis. While a lot of people use it, I actually find it harder to customize than trying to figure out a theme on my own. I could have built a custom theme from scratch but I didn’t want to. It’s too much coding for me. I’m lazy.
So yesterday, I really screwed up the mediocre design I had going for me. It wasn’t that good. But it was something. Anyways, I messed it up at some point and then went to bed shortly afterward.
Then today, I got this design going. It was from a premade Thesis skin (free ones are few and far).
I liked the coloring. Anytime I pick up a free theme or in this case, skin, it’s because of color and not the actual design. So this is the gist of what I had to work with pre modifications (click to enlarge):
And while talking to some people working on similar projects on Skype, I quietly mumbled swear words while modifying this. Here is everything wrong I saw in this current layout:
- No header image which just makes it very boring.
- Header text is also… eh. Boring. I love text when text is there but just… hm. Not enough for me.
- The sidebar kind dangles out on it’s own There’s no definition to it and no way to highlight what’s there. It’s like meant to be ignored.
- Sidebar items were somewhat out of order too. After widgets were developed a couple years ago, I just through widgets I want to use and ignore the order until the design is done.
- The “Learn More” buttons didn’t work for me. It blended in with the content and lacked the “hey, I have more to say” pull.
- Not enough images in my post which you’ll probably have to go to the actual blog and check it out. I’m working on filling out my posts a bit more.
- I didn’t like the amount of white on the page. This goes back to not having a header image.
- I didn’t like the links in the sidebar. They look so plain. They really had the feeling of “a bunch of links on this page” instead of “hey, you should click over here because this is worth your while”
- The headers of the sidebar were so plain also. You get that I don’t like plan too much.
- Overall, it just needed a boost in color, more definition, and less “clean” because music notes are generally black and white. And if most of my layout is black and white, I might as well go write for the newspaper.
Here is my after picture:
Why I changed things and how they made it better:
- Header image. I know there’s not much color to it but it does break up the wall of text feeling.
- Colored navigation bar. I tried to make this not look like Thesis anymore. I colored it up. I bolded it.
- Added the borders in. I tried to do without the default Thesis borders but I really just like the way they looked.
- You don’t see it in this image but I changed to “Learn More” link to break off from the content and also the text to “Click here to continue learning more”
- I also started filling out some of my posts by adding some images and breaking up the wall of text. You probably need to go to the actual blog to see how much better a wall of text post compares to a post filled with images and such. This is a music note reading blog. I SHOULD have images. I’m just LAZY.
- I also got rid of the brackets.
- And made it float right.
- Notice the not so boring links in the sidebar. They can use more work but at least they sort of look like they serve a purpose instead of the “bunch of links on a page” feeling.
Overall, the site just feel a bit more filled out but still relatively organized. There’s a lot of CSS I still need to modify but I’m getting closer. I need to finish customizing widgets and finish adding little details here and there. Overall, I think this is close to the look and feel I want to go with.
Including all the technical difficulties, this took me about 4 hours to get to this point. Not too bad. Not all of it was making the changes above. I was having some technical difficulties for a while. And I ate dinner too. So maybe realistically, 2-3 hours.
I will finish the other aspects of the overhaul probably on the weekend!