Mar 5

Web Design

The future of graphic design is in the provision of access »

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.

simon collison

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

Bookmark and Share
» Comments

Feb 24

Web Design

The elements of a superior-quality 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.

web graphics function Liam Mckay

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

Bookmark and Share
» Comments

Feb 17

Web Design

Web design in 2010 (and beyond) »

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.

BBC Global Visual Language 2.0

The article: A new global visual language for the BBC's digital services...

Visit the Ideabook.com Store  |  Subscribe to the newsletter

Bookmark and Share
» Comments

Feb 10

Basic design

Meet Fred Showker and the Design & Publishing Center »

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.

conformal mapping

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

Bookmark and Share
» Comments

Jan 29

Web Design

The world of 2.5D animation »

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...

2.5D animation, pseudo-3D

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

Bookmark and Share
» Comments

Jan 20

Web Design

The FWA 2009 site of the year »

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..

we choose the moon Domani Studios The Martin Agency

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

Bookmark and Share
» Comments

Dec 9

Web Design

Three-dimensional web pages »

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.

spark letterpress love

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

Bookmark and Share
» Comments

Nov 20

Web Design

Need a simple portfolio solution? »

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.

Carbonmade

An example portfolio for copywriter Kathleen Honey (nice stuff)...

Carbonmade features...

Visit the Ideabook.com Store  |  Subscribe to the newsletter

Bookmark and Share
» Comments

Nov 16

Web Design

Create your next web site with most of the work already done »

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.

conformal mapping

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

Bookmark and Share
» Comments

Nov 11

Web Design

Building your web on the 960 grid »

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.

Stephen Bau Nathan Smith 960 grid

Stephan Bau's "design incluences" page...

Nathan Smith's 960 Grid System...

Visit the Ideabook.com Store  |  Subscribe to the newsletter

Bookmark and Share
» Comments

Oct 28

Web Design

Sometimes design is more about what you DON'T do »

I wish more of my work reflected the confidence and restraint this design does. So nice.

24 hour plays

24hourplays.com...

Visit the Ideabook.com Store  |  Subscribe to the newsletter

Bookmark and Share
» Comments

Oct 12

Print Design

For print designers who think that web technology has passed them by »

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 adobe white paper

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

Bookmark and Share
» Comments

Oct 7

Web Design

Inside look at a comprehensive web design proposal »

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.

rogue element, how magazine, web design proposal, design proposal

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

Bookmark and Share
» 1 Comments

Oct 1

Web Design

A good recipe for 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.)

gordon ramsay

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

Bookmark and Share
» 1 Comments

Sep 16

Typography

How do you improve on Helvetica? »

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!

dieline the leading package design web site

Royalty-free vector icons, glyphs, and symbols based on the Helvetica Bold typeface...

Visit the Ideabook.com Store  |  Subscribe to the newsletter

Bookmark and Share
» Comments

Sep 7

Web Design

Publishing content four ways: newsletters, books, web, and video »

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.)

America's Test Kitchen, Boston Common Press, cooks illustrated

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

Bookmark and Share
» Comments

Sep 2

Web Design

What do visitors think of your site? »

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.)

web survey

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

Bookmark and Share
» 1 Comments

Aug 19

Web Design

Should you show pictures of people on your web site? »

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?

pictures of people on web sites

An example by Blue Sky Factory...

Visit the Ideabook.com Store  |  Subscribe to the newsletter

Bookmark and Share
» 8 Comments

Jun 29

Web Design

My drug? Sideways web pages »

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 tony millionaire sideways web page

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

Bookmark and Share
» 4 Comments

Apr 11

Web Design

New in the ideabook.com store: The Web Designer's Idea Book »

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

The Web Designer's Idea Book by Patrick McNeil...

» Comments

Apr 8

Web Design

Screen-to-screen navigation »

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.

ossipoff hawaiian modern architecture flash

Hawaiian Modern, The Architecture of Vladimir Ossipoff...

Visit the Ideabook.com Store  |  Find this useful? Subscribe here

Bookmark and Share

» 3 Comments

Apr 6

Ideas 101

Design comedy »

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.

design comedy daniel will-harris

Bad design at a design conference...

More...

Visit the Ideabook.com Store  |  Find this useful? Subscribe here

Bookmark and Share

» Comments

Mar 27

Web Design

An out of the ordinary web design strategy: The "Infinite Canvas" »

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 Daniel Merlin Goodbrey comics

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

Bookmark and Share

» 1 Comments

Mar 13

Web Design

Design is not always invention—much of the time it is more a process of identifying and adapting existing ideas »

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.)

blog calendar timeline

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...

» Comments

Mar 11

Web Design

A UI nuance only a design junkie would love (or notice) »

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.

facebook redesign

Look at the screens below the heading: "More about the publisher"...

In the Ideabook Design Store: Before & After: Page Design...

» Comments

Feb 23

Web Design

The 2009 who's who of web design and ui »

Who do you think are the most influential web designers and user interface engineers of the day? Here is the beginning of my list. Who am I missing?

top web designers and engineers

Mark Boulton @ markboultondesign.com...

Douglas Bowman @ stopdesign.com...

Andy Budd @ andybudd.com...

Dan Cederholm @ simplebits.com...

Andy Clarke @ stuffandnonsense.co.uk...

Jeff Croft @ jeffcroft.com...

Jon Hicks @ hicksdesign.co.uk...

Molly Holzschlag @ molly.com...

Shaun Inman @ shauninman.com...

Steve Krug @ sensible.com...

Cindy Li @ cindyli.com...

Eric Meyer @ meyerweb.com...

Cameron Moll @ cameronmoll.com...

Jakob Nielsen @ useit.com...

Veerle Pieters @ veerle.duoh.com...

Dan Rubin @ superfluousbanter.org...

Jason Santa Maria @ jasonsantamaria.com...

Dave Shea @ mezzoblue.com...

Steve Smith @ orderedlist.com...

Jonathan Snook @ snook.ca...

Jared Spool @ uie.com...

Bryan Veloso @ avalonstar.com...

Khoi Vinh @ subtraction.com...

Lynda Weinman @ lynda.com...

Jeffrey Zeldman @ zeldman.com...

In the Ideabook Design Store: Design-It-Yourself: Graphic Workshop...

» 2 Comments

Feb 13

Web Design

Designing a web around an establishing shot »

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

delicatessennyc.com...

In the Ideabook Design Store: Before & After: Graphics For Business...

» Comments

Dec 26

Web Design

User interface: Is interactivity always the best approach? »

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.

earthquake quiz

The earthquake quiz...

NEW in the Ideabook Design Store: Tintbook CMYK Process Color Selector...

» 2 Comments

Dec 15

Web Design

How to attend a big time web design conference on the cheap »

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.

Mike Rohde

User Interface Engineering...

The Sketches category of Rohde's blog...

In the Ideabook Design Store: The Color Harmony Guide...

» 2 Comments

Dec 12

Web Design

One of the least discussed, most important sources of user experience 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 design

User Interface Engineering...

Nielsen Norman Group...

Adaptive Path...

In the Ideabook Design Store: The Copywriter's Handbook...

» Comments

Dec 1

Web Design

Using positive and negative space in a layout »

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

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...

» Comments

Nov 14

Web Design

How to find the right system for managing web site content »

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.

content management systems

Compare hundreds of different content management systems at cmsmatrix.org...

In the Ideabook Design Store: Moleskine Notebooks...

» Comments

Nov 7

Web Design

How to test your web in 85 different browser versions »

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.

tastebook recipes

Browsershots compatibility testing...

In the Ideabook Design Store: Getting It Printed...

» Comments

Nov 3

Web Design

How to re-purpose web content »

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.

tastebook recipes

The cover page...

In the Ideabook Design Store: Before & After: Graphics For Business...

» Comments

Oct 31

Web Design

How to break another barrier with your web readers »

Yes, I agree this is kind of gimmicky but I can see that, if the message was right and the talent, talented, it could work.

on site videos

An example...

The Onsite Videos page...

Another variation that my friend Chris Miller pointed me to called Bubble Guru...

In the Ideabook Design Store: Before & After: Graphics For Business...

» 1 Comments

Oct 8

Web Design

How to learn more about ecommerce »

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 ecommerce blog

Get Elastic, the ecommerce blog...

In the Ideabook Design Store: Graphic Artists Guild Handbook: Pricing & Ethical Guidelines...

» Comments

Sep 10

Web Design

How to organize a web using a flowchart foundation »

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).

eva solo flowchart design

The Eva Solo flowchart design...

The cover page...

A broad view...

In the Ideabook Design Store: The Desktop Publisher's Idea Book...

» Comments

Aug 27

Web Design

How to differentiate your product or service from theirs »

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.com

Bakemania does it all—it is clear, passionate, and beautifully stated...

In the Ideabook Design Store: The Copywriter's Handbook...

» Comments

Aug 20

Web Design

How to add a sense of discovery to a web page »

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.

johnson banks discovery

Climb the work tree...

There are many other interesting ideas to explore at Johnson Banks...

In the Ideabook Design Store: Task Force Clip Art...

» Comments

Jul 28

Web Design

Does stacking simplify? »

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

Mohawk Fine Papers...

In the Ideabook Design Store: The Desktop Publisher's Idea Book...

» 1 Comments

Jul 4

Web Design

Simple. Simple. Simple. »

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.
barterhouse web site

The Barterhouse site...

A presentation from Penguin Books' We Tell Stories web...

In the Ideabook Design Store: Art Parts Clip Art...

» Comments

Jun 20

Web Design

Hi, I'm Matthew and I work at Widen »

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.)

widen tour

Take the Widen tour...

In the Ideabook Design Store: Getting It Printed...

» 1 Comments

May 30

Web Design

Media Temple is the standard. »

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.

media temple isp

Take the tour...

In the Ideabook Design Store: Art Parts Clip Art...

» 1 Comments

May 28

Web Design

An ingenious presentation “subject gauge” »

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.”)

presentation subject gauge

Click play and hover your mouse pointer over the bottom of the player...

In the Ideabook Design Store: Moleskine Notebooks...

» Comments

May 23

Web Design

Transparent borders »

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.

transparent borders

Greg Story's transparent borders...

In the Ideabook Design Store: Getting It Printed...

» 2 Comments

May 19

Web Design

Advertainment at its best »

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 advertainment

Ikea's “You need a quiet place”...

In the Ideabook Design Store: Getting It Printed...

» Comments

May 12

Web Design

A web menu that comingles two variable lists »

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.)

bolt graphics

Marge Casey menus...

In the Ideabook Design Store: The Desktop Publisher's Idea Book...

» Comments

May 5

Web Design

A different take on web menus »

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

The EffectiveUI interface...

NEW in the Ideabook Design Store: Tintbook CMYK Process Color Selector...

» 1 Comments

May 2

Web Design

Using a silhouette as a transition »

Here is a nice example of how to use a silhouette as a transition from one section of a web page to the next.

Silhouettes in web design

The example is at the bottom of the page...

In the Ideabook Design Store: The Copywriter's Handbook...

» Comments

Mar 26

Web Design

Oops...found a 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

1trickpony...

In the Ideabook Design Store: Before & After: Page Design...

» 1 Comments

Mar 21

Web Design

How to point potential clients to the strength of your 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.

Erowe Design

Click on “PORTFOLIO” then “FINANCIAL&rdquo for an example...

In the Ideabook Design Store: Design-It-Yourself: Graphic Workshopa...

» Comments

Mar 3

Web Design

Don't reinvent the wheel—it may be in a design pattern library. »

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

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...

» Comments

Feb 29

Web Design

How to create a compact 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.

Funnel Creative

The Funnel Creative portfolio...

Funnel's front door...

In the Ideabook Design Store: FontHead Typefaces...

» Comments

Feb 18

Web Design

Choices within choices »

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.

The British Museum

Browsing topics...

In the Ideabook Design Store: Before & After: Graphics For Business...

» Comments

Feb 1

Web Design

Web design from beginning to end »

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.

The Embrace Pet Community web design by Jesse Bennett-Chamberlain

Embrace Pet Community web design...

More from his portfolio...

» Comments

Jan 7

Web Design

Watching for navigational design ideas »

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

ShopComposition.com navigational ideas...

BTW, do you know Daniel Will-Harris? If you don't, you're in for a treat...

» Comments

Jan 4

Web Design

Revealing your personality through your 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

Jeff Bridges' Sketchpad...

» Comments

Dec 31

Web Design

An innovative way to highlight text »

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.

A very nice way to highlight text

Move the mouse cursor over the text that reads “GRAMMY NEWS”...

» 2 Comments

Dec 28

Web Design

How to organize a web catalog »

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.

McMaster-Carr

The McMaster-Carr catalog...

» 1 Comments

Dec 15

Web Design

A rather bizarre Christmas message »

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.

FutureMedia Christmas

It's a bit different...

» Comments

Nov 12

Web Design

A fluid use of flash »

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

Nessim Higson's iamalwayshungry.com...

» Comments

Nov 5

Web Design

The clinical look »

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

The Max Planck Society for the Advancement of Science...

Another example of an information-rich interior page...

» Comments

Nov 2

Web Design

Toyota's Mind »

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.”

Toyota Sweden

The world of Toyota...

» Comments

Oct 22

Web Design

A web that sells one product »

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

Christopher Elbow Artisanal Chocolates...

» Comments

Oct 19

Web Design

A form to function rollover »

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.

Colad rollover illustrations

Rollover the outlined products to see the transformation...

» Comments

Oct 3

Web Design

New look at Barnes & Noble »

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.

Makeover at Barnes & Noble

The makeover at Barnes & Noble...

A New York Times-like review section...

And B&N Media...

» 3 Comments

Sep 28

Web Design

A portfolio in motion »

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

Kashiwa Sato and Samurai...

» 1 Comments

Sep 24

Web Design

Put on your sunglasses, here comes Webbliworld »

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

WebbliWorld, brainchild of Aardman Animations...

In the Ideabook Design Store: Task Force Clip Art...

» Comments

Sep 21

Web Design

A measured approach to web design and usability »

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.

A guide for developing usable and useful Web sites

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...

» Comments

Sep 19

Web Design

A different type of web menu »

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.

A different type of web menu design

The menu system below the Form logo...

My big list of web design resources at Jumpola.com...

» Comments

Sep 10

Web Design

Amazon.com does some remodeling »

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.

amazon.com remodeling

After...

Before...

In the Ideabook Design Store: Getting It Printed...

» Comments

Aug 6

Web Design

Design ideas: A fluid, peaceful look and feel »

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.

A fluid, peaceful look and feel

Yancey's site...

In the Ideabook Design Store: Creative Business CD-ROM...

» Comments

Jul 25

Web Design

Sideways »

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

Urban Outfitters...

The Swedish Street Knitter...

In the Ideabook Design Store: FontHead Typefaces...

» Comments

Jul 4

Web Design

Making ugly work for you »

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.

An unlikely combination at foroalfa.com

Elegant ugly...

In the Ideabook Design Store: Design-It-Yourself: Graphic Workshop...

» Comments

Jun 29

Web Design

Lemon yellow pledge »

I pledged I would never use lemon yellow. Then I ran across FOROALFA.com. I like it.

An unlikely combination at foroalfa.com

An unlikely combination...

In the Ideabook Design Store: Task Force Clip Art...

» Comments

Jun 27

Web Design

Design ideas: Black to white »

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.

playgroundblues.com

The home page is black...

Article pages are white...

In the Ideabook Design Store: Templates for InDesign, QuarkXpress, or PageMaker...

» Comments

Jun 22

Web Design

Udderly weird »

It don't get much weirder than this from the Japan Dairy Council.

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...

» Comments

Jun 20

Web Design

Design ideas: Video banners »

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.

Earthbound Farm's video banners

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...

» Comments

Jun 15

Web Design

Packaging usability »

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:

One80design

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...

» Comments

Jun 8

Web Design

Design ideas: Mixing fact and fantasy »

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

Mixing illustrations with photographs...

In the Ideabook Design Store: Graphic Artists Guild Handbook: Pricing & Ethical Guidelines, 11th edition...

» Comments

Jun 6

Web Design

Design ideas: Subject/design contrast »

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.

Red Cross

With great respect...

» Comments

Jun 1

Web Design

Design ideas: Is background art dead? »

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.

School of Visual Arts

To get the full impact, expand your browser to maximum width...

The isolated background image...

In the Ideabook Design Store: Art Parts Clip Art...

» 1 Comments

May 30

Web Design

Design ideas: The submarine effect »

Small matter, but I like the way the ruled line bisects the menu and the information block below it.

Submarine menu

West Side Organics...

In the Ideabook Design Store: Design-It-Yourself: Graphic Workshop...

» Comments

May 21

Web Design

Design ideas: Focus on the menu »

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.

An interesting menu design

Glaceau Vitamin Water...

» Comments

May 18

Web Design

Design ideas: Systematic illustration »

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.

Frog Design

An example of the format...

Take a look around, there is much to see...

» Comments

May 4

Web Design

Design ideas: Using the unexpected »

This site features a totally unexpected visual metaphor: a rusty old refrigerator. It works.

an unexpected design

Luke Stevens Design...

» Comments

Apr 27

Web Design

An alternative to the page-by-page Web model »

Place all the information on one surface and to show the user how to navigate it.

samaritans

The Samaritans of Singapore...

» Comments

Apr 19

Web Design

Seeing something else »

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

Jonathan Yuen's Web...

» Comments

Apr 11

Web Design

Virtual worlds »

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

Zarovka...

» 1 Comments

Apr 4

Web Design

Mirror what you sell »

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.

The Design Within Reach store

Design Within Reach...

» Comments

Mar 19

Marketing PR

Organizing identity guidelines »

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.

pgplne_johnhopkins.jpg

The John Hopkins Identity Guide...

» Comments

Mar 16

Web Design

Don't like this world? Create your own. »

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?

pgplne_coolbreath.jpg

Cool Breath Power...

» Comments

Mar 9

Web Design

The economical use of color »

The economical use of color (green, red, black) and type gives the GreenHomeGuide placid feel about it—almost a non-design.

pgplne_greenhome.jpg

GreenHomeGuide...

» Comments

Mar 5

Web Design

Adding screen previews to your Web »

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.

pgplne_snap.jpg

The Snap site...

» Comments

Feb 16

Web Design

Interesting menu treatment »

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.

pgplne_brown_univ.jpg

The Brown University home page...

» Comments

Jan 29

Web Design

A pale palette »

Haven't seen this pale yellow, gray/green combination for a while. It provides a great neutral setting.

pgplne_tcm.jpg

Turner Movie Channel...

» Comments

Jan 26

Web Design

Creating a sense of excitement »

Great energy on this page—the burst stripes draw your eye to the center—the imagery is interesting and fun.

pgplne_name.jpg

Generation Church...

» Comments

Jan 12

Web Design

For those who like the “there's a lot happening here” look »

If you like the “there's a lot happening here” look (I do), this site offers an excellent model.

pgplne_worship_together.jpg

www.worshiptogether.com

» Comments

Jan 10

Web Design

The power of the close-up »

A great example of leaning on a single, powerful design element: simple, close-up photography.

pgplne_delicousdays.jpg

www.deliciousdays.com

» Comments

Jan 8

Web Design

Motion picture moves »

By separating the foreground images from the background images, this page creates some interesting, motion picture-like movement.

pgplne_maxtor.jpg

www.maxtorsolutions.com

» Comments

Jan 3

Web Design

Big Time Attic »

This a wonderful example of how to use a Web to tell a story. I particularly like the frantic Christmas trees.

pgplne_bigtimeattic.jpg

www.bigtimeattic.com

(The illustration style reminds me, a little, of Robert McCloskey...)

One Morning in Maine by Robert McCloskey (at amazon.com)

» Comments

Dec 20

Web Design

Design ideas: Out of the ordinary color »

An unusual but striking color combination.

pgplne_emotions.jpg

www.emotionslive.co.uk

» Comments

Dec 15

Web Design

Wayback: The Web page time machine »

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

pgplne_wayback.jpg

The Wayback Machine...

» 1 Comments

Dec 13

Web Design

Design ideas: Dimensions »

The name plate is a nice example of melding two- and three-dimensional elements.

pgplne_vote.jpg

An example...

» Comments

Dec 11

Web Design

Design ideas: Neutrality »

Like the neutral atmosphere of a fine art gallery, a black and white Web environment makes the introduction of color that much more dramatic.

pgplne_adams_morioka.jpg

www.adamsmorioka.com

» Comments

Nov 15

Web Design

Design ideas: Matching elements »

There is a mountain of information here, but the Spartan nature of the design and navigational structure perfectly match the simplicity of the subject.

pgplne_carnation.jpg

carnations.org.uk

» Comments

Nov 13

Web Design

Design ideas: Show and tell »

A good example of how “show” is often a better way of communicating than “tell.”

pgplne_freshdirect.jpg

www.freshdirect.com

» Comments

Nov 10

Web Design

Rubbermaid: A sound structure »

This site is almost “over-designed,” but the thinking behind the architecture, navigation, and presentation is impressive.

pgplne_rubbermaid.jpg

This is the main site...

An example of an information module devoted to a specific product...

» Comments

Oct 23

Web Design

Subtraction.com: Precision layout »

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.

pgplne_subtraction.jpg

The cover...

An article example...

» Comments

Oct 16

Web Design

Design ideas: Simple lines and shapes »

Another simple, light Web design.

pgplne_postal_museum.jpg

http://www.postalmuseum.si.edu/queen's/

» Comments

Oct 9

Web Design

Design ideas: Good mix »

Effective use of color, type, and animation.

pgplne_ecoton.jpg

The cover:

https://www.ecotonoha.com/index_en.html

The tree:

https://www.ecotonoha.com/ecotonoha.html

» Comments

Oct 6

Web Design

Design ideas: Web metaphor »

An interesting Web metaphor: A book inscribed with handwritten headlines.

pgplne_gamble.jpg

http://www.terrygamble.com/

» Comments

Oct 4

Web Design

Design ideas: “About this site” »

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.

pgplne_electriceggplant.jpg

http://www.electriceggplant.com/davidmccullough/about.htm

» Comments

Oct 2

Web Design

Be2do.com: Antique-like illustrations »

This interesting site, created by an Istanbul design firm, uses lots of antique-like illustrations and jewelry pieces to create a rich, complex environment.

pgplne_be2do.jpg

http://www.be2do.com/

» Comments

Sep 29

Web Design

Tazo.com: A print-like Web »

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.

pgplne_tazo.jpg

http://www.tazo.com

» Comments

Sep 22

Web Design

Design ideas: Image as metaphor »

An interesting use of real images as metaphors.

pgplne_metaphors.jpg

http://www.gtalondon.org/staff.php

» Comments

Sep 20

Web Design

Design ideas: Subtle use of color »

The subtle use of images and color really work well here.

pgplne_anne_griffin.jpg

http://www.annagriffin.com/index.html

» Comments

Sep 18

Web Design

Design ideas: Feathered edging »

Interesting how feathered gray edging is used to set off various sections of this page.

pgplne_canadel.jpg

http://www.canadel.ca/workshop.php?lg=en

» Comments

Sep 15

Web Design

Design ideas: Anti-complexity »

At times, clean design and sound thinking trumps complexity.

pgplne_sandstrom.jpg

http://www.sandstromdesign.com/

» Comments

Aug 25

Web Design

Redwoodcreek.com: Flash animation »

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.

pgplne_redwood.jpg

http://www.redwoodcreek.com/

» Comments

Aug 23

Web Design

Design ideas: Illustrated menus »

Wild, illustrated menus.

pgplne_aardman.jpg

http://www.aardman.com/

» Comments

Aug 21

Web Design

Design ideas: Letting pictures tell the story »

Crisp, bright images tell the story better than a graphics-intensive design.

pgplne_design_partnership.jpg

http://www.design-partnership.com/

» Comments

Aug 4

Web Design

Design ideas: Lush color »

Nice combination of images and solid colors. Great photography.

pgplne_lushcafe.jpg

http://www.lushcafe.com

» Comments

Jul 31

Web Design

Vancouver Culture Guide: Practical and attractive »

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.

pgplne_vancouver.jpg

http://powerofdesign.aiga.org/cultureguide/flash_content/index.html

» Comments

Jul 26

Web Design

Havaianas.com: A flip-flop fashion statement »

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.

pgplne_havaianas.jpg

http://www.havaianas.com/

» Comments

Jul 24

Web Design

Design ideas: Telling a story »

Very nice example of Web story telling—literal and figurative.

pgplne_storyteller.jpg

http://www.homesoflastingcharacter.com/marshall.html

» Comments

Jul 14

Web Design

Design ideas: Anchor illustrations »

I like how the designer of this site uses an anchor illustration for each issue.

pgplne_collins.jpg

http://www.jimcollins.com/index.html

And uses little snippets of the illustrations to archive past stories.

http://www.jimcollins.com/lab/index.html

» Comments

Jul 7

Web Design

Design ideas: Using motion »

The motion here certainly captured my attention.

pgplne_audacity.jpg

http://www.audacity.co.nz/

» Comments

Jun 30

Web Design

CSSZenGarden.com: Demonstrating the power of CSS »

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.

pgplne_csszen.jpg

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/

» Comments

Jun 21

Web Design

Joshua Davis: Once-upon-a-forest.com: »

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.

pgplne_onceuponaforest.jpg

http://www.once-upon-a-forest.com/

» Comments

Jun 16

Web Design

OM Records logo »

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:

pgplne_omrecords.jpg

http://www.capacitornetwork.com/CDN2002_c.html (then click > Work > OM Records)

And here it is in use:

http://www.om-records.com

» Comments

Jun 12

Web Design

Design ideas: A different shape »

How do you get attention? Do something different with the same space everyone else is using.

pgplne_n-gage.jpg

http://www.n-gage.com/worms/wwp.htmlh

» Comments

Jun 9

Web Design

Design ideas: Form and function »

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.

pgplne_street.jpg

http://www.pedestriandesign.com/

» Comments

Jun 7

Web Design

Design ideas: Showing what you say »

Great illustrations show, at a glance, something that is difficult to say. Check out this striking use of color and image.

pgplne_remedy.jpg

http://www.rkdinc.com/remedy99_Web/reaching.htm

» Comments

May 29

Web Design

Viva-graphics.com: Not a clue »

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.

pgplne_viva.jpg

http://www.viva-graphics.com/

» Comments

May 26

Web Design

The cost of curiosity »

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...

pgplne_gross.jpg

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).

» Comments

May 15

Web Design

Design ideas: Film moves »

Check out how this designer uses film-like “panning” moves to highlight photographs...

pgplne_boca_raton.jpg

http://www.bocaresort.com/

» Comments

May 14

Web Design

Designbyfire.com: The world of Herasimchuk »

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.

pgplne_designbyfire.jpg

http://www.designbyfire.com/

» Comments

May 12

Web Design

Design ideas: Cutouts »

I love the simplicity of these paper cutouts. They provide a distinct contrast to the digital environment in which they appear...

pgplne_cio.jpg

http://www.cio.com/archive/111504/guide.html

» Comments

May 10

Web Design

Design ideas: Using unexpected elements »

A high-end fabric and furniture destination wraps its sight in brown paper and accentuates it with black and white photographs...

pgplne_zimmermans.jpg

http://www.zimmans.com/index.html

» Comments

May 5

Web Design

Honda.com: Book metaphor »

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...

pgplne_honda.jpg

http://www.honda.co.uk

» Comments

Apr 24

Web Design

Design ideas: Warm personality »

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?

pgplne_flowerbud.jpg

http://www.flowerbud.com

http://www.teacupsoftware.com/

» Comments

Apr 3

Web Design

Vitra.com: A simple grid »

It doesn't get simpler than this site, home of furniture manufacturer Vitra. Just goes to show complicated is not necessarily better.

pgplne_vitra.jpg

http://www.vitra.com

» Comments

Mar 29

Web Design

Weirdness »

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.

pgplne_circlemakers.jpg

http://www.circlemakers.org/

» Comments

Mar 1

Web Design

Pirated-Sites.com: Design “theft” suspects »

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.

pgplne_pirate.jpg

Pirated Sites...

Pirated-Sites.com: Design “theft” suspects

» Comments

Feb 27

Web Design

Design ideas: Symmetry »

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.)

pgplne_woodchuck.jpg

http://woodchuck.com (from the Wayback archive)

» Comments

Feb 22

Web Design

Secondstory.com: The premiere interactive design studio »

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.

pgplne_secondstory.jpg

http://www.secondstory.com/

Or right to their extensive portfolio of projects:

http://www.secondstory.com/collected.php?SubjectMask=0&PurposeMask=0&FormatMask=0

» Comments

Dec 21

Web Design

2advanced.com: Flash with a reason »

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.

pgplne_2advanced.jpg

If you think Flash is just flash, to meet 2advanced...

» Comments