Mar 5
Web Design
Anyone who thinks graphic design is merely about style doesn't understand consumption. You can bake a pretty cake, but the true test of its quality is in the eating.
To me, the future of graphic design is clearly in the development of intelligent user interface. On paper or the screen, the most highly prized skill will be a designer's ability to recast information in ways that make it most interesting and useful.
The recently redesigned blog of designer Simon Collison is a good example of that type of user-centric thinking. He generously gives as an in depth insight into his inspiration, ideas, processes, and type and design choices.
Mr. Simon Collison...
An indepth look at the site design...
Watch for the details. For example, the treatment of footnotes...
In February of 2010 Collison left the firm he cofounded—Erskine Design...
Collison's Twitter page...
Visit the Ideabook.com Store | Subscribe to the newsletter
Feb 24
Web Design
You don't necessarily have to agree with all of what Liam McKay defines as "quality" to see the value in his post on the subject. In addition to ideas on type and spacing, he points out examples of excellent graphics craftsmanship--an important aspect of web design that I haven't seen discussed often enough.
How to Spot Quality within Web Design: Examples & Tips...
An interview with Liam MaKay...
MaKay's Twitter page...
Visit the Ideabook.com Store | Subscribe to the newsletter
Feb 17
Web Design
You really need to see this. Bronwyn van der Merwe, the Head of Design and User Experience at the BBC just posted an article explaining a system-wide redesign they have been working on. I recommend you read it because I think it demonstrates how sophisticated web design has become and because I think (if you are into web design) that you'll find smart thinking to incorporate into your own work. I certainly did.
The article: A new global visual language for the BBC's digital services...
Visit the Ideabook.com Store | Subscribe to the newsletter
Feb 10
Basic design
What I like so much about Fred Showker is that he sees the graphic design industry from more than one angle--he's is a working designer, an experienced teacher and presenter, a bit of a technoid, and the creative mind behind one of the top marketing and design resources on the Web--the Graphic Design & Publishing Center.
Not only does he stay curious about what's next, he has amassed a huge archive of insightful articles and tutorials on design, photography, typography, marketing, and the business of graphic design.
He recently did a major reorganization and re-launch of the site so, if you haven't already, I urge you to take a look.
The Design & Publishing Center...
Example 1: Visual Proofreading: 10 Rules...
Example 2: Designing Spaces...
Example 3: Throw Your Press Release in the Trash...
Fred's bio...
I've been a subscriber to his newsletter, DT&G NEWS, for years...
Visit the Ideabook.com Store | Subscribe to the newsletter
Jan 29
Web Design
It is sometimes referred to as 2.5D animation, sometimes as pseudo-3D, this technique involves creating a series of 2D images separated into layers and animating them simulating film moves such as trucking and zooming. It can be elaborate or simple but either way it's eye-catching.
Thanks to Twitter friends Joel Wires, Paul Casper, PJ Cassel, Jean-Claude Tremblay, Filmjr, Harold Thompson, Jesse Gardner, Ken Fisher, and others for helping me research this...
Example 1: This is the sequence that first got me interested in digging into the subject (the opening sequence from the Luck Development Partners site)...
Example 2: Jesse Gardner points us to the VISA "Trip for Life" TV Spot...
Example 3: Ken Fisher points us to a very cool variation using CSS...
Example 4: The opening from the Showtime's United States of Tara...
And here's a tutorial from Chris Gates at Digital Juice that lays out the process of creating a 2.5D animation using Photoshop and After Effects...
Visit the Ideabook.com Store | Subscribe to the newsletter
Jan 20
Web Design
The FWA (Favourite Website Awards) describes itself as "...an industry recognized website award program and inspirational portal based in England and is one of the World's leading website recognitions". Throughout the year the FWA names a SOTM (Site Of The Month) winner and then enlists an impressive panel of judges to discern the web site of the year.
Such judgments are, of course, subjective, but you can bet that the winner is something worth seeing. For 2009, the winner is WeChooseTheMoon.com. The concept, design and development is credited to The Martin Agency and Domani Studios.
There is also a People's Choice Award, Soytuaire.Labuat.com developed by Herraiz Soto & Co..
The FWA 2009 site of the year: WeChooseTheMoon.com...
The 2009 People's Choice Award winner: Soytuaire.Labuat.com...
Visit the Ideabook.com Store | Subscribe to the newsletter
Dec 9
Web Design
I'm a sucker for this type of 3D-design. It gives you a sense of depth you just can't match with most artificially built shapes and shadows.
Another great cover...
While you're here, they also have a portfolio of work well worth a look...
Visit the Ideabook.com Store | Subscribe to the newsletter
Nov 20
Web Design
Here's another good way to show off you work. I suppose you could use it as a primary destination, or as a way of boosting your visibility by offering an alternative source. In any case, Carbonmade offers both free and paid versions.
An example portfolio for copywriter Kathleen Honey (nice stuff)...
Carbonmade features...
Visit the Ideabook.com Store | Subscribe to the newsletter
Nov 16
Web Design
I wish other things worked like the web. In many cases it provides lots of value for very little money. Wouldn't it be nice, for example, if you could buy a years worth of chocolate cake for the cost of a cupcake?
Well that's roughly the equivalent of an offer I stumbled across today. As of a couple of days ago, you can hire Khoi Vinh, Design Director for NYTimes.com, and WordPress authority Allan Cole to design the underlying structure of you web site for a grand total of $45. Not $45 per hour--$45 period.
How? By purchasing the WordPress theme/template they took a year to develop. Is it good? You tell me. Vinh says, "If I were to redesign Subtraction.com today, it would look like Basic Maths." (Subtraction.com is his much written about and admired personal web site.)
It would seem to be worth the price if only to deconstruct it to see how it works.
This is a live demo of the theme/template...
This is where you purchase the package...
Read developer Khoi Vinh's announcement of the release...
Allan Cole's WordPress blog...
Visit the Ideabook.com Store | Subscribe to the newsletter
Nov 11
Web Design
Stephen Bau has created a terrific collection of commonly used web elements built on Nathan Smith's 960 pixel grid system. As he explains it, "I have been looking for a means of rapidly developing interactive prototypes for our site designs at Domain7. So I have been building a library of commonly used HTML elements, combining these with CSS for typography and layout, and adding some basic effects available from popular JavaScript libraries."
Even if you don't use the code, the page itself will get you thinking about elements you might want to include in your design.
If you are unfamiliar with the 960 Grid system, I have also included a link below.
Stephan Bau's "design incluences" page...
Nathan Smith's 960 Grid System...
Visit the Ideabook.com Store | Subscribe to the newsletter
Oct 28
Web Design
I wish more of my work reflected the confidence and restraint this design does. So nice.
24hourplays.com...
Visit the Ideabook.com Store | Subscribe to the newsletter
Oct 12
Print Design
Adobe has produced a very useful white paper titled Deciphering the Web, A resource for print designers. It speaks to traditional print designers who need a basic introduction to web and interactive design.
Who doesn't do web and interactive design in 2009? You'd be surprised, I know more than a few talented designers and art directors have little or no web knowledge and have resigned themselves to thinking that it's "too late" for them to catch up.
Well that is simply not the case--as they say in the white paper, "Good design is good design." As a matter of fact, if you count yourself among this group, you might even have a bit of an advantage. Today, with some clearly established ways of doing things online, you can skip much of the insanity the online community has had to navigate for the last decade or so.
It is not necessary to be a technical wizard--if you so choose, you don't need to learn to write code, you don't even need to learn how to use all of the programs involved. There are many talented developers and technicians who are more than happy to team with you to produce whatever you dream up. Like print, the key is in knowing what you want to say and show, how you want to say and show it, and in cultivating a network of experts to get the work done.
Deciphering the Web: A resource for print designers (2.79MB PDF)...
This is an in depth presentation that introduced the white paper at the recent Adobe MAX 2009...
Visit the Ideabook.com Store | Subscribe to the newsletter
Oct 7
Web Design
Here is a 20-page web proposal shared by Rogue Element via HOW magazine. It is always interesting, often instructive to see how others conduct business. This (to me) is an excellent example.
The 20-page web design proposal (2.5MB PDF)...
Notes about the proposal on HOW...
Rogue Element's site...
Visit the Ideabook.com Store | Subscribe to the newsletter
Oct 1
Web Design
I ran a sitemap of GordonRamsay.com and it exceeded the 500-page limitation of the scan—a rather intimidating figure (much like its namesake).
But you wouldn't know it by looking at the home page. Simple, elegant images and a thoughtful user interface make the information easy to find and pleasant to look at. Interesting how well it mirrors Ramsay's own mantra of "classic" and "simple."
(For those who don't know him, Gordon Ramsay is a chef with what one might term an "acerbic" personality who stars in several reality television series.)
GordonRamsay.com...
Example of the depth of pages--a profile of the Head Chef at one restaurant...
Visit the Ideabook.com Store | Subscribe to the newsletter
Sep 16
Typography
This site, to me, is interesting on at least three different levels. First, it uses a standard metaphor—the printed page—in a slightly different way. When you click "Preview" at the top right of the screen, the entire page shifts to reveal the surface underneath it.
Second, I like the subtleties of the folds and light manifest as different shades of yellow.
And third, the icons ain't bad either!
Royalty-free vector icons, glyphs, and symbols based on the Helvetica Bold typeface...
Visit the Ideabook.com Store | Subscribe to the newsletter
Sep 7
Web Design
If you're interested in graphic design and publishing you are (no doubt) familiar with America's Test Kitchen and its parent: Boston Common Press. The publications, books, television shows, and web content it publishes are among the best I've seen. The content seems well-researched, well-written, and well-designed--their web sports an impressive, intuitive user interfaces.
(BTW, if you're a foodie, these are also terrific products.)
Their online and print newsletter is CooksIllustrated.com...
Here you'll see the depth of their offerings...
And here is an excellent article on Mequoda.com discussing the fundementals of their business model...
Visit the Ideabook.com Store | Subscribe to the newsletter
Sep 2
Web Design
Traveling the web as much as I do, I see lots of "can't see the forest for the trees" issues. Problems and opportunities that seem obvious to the visitor that you, the site designer, might never figure out for yourself. A reaction. A technical bottleneck. An seemingly obvious deficit of information or direction.
One way to harvest the ideas of those who have that all-important, arms-distance perspective is (simply) to ask. Here, for example, is a form offered by the Smithsonian's Museum Studies site.
(I know that this is restateing the obvious, but sometimes what is obvious to you is not obvious to me.)
The survey...
The page it originates from...
Survey Monkey is the service this particular organzation used to produce the page and capture the information...
Visit the Ideabook.com Store | Subscribe to the newsletter
Aug 19
Web Design
I think personalizing a web site (in most cases) is a good thing. It provides a sense of who's doing the talking, the scope of the business, and (most importantly) that there is someone confident enough about the product that they are willing to attach their name to it.
Most sites are black holes--two or two hundred people so concerned about privacy that they don't even list the organization's street address. Don't get me wrong, providing too much personal information is not smart. But contracts require signatures. If you want information about me as a customer and are unwilling to share anything about you as the seller, I get a little queasy.
Here is one example of how it can be done. Have any others?
An example by Blue Sky Factory...
Visit the Ideabook.com Store | Subscribe to the newsletter
Jun 29
Web Design
I must get some kind of endorphin rush from "different." I like to see people break the mold, send the conversation in another direction, turn the tables, innovate, and so on. Web pages that scroll sideways are no longer revolutionary but I still love the fact that they are so counter-intuitive. Here is yet another excellent example pointed to by my brother Jim (thanks buddy). Music ain't bad either.
Elvis Costello's site...
If you're curious, here's the background image...
The illustrations are by (the strange) Tony Millionaire...
Visit the Ideabook.com Store | Subscribe to the newsletter
Apr 11
Web Design
I did not write this book--but I sure wish I had. As someone who actively searches the Web for great design, I can testify to the thousands of hours it must have taken Patrick McNeil (of DesignMeltdown.com) to locate, categorize, and assemble such a large cross-collection of superior web ideas. Simply having a snapshot of these hundreds of sites at this time in the history of the Web is well worth the price.
The Web Designer's Idea Book by Patrick McNeil...
Apr 8
Web Design
Here's another version of the "infinite canvas" idea articulated by Scott McCloud. This time, we move screen-to-screen, box-to-box. I just wish I could isolate and point you to a specific frame--that, to me, is the big negative of Flash development.
Hawaiian Modern, The Architecture of Vladimir Ossipoff...
Visit the Ideabook.com Store | Find this useful? Subscribe here
Apr 6
Ideas 101
On his blog, you can view the photograph of Daniel Will-Harris--hands clasped across his forehead--as an artsy portrait of an urbane intellectual, or the final attempt of a defeated soul to keep his brain from exploding. Whichever you presume, I encourage you to read this laugh-out-loud design review of what Daniel crowns the worst of all hotel web sites.
Bad design at a design conference...
More...
Visit the Ideabook.com Store | Find this useful? Subscribe here
Mar 27
Web Design
I love the idea of exploring the size and shape of the page. In this TED presentation, author and artist Scott McCloud explains and demonstrates his "infinite canvas" design strategy.
It is SO easy to lull ourselves into adopting restrictions that are often the remnants of decisions that, in many cases, is no longer irrelevant.
I realize this is not a new idea, but it is the first time I have heard it formally discussed. Best of all, it has got me thinking about ways to expand on the idea.
Thanks to my friend Don Snyder "Don The Idea Guy" pointing me to this.
Scott McCloud lays out the premise (pretty entertaining)...
A written explanation from McCloud's site (be sure to look around, there is lots to see there)...
A "hypercomic" by Daniel Merlin Goodbrey...
Don The Idea Guy...
Subscribe to Chuck's Design Links Briefing Visit the store
Mar 13
Web Design
I've been a fan of Hornall Anderson for a long time. I point you to their site to show you some interesting ideas they have incorporated into the user interface. (Yes, they may not have invented these, but seeing them in this configuration caught my attention.)
A blog calendar time line (bottom) and pop-up search (top right)...
Hold your mouse pointer over an image for a slide show...
A slant column on each portfolio page that moves off frame when you click the "X"...
In the Ideabook Design Store: Pantone Guide to Communicating with Color...
Mar 11
Web Design
Watch how the designers employ screen symbols to demonstrate Facebook's new home page design--the three screens below the heading, "More about the publisher." I like how they simply silhouetted the elements to show the position of what they are describing.
It's all about the details.
Look at the screens below the heading: "More about the publisher"...
In the Ideabook Design Store: Before & After: Page Design...
Feb 13
Web Design
I like how this web experience begins with an establishing shot and then how the larger picture is subdivided into conventional categories. I was also drawn to the subtlety of the menu changes.
delicatessennyc.com...
In the Ideabook Design Store: Before & After: Graphics For Business...
Dec 26
Web Design
I want to use this site as a catalyst for a discussion. I like the design--it's an interesting approach to teaching people how to react when an earthquake hits.
But it also raises two questions about user interface. First, does inviting the reader to pick and choose what they want to read and to potentially bypass a critical aspect of the presentation the best way to cover the information?
And second, is a multiple choice question that plants right answers among wrong answers the best way to help readers learn and retain answers in a potentially crisis situation?
UI experts (and others), I'd love to hear your thoughts.
The earthquake quiz...
NEW in the Ideabook Design Store: Tintbook CMYK Process Color Selector...
Dec 15
Web Design
A solid set of notes is often the most valuable outcome of attending a conference. Good notes are certainly not a substitute for attending and making all the associated connections, but composing and referring to a thoughtful set of notes is definitely useful.
To call Mike Rohde's "sketchnotes" useful would play them short. These notes are both a valuble resource and a lesson in visualizing information.
User Interface Engineering...
The Sketches category of Rohde's blog...
In the Ideabook Design Store: The Color Harmony Guide...
Dec 12
Web Design
The saying is, "Do as I do, not as I say." If you want to see what the usability experts view as state of the art interface design, you would expect they are using it themselves. There is much to learn by simply looking at how the experts set up their own site navigation.
A few interesting examples:
User Interface Engineering...
Nielsen Norman Group...
Adaptive Path...
In the Ideabook Design Store: The Copywriter's Handbook...
Dec 1
Web Design
This struck me as a particularly interesting use of positive and negative space. I like the way the designer changes the colors in the counterforms of select letters and numbers and how she uses a mixture of positive and reverse type.
Lots of good design appears to be uncomplicated (which means, of course, that it is)--it is often more about confidence in your choices than it is your ability to be wildly creative.
NEA Jazz in the Schools...
Agnieszka Gasparska of Kiss Me I'm Polish is credited with the design...
In the Ideabook Design Store: Pantone Guide to Communicating with Color...
Nov 14
Web Design
For the uninitiated, it is broadly referred to as a content management system (CMS). The idea is, instead of starting from scratch, you build your web to sit on a proprietary or open source CMS platform. That way you profit from all the thinking and development already contributed by others. Here is a good place to compare systems head to head.
Compare hundreds of different content management systems at cmsmatrix.org...
In the Ideabook Design Store: Moleskine Notebooks...
Nov 7
Web Design
Put this in the category of tools you will never need—until you need them. Browsershots is an online service (created by Johann C. Rocholl) that makes screenshots of your web design in as many as 85 different browser versions with a variety of settings (with and without Flash, various depth of color, and so on). If you wonder how others are seeing your work, this is a very educational and sometimes frustrating process.
Here's to all the folks who invest their time and spirit in the wonderful array of useful tools on the world wide web--if any of you are listening, thank you a thousand times.
Browsershots compatibility testing...
In the Ideabook Design Store: Getting It Printed...
Nov 3
Web Design
TasteBook.com provides tools for re-purposing web content--in this case, recipes. The idea is simple: You find material you like on participating web sites and compile it into a book that is then printed and shipped to you. It's smart on three levels: One, it allows the reader to pick and choose the content of their book. Two, it offers a new revenue stream for the participants. And three, it provides the developer with a way of offering unique content without having to create it from scratch.
The cover page...
In the Ideabook Design Store: Before & After: Graphics For Business...
Oct 8
Web Design
If you're interested in ecommerce, you'll be interested in the Get Elastic Ecommerce Blog. It includes lots of in depth information on marketing, usability, design, and so on. Want to know how to minimize shopping cart abandonment? Or what to include in a comprehensive product description? Get Elastic is a good place to start.
Get Elastic, the ecommerce blog...
In the Ideabook Design Store: Graphic Artists Guild Handbook: Pricing & Ethical Guidelines...
Sep 10
Web Design
Pretty interesting idea here—design a web using what looks like an organizational flowchart. It gives the customer a very easy way to find an item. I wonder if it might even work better for a project where the product images were not so key (I tend to think showing multiple product makes a page more interesting).
The Eva Solo flowchart design...
The cover page...
A broad view...
In the Ideabook Design Store: The Desktop Publisher's Idea Book...
Aug 27
Web Design
This type of design grounds me. It reminds me that you can never go wrong by focusing on basics. To differentiate your product or service from your competitors you identify benefits, communicate your passion, demonstrate your uniqueness, and establish your style.
Bakemania does it all—it is clear, passionate, and beautifully stated...
In the Ideabook Design Store: The Copywriter's Handbook...
Aug 20
Web Design
I'm always on the lookout for interesting ways of navigating the screen. Johnson Banks uses a simple click and drag method to move around a big picture. To me, adds a sense of discovery to the process.
Climb the work tree...
There are many other interesting ideas to explore at Johnson Banks...
In the Ideabook Design Store: Task Force Clip Art...
Jul 28
Web Design
The Mohawk Fine Papers web employs an interesting paging technique. It communicates the content via a stack of single pages which (to me) effectively mask the scope and complexity of the content.
Two questions. First, do you agree that the design communicates a sense of “less?” And second, do you see that as a positive or a negative?
Mohawk Fine Papers...
In the Ideabook Design Store: The Desktop Publisher's Idea Book...
Jul 4
Web Design
Simple is my mantra—often said and rarely achieved. In a world that becomes increasingly complex, visual simplicity seems most appealing to me. That said, simple is THE most difficult type of design. It requires a unique talent for pairing elements that, at the same time, speak quietly and deeply. Designer Nicholas Feltron has that talent, here are two examples.
The Barterhouse site...
A presentation from Penguin Books' We Tell Stories web...
In the Ideabook Design Store: Art Parts Clip Art...
Jun 20
Web Design
I'd like to hear about your reaction to this. Typically, I am not a big fan of forced Flash. By that I mean being forced to watch a Flash movie intro without first choosing to do so. But this I don't mind. And, honestly, I simply would not have learned as much about this business if they had not jumped in and told me. What is your first reaction? (I have no connection with these folks other than they sent me a link.)
Take the Widen tour...
In the Ideabook Design Store: Getting It Printed...
May 30
Web Design
First, let me preface what I am about to say (gush) by telling you I don't know anyone at this company and I get no compensation for recommending them—but I am compelled to say that Media Temple is THE most intelligently designed, high-powered, and user friendly internet service provider (ISP) service I have seen or used. If you or one of your clients is in the market for a place to lay your/their head, this is it. The interface is a pleasure to use, the selection of tools is deep and wide, and the technical support (the five or ten times I have called) is smart and friendly. Even at 2AM.
I urge you to take a look around the site and to study the interface design, it is the best I have seen anywhere and they are constantly honing it.
Take the tour...
In the Ideabook Design Store: Art Parts Clip Art...
May 28
Web Design
Click play on this TED presentation, hover your mouse pointer over the bottom of the screen, and a bar appears that divides the presentation into subject sections—a very nice way to make the content accessible. (This is Malcolm Gladwell's talk on the distinctions between universality and variability including the source of the quotation, “To a worm in horseradish, the world is horseradish.”)
Click play and hover your mouse pointer over the bottom of the player...
In the Ideabook Design Store: Moleskine Notebooks...
May 23
Web Design
Greg Story is credited as the designer of the Today page on msnbc.com so I will attribute this technique to him. What I am pointing to is how he uses a transparent border to surround and transition between the menu and main content areas and the background. Revealing what is behind an image adds a sense of depth and an air of delicacy.
Yes, I'm pointing to the obvious. I do so because I believe to truly understand a particular design structure, you need to identify and examine the details. 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.
Greg Story's transparent borders...
In the Ideabook Design Store: Getting It Printed...
May 19
Web Design
Here is an presentation that really hits its mark. It is the age-old battle between harsh and soothing. Ikea flies us through a rapid fire sequence of harsh realities and lands us in slow-motion on a cushion of jazz. Click CHANGE BEDROOM and you're on to the next sequence and room.
Ikea's “You need a quiet place”...
In the Ideabook Design Store: Getting It Printed...
May 12
Web Design
Watch how this menu matches photographers to their areas of expertise. When you rollover the names of photographers in the left-hand column, their areas of expertise are highlighted in the right-hand column. Rollover the area of expertise and photographers with that expertise are highlighted.
(While your there, don't miss the portfolios, Marge Casey is a representative for many very talented photographers.)
Marge Casey menus...
In the Ideabook Design Store: The Desktop Publisher's Idea Book...
May 5
Web Design
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.
The EffectiveUI interface...
NEW in the Ideabook Design Store: Tintbook CMYK Process Color Selector...
May 2
Web Design
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...
Mar 26
Web Design
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.
1trickpony...
In the Ideabook Design Store: Before & After: Page Design...
Mar 21
Web 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...
Mar 3
Web Design
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...
Feb 29
Web Design
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...
Funnel's front door...
In the Ideabook Design Store: FontHead Typefaces...
Feb 18
Web Design
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.
Browsing topics...
In the Ideabook Design Store: Before & After: Graphics For Business...
Feb 1
Web Design
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...
More from his portfolio...
Jan 7
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...
Jan 4
Web Design
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.
Jeff Bridges' Sketchpad...
Dec 31
Web Design
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”...
Dec 28
Web Design
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.
The McMaster-Carr catalog...
Dec 15
Web Design
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.
It's a bit different...
Nov 12
Web Design
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...
Nov 5
Web Design
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...
Nov 2
Web Design
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.”
The world of Toyota...
Oct 22
Web Design
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...
Oct 19
Web Design
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...
Oct 3
Web Design
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...
And B&N Media...
Sep 28
Web Design
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.
Kashiwa Sato and Samurai...
Sep 24
Web Design
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...
Sep 21
Web Design
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...
Sep 19
Web Design
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...
Sep 10
Web Design
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.
After...
Before...
In the Ideabook Design Store: Getting It Printed...
Aug 6
Web Design
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.
Yancey's site...
In the Ideabook Design Store: Creative Business CD-ROM...
Jul 25
Web Design
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.
Urban Outfitters...
The Swedish Street Knitter...
In the Ideabook Design Store: FontHead Typefaces...
Jul 4
Web Design
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.
Elegant ugly...
In the Ideabook Design Store: Design-It-Yourself: Graphic Workshop...
Jun 29
Web Design
I pledged I would never use lemon yellow. Then I ran across FOROALFA.com. I like it.
An unlikely combination...
In the Ideabook Design Store: Task Force Clip Art...
Jun 27
Web Design
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.
The home page is black...
Article pages are white...
In the Ideabook Design Store: Templates for InDesign, QuarkXpress, or PageMaker...
Jun 20
Web Design
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...
Jun 15
Web Design
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...
Give you an overview...
And offer a one-page case study of the project in PDF format (212KB)...
In the Ideabook Design Store: Before & After: Graphics For Business...
Jun 8
Web Design
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...
In the Ideabook Design Store: Graphic Artists Guild Handbook: Pricing & Ethical Guidelines, 11th edition...
Jun 6
Web Design
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.
With great respect...
Jun 1
Web Design
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...
May 30
Web Design
Small matter, but I like the way the ruled line bisects the menu and the information block below it.
West Side Organics...
In the Ideabook Design Store: Design-It-Yourself: Graphic Workshop...
May 21
Web Design
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.
Glaceau Vitamin Water...
May 18
Web Design
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.
An example of the format...
Take a look around, there is much to see...
May 4
Web Design
This site features a totally unexpected visual metaphor: a rusty old refrigerator. It works.
Luke Stevens Design...
Apr 27
Web Design
Place all the information on one surface and to show the user how to navigate it.
The Samaritans of Singapore...
Apr 19
Web Design
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.)
Jonathan Yuen's Web...
Apr 11
Web Design
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).
Zarovka...
Apr 4
Web Design
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.
Design Within Reach...
Mar 19
Marketing PR
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...
Mar 16
Web Design
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?
Cool Breath Power...
Mar 9
Web Design
The economical use of color (green, red, black) and type gives the GreenHomeGuide placid feel about it—almost a non-design.
GreenHomeGuide...
Mar 5
Web 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.
The Snap site...
Feb 16
Web Design
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...
Jan 29
Web Design
Haven't seen this pale yellow, gray/green combination for a while. It provides a great neutral setting.
Turner Movie Channel...
Jan 26
Web Design
Great energy on this page—the burst stripes draw your eye to the center—the imagery is interesting and fun.
Generation Church...
Jan 12
Web Design
If you like the “there's a lot happening here” look (I do), this site offers an excellent model.
www.worshiptogether.com
Jan 10
Web Design
A great example of leaning on a single, powerful design element: simple, close-up photography.
www.deliciousdays.com
Jan 8
Web Design
By separating the foreground images from the background images, this page creates some interesting, motion picture-like movement.
www.maxtorsolutions.com
Jan 3
Web Design
This a wonderful example of how to use a Web to tell a story. I particularly like the frantic Christmas trees.
www.bigtimeattic.com
(The illustration style reminds me, a little, of Robert McCloskey...)
One Morning in Maine by Robert McCloskey (at amazon.com)
Dec 20
Web Design
An unusual but striking color combination.
www.emotionslive.co.uk
Dec 15
Web Design
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 Wayback Machine...
Dec 13
Web Design
The name plate is a nice example of melding two- and three-dimensional elements.
An example...
Dec 11
Web Design
Like the neutral atmosphere of a fine art gallery, a black and white Web environment makes the introduction of color that much more dramatic.
www.adamsmorioka.com
Nov 15
Web Design
There is a mountain of information here, but the Spartan nature of the design and navigational structure perfectly match the simplicity of the subject.
carnations.org.uk
Nov 13
Web Design
A good example of how “show” is often a better way of communicating than “tell.”
www.freshdirect.com
Nov 10
Web Design
This site is almost “over-designed,” but the thinking behind the architecture, navigation, and presentation is impressive.
This is the main site...
An example of an information module devoted to a specific product...
Oct 23
Web Design
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.
The cover...
An article example...
Oct 16
Web Design
Another simple, light Web design.
http://www.postalmuseum.si.edu/queen's/
Oct 9
Web Design
Effective use of color, type, and animation.
The cover:
https://www.ecotonoha.com/index_en.html
The tree:
https://www.ecotonoha.com/ecotonoha.html
Oct 6
Web Design
An interesting Web metaphor: A book inscribed with handwritten headlines.
http://www.terrygamble.com/
Oct 4
Web Design
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
Oct 2
Web Design
This interesting site, created by an Istanbul design firm, uses lots of antique-like illustrations and jewelry pieces to create a rich, complex environment.
http://www.be2do.com/
Sep 29
Web Design
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.
http://www.tazo.com
Sep 22
Web Design
An interesting use of real images as metaphors.
http://www.gtalondon.org/staff.php
Sep 20
Web Design
The subtle use of images and color really work well here.
http://www.annagriffin.com/index.html
Sep 18
Web Design
Interesting how feathered gray edging is used to set off various sections of this page.
http://www.canadel.ca/workshop.php?lg=en
Sep 15
Web Design
At times, clean design and sound thinking trumps complexity.
http://www.sandstromdesign.com/
Aug 25
Web Design
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.
http://www.redwoodcreek.com/
Aug 23
Web Design
Wild, illustrated menus.
http://www.aardman.com/
Aug 21
Web Design
Crisp, bright images tell the story better than a graphics-intensive design.
http://www.design-partnership.com/
Aug 4
Web Design
Nice combination of images and solid colors. Great photography.
http://www.lushcafe.com
Jul 31
Web Design
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
Jul 26
Web Design
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.
http://www.havaianas.com/
Jul 24
Web Design
Very nice example of Web story telling—literal and figurative.
http://www.homesoflastingcharacter.com/marshall.html
Jul 14
Web Design
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
Jul 7
Web Design
The motion here certainly captured my attention.
http://www.audacity.co.nz/
Jun 30
Web Design
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.
http://www.csszengarden.com/
Jun 21
Web Design
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/
Jun 16
Web Design
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:
http://www.om-records.com
Jun 12
Web Design
How do you get attention? Do something different with the same space everyone else is using.
http://www.n-gage.com/worms/wwp.htmlh
Jun 9
Web Design
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/
Jun 7
Web Design
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
May 29
Web Design
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.
http://www.viva-graphics.com/
May 26
Web Design
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...
http://www.alexgross.com
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).
May 15
Web Design
Check out how this designer uses film-like “panning” moves to highlight photographs...
http://www.bocaresort.com/
May 14
Web Design
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.
http://www.designbyfire.com/
May 12
Web Design
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
May 10
Web Design
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
May 5
Web Design
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...
http://www.honda.co.uk
Apr 24
Web Design
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.flowerbud.com
http://www.teacupsoftware.com/
Apr 3
Web Design
It doesn't get simpler than this site, home of furniture manufacturer Vitra. Just goes to show complicated is not necessarily better.
http://www.vitra.com
Mar 29
Web Design
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.
http://www.circlemakers.org/
Mar 1
Web Design
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...
Pirated-Sites.com: Design “theft” suspects
Feb 27
Web Design
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)
Feb 22
Web Design
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.
http://www.secondstory.com/
Or right to their extensive portfolio of projects:
http://www.secondstory.com/collected.php?SubjectMask=0&PurposeMask=0&FormatMask=0
Dec 21
Web Design
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...
