22 Apr 2009 5 pm eastern

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]

Filed under: Appearances, Browsers, content, creativity, CSS, Design, Fonts, HTML, Layout, Web Design, Web Standards, Websites, wordpress, work, Working, XHTML, Zeldman, zeldman.com

55 Responses to “Redesign in progress”

  1. Dave Smay said on

    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. Struan said on

    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. Matthew Kempster said on

    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. the communicatrix said on

    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. Randy said on

    For some reason that all looks very familiar. http://web.archive.org/web/20010331041056/www.zeldman.com/coming.html. Yes I have been following you that long. Longer actually. :)

  6. natalia said on

    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.

  7. Phil Nelson said on

    Love it. Clean as hell.

    @natalia Hey, me too. I still wait for the return of Ask Dr. Web.

  8. Jen Germann said on

    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.

  9. Jason Grant said on

    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.

  10. Amazon.com: Taking Your Talent to the Web: A Guide for the Transitioning Designer: Jeffrey Zeldman: Books said on

    [...] a look. Looks extra sweet in iPhone. I’m designing from the content … This is syndicated from Jeffrey Zeldman Presents The Daily Report. [...]

  11. Jorge Piñon said on

    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…”

  12. J David Eisenberg said on

    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.”

  13. Mandy Brown said on

    I *love* that you are focusing on making it readable above anything else. Here’s to inspiring legions of other designers to do the same.

  14. All Good Found said on

    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!

  15. Neal G said on

    The structure looks a lot like your current site. Will it it look that way when finalized?

  16. ben said on

    Woohoo!

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

    Most keen. Applause. Sends.

  17. Ben Ryan said on

    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.

  18. Muhammad said on

    Very excited about the new design, I like the concept.

    Can’t wait to see the header.

  19. dw said on

    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.

  20. JR said on

    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.

  21. Erin said on

    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.

  22. Dale Cruse said on

    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.

  23. amy said on

    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!

  24. webecho said on

    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).

  25. Bottled Tuna said on

    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 (!).

  26. I find it quicker […] to tweak font settings in code than to laboriously render pages in Photoshop - pixelgraphix Weblog - pixelgraphix said on

    [...] Zeldman ist gerade dabei seine Site neu zu gestalten. Soweit, so gut. In einem kleinen Posting dazu spricht er mir quasi aus der Seele: I designed the grid in my head, verified it on sketch paper, [...]

  27. Scarf*oo said on

    Simple is beautiful, keep it up.

  28. Daniel Carvalho said on

    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.

  29. Daniel Carvalho said on

    *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.

  30. I find it quicker […] to tweak font settings in code than to laboriously render pages in Photoshop / Design, Webdesign / Seraph Design Solutions // Webdesign, Printdesign, Leveldesign // Portfolio von Benjamin Schulz said on

    [...] Zeldman ist gerade dabei seine Site neu zu gestalten. Soweit, so gut. In einem kleinen Posting dazu spricht er mir quasi aus der Seele: I designed the grid in my head, verified it on sketch paper, [...]

  31. Niels Matthijs said on

    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.

  32. Philip said on

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

  33. Sarah Johns said on

    Very nice story.

  34. Peter Magellan said on

    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.

  35. Pete said on

    I trust you’ll not be losing the cool banner images?

  36. Eduf said on

    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. :)

  37. Ray said on

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

    I LOVE it!

    OK, there I said it.

  38. Brade said on

    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?

  39. andrew said on

    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?

  40. Richard Fink said on

    I dig the orange flavor – like you said, harkens back.

  41. Adrian said on

    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.

  42. Klaas said on

    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.

  43. Jeffrey Zeldman said on

    Your grid doesn’t work either as the footer does not align with anything. Please do some more tweaking.

    Oh, the grid works just fine, Klaas.

  44. Tanny O'Haley said on

    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.

  45. Jeffrey Zeldman said on

    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.)

  46. Rick said on

    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.

  47. Lace said on

    Hmmm. When I look away, I see blue….

  48. michael said on

    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.

  49. Shane said on

    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 :)

  50. Billee D. said on

    Nice. I love the bigger, chunkier look. The colors do make me feel all nostalgic too. :-)

  51. Zeldman zeldman.com’u yeniden tasarlıyor Sunipeyk said on

    [...] Standartları gurusu Jeffrey Zeldman sitesini yeniden tasarlıyor. Üzerinde çalıştığı bu sayfaya bakabilirsiniz. Kendisinin önceki sitesinde de, arka planda [...]

  52. hakki kekilli said on

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

  53. SuniPeyk tumblr said on

    [...] Standartları gurusu Jeffrey Zeldman sitesini yeniden tasarlıyor. Üzerinde çalıştığı bu sayfaya bakabilirsiniz. Kendisinin önceki sitesinde de, arka planda [...]

  54. Redesigned – Jeffrey Zeldman Presents The Daily Report said on

    [...] more about it here, here, there, and elsewhere. (Don’t freak out; these old posts are now in the new layout, [...]

  55. A List Apart: Articles: The Case for Content Strategy—Motown Style said on

    [...] After a quantitative headcount and qualitative review, the content strategist can help you and your client better understand what you have, and what they’ll need to revise or create. Voilà: You’ve got raw material for your sitemap and wireframes! Moreover, a qualitative content audit can help reveal what new content types you should aggregate—think video, blog posts, and testimonials. A content strategist can help you figure out what makes sense with that shiny new design. To steal a page from Eat Media’s Ian Alexander, “it just makes sense to design from the content out.” [...]

Comments off.