Redesign (Whoomp, There It Is)

OK, so here you have it! Just after midnight. There are certainly still bugs in this design, but we’re most of the way there. I’ve got a few other bobbles and extras I’ll be adding in the coming days and months, but this is the main look and feel for the thing. Watch the upper-right corner of the main white window for something fun in the coming days (or weeks if I’m really busy). I’m really hoping you’ll all give your honest feedback about it. Even the silent lurkers! It was extremely challenging to get it all to work even as well it does, but now that it’s up, it feels really rewarding.

Those of you who aren’t using Internet Explorer are probably being treated to the goodness known as PNG images. (Soon the IE users will also get to see the PNGs properly once I’m done making the necessary tweaks. Right now they unfortunately see ugly grey areas where the images are supposed to be transparent.) The “joshlewis.org” graphic at the top and the drop shadows and rounded corners on the main white window are all PNGs. Even the upper-left corner is rounded. You just can’t see it without removing the joshlewis.org graphic. But if you did, you’d see it under there.

My friend Eddie said something on this very blog a few months ago that I’ve had running around in the back of my web-developing brain since then. He said that websites (or at least a few that I made) look too boxy. I thought about that comment and I decided that I agreed enough to try to do something about it on my site. I don’t want it to be boxy, I want it to be beautiful. I want it to be layered and kinda pop out at you when you see it. Boxy flatness is a common problem, but most web designers satisfy themselves with either 1) looking boxy because it’s too hard not to, or 2) using lots of solid background colors that cover the entire page, thus giving the impression that it’s not their website that is boxy, but that it’s really just the browser window boxing them in. I didn’t want a solid color background, but I also didn’t want corners in my design. (You’ll notice that there is currently not a single right angle in this entire design.) So I sought out the wisdom of the web design geniuses at A List Apart, and I quenched my thirst with their article titled CSS Design: Creating Custom Corners & Borders Part II I didn’t end up following their recommendations to the letter. I had to improvise a bit because of a few differences in my code, but it turned out pretty well. It took me about four hours of intense negotiations with the CSS and XHTML to get it to work.

I’ll continue tweaking what you see based on your feedback over the next few weeks. You’ll notice that the individual entry pages and comments stuff haven’t really been tweaked much yet. I’ll get to it.

Update: w00t. It validates.
Update 2: I figured I’d post a JPG of what it’s supposed to look like so those using IE can see it now. (Then again, they could just download Firefox if they wanted a better browsing experience.)

9 thoughts on “Redesign (Whoomp, There It Is)

  1. Yes, I realize the comments look very broken. That’s because they are very broken from a designer’s perspective. But they still work, so leave a comment!

  2. That’s certainly different. For all your happy talk of losing right angles, with this design there would only be four right angles in the whole design, and usually you’d only ever see two of them at once. I’m guessing part of that is because you have no sidebar right now. Is that coming back soon?

    I also see a lack of the menu for the rest of your site. Does that mean we’re going to stop pretending it’s coming “soonish”? 😉

    While the graphic PNG images are kind of cool, I really hope those auto-generate for you. That’d be a pain. I also have a feeling that font could old after a few weeks. It works great for your title at the top, but using it for every entry title borders on overuse. My 1.5 cents.

    All in all it’s pretty funky and different. I’m eager to see the complete package finished.

  3. I think your design is clean and innovative. I haven’t seen anything like this before and I really appreciate your sense of invention and creativity! Way to be! It still needs a bit of work…but I think you’re direction is great. Your webdev abilities kick my butt.

  4. I’d agree with Kevin about the text thing. It looks sharp for the title of the page and all, but I’m not sure you want to use it for the blog titles as well, rather like he suggested.

    And, the orange background looks kinda cool, but I’m not sure it’s the best either, as it’s REALLY distracting for me. My eye gets drawn there constantly rather than to the text. And, hehe, there are right angles: all those lines in the orange background hit the text box with rounded corners! 😉 Just being annoying with that one, sorry.

    At any rate, I’m interested to see if you keep all the menu stuff you had before, as that was rather nice to have.

  5. Here’s a few:

    – needs more white space.
    – needs side bar and other options to leave blog.
    – I like the shades of orange!!!
    – I miss the changing comments(often from Beck songs) at the top of the blog. But that’ll probably come back in some later form…
    – The “J” in Joshlewis.org is partially cut off on the browser I am using right now.
    – maybe have a different background for you comments. A different, but complimentary, color, but same pattern?
    – I agree about the titls font. The background is so busy that it could use a little simplification.
    – Try using a complimentary colors with you titles and links. Almost too much orange. Try dark blues or browns or greens (maybe even purple!). A little more balance.
    – If youy could some how feature the background a little more without making it too distracting, like leaving space between the blog entries and the side bar. Since I see so little of it on the sides it works almost more as a banner than a background. Does that make sense?
    – Other than that I really dig it and see that it has much more potential than your old design.
    – Will you have alternating banners again ever? That was fun. Maybe a circle banner! I’ve always liked circle bumper stickers. It could be the “Josh Lewis” stamp. Maybe one option could be your straight pride ensign.

    Anyway, your creativiy sparks mine; thus all the comments. I’ve always liked you tastes.

  6. > I don’t want it to be boxy, I want it to be beautiful.

    I will be the first in line to say that the CSS box model plays too big of a role in determining the final design of a website but I think it’s wrong to say things like the above.

    While teaching my class in web design this term I told the students to specifically design their midterm in Photoshop and not to think about how to make it work, we’ll figure that out later. If hard angles and boxes help build the style and compliment the attitude you are going for, that’s fine; just don’t let CSS tell you what to do.

    Anyways I don’t have time to do a big critique but I will add to the others that I feel the background takes attention away from the content (which should **always** be king).

    Congrats and good luck with the remaining additions.

  7. Thanks for the comments so far, guys. Especially you, Mike. I value your opinions about web design for pretty obvious reasons.

    I really appreciate the feedback from you all, even though it’s sometimes hard for me to take it. Some of this stuff I’m going to actually change, and some of it I have no intention of actually changing because I like it this way even if no one else does. We’ll see which is which. 🙂

    I’d also be interested in knowing (maybe for a sanity check) if this design is overall better or worse than the last, in your opinions.

Comments are closed.