Jeffrey Zeldman’s article, The vanishing personal site, brings to light what many of us have been wondering about in the back of our heads for a while now. Social networks that provide features often found in a personal website captured our fancies and stretched our virtual personas in all directions. That goes for both the knowledgeable and not so knowledgeable in web development.
The Question
It’s not really a bad thing, which Zeldman also stresses. The question is, now that you’ve scattered yourself all over the place, how are you going to put yourself back together?
Not that you need to; I’m sure not everyone would be interested in painstakingly picking up the pieces one by one and gluing them together. That’s why FriendFeed became an instant hit. But if you ask me, using another social network to put them all together does not feel good. Not one bit. I’d consider it another convenient (even organic) way to spread my own content. But that’s it. I still dream of the day I manage to tastefully put my stuff together in one place. Like these websites:
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.
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.
Still on the subject of the dark side of the web: I found a contest for the ugliest website held last June. The winner, which turned out to be mytastynuts.com, won a free redesign package worth $1800. Now this could have been a little more buzzworthy if the contest and company site itself looked like there had been thought put into the design. Heck, if you ask me, the current mytastynuts.com looks better, and don’t really have the right to be doing redesigns.
Of course, there’s really no harm in entering a contest where a free redesign is up for grabs—even if it ends up being not much of an upgrade at all—but that’s the problem with web design: the threshold’s too easy to cross.
The ugliest website contest would also have gone viral if the site were designed in the ugliest manner possible. Something that looks like this (without looking like they’re ripping you off). But that’s the other problem with web design: not everybody “gets” good design.
Many have high tolerance for badly designed sites and bad design in general. Put bluntly, they wouldn’t know if something looks ugly even if it hit them in the face. Sometimes design can depend on a person’s instinct and taste, but it can also suck
Combine that with “it’s just a lowly website”, not something cooler like architecture, fashion, or an ad campaign, and it’s a steep, uphill battle.
And to top it all off, there’s the thin line between design and decoration, which is the absence of purpose and real content. A website, more than any other designed entity, is nothing without content and function.
Don’t be such a downer
Okay enough with the pessimism. How do we get rid of said problems? Eliminate ignorance, for starters. Buckets of inspiration from CSS galleries and image bookmarking sites are always good to have, but it’s also important to know exactly what we should avoid.
I recommend grabbing some eyedrops before clicking any of the links below:
A common entry you see on many web design blogs is the one where people are looking for inspiration when getting ready to tackle a new design. While I don’t advise looking at other sites before you begin to design your own, for some people this works really well. What I never see though is people recommending any Flash sites to look at. I wonder if most CSS/XHTML designers still hold a grudge (or whatever you wish to call it) against Flash sites because many of them still are nightmarish to say the least.
For example I love to look at 2advanced or Joshua Davis from an information design perspective (along with a visual design perspective) and see how I can learn from them. Granted most Flash sites I come across serve absolutely no purpose on the web, but I think if more designers open their minds to checking out the good ones then their designer inspiration toolbox will become that much more valuable.
Aside from creating brilliantly art-directed articles that push the limits in with the latest HTML and CSS features, David DeSandro is redefining at least two classic site features at the same time with his Portfolio page:
The portfolio format.
Most portfolios consist of image thumbnails with either short or detailed descriptions about each project undertaken. DeSandro’s portfolio, on the other hand, contains full-width, full-height screenshots with guided markings explaining the how and why of his work, not just the what. Not only can you admire and drool over the designs, but you can learn from them as well.
The HTML image map.
The concept of image maps is sound but its execution isn’t so exciting: you don’t exactly know where to click and if you do, you don’t know what you’re clicking on. DeSandro created annotations that are intuitive and easy to navigate.
Does your portfolio need a refresh?
Your portfolio is your resume. Presenting your work and communicating your design view is critical to how others perceive you and shouldn’t be an afterthought. David’s portfolio isn’t so complex as it is well thought out. The designs are in full view; the details are straightforward. No distractions, no hype. Reexamine your portfolio page and see if yours is the same.
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:
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.
Dribbble is just one approach to the feedback web app “genre”; I’ve noticed that they’re making it easier than ever to receive and leave feedback on designs, as you’ll discover when you go down this list:
Usabilla
Usabilla has the most features out of the lot, letting you test both images and live websites with click markers, notes, and heatmaps. There’s a free plan but you’ll enjoy more test participants and pages with the premium plans.
ConceptFeedback
ConceptFeedback anchors on a thriving community and and offers special perks for both individual designers and businesses, including compensation for giving feedback. Not only can you get reviews for your current work and inspiration for your next one, your profile, design, or product can get featured to earn better exposure and business—but you need to jump in with both feet and register.
fivesecondtest
As the name implies, fivesecondtest focuses on first impressions as a test-takers look at designs for no more than five seconds and answer custom questions from test-makers. This means judgments can be rash, but the barrier to entry is very encouraging. For extra good measure, the app runs on a karma system where the more tests you do, the more test results you can make.
FineTuna
The Flash-based FineTuna creates a link for every image you upload, which you can send to specific people for feedback. That link is a space where one can insert notes and doodle on the image. You won’t have a community of users at your disposal, but you have complete control and privacy over the feedback process. It’s also available as a Firefox add-on.
CritiqueTheSite
CritiqueTheSite uses hackable URLs, iframes, and JS-Kit’s Echo to let visitors leave comments on a currently loaded site. Append a URL of any website (like Aviary Screen Capture does) after the slash and it loads that site, ready for critique. Public, no-registration-necessary feedback makes the service prone to abuse, but it also means it has a low barrier to entry.
No clear winner here!
If you want a more detailed level of testing, Usabilla is the way to go; if you need something lighter and more accessible, the likes of CritiqueTheSite, FineTuna, and fivesecondtest may be better for you. If you’re all about building your reputation and relationships as an added bonus, pick ConceptFeedback. Or why not use all of them? Using all these tools for online critiquing lets you reap the unique benefits for each.
Dribbble is a finely crafted community for designers, by designers. It’s invite-only in order to maintain high quality work on the site, but that doesn’t mean you can’t browse around for inspiration. Give it enough time to fine-tune the tagging and search features (color search is already there; UI patterns, textures, etc. would be great) and we may have the most useful, A-grade design reference out there from people who know their stuff.
There are several things that set it apart from generic portfolio and gallery sites, as it is also dubbed the “Twitter for designers”. From the tagline “what are you working on?” to its system of “rebounds” (basically a response to a “shot”) to uploads of 400 pixels or less, Dribbble is focused on brevity and the right now even when they could have entertained the whole spectrum.
Of course there’s the basketball metaphor working all around too, which when expanded even further can create some interesting activities and interactions for the community: think games, collaborations, meetups, leagues, merits. Think social games like Foursquare and BarStar, only more productive.
People have been complaining about the quality of a lot of things in the design community lately, whether it’s resource articles or the actual interactions within the community, and I see Dribbble as a partial solution to that.
Unmatched Style, which is one of the better CSS galleries out there, has posted its first video podcast discussing several notable websites featured in their showcase within 10 minutes. You can watch the episode below:
Let’s see what is happening here. The video podcast is a good solution to explaining why a certain website made it into the UMS gallery. Gene and Jay discuss what they like—and don’t like—about it as the site is being displayed, which seems more convenient than having to visit the site and then switch over to an article pointing out the nice design bits here and there.
I say seems because of course, actually visiting and interacting with the site trumps watching videos and viewing thumbnails any day.
Still, I think it’s a solid way to innovate and add value in this already saturated market of CSS galleries. This is almost the opposite of going niche, because what UMS has been doing is being more than just a trend-imitating, money-making gallery but a definitive resource. Something that isn’t just a CSS gallery anymore.
I think we need both, any, and all sources of inspiration, though. CSS galleries are usually just a collection of screencaps that become attractive depending on their content, but we need as much inspiration as we can get our hands on. Sometimes we’re looking for that specific site type; that’s where niche galleries come in. And then we need opinions from other people to help point out what we may have missed.
I’m looking forward to another ten minutes of UMS’s next video podcast, and curious as to how else one can improve the quality of these “inspirational” sites.
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.
*/
