How I designed a website that will smash you in the face (in 3 steps)
First presented as a talk for Second Wednesday Nottingham and klick Birmingham titled ‘Playful by Design’.
That felt WAY too “in your face” and I mean that literally. I felt like a site had been smashed in my face. — Kyle Adams on Designer News
I designed an identity system for Playful, a one-day creative conference in London. Each year the conference has a theme—2013's was ‘Playing with form’.
Step 1
The inspiration
The theme — playing with form — promised a unique perspective from the Playful speakers on approaches, materials, and using them differently, creatively and playfully.
As things began to develop in the early stages I saw some fun coming out of using illusions.
Working with Gregory Povey and the Playful team we decided we liked the idea of messing with people almost to the point of annoyance.
I was inspired by Siggi Eggertsson when thinking about visually interesting ways of showing form.
Eggertsson uses his own geometric grid system to create wonderful designs. He uses contrast and colour to create form as you step back to see the bigger picture.
I remember seeing Milton Glaser (designer of the famous I❤NY logo, for those who don’t know) at a conference in New York way back in 2010. He talked about an identity he created for the School of Visual Arts Theatre and how it was developed alongside the interior design.
They’re both really expressive and use form to carry their message.
Step 2
The final design: moiré effect
In mathematics, physics, and art, a moiré pattern is a secondary and visually evident superimposed pattern created, for example, when two identical (usually transparent) patterns on a flat or curved surface … are overlaid while displaced or rotated a small amount from one another. — https://en.wikipedia.org/wiki/Moir%C3%A9_pattern
The moiré effect I created for Playful really came to life when applied to digital, and was surprisingly easy to pull off. Just a mixture of overlapping fixed-position elements — no JavaScript, just CSS.
The team really liked it — it fitted the theme of the day and was visually arresting and memorable (as a pre-event marketing website should be).
Step 3
The reaction
An interesting design gets a reaction. As well as being featured on SiteInspire and in a Smashing Magazine article, I had a little search on Twitter and around the web to get a round-up of people’s thoughts on the design. Here are some of the bad along with the good!
The Smashing Magazine article noted the use of axial typography which you’d normally expect to see in print design.
My eyes :(
— Marian M. on DNMy neck!
— Tyler Howarth on DN
Some people had mixed opinions.
Understandable that they would want to make a design to stand out for the type of conference it’s promoting but to sacrifice usability and readability for it is madness. That background was incredibly distracting and the sideways text? Really?
However, it was pretty damn beautiful visual experience to scroll down that site. — Adrian Cooney on DN
Some people just plain didn’t like it.
thisispainful.com — Lucas M. on DN
Let’s end with a positive one!
So, if you were to take anything away from this article it’d to be playful with your design. Think about how you can achieve an interesting visual that makes sense for your project and always push the design past its breaking point— you can always rein it in if you need to.
And that’s it
Follow me and my studio on Twitter!
What’s your reaction?
Did you like the design or did it give you a bad neck? I’d love to hear your response below.
If you enjoyed reading this article, I would appreciate
it if you Recommend or Share it.
Thanks for reading!
