Swirling in Style (and ‘elements’ in design)

Posted by Andrew Faulkner on June 7th, 2007.

Andrew Faulkner is the admin at fadtastic. Andrew prides himself on standards-based, accessible web design in the city of Nottingham, UK. He believes in aesthetically pleasing accessible design and that 'standards compliant does not equal boring.'

http://fadtastic.net/

Andrew Faulkner has posted 208 articles.

RSS Feed for fadtastic.net RSS Feed for Andrew Faulkner

Full Profile →

It’s been a while since I last wrote about particular graphical touches. So let’s get back to graphic design trends (a topic which I know many of you love) - those cute little design styles that can make or break a site. Whilst browsing a few web design galleries today I noticed that a few sites had something in common - swirls.

Swirls? An example or two would be nice…

Such a technical name deserves a description. When I say swirls in this case I am referring to the aesthetically pleasing sweeping lines as shown in the examples below:

http://www.putput.cat/
http://www.glashaus-design.com/site/glashaus.html - (Hover over menu)
http://student.opendoorsuk.org/
http://screenfluent.com/

So, about the fad

I’m not saying for a moment that this is a new design technique, but I believe that it has only recently become popular. It’s now working its way in to the designers arsenal of basic design elements. And this where I have a small (off-topic) point to make. The word elements. I often view a web page as a set of design elements and group these elements into two categories - active and passive. Active elements are parts of a web page that are useful/necessary; like links, whitespace and headers for example. Passive elements don’t aid the user in any way (sometimes they annoy); for example some gradients, patterns and gloss.

Swirls, in the example above, are passive elements. They don’t add anything to the content or aid the user in any way. But without passive elements, designs can seem drab and unoriginal. They can hold a design together and add interest for the user. Not necessary then, but worthwhile. The passive elements group is where most of the graphical trends on the web can be placed.

Back to swirls then. What do they add? In the examples above, I’d say it is a mixture of three things. These are:

Balance
Like rounded corners, these swirls balance the square, clean-cut nature of a web page with arcs and circular shapes (as shown in PutPut). It’s pleasing to the eye to see these fluid shapes mixed well with square edges.
Fun
Why can’t the world of design have some room for fun? Screenfluent and OpenDoorsUK use swirls to add a fun, quirky atmosphere to their pages. And why not? Works for me.
Class
Class is hard to show on the web. Do you go minimal? Glossy? Serif-based type? The swirls shown in Glashaus (menu hover) add a unique touch to the site. Those swirls really add elegance to the design.

Conclusion

Whilst I doubt that swirls are the next gradient or wet-floor, it is looking fairly promising for the humble swirl in the months to come. If you do spot any around, please drop a comment below.

I’d also like to ask your opinion on this graphical touch. Do you like them (in the examples above)? Have you seen bad examples of this?

Over to you.

Share This

( 6 so far )

Comments RSS Feed

Swirls are a design trend that, frankly, I’ve never really got on board with, but I do think it’s a sweet effect.The mentioned examples are really good at making use of the swirl to make their pages much more attractive. I just think it’s a little more difficult to master than rounded corners or fading borders.

Ron S
June 7th, 2007
#

Funny you post this as I’m now in the process of wrapping up a site design that uses swirls! I hope this is a sign that I’m at the tip of the trend…hehe.To add to Ron’s comment, it can be hard to make swirls look organic (or anything, for that matter, with a computer), I spent a lot of time tweaking to get mine just right. Oh, and creating a seamless tile with said swirls, ugh what a pain! But in the end I liked the effect and it complemented square corners nicely.A tip for anyone playing with swirls - try the Illustrator Twirl distortion tool on some random lines/strokes and see what happens!

Rachel
June 8th, 2007
#

Ron: Maybe the reason why it is not as easy to produce graphically means that it is less abundant, and therefore more desirable.

Rachel: Please let us know when it’s done - I’d love to see another swirl example. Tiles and swirls - a difficult technique to master! :)

Andrew Faulkner
June 8th, 2007
#

so how do you make them???

Jenny
June 28th, 2007
#

Jenny,

I think the swirls mentioned here would all be created slightly differently. Or are you asking about tiled swirls?

Andrew Faulkner
June 28th, 2007
#

I love swirls, especially when they’re juxtaposed with very minimalist, boxy elements like they are on the Glashaus Design site. Instead of making them a final graphical touch, I made swirls the primary design element in my site’s recent redesign. What do you think - effective, too much or too little? http://www.rupadasgupta.com/

rupa
October 3rd, 2007
#

↑ Jump up to the comment form

The above post has obviously kept you amused. Why not discover similar material:

The posts A Time To Shine, BBC Radio / Brand Portfolio Brought Into Line, Links that make you blink twice!, Joe Dizon on starting your web standards journey., About fadtastic.net, are related to this post.

Or why not take time out to find out about the author of the post.