A Tiny, Subtle Shift

As with anything that you do frequently, patterns emerge. Certain choices become comfortable, unrequired of a second thought. Such is the case for me when choosing colors for the web. There have been certain hex values that I’ll gravitate toward: #eee, #ddd, #ccc, #999, in the grey family, for example. I know what each of these will accomplish for me and how they play with each other before a stylesheet is created. I’m sure you have your favorites and old standbys as well. I fall into using and reusing these values because they work like a trusty wrench.

But it’s fun to cast those aside (at least temporarily), changing things by an extremely small measure. At times, it can mean all the difference in devising something fresh, new and different.

This happened while working on a recent project. Instead of combining my usual #eee, #ddd, and #ccc, I instead settled on combining #f5f5f5, #e5e5e5, and #d5d5d5. I know, this sounds completely trivial, doesn’t it? I mean, the difference is so damn subtle, it’s liable to go unnoticed by the average user, not to mention indistinguishable on varying screen types. And on top of that, they’re all far from being web-safe hues. But all that aside, for me at that moment, the slightest change made all the difference in making this particular project stand on its own. A temporary step outside the familiar — even if that step is purely the benefit of me, as the designer.

The main point here being: sometimes a tiny, subtle shift in the way you do things can be all it takes for things to seem new, exciting and right again (perhaps a micro-realignment?). This same philosophy can of course be applied to the non-web world. Just a few hours ago, Kerry and I were tossing around statements like, “we need a new house” or “we need to put on an addition”. Later, we started hypothetically shifting furniture around in our minds, and suddenly there was this renewed excitement in making something old, new again. A tiny adjustment that (for the time being anyway) quenches an urge for broad, sweeping changes.
Next week? I’ll be back to #eee.

Maybe.

30 Comments

  1. Dante says:

    I have to admit, these micro-redesigns and furniture re-arrangements are infectious. I recently moved around some stuff in my room and now it gives off a totally different mood. Maybe Feng-shui has a purpose after all…

  2. Nathan Smith says:

    The shift was so subtle, and since you didn’t mention it specifically, it took me a second to realize that you changed the nav-bar to blue and the sidebar h3′s to green. I like the change. I did a slight shift recently too, which only involved swapping out my body background image, and changing the header. It was enough to motivate me to write more. It’s the little things in life. I think you touched on a very good point: Rather than wanting more possessions, we can content ourselves with the intricacies of what we already have.

  3. Alex Beard says:

    … and I thought I loved the previous “alignment” (I think?). Regardless, it looks great Dan.

  4. Mike D. says:

    Whoa Dan, did you just say “web-safe”? I feel like I’ve heard that term before… I just don’t remember where.
    Along the lines of changing things up, another good trick is to deactivate every single non-system font on your system and begin activating ones you’ve never used before.

  5. Andrew says:

    It’s just like the That’s 70′s Show where the contractors move everything in the basement 4 inches to the left

  6. I don’t know if it’s the same for you Dan, but when we re-align our space, Sarah usually makes a tiny, subtle shift in the agreed plan that somehow makes it even better.

  7. Greg says:

    What’s this “non-web world” that’s mentioned so often lately? ;)
    I know exactly what you mean. I have my “familiar” colors as well, but sometimes I have to try something “new” :)

  8. Small Paul says:

    I reckon it’s like when you’ve been sitting in a chair for a while, and you need to move a bit to avoid fatigue. Staying still gets tiring after a while. Boredom breeds apathy. A small change makes you more aware of things, awakening your natural responses to change that produce energy to use when dealing with the new stuff.

  9. John Lampard says:

    Hey that’s exactly what I’ve been doing lately, taking familiar hex values like #cccccc and adding random-ish numeric sequences to see what happens, like #c1c2c3 and whatever. The initial result may be awful, but it gets you thinking.

  10. Alex Beard says:

    I just noticed yet another tiny change since the realignment: the fixed and fluid width buttons have had a little face lift. Nice.

  11. Oliver says:

    I’m totally with you. I feel the same way about how even the smallest changes can make a difference. Sometimes I’m working on a small detail, that someone else would probably not even notice – which raises THE question for me: am I obsessed and will only I see the difference, or is it truly obvious and will it (can it) be appreciated by someone else? In the end I tend to think more selfish and as long as it makes me more satisfied, I go for it: sometimes it’s really the ‘small things’ in life that can make one happy!? ;)

  12. Nick Toye says:

    I’ve just moved house and have spent literally days moving my furniture around in my head. In reality its more like that childs puzzle where you have to move one block to get to another.

  13. Brian Farr says:

    I quite like the change. I noticed right away the deep blue at the top, and quite liked it, and immediately aftewards noticed the rest of the changes. Very nice.

  14. Very nice site you have here, I had a look around and I think I’ll definitely be back to read some of your articles. Bookmarked!

  15. Nice post, Dan! (as usual;-)
    I tried to see how your example colors look as soon as I saw the hex values in your article:)
    (See live example at my future website)
    I simply applied the 6 colors to 6 floating DIVs and compared them side to side.
    The difference is, indeed, very subtle, but noticeable.
    The new color variations #f5f5f5, #e5e5e5, #d5d5d5, are very close to the “classic” values #EEE, #DDD, #CCC, but seem somehow lighter. So I see why you liked them:) And no need to worry about “safe” web values, with todays screens with 16’000’000+ colors (for the 99% of the web users), the term “safe web color” could be forgotten with ease:)
    Yeah, and about moving furniture all around the house/room/place, yes, this helps to “refresh” the whole house, to feel different, no need to go to the store and buy new expensive stuff:)
    Have a nice day, here’s sun and snowing (from time to time), ‘was a pleasure to see your 6 nuances of grey this morning:)

  16. I know the feeling. I fall into ruts all the time but I tend to make drastic changes rather than tiny, subtle shifts. Maybe that’s what’s wrong. :-)
    As for the furniture, sometimes just cleaning up does the trick. For me anyway.

  17. Mikhail – thanks for putting together a visual comparison! I really should’ve done this initially :-)
    As you can see, it’s so subtle — but just light enough to make a difference even when viewed side-by-side.
    Also, it’s funny when things come together at the right moment. I’d started the draft for this little entry prior to experimenting with different nav bar and header colors. These little changes were tiny and subtle as well, and it made perfect sense to do everything at once.

  18. Peter says:

    Never liked the green up there in the header. Not so much the color itself, but the green was attracting too much attention and chopped the top part of the page into pieces.
    During my first visits here I almost overlooked the orange/black header. With the new blue it’s a better flow, at least for my eyes.
    But I do miss the orange in the sidebar ;-)

  19. Fallout75 says:

    I like the subtle chances you made to your site, the blue is more refreshing and calming. I really love your work and your take on the “less is more” values. Keep it up.

  20. Doug says:

    I had the same kind of revelation a couple months back. However I started using both f1f1f1, e1e1e1 and also e5e5e5 and f5f5f5. Hardly any difference from the good old eee and fff, but made layouts feel different.

  21. eddmun says:

    I like the new blue look…
    I like #efefef it is *just* a bit darker than #fff so it can be noticed when in a large block (such as a background)…

  22. Oliver Zheng says:

    I’m digging this blue. It goes well with Christmas!

  23. soxiam says:

    I’ve been on the “one-off hex” kick lately. Particularly addicted to “#89a”, “#789″, “#567″, “#345″ combo at the moment.

  24. Dustin Diaz says:

    A designer always knows this:
    When you have a white room that has white walls, white ceiling, white floor, and a white door… then fill it with a red couch; The room is then considered to be red.

  25. Dustin Diaz says:

    Oh, And andrew, it was 2 inches ;)

  26. @Dan:
    Thanks, Dan:)
    Well, actually I thought I’ll see the visual comparison on your website itself, when I clicked on the full entry link… so, I had too see the six colors compared… setting the example was 5-minutes work, here it is :-)))
    I really like the new, “lighter” versions of the “Three Classics” #CCC, #DDD, #EEE, although you can probably see such small differences on good monitors. For example, I knew you have a nice background image only when I had a new 17″ LCD flat panel at my work… Even on my old Dell Trinitron at home, I am unable to discern the background on your website, it’s too dark for me, and it appears as uniform color.
    (So feedback from people with some older equipment is a good thing, sometimes;-)
    Nice point!
    Maybe we should also seek for something more fresh than the classic #666? ;)

  27. john says:

    duuuude! Mikhail Bozgounov.. something other than #666 (and trusty ol’ #333)?? anything else just feels dirty ;-)

  28. I agree with you Peter I to like the new blue header I find it much easier on my eyes as well although I never had the header chop up into peices like your screen.Cant wait to see next weeks post on eee.

  29. Rick says:

    I think it’s the subtle changes that make the most difference. I like the new feel.

  30. lennarth says:

    sure, but why aren’t the #colors a href’d?