Redesign in progress

Here’s a little something for a Wednesday evening. (Or wherever day and time it is in your part of the world.)

The body and bottom of the next zeldman.com design are now finished. Tomorrow I start working on the top.

Have a look.

Looks extra sweet in iPhone.

I’m designing from the content out. Meaning that I designed the middle of the page (the part you read) first. Because that’s what this site is about.

When I was satisfied that it was not only readable but actually encouraged reading, I brought in colors and started working on the footer. (The colors, I need not point out to longtime visitors, hearken back to the zeldman.com brand as it was in the 1990s.)

The footer, I reckoned, was the right place for my literary and software products.

I designed the grid in my head, verified it on sketch paper, and laid out the footer bits in Photoshop just to make sure they fit and looked right. Essentially, though, this is a design process that takes place outside Photoshop. That is, it starts in my head, gets interpreted via CSS, viewed in a browser, and tweaked.

Do not interpret this as me dumping on Photoshop. I love Photoshop and could not live or work without it. But especially for a simple site focused on reading, I find it quicker and easier to tweak font settings in code than to laboriously render pages in Photoshop.

If you view source, I haven’t optimized the CSS. (There’s no sense in doing so yet, as I still have to design the top of the page.)

I thought about waiting till I was finished before showing anything. That, after all, is what any sensible designer would do. But this site has a long history of redesigning in public, and the current design has been with us at least four years too long. Since I can’t snap my fingers and change it, sharing is the next best thing.

A work in progress. Like ourselves.

[tags]zeldman, zeldman.com, redesign, webdesign, css, code[/tags]

55 thoughts on “Redesign in progress”

  1. Great job. I’m digging your use of “big, simple and direct.” I look forward to seeing your new version when it finally launches. -DS

  2. Hello, orange! Looks fantastic. I was always a fan of the big bold colours of The Daily Report from years gone. No chance of a pixellated monkey in the header, is there?

  3. Yikes!

    I was thinking about your site and when you might redesign earlier.

    Was imagining what it might look like in my head.

    Hence forth, I can’t wait to see it!

  4. I love this. I love the way you put it out there. I love the design. I love how you came up with it.

    I really love the story. Holy cow.

    When you gonna write *that* book, Zeldman, huh? When?

  5. Thanks for sharing, your design process is interesting, and I totally agree on making font tweaks directly in the CSS, Photoshop never does it equal.

  6. Very nice. Clean. Attractive. Was totally drawn into the content. May have been the design. May have been the words “Ukrainian rapist.” I’m really not sure.

  7. Wow! The orange colour is somewhat overpowering. Makes reading the main content in the middle somewhat more straining on the eyes.

    There is lots of clarity in the middle area which is great and easy to read.

    I would seriously re-think using that background though.

    Best of luck with the redesign.

  8. I’ve felt the same way on occasion about unnecessary time spent in Photoshop. For me, PS isn’t the right tool for grid layout and type.

    Now I can start my argument with, “Well, Jeffrey Zeldman says…”

  9. Looks great. I really like the higher contrast text (nearly black on white!) Also, it’s good to see you doing “release early, release often.”

  10. Jeffrey,

    I have a hard time letting go of this layout since I´m so fond of it but I´m looking forward to see what you´ll come up with.

    I agree with Jason regarding the background. I fell in love with your current color scheme since it´s so incredible soothing for the eyes.

    Good luck with the work ahead!

  11. Woohoo!

    Get ready for the thrills! The chills! It’s… SON OF ORANGE!!! (Orange’s mother?)

    Most keen. Applause. Sends.

  12. My one comment would be that the intro paragraph, and the drop-cap in particular, feel a bit too close to the preceding heading – they kind of run into each other.

  13. Do not interpret this as me dumping on Photoshop. I love Photoshop and could not live or work without it. But especially for a simple site focused on reading, I find it quicker and easier to tweak font settings in code than to laboriously render pages in Photoshop.

    You and me both. Most of my intensive design work is now going through Firebug. I build a wireframe in Dreamweaver and then tweak and knob-twist in Firebug. Last major project required comps (and thus Photoshop), but lately I don’t even comp. It’s just much easier for me to build out in HTML and then swap out the CSS if a design isn’t going anywhere.

    I like the new design, but that background orange… it’s very strong. I’m not sure if you want me to buy DWWS 1st edition or a Costco-sized container of Sunny Delight.

  14. It’s nice to see your brand back in action. I always felt that sites with “pedigree” should be like cars (the good ones) – how you can always tell the make regardless of how much the lines have changed throughout the years.

  15. I like that you are bringing back the red-orange. When I first started reading your web site long ago, Zeldman and orange became synonymous in my mind. Best of luck with the rest of the re-design. I look forward to seeing it.

  16. Mr. Zeldman,

    If the theme is “everything old is new again,” how about adding that line about “designing websites since the Crimean War” back into your bio? That was always my favorite part.

  17. I loved the return of classic Zeldman orange–it’s both nostalgic and awesome. But I have to agree with the point raised by the folks for whom the color provides not memories but distraction. In the absence of a prior emotional connection, the intense background does not enhance the content. (Brand, most definitely. But not content.)

    So excited to see the rest of the redesign!

  18. Hi Jeffrey

    Generally I think it looks excellent – although I must say that that red/orange makes it a bit of a headache to read (even if you could just lose the background).
    I think you’ve put all that time and thought into making the content nice and easy to read then surrounding it with a bright bold distracting colour kinda defeats all that effort.

    Sadly, if it stays like that, I’ll be readiing your posts in Google reader (or quickly editing CSS to kill that background colour).

  19. I don’t have any issue with the background color… au contraire: i think it adds to readability, rather than detract to it. It makes the content stand out more. And more. And more. I find it to be (ahem) exciting and stimulating (!).

  20. My suggestions would be that you lose the black borders around your content layout. The content’s white background and the orange of the page’s background already creates a nice contrast. This would also simplify things and push a more contemporary vibe.

    I know Happy Cog are obsessed with Georgia, but I’d rate lose it to Verdana or some other sans-serif alternative. I’ve you’re going for something modern, I think it’s such a clash to use such a “old book” style font. Especially since, Verdana is very readable.

    Glad your new WIP has more padding, I would think it would be nice to incorporate that same spacing in the fat footer as well.

  21. *sigh* I wish I could edit my comments. Why is it when I proof read any comment of mine before posting, it seems fine, and then when I click “submit comment”, I notice all the grammatical errors?

    Damn you Murphy, damn you.

  22. Seems like a big step backwards to me. Seems to improve readability alright, but a rather strange decision right after the “Eye Candy” article on ALA.

  23. Looks great. Like the red-orange (for those that find it too strong – resize your window!). Maybe you don’t need a top?

  24. Amen to all the eeks about the orange background, I’m afraid – and readability guidelines suggest not using all-caps. But apart from that, excellent! It’s a big improvement in cleanness, clarity and readability on the current site. I also have no problem with Georgia, though it does tend to look borderline excremental on a cheap PC – or indeed anywhere outside Safari/Konqueror.

  25. I like that. But I would like something softer. I mean, the tones of the colors could be more elegant. The orange is good. But blue, black… to much for me. :)

  26. Don’t listen to them Jeffrey. I’ve missed that orange #C30 for a long time.

    I LOVE it!

    OK, there I said it.

  27. Lovely. My only request would be that you please discontinue having the “previous reports” look like a button instead of a link. It just doesn’t fit, does it?

  28. Not really my thing. It is very bold and I am overwhelmed by the color choice and all caps.

    That said, it is Zeldman, and Zeldman’s site. Who am I to criticize?

  29. Looks like a nice start.

    I’ve been very interested in typography, a web topic that continues to gain momentum, and debate. Between pixels, ems, percents, keywords, and points, each has its own following of developers who swear by their particular choice of font sizing. I noticed in your CSS there seems to be a combination of all (except points). Any rhyme or reason? I’ve been tempted to use strictly ems but with modern browsers switching to page zooming rather than text resizing and IE6 on its way out, I’m not so sure leaving pixels is still worth it.

  30. I’m sorry but the orange is hideous. You can’t read the text without getting a headache. Your grid doesn’t work either as the footer does not align with anything. Please do some more tweaking.

  31. The footer and content are beautifully done. I’m looking forward to the header. I like the not white background of the content in contrast with the strong orange. It’s easier to read than your 2003 design.

    I notice that in 2003 the font size was 11px, the current design uses 13px and the new design is using 15px. As someone in his 50’s I appreciate the larger font size.

  32. Thanks for the wonderful feedback, friends.

    For those who find the orange background objectionable, I’ll probably offer a user-selectable alternate color scheme, such as the one in this quick (code) sketch.

    (Ignore the color of the printer’s mark at the top. Final colors subject to change.)

  33. The orange is bad. But its just a single css rule.

    I hope, very strongly, that you somehow keep the cool pictures at the top of the current pages. They are the second best thing about your blog.

  34. I know it’s not done but the bottom of your drop cap is cut off in IE 7 on Win XP Pro. I suppose it could be a stylistic choice but looking at the code it doesn’t seem like it to me. I’m not the greatest with CSS though so I could be wrong.

  35. Please do some more tweaking.

    That made me smile. Do whatever you want Jeffrey – it’s your site.

    How about changing that anti-spam question; it’s not design-related, but I’m bored of typing ‘hot’ all the time :)

  36. Pingback: SuniPeyk tumblr

Comments are closed.