Ever wanted to ditch what you’ve got and start over? No, wait a minute. This sounds like a broken record.
Ahem. Let’s try that again.
Ever wondered what your site would look like devoid of most of its color and imagery? Bleach the entire design, remove the saturation and leave behind the basic visual structure on a stark white background? Sure, some sites already use a white background for their design. But Stopdesign has been filled with deep colors and prominent header images since I launched this design a few months ago.
How ‘bout we strip away all that decoration and atmosphere? Temporarily. There’s something about looking at a design without all the extra layering of color and fancy graphic work. It allows one to see how much the basic form, structure, and proportions speak for themselves.
Or not, in some cases. Often, color and imagery is overtly used to disguise bad design. Take away color and images, and some designs fall apart. I wanted to prove to myself that this wasn’t the case with Stopdesign.
Nothing about the design changed position — aside from the slight adjustment I snuck in on the home page yesterday, giving more emphasis to the latest entry. Those who remember and liked v2.5 of Stopdesign, where I really did “start over” will note some similarities with this version.
(Ooh, hey, what was that little 2.5 link he just slipped in there? What? An archived version of a prior design? I didn’t know that existed. Hey, wonder what happens if I change the URL to see if v2 works? Whoah, he kept that one too! So, did he actually have a v1 design? Ouch, nice table-based layout!)
Bleached was a small challenge for me, and an excuse to further separate the function of different style sheets. One to control the basic layout, visual structure, and common design elements. Another to pump in color and imagery. With the advance prep work in place, the only change needed to switch to Bleached was to yank the @import for the color style sheet. When I want to return to the full-color design, I’ll simply add it back in.
I’ve been using a separate color.css file to control section-based colors for a while now (something I started playing with on Wired News).
But unlike Wired, until today, if you pulled out Stopdesign’s color style sheet, you would have been left with a color scheme that looked like the home page color scheme, since that’s the page I used to start authoring the CSS for this design. For Wired, I actually created a grayscale version of the design as a base. Then alternative color style sheets are added to create each day’s color scheme. They’ve never used the grayscale version. But it’s there, just in case.
And now, a bleached version of Stopdesign exists as a base. So poke around a little. Explore the untainted space. And if you miss the color and pretty pictures of the unbleached design, don’t worry. This isn’t a permanent change. If you do like it, don’t worry about it’s lack of permanence. A style-switcher will make it’s way onto Stopdesign soon, allowing you to choose whether you want the full technicolor experience or not.
The real fun will be my next challenge with this site: Liquid Bleach.
81 comments (Comments closed)
Freaky…I was here the second before you updated the look.
I hit the back button and thought my browser was busted until I saw the entry.
— C
holy moly, it still looks good if not BETTER
Freaky indeed… This design is very minimalistic, which I don’t dislike — I just prefer the coloured version ;)
If I wanted to view your site devoid of most of its color and imagery, I’d just press
Ctrl+Shift+D;)This is fun. CSS gives designers so much flexibility to beat the boredom. Let’s all bleach out our sites :)
So that homepage thing was fresh. I knew it. Didn’t think that homepage change was so new though.
Great to see that you keep your old designs online, I wish everyone did that. I always liked the white’n’bright feeling of v2.5, great to see that feeling’s coming back with bleach.
… *presses preview*
Hey, is the comment-preview page not bleached or did you already put the color back in?
Where are my shades? I think I’m going blind.
There is just something about a nice, clean, white site with little (or no) color on it.
It really forces the content to be designed well, since that is really what you are using to color the page now.
I have also used the seperate color.css file on a few sites lately, espeially ones that have the same structure, but different colors for different divisions. Works like a charm.
F5… F5… F5
What’s wrong here? This isn’t how this page looked yesterday!
Interesting - and stylish too. I do not know, but white and emptyness is such a powerful combination for me - like the ipod.
BTW: The trick to make a seperate stylesheet defining the color is very interesting. I often find myself digging trough endless lines of code, just to find the a specific place where I defined a color.
Way to freak me out… I thought something was wrong with my browser or my internet connection. I hit refresh like 4 times before I saw this article.
As for the look… I like the point you made but I like the old look better. This bleached look isn’t bad; it’s just a little blinding. Ouch my eyes hurt, got to go!
Beautiful.
I love the idea of separating the color style sheet from the main style sheet. This would also be a great alternative to those that browse with images off as well.
I like it, simple and I clean.
How much will it last?
hey, even without any pics, it still looks great. But more importantly, for me at least, is understanding how you build the architecture behind your sites. I wouldn’t have thought of using a different stylesheet for colours, but i can understand it. great idea. I also liek the idea of using the subdoamin, to specifiy which stylesheet to use. very simple, no cookies, no querystrings. great work!
White is so beautiful even though it is void of color. I really like the (temporary) change. Looks awesome.
This is a great illustration of how good a virtually text-only design can look. I bet it also cuts down on bandwidth. Perhaps after Liquid Bleach, you can do ‘Color Safe Bleach’?
I’m begining to think that maybe I should provide a “lite” version of all my CSS sites.
I think you may have started something here.
What’s eerie is that this almost resembles the new Whitespace design (coming soon). Great, now I will look like a copycat. Damn you Doug. Anyways, I will always appreciate white. It. Just. Works.
I just love that masthead in stark white. It really shows off that gorgeous new logo better than the darker colours.
Simplicity rules us all.
Content is king. I love it.
This is yet another great example on how CSS (and a rock-solid XHTML markup underneath) are a godsend for those of us with short attention spans in regards to design satisfaction in our own sites (and little time to spend on design iterations). Once you discover how much can you change to your heart’s content using only CSS, you wonder how were you used to do it before. I’m slowly but surely getting there too.
Muy bueno Doug!
Doug—looking forward to how this affects your usability in terms of layout (which is pretty sweet already, by the way).
Dumb question: what about the current design with colors? Is that going to be archived at, say, v30.stopdesign.com?
A few other experiments will happen while I have the design bleached. The full-color version will be back within a week or so. And as I state above, each version (bleached and technicolor) will be selectable by means of some type of style switcher.
Wow- I like it so much more this way, but I can tell from my recent attempts at a design, I’m not too keen on color- maybe I’m just horrible at choosing it is all, though. Heh, and this was, in my opinion, one of the most attractive designs on the web- and I think it’s better with images and color gone. Go figure.
I have been thinking this over the course of today, and we might see websites follow the course of book printing.
At one time every page in a book was full of color and ornamental design when printing first began, now we only see a nice throwaway jacket and mostly black text on white pages.
Maybe the web will follow…nice small colorful header and the remaining …black on white.
…mmm how revolutionary.
Wow - this looks great!
It’s interesting to note that you have chosen to retain some colour. I think it would work even better without the comments boxes being grey.
It’s surprising how it also looks like a whole new layout without colour! Especially the home page. That is a masterpiece of design. I’d say I even prefer it colour-less to the full-colour version.
Please don’t put the ALA Style Sheet Switcher by Paul Sowden on your site. The code used to create it has become outdated and it is not as accessible as a DOM-powered Style Sheet switcher could be. I have written my own but haven’t posted it on the net yet.
Wow, when I clicked on this RSS entry, I did’t even realize it was Stopdesign until I was halfway through reading your entry! Looks nice.
Very nice. I think the next logical step is a version that is completely white and you have to hit “Select All” to read it.
Scrivs, maybe your blog is more appropriate for such a treatment, given the “Whitespace” name. You could be the pioneer of invisible ink blogging.
I definitely like the re-arrangement of the home page. It feels less busy. My attention moves across it more smoothly. So, nice polishing there and the point about color and images distracting from structure is a good one. This is an interesting exercise. The only problem really is that I keep having the unsettling sensation that the next time I see you, you’ll have platinum blond hair.
I just think it’s great that even though you’ve stripped the site of “decoration and atmosphere,” it still has lots of both.
Just curious, Doug: When you say you use a different style sheet for colors, does that sheet include the colors for the text? The color of the main text now doesn’t seem to be a harsh black (#000). I’d like to do some work with different style sheets and am curious about how the text’s colors fits in to your approach.
Jeremy: I’ve never used solid black for the majority of body text on my pages. I think the majority of text colors are the same now, except for the portfolio pages, where I’ve obviously allowed the text to revert to dark on white backgrounds, like all other sections. I often use shades of gray between #333 and #666 (or warm gray, by dropping down the last digit, i.e. #443 or #665). Sometimes even lighter if it’s less important text.
Primary text colors are set in the base.css file. And if I ever need to override them in a particular spot on the page for a certain color scheme, I do that in the color.css file. Since the majority of this site (when in color) is dark text on light background, I usually don’t need to override it. Only in places like the footer, whose text always sits on top of a dark background.
Wow! This is amazing. Phenomenal work Doug. I love it. Very inspiring.
Interesting…very clean. I do like the colored version better though, it’s just so much more interesting and whole looking. Also, much more identifiable with the “Hey, this is that Stopdesign website” feeling. With all the white, it could be mistaken for any other website on the net at a glance.
awfully inspiring, doug!
just can’t help returning to the homepage and enjoy its transparent beauty.
the design grid is so perfect, the layout looks great even when you hit decrease text size three or four times.
being for no particular reason a liquid-layout fan at the moment, can’t wait to see the liquid bleach version.
thank you for sharing all the technical/non-technical details behind your experiments!
I love it Doug, very nice and clean….but I also love v2.
Anyway its a great experiment, and from the comments above it seems to have gone down really well
change it back or I’ll never come here again!
37. He has said a few times this is a temporary thing. He’ll dye the site again in its colours soon. :)
It is one thing to deliver such stunning designs with graphics and vivid colors, but to use the same layout without all the hoopla and still achieve the same result is astronomical. Thank God I no longer use Doug as a measuring stick to how well I am doing. He can’t be beat.
Oh by the way…. Very impressive Mr. Bowman.
Thanks Doug. Do you, or does anyone else, know a good resource for explaining how to use different style sheets effectively (and efficiently)? I’m fairly new to CSS, and I’m not sure I understand how to set up my site so that my second style sheet (color.css, for instance) would override the styles in my first style sheet (main.css). Is it the way you write/order the @import in the XHTML, or is it some other method? Any good tutorials out there for doing this?
Hey Douglas: Sorry for the Off-topic, But …How do you do to personalize your own comments?
what else can i say but wow? your site inspires me to try new things with my own. thank you. thank you. thank you.
Lovely design, this is. “Starting over” like I did myself, really gives you the opportunity to have a good look at the bare bones and the information architecture of a design.
I’d like to see more bleeching, just to make people aware of the total shite that is produced on the web sometimes.
Aha! We’ve got a trend here…Scrivs has mostly white pages, Andrei had for a while, and now Stopdesign (again).
You’re all just immitating me, of course, but for the greater good of design I’ll let you. (aren’t I nice? :P)
But seriously, it does really show in which places the design works or whether it needs more (or less) whitespace to work. Perfectionist as I am, I’ve already noticed that the right side of a story needs a tad more whitespace. v2, as I’ve noticed just now, had a lot more whitespace on the right and it looked terrific.
Also, v1 gave me hope, as I saw that even you have been strugling about what to write on the frontpage. You ended up, of course, having a blog in there. (which I wil have too, someday, but not too soon as I’ve got other projects to worry about)
P.S. I don’t know who said that the preview was still in colour, but it’s not at the moment.
Doug, to me you are “the king of colors” with such an amazing talent in combining nice colors, so this was kind of a shock to me :-) But on the other hand a very interesting experiment, and I must say your pages still look great. My guess, it’s because of the attention to details and the well balanced use of white space. But I think if you use different shades of color for each part of the page like you did in your color stylesheet, you get a better overview of things, especially on your homepage where you have the 3 columns. I love(d) those different shades.
I have a thing with colors, so I’ll be one of those who will not use this ‘Bleached’ version again, once the color version is back up I’m afraid ;-) Still, an amazing job here, the power of css yeah!
Looking forward to what you will “brew” next :-D
Love it. You astound me yet again Doug.
I like it clean.
(i use your minima template on blogger. Nice work)
Color is decoration. Save it for Christmas.
I actually did this a little while ago. It was a method I used to gradually build up a simple site. It comes in handy.
I hope you maintain this look in the future. It is nice and clean.
Before article » 5 hours and 17 minutes after.
:)
Inspiring, indeed! Keep this ‘stripped from graphics’ version for a while! I like it, it has its own charm! To separate colors from other parts of CSS is a good idea (I noticed you did it, when I studied your design structure a while ago, it is really complex!).
Keep up the good work! What you do is to the benefit of all the Internet, I believe! A day shall come, when the Web will be true Content separated from Presentation, and it will be available to ALL! :-)
I just noticed that the middle and right columns jump down the page when you roll over a link, such as the title, “Not WIN32 Compatible” in IE5. This happens on the home page. Works great in all other browsers. Thought I’d let you know.
Thanks for the excellent css, it has helped me understand layout using css.
Scott: I too noticed the weird jump in IE5/Win as soon as I made that change to the home page the other day (the latest post spanning the middle and right columns). I was seeing this exact same thing happen on my Portfolio pages for the first few days when I launched this design a few months ago.
It took a little bit of the ol’ process of elimination today, but I think I finally fixed the issue by unfloating the
#latestdiv that spans both columns. It doesn’t really need to be floated anyway, since it sits inside the#maindiv, which is already floated right.Thanks for pushing me to look into this more and get it fixed.
You’ve done a fantastic job, Doug. If you’d said a couple of weeks ago you were going to remove almost all the colour from the site, I’d have been shocked. But the site looks great like this, almost as good as the colour version.
The only bit I don’t like is the Header. There’s too much whitespace, what with the About, Events and Contact buttons still being there. However, apart from that, I’m shocked at just how great it looks.
I’ve spotted one absolutely tiny problem in Firefox, which you could probably completely ignore as it’s so un-noticable, but I may as well point it out.
Just above and a bit to the right of the words “Introducing Bleached”, below “Latest Thinking”, is a small grey line, about 10px in height, 1px in width. It’s the same colour as the grey line to the right of the Left Panel (you know what I mean).
Ok, Chris: It wasn’t just Firefox that the line was showing through, it was happneing in all browsers. Looks like it was that last change I made in comment 52 that allowed the column divider to show through where it shouldn’t have. So it’s only been since this morning that that little line was peeking out.
So I floated
#latestagain for most browsers, and unfloated it for IE5.x/Win.I like it. I kind of liked when you had the interem 2.5 version of SD up before your last redesign. I also like how you have made your current log entry take a more prominent position on the homepage, as I think it has the same effect of a news site putting one article up as a sort of “banner” article—it draws you in as something that is new and worth checking out.
Now if only I could get my own design working properly :(
I love “Bleached”.
Looks very professional.
I love this design approach very much! it is very scandinavian, simple and clean, like IKEA.
I wish you would leave it as this, and that the web start to be more minimalistic.
It is very calming and soothing to see websites like this. I even think it is too much text, that the front page should be less text.
I get happy, I feel bliss visiting websites like this. This kind of websites removes a lot of the background noice in the world, the white, minimalistic and clean design is wonderful. it is not boring, it is balanced dynamism.
Whoa, there’s an interesting experiment going on here, the “reverse wireframe” if you will. Wireframes are usually thought of as a design and IA tool used when building up a site, whereas here you’re taking a site that’s been built up and growing for quite a while (as personal sites do) and stripping it down. This provides a point of reflection for retooling the design and do the one-man CSS Zen Garden thing but I wonder, since it does reveal the IA/page structure as well, are you considering making changes to that? Like perhaps merging the top nav and the subnav (a bit more confusing to navigate when the other tomfoolery is added back in)?
Cool… but it just confirms my belief that white is just a bit too stark. My eyes are seriously burning right now. :}
Great experiment… look forward to the return of color.
(wanders off to find ibuprofen)
This design is actually really nice. I would say however that it is not as good as the coloured design basically because there is less to look at. I know, not necessarily a bad thing, just bare with me. If you are a regular visitor I would expect that the bleached site would get tired before the coloured site. Yep thats about as simple as I can get. It is however still a very nice design.
That said, after looking at your site I think I might have to revisit my ‘simple’ theme. I was going to remove/colourize it soon, however now I’ll see if I can’t turn it from boring into sexy minimal… I’m not sure if you are the one who wrote about every piece being a portfolio piece, if you did please don’t visit because while I respect that I really don’t follow it too well, ah online sandbox.
On a slightly different note. If you use the Web Developer Toolbar, I just recently discovered the ‘Display Topographic Information’ feature, I’m now thinking of creating a design along those lines, maybe you should check it out applied to your own site.
I like this version a lot. Maybe even more so than the original version.
I realize you’re not looking for suggestions to improvement, but I honestly think the only weak part in this “temporary redesign” and base stylesheet is the comments. The grayish backgrounds for each comment stand out quite a lot in contrast to the soft lines that frame the rest of the site.
I’d go for either _much_ softer gray backgrounds, or perhaps just a 1px border? Maybe nothing, and just flip-flopping comment number colors?
As I said before, I love “Bleached”. But now, you’ve run your experiment; give us the colors back! They’re so beautiful…
I love it!!! I know you stated temporarily, but perhaps you could give users the option of color vs. bleach. Thanks for all your work. I visit often and learn more each time.
I love the idea of the bleached site. It was totally inspirational to me and so I’ve started the resdesign of my site that I’ve been putting off for lack of direction.
Stopdesign is a site that I read and respect and am thrilled at the idea of virtually mentoring by watching what happens here!
Thanks!
Oh, so check out my site as I follow along:
www.softerware.net
Since being forced to spend most of my internet time on a 56k connection I have developed a new appreciation for sites that still work without images and are simply structured.
I recently designed by site and had much the same idea in mind of simplifying things to the bare bones. it was hard to resist adding a bit of complexity (read; fluff) but it’s probably going to stand up as a design for much longer.
I like it. I really appreciate the explanation as to why you chose to do a bleached out version - to put emphasis on the content. A very key point.
P.S. I do like the colored one better.
Thanks for sharing.
I think this is proof that there’s an inner beauty in your work that resonates even without extensive photoshop work.
Beautiful work, Doug. You make me want to quit doing web design. :)
gah! I announce that I am about to do exactly this and then you beat me to it. Now, when I finally get around to “bleaching” my bloated design, I will be called a copy cat…
I guess there are only so many original thoughts to go around.
Oh, and yes…I like this temporary look.
It’s like when Prince took the bass out of When Dove’s Cry.
It works pretty well for a specific effect, but I still prefer more color, overall.
(63) Scott B: They’ll come back soon enough.
(64) Christopher: Allowing users to choose which one they want is part of the plan.
(69) Lucian: I certainly hope I don’t make anyone want to quit doing design, :-) but rather, the opposite… inspire someone to do even more design, just like other great designers who inspire me.
And I can look at this site at my desk all day now, since it looks like work!
No more alt+tabs for me! :D
For what it’s worth, as someone who’s only recently found your site, inspiration to do more and better work is exactly what I’ve found. Thanks!
After reading about half of this article, I was hoping that we would be able to see the bleached version far into the future. I was hoping that once you returned to color, you would offer a way to see the bleach once again. And then I read about the style switcher. I’m SO glad you’re going to implement that.
And I can’t wait for Liquid Bleach!
Bleached shows just how good your basic design is and I love it! I only have one problem. In the process of convincing management that Web Standards can produce colorful and beautiful sites, I always show them Stopdesign. Now I can show them a lovely design with great structure, but until you add color again, I can’t wow them with all that color. The color pulls them in, then they see the great design.
For me I always look forward to going to Stopdesign.
i like it, but i liked the previous look - a lot. i’m stuck between the two…
KEEP THE BLEACHED DESIGN.
Now it is liqued… but I think that only creates too long lines. Margins are never wrong, The bigger screnn the more nice with margins.
Fix it back to fixed..
Actually Stefan, I beg to differ. I was always a big fan of Doug’s v2 design, and I really like the way “Bleached” looks even better for having gone liquid. Without the excessive white space to the left, both the three-column front page and the two column layout of articles feels immenently more readable.
Then again, I think you’ve hit the nail on the head in the good old “Liquid vs. Fixed” debate: I’m viewing this using Firefox on XP maximised to a 1024x768 screen.
Perhaps if I was sitting on a G5 with 30” cinema display and a 2560x1600 res, I’d have a different opinion. Ooh, that’d be nice.
Damn, this is a nice experiment alright, looks veri minimalistic. But the previous 3-column blueish design was SO AWESOMEEEE!!
Are you going back to it?
If not, can i have some screen shots of it? I simply loved it. It was brilliant!
White space. But, I’ll use ‘bleached’ if you prefer.
I like it.
However, not only does this version look like every other Movable Type site out there from a content layout perspective, but White Space in web design is not exactly a new look. 37 signals and Apple, among many others, have been using this layout look and feel for years.
Nothing brilliant about it.
Neither, for that matter are ‘liquid’ layouts. Granted liquid works much better in CSS than anyone was ever able to accomplish with tables.
In short, I was more impressed with v2. simply because it did not feel like every other Movable Type site out there even though it’s content structure was the basically the same.
Just an opinion,
-prb
Comments no longer open for this entry.