My goodness, Meagan’s new site design is absolutely gorgeous! The colour palette, the typography, the texture, the motion design …it all communicates character and personality. Beautiful work!
Tuesday, January 29th, 2019
Wednesday, February 28th, 2018
Go deep, deep down the rabbit hole of Rob’s brain in all its colourful glory. Seriously, this is simultaneously a great write-up of how he came up with his site’s lovely colour scheme(s), and it’s a terrific primer on colour theory and why the HSL value in CSS is so, so wonderful!
Tuesday, November 28th, 2017
Smashing Magazine has launched its lovely new design, but more importantly, it has launched its lovely new business model. Ads are gone. Patronage is in. This is a resource worth supporting.
Sunday, November 19th, 2017
Two decades redesigning/realigning the BBC News home page.
Tuesday, October 17th, 2017
Dave has redesigned his site. Now it’s extra Dave-y.
Tuesday, September 12th, 2017
Rob has redesigned his site and it’s looking lovely. Here’s the first part of a three-part series on the rationale behind the relaunch:
I don’t pretend everything I do or say online is worthy of preservation. But while I’m still breathing, I want to be the one who decides what gets preserved and what doesn’t. And I want it all to be available in one place. Owning and operating my own site is the only way.
Friday, September 1st, 2017
I’m doubling down on owning my own content, so I’m excited to have a less-crusty home for it all.
It’s fun! In a world where even sites that aren’t Medium dot com are looking like Medium dot com, I’m excited to try something different.
Sunday, March 19th, 2017
After Clearleft’s recent rebranding, I’m really interested in Happy Cog’s redesign process:
In the near future we’ll be rolling out a new website, followed by a rebrand of Cognition, our blog. As the identity is tested against applications, much of what’s here may change. Nothing is set in stone.
Friday, March 17th, 2017
An open beta of Smashing Magazine’s redesign, which looks like it could be a real poster child for progressive enhancement:
Thursday, January 19th, 2017
Looking beyond launch
It’s all go, go, go at Clearleft while we’re working on a new version of our website …accompanied by a brand new identity. It’s an exciting time in the studio, tinged with the slight stress that comes with any kind of unveiling like this.
I think it’s good to remember that this is the web. I keep telling myself that we’re not unveiling something carved in stone. Even after the launch we can keep making the site better. In fact, if we wait until everything is perfect before we launch, we’ll probably never launch at all.
On the other hand, you only get one chance to make a first impression, right? So it’s got to be good …but it doesn’t have to be done. A website is never done.
I’ve got to get comfortable with that. There’s lots of things that I’d like to be done in time for launch, but realistically it’s fine if those things are completed in the subsequent days or weeks.
Adding a service worker and making a nice offline experience? I really want to do that …but it can wait.
What about other performance tweaks? Yes, we’ll to try have every asset—images, fonts—optimised …but maybe not from day one.
Making sure that each page has good metadata—Open Graph? Twitter Cards? Microformats? Maybe even AMP? Sure …but not just yet.
Having gorgeous animations? Again, I really want to have them but as Val rightly points out, animations are an enhancement—a really, really great enhancement.
If anything, putting the site live before doing all these things acts as an incentive to make sure they get done.
So when you see the new site, if you view source or run it through Web Page Test and spot areas for improvement, rest assured we’re on it.
Friday, January 6th, 2017
Chris redesigned CSS Tricks and it’s got some really nice touches. I particularly like the stacked card view on mobile.
Friday, December 16th, 2016
Ethan redesigned. It’s lovely.
And now that the new site’s live, I realize I’d like to keep working on it. I’m not just feeling excited to see where it goes from here: as modest as it is, I’ve made something I’m proud of.
Wednesday, November 2nd, 2016
Andy is sticking with the indie web.
Here, I control my words. Nobody can shut this site down, run annoying ads on it, or sell it to a phone company. Nobody can tell me what I can or can’t say, and I have complete control over the way it’s displayed. Nobody except me can change the URL structure, breaking 14 years of links to content on the web.
I second that emotion.
Tuesday, May 24th, 2016
Ariel and Lisa have redesigned the excellent Spacehack site and it’s looking stellar!
Wednesday, May 4th, 2016
Monday, May 2nd, 2016
Mike’s blog is back on the Indie Web.
As someone who designs things for a living, there is a certain amount of professional pride in creating one’s own presence on the internet. It’s kind of like if an architect didn’t design their own house.
Wednesday, November 18th, 2015
Paul gives the lowdown on the Google+ responsive relaunch. They set themselves this performance budget:
- 60K of HTML,
- 60K of CSS,
- 60 frames per second animations, and
- 0.6 seconds latency.
And this bit is crucial:
Saturday, April 11th, 2015
SmashingConf Oxford 2015: Richard Rutter on Don’t Give Them What They Want, Give Them What They Need
A great case study from Richard, walking through the process of redesigning the website for the Royal Borough of Kensington and Chelsea.
Wednesday, January 28th, 2015
The Guardian have hit the big red button and made their responsive site the default. Great stuff!
(top tip: don’t read the comments)
Wednesday, July 2nd, 2014
A new website for dConstruct 2014
dConstruct 2014 has a new website. Huzzah!
When I announced the original website two months ago, I was very, very excited about the line-up, but I was less excited about the design of the site itself. To be honest, it was a somewhat rushed affair. It did the job but it didn’t have much pizzazz. I had some design direction—colour, typography, texture—courtesty of Mikey, but I didn’t push it to do anything very interesting.
So Mikey took some time to iterate and revise, and he came up with a gorgeous new design. I think this does a much better job of capturing the spirit of dConstruct.
As well as a revised colour palette and lusher textures, there was also opportunity to do something quite playful in the masthead. Making sites for our own projects always presents a nice opportunity to try out some whacky stuff that we might not get a chance to do on client work.
In this case, the plan was to play with the theme of this year’s dConstruct—Living With The Network—and use it as part of the visual design, literally networking up parts of the interface.
It was a nice chance for me to play around with canvas. But I didn’t dive into code straight away. I had a think about how I could add this an enhancement to the responsive layout.
My plan was to generate a canvas element under the existing elements in the header using
z-index to keep them separated while maintaining the appearance of having everything connected up.
It worked out pretty well. But I wanted to push it further. How about making it an interactive element that responds to the user?
I know, I know. It’s very silly and frankly a bit wanky, but y’know, it felt like it would be nice and playful.
I had no idea how to do it though. At an internal code review here at Clearleft, I demoed what I had so far and asked for advice. The general consensus was that I should probably be using SVG rather than canvas for making interactive graphical elements. They’re probably right, but I distinctly remember learning about hit detection and mouse events in canvas during Seb’s excellent Creative JS workshop.
So I stuck with canvas and fiddled around with numbers until I got to something that felt lke it reacted nicely to hover events (or touch/clicks if hover isn’t available …or even if it is).
requestAnimationFrame was a godsend when it came to getting smooth animations.
Have a play with it. It’s hard to miss. It’s not exactly a subtle easter egg.
The content of the site remains much the same. While I was disatisfied with the original visual design of the site, I’m still pretty chuffed with the copy.
One small change I made was to give the code of conduct its own page (and expand on it a bit). Previously it was included with terms and conditions but there was a good chance that it could’ve been overlooked there.
Anyway, I hope you like the new site. I think Mikey did a terrific job with the design and it was a lot of fun to put together …especially the silly wanky bit. The only slight disadvantage is that the page weight comes in slightly larger than the previous design. But I’ll keep optimising to see if I can shave off some bytes here and there.
Oh, and you might notice one significant change on the home page. In addition to the speakers that are currently listed, there’s an addendum that reads “…and more”. That’s because the line-up for this year’s dConstruct, awesome as it is, is not yet complete. It’s going to get even better.
If you don’t have your ticket to this year’s dConstruct yet, what are you waiting for?
See you on September 5th.