Thanks to Chris Miller for pointing us to this interesting navigational approach by EffectiveUI. I like the idea that everything carries near-equal weight. Kind of like a book table of contents—it displays the linear layout but it also gives you a simple, in depth way to pick and choose.
NEW in the Ideabook Design Store: Tintbook CMYK Process Color Selector...
Here is a nice example of how to use a silhouette as a transition from one section of a web page to the next.
The example is at the bottom of the page...
In the Ideabook Design Store: The Copywriter's Handbook...
Sometimes it happens this way. You get started and find a solution within a solution. I'm guessing this started out as a web layout and someone had the clarity to say, why not publish it as a sketch? To me, the finished product is even more interesting than where it was headed.
In the Ideabook Design Store: Before & After: Page Design...
Watch how the folks at Erowe Design stage their portfolio as three dimensional objects. And how they feature a closeup of one significant element of the design. It is one way to simulate the tactile experience of holding the pieces. Click on “PORTFOLIO” then “FINANCIAL&rdquo for an example. Notice how the position and lighting reveals the gloss coating applied to the cover headline. Nice.
Click on “PORTFOLIO” then “FINANCIAL&rdquo for an example...
In the Ideabook Design Store: Design-It-Yourself: Graphic Workshopa...
As Christian Crumlish, curator of Yahoo's Design Pattern Library puts it, "Design patterns mean different things to different people." Suffice it to say, to a communications designer, they offer a look at (and code for) the structure and layout of the parts and pieces of web interface design. They are the best practices for creating elements such as tabs, forms, and selection devices for helping the user move around, browse content, and otherwise interact with a web page. The idea of the library is to ease the development of wheels that have already been invented and to propagate the use of proven practices.
There are many such libraries. Here are a few to get you started (I'd love to hear about others you have found useful).
The Yahoo Design Pattern Library...
A site for a book titled, The Designing Interfaces: Patterns for Effective Interaction Design...
The site of interaction designer Martijn van Welie...
In the Ideabook Design Store: Moleskine Notebooks...
I like the spare nature of Funnel Creative's site. It is small, compact, and easy to navigate. No bells, no whistles, and no man-eating animation. Bigger is not always better. Flashy is not always the best solution. Complex is not the only path.
The Funnel Creative portfolio...
In the Ideabook Design Store: FontHead Typefaces...
Watch how the designer gets you to explore topics here. Just below the title "Explore/Themes" you can choose to page through a series of other choices and remain on the background page. Interesting take. By the way, this is a recently launched makeover of the British Museum site.
By the way: I realize I often point to the obvious. I do so because I believe to truly understand a particular design structure, you need to identify and examine the parts of its foundation. Looking back, many of the most useful lessons I have learned were communicated by someone showing or describing something others considered too obvious to mention. I love simplicity—it is (by far) the most complex, difficult form of communication.
In the Ideabook Design Store: Before & After: Graphics For Business...
» Comments
Jesse Bennett-Chamberlain is among my favorite designers. I have used some of his web page structure ideas recently in my own work. His layouts are simple, elegant, and accessible. Here, he shares a behind the scenes look at the development of a web for Embrace Pet Community.
Embrace Pet Community web design...
ShopComposition.com is a retail store web site that demonstrates some different ways of doing things. I doubt you will buy into all of the navigational bells and whistles—I find some are not intuitive—but it will certainly get you thinking. Thanks to my friend Daniel Will-Harris for pointing me to it.
ShopComposition.com navigational ideas...
BTW, do you know Daniel Will-Harris? If you don't, you're in for a treat...
Jeff Bridges is not only a talented actor, he has an eye for design. His web is a series of sketches and handwritten notes that (to me) make him seem friendly and accessible. Thanks to Sharon Carro for pointing us to his work.
Move the mouse cursor over the text that reads “GRAMMY NEWS”—instead of highlighting the text, the designer applies a soft glow to the background. A very subtle, effective technique I have not seen before.
Move the mouse cursor over the text that reads “GRAMMY NEWS”...
McMaster-Carr boasts over 450,000 products. Their site is a great example of simplicity and usability. The austere design and limited use of images gives it a matter-of-fact look and feel. Be sure to play with it to see how subcategories, listings, and ordering are handled. Yes, it is extreme but I admire their willingness to stay lean.
Appears that the stress of the Christmas season has reached the folks at FutureMedia. If you have anything to do with web design, you'll appreciate this rather unconventional interactive holiday card.
Nessim Higson presents a very interesting use of Flash on iamalwayshungry.com. The layout changes and elements are repositioned as you resize your browser window or click parts and pieces of the design.
Nessim Higson's iamalwayshungry.com...
This is a very interesting, kind of “clinical” look for a German scientific organization: The Max Planck Society for the Advancement of Science. I like everything about it. The delicate forms, the color palette, the way the layout is adapted to each page type, the use or type, and the sparse, bright illustrations.
The Max Planck Society for the Advancement of Science...
Another example of an information-rich interior page...
North Kingdom, the Swedish interactive design firm, has created what they term a new branding site for Toyota Sweden. It is a combination of fantasy and fact in the form of a floating island in the sky. Suffice it to say, “Salvidor Dali ain't got nothin on Toyota.”
With so many wonderful tools and techniques available to us, it is easy to lose focus and to get overly complicated with a design. This web, though it sells a whole line of products, shows them in a singular way. It puts the product front and center in a neutral, gallery-like environment and sells on the merits.
Christopher Elbow Artisanal Chocolates...
Here's a nice use of rollovers. The designer highlighted the form of the products using outlines. Then, as you rollover them, the outlines change into full color examples of how they are actually used. Nice color palette too.
Rollover the outlined products to see the transformation...
The site makeover of bookseller Barnes & Noble is worth some study. They are now using a classic serif/sans serif combination—a flavor of Bodoni and a condensed sans serif (it looks close to several but the fact that I can't find an exact match makes me wonder if it isn't a custom face. Comment below if you have an idea).
I particularly like the color palette of bronzes, teals, greens, and gold. Each of the sections—the cover, B&N Review, B&N Media and so on—has its own distinctive look yet they all clearly fall comfortably within the family.
Barnes & Noble has been carving out this “modern elegance” style for a while now, this makeover really cements it for me.
The makeover at Barnes & Noble...
A New York Times-like review section...
Kashiwa Sato is an artist/designer. Schooled a graphic designer, he is the type of creative director that often brings as much “product” to his projects as the client does. Like his projects, the web for his studio Samurai is sharp, colorful, and quirky.
WebbliWorld, brainchild of Aardman Animations (the folks who brought us Wallace and Gromit), is a “gateway to the internet for children.” It is home to the Webblis—“an irresistible and quirky gang of World Wide Wanderers—characters that reflect a range of personality traits so there is always at least one with which every child can identify.” It is certainly bright and inviting.
WebbliWorld, brainchild of Aardman Animations...
In the Ideabook Design Store: Task Force Clip Art...
A design that does not reflect the logic of human interface is crippled. If you are interested in the science of web design, you are certain to find valuable insight on usability.gov and in the accompanying book titled, Research-Based Web Design & Usability Guidelines. This methodical look at the process by the U.S. Department of Health & Human Services includes the type of detail sometimes missing from general business discussion.
Usability.gov: A guide for developing usable and useful Web sites...
Free access to the book, Research-Based Web Design & Usability Guidelines...
In the Ideabook Design Store: Templates for InDesign, QuarkXpress, or PageMaker...
This looks like such an obvious organizational solution to web menuing (a type of basic breadcrumb approach). I wonder why I haven't seen it used more often. Each primary subject heading is followed by its secondary headings. Simple hunt and choose.
The menu system below the Form logo...
My big list of web design resources at Jumpola.com...
Amazon is no known for cutting edge design, but when an organization this significant does a site makeover it is certainly worth analyzing. Studying its grid, layouts, terminology, focus, and so on, offers valuable insight into what we assume is working well for millions of customers.
In the Ideabook Design Store: Getting It Printed...
Play with the width and depth of your browser window on this the home of Christian author Philip Yancey. It is the rare case (at least in my experience) when adjusting images and text to the width and depth of the reader's browser window seems to work. If you've read any of Yancey's books I think you will agree the designer has captured the spirit of his work.
In the Ideabook Design Store: Creative Business CD-ROM...
A few nice things happening here: The amorphous logo, the horizontal page orientation, the color-coded city sites. And, of course, I will be forever in their dept for introducing me to the Swedish Street Knitter site.
In the Ideabook Design Store: FontHead Typefaces...
If I am unable to come up with a sound solution to a design problem, it is typically because I am not looking outside the room. With Magnetbox, Ben Tesch proves that letting go of the designer's instinct to create elegant, smooth imagery can result in something that is truly unique.
In the Ideabook Design Store: Design-It-Yourself: Graphic Workshop...
I pledged I would never use lemon yellow. Then I ran across FOROALFA.com. I like it.
In the Ideabook Design Store: Task Force Clip Art...
Two interesting ideas from designer Nathan Borror. Note his unique icon menu and an the dramatic effect as he switches from black to white backgrounds.
In the Ideabook Design Store: Templates for InDesign, QuarkXpress, or PageMaker...
It don't get much weirder than this from the Japan Dairy Council.
And I doubt the ability to read Japanese would make it any more clear...
In the Ideabook Design Store: The Desktop Publisher's Idea Book...
There are a number of interesting ideas incorporated into the recent makeover of the Earthbound Farm web. A time and temperature stamp for Carmel Valley (I have always liked the idea of giving your web a sense of place), an elegant vehicle for presenting still photographs (below), and some very cool motion pictures used in the place of static title images.
The time/temp stamp (upper right) and the video banner...
To see the elegant presentation of still photographs, click the “WHY ORGANIC” drop down menu and select “VIRTUAL FARM TOUR.” (note that if you wait a few seconds, the images within each category circulate...
In the Ideabook Design Store: The Color Harmony Guide...
Packaging is a fascinating design discipline. The content of the One80Design.com site demonstrates the innovation you would expect but the way the site is structured offers some lessons on usability. For example, watch how they reveal project details in stages:
They begin with a menu of projects...
And offer a one-page case study of the project in PDF format (212KB)...
In the Ideabook Design Store: Before & After: Graphics For Business...
Such a nice idea. This designer overlays fantasy (illustrations) with fact (photographs). The effect is warm and welcoming—a traditional look with a contemporary bent.
Mixing illustrations with photographs...
This site, dedicated to the response and recovery of the Red Cross following September 11th, (to me) demonstrates that there are no hard-and-fast rules about matching a design to its subject. My inclination would have been to make this site “warm” but the designer chose “cold.” An insightful choice I think. Using a rather technical looking, nothing-but-the-facts layout under girds the presentation of an unusual mix of information--the human story, the nitty-gritty of the services provided, and the controversy over funding.
Background art and patterns were big in the early days of Web design. Today? Not so much. I suppose the idea lost favor because is made pages so visually dense. This application (for the School of Visual Arts) works for me, it adds to the design's “work-in-progress” feel.
To get the full impact, expand your browser to maximum width...
The isolated background image...
In the Ideabook Design Store: Art Parts Clip Art...
Small matter, but I like the way the ruled line bisects the menu and the information block below it.
In the Ideabook Design Store: Design-It-Yourself: Graphic Workshop...
What caught my eye here was the undulating menu at the top of the screen. It expands with the number of drop-down selections—interesting effect.
Very interesting to see the systematic approach Frog Design has developed for illustrating its Web. One large anchor illustration with (in many cases) a few small insets. It is a good reminder of the principle that complex subjects beg simple presentations.
Take a look around, there is much to see...
This site features a totally unexpected visual metaphor: a rusty old refrigerator. It works.
Place all the information on one surface and to show the user how to navigate it.
The Samaritans of Singapore...
Even more than the design, what strikes me about Jonathan Yuen's Web is how differently he thinks. The color palette... how the images build sequentially... how clicking a link sets off an animation... how the parts and pieces move around the screen. For those who fear there are no new ideas—courage. (Suggested by Will Sherwood.)
I have long been fascinated by virtual, interactive environments—Myst comes to mind. It has got me thinking, how can I incorporate the concept of traversing the page into conventional business Web design? Any thoughts? An interesting example of this idea is the fictional city of Zarovka (you click and hold the mouse button to zoom forward).
Design Within Reach sells classic modern furniture and associated products. The DWR site features a simple wire frame—a very effect foundation on which to present its products.
If you've ever attempted it, you will deeply appreciate the thought and energy that went into building this comprehensive identity guidelines site for John Hopkins. Beautifully done.
The John Hopkins Identity Guide...
This just goes to show you can come at marketing a product from a million different angles. Makes you wonder—if I sat you down and challenged you to help me sell mint gun, where would you head?
The economical use of color (green, red, black) and type gives the GreenHomeGuide placid feel about it—almost a non-design.
Snap allows you to add high quality, informative link previews to your site. I've seen it used on a few sites recently and thought it was worth sharing.
Brown University offers an interesting way of organizing a lot of information. Roll over the listings here and up pops an anchor image for each section.
The Brown University home page...
Haven't seen this pale yellow, gray/green combination for a while. It provides a great neutral setting.
Great energy on this page—the burst stripes draw your eye to the center—the imagery is interesting and fun.
If you like the “there's a lot happening here” look (I do), this site offers an excellent model.
A great example of leaning on a single, powerful design element: simple, close-up photography.
By separating the foreground images from the background images, this page creates some interesting, motion picture-like movement.
This a wonderful example of how to use a Web to tell a story. I particularly like the frantic Christmas trees.
(The illustration style reminds me, a little, of Robert McCloskey...)
One Morning in Maine by Robert McCloskey (at amazon.com)
An unusual but striking color combination.
Ever wish you could recall Web pages (yours, your client's, your prospect's, and any other) as they appeared four or five years ago? You can—whether you have a practical interest or simple curiosity, the Wayback Machine has recorded over 10 billion pages (multiple copies of the entire publicly available Web) since it began archiving in 1996. Return with us now to those thrilling days of yesteryear, when Adobe.com was touting Photoshop 4.0 and cnet.com was recommending a bargain, $2000 133-MHz Pentium computer
The name plate is a nice example of melding two- and three-dimensional elements.
Like the neutral atmosphere of a fine art gallery, a black and white Web environment makes the introduction of color that much more dramatic.
There is a mountain of information here, but the Spartan nature of the design and navigational structure perfectly match the simplicity of the subject.
A good example of how “show” is often a better way of communicating than “tell.”
This site is almost “over-designed,” but the thinking behind the architecture, navigation, and presentation is impressive.
An example of an information module devoted to a specific product...
The precision of the layout and the organizational insights behind the presentation of the information at Subtraction.com are second to none. Khoi Vinh, the Design Director for NYTimes.com, is its host and architect.
Another simple, light Web design.
http://www.postalmuseum.si.edu/queen's/
Effective use of color, type, and animation.
The cover:
https://www.ecotonoha.com/index_en.html
The tree:
https://www.ecotonoha.com/ecotonoha.html
An interesting Web metaphor: A book inscribed with handwritten headlines.
Note how the site above and this one, both designed by Daniel Will-Harris, include an “About this site” page that features credits for the contributors. Nice touch.
http://www.electriceggplant.com/davidmccullough/about.htm
This interesting site, created by an Istanbul design firm, uses lots of antique-like illustrations and jewelry pieces to create a rich, complex environment.
To me, the Tazo Tea site looks a lot like a print piece. It boasts a wonderful earthy palette and an interesting mix of still life photographs, intricate typographic treatments, and many ornamental illustrations. I particularly like the effect of steam rising from the cups.
An interesting use of real images as metaphors.
http://www.gtalondon.org/staff.php
The subtle use of images and color really work well here.
http://www.annagriffin.com/index.html
Interesting how feathered gray edging is used to set off various sections of this page.
http://www.canadel.ca/workshop.php?lg=en
At times, clean design and sound thinking trumps complexity.
http://www.sandstromdesign.com/
This site offers some of the most interesting examples of Flash animation I've seen. When you “Enter” Redwood Creek, the first screen offers a wonderful, gently animated line illustration reminiscent of a fruit crate label. Click each major section to zoom into and out of other scenes.
Crisp, bright images tell the story better than a graphics-intensive design.
http://www.design-partnership.com/
Nice combination of images and solid colors. Great photography.
Thank John McWade, the editor of Before & After for sending me this link. It was produced for an AIGA conference a couple of years ago to showcase local attractions, shops, and restaurants of the host city. Very nice, thanks John.
http://powerofdesign.aiga.org/cultureguide/flash_content/index.html
How do you make flip-flops a fashion statement? Build a brand around them. Havaianas.com is an amazing, fresh site that is worth taking a look—you'll need a high-speed connection. I love the illustration style and color palette.
Very nice example of Web story telling—literal and figurative.
http://www.homesoflastingcharacter.com/marshall.html
I like how the designer of this site uses an anchor illustration for each issue.
http://www.jimcollins.com/index.html
And uses little snippets of the illustrations to archive past stories.
http://www.jimcollins.com/lab/index.html
The motion here certainly captured my attention.
As its head “cultivator,” Dave Shea describes the css Zen Garden as a collection of pages that demonstrate what can be accomplished visually through CSS-based design (Cascading Style Sheets). The folks who submit designs also include the actual style sheet used to create their pages. The designs and code are an excellent source of inspiration and information. An example.
http://csszengarden.com/?cssfile=154/154.css
The official list of designs.
http://www.mezzoblue.com/zengarden/alldesigns/official/
The Zen Garden cover page.
Joshua Davis is a New York based artist, designer, and technologist producing both public and private work for companies, collectors, and institutions. This site offers some great examples of his fascinating illustrations.
http://www.once-upon-a-forest.com/
Color me crazy, but for some reason, I love the OM Records logo (don't have a clue about the music but I'm nutty about the logo). I came across it on the designer's site (Capacitor Design Network)—it takes some doing to get to it, but I think it's worth the trip:
http://www.capacitornetwork.com/CDN2002_c.html (then click > Work > OM Records)
And here it is in use:
How do you get attention? Do something different with the same space everyone else is using.
http://www.n-gage.com/worms/wwp.htmlh
I want you to see how this designer draws you into his Web using an illustrated street scene (following the intro). Very effective both visually and functionally.
http://www.pedestriandesign.com/
Great illustrations show, at a glance, something that is difficult to say. Check out this striking use of color and image.
http://www.rkdinc.com/remedy99_Web/reaching.htm
Got a clue what this is all about? I like it, but I don't get it. Be sure to check out the “graphics” section.
You can make great discoveries by following good designs to their sources but the process can be costly. For example, in my recent search for Christmas gifts I happened across...
fanciullafoods.com (on the Wayback Machine)
a Brooklyn, New York-based bakery. Look pretty good don't they? The perfect holiday gift for a client, yes? Well I never found out. I was so struck by the simplicity of the site's design and the effective use of photography that I abandoned my shopping and followed a link to the site's designer: Steven Gross.
http://www.ssgphoto.com/botanic_P07.html
http://www.ssgphoto.com/industrial_p06.html
Nice stuff, “What else has this guy designed?” So I took a look at his list of links and found his brother, illustrator, artist Alex Gross...
Any question who designed Alex's site? Looks and feels a little like Fanciulla's doesn't it? Then I started looking at Alex's illustrations and decided to buy a print (this is the costly part. I was looking for gifts and ended up spending $50 on myself).
http://www.alexgross.com/prints/Print_shokei.html
By the way, if you appreciate Alex's unusual illustrations, the print I received is exquisite. It is printed in Ultrachrome archival inks on fine matte paper using an Epson 2200 printer. The colors are stunning—color that could not be produced by a printing press.
From baker to artist? As I found out from Alex, Fanciulla is his sister-in-law's bakery (perhaps some grand conspiracy of creativity).
Check out how this designer uses film-like “panning” moves to highlight photographs...
Andrei Michael Herasimchuk was one of the first official interface designers hired at Adobe Systems. The fact that he was a key player in the development of the interfaces for Adobe Photoshop, Illustrator, and InDesign is sufficient reason (for me) to recommend his personal Web.
I love the simplicity of these paper cutouts. They provide a distinct contrast to the digital environment in which they appear...
http://www.cio.com/archive/111504/guide.html
A high-end fabric and furniture destination wraps its sight in brown paper and accentuates it with black and white photographs...
http://www.zimmans.com/index.html
To explain its “Integrated Motor Assist technology,” Honda gets us to do a new thing in an old way: turn the pages of a book...
I've been searching for warm sites—sites with visual personalities that are, to my eye, warm and welcoming. Here are a couple that strike me that way. Your thoughts? Warm sites you've found?
http://www.teacupsoftware.com/
It doesn't get simpler than this site, home of furniture manufacturer Vitra. Just goes to show complicated is not necessarily better.
If you believe that crop circles are the work of creatures from Neptune—skip this one—I'd rather not be the one to burst your bubble. That said, I love the design of circlemakers.org—for me, it is both bold and attractive.
Pirated-Sites.com showcases side-by-side comparisons of Web sites that are suspected of borrowing, copying or stealing copyright-protected content, design or code without permission. It is guaranteed to increase every designer's heartburn that we have seen something, stored it away in our heads, and later will design something that looks a little too much like the original.
Pirated-Sites.com: Design “theft” suspects
What makes this design distinctive? The colors, the typefaces, and the illustrations certainly are well chosen, but the thing that makes it work for me is the underlying symmetry or balance of its elements. I'm a sucker for symmetry. I am drawn to it in nature, in architecture, and in graphic design. (And forever pursuing it in life.)
http://woodchuck.com (from the Wayback archive)
I'm certain you know Second Story, but if you don't I'm excited to be the one to introduce you. It is, in my book, the premiere interactive design studio in the world. Its list of clients testifies to that fact: The Museum of Modern Art, the Smithsonian Institution, Discovery, National Geographic, PBS, DreamWorks, Kodak, and so on.
Or right to their extensive portfolio of projects:
http://www.secondstory.com/collected.php?SubjectMask=0&PurposeMask=0&FormatMask=0
Complaints about Flash sites have become cliche, “Nothing but zooming typefaces and blinking arrows,” they say. While it is true that much of what I see is mere decoration, panning the process discounts those who are using Flash to rethink how we organize information and to build interfaces to extraordinary new tools.
If you think Flash is just flash, to meet 2advanced...
