Twitter: watching the Machinist, at least until i fall asleep
Subscribe via RSS or email  #7,120


Watch Out for Wet Paint

Mar 31, 2006 in , ,

What you see right now is the product of several weeks of brainstorming, tinkering around in Photoshop, staying up late with SubEthaEdit and a significant amount of trial and error. I had planned to get this done by spring break, but it took much longer than I expected. Thanks for everyone that gave me feedback on my works in progress, whether it be from flickr, the K2 or 9rules forums.

Before I continue, I would like everyone’s input (remember that Lurker Roll Call post… everyone) on the new design. If the site looks weirder than you think it should be, please try clearing your cache. The site looked odd the first time I accessed it online until I cleared the browser cache. I opted to put the sidebar back as it offers a space for much more content to live. The first thing you probably noticed was that it is much wider at 900 pixels. I’ve been playing with narrow designs for quite some time so I wanted to try something different. I call this design Defiance, it’s a little pun on the old design, Deviance. Speaking of Deviance, when I can round up a few hours to clean up the code I would like to release it.

Shout Outs

I would like to thank the following people for dealing with my relentless CSS, PHP and WordPress questions on instant messenger at extremely odd hours throughout the past few days: Kristin Pishdadi for CSS jibber-jabber and encouraging me to submit this site to CSS Reboot, Kyle Neath, sacred creator of the Hemingway theme, for dishing out CSS consultancy with a non-chalant air, Colin Devroe for at least attempting to help me, Mike Stickel for actually helping me, Bryan Veloso for providing me with a comedic O_o; whenever I frantically instant messaged him code that did not work as well as inspiring my comment guidelines, Josue for letting me know my site looked horrible in IE, Chris Morrell for confirming that and finally, Zeo for providing me with some nitty-gritty WordPress and K2 information along with the reminder that my code base is horribly outdated.

Before You Go

Please drop a comment on what you think about the new redesign. There are some bugs I know about, but if you find one please let me know about it anyway. For example, Safari acts a little weird with the menu hover background images. I still need to find a place to put my feedburner icon thing. I had it under the 9rules logo but the mixture of negative margin and some other attributes made a huge difference in its FF vs. Safari layout.

No one has saved this post on del.icio.us. Why not bookmark it?



57 Comments

  1. Oh damn it’s late. So much for taking a shower and not waking everyone up.

  2. Looking good, i like how it fits almost all of my browser window, sweet. Much better than what you had. Oh and i love the comment guidelines little box.

  3. Hi,
    nice work, the only thing I don’t like is the background color contrast. I don’t like how blue fades into gray.
    My two pences
    Mik

  4. It’s looking great! I really like the sidebar…

  5. Congrats with your new design - it’s looking great (and I do like the blue fading into gray)!! Also an excellent idea with the comment guidelines…

    Minor thing: It would improve the usability, if you could click the navigation links in the top sidebar as you hover over them, and not only when you hover over the actual text. Not sure if I’m making this understandable… :-)

    Also for some reason the Archive link isn’t highlighted when on the Archive page…

  6. My first impression was that it looks very smart; my second impression was that it looks a lot like the current in-fashion web design style (for better or worse); my third impression was that I don’t like how you’ve styled your title. It seems overworked compared to the rest of the design and doesn’t really sit comfortably for me.

  7. Really like the redesign Paul, I couldn’t help the previous one just looked a little bit too much of a mish mash, almost incomplete. This is great, breaking the blog ‘norm’ with the sidebar on the left and the rollovers on the menu look great.

    On a side note, there was a Supercar special on 5th Gear in the UK this week, the ‘best of’ from the last few years I think. Starting with the Enzo, ending with the McLaren F1 and interspersed with Lambo’s and Zonda’s – pure automotive porn!! You’re gonna love it if you haven’t already checked it out.

    (Oh, just noticing the comment preview goes off the bottom of the screen, disrupting the layout, as I am typing this! (Using Firefox on a PC))

  8. Gosh, not even sure if I’d class any comment I leave as “hot to drop” but anyhoo…

    In general it’s OK. Not sure the ‘title’ (that’ll be the name.com bit) stands out, and like George I think it’s a bit ’samey’… but these things come in cycles I guess.

    Love the comment guidelines idea.

    Other nit-picking… the top right corner is square yet the sidebar corners are rounded… and the search box seems a bit out of place in the banner…

    Overall it’s good, nothing revelationary (which is bloody hard to do these days) but it’s clean on the eye and works. Well done.

  9. Ok, one has to be the bad one, and I guess it’s my turn.
    I prefered the previous design.
    That said, here are the things that bug me a little bit:
    - the stripes
    - the blue fading into gray
    - the preview acts weirdly in FF 1.5.0.1 WIN XP SP2 (the box is too small to contain the whole thing - I smell a floating issue…
    - if you put your mouse cursor on the gray border between each mini flickr photo, you get a nice flashing stuff !

    I hope this is useful feedback (well, I agree that ” I don’t like the stripes” isn’t very useful…), and absolutely don’t mean to be rude (look at my site, I’m using a default template not even customized…)
    As long as you keep the great posts, any design will be fine with me. ;-)
    Keep it up.

  10. Paul,

    Love the new design. Hopefully, the database got an overhaul too as I noticed that my last couple of posts never appeared (?). Anyway, like I said, I love the design. I just wanted to point out that the site is showing correctly in Safari 2.0.3. Your Flickr photos are showing up imposed over the comments textfield. In Camino the site is perfect. Probably, just another bug that needs to get squashed in Safari is all. Anyway, keep up the good work!!!

  11. Very nice mate. I’ve noticed some nice subtle features (such as the bouncing text in the user details textboxes), and the design is looking great.

    One minor thing I should point out - the ‘FYI’, ‘Comments’ and ‘Recent Posts’ subheadings look a bit strange parked under your menu in plain text. Not sure on the best design to make this better, and sure isn’t critical, but thought it was noteworthy anyway.

  12. Nice reboot Paul. Looks aweseome, I really like the color schemes, the Flickr, and the comment guidelines. Some things are little sketchy on Safari, but I’m sure using FF or Flock will fix that. Overall I think its an awesome reboot, I’ve been looking at screenshots of it and waiting for the finished product!

  13. The new design looks great Paul. I think that this one looks very clean and put together. The old style was starting to get jumbled up on you. Great Job!

  14. Hey, pretty cool. The grey- mm, I liked the solid blue better.

    The stripes are modern looking, but PaulStamatiou.com is a bit hard to see.

    (on a sub note- did you try for stammy.com?)

    mac + firefox.

  15. I saw some screenshots over at the k2 forums and was about to post something on there when I thought I’d check to see if you had updated your blog and bam, you have. I like the design a lot. It’s big and takes up quite a lot of space and I like that because that means I don’t have to scrunch over to read everything. I like the colors, they aren’t too flashy and “hey look at me” and they go well together. The only thing that bothers me is the blog title. I wouldn’t say I dislike it, but it’s just that it’s kind of hard to read clearly. Anyway, I love your site, the design, and everything. Your tutorials have helped me out a lot.

  16. Your name in the header is a bit hard to read due to the lack of contrast. Otherwise it’s very clean and attractive!

  17. Whoa, thanks for all the comments guys! Didn’t expect that many. I am aware of the comment preview and there are currently two possible solutions - disable the live comment preview plugin or move flickr out of the main body (it isn’t in the footer, although it seems that way). I’ll see what I can do. It seems as though there is a bit o’strife regarding the logo and the background color. And I also agree that the ‘FYI’, ‘Comments’ and ‘Recent Posts’ look out of place with plain text.

  18. Although I appreciate the originality of having sidebar content in the footer, this is a lot easier in use.

    The menu looks excellent and the diagonal lines match nicely with your header. But why is there such an empty space at the top? That doesn’t look right.

  19. Looks good so far. One thing I noticed is the search bar. When you start typing the input jumps down, out of the blue header area. Not sure if it’s just because this is the first load but thought I’d mention it anyway.

  20. Nice upgrade! I like the sidebar comment guidelines by the way. I need that for my site.

  21. Mike, are you using Safari? I have the search box using a z-index of 1 to pop out from under the header, maybe it’s getting confused?

  22. Lookin’ good in the neighborhood.

    Though as I’m a grammar whore, I must point out that the plural of “typo” is “typos” and not “typo’s”. :-)

    In any case, nice job.

  23. Haha, Henry I saw that last night but I had to get to sleep… I’ll change it now before I run off to class. =D

  24. I agree with many of Tim’s comments. I like the layout but I’m not a fan of the background img.

    Truthfully, I like your site because you often have something interesting going on but I usually don’t make it beyond Bloglines…

  25. Your rolling archives are popping out of the sidebar on the main page, needs to have some sort of wrap. Also the preview for this comment is covering the FlickRSS right now. Oh, and why doesn’t it go all the way across the page (primary page), or perhaps if that’s the number of photos you’d like it to have then it should be centered. Aligned to the right of the page and starting where it does on the left just looks strange to me.

  26. Loverly. I don’t really like the blue to grey background either, but other than that it’s pretty solid

  27. @Matt: Clear your cache, that’s what happens when you have the old rollingarchives.css, I have experienced that myself and know exactly what you’re talking about. As for the flickrRSS, that’s just the way I wanted it but I’ll be changing it shortly for other reasons.

  28. flickr photos edging into the comment field in safari.
    love the site, paul!

    also, i’d make the anchor the hover instead of the listitem n the mainmenu. that way your hover wonkiness will go away. It looks to me like you should make it:

    ul.sbmenu li {
    [put static background info here]
    }
    ul.sbmenu li a { /* this will make the whole width of the menu hoverable and clickable */
    display: block;
    width: /* whatever it is */;
    *;
    }
    ul.sbmenu li a:hover {
    color: /* probably take away the blue link hover here */
    background: transparent url(/* insert */) no-repeat or whatever;
    }

    Perhaps that’s not easily understandable, but make the ANCHOR the changing hover, not the LIST ITEM. From how your nav works here, that is what seems to be the problem.

    Nice job!

  29. The page load times are a bit long. Like this page took 7.5 sec. to load. And a page before this took 20 sec. to load. I think that’s a problem on my end. But other than that everything is good. I hope my redesign looks this good!

  30. Nice, I like it. Keep up the good work.

  31. Looking good, but I expected nothing less. Love Flickr at the bottom. Paying the tuition, a nice title, and I am sure it will generate more revenue than if you had just left the ads by themself.Keep up the great work!

  32. looks good!

  33. Nice design, Paul. Very nice.

    The point size of the menu items is actually bigger than the page title, which is a bit disorienting. I would try reducing the point size of the menu items and maybe making them all caps and increase the tracking. That might look nice.

    Definitely increase the size of the title. The whole title bar has powerful imagery. Use it!

    Pat

  34. I like the new look, very well organized.

  35. Looks great! The thin one column on 1280×1024 seemed really space inefficient. This looks pretty nice.

  36. much better! It seems that more people are going with minimalist headers these days.

    “K2 + WordPress = Crazy Delicious”

    ^lol, Nice!!

  37. Hey! You listened to the padding thing. :D Well, this is looking really great. For a layout by a person not trained in the arts of design, this is really nice.

    My thing is with these new k2 layouts is trying to look at it and not think “k2″ when I first get there, and this does a good job at hiding the fact that it is k2.

    You know where to find me if you need anymore help. ;)

  38. This design is a huge improvement over your previous one. However, I have noticed some minor issues, which have probably already been addressed.

    In Safari, your Yahoo ads go over your Paying the Tuition title a little.

    I’m not a big fan of the link color change in your menu. I think the stripes look awesome with the black text, but once your hovering directly over the text, the blue doesn’t look as nice.

    K2 + Wordpress = Crazy Delicious could be moved to the sidebar under the 9rules logo, etc. I think that would look a lot better.

    For the background, a like the blue, I like the gray. I don’t like the fade. In the fade area it just feels kind of “dirty”. Not sure how to fix that other than pick one of the background colors.

    The header text could use a little work. I like the placement, it just doesn’t look clean.

    I hope I’m not giving the impression that I’m trashing the redesign. I’m just trying to give some constructive critism. There a lot of goods things that I like about it; a lot more than the bad things. I think as time go on this theme will grown on me just like your last one.

    Great work, and I’ve already notice you’ve fixed some bugs that I saw this morning. Keep at it, it’s looking great.

  39. Nice work Paul, the site is looking fresh and has some neat new features.

  40. I really like it !! I think its very clean, easy to read and navigate and not cluttered. Great job Paul :)

  41. Looks great Paul! Two suggestions though:

    1. The sidebar is a tiny bit junked up. Maybe think about simplifying it’s content? This would also improve useability. Simplicity is key. Other than that, nice work!

    2. Call the theme “Wet Paint” because that’s what I thought the name of it was at first :-P

  42. Oh and paul - offering your deviance theme would be a great idea when you get the time! hey will you stop by my site (when you get a chance) and tell me what you think - I just got a new theme I am pretty happy with it too.

  43. I saw your site a few min ago, very spiffy new theme. Took me a while to figure out what theme it was.. at first glance it looks like a heavily modified Squible + K2… makes great use of gradients.

  44. You changed the background color! I guess the bottom color it turned into was a little odd, but for the most part–or at least the top–looked vibrant and interesting as it was. Now it looks kind of stale and bland. It sucks the life force out of me to want to stick around and look at the site.

    Not digging the PaulStamatiou.com green into blue thing on the top and left, either. Was that there before? If it’s new, I hate it. If it’s not–then it must be the contrast with the new background! Argh! It looks funky like fungus is growing on it.

    Was the ‘insert witty text’ thing there before, too? –Or is it just now standing out to me with the color changes? Anyway, I think that looks bulky and out of place and is kind of ugly and just cluttering the area.

    Otherwise, I like the design and hate myself for not being able to pull off something like this.

    I’d like to know how to make rounded corner images go on the top and bottom of entries and the sidebar. That was at least something that I wanted to do with a new customization I’m trying to do–and would make it satisfying like your new design is… I think I’m screwed with it.

  45. ~C. Wess - Wow… I just clicked on over to your site. That’s a very nice theme you have their. I’m jealous! :)

  46. Looks great ! I like it.

  47. I have to agree with Christopher on the top header. The green text of PaulStamatiou.com does have a weird fungus effect. Just tweaking the color should get rid of that.

    Regarding the php text, why not replace that with your old tag line “tech on your terms”. I think that would look nice there.

    Other than that, I’m really liking how this is evolving.

  48. I like the new design.

    I too am not sure about the whole header bit, I like the idea but I don’t think you have pulled it off yet. I don’t like the fact that the PaulStamatiou.com bit sits over the top of everything.

    I tihnk you are aware of the funkyness with the comment form in Safari so won’t go over any more of that.

    Also there is some funkyness with the rollovers in my safari. When the links are hovered over they don’t spread all the way across the sidebar like the current page bg does. They stop about level with the ‘t’ in Stamatiou.

    Oh, and I don’t like the gradient on the background.

  49. Looking nice Paul. Great job!

    (Although I had trouble hitting the submit button using Safari, it was hidden under the CC text)

  50. I’m loving it, Paul! So clean. So simple, but draws you in to keep reading. Great work, keep it up.

  51. Paul, I don’t pretend to be an expert on design, I don’t program and I don’t even know how to run a web server.

    I do however have some advice.

    The text on the header is blurry and doesn’t suit the website at all. I think you might have broken one of the many taboos of webdesign. Clearly rendered text seems to be the way to go.

    I found an article on Stopdesign that might be what you’re looking for.
    http://www.stopdesign.com/articles/replace_text/
    I hope this helps.

    For now I recommend sleeping on it. I usually find that I make reasonable decisions after I have had some time to think it over. Good luck!

  52. I preferred the previous layout myself, but this is very lovely. If I could pick one nit though, your bottom left sidebar corner is rounded and your main bottom right corner is angular (next to the Nine Rules logo). Or it is in my version of Safari anyway.

    I don’t know where I get the nerve to be at all critical when you’ve done such a skillful job and I barely remember to close my tags :>)

    - Kachina-the-Lurker.

  53. @Kachina: Safari isn’t tripping, you are indeed seeing a round corner alongside an regular corner. I call that ‘design.’ :-P

  54. Good stuff, Stammy, good stuff.

  55. Love the changing tag line.

  56. I think it looks really great. The content is easy to read the the navigation is very clear. Great job.

  57. I just wanted to say that I really like this theme, while it is to bad the code will never be release but it has encouraged me to write my own from scratch once I graduate on Friday and get my life sorted out again lol. Good luck at Georgia Tech! :)

Post a comment, receive Stammy points.


Send a trackback.


  • If you plan on posting code, run it through Postable first.
Copyright © 2005 - 2008 PaulStamatiou.com  Privacy Policy - Terms of Service Can't spell my name? Use PSTAM.com. Go back up ↑.