Remember the large fonts, shiny surfaces and lickable buttons from a few years ago? Although there was some confusion about what exactly Web 2.0 was (a movement? a structure? a style?), there were definitely design elements that were emulated, copied and recycled.

The United States Postal Service has never been known for cutting-edge anything, but their take on Web 2.0 style heralds the tail end of this trend. Icons that cast a shadow as well as a reflection? Really, USPS?

Steven Levesque is an award-winning exhibit and retail designer and fellow RISD alumnus. He graduated in 1990 with a BFA in Industrial Design and is currently the VP of Creative for Bella Group Design Solutions in Coppell, Texas.

Current Project:
Shopping center kiosks. It’s a competitive project. We compete against other businesses with our designs in order to win the manufacturing business. That’s the way it works in this retail area as with our custom exhibit work. We do custom trade show exhibits. We don’t talk about the projects until it’s all finalized. It’s a serious endeavor so we keep our projects hush-hush until we win or lose.

First step in my design process:
I look long and hard at the environment where our kiosks will reside. I ask the customer many questions. I start to sketch ideas as tiny thumbnails.

Aspect of design I give the highest priority:
We have to think of something clever that we can do with the design so that we will stand out in the crowd.

Method for overcoming creative block:
You just have to put the time in. I just keep sketching ideas and thinking of things and it comes. It’s also smart to take a look around you to see what other people have done.

There’s lots of ways around the problem. Sit down with a group, start off with some key words and have a little brainstorming session. Ask other people you work with what they envision as a solution.

You just have to get started somewhere and as long as you focus and put the time in, it will happen. Don’t put in too much time if it’s not going anywhere. There is always one great trick for this. Go to bed and looking at it again tomorrow. It will look different tomorrow.

To be honest I don’t ever have a creative block anymore when I have enthusiasm. Sometimes it’s just getting up the energy.

One typical myth about design:
The belief that firstly you have to design to impress other designers, friends, and peers. When you can impress everybody, now you’ve really done something.

Most challenging aspect about design:
Winning a competition against other talented designers.

Most underrated aspect of design:
The filtering process.

At first you just want to make your own creations. You want ownership. As you mature you learn to listen to what other people have to say. People say a lot of things so you learn to filter it out. When you can listen to the ideas from others and still lead your own project, now you are getting somewhere. You still have to make the final decision on what gems to keep and what to politely ignore.

When I first knew I wanted to be a designer:
High School. I came from a great high school art program. I once saw a book of marker renderings from an industrial designer and that was it for me. Never turned back. I think it was copying the style and techniques of automotive renderings that hooked me. As well I was always looking for an advantage in life. I could really draw well so I thought I better do something that involves drawing. I thought my life would be easier that way. I have to admit it made some things easier.

Inspirations:
I like clever, funny, surprising things. I like that giant topiary puppy by Jeff Koons he did in Bilbao in 1992. I once created a giant topiary cell phone for Nokia and it was basically inspired by that.

Bob Dylan. I know it’s music, but, the way he knocked everyone over with his ideas in his writing had a powerful impression on me when starting out with my own ideas.

Favorite tool:
I use a papermate black ball point pen with a light gray marker. I smear the backgrounds and they look purple. I love that.

Favorite design resource:
Other people. I like brainstorming sessions using word association and other techniques. I just like getting a lot of energy in the room and blurting out a bunch of ideas, but with structure.

The one typeface for a deserted island stay:
I’m not really a graphic designer, but, I guess I would say Meta. A longtime favorite.

Bookmarks:
Now who wouldn’t want a giant baby robot that shoots fire?

Car Design News

Guggenhheim, Bilbao. Just a great building.

Solar ink. I love this stuff. It’s developing.

Design-related book I highly recommend:
Industrial Design by Harold Van Doren, 1940. It’s absolutely old-school and not an ounce of nonsense. “When drawing a cube, make it a little taller than wide. You need to compensate or it won’t look like a cube. It will look squat.”

Currently reading:
I’m reading a Times best seller called Dark Mission. It’s about NASA. It’s heavy on conspiracy and hyper-dimensional physics.

Life Lesson
A really good drawing can always save your ass in almost all situations.

If I weren't a designer, I'd be...
I guess I would like to clean up and renovate things. Perhaps that means I’d be flipping old houses. I like old things like old guitar amplifiers.

Favorite (non-design) past time:
I had a band at RISD called The Lunch. I still play guitar.

Pros
Mood boards are definitely quicker to assemble than fully developed and polished home page layouts. There is more than just look and feel to consider when laying out an actual site page: did I include all the elements outlined in the prototype? how does this form work? what happens when I mouse over this component? You can easily get bogged down in the content, structure and functionality of the page and lose site of the design.

There's also more time for experimentation and pushing designs further. Since mood board elements don't include much "real" content, there's freedom to try several different approaches.

Mood boards provide a "big picture" of design (fonts, color, texture, images) and promote a more holistic approach to the design phase of site development.

Cons
Because clients are real people with real likes and dislikes, the implementation of mood boards has not eliminated the "forest for the trees" syndrome. Some of our clients still focus on small details rather than the whole picture during reviews. As Steve explained in his post, mood boards are meant to establish a direction for a site's look and feel. They are much more like sketches than polished pieces.

Some "Frankenstein-ing" (mix and match elements from different layouts) still goes on, but I have to admit that mood boards have reduced the frequency of this.

We've also had some clients mistake the boards for home page layouts. Thus, when we take the look and feel and apply it to the actual structure and content of their site, sometimes the clients are confused as to why their site does not look exactly like the approved board.

Conclusion
Overall, mood boards have been a great addition to Newfangled's development process. They have streamlined the design phase and allowed us to push design further along without getting caught up in the details of site structure.

A few challenges remain, such as deciding when mood boards are appropriate for a particular job (based on client personality, job scope, budget) and making sure our clients understand what mood boards are (and are not).

The Rhode Island School of Design has a permanent collection of drawings you can view online here.

Luke Wroblewski is an internationally recognized Web thought leader who has designed or contributed to software used by more than 600 million people. He is currently Senior Director of Product Ideation & Design at Yahoo! Inc.

Luke is the author of two popular Web design books: Web Form Design (2008) and Site-Seeing: A Visual Approach to Web Usability (2002). He also publishes Functioning Form, a leading online publication for interaction designers.

A co-founder and former Board member of the Interaction Design Association (IxDA), Luke previously worked as a Senior Interface Designer at the National Center for Supercomputing Applications (NCSA), the birthplace of the first popular graphical Web browser, NCSA Mosaic.

Current Project:
At any point in time, I’m juggling lots of projects. We recently released a brand new Yahoo! toolbar, some new enhancements to My Yahoo!, began testing a new Yahoo! front page, and the list goes on.

First step in my design process:
Understand the factors that will influence the design decisions we make. In my world of digital consumer products, these are:

• Technology opportunity: what technologies do we have to utilize to make something happen?
• Market factors: what’s happening in the space we are targeting? (trends, issues, opportunities)
• Customer insights: existing feedback, pain points, observations, ethnography, behavioral data, metrics, analytics, etc.
• Resource alignment: what kinds of people, assets, do we have to utilize?
• Company strategy: what is the direction for the organization?
• And more…

Unfortunately, the bulk of discussions about the effectiveness of Web design don’t focus on visual organization systems. Instead, they are limited to a subjective analysis of the personality (look and feel) of an interface. Personality is achieved through a judicious selection of colors, fonts, patterns, images, and visual elements designed to communicate a particular message to an audience. But just about everyone has a color or font preference, so when asked to evaluate visual design that’s were they turn first.

When I first knew I wanted to be a designer:
After too many late nights working on Computer Science homework

Favorite tool:
The Web

Favorite design resource:
Attending presentations at design conferences

The one typeface for a deserted island stay:
Gotham

Design-related book I highly recommend:
Shaping Things by Bruce Sterling

Currently reading:
Not enough!

If I weren't a designer, I'd be...
Struggling with a lot more hard to use Web sites

Favorite (non-design) past time:
Mountain biking

Andy is a twenty-year-old designer/craftsman/doer of things from West Chester Pennsylvania currently attending the Maryland Institute College of Art in Baltimore. He is passionate about riding bikes, climbing trees, wood, good music, and all things design. If he was able to make a living building things out of Legos and making rubber band guns, he would. Andy is also

Usually I will read everything I can get my hands on about whatever project I am working on, then live my life as usual while rolling the idea around my head. I am not the kind of person that can sit down and just decide to design something, at least not something worthwhile. It is only when I am folding laundry, cooking up a mediocre stir fry, or polluting the airwaves with my Martin knockoff that I will think of something worth pursuing.

Aspect of design I give the highest priority:
Simplicity

Method for overcoming creative block:
Exercise. A nice bike ride or romp on the soccer field can do wonders when I am feeling bogged down and uncreative.

One typical myth about design:
That it needs to be done on a computer

Most challenging aspect about design:
Finding someone to pay you for working on the things that you think matter

Most underrated aspect of design:
It's functionality and tangibility. Too many people have the perception that design is purely visual: they have no problem recognizing that the label on a bottle of Tide is design, but try explaining how a stool or a wrench is a beautiful (or terrible) piece of design and you've lost them. The term is almost infinitely broad, and to me that is why it is so powerful.

When I first knew I wanted to be a designer:
I had the idea all through High School that I wanted to be a designer, but when I got to college the sheer number of people in the major for what I consider to be all the wrong reasons made me question my choice intensely. Despite my attraction to other fields of study, I realized that calling myself anything else would only be limiting.

As I have said, design is about communication, and ultimately ideas. If the idea I am trying to express is going to be most powerful as a poster or a website then I will make a poster or a website. If the idea is going to be most powerful as a 47-foot found object sculpture then I'm off to the junkyard.

Inspirations:
Stefan Sagmeister, Stephen Doyle, Nam Jun Paik, Survival Research Labs, Fluxus, Odilon Redon, John Von Slatt, Marcel Duchamp, Theo Jansen

Favorite tool:
Manual hand drill passed down from my grandfather

Favorite design resource:
The city of Baltimore, with its rich personality and beautiful vestiges of signs and murals from yesteryear

The one typeface for a deserted island stay:
The capital "Q" in Wingdings would come in handy...

Bookmarks:
upsidedowndogs.com, fixedgeargallery.com, blog.makezine.com

Design-related book I highly recommend:
Things I have Learned in My Life So Far  by Stefan Sagmeister

Currently (always) reading:
The Complete Calvin and Hobbes

Life lesson:
Don't take yourself too seriously.

If I weren't a designer, I'd be...
A carpenter, a bike courier, a struggling musician, a luthier, an engineer, or a mechanic

Favorite (non-design) past time:
Sleeping

1) It helps us collect information and materials regarding the client's branding (logo files, style guides, imagery).

2) In conjunction with the prototype, the client's responses on the form help us combine their site's structure, content and design into a meaningful whole. The Profile also shows our clients we believe that design is not just window dressing for their site but an integral component.

3) It helps the client carefully consider their website in light of who they are and what they do (who is your audience? who is your competition? what is your organization's personality?)

If you're interested in how the Website Profile fits into the rest of our development process, check out our Project Anatomy.

I've been playing with Masterfile's new proprietary search tool named Endless Media and it is a significant improvement over its competitors' offerings. Masterfile has rethought image searching from the ground up rather than simply adding new features to an existing engine.

Strengths
The first thing you'll notice is that search results are displayed in a horizontal strip and advancing to the next "screen" of results is as simple as clicking the arrow button in the navigation strip above the results. It's wicked fast and beats waiting for a new page of results to load in the browser window.

Clicking on a thumbnail places it in a large preview window to the left and maintains the search results to the right so you can continue scrolling through them. The preview area displays licensing and model release information as well as tools for adding the image to a light box, downloading a comp or adding it to a shopping cart.

Masterfile has also brought searching for similar images up to the same level as your initial search and displays them in a smaller horizontal strip (dubbed Sim Search) beneath your search results. Clicking on any image in Sim Search will move it to the preview area and will adjust the main search results accordingly.

Once you've registered with the site you have access to large, watermark-free comps. This is useful for designers like me who do a lot of image manipulation and don't want to be stuck purchasing images that will ultimately not make it past the first client review.

Weaknesses
While the Sim Search is a great user interface component, it suffers a bit in usability. The demo video states the Sim Search results are based on a similar look and feel to the image currently in the preview pane. But "look and feel" is a broad category that could be divided into composition, color, lighting or theme. The Sim Search would be a more useful tool if you could filter the results.

The preview pane displays some tools below the image but only provides icons with descriptive tags that appear on mouse over. There is enough real estate to display words instead of cryptic symbols (this is a clear violation of the "Don't Make Me Think" principle).

Even though Endless Media allows you to work with multiple light boxes simultaneously the light box feature is nothing new to stock sites. This feature would be even better if you could add a new light box on the fly rather than clicking away to another page.

These few weaknesses aside, I really like the Endless Media tool and plan on spending some serious time taking it through the paces with some client projects.

HTML text is rendered differently depending on the browser and the operating system (see browser examples below). On the Mac, and in some Windows browsers, text renders cleanly because the browser applies a smoothing technique called anti-aliasing to the letter forms, eliminating the jagged edges.

It would be great if all browsers applied anti-aliasing to text so there wouldn't be ugly web type (some day, maybe). One way to eliminate some of the jagged edges is to avoid using italicized type, but this also eliminates one method of text styling and makes it more difficult to subtly distinguish one piece of content from another.

Eric Karjaluoto is the creative director at smashLAB and the founder of MakeFive. As impressive as that sounds, he's still willing to do whatever it takes to get things done – whether it's building comps or taking out the trash. Eric received his diploma in painting from the Emily Carr Institute in Vancouver, British Columbia. You can read his thoughts on design at erickarjaluoto.com.

Current Project:
Most of my time these days is centered on our website MakeFive. It's a social network that allows people to make top five lists on everything and anything. The bulk of my time goes into improving the user experience on the site. Sometimes this means revising user-interface elements to be more intuitive; at other times it involves "social engineering" or ensuring that site activity is in the best interest of all users.

First step in my design process:
With all of our clients, we run through a consistent process that begins with thorough research in order to gain insight and understanding, from which we generate a clear plan of where we want to go. This works really well for our clients, and as a result we don't deviate from it.

Aspect of design I give the highest priority:
Whether the solution works or not. As a young designer I was overly concerned with creating smart or original design. Now I just want people to use the stuff we make and "get it" right away.

Method for overcoming creative block:
In my mind there's really one answer to this, and it is to just keep working. By doing so I find that I don't so much hope for a magic solution to fall in my lap, and instead I concentrate on just getting the job done. Doing so seems to "normalize" my work and allows me to keep going instead of getting stuck in a cycle of self-doubt.

One typical myth about web design:
I think this whole desire to be "cutting edge" is a hurdle for many web designers. It's really easy to get caught up in doing something "new and exciting" even when it's not really necessary. We have to stop thinking about websites as gadget belts; instead we should aspire to design things that are as beautifully simple as knives and forks. Few people are excited about their cutlery, but most use it every day. This isn't a contest of how "cool" it can be, but rather an issue of how transparent our design solutions can become.

Most challenging aspect about web design:
It all depends on the project, but lately I've really been struggling with the amount of information that needs to have prominence in more application-like websites. On a site like MakeFive, there are all kinds of really important things that we need to make easy for the user to access. Creating a topic, accessing email, checking their standing in the community... all of these need to be easy to find, but you can only "turn the volume up" on a certain number of them before it becomes overly noisy.

Figuring out how to make it work as you'd like is one thing; making this clear to users is quite another. At the same time, you really have to remain responsive to the possibility that people will use your stuff in ways you hadn't anticipated.    

Most underrated aspect of web design:
I talk to a lot of young designers these days who want to go back to print-based design because of the amount of control they gain. The thing they don't understand is the amazing reach of web-based work, and how it wasn't always this way. When I started at art school, the tools just weren't as readily available as they are now. As a result, you were pretty much doomed to work on a local level unless you by chance reached some level of notoriety.

Today, however, anyone can connect with the community at large if they do something great. That little loss of control over the end product is, in my mind, an easy price to pay in order to gain the possibility of reaching so many. Plus, it affords so many new opportunities. User-generated content is particularly interesting, as you get to watch people do things that you've helped facilitate.

When I first knew I wanted to be a designer:
I think I was about two or three at the time. My Mom and a couple of other neighborhood moms were in our front yard writing their kids' names on their toys as the kids were often mixing-up which toys were whose. This made me absolutely furious. It just drove me crazy that they were ruining these objects by writing on them.

Inspirations:
I like music and appreciate how it puts me into a state where I can work better. Additionally, I'm really excited to just get exposed to people with ideas. Lately I've found myself hooked on TED Talks. It's just great to be around new ideas, no matter how different they are from mine. (Actually, sometimes it's better if I don't really understand the realm these people work in as it forces me to think differently.)

Favorite tool:
That's easy: a pencil or pen. It's easy to be lured by software, but I think it puts too many layers between you and your work. I'm fast - and I mean fast - with all of the standard applications (Photoshop, Illustrator, InDesign), but I can still get ideas down better with a drawing tool of some sort. I guess I'm old school.

Favorite design resource:
Observation. The best design resources are found in people who are pissed off because they are stuck in voice mail hell; people left scratching their heads to make a cryptic parking payment system work; or someone who wants to pay their cable bill, but can't find the log in information on the website. I just look for what doesn't work, and why. It's simple, and probably boring, but it works.

The one typeface for a deserted island stay:
Anything by Jonathan Hoefler and Tobias Frere-Jones. Those guys absolutely rock my design world. Their families are so comprehensive that they make any designer look better. Sort of like playing a guitar--even the worst players sound pretty good with a Marshall stack behind them. That's my big advice to bad designers: buy stuff from Hoefler & Frere-Jones. It will be your Marshall stack. No one will know that you suck.

Bookmarks:
That's a looooong list. Let's start with these:
• TechCrunch, Wired, Paul Graham's essays and Seth's blog

Design-related book I highly recommend:
"Hey, Whipple, Squeeze This: A Guide to Creating Great Ads" by Luke Sullivan. His observations are spot-on and he's a damned funny writer.

Currently reading:
"The End of Poverty" by Jeffrey D. Sachs. It's completely out of my realm of experience, which makes it interesting; additionally, it's written in a fashion that even a guy like me can understand it.

Life lesson:
Do what you love and it will never feel like work.

Favorite (non-design) past time:
Going out for interesting dinners with my lovely wife Amea and our wild little boy, "Ozzy."

Andy Rutledge is Principal and chief design strategist for Unit Interactive. When he's not designing or hanging with the family, you can find him putting in a few miles on the bike, banging on the piano, or playing with his bonsai collection. Andy also writes about design culture, professionalism, and technique on his website Design View.

Job Description:
Primarily, I’m a cog in our agency machine with regard to idea generation, client discovery, planning, design & IA, and front-end development. My other primary roles include pre-bid client discussions, client/project vetting, crafting contracts, billing, and project management. I work both directly with clients and in supporting roles for some projects assigned to others in the office. Project-related issues aside, I work with my partner in day to day and long-term maintenance of our agency standards and operation.

Oh, and I dominate in office mini-basketball.

Current Project:
Like the rest of the team, I’m typically working on more than one project at a time. One current project I’m excited about (that I can actually talk about) is Publish2. It’s a web-native news wire and collaborative newsroom for newspapers and journalists. The identity and overall design have long been completed, but the project is rather large and requires some ongoing layout and user-experience design work. It’s released in public beta now (for journalists) but the public side is still sporting the temporary main page. Anyway, there’s not much for non-journalists to see now, but it’s an exciting and consequential project to work on, nonetheless.

First step in my design process:
My initial design steps include exhaustive discovery with clients and, when possible, end-users of the client’s site/app/product/service in order to gain a thorough understanding of the client’s aims, needs, desires, challenges, and plans (from a brand, business, and personal standpoint), as well as similar issues for the client’s end-users or customers.

Aspect of design I give the highest priority:
User experience, balanced with brand/client requirements. Nothing can be given “highest priority” without a reference to how that balances with something else.

Method for overcoming creative block:
Strenuous physical activity, either in the office (playing games!) or coupled with a change of environment or scenery. Lots of oxygenated blood to the brain can do wonders for all sorts of common mental maladies.

One typical myth about web design:
That it’s the same as print design, just published online.

Most challenging aspect about web design:
Balance: balancing the many contexts that impact every aspect of the project (platform issues, cross-browser compatibility issues, usability issues, accessibility issues, progressive enhancement issues, client-side technology issues (scripting, etc…), information hierarchy, content hierarchy, user intent, user preference, user savviness, brand requirements, client desires, agency-client comfort and confidence, etc..)    

Most underrated aspect of web design:
The fact that competent web designers can dictate or strongly impact behaviors, mood, attention, and actions of users simply by way of thoughtful design.

When I first knew I wanted to be a designer:
I knew I wanted to be a web designer in 2001 (when I got my first computer), when I discovered that all the things I’d been interested in doing in other aspects of my life were articulations of design—and in web design I’d get to play with the graphic and technical side of it all. Crafting communication is what we human beings spend nearly all of our waking hours doing, anyway. I just do it for a living.

Inspirations:
Anything compelling.

Favorite tool:
A black ink Uniball pen.

Favorite design resource:
Nature.

The one typeface for a deserted island stay:
Trade Gothic

Bookmarks:
Too many to list. I visit more than 70 websites every morning before I start work. Notables would certainly include A List Apart and Adaptive Path.

Design-related book I highly recommend:
“Universal Principles of Design,” by Lidwell, Holden, and Butler. After one gains a grasp of the value and utility of line, form, texture, color, balance, distribution, and contrast, this book provides a glimpse of the further foundation every designer needs.

Currently reading:
“Real Education: Four Simple Truths for Bringing America’s Schools Back to Reality,” by Charles Murray

Life lesson:
Do what you know you are meant to do, no matter what that is. Life is too short to do anything else.

If I weren't a designer, I'd be...
Hard to say. Likely I’d be a composer or a bonsai artist.

Favorite (non-design) past time:
Cycling. I spend inordinate hours pedaling toward exhaustion each week.

In this installment I'll cover how to prepare Photoshop for web design. Preparing your finished design files for production will be covered in another post. The topic of web design is a deep well and there are more than enough books and websites out there to sufficiently cover the topic. For further reading, see the bottom of this post for some links.

Screen Real Estate
What's the optimal size for a website? A few years ago, most usability experts were recommending a maximum size of 800 x 600 pixels (actually, it ended up being 760 x 480 when you subtracted all the real estate the browser frame chewed up). The new standard is 1024 x 768 due to larger monitors and their higher screen resolutions. A size of 1024 x 768 is a guideline; you may decide to make your site larger or smaller. The final size of your website will depend on several factors: content, design, fixed-size elements such as banner ads, the target audience and client requests. Designing sites for hand held devices (like the iPhone) requires a different set of guidelines which I won't be covering here.

Your client might request that all of their important home page content reside "above the fold." This may have been a reasonable request a several years ago, but now it's irrelevant due to how web usage habits have changed over time.

Document Settings
When you open a new document in Photoshop, you'll be presented with a document settings panel in which you can select size, resolution, color mode and bit depth.

Resolution is 72 pixels per inch for on-screen design. It would be higher (266-400ppi) if you were designing for print. That's one of the advantages of designing for the web: you design at actual resolution or, in other words, what you design is what you get.

Color mode should be RGB since that's the native mode for anything viewed on-screen.

Color bit depth should be set to 8 bit. This yields a palette of 16 millions colors. The web-safe color palette (216 colors) is another antiquated web standard, due to advances in computer hardware.

Site Structure
One thing to consider when setting up your site is whether it will be centered or locked left. This effects how your site will behave if the browser window is expanded beyond the borders of your site. A centered site, such as netflix.com, will reposition itself to stay in the middle of the browser window while a locked left site, like Newfangled's, will stay attached to the left side of the browser window and expand to the right. It's important to consider what happens to your site's background when the browser window is expanded, especially if you're using a non-repeating image or pattern.

Another consideration is whether your site will be fixed or fluid. A fixed site will maintain its set width no matter how wide the browser window is extended while the content of a fluid site will expand and contract with the browser window. Actually, even most fluid sites use a mix of expandable and fixed content. Amazon.com has a fluid header and main content with fixed width side bars. Which should you use? That's like trying to decide which is better: Coke or Pepsi. Your choice will depend on the needs of the client, the target audience and the content of the site. You can read about the advantages and disadvantages of fluid vs. fixed here.

The web is a dynamic medium (unlike print, which is static) and your site will render differently based on which browser, OS platform and monitor it's viewed. However, that doesn't mean you should disregard grids and page templates. Setting up a grid for a website is just as important as it is for a magazine or newspaper and it can save you from reinventing the wheel every time you create a new page for your site. Your grid structure will vary depending on whether you've chosen to make your site fluid or fixed. Mark Boulton outlines some simple steps to designing grids on his blog; and his SXSW presentation (PDF) is excellent as well.

Creating page templates will help you avoid having to lay out every page in the site. No matter how complex the site is you should be able to break it down into a handful of template pages (each with its own grid) that can handle any content situation. Since the home page is the visual "front door" to a site, it usually is a "one off" design that contains functionality or components not found on any other page in the site.

Next time: How To Prepare Your Website Designs for Production

Web Design Resources
By no means a definitive list, just some of my favorite sites.

A List Apart
articles on graphic design, interface design, user experience design, typography 

Vitamin
resource for web designers, developers and entrepreneurs

Mark Boulton
simple, clean and effective web design

Andy Rutledge
articles and opinions on design professionalism, techniques and culture

Cameron Moll (portfolio)
inspiring web designs

Web Designer Wall
design ideas, web trends, and tutorials

The banner advertises a new type of litter box with three pull downs revealing a demo video, testimonials and an interactive diagram. I was impressed with how much layered information the banner was able to contain and I liked that I could explore the product without being jerked away to another site.

I suppose it won't be long until these mini-site banner ads start sporting banner ads themselves.

Adaptive Path has designed a future browser concept named Aurora for Mozilla Labs' Conceptual Browser Series. Four "walk through" videos featuring everyday scenarios show how Aurora would retrieve, display and contextually relate information.

While I like some of the elements presented in the concept such as natural interaction (Á la iPhone) and contextual data relationships, I find the overall UI complex and non-intuitive. For example, the browser's "data cloud" spatial view is a mess; it reminds me of my cluttered dining room table (from which I can never find anything, even if I'm staring right at it). Also, the over-reliance on icons without text identifiers will leave the user hunting and pecking for the correct action item.

What I found more far more intriguing (and executable) is the "dummy" NYT sports page used in the first video. It was designed by Andy Rutledge from Unit Interactive and contains some great UI concepts.

Prior to 1990, there were no standards for displaying nutrition information on food packaging. That year, Congress passed a law requiring the FDA to develop a new, universal label. It had to convey complex information in a manner that anyone could understand, it had to be devoid of any color or complex graphics to withstand poor quality printing and it had to be as small as possible to accommodate the demands of food manufacturers who did not want to relinquish valuable label real estate.

We encourage our agency partners to provide us with layered Photoshop files whenever possible. This is not because we're a bunch of whiny prima donnas, but because Photoshop provides the best platform for creating accurate web page layouts and the results save time and money for us, for our agency partners and for the agency's client.

Note: This post is a reworking of an October 2007 article in which I recommended a solution for sucessfully importing Illustrator files into Photoshop for the purposes of web page layout. After further research, I discovered the solution is incomplete and not adequate for Newfangled standards.

Next time: How to Set Up a Photoshop File for Web Design

Hardware Calibration
If you're designing on a Mac, it's important to set your monitor's gamma and color space to accepted web standards in order to produce consistent results between what you're designing and what will be displayed on the web. Gamma is a technical term for your monitor's luminance and color space refers to your monitor's ability to display a range of colors represented by RGB (red, green and blue). If you need the science behind the terms, check out these articles on gamma correction and RGB color space. There are different standards for Macs and PCs when it comes to displaying color (you're not surprised, are you?) and web standards most closely match those of the PC. Macs come with a default gamma setting of 1.8 and PCs are set to 2.2. So if you're designing on a Mac with a gamma of 1.8, your layouts will be darker when viewed on a PC and some of your subtle design elements may disappear altogether.

Important: The following calibration instructions pertain to creating images for the web. If you've already calibrated your equipment to be optimized for print, make a note of those settings (or save them as custom settings) so you can return to them later.

The simplest way to set your monitor to the correct gamma and color space is to open your system preferences panel and choose "Displays" under the Hardware category. Select the third tab, "Color." You'll see a list of Display Profiles on the left. The highlighted selection is your current color space. Scroll down until you see "sRGB IEC61966-2.1" and select it. If you have a laptop with an external monitor, make sure to adjust both your laptop screen and external monitor. Viola. Now you can close the System Preferences panel.

To calibrate your monitor for the lighting conditions of the room you're working in (I recommend this) click the "Calibrate…" button in the color preference window. Apple's Color Assistant will guide you through each step and allow you to set the gamma and white point manually. Simply select 2.2 for the gamma and D65 for the white point and save the custom calibration with your name and the date so you can find it in the profile list later.

Software Calibration
Now that you've calibrated your monitor, your Photoshop color space needs to match your monitor's color space. In Photoshop, select "Color Settings" from the Edit menu. This will bring up the Color Settings panel. From the Settings pull down menu, select "North America Web/Internet." This will set the RGB color space to "sRGB IEC61966-2.1" and fill in the appropriate settings for the other fields. You can save this setting as a custom by clicking the "Save…" button and giving it a name.

Next time: What's So Great About Photoshop?

Polaroid will be introducing a new ink-less photo printer called the PoGo on July 6th. I know what you're thinking. "Polaroid? They're still around?" Yeah, I figured Polaroid, Kodak, Fuji and Konica would have formed a murder-suicide pact by now given the ubiquitousness of digital cameras. But I guess the originator of instant film isn't ready to cash in their chips just yet.

The PoGo uses an ink-less technology that Polaroid has branded as ZINK (zero ink, get it?) which includes a special paper embedded with yellow, magenta and cyan dye crystals, activated with heat pulses from the PoGo printer. The prints are water-resistant, smudge-proof, tear-proof and have a peel-off sticky back.

The printer is about the size of small digital camera, runs on batteries and connects to your camera or phone via Bluetooth. What's that? Your camera doesn't have Bluetooth? Well, the PoGo has a USB port as well. Of course you can only buy the ZINK paper from Polaroid and, with over 100 pending patents, you're not going to see a Wal-Mart brand of this paper any time soon. The POGO printer costs about $150.

Will the PoGo and ZINK technology single-handedly save Polaroid from sinking? We'll have to wait and see how things...develop. Ok, you can penalize me for that last pun.

A clever flash-based photo browser that allows the viewer to "flip" through a stack of photos. You can download the source files from Andrew's site.

The stock photo companies are desperate for my money. How do I know this? The evidence is all the promotional stuff they send me.

Just today I received a package from Jupiter Images. It was a plastic eyeglass case with 3D glasses inside. The included insert directed me to their website where I could look at images from their collection that had been enhanced by another company to be viewed in 3D. So I went to their site and dutifully viewed the slide show. Hey, they sent me free stuff, right? Why wouldn't I oblige by giving them ten minutes of my time?

Then there are the countless mailings from Veer. Most of them are beautifully designed, lavishly produced booklets that feature Veer's photos and typefaces in some elaborate narrative such as, "What I Did On My Summer Vacation" or "Great Architectural Masterpieces of the World Reconstructed in Type." I worked as a print designer for several years and I know how expensive it can be to produce and mail these pieces.

So why are these stock photo companies wasting my time? Don't they know I have to scrape together the cheapest, most overused stock imagery for my projects because most of my clients don't have a stock photography budget? I would looove to license some of the rights-managed images from sites like Getty and Corbis but I have a hard enough time convincing my clients to spend $49.95 on an image, let alone $495.00.

Here's my idea. Instead of sending me 3D glasses or a 45 page booklet on the history of the internet, the stock companies should take the money they blow on promotional mailings and lower the prices of their images. Or, better yet, send me the money and then I can afford to purchase an image that hasn't been seen in every magazine, newspaper and online ad for the past three years.

Now you'll excuse me, I need to go see what cnn.com looks like in 3D.

If you surveyed 100 designers and asked them to name one thing they would like their clients to understand it would likely be: designers love to help clients solve their problems. This may be hard to believe, especially if a client recently had a bad experience with some prima donna designer who believes their work should be accepted without question.

Simply telling the designer "make the text blue" doesn't allow them to solve a problem. However, if the client says, "the text is hard to read" or "the site colors seem too dark" the designer can work with the client to come up with a solution. This is far more productive than simply providing the designer with a bulleted list of "solutions" and having them scratch their heads trying to figure out what the client's intentions were.

At Newfangled, we provide the client with a Website Profile at the beginning of the project to help them think through some of the aspects of their website that would not be necessarily be obvious to them. Then, when the first round of home page designs are presented, I'll write a brief "rationale" (why I think these designs are appropriate and the thought process behind it) and some prompting questions to help the client review the designs and provide useful feedback.

Things we ask clients to keep in mind as they review our website designs:

• Overall Look & Feel - which design best reflects your organization?
• Color Pallete - does the use of color accurately represent your organization? (is it too warm, too cool, too neutral?)
• Content - does the design have a good balance of content and white space?
• Navigation - does the navigation seem intuitive and well placed?
• Images - are the images appropriate for your market area? Do they strike the right tone?

If the designer can initiate an informative discussion between themselves and the client it will go a long way in helping the client be better engaged in the design process and help the designer come up with good solutions for the client's problems.

One of the most critical components of a website affected by color blindness is the text link. Andy Rutledge has posted a great article on how to style your site's text links to make them more distinctive without having to resort to the hideous <blink> tag.

Tinyteam.com is just over the line into clever. Instead of traditional navigation, this design studio's site uses a Russian-doll-like effect to take you from one page to the next. Of course, it's 100% Flash (and therefore 100% SEO unfriendly) but it is a fun site to play with. Tinyteam also does a good job at focusing their content and limiting the viewers choices (which can sometimes be a good thing).

Now comes FontStruct, a free, online font construction tool brought to you by FontShop (back in December I wrote about another cool FontShop service, HandFont). FontStruct allows you to build your own fonts using geometric shapes on a grid. When you've finished making your character set, FontStruct will "render" your font so you can download it in TrueType format. And did I mention it's free?

The wine-and-brie crowd might turn their collective noses up at such a pedestrian tool as FontStruct, but it's a lot of fun to play with and, who knows, you may discover your inner Erik Spiekermann.

Ever wonder where that Latin gibberish that designers use for placeholder text came from? You know, "Lorem ipsum dolor sit amet..." I used it for years without questioning its origins any more than turning on the tap or flicking on a light switch.

The text is not really gibberish but an excerpt from Cicero's, "The Extremes of Good and Evil" written in 45 B.C. You might be asking, "Why is this important?" Well it's not, really. But, just like designers today use type with no knowledge of its origins, Lorem Ipsum is taken for granted. I think having a full knowledge of one's craft makes one a better craftsman.

Want to learn how to keep your cat from scratching up your furniture? How to successfully take a cab in NYC? Maybe you've always wanted to build a water-squirting alarm clock. Howcast is the YouTube of how-to guides. It's conveniently organized by categories and the videos range from really useful (how to avoid jetlag) to really weird (how to grow grass in your office mate's keyboard).

Urban Dirty offers a selection of free background textures that range from grungy to gritty to slimy. The textures are asymmetrical so you can't create a seamless tiled background from any of them, but they're rendered at 180 DPI in small, medium and large sizes.

Go Media's Arsenal site offers textures, vector art and fonts that would appeal to just about any skate rat or tattoo artist. The art is offered in reasonably priced royalty-free collections but you can download free samples here.

For example, one of the keys of a successful website is its content. And one of the keys to good design is making sure your site's content is legible. Admittedly, since I've turned 40, I've had to increase the text size on a few of my favorite sites to reduce the strain on my eyes.

But the following example was clearly executed by a print designer who believes function follows form instead of the other way around. I had to hit command-plus on my keyboard three times before I could even make out what the text said.

So if you're a print designer looking to break into the world of web design do yourself a favor – before you buy Photoshop, read some books, take a class or kidnap Jakob Nielsen for a weekend and force him to tell you all he knows about user interface design and usability.

Occasionally, I'll come across something that so inspires me I have to try it myself. Stefan G. Bucher's Daily Monster site actually had me digging out my drawing tools that have been languishing in a tackle box for many years. Stefan creates a monster a day starting with a random ink blot and records the process using time-lapse video. I'm just as impressed with his hand-drawn title cards (scribed upside down, no less!) as I am with his monsters.

I sat down with my 10-year old daughter last Saturday and we tried our hands at creating our own monsters. It didn't take long to realize that it's harder than it looks. Never the less, it was fun to create something that didn't involve a mouse or keyboard.

There's something inherently beautiful about letter forms and the texture they create on the printed page. I first realized this during my sophomore year at RISD while I was hand-drawing letter forms with pen and ink over and over until my typography instructor was satisfied I had mastered proper form and kerning techniques. Desktop publishing, while increasing typesetting production a hundred-fold, slipped a barrier between artist and art form.

So when I want to take a trip down memory lane, I pour myself a wine cooler, put on some Boston and head on over to I Love Typography. More than just a repository of articles and resources for all things typographic, it's also a beautifully designed site.

EM Calculator is just that: a JavaScript tool that converts size in pixels to relative em units. It also calculates inherited CSS specs from parent to child. It's beautifully simple and that's why it's my Resource of the Week.

I've used ColorBlender for a while now to help me create color palettes based on the client's corporate colors and I've even wandered over to COLOURlovers occasionally when the client has no branding standards at all and I have to start from scratch.

But my new favorite site for creating palettes is Adobe Labs' kuler. Put aside the faux-Bauhaus name and flash-based architecture – this is one cool resource. The kuler site combines the social web aspects of COLOURlovers (tagging and sharing saved palettes) and the practical features of ColorBlender (downloading my saved palettes as swatch files to plug into Photoshop and Illustrator). In addition, kuler allows me to create several different palettes from one base color (analogous, monchromatic, complementary and others) and see the results in real time.

Being a graphic designer AND a football fan, I found this site strangely compelling. This just confirms my theory that if you've thought  about it, it's on the internet.

Inspired by Chris Butler's Week in Review postings, I've decided to try my hand at a weekly feature. Here's the first installment of "Resource of the Week."

A Year of Design Lists from design:related

Have you ever wondered what the government does with all the tax money it collects? I came across this fascinating graphic called the Death and Taxes Chart and it's a great representation of our government's spending priorities. It's also a good example of information design. I recommend keeping the chart handy this election year as candidates from both sides of the ticket ask for more of your money to fund "worthwhile programs."

Great suite of web design tools from Allan Jardine, a web UI developer out of Edinburgh, Scotland. These JavaScript bookmarklets allow you to do any of the following on a web page: overlay a grid; measure from one point to another; display rulers and snap guides; and draw a cross hair on a page to assist with layout alignment. And they're free. What more could you want?

FontShop is one of the better font resources I've discovered. They have a great collection of fonts as well as typographic services such as converting PC fonts to Mac and vice versa. One of their coolest services is HandFont. For $179, FontShop will create a full font set based on your handwriting.

Back aching? Eyes sore? Don't reach for that third can of Red Bull, take a break! Repetitive Strain Injury (RSI) can take a toll on your creativity and general health.

In addition to an ergonomic keyboard/chair/monitor arrangement, I use AntiRSI, a simple little program to remind me when to take a break. It's only for Mac OSX (that's too bad because most PC users are already stressed enough) and AntiRSI is simple enough not to be a resource hog but sophisticated enough to know when you've taken a natural break.

A presentation about grids and how they apply to websites. Very educational. Download the PDF.

There truly is a website for everything. Although the subject matter will appeal to mostly to design geeks and those with a pencil fetish, Bob Truby's Brand Name Pencils site is cleanly designed and well organized.

Great site for reducing those really long URLs down to a manageable size.

Turn this URL:
http://www.mapquest.com/maps/map.adp?ovi=1&mqma p.x=300&mqmap.y=75&mapdata=%252bKZmeiIh6N%252bI gpXRP3bylMaN0O4z8OOUkZWYe7NRH6ldDN96YFTIUmSH3Q6 OzE5XVqcuc5zb%252fY5wy1MZwTnT2pu%252bNMjOjsHjvN lygTRMzqazPStrN%252f1YzA0oWEWLwkHdhVHeG9sG6cMrf XNJKHY6fML4o6Nb0SeQm75ET9jAjKelrmqBCNta%252bsKC 9n8jslz%252fo188N4g3BvAJYuzx8J8r%252f1fPFWkPYg% 252bT9Su5KoQ9YpNSj%252bmo0h0aEK%252bofj3f6vCP

into this tinyURL:
http://tinyurl.com/6

Today I stumbled on a web-based app from the fine minds at Stanford University called Vector Magic that produces very detailed vector-based artwork from any image you upload to the site. I tested it against Illustrator CS2's live trace function and Vector Magic won hands down. It even did a great job with a color photo that I uploaded. Best of all, it's free.

Update (March 2008) Vector Magic has gone corporate and the ability to download your converted vector art will cost you $3.50 per download. Still, the software works great and you can re-vectorize your art as many times as you want before committing to a download.

Update (August, 2008) Mr. Dempsey's solution for bringing an Illustrator file into Photoshop works great for maintaining your artwork layers. However, there is still the issue of rasterizing vector shapes with straight edges. The sharp edges are softened in the process and you wind up with a blurred edge that has to be manually cleaned up in Photoshop. See this post for more details.

Common Craft uses low tech videos to explain complex subjects like social bookmarking, wikis, RSS and so on.

I've read many articles on how to jump start the creative process but Curt Cloninger's "Four Ways to Bypass Inertia" is one of the best. Curt details four methods that go beyond simply taking a walk to change your view or perusing old CA magazines for inspiration: oblique strategizing, scope plumbing, time-limited designing, and exploratory sketching.