fog of eternity » Design Inspiration

Be Inspired By Artists, Not Websites

Robin Cannon — Tue, 09 Feb 2010 12:42:56 +0000

Web design shouldn’t be the inspiration for more web design. It’s vital for the medium to look externally for ideas. Unfortunately, that often isn’t the case. Social networking tools like Twitter or site submission sites like DesignFloat encourage a limited viewpoint. They’ll provide you with examples of great web design. But it’s design that’s already been done. To avoid a descent towards generic and uninspiring results, it’s vital to look to other mediums. Great design is art, and artists seek inspiration everywhere.

All artistic mediums have talented and visionary artists. Move away from looking at other websites, and look at art. Here’s an example of some artists who don’t inspire me and inspire my work.

Grace Coddington

Grace Coddington is the Creative Director for American Vogue. She doesn’t see fashion as business, she sees fashion as art. She’s also an artist who truly understands the importance of art that tells a story. Her fashion spreads in Vogue have a coherent narrative. This narrative not only highlights great fashion, it engages the emotions as well.

Take a look at “Brief Encounter” from the February issue of Vogue. With creative direction from Coddington and photography from Annie Liebovitz, it demonstrates two masters of their art working in harmony.

Gerald Scarfe

It’s pretty impressive to be able to move seamlessly from political satire, to rock music, to Disney productions. Cartoonist and illustrator Gerald Scarfe manages it. He’s been drawing satirical cartoons for The Sunday Times for more than forty years, for the New Yorker for nearly twenty, is responsible for the visual creativity of Pink Floyd’s The Wall, designed theatrical sets and supervised nearly a thousand artists on Disney’s Hercules!

There’s a certain visciousness in Scarfe’s artwork that sets him ahead of any other satirist I know. His cartoons have been described as “savage”, demonstrating his ability to provoke genuinely visceral responses.

Irrational Games / 2K Marin

Are video games art? It’s a question that’s been answered far more in the positive since the 2007 release of Bioshock. Games with great graphics are common. Games with a genuine creative vision are not. Bioshock created a dystopian vision that treated gamers as mature and intelligent, drawing on inspiration from the likes of Ayn Rand and George Orwell. In creating the underwater city of Rapture they created a truly original, intimidating and moving setting, realised in both visual appearance and underlying concept. Bioshock 2’s recent release continues that vision. Of course, such a vision would have disappeared without a great game to support it, which thankfully they also achieved!

If you have the opportunity, download the “Art of Bioshock” PDF (75 MB) for a real understanding of the development of the vision, and take a look at the Cult of Rapture.

Valentino

A second fashion oriented artist, but then fashion is one of the most original and creative industries around. An Italian fashion designer who worked in the industry for fifty years before his retirement in 2008, Valentino Garavini inspired and dressed fashion icons from the 1960s to the present day. Valentino’s design achieves opulence without ostentatiousness, and his use of color inspiration from the natural world is superb.

Clearly, despite his retirement, Valentino the fashion company remains heavily influenced by his work, as demonstrated by their Spring/Summer 2010 Haute Couture line.

Inspirational Fashion Design From The Tudors

Robin Cannon — Mon, 12 Oct 2009 19:59:17 +0000

I was at the Texas Renaissance Festival this weekend, a great event. I’m lucky enough to have an extremely talented wife who can make costume and dress from that era from scratch. I love the fashions and style from the Renaissance and Tudor era. Not only do the women’s dresses look remarkable, it’s also an era in which men’s clothing was also ornate and eye catching. I’ve spoken regularly about the need for web designers to seek inspiration outside of the online world, and this kind of ornate fashion seemed a good source.

I’ve chosen to showcase some of the costumes from the TV show The Tudors (or “sex and corsets” as my wife calls it). For all its historical inaccuracy it’s a great show, and the impact of the costuming is a big part of its overall impact.

The Women

Maria Doyle Kennedy as Catherine of Aragon

Gabrielle Anwar as Princess Margaret

Natalie Dormer as Anne Boleyn

The Men

Jonathan Rhys Meyers as King Henry VIII

Steven Waddington as the Duke of Buckingham

Henry Cavill as Charles Brandon

Photos And Art To Inspire Creativity

Robin Cannon — Wed, 30 Sep 2009 16:49:24 +0000

There’s just so much great artwork out there these days. My general inspiration is coming less from other good websites and more from photography, graphic art, advertising and other mediums. The distinction between the mediums is blurring these days, as greater technical capability allows us more scope in web design. Having that kind of scope means that we need to take the opportunity to use it though, and to allow ourselves a wider source of inspiration than just online.

Here’s some particularly inspiring images and art that I’ve come across over the past few days.

New Illustrations

Raul Allen on Behance Network

Napapiiri Jeans Look Book

Ossi Gustafsson on Behance Network

Amelia Earhart for Marie Claire

Giuliano Bekor on Behance Network

Tifa Lockhart

Ravenskar showcased at Designflavr

Meltin Pot Hotel XXX

Winkler + Noah showcased at Dirty Mouse

How To Draw The Eye – Photographic Inspiration

Robin Cannon — Mon, 11 May 2009 13:42:21 +0000

Fashion photography is designed to highlight aspects of an image, and to make a great aesthetic whole as well. It’s a skill that’s vital for website design too. We want our site to look great all round, but most sites also want to highlight a call to action within that design. Here are some great fashion shots from Behance. They use different methods to focus our eye on different aspects of the images. See if you can work out what those methods are. Can you use them in your website design?

In Full Bloom 07

Andreas Stavrinides’ Behance Portfolio

The Blood Show

parachute before fall

Rinze van Brug’s Behance Portfolio

Wonderland

Architectural Styles In Website Design

Robin Cannon — Thu, 23 Apr 2009 15:29:28 +0000

Great websites are like great buildings, a perfect combination of form and function. Architectural design and styles translate well to a digital format, so it’s surprising how little architectural inspiration there is in web design.

Using Architecture As Inspiration

I created a body section of a website inspired by art deco architecture. The outcome gives a powerful visual effect. The lines are strong but easily incorporate the usual content of a web page. The site itself is in draft format but the architectural styles are a great canvas to work from. Take a look at the draft page.

I developed the body outline using scanned pictures of just three art deco buildings, and Photoshop and Illustrator work. If you’re a Londoner then you might recognise some of the aspects of the page.

The top of the body is a combination of two building outlines.

Victoria Coach Station

Not one of the most obvious pieces of deco architecture in London, the coach station has strong lines and an imposing facade. The tower works well to contain a heading or logo.

Battersea Power Station

This is one of my favourite buildings. The four chimney stacks are a memorable feature of London’s skyline. I added two of the chimney stacks, and moved them close together, for the left side of the top of the body. This could be used for a logo or tagline, visual effect, or menu items.

Grosvenor Cinema, Rayner’s Lane

I loved the curved frontpiece. Adding this shape to the footer section worked really well. The large ‘head’ section of the curve is the perfect size forfooter information. The strong curve avoids the boxy outline that so many websites have.

Methods

Putting these pieces together was pretty simple. I used the pen tool in Photoshop to outline shapes, and smoothed out the corners. I used the Ellipse Tool to get exactly the right dimensions at the top of the chimney stacks. I combined the chimney stacks and Victoria Coach Station silhouette into a single header image. For the lines of the Grosvenor Cinema frontpiece I used the Ellipse Tool and made curves with the pen tool, using the original image as a guideline.

All the images were simple black outlines. I turned them into vectors in Illustrator so I can use them in different ways in future. Then I just made the header and footer pieces 960 pixels wide to match the width of the website body and everything fit into place perfectly.

Wider Thoughts

Deco is just one of a multitude of architectural styles. There are great examples all around, from family homes to medieval cathedrals. Architecture also provides textures and color mixes that work well. You can even use architectural design to give hints about user interfaces and navigation – in a well designed building you can find everything easily even if you’ve never been there before. Take some time to look at architectural inspiration, it translates a lot better to the web than you might think.