If you haven’t noticed, the springfield connection has recently redesigned. Last time we redesigned, coming up to three years ago, I wrote a post on here about why I did it and explaining the process and thinking that went behind it, so I thought I’d do a similar thing here. Hopefully you might find it quite interesting.
I absolutely loved the old design, but I felt like it was just starting to get a little bit tired. As a web designer, you have to try and keep one step ahead, and I didn’t want the site to look stale. I always envisaged that when I stopped doing regular updates, the old layout would be perfect for showcasing content – and I still do. But, for a serial redesigner like me, the almost three years that the old site had was pretty unprecedented. That’s not to say that I redesigned for the sake of it – far from it – but I’m the sort of person that’s always thinking and drawing up new designs. Half of them don’t go anywhere, but when I started drawing out what would go on to become our new design on Photoshop, I just had a feeling that it could work really well. I was mulling over it for a few weeks before deciding last October that I was going to go ahead, and I started coding the homepage on October 21st.
A bit about the design, then. Over the last eighteen months or so, a lot of the new content that I added to TSC had a consistent visual style – look at the episode guide for a clear example. Bold, sans-serif fonts, muted colours and a subtle but effective use of images, with a hint of TSC pink. I think that, as I’ve introduced this new visually appealing but simple style, it’s fitted in quite well with what went before it. The difference between serif and sans-serif fonts for the headings was a little bit jarring, but it never really bothered me. When I decided to redesign, I knew that this was the style to take forward. It was vital that all of the new designs I’ve made over the last eighteen months could slot straight over to the new design with little to no modification.
Looking at the homepage, and it’s the definition of this visual style. Muted, complementary colours and thoughtful use of images hopefully means that it isn’t overpowering. I knew quite early on that I wanted to tackle a grid layout. I loved how the old design could showcase the great, unique content that we offer, but it began to irritate me that a lot of it was hidden underneath tabs. I monitor clicks, and found that a lot of visitors didn’t click on every tab, and so missed something that I was trying to promote. I also thought that, sometimes, a piece of content – such as our guide to 742 Evergreen Terrace – doesn’t really need a huge space to promote it, but it’s worth pointing out to a new visitor because I’ve received good feedback about it. Having a grid layout meant that I could showcase a whole load of things, with different sized boxes based on how much space a link needs. Moving forward, it’s super easy for me to promote content, both big and small, from the homepage.
I was also determine that, like last time, I didn’t want a linear homepage based around site updates. The casual visitor isn’t really interested in what’s new, and my updates are rarely that interesting anyway. Aside from our updates, none of the content on the homepage is in a linear format, which allows me to be flexible and creative in presenting it. I have to say that I was really inspired by some other design trends at the moment, most notably the beautiful Metro visual language in Windows 8, and I was intrigued as much as anything to see how that sort of idea would translate into the sort of design I was looking for.
When I was coding the homepage, I realised that, with some slick jQuery, the grid could actually do a whole lot more. Something that I’m really proud of is our automatically generated TV listings. On the old homepage, these took up a whole tab. Moving them over to the new design, I wanted them to be very at-a-glance, but I didn’t want to sacrifice detail. So I devised the system you see there now – three episode titles and their airdates are shown when you first visit the page, but if you want more information, just click on the box and it expands, revealing a short summary and a link to our episode guide.
I also really wanted to promote our as-it-happens coverage of the season, so it takes up a big part of the homepage. Click on the big 23, and details for the next episode and statistics for the season so far slide in. The random episodes also change to show the last six episodes that have aired. On that point, a little touch that I love is having the last aired episode always present on the homepage, meaning you can visit the site the day after an episode has aired and know exactly where to go for all the details and reaction.
As cheesy as it sounds, I was thinking about these journeys a lot as I was putting together the homepage and deciding what to include. I want it to cater to the first time visitor, who wants to see our coolest and most unique content. A regular visitor might visit to find out what episode’s on TV that evening, and have a glance at the latest news and content from across the web with our Drain news aggregator. The dedicated fan might love to catch up with how the current season is shaping up, or review the latest episode. I genuinely feel that the new homepage would appeal to all of those visitors.
The new consistent navigation is something I’ve wanted to implement for a while, but it never would have worked with our old design. I’ve also finally taken the opportunity to move the design into the centre of the page. Inside, I really wanted to keep quite a similar structure to the old design. After all, a lot of the pages have simply moved over, although I couldn’t resist the chance to give some a lick of paint. One of the only interesting things I have to say about the interiors is the new navigation in the footer. I realised that, with navigation hidden away behind a dropdown menu, a casual visitor might not click and discover what else we have to offer. Now, however people enter the site, they’ll be able to see a wide range of content without clicking anything, either through the homepage grid or the footer.
Moving forward, I have a few ideas for where I want to take the site. I’m playing around with some more ideas for Drain, because I constantly have different theories for promoting the quality content that it churns out, and I have a bit of a killer section that will take a lot of time but would be pretty awesome. I’m also working on a mobile version of the homepage, which I originally wanted to launch with the redesign at the start of March but I just haven’t had the time. I should also add that the new design looks absolutely awesome on an iPad.
I felt that it was a bit of a risk redesigning, because I think the old site was quite well known and recognisable for the return visitor. I’ve kept so many of the elements of the old design, though, that it feels very much like an evolution rather than a revolution. I don’t think I could ever get rid of the logo, the pink or the donuts. I hope that you understand why I decided to redesign, though, and I really hope that you love the new design as much as I do. The feedback that I’ve got so far has been really positive, and my tracking shows that people are really engaging and checking out what the grid has to offer. I have to say that this will probably be the last major redesign that the site has, and I really think the site is well placed to shine even when it’s not being cared for. Although I did say that last time…Noteworthy 20 March 2012
Tagged as design, noteworthy, redesign, technical, tsc
Join the conversation
Hello my name is Andy.I am a twenty-one year old student from Liverpool, UK.
Thank you for visiting my blog.
More about me
I write about life, design, news, music and more.
Dive into the tank and take a look through the archives.
I also run a successful fansite dedicated to The Simpsons.
The Springfield Connection