One of the goals I set at the start of the year was to redesign this site. It took longer than expected (a case of the cobbler’s kids among other things), but I finally managed to switch to a new design. If you normally read these posts in a feedreader of some kind, today might be the day to click through to the site to see the new look.
The images in this post are all screenshots from the new design.
It Never Ends
Like the title of the post says, this design isn’t finished. That’s no accident. It was a design decision. My main objective was to develop a system on which I could continue to build. I think (hope) I’ve done that, but we’ll see.
I’ll have a number of things to say about the design in the near future. I’d like to talk about some of the things I learned in working on this design and perhaps more interesting why I made some of the design decisions I made.
I’m not entirely certain what I want to talk about, but a few things that come to mind are.
- Business goals
- Design goals
- Future plans
- Typography
- Layout
- Color
- What I learned
- What I need to learn
GIve me a week or so to plan out what I want to say and what order it makes the most sense to present it. If there’s anything you specifically want to know, just ask. There might be a few things I hold back on, but for the most part I’ll be happy to answer any question you might have in regards to the new design.
Oops. Did I Break That?
Yes I did. Sad to say I’ve done some stupid things with the code here over the years, including the addition of inline css on old posts. When I first starting using WordPress I didn’t know any better and unfortunately didn’t think of the day I’d want to redesign the place. I also reused class names that now have different layout styles applied.
I know the new design breaks the layout of a lot of older posts. Most of them just need a small bit of tweaking. Removing any inline css I still have and renaming or removing class names. Mostly busy work, but it’s a lot of posts. I have a list of about 120 that need attention. Hopefully within a week or two they’ll all be looking as intended.
If you notice anything not working please let me know, however do know I’m aware that older posts aren’t looking right. If you notice them still looking off in a couple of weeks let me know, but for the next week or so realize that I probably already know.
Another issue I’ll have to look into sooner rather than later is the color. On the Mac side the headings are a muted red, where on the Windows side they seem to be more of a purple. Muted red was the goal and I’ll see what I can do about making everything the same on both platforms.
Have a Look Around
For now look around and hopefully enjoy what you see. One thing I will note is that I tweaked the name of the place from Van SEO Design to Vanseo Design. I’l explain why when I talk about some of the business goals behind the redesign.
Feedback is appreciated. Tell me what you like. Tell me what you don’t like. Just be nice about it. Honest, but nice.
I’m going to take the rest of the weekend off and then jump right into fixing up the older posts and a few other things I know need attention. I have a to do list that’s literally a mile long (I know because I measured it). Like I said this design isn’t finished. It’s only the beginning.
Download a free sample from my book, Design Fundamentals.
Pretty much 960 down the middle – in this day and age why didn’t you make it “really” responsive? Do the majority of your readers really view the site on their phones? Is there truly nothing that you can think of that could utilize the 50-60 wasted white space on desktop screens?
The site is responsive. It doesn’t get wider, because I don’t think it needs to get wider. The point of design isn’t to fill up all the available space just because the space is there.
Space isn’t wasted because it’s empty.
Well said. Your site looks great.
Thanks John.
It’s your site, of course. We disagree about whether or not it “needs” to get wider however. I guess what you’re saying is that the majority of your readers, who you want to code for or be an example to, do so on iPads or phones. Your choice.
It has nothing to do with what device people are using. The design is based on the needs of the content.
What do you suggest I add to fill up the space? Help me see what should go there. I’m open to the idea if adding someone will enhance the site.
You should use sprites for your logo images or maybe try with http://css-tricks.com/flat-icons-icon-fonts/
The icon of the feedburner doesn’t match with the general style of the page, it’s too glossy.
The text align for the home page looks bad, try http://code.google.com/p/hyphenator/ or do another layout.
Sorry for my english 😛
No need to apologize for your English. It’s better than many people who speak English as a native language. 🙂
The logo is a single image. I’m thinking in time I’ll reproduce it in code. Most of the other images I can probably recreate using icon fonts.
I agree with you about the rss image. The orange stands out. I thought I would leave it for a little while to see if it calls attention to itself and hopefully leads to more people subscribing. I should know within a few weeks if it’s working. I still might change it to a color that fits better though.
I’m not crazy about how the home page came out either. I’m much happier with the blog and posts than I am with any of the pages. I’m hoping to find the energy to give each one a unique design, though it’ll take a little while before I can get to it.
Thanks for the feedback.
Very nice, clean redesign. I personally feel the font size for the copy could just be little bigger. How about that?
Thanks Nomi. I debated having the font larger in the copy. It’s currently set to 1em so it should be 16px. I toyed with setting to something closer to 18px, but settled on 1em/16px for now.
It’s something I’m still thinking about, though changing the font size at this point would also necessitate a lot of other changes.
Thanks for replying Steven.
Being a designer/developer myself, I understand such decisions are not easy to make. You have to go through plenty of changes by making a single change in the base value.
I just brought it up because on my Firefox 14 (Win XP, 1680×1050). The post copy is not so easy on eyes.
This is what I see http://prntscr.com/d26ff
I’m glad you brought it up. Interesting though because it doesn’t look that way to me on Windows. My monitor is 1400×900 or something like that.
I have a font stack set up with standard fonts on most machines. Which font are you seeing? The stack is:
‘Palatino’, ‘Minion Pro’, ‘Palatino Linotype’, ‘Georgia’, ‘Serif’
I’m seeing Minion Pro.
Thanks. I’ll try to play around with it and see if I can see what you’re seeing. I could always remove it from the stack and have the main fallback be palatino linotype.
Just wanted to tell you Steven that this is one of the easiest sites to navigate I’ve ever seen, Each page you go into is clear. I wish I’d had the money to pay you for my start-up project…BTW, texture of the theme looks like pagelines.
Very nice Blog, I’ll read all your stuff.
Thanks Alvaro. I appreciate the compliments.
I’m not sure what you mean about the texture of the theme, though. I’m not using any texture.