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.
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.
Mozilla Labs, already releasing innovations that hint at the Web in the coming years, has launched the Concept Series. This is an initiative that pushes for the “development of the online experience” where everyone can contribute.
We’re hoping to lower the barrier to participation by providing a forum for surfacing, sharing, and collaborating on new ideas and concepts. Our goal is to bring even more people to the table and provoke thought, facilitate discussion, and inspire future design directions for Firefox, the Mozilla project, and the Web as a whole.
Concepts may take the form of Ideas, Mockups or Prototypes.
The Concept Series starts strong with several concept videos from Adaptive Path, Wei Zhou, and Aza Raskin.
Aurora Concept Video by Adaptive Path
Lifestream - Redesign history and bookmarking by Wei Zhou
Firefox Mobile Concept Video by Aza Raskin
Of the three, Aurora is clearly the most ambitious as it demonstrates with 4 videos how future web browsing will be completely intuitive and pervasive. Websites can share information with one another so that a user can extract relevant information. The Web will continue to act as information provider regardless of location or the real-world objects and situations he is dealing with.
Multitouch technology is also gaining traction as the ideal way to interface with the Web. Specially assigned gestures will become especially convenient on small mobile devices. Mimicking a 3-dimensional space is another popular concept which also addresses space constraints. And of course, aside from advances in software, hardware will also play a major role in the interactions onscreen.
What’s your idea for the future of the Internet? Contribute to the Mozilla Labs Concept Series and have your say. Remember, the best way to be prepared for the future is to make it ourselves!
The Wisdump redesign concept I posted previously have been updated. It still follows the same basic premise, but is now populated with more content, and the sidebar top isn’t as heavy.
more
*/
