jQuery Roundup: Go Flat!

2013-06-11 00:00:00 +0100 by Alex R. Young
Note: You can send your plugins and articles in for review through our contact form.

Apple's iOS 7 was announced yesterday, with a divisive flat-design-inspired interface. Some have called it out for having inconsistent icons, and others have praised it for exploring the z-axis.

Designmodo's Flat UI.

Flat design isn't new to the web. A few months ago, Designmodo's Flat UI burst onto the scene, grabbing a huge amount of attention on Hacker News and reddit. Bootstrap 3 also has a decidedly flat and minimal aesthetic.

jQuery Mobile Flat-UI Theme is based on Designmodo's project, and brings some of these design conventions over to jQuery Mobile.

If you're looking to really take a bite out of Apple's iOS 7 design, the use of transparency effects might edge you closer to Jony Ive's aesthetic. You could use something like Blur.js (GitHub: jakiestfu / Blur.js) to get a jQuery plugin API for transparency, or just write the relevant CSS by hand.

Although themes and plugins are useful, the focus of modern flat design seems to be on colours. Choosing a suitable palette can be difficult, but there are shortcuts. I liked Daniel Jalkut's post on Adobe's Kuler -- the iPhone app can be used to generate colour palettes from the camera, which Daniel describes as "granting superpowers to users".

For more inspiration, plenty of flat design gallery sites have started to spring up -- fltdsgn.com is one that I've enjoyed flicking through.

As interesting as Apple, Google, and Microsoft's recent shift to flat design has been, doesn't it seem a little bit reminiscent of the past?

You can't get flatter than this! Source: Operating System Interface Design Between 1981-2009.