Go origami: fold your designs away

The three-dimensional, folded look hailing from the fascinating art of origami has been circling my design radar for a while now now. Let shop around for a bit of inspiration and see how you can inject it in your own work.

A really short history of Origami

Origami is a Japanese word that literally means “folded paper”. While the term itself showed up only as recently as 1926, it’s been around much longer, as the use of cut and folded paper was first used in religious rituals. It was during the Heian period, when paper became a more abundant commodity, that origami branched out into a form of entertainment. There is documented proof that paper folding developed independently in Europe as well.

Get the look

The easiest way to go origami is to use imagery that actually follow how folded creatures and objects look like. In this case, the website Tori’s Eye uses birds. It takes a step further and gives different textures to the background to match the playful, crafty feel. Top it off with some JavaScript animation and you’ve got yourself a stunning origami-inspired website.

This one is a less literal interpretation of the origami look. The idea is to use a lot more diagonal lines instead of just perpendicular and parallel ones. The shapes behind the main content area seem to be mimicking sheets of paper stacked together, but keep it abstracted with transparency effects. This happens again in the background.

Ian Soper’s site looks it has a long sheet of paper with many folds standing upright. Spreads for iPad does the same thing, but vertically.

Fonts

Choose more angular, abstract typefaces for a nice origami effect in text. There are a ton of origami-inspired alphabets out there, so I’ll just list fonts you can actually use:

Origami font by Formfound (Peter Fritzsche) (free for personal use)

Cube font by Fontfabric

Cube 02 font by Fontfabric

Quad font by Fontfabric

Facet font by Fontfabric

You can also use dingbats and other similar accents:

Origami Bats dingbat font by Lauren Ashpole (free for personal use)

Logos

Color and shade are playing a bigger part in current logo trends so it’s no surprise that illusions of three-dimensional effects, including folded shapes, are popular right now. The logo for Simpla CMS is one such example.

These logo concepts by TKhoury actually use the folded effect to convey more meaning.

Some closely related techniques to be inspired by: cubism, facets, hexahedrons, ribbons, quilts, mosaics, optical illusions.

Icons

This social media icon set by Paddy Donnelly is a breath of fresh air from all the other ones out there. Adding these to websites short of mandatory lately and if you’re adventurous enough, why not go for this almost abstract look? Or make your own—it’s a great exercise for deconstructing recognizable logos.

Buttons

I know that rounded corners, especially with “the new (CSS3) hotness”, are not only trendy but have also been psychologically proven to appear more friendly and thereby more clickable, but you can still apply the basic idea of making sure a button looks like a button while retaining a more geometric, less marshmallowy feel: use gradients, bevels, and shadows.

You could even go the opposite route and apply the sharper edges on buttons you don’t want users to click, which Jeff Atwood calls The Opposite of Fitts’ Law:

Uncommon or dangerous UI items should be difficult to click on!

The spiky button is an exaggerated example, but the idea is sound: apply the less welcoming look of hard edges on the buttons you don’t want users to click on.

Backgrounds

It’s the easiest and most recognizable way to incorporate a certain look in a design, and you can pick from a variety of options: patterns, textures, or photographs.

Mediasoldier uses a folded paper pattern in the header background that really captures that origami feel but also matches the grungy and grid-loving look of the site. It also mixes with two other backgrounds: the striking cracking concrete wall, and the subdued diamond fence.

Other Design Touches

Will graphics be prominent in your design? Give them a 3D twist. The illustration on Cogaoke is an excellent style. Bonus points for imitating Japanese character styles in the text “happy”.

Dog ears and page curls can be elegant additional touches instead of distracting and annoying. And although Cleverclick’s design isn’t so obviously origami-like anymore, the still exudes its minimalist, organic sensibilities.

Fold away

Origami is a great design concept to build upon. Experiment with shapes, shadings, and space to come up with an edgy look—literally.

Facebook chooses consistency over rounded corners

Just about the time it’s become almost trivial to create rounded corners, Facebook suddenly decides to go back to its originally boxy, “razor cut” look. In the announcement, the Facebook design team reveals its priority:

Since we introduced rounded corners to Facebook, their consistent use has been spotty at best. The corner radii vary, and it sometimes feels arbitrary which corners are rounded and which are not. Additionally, they add an extra layer of complexity to the code (note: IE, please add support for border-radius).

As part of the effort to simplify our visual style, the design team recently decided to go back to our square corner roots. In doing so, we hope to champion cleanliness and the razor cut look that Facebook is known for.

That’s choosing consistency over the popular choice to go with rounded corners just because it’s a recommended design pattern. Not everybody would have the guts to do that.

Heck, it takes guts for Facebook to keep tweaking its interface, because at each turn it’s spurned so many protesting groups that keeping track of which one is against which feature becomes futile. For all we know, new groups protesting this rollback will surface yet again.

But Facebook always knows what it wants, it seems, and always sticks to its guns. Given the current design trends—from “Web 2.0″ gradients, candy colors, large fonts, and rounded corners, to Apple-inspired interfaces, to the highly detailed grunge and Victorian textures—would you, as a hypothetical head of the Facebook design team, have come up with something like its current look? Or would you have changed it? Save for the already-gone rounded corners, people wouldn’t have pegged this site for a spawn of the Web 2.0 era. It didn’t feel the need to look like one. Its features already spoke volumes.

Let’s talk feature redesign. The most controversial one so far, which put the status updates on the homepage, has also redesigned the social networking design pattern as a whole. It’s not just a copycat of the Twitter or FriendFeed (which it just acquired) interface, but emergence of the Real Time Web had a lot to do with it.

Back in the glory days of MySpace and Friendster, Facebook had a chance to copy its ability to ultra-customize profiles with custom CSS and background images. And there was a time when FB’s apps messed up profiles that things almost looked as horrible as any MySpace or Friendster page, but Facebook once again swept in and prioritized consistency. Over total freedom.

Facebook always seems to be choosing the unpopular, unconventional path, but it’s now the most popular social network on the planet, and the 3rd most popular site in the world second only to Google and Yahoo! They must be doing something right.