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.
By “normal people” I mean those who are mere computer users, not literates nor enthusiasts nor experts. Cabel shares a striking example: in Japan, advertisers instruct potential buyers to enter specific keywords into search engines instead of their company URLs.
Clearly, a sufficient amount of search engine optimization is necessary for this to work, especially for the really famous and common-name brands. But this behavior of accessing websites did not arise because these companies have told us to do so. Neither is it limited to this Asian country.
I am sure you have at least one friend or loved one who has not grasped the concept of URLs and remains highly dependent on Google for finding their way around the web. If you’ll take a closer look at their web browsers, you’ll see why it really isn’t their fault.
Google invades the browsers
Most of the weird behavior we observe from other people is because they have Google as their homepage or built into their browsers. (You can also change the word “Google” to your favorite search engine of choice.) This usually comes in three flavors:
- the Google homepage (whether it’s plain vanilla, a Firefox-Google hybrid, or iGoogle)
- the Google search engine add-on (a common feature in all modern browsers)
- the Google Toolbar
As a result, users now have several blank input bars staring back at them—the address bar, the browser search bar, the Google Toolbar search bar, and the Google homepage search bar. Guess which one they’ll choose?
With the icons and text that draw one’s attention toward the Google search bars, the address bar fades more and more into the background. And since non-techie people are usually afraid of “breaking the computer”, they stick to a method that works well, which is to keep using Google.
Ignore or eradicate?
We can’t blame Google for trying to be the #1 product in our virtual lives; we can only be wary. But it should share the responsibility of educating users of how to use the Internet (how silly does that sound?) with the browsers. Unfortunately neither parties seem to care because: (a) Google would much rather have users search for sites than visit them through URLs directly; and (b) the browsers are earning money precisely because Google is paying them to have their search bars built-in.
Now, learning how to use the interface that lets one use the Internet is only halfway of the journey; choosing to use Google to wade through the Web is not necessarily a bad practice, as Jakob Nielsen predicted that this would become commonplace. But he also believes URLs will have to go.
In the long term, it is not appropriate to require unique words to identify every single entity in the world. That’s not how human language works.
The very nature of URLs seems to be another major stumbling block. Ordinary people don’t understand the use of a “www” and a “.com”, or that the “@” symbol is used only in e-mail addresses. They don’t know how to share websites through URLs either—unless there’s a button with explicit instructions that tell them how.
Add to that the explosion of all the domain suffixes like .me, .travel, and even .xxx. Not to mention all the malicious parties that wish to take advantage of their ignorance—stealing and spoofing personal information through misspelled URLs, search keywords, and deceptive e-mails.
The question is, if normal people aren’t using URLs anymore, what system can be built to replace them? Will it work? Or is Google doing a fine job already?
The Web would be much more chaotic than it already is without standards. Today we’re going to talk about how various content on the web is being represented by standardized icons. Several groups of people have come together and agreed upon these simple yet distinct icons for identifying syndicated, OPML, geotagged, shareable content.
It’s interesting to note how these standardized icons emerged. The OPML, geotag, and open share icons all base their design on the feed icon. They each consist of a white symbol on a square box with rounded corners. The boxes have a subtle diagonal gradient and an inner border which gives a slightly beveled effect.
Feed Icon
The feed icon was introduced to us by Mozilla and is used for syndicated feeds in either RSS or Atom. You can instantly infer that it stands for a signal being beamed to the rest of the world. This icon is so popular that it has been transformed in so many ways to match websites and tastes. (It’s even been turned into a real-life pillow!) But now matter how many bells and whistles designers add onto it, the icon is a much more comforting sight than other buttons and chicklets labeled XML, RSS, Atom, My Yahoo!, Bloglines, or whatnot. Icons say so much more than words than obscure acronyms—which ordinary Internet users don’t even understand. They don’t need to!
Visit the feed icon page.
OPML Icon
Related to feeds is OPML, which is an XML format for outlines. Its popular use right now is listing a group of feeds. Think feed reader reading lists and blogrolls. They can easily be shared with the OPML document format. Compared to the feed icon, the OPML icons is not as meaningful, but it’s still catchy especially since it looks like an “O”.
Visit the OPML icon page.
Geotag Icon
Geotagging is basically adding geographical information to certain content, such as photos, through a link. The geotag icon is a pushpin on a globe, which stands for pointing out a certain location in the world. It’s a really good symbol (though if you read Jeremy Keith’s tweet you might think differently from now on). It’s just that the globe looks too small for the pushpin.
Visit the Geotag icon page.
Open Share Icon
You might have heard about the Share Icon, which came from Alex King’s excellent plugin, ShareThis. We’ve talked about the service here on Wisdump not too long ago, but there’s been a controversy surrounding the use of the share icon itself. Thus, the Open Share Icon Project was formed to address such limitations.
The open share icon shows a hand passing an object to another hand. It also looks like an eye. This is much more descriptive than the share icon, which is a node branching out into two like a binary tree, if you’re familiar with Computer Science, and feels too tech-y for the mainstream crowd. A star could have been an easy choice for an icon, since it’s used in both Internet Explorer and Flock to denote “favorites” or bookmarks, but the act of sharing isn’t conveyed with it.
Visit the Open Share Icon page.
More Standard Icons?
Are there any more standard icons out there? The Microformats project has put together several icons that can be used for such. Semantic Web, anyone?
What sort of actions and content on the web actually need icons like these? File uploads and downloads? Email addresses? Tags? Asking these questions makes me want to discover what the next generation of web technologies will give us. It could be something we haven’t even imagined before.
Steal These Icons
If these icons aren’t used, they’re all for naught. We all want some consistency on the web, especially it’s made of tons of information constantly being created each second. Especially when the technologies that provide this information are still very new. Using these icons means turning data into more meaningful and properly labeled content we can all identify and understand more easily.
*/
