Last night, when I finished up the latest redesign of JeffCroft.com, I was tired of being on the computer and didn’t feel like writing much more than a somewhat-flippant “here it is” message. Today, after a good night’s sleep and reading 50+ comments in response to the new design, I’m prepared to talk a little more in detail about what I’ve done. I’d like to tell you a bit about the design, the color scheme, why I didn’t use tumblr for my tumblelog, and the CMS behind it all.
Let’s get started, shall we?
The first thing I wanted to do with this most recent redesign was sort of break out of a shell I’d been in for a while, and reflect where I’m at in my life today. The previous few designs very well reflected what I was doing professional at the time: designing sites for newspapers. I love designing the news, and editorial design in general, but these days I’m not doing a lot of it. At Blue Flavor, I’m doing much more varied client work, which tends to be a bit more shiny. The timelessness of newspaper editorial design is still very much “my style,” but I wanted to try something different, mostly for the sake of proving to myself that I could — and I just thought it’d be fun.
Brown has been one of my favorite colors for years, and I’ve tried to pass a brown site by a client many times. The response tends to be “that looks like shit…literally.” For whatever reason, most people shy away from brown on the web. It’s sort of inexplicable, since most people have no problem wearing brown. But, whatever. It is what it is. I knew I could pull off a brown site, so I ultimately decided it was just going to have to be on my personal site, since clients never go for it. I really wanted the brown to look leathery and/or chocolaty. I should point out that the color scheme was largely borrowed from a site my good friend Nathan Borror designed several years ago.
One response I expected — and certainly got — was some negativity towards the low contrast text colors (especially used in the sidebar, as well as for date/time stamps and comment counts). I knew some folks would cry foul, saying it wasn’t readable or “accessible” enough. But I designed it this way intentionally, and I’ll tell you why: it’s because you’re not supposed to read those parts. Okay, that might be overstating it. But, those items that are very low contrast are supposed to fade back into the page some, so that the core content pops out, and you focus on what’s really important. De-emphasis in design is every bit as important as emphasis. The low contrast is my way of de-emphasizing certain elements.
Besides the new visual design, the site uses an entirely new Django-based CMS I’ve written since joining Blue Flavor. What I’ve learned about me writing Django apps is this constant truth: whatever code I wrote a year ago sucks now. Period. I’m learning so fast as I get more into programming in Python that I’m always looking back on my old stuff and realizing how pitiful it really was. So, I end up re-writing everything. This is the third time I’ve rewritten everything from the ground up since I started working with Django. I’m hoping that slows down soon, as I think I’m finally to the point where I’m a fairly decent Python/Django programmer.
Because people will ask: the codebase for this CMS is not publicly available. It may be at some point, but it won’t be extremely soon. And, since a decent portion of the code I’ve written has been done on Blue Flavor’s time, these decisions aren’t entirely up to me. Bottom line: we’ve got exciting plans for this code, but it’s going to take time to get everything in place.
One piece of the puzzle for my CMS was a better tumblelog solution. I knew I wanted to incorporate a tumblelog view onto the homepage, and I knew I wanted a tumblelog section to be a big part of what this site is. I jumped on the tumblelog train pretty early, adding one to my personal site back in April of 2006 — I relaunched it later, calling it a “lifestream.” Since then, tumblr happened. Tumblr is awesome. I really, really like it. I’d recommend it to almost anyone. However, it isn’t quite robust enough for my needs. There are three main things I consider essential to this site that tumblr just can’t do:
Just to be clear: tumblr is very cool, and I love a lot of the things they’ve done. It just wasn’t right for me, for these three main reasons.
A few other fun things to notice around the site:
text-shadow, -webkit-box-shadow, and -webkit-border-radius: If you’re in Safari, you’re getting the full experience. If you’re not, hopefully it still looks fairly decent. If I get time, I’ll do a bit of browser testing and hacking to make it look as good as possible in browsers that don’t support these newer properties — but to be honest, it’s not really a priority. And, Firefox’s version of border-radius renders like pure hell, since it doesn't use antialiasing. So, we'll see.
G_PHYSICAL_MAP in the API) -- definitely the prettiest maps of any public API, if you ask me. Also, I had to do some fun transparent PNG trickery to get the rounded corners the layer over a Google map. The individual city pages show content of any type created or taking place in that city. Currently, this means photos (geocoded on flickr), events (based on where they are occurring), places (such as venues where events take place), and blog entries (I choose a place here I posted each entry from when I post them). In the future, I hope to geocode more data. In particular, I think it would be badass if there were some way to geocode my Twitter tweets. It would be freaking great if Twitter could somehow do this based on where your phone sent an SMS from, but I don’t know if that’s possible or not.
Enjoy the new site, everyone. :)
Update: Thanks to some commenters pointing out that Firefox 3 actually does use anti-aliasing with its rounded corners, I went ahead and added the love for Gecko-based browsers, as well. It looks like crap in FF2, but pretty darn good in FF3. Still no text-shadow or box-shadow for Gecko, though -- so the full experience is still Safari-only.
Sorry, the time to post comments to this entry has expired.
001 // Jason Davies // 02.16.2008 // 6:40 PM
I really like the brown colours. Well done for breaking the mold!
002 // Josh Bryant // 02.16.2008 // 7:18 PM
Jeff, on Safari the body text seems almost as if its not aliased. I assume this is because of the text-shadow but I don’t know. In camino it looks nice & aliased. Is anyone else experiencing this or just me?
003 // Josh Walsh // 02.16.2008 // 7:32 PM
The contrast between the white body text and brown background seems almost too much. It makes me squint a bit to read it…
…albeit, I’m exhausted and on a very high contrast monitor.
004 // Eric Florenzano // 02.16.2008 // 7:39 PM
This is a good thing…otherwise you’ve stopped learning. For as long as I’ve been coding (not that long I guess), I’ve always been able to say this same thing—and I don’t expect that to change.
005 // Guy Leech // 02.16.2008 // 7:57 PM
One thing I’ve noticed in the use of the colour brown is that I find it incredibly hard, after staring for a time at the brown, to find my scrollbar. As (for me) it’s a light grey bar on a white background, my eyes have a bad time adjusting from the brown, so it takes time to adjust to the non-brown look.
I’m sure you’re not really bothered, but I just thought it was interesting.
006 // Keith // 02.16.2008 // 8 PM
I can attest to Jeff’s hard work on this stuff. It’s pretty cool to see it all come together and I’m pretty amazed at what he (and Tom Watson) have been able to do with it.
Thanks for the write up man, interesting stuff!
007 // Kyle // 02.16.2008 // 8:58 PM
So my knee-jerk reaction after seeing the new site earlier today was that I liked the layout, color scheme and the tagline; I’m jealous of all the cool integration stuff you’re doing with Django (you make it look so easy) but the Safari-centric stuff seemed too much like a “doing it because you can” situation (specifically the rounded corners, not that there’s anything wrong with those).
After revisiting the site later in the day, I’ve changed my position on the superfluous effects — I think it’s a good thing. You’re pushing the boundaries, testing the waters, sticking your neck out there — select your favorite metaphor. I don’t think anyone will enjoy widespread adoption of these new elements until people really start using them (rather than simply debating their use). A personal site is the perfect place for experimentation and more people should be doing it.
Props.
008 // hcabbos // 02.16.2008 // 9:12 PM
Josh, I was thinking the same thing. I like Firefox’s rendering much better.
009 // Jonathan Snook // 02.16.2008 // 9:55 PM
I just checked the site in Safari and the difference is subtle. It definitely looks nicer but not so much that I think I feel gipped being in Firefox.
All in all, it’s nice. well done, especially on the integration stuff.
010 // Jeff Croft // 02.16.2008 // 10:35 PM
@Josh Bryant:
I’m using the text-shadow trick outlined here to keep the type from getting all fat and weird in Safari when it’s light-on-dark. I do think this lends a slightly aliased look to the type, but it’s better then weird fatness.
Why can’t text rendering just always be perfect? :)
011 // Rob Goodlatte // 02.16.2008 // 11:23 PM
I think it looks great. Love the DIN, the rounded edges, and the color combinations.
And in the wise words of Dave Chappelle: “Chocolate? This ain’t chocolate!
This is doo-doo baby!”
012 // Paul Walker // 02.16.2008 // 11:29 PM
Love the new design - but I can’t think of anything else to say about it… (One minor issue - the ‘Search…’ placeholder text doesn’t disappear when you select the field) Also, to help pass brown sites past clients, I’ve found pairing it with green accents helps remove the worse connotations. (it’s not shit-brown, it’s tree-brown!), even really minor use of green (as minor as, say, your use of pink on this site) can be used to point them away from thinking ‘shit’.
013 // Greg Bowers // 02.16.2008 // 11:52 PM
Jesus, Jeff… when do you sleep? But seriously… nice work. Still think you should consider doing the django podcast, ‘cause… damn.
014 // Stephen Hay // 02.17.2008 // 3:57 AM
Jeff, I especially like the unconventional color combinations. As you might know, I’m a fan of orange and pink for links as well, but I use a pukey green background instead of brown on my own site. However, I find the brown much more appealing than my own pukey green.
Good job!
015 // Sara Flemming // 02.17.2008 // 7:14 AM
I tell you what, the photos cropped from the center look so cool in the tumblelog; they really look great.
016 // Zinni // 02.17.2008 // 8:08 AM
Why is it that people are so opposed to this on the web? We see it all the time in print design, but for some reason when we design a website everyone thinks every single details must be immediately visible…
Your text may be a little small for my taste at such a low level of contrast, but I definitely support you in your choice!
017 // Ryan Pitts // 02.17.2008 // 10:25 AM
Brown is beautiful, and I completely agree with your point on de-emphasis. Nice work!
018 // Pete Stuart // 02.17.2008 // 11:12 AM
Dig it Jeff. Always good to see the boat a-rockin’. The low contrast type is pretty low on the iPod touch, but point well taken on making the main body content pop. This is probably even more appropriate on a mobile device.
WRT brown sites, check out a recent addition to tipped: http://tipped.co.uk/tippster
I think brown is, like, the new green or something. Or, maybe orange.
019 // Bret W // 02.17.2008 // 11:34 AM
Could you comment a little more about the “intelligent” copping?
Does the cropping vary by photo?
020 // Jeff Croft // 02.17.2008 // 11:47 AM
Yeah, Tipped (a Blue Flavor client), is one of the only projects I know of where brown passed successfully. Sadly, I didn’t get to work on that project (I wasn’t at Blue Flavor yet!).
No, it doesn’t vary by photo. “Intelligent” may have been the wrong word. What I mean is that the photos are scaled, and then cropped from the center out.
For example, say I have a photo that is 1000x750 pixels (3/4 ratio) and I want to display it at 300x100 (1/3 ratio). I first scale the photo proportionally down to 300px wide (which results in a height of 225px). Then, I crop out the center 100 pixels in height — i.e., I chop 62.5 pixels off each the top and the bottom (in the case of a half pixel, I fudge it, and take 62 off the top and 63 off the bottom).
This way, the photo is still accurate proportionately, but is also the exact height and width I want, event if that height and width doesn’t match the aspect ratio of the original photo. Sometimes it results in great croppings that are fun and interesting and sometimes it doesn’t work quite as well — but it’s always the shape and size I want, and that’s the important thing, to me.
I presume this is the same sort of math flickr does to generate its square thumbnail versions of the photos you see on their site.
021 // Scott O'Raw // 02.17.2008 // 11:49 AM
Hi Jeff,
With regard to your comment about geo-coding I just got a tweet through Robert Scoble who is looking at Twitxr (http://www.twitxr.com/) which seems to be offering some rudimentary geo-coding of Titter messages through the iPhone.
Love the new design, by the way. The little accents of pink work so well with the brown: LUVERLEY!
……oh and the integration! I think I might have to go have a wee cry to myself ;-)
022 // Grant // 02.17.2008 // 3:01 PM
Thanks for going into detail on the new design. I love it both visually, and for the thought you’ve put in (as usual) to the more subtle aspects of the site.
I too love brown, and my clients always tell me it looks like shit too. Haha. Oh well.
023 // Chris Kavinsky // 02.17.2008 // 3:03 PM
A nice change of pace from previous versions. I think it works well. Good work.
024 // Gary Barber // 02.17.2008 // 6:58 PM
I’m going to not take the safe option and applaud this design and say it works well, it doesn’t overall.
You say you don’t want people to read the brown text on brown background. Does beg the question why have the text elements at all?
You want to de-emphasis the design. Well there comes a point where the design makes the site unusable. You I feel are close to it. Design is worthless if people can’t get to the information concern.
I just can’t read ANY of the side bar brown text, this includes the instructions for this comment form. Also I can’t see the menu items at the top of the page clearly either.
Please considering that people may want to navigate around your site.
Its not a good idea to let your users get frustrated and try and “work it all out” due to simple problem of poor contrast on some elements.
025 // Jeff Croft // 02.17.2008 // 10:01 PM
Thanks for your thoughts, Gary.
026 // Nathan Borror // 02.17.2008 // 10:16 PM
I think I like this color scheme here more than my my old Take Two design. It’s like Webkit Gone Wild :)
027 // Matt Wilcox // 02.18.2008 // 5:51 AM
Oh that’s lovely Jeff! Love the colours, and the form treatment too. My latest site at work is brown, though rather 70’s retro colours as opposed to this smooth chocolate goodness. One of these days it’ll get out of our private test environment and I can get some crits on it.
Only two points with regard to this design (other than that I love it):
I have the same issue as Josh Walsh (comment 3) - on my screen the white text is overly contrasting and it does prove uncomfortable (but I do have a contrasty monitor that most people who are not designers won’t. I’m going to remedy the problem with a user style-sheet for now).
“Firefox’s version of border-radius renders like pure hell, since it doesn’t use antialiasing.” - it’s horrible on 2, but it’s silk-tastic on 3. I would appreciate a little special FF3 love if you get the time ;)
028 // Matt Wilcox // 02.18.2008 // 5:54 AM
PS, love the quotation out-dent in the comments. Does that only happen when it’s placed on a newline?
029 // mrben // 02.18.2008 // 8:10 AM
No OpenID support? Fail…. ;)
Looks pretty nice, although I’m not convinced by the pink for names on the comments. Still better than anything I’ve ever done.
030 // Jeff Croft // 02.18.2008 // 8:10 AM
Yeah, it happens when a quote mark is the first character of an element (like a paragraph, for example). Wish I could figure out how to make it happen any time it’s on a newline, but that would take some Javascript love that is probably over my head — and, I’m guessing, would be slow as all hell.
Thanks so much for the kind words on the design. I’ll check out the white-on-brown contrast on some other screens, too, and see what I think. And, I’ll definitely add some Gecko love when I get a moment, now that I know FF3 does antialiasing. :)
Thanks, Matt!
031 // Mubashar Iqbal // 02.18.2008 // 9:02 AM
Love the new design, nice to see that you’ve gone LightOnDark!
032 // Jeff Croft // 02.18.2008 // 9:54 AM
Heh. Well, considering the site doesn’t expect you to register, I’m not sure what good OpenID support would be. :)
033 // Dave Lowe // 02.18.2008 // 10:06 AM
I hear you, Jeff, on the math for photo cropping. I had to do some photo cropping kung fu for The Chimes and people were laughing at me for having equations scribbled all over my whiteboard. Seriously satisfying once it all works out though.
034 // Fred // 02.18.2008 // 10:22 AM
The pink doesn’t work. Otherwise, I like it.
035 // Angelo // 02.18.2008 // 11:35 AM
I’ve never understood the aversion to brown websites. The pink contrasts well with the brown, creating effective emphasis.
I was going to say something about using browser-specific attributes like -webkit-border-radius but it looks kick-ass in Safari, and not terrible in Gecko. Isn’t border-radius part of the CSS3 spec?
036 // Jeff Croft // 02.18.2008 // 11:58 AM
Yep.
037 // Shane // 02.18.2008 // 1:01 PM
I am digging the brown and orange. It’s VERY nice!
I also like the de-emphasis of some aspects, and I really enjoyed reading your thoughts on why you did specific things, and other details you included into the site ot make it a better experience overall.
GOOD JOB!
038 // Angelo // 02.18.2008 // 1:14 PM
That question was half-rhetorical and mostly aimed at browser makers. If more sites begin to take real advantage of css3 selectors, maybe browser makers will catch on and start implementing support.
039 // Mike D. // 02.18.2008 // 2:17 PM
When I think of brown, this exactly the sort of poo that comes to mind.
040 // Dustin Diaz // 02.18.2008 // 2:32 PM
Here is my feedback if you ever want it or read it. If DustinDiaz.com went brown, this is what it would look like. This is your best design ever. I love it. Put that in your quote book :)
041 // Jeff Croft // 02.18.2008 // 3:02 PM
Thanks so much, Dustin. :)
042 // kevin // 02.18.2008 // 4:24 PM
great job. i’m undergoing a resdesign myself and know the feeling. when you work it and live it, sometimes the personal site redesign is the hard one, especially cuz you’re prob doing it late at night, like myself. cheers for taking a risk…boat rocker, love it.
043 // Josh Read // 02.18.2008 // 5:14 PM
The leathery/chocolate look is a nice step away from all of the “wood” sites I’ve been seeing lately. I’d love to know more about the custom CMS once you can talk about it and if you ever come down to Tacoma to speak, please let me know - [Ainsworth Studio - tacoma website design firm][]. [Ainsworth Studio - tacoma website design firm]: http://www.ainsworthstudio.com/
044 // Josh Read // 02.18.2008 // 5:14 PM
The leathery/chocolate look is a nice step away from all of the “wood” sites I’ve been seeing lately. I’d love to know more about the custom CMS once you can talk about it and if you ever come down to Tacoma to speak, please let me know - [Ainsworth Studio - tacoma website design firm][]. [Ainsworth Studio - tacoma website design firm]: http://www.ainsworthstudio.com/
045 // Brad Haynes // 02.18.2008 // 5:22 PM
Great looking site man. The brown and curved boxes create a lot of warmth and welcomeness. Your mention of the map api is interesting, I battled with that as well, and ended up with http://garyplayer.com/golf/golf_project_map/, which i think would actually complement your site nicely, and custom markers and overlays as well! Anyway, keep up the good work and I’m looking forward to seeing your portfolio.
046 // Idil // 02.18.2008 // 8:59 PM
WOW! big difference mate. I’ve been coming to your site for a long time now, never commented on anything before.
I really like the brown.
Idil
047 // Eli Van Zoeren // 02.18.2008 // 8:59 PM
The redesign look great! I also like to sneak a little brown into my sites when I can get away with it :)
One thing I noticed: on my system the bottom left corner of your map (the png overlay) is a slightly lighter brown. At this point I’m just being picky, I know, but since everything else looks so perfect I thought you would want to know….
048 // Jeff Croft // 02.18.2008 // 9:02 PM
Yeah. Since the background is a gradient, it wasn’t really possible to make one image that would be look right on every area of the page. Since I’m displaying maps in various spots on the page, I decided to just go with one image that was “close enough,” rather than five or six different ones.
049 // Nick // 02.18.2008 // 11:32 PM
Agreed and understood. However, I’d offer that simultaneous de-emphasis and legibility are a heck of a lot better than just de-emphasis.
I love the design. I just think it’d be greatly improved there was slightly more contrast (legibility) in the de-emphasised brown type.
050 // Jeff Croft // 02.19.2008 // 12:03 AM
I’d agree completely with that point. Where we disagree is whether or not that light brown text is legible or not. :)
I’m not yet convinced it’s illegible. I can read it fine, and most people I’ve talked to about the site haven’t complained about it. A few certainly have, rather loudly, in the blog’s comments.
I full acknowledge that the text in question is coming dangerously close to the legibility borderline. That was intentional. I don’t intend to cross that line, though. And having seen the site now on about 10 different screens while wearing my glasses (giving me almost, but not quite, 20/20 vision), I don’t feel like I have crossed the line. I suspect this may boils down to differences in displays and calibration (that is to say, I imagine that if you saw the site on my screen, you might agree with me that it’s legible).
Bottom line: if I see evidence that text on this site is unreadable on reasonably well-functioning and reasonably well-calibrated equipment, I’ll change it. So far, I haven’t seen that evidence.
051 // Lea Alcantara // 02.19.2008 // 4:34 AM
You just wanted an excuse to use brown and pink. I can’t really fault you for that, though… ;-)
In regards to legibility concerns with the light browns on the sidebars… I’ve had to take similar types of criticism with my own site with some people claiming the pink makes things hard to read — but at the end of the day, I think part of it really was how varied people’s monitor settings were.
Meanwhile, on my 24” BenQ screen, the light browns show up for me easily.
052 // Jason Beaird // 02.19.2008 // 6:41 AM
I agree with Lea. Brown and pink is the new, well, brown and pink - unless it’s gray and pink, which is more like Jared’s recent re-design. I’ll have to one-up all you fools and go with blue and pink! Muahaha! Anyway, as Dustin already said above, the design is awesome. And all the data pulling magic you’ve done makes it that much cooler. Mad props! :)
053 // Jorge Quinteros // 02.19.2008 // 7:41 AM
Well I certainly like the entire aesthetic look of the redesign, especially the whole “leathery” look that you were aiming for. I was take back a little with the choice of color but it’s refreshing to be different every now and then.
I agree with all the points that you mentioned regarding Tumblr. For me personally, it’s more about being able to post content easily and quickly but like anything, there’s things that can be improved and hopefully they’ll take into consideration from users.
054 // Kyle Haskins // 02.19.2008 // 12:31 PM
Jeff, I recently redesigned my site, and it also uses brown as a base color with white text. (Though I haven’t converted all pages to the new design yet.) I struggled with the sames issues of light-on-dark text. The default setting seems too bold, but text-shadow seems too light.
Great job on the redesign.
055 // Kevin N. Murphy // 02.19.2008 // 1:01 PM
I must say very nice work indeed!
I really look forward to hearing more about the CMS behind the site.
The flickr and google maps stuff is interesting to me. Great stuff!
056 // DannyB // 02.19.2008 // 1:13 PM
This is a superb redesign jeff and digging the colors allot. Some of the darker colors are harder to read and hopefully look ok on the PC …
great job …
057 // Karmadude // 02.19.2008 // 1:54 PM
It looks beautiful, but too much contrast and hard to read, had to use Zap color after a few seconds.
058 // Adrian L. // 02.19.2008 // 2:51 PM
I think its pretty bold. Much more bold than the redesign I just launched.
My only points are that the reversed text can be a bit tough to read, and that brown - while a most amazing color - tends to come into and go out of style very quickly.
That said, I do like brown.
059 // Jeff Wheeler // 02.19.2008 // 3:22 PM
Love the design; the colors are actually really great. It does seem to have some major problems in IE though; the logo is way off to the right. Didn’t have a chance to figure out why.
(Oh, and if somebody else posts here as me, it’s not me. I don’t know why idiots were pretending to do that.)
060 // Jeff Croft // 02.19.2008 // 3:38 PM
Like I said, I haven’t tested it in IE, nor do I plan to anytime soon. Just not a priority.
061 // Derek Davis // 02.19.2008 // 7:08 PM
Jeff,
The new design looks superb! One quick fix, on the Colophon page, the paragraph below has the word “Safari” twice, one as text and one as a link.
Just thought you should know.
Once again though, great job!
This site takes advantage of many CSS3 properties currently only available in Apple’s Safari Safari browser.
062 // Max // 02.19.2008 // 9:44 PM
I’m a newb here, so I don’t know what your old design looked like. A friend mailed me a link to an old article of yours.
I rather like this brown. It stands out from the crowd. I forget what most blogs look like, but I won’t forget this one.
Very well done sir!
063 // Ben Sekulowicz-Barclay // 02.20.2008 // 2:02 AM
Just a note, if you add opacity to the stylesheet, it cleans up Firefox’s text rendering no end. Adding {opacity: 0.99} to nasty looking text elements will really improve the look of the copy.
064 // LIsa // 02.20.2008 // 6:49 AM
Wotcha Jeff. I think your work is brilliant and I love the fact that you don’t mind rocking the boat - whether it’s about design or anything else - that’s so refreshing in an industry that has its fair share of sycophants. So for that reason my two-penneth… the layout, integration elements, colour (from an aesthetic point of view), font etc are fabulous, but the white on dark makes me see lines that aren’t even there (my vision is not the greatest) and I’m kind of with the person who said, if you’re de-emphasising, why have those elements in such a prime position anyway? Not a criticism, just observation. Whatever. Pink and brown, and pink and orange, are gorgeous combos. Fact!
065 // Michael Jackson // 02.20.2008 // 3:45 PM
Beautiful site. I love the rounded corners on everything (even on this comment form)…it shows you pay a lot of attention to detail.
066 // James Davidson // 02.21.2008 // 2:05 AM
I don’t know why people keep using this unreadable font for body text, what is it? Helvetica Neue? I have helvetica family installed yet it still looks like shit - maybe somebody can explain it to me? Personally I used to like reading websites!
067 // Jeff Croft // 02.21.2008 // 2:10 AM
Helvetica and Helvetica Neue are two different font families. If you have Helvetica installed, this site will not use it. This site specifies Helvetica Neue and Arial, in that order. So, if you have only Helvetica, not Helvetica Neue, you will see Arial. If you think Arial looks like shit, you’re not alone. Wish I could do something about it. :)
068 // Ryan Rumsey // 02.21.2008 // 8:46 AM
The more I look at the redesign, the more I want to travel by underground/subway. The rounded corners of the top nav and form fields, your logo, sidebar, etc. remind me of a rail map in some ways. I also like the subtle use of pink and orange for your anchor tags, especially reversing the relationship in your comments.
Well done Jeff. I hope you’re enjoying it.
069 // Joseph Lee // 02.21.2008 // 2:37 PM
Nice redesign, sort of miss the old design, but this one is growing on me, the content is definitely front and center now. I really love the color scheme, makes the type quite nice.
Good work Jeff.
070 // Tracy Osborn // 02.22.2008 // 12:14 PM
Irregardless to the design itself, good job on sparking controversy that has opened up a lot of dialog on design. Very interesting reading. :)
071 // chazzuka // 02.23.2008 // 3:55 PM
i like the background color but using bright white text makes it a bit hard to read, but overall nice design.
072 // Donna Vitan // 02.23.2008 // 6:21 PM
I like the new design. De-emphasizing works very well and thank you for more insight into the redesign itself.
073 // Kyle Baxter // 02.24.2008 // 11:14 AM
Okay, you proved me wrong: a brown site can look good. Damned good.
I’m really impressed. Great job.
074 // CP // 02.24.2008 // 6:43 PM
Jeff, superb redesign. As I said on my site, you’ve revolutionized the way personal websites should look and feel. Thumbs up!
CP
075 // Ratamusa // 02.25.2008 // 12:56 AM
Sorry….. The background is too dark and it is difficult read where you use the medium brown. I suggest more contrast…..Excuse my english…..
076 // Matt // 02.25.2008 // 3:04 AM
I just got linked here from the B-List, and I do like the site design. It’s great to see the brown, because as you say it’s not very widely used on the web, however I can’t get past that contrast. I’m a bit colour-blind and I have to really strain to read your links up the top there, but aside from that it’s great. Oddly enough, it seems the help text to the right here is a similar colour but I’m having no problem with that.
077 // Bjorn // 02.25.2008 // 7:16 AM
I had more or less exactly the same feeling about tumblr as you, so I ended up writing a django app that mirrors tumblr. I still use tumblr as the front end (it’s great to get the ‘Share this’ functionality and the dashboard app for free), but using their API load everything into django models. That way I can display my photos, entries, links whatever in any way I like and attach comments easily.
It’s still not live, but will be soon (and has been for 2 months, but that’s another story).
078 // Jeff Croft // 02.25.2008 // 8:53 AM
Cool, Bjorn! That’s a strategy I never thought of. Anxious to see it!
079 // Damian Madray // 02.26.2008 // 7:42 AM
Jeff,
Firstly let me start by saying that you’re an icon in the web design community and as a budding designer I have great respect for your work.
With that said, I’m not so impressed with this design and expected more, personally. The first thought that came to mind when I came back here was, is this done? I love the brown, not a colour often used but I think the contrast might be a tad bit too strong. I totally like and understand the use for low contrast type on the right column. I just think that since you’re working with such a dark brown, you could have mixed a bit of it into the white font, giving it a really, almost white (but not white) colour. This would make me not have to squint. As designers being your audience, you have to consider most of us will be tired when reading your blog now and then so cater for us.
I really dislike the idea of the content just floating there, in the middle but that’s me. There seems to me no proximity with your content. I think this was intentional on your part but for me, it doesn’t work because there’s no rhythm or flow in the design.
In regards to functionality, a great feature to add is a link at the top of comments so it can immediately link to the comment area. I had to scroll endlessly all the way down here just to make a post. For someone who’s big on functionality and accessibility, I think you overlooked that little convenient function.
Overall, I think the design could be tightened up some more. However, as always your grid structure, spacing and alignment is spot on. I do think your spacing is a contribution to things seeming like they’re floating around.
Before I gave this critique, I visited the site first, left, came back a week after just to see if I’d feel the same way, just to make sure it had the same impression. I hope that my comment was constructive if I don’t expect you to worry about anything I said but that comment anchor link I mentioned, I really think you should do that. Thanks.
080 // Jeff Croft // 02.26.2008 // 8:25 AM
Hey Damian: That’s a very well-thought out, well-stated, and respectful critique. Thank you! Just a quite response on one point:
I actually leave this out intentionally, as well. I realize it’s convenient, but I find it annoying when people jump to leaving a comment of their own without reading the thread. It can derail the conversation pretty quickly. I’m not certain leaving the link to jump straight to the comment form out really helps, but I thought it might, and that’s why I’ve left it out.
Again, great critique. If more people were as thoughtful and respectful as you when criticizing something, the Internet would be a much, much better place. Thanks! :)
081 // Laura Downs-Buma // 02.26.2008 // 8:44 AM
I have had the same reaction with trying to sell clients on brown. I tell them it’s earthy, organic, inviting, warm and friendly; and they say “but it’s the color of crap.” oy!
That said, the white text is not happening for my tired, blog-worn eyes. Maybe if it were just the lightest shade of beige?
082 // Fubiz // 02.26.2008 // 3:19 PM
Good work on the template!
083 // Reese // 02.27.2008 // 2:39 AM
Honestly, are people that fixated on poop that crap is the first thing they think of when they see brown? I don’t get it. I love brown and would like to see it used more online. Enjoy the pink with this, too :)
Thanks also for explaining de-emphasis. It gives me some food for thought the next time I approach a design.
084 // Deuce // 02.28.2008 // 8:06 AM
I have to admit. This is very innovative in my humble opinion. You are gutsy and it certainly paid off.
I first started lurking on your site when I got into blueprint. I would occasionally check every other day to see what you were up to.
Now I can’t stop looking at your design. You could probably put lorem ipsum in place of your content and I would still come back to the site and stare as if I was reading something.
Awesome.
085 // Pete // 02.29.2008 // 6:16 AM
The text of the new design looks great on my Macbook Pro screen, but is weird and hard to read on my main monitor (NEC 2170NX) attached to the same MBP… I think it’s a result of the dodgy hack used to get lighter text, and just figured you might want to know.
086 // Jason Rutherford // 03.01.2008 // 3:30 PM
Glad to hear that I’m not the only one who has issues getting brown designs approved. Great job on the redesign.
087 // Scott Lenger // 03.02.2008 // 5:05 PM
I just came over from web designer wall and thought, “what is going on here!”
Going brown as you have done is certainly bold. But I find it a welcome relief from the cookie-cutter gradient-reflection-shiny land of 2.0.
088 // Scott Lenger // 03.02.2008 // 5:05 PM
ps. I really, really, really like what you did with the maps!!
089 // steve // 03.20.2008 // 2:55 PM
Any chance you could explain how the maps system works linked to posts?
Do you copy and paste the Flickr GPS location into a CMS field, and have other CMS fields for location, category etc.,?
090 // dave // 03.20.2008 // 3:14 PM
I’d swear I don’t have DIN in my system yet its showing the headers in DIN in safari? how come?
091 // designing green // 06.18.2008 // 1:43 AM
This site is classic, You have a nice limited pallet with just enough contrast, and the most important aspect is the typography. Typography is so often overlooked. Too many designers put enfaiis on “bells and whistles” The site is like the “little black dress” for the web world. Good job!
092 // sjl web design // 08.13.2008 // 5:48 AM
I really liked this redesign, it seems it has stood the test of time. I feel it works a lot better than your old design and it sounds like it has a lot of functionality behind it.
093 // disabled designer // 08.18.2008 // 10:30 AM
clean, simple, web 2.0 based. what more do you need. Good effort sir.
094 // Firebubble Design // 10.02.2008 // 10:31 AM
I have to agree it looks better overall in safari. However, I really like the look of it in all browsers I have used when looking on your blog.
095 // prefabrik evler // 01.27.2009 // 12:04 PM
Going brown as you have done is certainly bold. But I find it a welcome relief from the cookie-cutter gradient-reflection-shiny land of 2.0.
096 // Milton Keynes // 02.14.2009 // 10:26 AM
I agree that it looks best in safari, it looks good in chrome too. I think overall it still looks great in all browser to be fair. Are thinking of a redesign for 09?
097 // Webtiful web design SEO // 02.26.2009 // 6:27 AM
Great design, impressive.
098 // Jake Wedding // 05.11.2009 // 9:38 AM
Nice work with the redesign, think it might need updating again soon though!
099 // cool car pictures // 11.25.2009 // 3:01 PM
we loved reading the article, you totally knocked it out of the ballpark! I have forwarded a link to my friends, and shall surely be returning back for update.