This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Redesigning the undesigned

25th January 2010

For two years—and with much embarrassment, I have been apologising for my undesigned blog. Well, no more shall I blush. To mark this fourth redesign and rebuild, I’ve decided to detail my inspiration, ideas, processes, type and design choices—and hopefully explain what this miscellany thing is all about.

Back in 2008, I’d frustratedly stripped out almost all presentation from my blog, aiming to create and implement some great new design very swiftly. It didn’t happen. I could blame this failure on family issues,[1] the growth of my business,[2] or lethargy, but ultimately I blame my own misguided pursuit of perfection.

Tools

I wasn’t looking for a design or approach that would please every visitor, nor was I looking for the approval of designers whose opinions I value dearly. All I wanted was something new that absolutely made sense to me, and reflected who I am, be that a good or a bad thing. So far, the work I’m most proud of has been the stuff that divides opinion. If some people love something I’ve designed, and others hates it, I end up pretty happy. It tells me that I’m not being boring.

This has been a long process. I think over the last year or so I have toyed with around a dozen different ideas for this site. Some were pretty good, some were (with the benefit of hindsight) fucking awful. I’ve thrown away more hours-worth of ideas than I dare calculate, with no regrets.

Breaking down the process

Around October 2009, this new idea started to come together—fast. I was sure it was the one and just blitzed it, night after night. At several points however, this was also nearly abandoned. Ultimately, after trudging a long road of iterations and abandoned treatments, I’m really very happy with it, and just glad it’s done.

So, whether it is loved or hated it isn’t worrying me too much right now, but nevertheless (and for my own good) I’ve sought to try and explain how it came together and what it’s all about. What follows is all a little bit over-confident, but remember that I’m trying to convince myself, as much as I’m trying to convince anyone else.

Inspiration

I’ve long owned a copy of Schott’s Miscellany, and the tone of voice and attention to detail in the book has always appealed to me. Also, I used to keep a lot of sketch/notebooks[3] and miss that sense of archiving as opposed to blogging.

Scotts Miscellany

Figure 1: A spread from Schott’s Miscellany.

I knew I wanted to fill the redesign with a lot of personality, and I kept coming back to the contradictory idea of a modern yet old-fashioned Edwardian gentleman’s journal, wrapped within a wider miscellany of nonsense. I don’t know why, but I’ve always loved such things, and after so many failed concepts and ideas, I ended up convincing myself to do it. The plan was to have a “journal” (blog) disguised within something playful and irrelevant. More on that later.

I’m constantly aware of the restrictions faced when designing for clients every day, and there’s rarely the freedom to do something odd. Thus, early on I was certain that my own site should be whatever the hell I want it to be. I could abandon sensible signage and navigation, and write copy in a slightly weird way. I could and should do anything at all without worrying.

Typography

I wanted the design to be type-led, and with a rough idea of this miscellany/journal approach lodged in my brain, I firstly sought out the kind of typefaces that would inform the whole feel of the site. Franklin Gothic (Demi/Book Extra Compressed) came first, as I tried to find something sympathetic to the “double-L” in my surname. Go with a wide face and that sucks, so I opted for a narrow sans-serif that doesn’t feel too modern.

I next needed a serif and/or slab to help evolve the Edwardian-style “logo”, and tried pairing weights of Clarendon Lt Std with Franklin Gothic, and this pairing remained throughout, albeit tweaked daily. There’s also a touch of Mrs. Eaves (SmartLigItalic) in the masthead to help antiquate the whole thing (still not 100% on that). I think that’s it, save for a Baskerville ampersand, and the odd monospace thing here and there.

Times New Roman

If there’s one typeface that I’ve leaned on more than any other it’s Times New Roman (predominantly Regular and Italic, using Bold only for dropcaps). A couple of months ago, our Greg suggested it as the body face, once he had a gist of the journal/miscellany idea, but I never intended to do so much with it.

With Times being one of those “web-safe fonts” we’ve all become so bored of, it’s certainly no longer cool, and we usually can’t wait to get rid of it. The thing is, with the onset of an interweb full of magic new type via the likes of Typekit and FontDeck, it actually feels quite good to be taking a tired old typeface and trying to squeeze every possible ounce from it. Certainly, with a design heavily reliant on images, it’s good to avoid external type supply and heavy image replacement for text.

So, I’m using all sorts of styles for Times, often in combination with quite a few spans to let colour and size variations lift things. I even broke one of my own rules and used letter-spacing for the navigation headings, which seemed a bit too squashed to begin with. Thankfully I wanted them in uppercase, so at least Frederic Goudy would approve:

Anyone who would letterspace lowercase would steal sheep.

Some suggest Goudy used “shag” rather than “steal”[4] but I’ve no idea. Anyway, many will recall the excellent Seed Conference site from a couple of years ago (which I’d actually forgotten about), a design that did some refreshing things with Times. I also suddenly started seeing subtle yet creative uses of Times all over the place this last month or so. I think my Times-radar was turned up high of late. Anyway, I for one have fallen in love with it for the very first time.

The menagerie

So, the type looked kind of right, but I still had this idea of the journal being wrapped within something else. What would that be? I found some beautiful images in a knackered old book about botanists and Darwin’s experiments, and immediately went and grabbed loads of brilliant animal illustrations from a stock library.[5] I did consider this to be cheating for a while, and thought about wasting my life re-drawing thirty or so images just to avoid negative comments. Then I realised that if anyone takes umbrage with me using stock illustrations, they can “bollocks”, and moved on.

As soon as I placed the butterfly next to the early type ideas, everything seemed right. Something about the typefaces, tone of voice, and utterly irrelevant wildlife gave me loads of things to play with all of a sudden. Figure 2 shows the very first juxtaposition of type and wildlife.

The eureka moment

Figure 2: First placing of wildlife against type.

The idea I was most keen to retain is that the wildlife should have no correlation to the section or external site that they are paired with. For me, that’s the playful thing again. There is no reason why Flickr should be represented by a flea, or Delicious by a snake, but that’s where I get my kicks.

Cue dozens of Photoshop and browser iterations around a basic layout that went on for nearly two months. I ended up with little wildlife “cards” or transparencies, and I’ve already grown quite attached to my menagerie.

Design treatments and CSS3

It was perhaps inevitable that a concept based around the idea of an old journal would lead me towards increasingly wicked-worn territory. The thing is, that has always been a natural style for me, so I don’t fear it. However, I’ve grown more and more eager to be honest about the fact that we’re using computer screens, browsers and pixels, and less fond of the fakery in web design—usually because the ideas are often executed poorly.

Last year I presented Bauhaus Ideology and the Future of Web Design[6] on the FOWD Tour, with some focus on how we should acknowledge the machine, and the honesty of construction, truth to materials principle that suggests us web designers should not pretend we’ve actually managed to rest a sticky coffee cup on a computer screen (you know the kind of designs I’m referring to). Still, if it’s done well…

Anyway, through all the iterations, the temptation was to add more and more textures using PNGs and opacity filters. The thing was hanging together very well, and I pretty much decided this was the final look and feel. Below is a detail, with subtle CSS transitions kicking off.

Abandoned wicked-worn treatment

Figure 3: An abandoned “wicked-worn” treatment.

I posted teasers on Dribbble to gauge feedback. I also showed the site to three or four designers at this stage, and all but one came back and said it looked great. The exception was a designer who I can rely on to be honest and say what he really thinks.

That designer put plenty of effort into some superb feedback, and pretty much said that the backgrounds and layers were “cheapening” the concept—a concept he really likes. This was the honest feedback I needed, and as I too had nagging doubts, without a hint of regret I moved forward in search of a more minimal way to present the ideas. Plenty of late nights later, I have a more sober, less obtrusive canvas for all the type, wildlife and content—and as a result I’m much happier with the modern/antiquated balance.

Finally, I turned off a number of CSS3 clever bits. I wasn’t happy with the way Opera 10.1 ignored these features, or the poor way that Firefox (any version) handled the rotations that contained real text. Also, that occasional ridiculous div-flash you get when triggering a rotation in Safari bugs the hell out of me. This means the spinning home button, the slinky opacity fades and other tricks are gone. I had to be bold and do away with some of the coolest stuff I’ve done with CSS in years, but I don’t regret it really. The gimmicks were potentially cheapening the idea anyway. Use with caution, I say.

A few Easter eggs

All the cool kids keep banging on about adding “Easter eggs” into their designs. Clever, knowing little treats that might not be obvious on the first pass. I have to admit that it’s a lot of fun to sprinkle a few goodies in here and there.

For example, you’ll possibly find a nice approach to footnotes[7] (so difficult to do properly on the web) using the sup element, anchors, and some jQuery. It’s a bit of a hack to use sup, but it works (albeit not on Opera, which doesn’t seem to aim for the anchors at all). I’ll spoil the fun if I reveal them all, but if you’ve an eye for detail you may find a few subtle things to interest you.

Redesign Flickr set

Figure 4: Flickr set containing various Photoshop and browser iterations.
Browser notes

As you’d expect it looks best in this order: Safari, Chrome, Firefox, Opera (preferably 10.5 beta for CSS3 stuff), then any other browsers that aren’t on Windows, and then Internet Explorer of course. On IE 7/8 for example, you’ll miss shadows, rounded corners, exact measurement and plenty more, and some forced opacity ( such as filter: alpha(opacity=60);) seems to suppress the benefits of ClearType in places. On IE6 it hangs together, but content page floats and some transparencies are screwed. Just stop using it.

That’s it

So, that’s it. A whirlwind diary of reasoning, mistakes, ideas, backtracks and decisions that I hope help explains why this site looks the way it does. Don’t get me wrong, all this hot air doesn’t mean I arrogantly assume this is all wonderful. I know it isn’t perfect, but like I said, pursuing perfection is—I think—a misguided quest.

I said up above that I don’t really care what people think, but in truth I would be very interested to hear your thoughts either way. Also, if anyone wants me to go into more detail about anything I’ve mentioned, whether big stuff or small details, then drop a comment. I’d be happy to consider expanding if it helps anyone.

Footnotes

  1. Specifically, the loss of my Dad, and both Granddads within two years, and all that means.
  2. Erskine Design, Nottingham UK.
  3. Many of my old sketchbooks are scanned and available on Flickr.
  4. According to Wikipedia he said “Any man who would letterspace blackletter would shag sheep.”
  5. All wildlife images were obtained from iStockPhoto.com.
  6. The Bauhaus was a school in Germany that combined crafts and arts in modern design.
  7. Footnotes like this one, for example!

Responses

Gregory James Wood

# Gregory James Wood responded on 25th January 2010 with...

Very nice job my unusual friend. Loving your work x

Jack Osborne

# Jack Osborne responded on 25th January 2010 with...

Wow! The wait was indeed worth it, this is beautiful.

Lodewijk Schutte

# Lodewijk Schutte responded on 25th January 2010 with...

My, what a fine site o’ the web you have here, Mr. Collison. I feel congratulations are in order, so here’s an approving nod accompanied with a firm handshake.

Sam Brown

# Sam Brown responded on 25th January 2010 with...

Lovely work Simon, this truly is an exceptional work of art and I look forward to reading more from you. :) Keep up the great work.

Luc Pestille

# Luc Pestille responded on 25th January 2010 with...

Very nice - this is all EE isn’t it? Anything special about how that side of it is put together? If it’s as well thought out as the front end, I might learn a thing or two about EE…

Paul Randall

# Paul Randall responded on 25th January 2010 with...

It’s a joy to look at. Really well crafted!

Chris Taylor

# Chris Taylor responded on 25th January 2010 with...

Sigh, it’s so beautifully crafted it makes me not want to bother designing any more.

In awe.

George Ornbo

# George Ornbo responded on 25th January 2010 with...

Beautiful stuff. Congratulations.
Just 12 lines to fix the layout for IE6 - A master at work

Kean

# Kean responded on 25th January 2010 with...

Love the new/first design, it’s a fantastic example of simplicity that doesn’t look either easy or lazy.

Can’t quite get the ALT+B thing in the footer to work though, tends to open my bookmarks in FF.

Adam

# Adam responded on 25th January 2010 with...

Wow, looks great. Love the typography and the grid. Great work!

Wil

# Wil responded on 25th January 2010 with...

Sex on a stick.

Joel Bradbury

# Joel Bradbury responded on 25th January 2010 with...

Gotta say this is one damn good redesign.

Very fine in the ‘wee details, and loving the illustrations.

Veerle Pieters

# Veerle Pieters responded on 25th January 2010 with...

Superb work Simon! Such an unique feeling to it, and you made this design work with minimal colors and typography. Not an easy task, but you nailed this one!

Yaili

# Yaili responded on 25th January 2010 with...

Lovely — those teasers that I kept stumbling across on Dribbble finally releaved.

I love the use of Times (followed by the beautiful Cambria, mmm…) — I always get a bit upset when it’s treated disrespectfully.

One suggestion. It would be rather nice to have an indication of which footnote one’s being directed to, easily achieved with the :target pseudo-class. For good browsers only.

But don’t mind my natural inclination to being annoying, it’s looking superb as it is now :)

Glen Swinfield

# Glen Swinfield responded on 25th January 2010 with...

I don’t like it. Start again please.

Only joking. Nice.

Phil

# Phil responded on 25th January 2010 with...

Excellent work my friend, worth the wait!

bearskinrug

# bearskinrug responded on 25th January 2010 with...

The new site is absolutely lovely, Simon! Congrats!

Scott Mallinson

# Scott Mallinson responded on 25th January 2010 with...

Aesthetically pleasing and easy to read. It’s a winner in my eyes. Gonna go hunt for the Easter Eggs now.

Andy Field

# Andy Field responded on 25th January 2010 with...

Cor’ blimey - attention to detail’s spot on. Design that makes me want to read/explore all the content. Would love to see a follow up post on the EE integration, but in the meantime, fantastic work!

Jonathan Snook

# Jonathan Snook responded on 25th January 2010 with...

Fantastic work, Mr. Collison.

A couple comments: the background grid seems a few pixels off. For example, the header/logo type rests naturally on grid lines when positioned accurately—as do many of the other elements of the design. I suspect the sizing is intentional but the grid lines are misplaced in Firefox and Safari.

Otherwise, I’d probably do away with #hashgrid. It seems like a gimmick to me as it is readily apparent that everything sites nicely on a grid.

Again, fantastic work. Lots of personality and putting my site to shame (as always).

Aaron Witherow

# Aaron Witherow responded on 25th January 2010 with...

Very nice Simon, the whole site is unique and full of personality. It fits well together and all the design elements are subtle. Typography is great, I must say I am loving it.

Details are what make you a great designer!

Sam Hardacre

# Sam Hardacre responded on 25th January 2010 with...

Really, really beautiful work Colly. Love it!

Emma Boulton

# Emma Boulton responded on 25th January 2010 with...

Beautiful new site Colly, you’ve got a real eye for detail. Nice to see some old-fashioned media being used as inspiration - love the illustrations. I really like how you’ve created your content sections, kept your tone of voice in the copy and added funny little quirks like the footnotes and footer. You’re a true Edwardian Gent Sir!

Guy Carberry

# Guy Carberry responded on 25th January 2010 with...

Fantastic work Colly! It’s a joy to peruse.

Anthony Casey

# Anthony Casey responded on 25th January 2010 with...

Lovely stuff.

I love this approach. Taking inspiration from a theme and lovingly coaxing it into a finished thing that actually means something personally. It’s a shame it’s so exhausting to do more often.

I’ve always pretty much hated Times New Roman… it’s great to see it actually being used so well. I might not be so quick to dismiss it in the future.

Lance

# Lance responded on 25th January 2010 with...

Gorgeous! :D Feels like I’m in a Bio Lab. I’d like to praise the subtle details really :)

Bene

# Bene responded on 25th January 2010 with...

i’m impressed by the beauty of this website. The way you and the Erskine team write about web design is a true inspiration.

Trent Walton

# Trent Walton responded on 25th January 2010 with...

I’m particularly impressed with the chronicled screenshots (flickr set) of the design process.  It’s obvious you’ve put a lot of thought & effort into tweaking these pixels into perfection.  Lovely work.

Erwin Heiser

# Erwin Heiser responded on 25th January 2010 with...

Proof, if needed, that less is always more. It takes guts to strip back and remove unnecessary ornamentation as you did.
A tip of the hat is in order. me thinks!

Jim Pannell

# Jim Pannell responded on 25th January 2010 with...

Absolutely top notch stuff! I can see this site being included in many, many lists of sites to inspire. Extremely impressed.

Scott

# Scott responded on 25th January 2010 with...

Bloody brilliant! And so very much worth the wait.

Simon Clayson

# Simon Clayson responded on 25th January 2010 with...

You’ve made a bloody good job of this. An understatement perhaps, but it is inspirational, and that isn’t something that comes along everyday of the week. Worth the wait.

Beth

# Beth responded on 25th January 2010 with...

This is lovely, great use of illustration!

Andi

# Andi responded on 25th January 2010 with...

This site is absolutely beautiful. I like the illustrations and the overall modern/old-fashioned look. The Details, the type, the own “style” and personality, awesome!

The background grid seems a few pixels off, like Jonathan Snook said, at least in Firefox 3.5.7.

Heinrich

# Heinrich responded on 25th January 2010 with...

Wonderfuly crafted re-design! I love it :)

Marco

# Marco responded on 25th January 2010 with...

Can only say “Thank you”. This site is an inspiration for anyone looking for the deeper meaning of “Beautiful Site”.

Andy

# Andy responded on 25th January 2010 with...

Simon, a quick heads up..

I first tried to open this post via your rss feed.  The link gives: http://feedproxy.google.com/~r/colly/frJd/~3/fIAXDsv5W2k/ which translates to http://colly.com/comments/redesigning_the_undesigned/?
utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:
+colly/frJd+(CollyLogic+-+Simon+Collison’s+blog)&utm_
content=Google+Reader
and this results in a blank page with: Invalid GET Data

For info, I’m using Chrome on Windows XP

Tuomas Tolppi

# Tuomas Tolppi responded on 25th January 2010 with...

Great work as expected, Simon. Unique.

Josh

# Josh responded on 25th January 2010 with...

Love, love, love the use of the biological illustrations. It’s a beautiful redesign and great to hear your thoughts behind it.

Rachel

# Rachel responded on 25th January 2010 with...

Someone tweeted your redesign and even though I don’t know who you are, what you write and I never leave comments anywhere, I had to write to say what a gorgeous design and how jealous I am of it all.  You’ve picked out all the best ideas I never had and put them together to elegantly dazzling effect. The typography is droolworthy (if occasionally eyeachingly small on a humble laptop) and who could resist vintage looking illustration?

Sebastiaan de With

# Sebastiaan de With responded on 25th January 2010 with...

Gorgeous, and very well said. I love the design, and the way it all works and feels. Three thumbs up.

Mike

# Mike responded on 25th January 2010 with...

Thank you for the great writeup of your process. I love the Flickr set that shows different iterations.

Malarkey

# Malarkey responded on 25th January 2010 with...

Awesome. I will definitely use this on my next project. Thx for sharing.

Patrick Haney

# Patrick Haney responded on 25th January 2010 with...

I’m calling it right now: Best Redesign of 2010.

Actually, can you call it a redesign if it was never designed in the first place? I digress.

Great work, Simon. Your attention to detail and strong typography just blow everything else out of the water. I’m enjoying just browsing around your site and discovering all the little things, from the copy to the wildlife.

Perhaps I could use a kick in the pants to get my long overdue redesign moving forward. Thanks for the inspiration.

Nate Klaiber

# Nate Klaiber responded on 25th January 2010 with...

I love the attention to all of the little details, and all of the illustrations. It’s a beautiful experience all-around. Excellent work.

Garett Mayfield

# Garett Mayfield responded on 25th January 2010 with...

Very Nice. This site is the way to my heart. Reading this post early this morning really inspires me. If only everyone out there put this much thought, detail and hard work into their projects, the web would be a much more pleasant place to hang out.

Richard Bateman

# Richard Bateman responded on 25th January 2010 with...

Would not have expected anything less from your fine self, Sir. Cracking work. Looking forward to future posts. Congratulations on an awesome site.

Joshua Brewer

# Joshua Brewer responded on 25th January 2010 with...

Absolutely love and admire this design. I think its definitely worth the wait! Congrats man.

David Trang

# David Trang responded on 25th January 2010 with...

Well, well done. Your thorough design process and iterations are top notch. I’ve had the same feelings about Times as you do. Whenever I can pull it off effectively, I get a pretty good feeling about it especially whenever people say, “Is that really Times?”

Agata

# Agata responded on 25th January 2010 with...

Wow, This page is beautiful, I love it!

Stephanie Hobson

# Stephanie Hobson responded on 25th January 2010 with...

The drawings really make the design, what a great find :)

Ranjani

# Ranjani responded on 25th January 2010 with...

Fabulous (or faboo, for the layman). Personally, I think the pufferfish ties the entire design together. Wonderful work :)

Keith

# Keith responded on 25th January 2010 with...

Finally.

I’ve been wanting to see (and read) this forEVER.  So glad it’s finally up!  I think you nailed everything you were going for. There is so much personality here, from the look/feel to the written bits in the UI.  This is what a personal site should be like. Love it and definitely worth the wait.

Richard Rutter

# Richard Rutter responded on 25th January 2010 with...

“When the only font available is Times New Roman, the typographer must make the most of its virtues. The typography should be richly and superbly ordinary, so that attention is drawn to the quality of the composition, not the individual letterforms.”

Nicely done. Loving it.

Jim Moran

# Jim Moran responded on 25th January 2010 with...

This is a great bit of work mate, very impressive.

I wonder what all the fonts that are making their way to a page near you soon are going to do for design. And, if in the wrong hands, we’ll end up with some interesting designs over the next year. That being the case, it’s nice to see a site designed with Times New Roman — the font I and many others wrestled with when we first typed Hello World into Notepad before opening up in Mosaic. It’s making me want to dust off my markup gloves and get some stuff built.

Now, get on with quitting the smokes.

Ryan Taylor

# Ryan Taylor responded on 25th January 2010 with...

Great work mate!

I love how minimal it feels yet there’s so much detail. Also great decision to not correlate the wildlife images with their respective section/site, it forces (in a good way) you to read your little descriptions for each item, which really bring across your personality “Ignoring old acquaintances: Bloody Facebook”, I can hear you saying it in my head. ;-)

Impressive sir. *tips hat*

Nick Toye

# Nick Toye responded on 25th January 2010 with...

Behold a site of sheer delight and indulgence.

This kind of work Colly is going to force numerous designers to rethink how they approach design on the internets.

Wondered why you used px instead of something more flexible, but other than that it’s pretty damn sexy.

Steve Rydz

# Steve Rydz responded on 25th January 2010 with...

Needless to say nice work Simon. This is certainly a very inspiring piece of design and to make Times New Roman look appealing is an achievement in my opinion. I would go as far as to say this is my favourite redesign of the last year or so.

Aimée

# Aimée responded on 25th January 2010 with...

I’m not a developer, or a designer, but I’m so impressed with your site as a user. I really enjoy using your footnotes. Checking up on a note and being brought back to where I’m reading is so very elegant. I don’t have to think about it, it just works the way footnotes should work.

Thanks for pushing the rest of the web forward! I hope a great deal of colleagues in your industry are watching (and following) you!

Simon Collison

# Simon Collison responded on 26th January 2010 with...

THANK YOU EVERYONE!

I was rather nervous getting ready to launch this site over the weekend and this morning; thus the reaction since midday has made me incredibly happy. Thanks to everyone who took the time to leave a response.

It’s been a long day, so I’ll simply address the questions or specific references if that’s cool…

Luc Pestille & Andy Field: Oh, naturally. All EE. Hopefully I’ll find some time to share some things. Maybe a top five best little tricks used, or something similar.

Kean: A few folks have reported problems with ALT+B. I’ll definitely look into that.

Yaili: Hey, I love good feedback. Don’t worry. I’ll look at adding focus to the footnotes when I do a combined chunk of fixes and extra bits in a week or two.

Jonathan Snook & Andi: Good feedback, Snook, thanks. I think the #hashgrid is indeed a bit unnecessary, although just a bit of fun for the geeks. I agree that alignment isn’t quite right. Will fix that when I get around to the bugs list.

Andy: Thanks for that. I had a feeling the RSS was a bit buggy since relaunch - you confirmed it, and I got it fixed immediately after your comment. I’ve updated the link to the working feed.

Malarkey: This design is rubbish. Whats teh point in using CSS3 now? The designer are stoopid until you can doo it in Internets Exploiter anyways.

Patrick Haney: Good grief. Good man. Good heavens.

Richard Rutter: Superb quote. Humbled you would refer to Bringhurst here.

Tyce Clee

# Tyce Clee responded on 26th January 2010 with...

Bloody amazing Colly, really impressed mate :)

Lloydi

# Lloydi responded on 26th January 2010 with...

Tis luvverly, Mr Colly, son.  I’d love to think that one day I’d create something beautiful from scratch (rather than just building other people’s designs), but so far all I’ve managed to do is the bit you did a couple of years ago, namely tear down the site and take it back to basics!

John Faulds

# John Faulds responded on 26th January 2010 with...

Very nice work Simon. And very interesting write-up on the process. I’ve just begun working on redesigning my site too (will no doubt be several months before it sees the light of day though) and I’m finding it interesting to read about others’ methods and processes.

Cormac Kelly

# Cormac Kelly responded on 26th January 2010 with...

Absolutely love it. Great work, well crafted and wonderfully detailed. Really inspiring, thanks for going over the process.

Kelly Packer

# Kelly Packer responded on 26th January 2010 with...

I was thinking about this site on my drive home. There is an enduring quality about it, a timelessness. It doesn’t get suckered into trends, but adopts the best qualities of them and will, in the end, set them. Nothing mind-boggling new here, but it’s just done so freaking well.

I enjoyed reading the write-up as much as the site design. Would love to hear about the back-end.

Kevin Sylvia

# Kevin Sylvia responded on 26th January 2010 with...

I cannot for the life of me stop exploring this website. It really is one of the most visually appealing designs I’ve ever laid my eyes on.

Great, great work.

Kevin Sylvia

# Kevin Sylvia responded on 26th January 2010 with...

Also, I think a new Favicon is in order.

Jon Gibbins

# Jon Gibbins responded on 26th January 2010 with...

Out of the hard toil, you’ve ended up with another beautifully-crafted site. Great work, Simon.

Matthew

# Matthew responded on 26th January 2010 with...

What’s more to say? Love it! And oh so jealous.

James Young

# James Young responded on 26th January 2010 with...

Lovely job on the site, the attention to detail is something special. Keep up the good work (and the Erskine stuff which I like too)

Richard Saunders

# Richard Saunders responded on 26th January 2010 with...

Just got directed to your site from someones tweet. Not come across your work until today. Great attention to detail and I’ll be adding you to my feed reader.

Looking forward to exploring the rest of your content.

Simon Rudkin

# Simon Rudkin responded on 26th January 2010 with...

I’m late to the party, so what I wanted to say has been said, but I’ll say it anyway… every element—design, copy, fine detail—has so much personality, which I reckon is rare.

And it’d be a sad day if the Collie silhouette ornament from Fig. 2 was permanently consigned to the trash.

Erik Wallace

# Erik Wallace responded on 26th January 2010 with...

Stunning. I prefer the graph paper background in the header to the earlier screenshot showing a more worn look. Might just be me, but the graph paper seems more scholarly and suitable to a gentleman.

Thanks for sharing your thoughts and process as well, it’s interesting to see how other designer’s think.

Colin

# Colin responded on 26th January 2010 with...

Not much to complain about. Great work!

And the “cheapening” effect that CSS3 affords is already starting to piss me off. I’ve seen a ton of sites lately with drop shadows on their headlines for no reason whatsoever. “Why the fuck do your dark headlines on a light background need a drop shadow!?”

Gratuitous shadows and rounded corners are going to be with us for a long time, sadly. Thanks for putting the qualities of restraint on display for all of the web to see.

Simon Collison

# Simon Collison responded on 27th January 2010 with...

THANK YOU ALL once again. Today was a tough, hurtful day. My redesign was singled-out and dragged into a spiteful post/thread and subsequently this has deleted all my excitement.

I’m still somewhat heart-broken by the ignorance, misjudgements, and being used as a tug-of-war—the whole thing completely out of context. One day I might say more about it, but not today. Let’s just say I have a big revenge list, and I will wait.

In other news, I have made a few amends. I have re-coded the navigation site-wide, so that everything expands smoothly when resizing text. Lots of pedants on at me for that one. I knew about it, and was planning to fix it later… but I’d coded my complex nav into a corner… I’m merely human.

Anyway, a few more replies:

Kelly Packer: I love your response about the enduring quality and timelessness. exactly the kind of feeling I wanted to achieve. Thank you. And yes, one day I will tell you all about my back end.

Kevin Sylvia: Agreed! Forgot about the favicon. Temporary new red square thing in it’s place today, but will find something more inspiring soon.

Simon Rudkin: Oh mate. Let us not forget. It’s all down to your tutelage way back when. If you like this redesign, then I’m very happy. I was planning to use the Collie ornaments, but then Jason designed the excellent Bobulate, wit it’s little doggies, and that put me off. Woof.

Doug Aitken

# Doug Aitken responded on 27th January 2010 with...

I agree with Richard, best redesign 2010.

I said it on twitter on Monday, the new design is gorgeous.

Michael Grafl

# Michael Grafl responded on 27th January 2010 with...

Bravo!

Travis Neilson

# Travis Neilson responded on 27th January 2010 with...

Simon, I don’t know much about you as this is the first article I’ve read here. I came across this site via Greg Wood. I read only a few comments then skipped tot he last one that you wrote (I’m sorry but 77 comments is not a few.) It seems you were given a hard time about a ‘this or that’ but I wanted to ask my vote in the thumbs up section. Good on you my man, the site looks fantastic. I enjoyed reading through your design process, and found your exposition on your type choices interesting. I really like how you’ve used Times New Roman, the reservations most of us have that keep us from using it in web design are strong. You successfully used it without it becoming trite or boring. Well done. I have had that Seed web page bookmarked for a long time and constantly use it as a reminder of what intelligent usage can do for even the most common of faces. On the big ampersand on your homepage you used Baskerville, good choice. Have you compared the Baskerville italic ampersand with the same from ITC New Baskerville? You may like what you find. I must admit that I am in love with the way those animals worked out. Figure 2 in this article excites me a great deal. It would be a wonderful postcard or promotional item. (The navigational copy being revised appropriately of course.) I can’t say enough about what a treat this article was and I look forward to diving into the archives soon.

Jacob Souva

# Jacob Souva responded on 27th January 2010 with...

Nicely done. Roundly applauded by all and worthy of much fussing.

Chris Price

# Chris Price responded on 27th January 2010 with...

I have to commend you on your redesign. Its elegance, its refreshing use of type, and its nostalgic atmosphere make it a real joy to visit.

Give yourself a pat on the back.

Randy Graham

# Randy Graham responded on 27th January 2010 with...

Simon

Wow, what a dynamite site. You are truly a great designer

Tim Cooper

# Tim Cooper responded on 28th January 2010 with...

Respect. Love it.

Webstandard-Blog

# Webstandard-Blog responded on 28th January 2010 with...

A lot of work and a lot of helpful informations! Thx, Simon!

Darlene Jaye Hill

# Darlene Jaye Hill responded on 28th January 2010 with...

Wonderful site, now if we could only explain that less really is more to our clients…and stop the dreaded “The logo isn’t big enough” conversation.

THANK YOU!

Jamie

# Jamie responded on 28th January 2010 with...

“I don’t know the key to success, but the key to failure is trying to please everybody.”

A superbly charming, sublime design and delectable writing.

Simon

# Simon responded on 28th January 2010 with...

Really enjoying your new look! Bags of character, designing for yourself is so difficult to do well. You’ve nailed it.

Btw., saw a Suzuki Jimny in Long Eaton with a ‘Colly’ sticker in the back window that bore more than a passing resemblance to your Colly icon. Didn’t see that coming - I guess you’ve ditched the Datsun then?

Gavin Steele

# Gavin Steele responded on 29th January 2010 with...

I wish more designers would go out on a limb and try to justify their decisions. You have done a masterful job on redesigning your own site, something every designer struggles with. Very impressive indeed.

The only bit I would work on, is these comment boxes. Not sure what, but they just need a tinny something to tie in with the site, especially when your commenting like me, all the way down near the bottom.

Once again, great work

Ben Armstrong

# Ben Armstrong responded on 29th January 2010 with...

Really liking the new design, it’s got a great feel and a character that does the writing style and tone justice.

duren

# duren responded on 29th January 2010 with...

I like it. Minimalistic, no pretensions, no annoying colors, content driven.

Stewart McCoy

# Stewart McCoy responded on 30th January 2010 with...

I particularly enjoy the thought you’ve given to the navigational labels and header and footer copy. Your word choices are delightfully literate.

Birgit

# Birgit responded on 31st January 2010 with...

It’s an interesting and fresh approach, the illustrations look beautiful and I love the typography as well as the attention to detail.

The footnotes look really nice, how do you manage them in EE?

Thanks for sharing your way to this redesign, it was a fun and informative read!

SJL Web Design

# SJL Web Design responded on 1st February 2010 with...

Love the Design! Really nice use of minimal colours and the great animal illustrations.

Thanks for sharing your thoughts and processes.

Johan

# Johan responded on 1st February 2010 with...

Site of the year, no doubt.

Odne

# Odne responded on 4th February 2010 with...

Your design will surely inspire many others! I only wish it would scale better for small displays. Will follow your journal from now on.

Marion

# Marion responded on 5th February 2010 with...

Its four o’clock in the morning here and I’m looking at your website.
It rocks.

Martin Hawkins

# Martin Hawkins responded on 9th February 2010 with...

I really like the redesign.  The overall theme is a great idea to start with and as has already been mentioned the attention to detail really makes it.  I approve of a site that uses new CSS toys without making it look like it’s doing it because it can.  That and typography win.

One negative is that, and excuse me getting technical, it appears to confuse the ruddy heck out of Opera 10.1.  The rollovers work and the links show as links to your content but clicking them does nothing at all.  In the spirit of the internet I’m going to assume this is your fault and will talk ill of you to all my friends.

Trav

# Trav responded on 10th February 2010 with...

Beautiful work; elegant, thoughtful and irreverent. I’ve always wanted to do a web homage to the Farmer’s Almanac, and this sort of fits into that vein.Very inspiring, and thank you for taking the time to describe the process.

Lauren

# Lauren responded on 10th February 2010 with...

Well, it’s a beautiful design. It inspires me :)

Graphic designer

# Graphic designer responded on 12th February 2010 with...

Very inspiring! I wonder how long that took him to do?

Web Design Norwich

# Web Design Norwich responded on 15th February 2010 with...

Very much like the design- stumbled upon this site by accident but very impressive and contemporary design forced me to post :P

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 791 Next

Superfluous Aside

Archived in HTML & CSS, Personal, Design & Web

Written in Sneinton

This post's Short URL is http://col.ly/s/791

There are 100 responses

External References

Copyright © Mr. Simon Collison 2003-2014. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.