Jon Tangerine, David DeSandro, Trent Walton have all come up with ingenious ways to create image-free logotypes by pushing the limits of CSS (Sean Martell made a mouth-watering CSS-based logo too, but doesn’t contain text) that one has to wonder: is this the next step in online branding and identity?
The simplest argument against this could be that a logo must be constant. In the absence of CSS styling, possibly even helper JavaScript, an image will not suddenly morph into a default browser style and render a brand generic. See the image above for how the CSS-based Opera logo degrades in different browsers.
Now that excludes the scenario where images are turned off, and where text—styled text—can come in. Instead of simple image replacement techniques, we now have @font-face embedding and other advanced effects to bring the text as close as possible to the original design.
Text is great because you can read it, as can search engines. Another thing text based logos have going for them is they’re easier to make bigger; that’ll win over a lot of clients.
But there’s a great deal of extra markup required to achieve the necessary look. Does this make sense for the notion of a logo, which is inherently more portable with an image than with a bunch of divs, spans, classes and IDs? Should logos always be images and nothing but, or can they be both text and images? Which should come first, designing the logo in the browser or in a graphics program? Or should all of this experimentation remain just that: experiments?
Me, I just love we could be on the brink of shattering print conventions, yet again.
Google brought back the 80s arcade game Pac Man to celebrate its 30th anniversary last May 22nd in the form of a fully-working Google Doodle on its homepage (it’s been since moved to a dedicated page where people can still play it). The “I’m feeling lucky” button gets replaced by “Insert coin” and clicking on it lets you play. Click on it a second time and Ms. Pac Man joins in the fun.
Apart from hearing collective 8-bit cheers of delight upon discovering what could be Google’s most viral web toy yet, the Pac Man doodle was another display of its massive influence, both the good and the bad. more
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.
Several design initiatives are taking advantage of the “global village” via the Web, and here’s a look at some of them. Perspectives that are completely different from your own—thousands of miles different—are just one way for you to grow as a designer, so take down some notes and get your passport stamped:
How would you illustrate your city?
CitID invites designers to honor their respective cities creating logos for them. Submission is by email and it’s a great way to get acquainted with design sensibilities from every corner of the world.
How would you create a charity site in 24 hours?
FullCodePress pits Australia, New Zealand, and the US against one another in a 24-hour race to build websites for charitable organizations. Last year’s teams designed for RainbowYouth (New Zealand) and NSW Disability Discrimination Legal Centre (Australia), with NZ coming out on top.
This year: Team USA members are already locked in, with no less than Jason Santa Maria at the helm, but applications for the Aussie and NZ teams are still open until May 5th. The showdown happens from June 19 to 20.
How would you build on an existing design?
The Exhibition Season of this year’s Layer Tennis is done, but if you missed all the live action this compilation video provides a great wrap-up. There were some interesting new matches this time, covering typography, motion graphics, photography, video editing, and the return of the 10-city tournament.
How does this color make you feel?
To wrap up this little excursion we’ve been on, here’s a golden resource for all the global designers out there: David McCandless and AlwaysWithHonor.com designed an infographic on What Colors Mean Across 10 Cultures.
So I was reading Elliot Jay Stocks’s post on the Apple tablet and noticed all the fancy gravatars his commenters had (maybe because they were not as small as the ones in the blogs I frequent). One in particularl that caught my eye was Jeremy Swinnen‘s and made me wonder if, like Sam Wilson‘s, it was a condensed version of his website and/or brand. I visited his site and turns out I was wrong.
Avatars are usually faces (photographs, caricatures, etc.) or logos, because that’s the most straightforward way to advertise yourself. But why not try something that remind people of your own website? Chances are that’s the first thing they do after reading your comment: check out who you are via your homepage.
If the logo in your avatar is featured prominently, which is probably the case anyway, then great. But I feel a disconnect when visiting a site that has no visual ties to the avatar associated with it. And putting a spin in your branding by using more than your logo in an avatar is a worthy challenge.
Sure, we also associate people with their respective URLs, but aren’t avatars the proverbial peacock’s feathers, the smoke and mirrors, the flashing neon sign—to lure people in, establish a connection, and possibly seal the deal on whatever it is you’re “selling”?
If you’re not choosing the most effective way to bring people over from Mr. Stocks’s site, then you could be missing out.
All the new browser updates seem to be coming out at the same time, which definitely keeps the competition interesting. But while you continue to scoff at IE, gush over Firefox, and smile nervously at Opera, Chrome, and Safari, have you heard that ordinary computer users don’t actually know what a web browser is? Let’s get to that in a bit…
Internet Explorer is the “best”
IE8 Comparison (comic by Brad Colbow)
I think people around the world made a collective ROFLMAO when the infamous IE8 browser comparison chart came out. I reserved any biased judgment when I first saw it, but oh my, Microsoft sure knows how to put its best features forward.
That’s not all it’s doing to promote the latest version of Internet Exploder, though. There’s a treasure hunt for $10,000 buried “online” (you have to use IE8 to find it, of course), and a donation of meals to charity (per IE8 download, of course).
Firefox has a new icon
New Firefox logo
Firefox is definitely the darling of the browser lot, so even a branding update—the fire, the fox, and the glossy globe are still intact and recognizable—is under magnified scrutiny.
Of course that’s not all there is to the next major release of Firefox, but I’m just glad they also care about their image. Lots of open source products pay little attention to the designery stuff. Firefox knows how to stay fresh and accessible to its audience without trying too hard (cough, see previous browser, cough).
Opera unites
Opera continues to innovate with its upcoming release, including an interface refresh from the same person who brought the Firefox logo to life. But it doesn’t stop there. Opera Unite cuts off the middleman for sharing photos, music, and all other kinds of files by turning the browser into a web server.
It’s not for everybody, but it’s a fascinating idea. An interesting twist to the “web as platform” concept. First there was web-based equivalents of desktop apps, as well as full-blown desktop interfaces on the web, then it was cloud computing, then it was the real-time web, then we have this. The jury’s still out on whether this will actually take off—considering Opera’s level of influence compared to the fox and the blue “e”—but any venture into Web 3.0 is a welcome effort. Here’s hoping we jump into it very soon.
But what is a web browser?
But apparently we can’t jump just yet. According to this discovery by The Next Web, the average internet user can’t tell the difference between a search engine and a browser, about 92% of those interviewed. Ironically, it was Google conducting the survey, and the final question was whether people knew that it had its own web browser.
Although Internet Explorer and Firefox were mentioned, people still didn’t know where the Web ended and the software began. It’s all just a blur of computer terms, which, at the end of the day, help them “find stuff”.
Knowing this, shouldn’t web browsers be scrambling to teach its users how the Internet works, including typing URLs into the address bar, and not just relying solely on search engines? Or should they just give up on the nth incarnation of the Browser Wars?
