By Chris Spooner

Responsive layouts

I’ve been secretly working behind the scenes on a redesign of Spoon Graphics since June, but after 4 months of hard work and a little help from a friend I’m proud to introduce my website’s new look. Previous redesigns and refreshes have been quite conservative evolutions, but I think this new design takes a leap forward into modern web design while retaining the original character of the Spoon Graphics brand from 2007. Let me take you for a little tour and show you what’s new!

Responsive… Finally!

When I last redesigned this site in 2012 I documented my thoughts about responsive design. I decided that due to the nature of the content I post (long articles with lots of images), the inability to pinch and zoom would cause more of a usability issue with users having to frantically stroke their device to reach the bottom of the page. But now Google penalises sites that aren’t mobile friendly, so I was left with little choice but to go forth and responsify. I hired my designer friend and Battlefield comrade Matt Kersley to help build a responsive framework from my PSD design concept, upon which I could add the general styling to finish off the design. You’ll now see different layouts for mobile, tablet and desktop views depending on the viewport size.

Key design features

Some of the page elements have been influenced by earlier designs to maintain some consistency, but there’s a bunch of key features of this layout that make version 7 quite a radical redesign:

Hero feature images

Hero image

The biggest change for version 7 is the introduction of the large hero images for each post, which was an idea I had from the start so the whole redesign was actually based around this one feature. It contains a large post thumbnail image, a supersized title and the post meta information, but the coolest part is it picks the colours for the background and typographic elements from the image itself to generate unique colour schemes that complement each post.

Backgrounds that bleed

Bakcground bleed

I have as much of an interest in print design as I do digital design, so one idea I had was to incorporate bleed into my website design by extending certain backgrounds right to the edge of the page. Not only does this fill out some empty space on large resolution monitors, it also reinforces the custom colour schemes for each post. It’s easy to skim the page and see where the various sections start and end.

Revamped social shares

Shares count

With all my tutorials and design resources being free, my blog relies on a steady flow of traffic to generate revenue. Having posts shared on Twitter, Facebook, StumbleUpon, Pinterest, etc are the best ways my posts get seen by others, so I made use of a premium social plugin to create a more eye catching and consistent series of social buttons. This plugin also adds up the total number of shares, which I got Matt to customise with a cool counting animation to visualise the success of each post. Custom shortlinks are also provided, so it’s easier than ever to recommend my content with your friends!

Prominent sign up forms

Subscribe form

My email newsletter is the best way to keep up to date with all the content from Spoon Graphics, over 70,000 people are now subscribed to receive notifications of new posts. My free bundle of design resources has been a great incentive to persuade people to join, but it’s now so big at almost 600mb, the old product box mockup from the old design just didn’t do it justice. The bundle has now been upgraded to a massive wooden crate, which is virtually delivered to your email inbox when you sign up! Hopefully this will recruit more first time readers into the Spoon Graphics community.

A matching newsletter too!

Email newsletter

My newsletter has been revamped to complement this new design too. It also features a large header image and all the same typographic styles as the main website to provide a consistent brand image.

Next post popups

Next post popup

With 8 years worth of content, there’s plenty of stuff for new visitors to check out. To prompt users to browse my other content, the next post banners now pop up from the bottom of the page when the user has finished reading the current article. These banners are also colour coordinated to the content they’re promoting, so they clearly stand out and differentiate themselves from the rest of the page.

Is anything broken?

Testing was done in the major browsers to ensure everything was looking as it should, but if you see anything that doesn’t look quite right it would be a great if you could let me know. A screenshot would be super handy too! Let me know your thoughts on this new design down in the comments. Do you love it? Hate it? Would you have done anything differently?

The post A New Look for Spoon Graphics. Welcome to Version 7 appeared first on Spoon Graphics.

Read more here:: A New Look for Spoon Graphics. Welcome to Version 7