A Single Article
Read it, comment, and share it with your friendsVersion 4
17 days ago I wrote in “ Three blog designs that make me want to redesign my blog” about some great blog designs that made me want to redesign my own. I was a sort of “spur of the moment” feeling… at the time, I didn’t have a single idea of what the new look for this site would be. I also didn’t have any time to work on it while I was returning to campus, and I was putting it off last week while I was learning CakePHP.
Last weekend I really got to thinking about redesigning this site and when I was done with my assignments I decided to get to work. The planning stage was really important… I knew that I needed to seriously change the information architecture of this site. The IA I had with the previous design was good, but one thing I realized after having that design up for months was that everything had the same weight. I also realized that the icons weren’t working and the site itself didn’t fit the more “professional” direction I was going on. Needless to say, the previous design seemed great when I first made it but two days ago I was sick of it.
So I drafted a new site structure on paper and went off to find some inspiration for the design. I looked at Neo Geek and The Big Chris and Wilson Miner and Justin Shattuck and even Veerle’s blog. I looked and I looked and I kept on looking. I played with some colors and some gradients and after a while I was just scratching my head. Two thoughts crossed my mind: first, that while these blog design were everything I wished my blog to be, I couldn’t be inspired by them without ripping them off, and second, that even though these blogs looked great, I couldn’t see their designs fitting my new site structure. So I was back at the drawing board with nothing. Empty. Creativity run dry.
Fortunately I had an epiphany. I decided to go ahead and redesign my site without any colors at all… at least if I could get the site structure up I could go back and color it later right? That’s what I figured and it paid off. I prototyped a sample HTML page and tested some CSS. I then went through the somewhat difficult process of rewriting all the template files from my previous theme to fit the completely new site structure. Some examples of what I did:
- I now use the site title as the H1 only on the front page. Every other page of this site has the page title as the H1, which in my opinion is much more semantic.
- There is no longer a 3 column to 2 column shift from front page to sub-pages, making things more natural and usable.
- I’m back to using both a sidebar and a footer, but neither is as heavy as what I had in previous designs.
- This template uses only 5 images. I got rid of the icons and as much as I wanted to keep Domo-kun as my mascot, he didn’t fit with the design. It wasn’t even my intention to use so few images, but I just didn’t have a need for more. It was also a very good exercise to build the IA without relying on icons… I actually had to think about how to make elements stand out without them, and I think the new design allows users to make clear distinctions without relying on icons.
- The main content gets more attention now, usually with slightly larger text.
- The comments section is far better, filling the whole width of the design.
- I have a great place now to advertise my business, which is key since I’m still looking for clients (hint, hint).
- I gave up my previous font, Babel Sans, which I had used through two designs, for a new one: Fontin. As much as I still like Babel Sans, Fontin makes a much better masthead.
If it isn’t obvious, I was inspired in the process by one blog and only one blog: Subtraction. I did not, however, endeavor to do things the way Khoi did… his IA seems a lot heavier and information-packed than what I wanted, and I had to keep things fluid (go ahead, take this site right down to 600 pixels wide).
In the end, designing without color or icons was a good learning experience. I think that I was able to make text much more effective than I ever have before and I was able to employ at lot more C.R.A.P. than I expected. Most importantly, when I was done with everything last night I realized that even without much color I managed to achieve a look that, in my opinion, works great. I had ideas in the past of making this site look like a newspaper, and the new name that I chose (The Montoya Herald) is a play on the name of the top newspaper in Miami (The Miami Herald). While I was working on the first prototype of this new design yesterday, I had two friends look over my shoulder and ask if I was making it look like a newspaper, which was great because that was all I needed to know that I was heading in the right direction.
So here it is… version 4 of christianmontoya.com, completed at 4 A.M. this morning. To celebrate this new design, it’s time for all of you lurkers to de-lurk and let me know what you think of this new design. And for anyone who might be wondering, the “Portfolio” and “Giveaways” sections will be up soon, as well as the blogroll, and the colophon will soon be updated. All in due time, friends, all in due time.
Get a Trackback link
27 Comments
Responses to my articleThe new design definitely looks professional, but I can’t see how you came up with this based on the sites you mentioned in the post. All of those sites use colors and images - hell Veerle’s blog is up for a bloggie for best design. This site is very well done, but unless you’re planning on some design updates, I liked your old one better.
Karl, didn’t you read my post? I based this design on Subtraction because the blogs I mentioned were just wrong for my new IA.
I hope you’ll excuse my brevity, but this is just boring. I preferred the other ones. It doesn’t even look like you tried very hard.
Okay, well, I should have mentioned that I still would like to actually add “colors” and “images” to this design eventually, but the point was to rebuild the IA.
I think you have done well, the last design I felt was a bit weak, but this is a good improvement which focuses on the content. I have toyed with this sort of style recently and have always been a fan of the minimalistic approach.
Ignore the people who will claim this design is dull or boring, design is about communication not gradients and reflections.
The code is pleasantly semantic, but I hope that this is the layout, positioning, and typography that you’re going to wrap some graphic design around.
At least Khoi has the dog in the header to catch my eye.
Why not make like a newspaper but with a twist …
I missed the Subtraction note, however even that blog has images… lots of them. Plus, it uses multiple shades of grayscale, different font-sizes and weights, and positioning, to make you forget about the fact that it’s in black and white. Subtraction doesn’t look restricted by the color scheme. I like your IA and the semantics of this site and this design improves those areas, but I think you need some more pizazz.
Well if it makes everyone happier I already started brainstorming ideas for a graphic design to go on top of this structure when I went for my tuesday run. Unfortunately it’s going to take me a while to piece everything together and I have a lot of other work to do on the side, so you will all just have to be patient. Thanks
Hey Montoya, nice work.
I like the austerity of this new design. Can’t wait to see what other elements you’re going to add.
The amount of white-space is also great, but I’d use some of it as leeway to pull the content in towards the center a bit, but just a bit. Even 20px would work. It’s just a tad “left heavy” and unbalanced right now. Other than that, I dig it. Especially the newspaper references…very sharp.
Charlie, do you mean the front page content or the sub-page content? I thought of making the front page less “left heavy,” but that doesn’t work so well for the sub-pages.
I think both, if you can pull it off. Which you can ’cause you know what you’re doing.
If by “sub-page” you mean single post pages, definitely, but the others would benefit as well. I’m using Windows IE6 (blech!) at the moment and all of the comment gravicons/avatars/whatever-the-hell-they’re-called and the comment form are as far left as they could get. The rest of the content, header, footer, etc. seem to be 8px or so off the left border. I can check on my Mac at home later if you care, but either way if you bring it in a bit it’ll make a big difference and feel more stable. Then take it from there, as you might see some other changes you’d like to make, if any, at that point.
Charlie: Oh nevermind, what you are seeing is a result of lack of support for “max-width” in IE 6. When you see it in a new browser you’ll see it’s much better than that. I’ll fix IE 6 when I get the chance.
Looking very clean! The shine-gradient effect is looking a little bit weird, but I feel like it might just be my monitor?
So glad you’ve gone back to a sans-serif font.
Good stuff. I like it. I would maybe suggest increasing the distance between paragraphs by maybe like 4 pixels. I like the line height, though.
I like this one much better than the last design, but the starkness hurts my eyes a bit. I agree with kramtark regarding increasing the distance between paragraphs a bit. I understand that you might not want to do that to keep in line with the newspaper theme, so maybe indenting each paragraph would work?
At any rate, I like this design! It’s easy to navigate…
Charlie: I’m 99% certain I fixed the problem in IE 6.
Sam: It could be your monitor, or maybe I did something wrong…
Jem: Yeah, my infatuation with Georgia (the font) is over. I’m still crazy about the state though…
kramtark: Done. And the line-height is something I got from a readability manifesto I stumbled across a few months back… I use it in all my designs now.
Jenn: I’ll be working on the starkness. Glad you like it so far, and glad to see you back after so long!
I like it
SO much so in fact, I had a very similar look planned for a site I’m doing for my father - full-but-centralized white header, black nav, white content, black footer! Great minds, and all that… 
Hey, Montoya, wanted to let you know the widths are fixed in IE6 now. Looks fargin awesome, man, really! Looked perfect on my Mac too. Great job, dude.
I’ll say this, it’s definitely different than your last layout.
Maybe it’s the fact that I’m using a computer in on of Cornell’s libraries, but it’s kind of hurting my eyes.
Any way, good luck with it.
Sitting in front of a CRT when the screen is white is like sitting in front of a flashlight… and this is considering that I’m not using pitch black or pure white here.
It’s going to take me a while to figure out what to do on top of this as a design, since I lack, you know, inspiration and artistic talent and such, but one of these days I’ll have something for y’all to look at.
That moron up there who didn’t log in before posting his comment, is, in fact, me. Just in case y’all were wondering.
See, now I’m at home using my laptop and it’s much better.
Hey great minds think alike, I actually decided to redesign my blog as well roughly around the same time…
I think some blogs look better with less (whats the old saying?? “less is best”). You use the white space nicely but I agree that a little bit of colour would add to it.
I like the getting back to content being king of this design and can really see the interface has been the focal point. I think possibly some styling you could look at would be submit button, form elements and commenting. That would lift the well laid out format - that is if you want to do anything to the design. I actually prefer it from a reading perspective and agree about a better font. I also think the removing of ‘fussy’ or ‘non-essential’ bits has enhanced the site a great deal. Good work and it shows a lot of thought - less is often more in getting it to work aswell.
Jermayn, karmatosed, et al: Thanks for the kind words. If you ever get bored of this plain layout, go to the top and click “Domo On.” Well, as long as you have cookies enabled
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.