No, this is not about plagiarism.
Imagine my surprise when Jeffrey Zeldman blogged about a list of 60 WordPress themes. A few minutes before that, I found Douglas Bowman bookmarking another list, also from Smashing Magazine. It’s like my feed reader was trying to tell me something: yes, a list article can bring an interesting discussion if you’ll just let it.
Back to Zeldman’s post, which started a discussion on whether you should use existing themes for your own design:
…Even if you are a designer, you may ask yourself if you really need to perform that next site redesign from scratch.
Every once in a while I get clients that specifically want existing themes to be customized instead of starting from scratch, so clearly there is a demand for the practice. If clients have enough initiative to choose it as a solution, then why not? Does it take more effort to find and customize than start from scratch? Depends on how comfortable you are with someone else’s code, how much you trust the other designer’s expertise, and how much you need to customize.
The bulk of the debate will probably lie mostly in this situation, but to me it boils down to don’t reinvent the wheel, but don’t get complacent either. While it is a shortcut for building a website, it is not a shortcut for conceptualizing the website.
So the other situation is this: Sometimes I envy all the beautiful themes and templates out there because I don’t really get an opportunity to use them for myself. Does choosing to use someone else’s work for a web designer’s own website make sense? It seems counterintuitive but a real problem: sometimes we barely have time to dedicate to our own projects. Sometimes we just want to use something ready-made and have fun with it.
Although there are frameworks for practically level of development these days, from CSS to JS to PHP to whole themes, they are created specifically as tools for designers; they aren’t really products for designers as consumers. What I’m talking about are the real themes that are smart enough, beautifully-designed enough to meet your discerning needs. It could be as stark as Cutline or as detailed as WordFolio: compare this and this. (Now that would be good idea for a list article: websites that are highly customized versions of existing themes. Not to mention a good source of inspiration. A niche gallery, even!)
We could probably exclude portfolio sites since web designers would prefer to show off their skills on them—but even that argument can be ruled out if the customization is custom enough. Take blogs, tumblelogs, and other secondary sites that still belong to a web designer but don’t necessarily need a design from scratch. The issues with the client scenario website still apply, but there’s the added pressure of being your own worst critic.
Would you be confident enough to use one, or would you lose sleep at night without customizing at least some bit of it to keep your design cred intact? It doesn’t have to be a bad thing; it could be a different type of challenge.
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.
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.
All the hoopla over Everything You Know About CSS Is Wrong!, a book by Rachel Andrew and Kevin Yank (see also the Digital Web article) is making me feel uneasy.
We’re not wrong; the title is wrong
I detest the title of the book. No, I don’t think “everything” I know about CSS is wrong. I “know” about the display:table technique for months now (thanks to Sitepoint, again).
Neither do I think it’s a good idea to go around belittling people by telling them they are wrong, whether in printed book or online article format. It’s harsh and misleading.
We’ve got issues
As for the CSS Tables technique presented in the book, these are some of the issues plaguing it:
- tag soup
- lack of source order control
- the question of semantics and presentation vs. content: is making
<div>s behave like tables/table cells any different from using tables as layouts?
- IE6 and IE7 incompatibility (no surprise there!)
And not too long after the uproar, the authors have addressed the above problems:
Andrew Tetlaw responds to #1 and #3:
No one is negatively affected by the overuse of structural div tags. The same can’t be said for the use of HTML tables for layout.
And here’s an interesting quip which points out the very valid woe of web developers, who have had to adjust to all these changes in coding conventions because of our “flakiness”:
Congratulations on years of punishing web devs for using common sense. Finally the circle turns, but somehow you think that you were ‘right all along.
Matthew Pennell of Digital Web has this to say about those who question semantics and standards:
I must say that I’m surprised that an audience of (presumably) conscientious, standards-aware developers are almost all declaring that they will not use new features of CSS when they are available and supported. Are you all so short-sighted that you cannot see any application for the techniques discussed here beyond wholesale replacement of site layouts?
And Rachel has written this regarding #4:
Some commentators have suggested that we shouldn’t have put a book out about a technique that can’t be used immediately, that will require workarounds to still provide support for older versions of Internet Explorer. I disagree. Something I point back to in the book is how the web community began to use CSS for layout even though support in Netscape 4 was limited and buggy. If those of us who were building CSS layouts right in those early days had said, “nah, it doesn’t work in Netscape, can’t do it”, then our recent history would look very different.
Are we hesitant about change and innovation?
In a sense, browser usage does “cripple” our ability to look towards a future of web design innovation (and bliss) when IE6 is finally disappears. But are things right now are exactly the same as when Netscape Navigator 4 was the stumbling block?
More importantly, will the CSS Tables technique actually push our level of innovation by a significant degree? The past few months of new websites tell me innovation is not too hard to come by still.
And what about next-generation HTML5, which will have new structural tags like <header>, <section>, <article>, <footer>? Can one not feel guilty using all those <div>s in the midst of these elegant new tags? Perhaps that’s another debate for another day—in 2022.
Despite the the dot-com bubble bursting at the turn of the new millennium, the Web has become more intelligent, successful, and profitable in the past ten years. We have a ton of people to thank for that, but let’s focus on two groups that are celebrating their 10th anniversaries this 2008.
Google is one of the first web companies that reinvented the web as we know it. It essentially paved the way for what we call the Web 2.0 era because it was the better search engine that would leave Yahoo!, MSN, Altavista, Lycos, Ask, and the rest behind.
True to its name, Google just keeps on getting bigger. It took on e-mail (Gmail), advertising (AdSense and AdWords), office suites (Docs, Spreadsheets, Sites), multimedia (YouTube, Picasa), navigation (Earth, Sky, Moon, Maps, Street View), and even web browsing (Chrome). And even if the thought of Google looking into what we’re looking at and what we’re talking about is really scary, life with the help of the big G is just easier.
In the same vein, A List Apart has been the definitive resource “for people who make websites”. What started out as a mailing list evolved into a treasure trove of elegant web design articles that cultivated the love for the craft like no other. Design, standards, accessibility, optimization, business—this magazine covers it all.
It’s written the pages of web design history as well, from banishing <table>-based layouts to inventing CSS techniques (Sliding Doors of CSS, Holy Grail, Suckerfish Dropdowns, Sprites, Faux Columns, Mountaintop Corners) we never could have come up with. Websites today are efficient, meaningful, and beautiful because of ALA.
*/
