It’s begun.
Actually, since list-style blog posts on design trends and other pretty things have been popular for a few years now, I’m sure the backlash has been happening for a while.
Now, it does make sense to organize your a complex article into easily digestible chunks, especially in a not exactly 100% comfortable to read environment such as the Web. It’s good to keep tabs on great new typefaces and graphics in your arsenal.
However, list articles have gained a bad reputation for other reasons because quality is put on the backburner. And there are a number parties responsible:
- The marketers: It’s easy to thank SEO for this phenomenon. A significant portion of internet marketing involves social media, and high-traffic sites like Digg just love the list format. It’s killer linkbait.
- The readers: The problem is lists don’t always contain what people need to truly learn. A lot of these people don’t know any better, and the explosion of lists distracts them from laying the foundations first.
- The internet: Why? There are great lists out there; people will need to separate the wheat from the chaff. But maybe, it’s the very nature of the Web that mutates the need to find the good stuff into the need to find as much stuff as possible or the quickest, easiest solution to a problem.
Drawn.ca has posted 2 interesting sources of atypical imagery which, I realized, can be great design inspiration:
First, Dogfoose uses close-up images of produce in his illustrations. The sample below uses broccoli as treetops for a kids magazine illustration:
What an amusing way to channel the miniature look (achieved through tilt-shift photography) for infographics purposes! Is this is a subliminal technique to get children to eat their veggies? Or just a quirky case of nonsequitur?
It doesn’t matter if these questions get answered or not; what matters it that these questions were asked because of the design.
Next, we have Dark Roasted Blend’s otherworldly microscopic images. This one’s from the Olympus BioScapes competition, a photo of Drosophila larva eye neurons:
We’ve gotten so comfortable with tiled textures, but why not take an asymmetrical, unpredictable image as a cornerstone for your design concept?
Why not make trends like photographic backgrounds your own and experiment in unchartered waters? These unusual sources should be a good starting point.
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.
I started with this article about the decade that was in web design. (Note: an earlier version of this was done here.) It was not much more than a before and after look at the most popular websites out there. Of course, ten years is a long time in web design so the showcase is a satisfactory way to see how far we’ve come, but not quite enough. There was no discussion on the notable features from the different websites. We don’t redesign sites just because we want a different look, do we? We want them to improve. Answering how those sites improved over the years would be a worthy reference for all the web designers out there. This other one almost nails it, though it focuses on the business of these companies, not web design itself.
I hope the likes of Smashing Magazine or some fabulous curator of web design history would come up with an in-depth study illustrating how web design has evolved over the last ten years. Timelines like this and this could help with that, but still needs mention of developments like:
- the downfall of
<table> layouts in favor of semantic markup
- CSS sprites
- the growth of web typography, from sIFR to
@font-face
- Art Direction in web design
- mobile web design
- the HTML 5 Superfriends
- which website or company popularized which design pattern, from the glossy, candy-colored “Web 2.0 look” to the sleeker, more dramatic “Apple look” (though something tells me Apple is responsible for both)
Here‘s another approach to the timeline, and is more of a Q&A over the years, and anybody can ask and answer. It also hasn’t been updated since ’04, as it was part of the 2005 conference, A Decade of Web Design. Jakob Nielsen also did a backtrack that same year.
I’d also like to look forward. This prediction post is quite adequate (with pictures it would be perfect). I think this passage sums up what’s happened in the past decade and what will happen in the next:
While most these technological improvements tend to make the web a more and more homogenous place, at the same time, there is a tendency to create highly curated design setups that use different designs for each article.
There will always be a dichotomy between standardization and specialization on the Web but it’s only lately that we’ve been able to do so with less crap, more elegance. And I can’t wait to see how doing those two things evolve into even more exciting things in 2010 and beyond.
Need more crystal balls and time capsules? See also:
There’s some hullaballoo over this insanely long and diversely designed article on the death of the blog post. Jason Santa Maria, one of the first to talk about this, calls it “art direction in web design”. Smashing Magazine calls it the “blogazine” trend.
And while many people, like me, are thankful this discussion has reached mainstream status, since Smashing Magazine is one of the hottest web properties out there, and their word is basically gospel for a lot of people, others found problems with its actual message.
Let’s start at the very beginning. The title and first paragraph alone make the likes of Shaun Inman cringe:
ugh, I don’t think @smashingmag could have missed the point more. http://shaun.in/g/3j Design for content’s sake, not design’s sake.
Although original talk of art direction laments the lax in creativity that has stemmed from the death of hand-coded personal pages and the rise of automated content management systems that power blogs, I don’t think you should attack the blog post format just because it looks boring. Unfortunately that’s how most people understand the purpose of design—to make things look more interesting, and little else.
Pushing yourself to create original layouts and designs customized to the content of each post is a fascinating and entertaining way to build a blog. [...]
Designing a creative layout for each new blog post, based on the content itself, requires skill, patience, dedication to the content and, most of all, effort on the part of the designer!
Those are pretty good reasons for pushing a custom layout reminiscent of magazine design, but there needs to be more. That’s why it’s important that the term “art direction” should be the term used. It’s more than just a trend. It’s actual understanding of how content—text, images, video, numbers—can be arranged so that it is consumed effectively.
Ironically, many have complained that the article itself is difficult to read. Throwing chunks of content around and away from the typically linear layout for the sake of demonstrating your point is not going to cut it. If people have more trouble reading this way, your design failed and you’re better off dropping the embellishments.
I think overall, Smashing Magazine did a noble deed in introducing the concept to the masses, but it needed to be a little more refinement than your run-of-the-mill list article. The upside is, their topics are certainly leveling up, as with a lot of things in web design these days.
Is this art direction/blogazine “trend” the future? Maybe, maybe not. It’s great to look at the long history of print design and try to apply some part of it to web design, but the best thing about the web—its dynamic nature, from clicking and scrolling to serving API calls and database queries—should be factored in too.
Jacob Gube of Six Revisions has compiled 30 visually-stunning sites which are all formatted like virtual business cards. Tim Van Damme, whose dot-com of the same name sparked this trend, also maintains a list as well.
There’s little else on each page except a rectangular area found dead-center, filled with icons representing the tons of new ways we can be contacted, befriended, stalked. We have the Web 2.0 era and all the insanely creative social media icon designers to thank for this phenomenon. (Sometimes blogs and other related sites are linked to in these cards, but who has time for those anymore?) If you don’t have the chops to whip up your own, services like Card.ly come to the rescue.
But that’s just the visual side of the metaphor being brought online. Business cards are meant to be exchanged because of the information they contain, so what good would these sites be without technological mojo? We have great frameworks like vCard, hCard, and perhaps the open identity systems like OpenID and oAuth. We also have companies working in the mobile space or have devices of their own (more here).
Then there are the lifestreaming apps, like FriendFeed, Tumblr, and chi.mp, which blur the lines between keeping one’s social accounts in one place and keeping up-to-date with said person at the same time.
How does one unassuming professional looking to establish an online presence actually choose from these possibilities? Social media evangelists pretty much recommend we get on everywhere, as many as and as much as we can help it. The goal is to be ubiquitous rather than obscure.
I have to wonder when we’ll ever reach true unification. Home phone. Work phone. Fax. Mobile phone. Email address. IM handle. Static homepage. Blog. MySpace page. Facbeook profile. LinkedIn profile. Facebook Fan Page. Twitter username. Then this—all of this.
How do you identify yourself offline and online? Do you pick one, or unload a bunch of URLs, aliases, and digits on your potential new client/drinking buddy/love-of-your-life? Is this whole business card business even a suitable metaphor, or yet another idea startups can cash in on? And we’re not even bringing up identity theft here.
When Obama Wins scours and displays tweets containing the phrase 'when Obama wins'
I’m fascinated by the single-purpose websites that have been cropping up for the past year. I’m not much of an internet historian to track down exactly when the first of their kind came out, but they officially entered meme status when Jason Kottke wrote about it back in February.
In the era of 140-character microblogging and 10-inch subnotebook computing, brevity is king. But these straight-to-the-point sites aren’t exactly the iPhone-friendly versions of our increasingly bloated, self-centered homepages and bookmarks. (That’s a different phenomenon altogether and worth discussing in a separate article.)
They’re in a different group themselves, in a peanut gallery of sorts, poking fun at the rest of the all-too serious internet population. Stop worrying whether websites need to look exactly the same in every browser, you should use tables for layout (give up?), Diet Coke will kills us, graphic design is art, Barack Obama is Muslim or muslin or President, or it’s Tuesday, April Fool’s, Christmas, or a leap year yet.
The color of the Empire State Building on November 11. On November 11 it was Purple, Purple, White. As of writing it's White, White, White.
Of course some of these one-trick ponies are web apps and mashups that do exactly one thing really well, whether it’s helping you look forward to the day when Obama wins, decide if you should bring an umbrella today, bitch and moan about our dear Adobe, or figure out whether Twitter, Gmail, the Apple Store, or some other site is down or it’s just you.
Not to mention spell definitely and other words correctly, insert angled quotes », «, ›, ‹, discover your IP address, and play a instant rimshot.
Visit A List Of Sites for more of the madness! Or go through them randomly ala StumbleUpon.
I’ve written about emerging gallery-style websites like image bookmarking and information design. Here’s yet another trend: niche web design inspiration galleries. Here are examples of those classifications:
Most of these sites aren’t really new, except that enterprising webmasters are coming up with new categories more often—seemingly every week!
Do we really need new sites for all these categories? I would say yes. Despite the presence of categories and tags, custom search engines powered by Google, gallery aggregators like Most Inspired, you can never have an excessive supply of inspiration.
Plus, visual search using mere keywords is still ineffective. Usually because there isn’t enough care given into describing images. You can never really tell how many tags you can add to properly describe the look and feel of a website.
In fact, since websites are basically interfaces and not just 2-dimensional designs slapped onscreen, showcases and galleries should also focus on their interactive elements. That’s probably where pattern galleries like Pattern Tap comes in.
Update (June 14, 2008): Victor says his project, vi.sualize.us, has been around longer than the sites I’ve mentioned here. So, again, this is another image bookmarking site worth checking out.
I smell a web trend. In the last few weeks I’ve discovered two new image bookmarking sites in addition to the insanely famous but still exclusive FFFFOUND!—We heart it and typeish.
To those who are asking “but why?”, normal bookmarking services aren’t visual in nature. Whether it’s social bookmarking like del.icio.us, or social voting like Digg, or serendipitous discovery like StumbleUpon, users decide if a website is worth visiting by looking at its name, description, tags, and popularity.
Granted, those sites are getting smarter by taking snapshots of what the sites look like, or by isolating thumbnails for if it’s an image or video being bookmarked. But it’s nice to have a dedicated tool that satiates your hunger for all things eye candy. The question is, are these image bookmarking sites effective?
more
*/
