Inspiration comes in many forms for me: poking around on dribbble, looking at CSS galleries, reading a thoughtful article, or simply taking a walk. I look less for things I want to emulate but more for things that are unique and inspire me to do something just as unique.
During my search for inspiration for the new Sparkbox site (coming in 2013), I stumbled across a few very nicely designed responsive websites and thought I’d share them. A couple are fairly new, and a couple have been around a while. Enjoy!
Sidenote: This article strictly focuses on design and does not contain commentary on development technique or code.
2012 Build Conference
One of my all-time favorite responsive websites is the 2012 Build Conference site. Designer-ly speaking, I love the minimal color palette, CSS transitions, killer icons, centered layout, and beautiful typography. What I love most is that the site is also well-planned from a content standpoint, making it easy to get to the information you need. The designer, Kyle Meyer, wrote an interesting article on the reasoning behind the length of content on the homepage.
I’m also a big fan of how the site responds. It’s one of the few responsive sites I’ve seen that doesn’t have an awkward, “adolescent” tablet-width layout. Design elements adjust nicely without losing their design integrity and spacing.
Typecode just launched a nifty site not too long ago, and it made its rounds in the CSS galleries. While I’m not a huge fan of the landing page, from a design perspective I absolutely love how the work section is handled. We’ve had much discussion at Sparkbox HQ about how to handle our work section, and this is a great example of one that works well visually at all resolutions.
The Foundry Collective
I’ve admired Foundry Co.’s new site from the time it launched with much fanfare in the industry a few months back. It’s simple and easy to navigate — there’s really only three main pages — yet there’s enough interesting little details (check out the Agency page) that make it fun to explore. On top of this, its minimal design translates really well to responsive. I also applaud the use of the minimal color palette which makes the thoughtful design of information hierarchy so critical, and it lets their exceptional work stand out.
Super Eight Studio
The responsive SuperEight Studio site is another simple, minimal design approach (sensing a theme here?). I’m enjoying the use of large, chunky type and generous white space surrounding photos and text. One potential drawback to this type of design — on mobile devices the page can get really, really long. However, they’ve done a really nice job of collapsing the content height down when it is at a smaller width. The design itself has a fun, airy aspect to it which nicely complements the style of their work.
The first thing I noticed about the Always Creative site is the nice use of typography. Whenever Proxima Nova, Tisa and Alternate Gothic are used together, I’m a fan. It’s almost not even fair. Beyond the type, the site invites the user to scroll to navigate by using headlines surrounded by 100% width areas of color with subtle textures. Also, the work section treated as almost an off-canvas element is an interesting approach.