Welcome to Phase II of the new Stopdesign. Baby’s got new shoes. As if I weren’t busy enough as it is with current projects. For some reason, two weeks ago, I decided to start a full-blown redesign by yanking my own style sheets, encouraging me to do something sooner, rather than wait for a lighter workload. For those that count, this would be design version 3 (not counting the short-lived lightly styled version this one replaces). The most obvious change is the much more confident use of photography in the header, followed by a significant re-org of the home page.
Visitors will likely notice a few familiar elements and concepts in this design revived from the previous version. Once again, each section possesses its own carefully chosen color scheme, switchable simply by changing the class on the body element. The primary navigation recycles many of the same style sheet rules written for v2. Typography returns to the original combination of Georgia (regular-weight, never bold) and Verdana.
Certainly new for this design is the reorg of the home page, and the obvious deemphasis of the weblog there. Rest assured, the weblog isn’t going away. Nor does this indicate a desire to write less often. In fact, I’ve rejiggered the Log Archive page to serve as a replacement for those who come only for the weblog. This change in focus simply comes from the need to balance out the offerings of Stopdesign as a business, which I’ll explain in a later entry, already half-written.
Included in this redesign is a completely revamped Portfolio section which makes heavy, heavy use of Brad Choate’s MTKeyValues plugin for Movable Type. In fact, an average piece in the portfolio (comprising of a single entry in MT) with two or three larger-size previews makes use of no less than 21 separate key/value pairs just to generate all associated pieces of content and meta data.
Aside from the changes to the home page and Portfolio section, other interesting bits for this design include alternating background colors for comments, (via a simple PHP variable that toggles back and forth and writes a class to every other comment), exposed company-related navigation that sits in the markup just before the footer, yet gets pushed to the top of the page via absolute positioning, and fixed-width 2- and 3-column layouts that can be toggled independently of the color scheme (via a similar ID-change method).
Over the past few weeks, I’ve given significant attention to improving the search results for much more of Stopdesign’s content. In addition to the main weblog, searching will now return results from Recent Links, Articles, and the Portfolio. Because of the increase in utility to both site visitors and to me, the search form is given more prominent placement on many pages, and will probably start showing up on a few more as I have time to add it in. The results page is now served up within the shell of my own crude templating system via PHP’s virtual() function.
I could probably say a lot more, but at this point, I just want to flip the switch on my style function and get this design live. I’ll share more in future entries. There are a few CSS-related issues I’m aware of in both IE5.0/Win and IE5/Mac that I need to take a look at later. But most everything should be working and displaying properly in the majority of modern browsers. I’ll leave the rest for others to explore and [hopefully] enjoy. As always, feedback and critique are welcome.
Posted in Business, Design, MovableType, Site
142 comments (Comments closed)
Looks great… I love the texture.
You do have some extra html-encoded spaces in the comment/permalink.
Absolutely stunning, Doug. As a long-time reader that’s never posted, this is quite the visual treat.
Congratulations on a great new design. Looking forward to reading more about your thoughts behind this.
Also, I don’t know if you’re aware of this - but clicking the “comments” link from the main page results in a 404.
Just awesome! The new front page is especially visually appealing as well as all the new graphics. Just awesome.
Oops, you did it again! ;-)
It looks really good, quite impressiv.
BTW: Maybe you should protect your directorys with htaccess.
…wrap/stop/…
Certainly I have been expecting anxiously for Phase II for about 2 days, since the day I saw those red letters at the top of the site telling us the site was under some major redesign.
And now that I can finally see the new Stopdesign I can say that I love it, the use of the old but already familiar elements in combination with the new colour schemes and beautiful banners makes me enjoy my visit even more.
Good work Doug!
Very slick! I’m seriously impressed. The quality of your work just keeps getting better and better.
This is awesome work. Personally, I think the brighter sections of the site look the best (must be my uncalibrated monitor.)
Really like the photography. Is it your own, or stock?
All headers use my own crude photography, except for the header in this section (the Log Archive) which is a stock image. In some future post, I’ll reveal the original images used for each header.
Well done! Please give some attention at the ‘continued’ link at the front page, they all link to ‘stopdesign.com’
Am I allowed to use the phrase “shock and awe”?
This design is truly amazing. I am seriously struggling for words (unusual). I can tell that I’ll be going over your code for weeks figuring all this out
(Oh dear, I’ve become a fanboy…)
Really awesome and holds much tighter character than the previous one. But simply awesome.
Excellent work! Beautiful redesign. Looks and feels comfortible and inviting. Congratulations!
I’m not entirely sure what to think. The “log” striped background doesn’t do it for me, but each to their own I guess - espeically on a personal site. However, the photographic heading banners on the top of each page are really very stunning. Great work there!
As for the “portfolio” and “experiments” sections, they seem a tad dark for my monitor’s awful gamma callibration - especially with the former page. The other pages look great, and the new layout of the “home” section is brilliant; something I’d be thinking of doing when/if I ever get around to popping my own design-related blog on the web.
Besides the small letdown for those with poor gamma, the new design is really nice. Keep up the good work.
Man, this is so damn beautiful This is a great example of utilizing multiple CSSes to create different, yet simmilar and visually appealing sections. Each new page is a treat and a surprise around the corner. Cheers!! I have definitely learned much from your “design on the fly” process through the past two weeks.
Oh, that’s absolutely magnificent.
I just spent 20 minutes browsing your site (particularly the portfolio), having a good time admiring the visual presentation of it all. Very nicely done, Doug!
Looks stunning! I really like the new layout. The colours you chose are wonderful.
Love it. You continue to be an inspiration.
Wow, nice redesign. It looks new but still familiar, well done. It’s so good that it still reminds of the ‘old’ design.
The colors are very pretty. The header as well. And I like the way the comments are displayed in switching colors.
Very, very nice.
Quadratisch. Praktisch. Gut.
+ Beautiful.
V2 was one of the best designed websites ever. Its one potential for improvement? Centering the content…
V3 feels both refreshingly different and familiar at the same time. The colors, typography and graphics relate to the previous version, yet work harmoniously together to create something more than just a “tweaked” appearance. The new photos in particular are stunning: powerful, dramatic even, but without stealing attention from the content.
I also like how the date is displayed just above the post title.
But how do you handle long titles? You have a pretty big font up there (which looks fab): are you okay with occassional line-breaks or will you try to keep the titles short?
If there is one thing I don’t “get”, it’s your comment in the previous post that Georgia had started to feel “pretentious”. Could you elaborate on that, and on why you chose to keep it?
The comments look and work great too. Alternating colors are a great visual aid for scanning. Is the use of definition lists new? It’s an interesting approach.
Congrats!
I forgot to mention the front page. It really pulls you in and makes you want to explore the different parts of the site.
There is a lot of information, but you have managed to keep it well-structured and visually balanced, resulting in fast and easy navigation.
Wow, beautiful work. The homepage, as Lars mentions, really does pull you in.
My favorite header.
One little thing.
A previous (v2 i think) version was
less chaotic in my opinion.
You’re very good in I.Architecture,
but this time I think was impatient
to give a new look of your site.
Hovewer it’s beautiful work which
is for me a great inspiration.
dominik/Poland (sorry for my English)
Blown away Doug. With Stopdesign holding so much archived info, I’m sure it was a nightmare logically ordering everything, but you’ve definitely carried it off in style. The colour schemes keep things fresh as you move through the site, and the contrasts are bang-on on a laptop screen. Congrats. A+
Simply gorgeous… great work!
Normally I refrain from “me too” posts, but I have to say that I am absolutely blown away by this work.
It shows exactly why you continue to be an inspiration to me, and reminds me why I got into this game in the first place. (unfortunately I got too deep into the game and haven’t had the time to actually work on my own “holding page” of a site)
So I guess this is a big congrats for your amazing re-design, and a thanks for all the well-written commentary and much-needed inspiration you’ve given me over the years. Much respect.
I’d humbly like to offer to buy you a beer when you’re next in Sydney, Australia. By all accounts you’re more than deserving.
I really like the new design overall. But (sorry), I don’t like the individual styles given to each section (e.g. portfolio vs. log). The differences are too great and make for a jarring user experience as you navigate the site.
Wauww, as (also) longtime reader I can only say wauww :-))) again. Truly inspiring, beautiful and well… still one of the few true benchmark sites out there.
Please, please, please come to Europe (Denmark)and make the web-workshop to end all web-workshops, seriously.
Nice weather in Denmark in august and september ;-)
Since you’ve announced that you stripped all your CSS, one thing came to mind… “He cannot resist to stay on this ‘clean’ layout!” ;)
When I saw the red note and broken header, I’ve been checking the page constantly and since its here now…
It blew me away!
Congrats to the new design.
The biggest difference for me is that now the site strikes the right balance between Stopdesign the business and Doug Bowman’s blog/personal site. Having the business-related links along the top of the page, and having all the pages in that section retain the same color scheme, is a nice addition.
Beautiful use of color.
Two things:
1. This color scheme rocks. Slick selection of colors.
2. I’m not always a fan of the 3-column layout, but you worked it out wonderfully here. Easy to read, well organized. Well done!
Truely awesome work! Cool, calm and collected… a stunning peice of design. Well done.
Incredibly well designed. Your portfolio section is very smart, as is the rest of this site.
I am in awe. I was seriously impressed by the page I entered (the archive page). I thought to myself that you had done yet another awesome design. After having read the comments, and checked out the other pages, I’m at a loss of words… You’ve done an incredible job with the entire site! I don’t think beautiful even describes it. Well done. WELL DONE! :-D
Wow, I like it. Great alternating colours on the comments. I love the use of 3 fixed columns on the front page. I don’t know how you do it, but this is all very professional. (My only concerns would be the “seealso” word - odd - and that there are two lines of navigation links (above and below the header) which people might find confusing, plus they are styled differently.) But I am nitpicking! Great new design Doug!
I like this new design except for two pages:
portfolio and experiments
They are so dark it makes them unreadable. Why are the colours like this.
I also notice throughout your site that you have used text in places which is barely readable against the background.
Both these points affect the accessibility of your site.
Noah
^_^
stopdesign +1
Really nice design!
Wow, Doug! *Really* really nice! The colors work perfectly together. I like the heavy use of photos in the header, because it’s well done.
I really am taken by the 3-column equal look on the home page. I think it looks great, and it works really well for your content. I don’t think everyone could pull it off, but it works here perfectly.
Once again you’ve sent me crying to the design-woodshed - you bastage! ;)
Tom
i love it. the colors are great, the layout is great, and the portfolio is awesome. great job!
The differing visuals at first click was at first a bit shocking, but then interesting - forced me to keep clocking to see what other surprises were in store.
You might already be aware - as you hint in your post - but in IE6 / WinXP, the footer pops upward after a few seconds in the portfolio section, blocking the links to view larger images / animated sequence.
Otherwise, very refreshing with the style changes throughout.
This new design is stunning. I just have a complaint : the blog seems squeezed. I know it has to be 1024x768 but let the blog breath ! :)
Good job.
Personally, I love that is is simply a (big) evolvement from the original StopDesign. The connection with the old is extremely profound, yet the new design forges info beautiful fresh territory.
And, the alternating comment colors here rock. Color scheme in general rocks.
Great design as always.
I noticed a bug with IE5.0. The logo and main navigation elements sometimes drop down couple of times per height of their elements. This is most noticeable in the protfolio section.
I was just debugging one of my site with same kind of bug in IE5, so i noticed this. If you find the reason and the solution I would greatly appreciate you telling about it.
You have a fine sense of colour, with the exception of those two dark pages.
Makes 3 columns look trendier than a drop shadow :)
Well done.
As usual Doug, you’re a shining light.
The new design is visually appealing, and the new front page is extremely well-structured, in spite of the volume of information.
Not that there was anything wrong with v2, mind - still one of the best-designed sites I ever had the pleasure to visit regularly. Changes & holidays, and all that jazz…
If I had to be uber-critical, I’m unsure whether the split navigation in the header is intuitive. I’m also increasingly questioning the value of using the old MT calendar to browse archives (nonetheless I’ve still got one myself!).
But enough of that. Great work. Makes me want to Stop(and Re)design myself.
*Picks up jaw* My first reaction on the main page was Oh mijn God (which is Dutch for Oh my God). I was even more amazed when I eagerly started clicking around and noticed the design is very page specific, and yet keeps a level of maturity and identity.
Sincere congratulations as I think this design really stands out above the rest.
Nice and consistent. Good work!
Well, the design looks nice - bit it seems you have been hit by the same ilness as the many other designers - too low contrast.
I also preferred the white background of Phase I, this designs looks a bit too heavy for my taste.
You may also consider changing the “seealso” to “see also”. It worked when you had part of the word highlighted in the original design.
But, as I said - nice design. And, I especially like the Home page layout.
I think the new design is pretty darn sweet!
As many people around the web have said recently, it seems to be the time of year where everyone redesigns their sites…and you did a helluva job on yours.
I want to tell you the same thing the other 48 posters said, and that is “Nice work”. I’ve seen your site and read your blog and certainly learned a ton o’ ish from you and am very grateful.
I can’t sugar coat anything though and I feel it is important to be honest. I don’t like the inconsistency between the different sections. And I don’t mean the variation of header graphics (nicely done) or 3 columns on main page (nice info organization) vs. 2 columns elsewhere. I mean the navigation variations and what appears to be all black backgrounds and columns. The portfolio section, though it has amazing content, is so dark and appears to be all black. The text breaks almost give it a few columns but on your other sections you’ve got hard structured columns via colors and dotted borders.
I am not saying it looks bad… just seems very inconsistent with the rest of the look and feel and warmth of the site.
Can you speak to your feelings on the color choices and darkenss of the portfoilio section and experiments section?
Thanks and again… these are just my observations.
Best Regards,
Steve
Love the colour scheme in the ‘see also’ section :)
Absolutely beautiful, I particularly like the color scheme and the 3 column layout on the home page.
Love the three-column thang you got goin’ here, Douglas. Beautifully executed. Only complaint is the Portfolio section — I kept waiting for the background to load… but then finally realized there was none (dark bg). That and Experiments don’t seem to flow with the rest of the site.
fricken sweet. As nice and simple as the last intermediate design was, this just looks fantastic. The home page does come across as more professional and will no doubt help to improve the impression clients get when they see it. The colour scheme is very clean in this section (as others have said, other sections are a little dark) but the photography used in the header adds dimension to the site.
Keep up the great work.
All welcome V3!
I do like the new version of the site, although I thought that the drastic differences in each section made me double check to see if I was on the same site.
I am really blown away by the new comments section, I love the cleanliness of it, and the soothing colour scheme. As usual, good work!
The site looks great Doug. I really like the previous version but this raises the bar even further! I do prefer the lighter schemes though.
I agree with everyone else, home page is beautiful. It was a pleasure cruising into this design while i was on my daily blog reading.
I’m guessing you fixed many of hte previously noted “errors”, because everything seems 100% solid from my computer.
Keep it real Doug E Fresh.
Great looking site, Sharp and to the point. Great combination of a portfolio and a blog in one.
Question: what is the small number (689) in the right column under recent entries?
Looks great, really good job of sorting it all out. My only complaint isthe blog is way to compressed on the main page, what width is it? 200px :-/
Everything they said from me too. :]
Wow, I’m blown away. Tremendous work, Doug. The color schemes for each section look great, particularly the Portfolio and See Also. Heh, and I thought the Blogger redesign looked good.
How beautiful,
the pages that are served,
the words and the text,
and the colors are merged!
As he laid down his design,
we offer this sacrifice,
that we shall code,
just as he did.
Willing to pay the price?
How beautiful, beautiful,
is the body of HTML!
now this is what i’m talking about. fantastic!!!
I’m having issues with IE6 in the portfolio section - when viewing designs, the section get truncated when hovering over the thumbnails.
Niggles aside, this is a fantastic redesign. I’m bowled over by, and extremely jealous of, your design skills.
This has come together so well, the colour schemes are fantastic, the typography is superb and the design has that ‘x’ factor.
inspiring. like many, i too, was awaiting the new design and i wasn’t disappointed. just beautiful.
Wow, very nice Doug. The colors are great.
You’ve outdone yourself, Doug! This is beautiful! I was rather enjoying the loose, ope feel of the “slighty styled” version and was sort of hoping you didn’t come back too over-the-top with the redesign. You nailed it. Love the colors, the textures, the new graphic work — everything. Great job!
comment text deleted… great work!Nice. Two things bother me:
* It reminds me of one of the new Blogger templates for some reason
* Your CSS doesn’t validate
I love it! You da man! My absolute favorite re-design of the past few months. Your work is always inspiring Doug.
You know, I am kind of sad, you have been able to pull off what I had thought about pulling off. In designing my new site I choose colors that are very similar to the ones you have selected, and I just couldn’t get them to work.
I had to use several themes to get all of the colors in that I wanted. How you were able to get all these colors together, and not make it ridiculous makes me highly jealous.
Anyway, I love the new design. It is by far the best redesign of any site that I have seen in sometime.
Wow, Doug. It’s absolutely stunning! Stopdesign was always one of my favourites when it came to snappy designs, and I must admit I was a bit sad when you shuffled it off so suddenly. I’m eager to get my lunch break and peruse the site now to see what other little touches you’ve added!
Love the 3-column start-page, by the way!
Delicious - I’m stumped as to how you make the logo change colour from page to page. Fantastic work but you need to chill out, you’re setting the bar too high for the rest of us!
Wow. Can I start my comment with that too? Except that my “wow” is here for a different reason.
I guess this is what I get for pulling an all-nighter on Sunday night, launching the design at midnight last night, then finally retiring to get some sleep: I wake up the next morning to ~60 more comments.
Thank you, everyone, for the feedback and kind words so far. The response is fantastic. Those who’ve shared their dislike of certain features, thanks for your honesty. Those who have pointed out broken links, I think all of them are fixed. Now to answer a few questions as I can remember them…
1. Gamma: Several folks commented on gamma settings and the darker Portfolio and Experiments sections. This was certainly something I was aware of as I was creating each of the headers and chosing color schemes. Initially, both those sections were even darker, but after checking them on the PC sitting next to me, I brightened both of them up considerably. The problem is that we have very wide extremes for which to account when it comes to gamma settings and values. On a Mac, those same sections look a little more “washed-out” than I’d like, because I lightened them up so they wouldn’t be black on a PC. Unfortunately, the differences in gamma are even more noticeable when using photographic imagery, because our human eyes expect to see more variation in value and contrast. I think flat colors (as in the old design) and image-free headers wouldn’t have made the gamma differences as noticeable. I’ll take another look at colors later. But those who think certain sections are too dark, try looking at the site on an alternate platform. Depending on monitor calibration, and whether you’re viewing it on a monitor or laptop screen, you’ll most likely see major differences between Windows and Mac displays. Something we, as designers, have faced since the beginning of web design.
More answers in successive comments (to keep them chunked in these new alternating colors!)
I’m a little late to the party, but I wanted to say I really like what you’ve done with this Doug. The layout it nice and easy, and not so unconventional as to be unusable or too much of a jarring change. And the colors are fresh, different and carry a very distinctive feel that I really like.
Very, very nice work man!
2. Type: Lars (#19):
If there is one thing I don’t “get”, it’s your comment in the previous post that Georgia had started to feel “pretentious”. Could you elaborate on that, and on why you chose to keep it?
I may have been a little over-zealous in describing the use of Georgia in my previous design as “pretentious”. I think my dislike of it (or boredom with it) in the previous design was due to the small size it was used, and that it was often bold. Georgia, at a small size, and set in bold text just doesn’t look very attractive to me. At least not anymore.
However, I do like Georgia as a choice for larger type, and at it’s regular weight. The serifs have a little more room to flare out, and the letterforms don’t feel so contrived and squished.
While I like Trebuchet in some instances, after seeing it on Stopdesign for two weeks, I quickly grew tired of it. Thus, the return to my original Verdana/Georgia combo.
3. Navigation: Chris Hester (#35):
My only concerns would be the “seealso” word - odd - and that there are two lines of navigation links (above and below the header) which people might find confusing, plus they are styled differently.
I just changed the navigation so that See Also is now divided by a space. I don’t like the look of two words for a single nav item, but I agree that it reads easier and faster, especially since I’ve restyled the text to be all lower-case.
On the two lines of navigation: They’re styled differently because they are different. The line across the very top of the page is company-related navigation; each items points to a single page. I wanted it easily accessible for those looking for the info, but wanted it pushed out of the way so it didn’t interfere with the primary navigation items below, which point to whole sections of content, and are used much more frequently.
Absolutely love the color schemes.
I do realise the attempt to distinguish between the different “sections” of the site. The variations in color schemes would have done that…but the variations in layout add to a feeling of inconsistency throughout the site.
The different “sections” dont look part of the same site…I dont know if that was intentional though.
4. CSS bugs: Lasse (#44):
I noticed a bug with IE5.0. The logo and main navigation elements sometimes drop down couple of times per height of their elements. This is most noticeable in the protfolio [sic] section.
Yes, as I stated in my original post, I’m aware of a few CSS bugs for IE5.0/Win and and several for IE5/Mac.
The way the content jumps down in IE5.0/Win is very annoying. It’s fine in IE5.5 and IE6.0. I tried everything I could think of, but couldn’t find a fix for it. I first noticed it in the Portfolio section when mousing over the square thumbnail images. Bizarre behavior that I don’t have an answer for yet.
A similar problem is happening on IE5/Mac. Mousing over certain links on the page makes content start jumping around. Columns suddenly get change dimensions, and everything goes wacky. I’ve seen this problem before, but have no idea how to fix it either. The problem is most pronounced on the home page, where hovering over the multiple links takes its toll on the three columns.
If anyone knows of a fix for either of these two problems, please point me to it.
Hey Doug,
Great job on the redesign. Very impressed. I posted over at www.sitepoint.com, but I am also impressed at your form validation on the contact page. Seems easy to do, but you just never see it done, and in fact, it was a first for me when hittng that send button just to “test” your form :) No harm, no foul.
When browsing the pages from your TOP TOP links (i.e; About, philosophy, etc…), I am a huge fan of that color scheme.
However, I am not a big fan of all the different color schemes one has to go through when browsing your different sections. I feel that could be confusing, but that is just me. Like somoene already posted, its your blog, its your soap box, so preach on brotha…
I am still digesting the thin Content section of your homepage. I can’t quite figure out if I like it or wish it was wider. I feel like more attention is given to the side columns, hence, taking away from your “content”.
Anyways, great job and I am pressed with several features, even the on this form box I am typing in, how you added a HOVER to the Label of Remember me, Don’t Remember me. Very slick.
Good job!
I really like the new design. Clean nice and the new header is really good too. Keep up the good work.
Beautiful.
I’m buying you a drink, sir. A good drink.
Congratulations. A stong bold step. The color choices are beautiful.
The navigation background change is very elegant.
The only thing I don’t like is that I wish I had done this myself. I can’t wait to see the first rip-off to surface. :)
Great - Love it :)
Interesting and very strange recation to hovering over your 25px buttons on your portfolio page when viewed in IE5/Win.
When you hiver over they break a line down everytime.
Not sure why but I note you mention some bugs :)
All the best
Karl
Blake (#59):
what is the small number (689) in the right column under recent entries?
It’s the MT post ID for that entry. I reference the ID when creating automatic links to other entries. That way, if the post URL ever changes (hopefully not, but you never know) the automatic links in all my other entries will be updated to reflect the new URL.
Once again, Brad Choate to the rescue with the MTMacro plugin for MT. I have a template module created where I’ve defined a new MT tag I can use, which I named “elink”.
So whenever I want to link to another entry within the system, I just need to know its ID in MT. I surround the text I want to link with
<elink id="689">link text</elink>(for example, to link to this entry), and the link is automagically generated, along with a title attribute containing the entry date and title.At the time I started doing this, placing a small almost-invisible number in the right column was the easist way for me to check the entry ID. Now that I think about it, it could just as easily get inserted near the top of the markup as an HTML comment, and I could just view source to grab the ID.
Josh (#70): * Your CSS doesn’t validate
I find it ironic that Josh pointed out my CSS didn’t validate because of one little percent sign I accidently left off a width value, yet the link he used to point to the validator introduced 13 XHTML validation errors for this page because the ampersands in the URL he copied and pasted weren’t escaped.
I cought the omission in my CSS file, and fixed it, so the CSS here is now valid. But now I have to go back in and fix the URL in Josh’s comment.
Type: Doug (#77), in response to Lars (#19):
“Georgia, at a small size, and set in bold text just doesn’t look very attractive to me. At least not anymore.
However, I do like Georgia as a choice for larger type, and at it’s regular weight. The serifs have a little more room to flare out, and the letterforms don’t feel so contrived and squished.”
Thanks Doug. Yes, that makes sense, and I agree with your reasons for keeping Georgia. It looks great at the larger size you’ve chosen.
Oh, yeah, Lars, also forgot to mention that I love the look of old-style numerals — another reason for going back to Georgia.
Hey Doug, how do you do it ? Once again you prove to me that you are the top of the list when it comes to modern web-designers/developers, which might seem a like heavy compliment to some because there are some talented people out there.
Visually I have seen better, programmatically I am sure there is better and HCI/Accessibility wise there is probably better. HOWEVER nowhere combines all of those things done to such a high standard like you have done for some time now.
In response to Doug (#89):
Ah, I was actually going to ask about that, since I noticed you use it for the comment numbers as well.
Yes, Georgia is an excellent choice for numerals, and a long-time personal favorite of mine. 6 and 9 look particularly beautiful together.
For my latest redesign, I just had to keep Georgia for dates and comment numbers, although it doesn’t look that great with Arial, my new header font.
But the size is crucial, as you pointed out, especially on Win-displays without ClearType.
Bah! Just when I was getting used to the open, airy-ness of the last design.
This version certainly draws you into the pertinent parts though. The Stopdesign philosophy and portfolio are much more prominent; important things for a potential client to see.
If you plan to make any more changes though, may I suggest giving a bit more home page real estate to the “Behind the Scenes” column and less to the “Elsewhere” column? The ‘blog gets overwhelmed by the other stuff on the page because they’re all the same width.
If you happen to be viewing this page with the most recent style sheet cached in your browser, no doubt you’ll notice that I’m playing around with my own form of comment highlighting. (If you don’t see anything different about my comments, try refreshing the page.)
The idea of highlighting my own comments is stolen directly from Mr. Shea, though I suspect we differ quite a bit in how it’s implemented. The only comments that will get highlighted here are my own. No ranking system will be put into place.
This isn’t intended to be egotistical, and it’s not added for my benefit. Rather, quite the opposite. It’s added to help others when scanning through the comments so anyone can see when/where the owner/author of this site (me) added a comment or responded to another comment or question.
Helpful? Too much emphasis? Just enough?
I love it.
I loved the old Stopdesign, and I loved the temporary blank design, but I think this one surpasses both.
Congrats!
Congrats on your redesign. I think it is nice and carried through with an eye for detail. Not groundbreaking though (as is your Adaptive Path design, at least in my point of view :-).
As for the jumping around of content: could this be an occurence of the Peekaboo bug? I know this particular bug has more to do with floats, but you never know. If anything else fails, try specifying ‘line-height: 1em;’ for every single div where that’s missing. ;-)
I’m sure I will revisit every now and then to see what you’re up to.
Oooooh, it’s so great. I definitely prefer the lighter colors schemes over the dark. Amazing work!
This is gorgeous. Stunning.
For those still following along, I’ve extended the header on the company pages (About, Philosophy, etc.) to reveal more of the image. The header on those pages is now the same height as on the home page. You may need to refresh again to grab the new image and CSS to be able to see it as intended.
The reason I’m doing this? Now that I’ve seen them all working together for a day, the header on the About page is probably my favorite, but for reasons I won’t discuss here, I chose to use an alternate image for the home page. Now I’m considering switching the two color schemes and associated images so that my favorite is on the home page.
That design sure rocks :)
I love the new site Doug, however I am definately not feeling the love of the changing background colour from different sections of your site.
In sections where you are using white text on a black/dark background, in my opinion that doesn’t work very well. It is generally too hard to read I think.
My suggestion, would be to alternate your header graphic in each section but maintain the same colour scheme. It’ll make your site feel a whole lot more cohesive, as at the moment I think the different colours are making it feel disjointed and sort of ‘thrown together’ in a sense.
Other than that though, geogeous.
Not many sites use a black background these days, for the contrast / legibility reasons presented by many above. In my eyes (and on my system) the darker schemes have more emphasis, as i’m sure is the desired effect, but text the central column on the folio page seems to blur from excessive contrast. Aargh, my eyes!!
Perhaps this could be eased by using a slightly off-white text colour? Or not emboldening? Or embiggening? Someone wrote about this recently, but i can’t remember who..
The best element of Dave Shea’s comment highlighting is definitely the author highlighting. I find your implementation very effective for scanning through posts with lots of comments, like this one!
I noted that your first few comments were odd-numbered (#9, #75, #77) and then you said:
“More answers in successive comments (to keep them chunked in these new alternating colors!)”
I thought this meant you were only adding author comments in odd-numbers, so that your highlighted comment colour scheme matched the alternating teal and blue. However your dedication to the balance ran out, and you went even! (#78, #80, #86, #98) It’s all out of whack now! ;-).
Thanks for your expose and great work with this design, I look forward to your further tweaks as this design matures. And it’s refreshing to see some people investing in more MT development isntead of jumping ship.
Sssweeeeeeeet!
Dang. I really wanted my commment to fall in the sub-100 range, but that’s impossible now - all thanks to a brilliant redesign that may have rendered people speechless, but certainly not comment-less.
Really it’s all been said before (101 times), so inevitably, my comments are going to sound like this: “…blah, blah…nice colors…blah, blah….great images and comment section…blah, blah…excellent way to bring focus on your business…blah, blah, blah.
In short: well done. CBS should consider casting you in a new fall show called CSS San Francisco. Speaking of which, is that the Bay Bridge on the Log page?
Doug, as Jason K and all the others said before, the new redesign is great.
I’m only commenting because I really like the way you’ve highlighted your own comments. It makes it really easy for me to scan down the page and pick out what you’ve said.
No offense to everyone else but if I read every single comment listed at every blog I visited there’d be no chance of me ever seeing natural sunlight.
What a wonderfully stunning design. I’m impressed with the colors you chosen, the good contrast on most pages, the photographic headings and I even like your version of comment highlighting which is subtle. Like others have commented, I find the darker Portfolio pages hard to read. Your designs are defintely an inspiration.
Thank you.
Absolutely stunning.
How sweet it is.
Sweet sassy molassy! That is a fine redesign you’ve got there. If you don’t mind me asking, what are you using for the graphics creation?
A job well done. Kudos.
Hi Doug,
Earlier Imentioned the IE5 weirdness with your web interface of your portfolio section, especially the mouseover images.
I had a similar problem and the only way I was able to fix the problem was to use the ‘Mid Pass Filter’ and specify a width. So maybe on #portfolio #mainhead a width might help for IE5.
It worked for me, don’t mean to say it will work for you though :)
Still loving the site.
All the best
Karl
I love it!
It’s different, cool, catchy, beautiful and so many other great things.
I loved the old design and I love this new one even more.
Great work :)
traditional but a good r…carried out
good continuation
Stopeffect !!!
Inspirational!
Great going Doug! I love the header graphics and the colors! The fonts, the colors and the graphics are not your everyday combination, but it looks catchy and fresh!
You’re probably already aware of this - and one of the 113 previous comments may mention it - but IE running on Mac OS 9 screwes up the spacing, lists, and margins in the right-most column.
As I said before though, I love the new design.
Late to the party. Just wanted to add my thumbs up! Cool highlighting effects too (makes me wish I had more spare time for tuning my own MT blog…)
My thoughts on the new design. Thanks.
as expected….beautiful work. just curious about what influenced your decision to go from liquid back to fixed?
Nice redesign Doug, but everything on the home page feels equal. Body copy sizes are the same, headlines are essentially the same. Surely somethings are more important than other things, aren’t they? Don’t be afraid to emphasize.
Further to what Karl B said, IE6/Win also reacts strangely when you hover over the icons in the portfolio section. Before hovering | After hover (images heavily compressed). Hovering over the “Portfolio” link above the Categories list rectifies the problem.
(A) yowzas! 99.99% Utter Awesomeness. I literally caught myself grinning in admiration as I just poked around the site — tickled by a lot of the details. like the teensy 3-D shadow that i swear i spotted on some button rollovers… fantastic. colors are great IMO, i fancy the darker pages best.
(B) the 0.01% of (hopefully constructive) criticism i might offer: there’s something about the search box on the frontdoor that doesn’t entirely work for me: maybe it’s that the beige ‘recent log entries’ seems more attached to the search widget than the log text below. (one could even argue that ‘log entries’ is an extraneous header: there’s already so many clues for today’s web audience that those entries are ‘blog-like’… from the ‘continued>>’ text to the ‘log archives’ link.)
oh, and the abstract header graphics are beautiful indeed, but they lose a hint of personality (or person-ness) in elements of the old design: the ‘HILL’ street sign, the other little glimpses of SF. maybe it’s just ‘cause i’m a former Bay Area resident, but i liked those images — they provided a sense one was viewing a particular artist’s immediate take on things, not just a consultancy’s hyper-professional product. sounds like this was an intentional change of focus, though…
(C) did i mention the Utter Awesomeness already?
Just loved it… Its really good. Congratulations for the new look.
Thanks for the feedback Jason. After reading your perspective, I think I agree with you about the Recent Log Entries heading on the home page. I just removed that heading, and will try the page without it for now.
The search form wasn’t originally in that spot when I was designing the page. I moved it there after I finished crafting each of the modules on that page, and after making the improvements to the search results themselves.
Note to everyone else that Jason “fancies the darker pages” which most likely means he’s on a Mac. Most PC monitors are set at too dark of a gamma value to allow anayone to appreciate the detail on those darker pages. Something I still need to consider at some point.
this is exactly the kind of site which keeps me coming back and exploring tirelessly. doug bowman, you absolutely did it!
Re: the linked review in David House’s comment above (#116) I’ve already made a few changes to the Search pages that hopefully address David’s comments. I knew I needed to spend more time on them, just haven’t had that time. “Results from…” headings are more prominent, and some tweaking was done to searches that return “0” results or requests for that page with no search terms entered. I also threw up a temporary placeholder page at
/search/with the simple search form on it, which will get replaced with a more robust form when I have the time.I hadn’t been going to mention it, but since you’ve brought it up… I love the darker pages. And I’m on a PC
My favourite of the differing schemes would have to be portfolio. Closely followed by the home scheme, then experiments. Of course, my next favourite after those is see also, so the preference may be based on something other than the dark emphasis
Personally, I think I’m just sick of all the white and light grey sites
“I find it ironic that Josh pointed out my CSS didn’t validate because of one little percent sign I accidently left off a width value, yet the link he used to point to the validator introduced 13 XHTML validation errors for this page because the ampersands in the URL he copied and pasted weren’t escaped.”
Ha, sorry. :) I think next time I link a URL with ampersands I’ll either TinyURL it or replace the ampersands with semicolons.
Well. Absolutely great. Nothing more.
Looking forward to phase III.
Excellent! This is the best CSS design I’ve ever seen; way better than anything in the Zen Garden (well, Golden Mean was cool).
I wish I could be as talented in Graphic Design and CSS as you, Doug!
Very impressive,i like the ways colors are mixed.The tone values in evey section of the page.However,in my opinion,there’re some things i would like to advise you, Doug.
1.There’re some noise pixels in the outer background when i scroll this page(and all the others).And this happens by the stripped background image.More darker the background is,more easier to detect.
2.When an image is set as an hyper link,there’s a dotted line under the image(effected by the style sheet).
These point not to big and important as much.But i think “to have the perfect son,you have to smooth down in every pixel”.
Hope it help.
Very nice, but I think the home page central column is too narrow.
I’ve not read every comment on this page, so this may have been mentioned earlier, but your search app isn’t working correctly when quotes are used to surround a phrase.
For instance, I searched for the example you gave: “movable type” and the results page says “No search query entered.”
In fact, putting quotes around one word (such as “company” which, quoteless returns quite a few results) seems to eliminate that word from the search query.
Excellent design, btw. I very much appreciate the site owner comments being colored differently. It demonstrates experience reading other sites’ message boards and the frustrating attempts to sift through the mass of comments to find authorial replies.
Great design, like it much better than your previous design. The colors are much nicer now.
Thanx for making the web so beautiful…
Oooh comment number 133, that’s quite a few. Congrats on the design, it is of course, top of the line.
Absoulutely stunning, as one hundred and thirty other people have said before me. I can’t find a thing wrong with it. It’s appealing and beautiful in every way blah blah blah (translates into miscellaneous praise). Yeah, I’m a bit jealous. ;-) Learning from your continued excellence continues to be a pleasure. Keep it up.
In repsonce to Jason, I was wondering if you, Doug, or anyone had a copy of the old images and stylesheets. I came here once or twice before the redesign and remember it also looked good. After reading Jason’s comment, I was wondering if there is any way I could see the ond design again?
Thanks,
-[ryan[
Dave Bug (#131):
your search app isn’t working correctly when quotes are used to surround a phrase.
Thanks for pointing this out, Dave. It’s fixed now. Quotes should work (once again) as they’re supposed to work. Problem was on my end when passing the data from my PHP template to the MT-Search CGI file.
I was a little worried, because I liked the old design so much, but the new look blows it away.
Very nice :)
I scanned through about half of the comments, so this may have already been said -
In the portfolio section the bottom half drops and dissapears when rolling the mouse around. I saw you had said that it was a problem in IE5 but not IE6, but I am running IE6 with XP and it’s very much a problem on my computer.
Hope this wasn’t redundant.
Great site.
Absolutely stunning! Your work just gets better and better. Truly inspirational :-)
This is some kind of TrackBack:
http://mathibus.com/archives/2004/06/27/redesigns/#stopdesign
This re-design was truly inspirational for me; I only left adding a comment to so late because I’ve been so busy trying new things. The re-design really got me going again, so for that at least I thank you, and for the content, i thank you again
Brilliant work, enough said
Awesome design. I learned a lot from it.
One thing nags me. How would one keep that top nav centered, even when text is resized? From what I’ve read, you’d have to specify an exact width, but I want something that stretches. Sadly it looks like a is the only answer at this point. Anyone have any ideas?
Last part should read: Sadly it looks like a table is the only answer…
Comments no longer open for this entry.