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.
In an interesting development regarding web standards and the browser wars, Ars Technica reports that Mozilla is taking Internet Explorer’s problematic webpage rendering into its own hands starting with a plugin for HTML5′s canvas element.
IE’s shortcomings won’t hold back the Internet for much longer, however, because Mozilla plans to drag IE into the next generation of open web technologies without Microsoft’s help. One of the first steps towards achieving this goal is a new experimental plugin that adapts Mozilla’s implementation of the HTML5 Canvas element so that it can be used in Internet Explorer.
Vladimir Vukićević says it’s “a very direct way of getting 2D (and soon 3D) graphics into web pages, and removes many of the barriers between developers and graphics rendering.” Here’s a screenshot of how it works:
HTML5 Canvas on IE, by Vladimir Vukićević
Mozilla doesn’t stop there, though. It plans bring its “next-generation JavaScript engine directly into Microsoft’s web browser” through a project called ScreamingMonkey. The plugin strategy will also be employed here.
Mixed reactions
Reactions from the crowd range from amusement to confusion to outrage. On the one hand, this move from the makers of the record-making Firefox browser is commendable. It shows that in the midst of IE’s dominating market share and FF’s sheer drive to beat it, Mozilla still wants the Web to work, one way or the other. Even if it means having to “drag IE” itself. Indeed:
Is it a sad or happy day for Microsoft, when their competitors get bored with beating them, and instead try to improve the Microsoft products to make them competitive – for free?
And what does Microsoft have to say about this? Isn’t this an insult wrapped inside a well-meaning gesture since it is coming from a competitor? Anything that gets Microsoft’s attention to hurry things up in the web standards compliance department is okay by me.
Try Adobe
But it’s not just about the browser vendors but the users themselves. How many of them will take the time to install this not-so-popular plugin? Do they care enough to see the advantages? Ars Technica thus wonders if Adobe could have been the better messenger, since Flash is ultimately indispensable these days:
This is purely speculation, but If Adobe decided to ship Screaming Monkey and the Canvas functionality as part of the next major iteration of the Flash plugin, it would rapidly accelerate adoption and get it onto lots of computers.
Cross-browser nirvana? Not quite
News of this plugin suggests that it’s taking a so much effort to make IE play nice that even competing browsers have to step in. And we’re only talking about the HTML5 canvas element here, a far less common feature, or should we say issue, than things like the double-margin bug or pixel font sizes.
Mozilla Labs, already releasing innovations that hint at the Web in the coming years, has launched the Concept Series. This is an initiative that pushes for the “development of the online experience” where everyone can contribute.
We’re hoping to lower the barrier to participation by providing a forum for surfacing, sharing, and collaborating on new ideas and concepts. Our goal is to bring even more people to the table and provoke thought, facilitate discussion, and inspire future design directions for Firefox, the Mozilla project, and the Web as a whole.
Concepts may take the form of Ideas, Mockups or Prototypes.
The Concept Series starts strong with several concept videos from Adaptive Path, Wei Zhou, and Aza Raskin.
Aurora Concept Video by Adaptive Path
Lifestream - Redesign history and bookmarking by Wei Zhou
Firefox Mobile Concept Video by Aza Raskin
Of the three, Aurora is clearly the most ambitious as it demonstrates with 4 videos how future web browsing will be completely intuitive and pervasive. Websites can share information with one another so that a user can extract relevant information. The Web will continue to act as information provider regardless of location or the real-world objects and situations he is dealing with.
Multitouch technology is also gaining traction as the ideal way to interface with the Web. Specially assigned gestures will become especially convenient on small mobile devices. Mimicking a 3-dimensional space is another popular concept which also addresses space constraints. And of course, aside from advances in software, hardware will also play a major role in the interactions onscreen.
What’s your idea for the future of the Internet? Contribute to the Mozilla Labs Concept Series and have your say. Remember, the best way to be prepared for the future is to make it ourselves!
*/
