In this way, your pool of users is much like the French invasion of Russia. When Napoleon first departed his home turf, he had a combined army of over 650,000 troops at his disposal. As the army marched towards their goal of St. Petersburg, they had to cross rivers and deal with increasingly cold temperatures which made the troops sick and disrupted supply logistics. Each river and temperature decrease acted as a barrier, causing Napoleon’s army to lose men to famine, disease and starvation. In fact, he shed 50,000 men in just the first two days of the march.

If you look at the graphic above, you’ll see how the tan line is fat on the left, representing the full army that departed, narrowing at rivers and temperature drops. Just as those things whittled away Napoleon’s army, so too can a website’s pool of customers be turned away by limiting factors. In Napoleon’s case it was logistics & disease, in your case it may be software errors, poor usability or price issues.

Let’s put it in perspective with a real example – we can speculate about the limiting factors of a website that takes your digital pictures and lets you print them on things like coffee mugs and mouse pads. When asked who a potential customer of such a site is, you might be tempted to say “anyone!” … because who doesn’t want a cool photo book or something, right?

Imaginary Service: A Website that helps you print your photos on products

Limiting Factors:

1. Who do we have the ability to sell this to?
   • US customers: 308 million people
2. Who has a digital camera?
   • Ballparked at 40 million americans in 2008.
3. Who has internet access?
   • Approximately 46% of those Americans.
4. Who wants to print photos?
   • A generous estimate: 30% of the aforementioned people.
5. Who is willing to upload photos?
   • A small percentage of the aforementioned people
6. Who is willing to learn to use the site/service?
   • A small percentage of the aforementioned people
7. Who finds the price acceptable?
   • Fewer still …
8. Who trusts your Brand, website and/or payment gateway?
   • Even fewer …
9. Who of all these people will see your advertising and marketing and respond to it?
   • A truly small number

* Napkin math: take figures very loosely.

So, as you can see, with just a few seconds of critical analysis, we have narrowed the list of potential customers from a number in the hundreds of millions to one that is probably in the hundreds of thousands – in a best case scenario. The exercise isn’t intended to be used as a tool to dissuade anyone from starting a project, but it should help project leaders frame their idea in basic reality. So, before you leap to fund the next spurious facebook app or complex group/social collaboration site, consider your project’s maximum potential with a skeptic’s eye.

At the very least, an exercise such as this can help just about anyone understand the need for simplicity and relevance above all else. Your project comes with enough limiting factors built in, you don’t need to add any more. Stay on the lookout for confusing business requirements, extraneous user experiences and technical errors.

Web resources are awesome in a number of ways: often updated and current, instantly available for free, and they’re usually technically savvy. Unfortunately, they can be a little rough around the edges – most tutorials aren’t created by someone who is proficient and writing or familiar with teaching. The main advantage a book can provide is that the information is usually organized and presented much more clearly than your average website. Books about code tend to contain little tutorials that demonstrate fundamental concepts, divided into chapters of increasing complexity.

While shopping for educational books, I tend to divide a book into one of three categories:

• Useless: For one reason or another, this book won’t help me in a way that justifies the cost
• Bootstrap Books: This is usually a “Topic 101″ book that you can consume and sell before it’s devalued. Code books always fall into this category.
• Foundational Concepts: These are worth their weight in gold because they impart knowledge that transcends technology and medium.

Bootstrap Books

My list of bootstrap books is concise, and I’m a big fan of the Visual Quickstart series – they are inexpensive and great for absolute beginners. I’ve enjoyed the “Headfirst” series much less, finding that the fluffy graphics and embellished page layout doesn’t actually help me learn.

HTML, XHTML & CSS Visual QuickStart

Grade: A+

Recommendation: This is THE book for someone who is just learning markup.

Review: Ok, so my copy is actually the 3rd edition and I haven’t cracked it open in years, but it was super valuable back then and I stand by my recommendation. The Visual QuickStart series is concise and useful. They are usually perfect books to consume, learn from, and then eventually progress.

JavaScript & AJAX Visual QuickStart

Grade: A+

Recommendation: Starting with this book can save you tons of time.

Review: Basically everything I said about the XHTML & CSS book applies to this. You won’t use this book for long, you won’t likely refer to it often, but it serves a very valuable purpose: get you on your feet quickly. You can always learn what you need, then sell it on eBay, Craigslist or whatever to recoup some of the cost.

XML (Second Edition)

Grade: A+

Recommendation: Depending on your role, you may never need another XML book.

Review: Buy this book and learn your way around one of the most useful tools at your disposal. Depending on your exact role, you may not need to move past this. XML is simple and extremely powerful. Like anything in this world, you can find at the bookstore fat tomes that cater to those who truly geek out on XML if you like.

PHP for the WWW

Grade: A+

Recommendation: Yeah, more A+ … it’s like I’m getting kickbacks from Peachpit.

Review: Newer versions cover PHP & MySQL, which is probably even more useful, if that’s actually possible. I wrote my first contact form with the tutorial from this book. This book is extra valuable given the practical usefulness of PHP and mySQL to front-end people like myself who still want access to a little more server side power.

Ajax, Javascript & PHP All in One

Grade: D

Recommendation: Save your money (notice how this book isn’t linked?)

Review: A neat concept, because the three technologies are quite complimentary. Unfortunately, this book doesn’t spend enough time in them to sufficiently educate a newbie coder. Combined with the higher price tag, I have to say that I wouldn’t recommend it. Additionally, you should learn JavaScript first, then AJAX …

Head First Ajax

Grade: F+

Recommendation: Google “AJAX” and skim the results for 20 mins. Same result.

Review: Great concept – finding a more effective way to deliver information, presenting it for max understanding and absorption. Doesn’t work, though. Yes, we are all sick of the dry and boring tutorial books, but they work for a reason. At the end of this book, I didn’t feel like I had learned as much as I expected (given its size and price tag).

Search Engine Optimization

Grade: B-

Recommendation: This is an entry level book, but very useful.

Review: The first 8 chapters deal with concepts that adept web geeks should know (optimizing structure and content). I bought it because of a chapter about Google Analytics, which sparked off a whole little sub-craze of mine. Couched in technology of the day, this book will eventually be obsolete.

DOM Scripting

Grade: B

Recommendation: The book almost succeeds at transcending today’s technology.

Review: This book is couched in current programming techniques, so eventually it will be obsolete. Yet, it does constantly communicate and reinforce the notion that JavaScripting IS traversing and manipulating the DOM. I bumped the grade up a notch because the author still tried to relate fundamental ideas as much as possible.

Designing With Web Standards

Grade: B

Recommendation: About the same as the DOM Scripting Book

Review: Again, unfortunately couched in current technology, but tries to express fundamentals. It pains me to not give this book an A++ as I am a huge fan of Zeldman’s writing and body of work. Again, this is best for a newbie who needs to learn how and why they should design and code to a certain standard.

PHP Cookbook

Grade: A

Recommendation: This is for someone who wants to go all in on the PHP front.

Review: O’Reilly books hold the same title as the Visual Quickstart books, but in a different space. They are my defacto choice when I need to buy a really expansive tome about a particular topic. This cookbook has all kinds of recipes and is perfect for a front end person hoping to become proficient in PHP.

Timeless Fundamental Knowledge

These books are the real deal, a book I can love and keep and put on my shelf. These books will engage you in some kind of deep intellectual way. Even if they’re not directly or specifically on the topic of web design, I consider them extremely valuable to any web geek.

Designing Interactions

Grade: A++

Recommendation: Outstanding, a must have for anyone that designs anything.

Review: This books is an absolute win, jam packed with ultra useful information on every single page. It’s about people using things, plain and simple. The author has compiled the knowledge of some of the worlds most successful designers and design efforts into a book with a ridiculously high caliber of information. Get it now.

Typography Workbook

Grade: A+

Recommendation: Immediate, tangible benefits from reading any page within.

Review: If you design anything with text, you need this book. For the growing number of web designers that are not schooled in traditional graphic design, this book is a must. It will dramatically increase the effectiveness of your content and messaging systems. What’s more is that it contains useful reference info, making it eternally useful.

Communicating Design

Grade: A

Recommendation: Excellent coverage of an often ignored topic

Review: Planning and evangelizing your design starts long before you show anyone a Photoshop mockup. Some designers are lucky enough to work in a robust shop, and they may live only in the UI or design or javascript world, but an increasing number of us, are expected to be proficient or at least dangerous across multiple disciplines …

The Design of Everyday Things

Grade: A

Recommendation: Worth it because this guy is totally obsessed with doors.

Review: This is another zany fundamental book that sounds so super dry, I thought I’d use it to cure my early morning insomnia. Instead, it turned out to be one of the most interesting books I’ve read in a very long time, with many lessons that can be adopted by people who design websites and online applications.

The Elements of Style (50th Anniversary Edition)

Grade: A

Recommendation: Anyone who writes copy for a living knows this book

Review: Writing effective copy is another skill that’s often neglected by web professionals. Professionals in many other industries have learned the hard way that there is a right way and a wrong way to create textual content. This is the ultimate reference book for when you don’t know where the apostrophe goes.

Writers, INC

Grade: B

Recommendation: Reduced the grade by 1 due to potential embarrassment.

Review: This is essentially the same topic as the previous book. It helps you know how to use the grammatical mechanics of the English language. I like how this book is laid out in a more accessible manner, but you should know it’s one I kept from my high school AP English class!

1. Enthusiast: Propelled by researchers and hobbyists. May be difficult or awkward to use.
2. Professional: Monetized and adopted by companies who saw its value. May still be klunky, but performs a desired task.
3. Consumer: Now it’s not about the technology, but what it can do

As interesting as it is to consider how products such as cell phones or computers moved out of geek circles and into everyday use, I find it even more fascinating to see how this spawned a similar but different process for online applications and property. What’s similar is that there are still three stages, and they occupy a similar space. What’s different and interesting, is how the online medium has swapped the 2nd and 3rd steps creating a process that’s optimized for updated consumers and businesses.

The Enthusiast Stage
A website in the Enthusiast Stage may be difficult to use, poorly designed or slow to respond, having been constructed by someone who had a good idea but isn’t an interactive designer. That’s OK, because usability and design problems don’t matter to the inspired group of early adopters who value, above all else, what this new toy can do or how it’s done. What’s more is that this five percent nation comprised of tech zealots and netophiles becomes an evangelizing force that’s often instrumental in propelling a good idea out of the basement and into the blue skies of great solutions.

You’ll notice that adept marketers such as Apple really lean on the Enthusiasts, encouraging and utilizing them to give their demographic a creative energy that draws even more people. As business owners refine their Enthusiast Site or application, the Enthusiast Army provides frequent and often times brutally honest feedback – all while spreading viral awareness that eCommerce markets covet much.

Many sites, like many small businesses, never make it out of this stage. Walled in by steep growth requirements, the good idea cannot get out. But some do …

The Consumer Stage
The Consumer Stage is like the Enthusiast Stage, in that it is a means to an end. Many sites are now monetizing their service at this time, but still list the ever present “beta!” mark near their logo. Websites in this stage have started to take off, and are drawing a much larger audience, perhaps getting coverage on popular sites that don’t cater to purely geek circles. In some cases, the site or application might still be awkward, but if the accounts are free, users are generally willing to put up with it.

This is a critical time when things begin to snowball rapidly. Brought under the unforgiving glare of consumers with varied tech-comfort levels and hardware capabilities, some good ideas are weeded out at this stage. Often times the team doesn’t respond quickly to fix technical blocks such as server speed issues, glaring website UI roadblocks or unwelcome product features. Too often, product managers and business owners become emotionally invested in some future vision of their product, refusing to change even when overwhelming customer data is begging for attention.

The Consumer Stage is a time of naked honesty, pushing for success at all cost. The added users, larger net presence and likely revenue stream are not just requirements to move on, they are the very tools used to do so. The number of truly successful sites is pared down yet again, in a way that would warm Charles Darwin’s heart.

The Professional Stage
This is it. This is money. This is the big leagues. Websites in the Professional Stage have been cleaned up and successfully marketed to the world at large. Ideally, they have also developed B2B relationships, capturing customers from related markets and platforms. Data garnered from an endless tide of users and customers can be used to drive truly effective change, and sales volume can soar into truly astonishing numbers.

Now, the path narrows again, and a few more websites slip off the precarious edge. With all this success, you also get a slew of extra problems. The easiest ones to deal with are hardware, software and UI concerns. The solutions for them are quantified, and in all honesty, easily implemented. Out of disk space from storing images? Archive what you can and buy more space. Legacy site architecture can’t handle a trillion users? Hire a team and get it upgraded.

Like WW2 U-boats, the less tangible dangers are the true killers. Often times they lurk around until you’ve crossed some kind of boundary, a theoretical point of no return. Oops, you just alienated your enthusiast crowd with some random product feature change. For every fiscal quarter henceforth, your sales will soften. Oops, you designed a product that is a one-time sale to a diminishing market. Where’s your parachute? Uh oh, some business process or application architecture is going to cost so much to change that it might as well literally bet set in stone, taunting you from your manager’s office.

But What’s The Point?
The point is easy to understand, difficult to master. For a website to be successful on an undeniable level – for it to permeate the forebrain of global pop culture – it has to evolve away from any vestigial trappings that the creators may have envisioned. Like evolved technology, websites become successful because of what they can do for you. A customer or user might enjoy some animations, but what they want is your product. A person’s experience can be enhanced by design, fun can be increased by process, but ultimately a successful website has two qualities that can be summed up in one sentence.

“It’s easy to get what I want”

Curb Appeal is a term borrowed from the Real Estate industry that describes the instant impression that a buyer gets when pulling up to a house on the market. A good impression can cause someone to fall in love with a house before they’ve seen the inside. A bad impression might cause them to drive away without even stopping. Curb appeal can manifest itself the same way on your website, when a first-time visitor lands on your website and decides if it’s the right place or not. This article will discuss five things you can do to increase your website’s curb appeal.

Fresh and Relevant Content
Nothing kills curb appeal like a stagnant website. If someone arrives on your home page and the newest article is more than a few days old, they are already subconsciously downranking your website. I’m not suggesting that you publish content just for content’s sake. Useless content can have the same effect as obsolete content. What you might do is brainstorm some ideas and then rough out a schedule that returning visitors can become familiar with. They’ll come to know that you update at some regular interval and start to visit based on that.

Active Forums & Comments
It’s a viral effect, when a reader sees new comments, they are more prone to comment. It may be a cheap trick, but while your site is freshly launched, you would do well to aggressively solicit comments from friends, family and professional associates in the right circles.

Desired Content Up Featured Up Front
If you are a retailer, that means your top products. Your newest, best or most popular items – the items that most people are there to find – should be given special priority on your site. If you run a blog, it means new or popular articles displayed front and center, with an easy way to find articles that someone might reference.

A Design That Communicates Effectively
A user’s perception of your site is influenced by the design, but not wholly based upon it. A nice aesthetic may help communicate, but a sloppy design might also get in the way of your content. Keep in mind that almost nobody truly cares about the design of your site. People want the content.

Validation of Your Position as The Expert
If you want to be perceived as the expert, you’re going to have to do your part to grab that title and hold on to it. Although your site needs to stand on its own merits, a savvy marketing will also encourage growth and acceptance by promoting their site where applicable. Try going after some of these things as ways to establish yourself or your site as a leader:

• Positive reviews from users and customers
• Professional endorsements from market or industry peers
• Client list, featured here or success stories
• Guest authors, co-contributors and 3rd party content displayed on your site
• Good press from 3rd party sources – “voted #1 tech site by webmonkey” etc
• Award and Citation graphics

More reading on this topic:

• 13 characteristics of outstanding blog design

Quantify What Needs To Be Print Friendly

Have you ever experienced the sublime joy of a boss or client who suddenly realized that a page or portion of your site doesn’t print well? You might be asked to make pages printable as-is, rather than via some print-friendly intermediary. Even worse, you might be asked to make traditionally unprintable content print correctly; home pages, flash content, animations or even application interfaces. Explaining the vagaries of printable backgrounds and margin-friendly markup is a complete waste of time. They don’t care about the details, they just want it how they want it. Your frustrations rise as you try to complete an awkward task for an increasingly disappointed client.

Before we get into the details of those gnarly and undesirable tasks, let’s take a lesson from my Sabumnim and try to avoid these perils completely. What was the first error in the hypothetical situation above? Was it coding the site improperly or not using a certain methodology? Nope. Was it not knowing what the client would ask for until it was too late? Again, no. The problem was that the client’s expectations (in regards to printable content0) were not managed early on, leaving them opportunity to invent potentially difficult goals imposed at unfortuitous times.

Do yourself a favor; review all the content of a site you’re building and make note of what looks like a good candidate for being properly printable. Discuss that with other project members such as the project manager and the project stakeholders (the people with veto power). By defining your set of print pages you have:

• Quantified this task into a finite, deliverable goal
• Sold it as a feature to project stakeholders
• Exempted irrelevant and potentially problematic content from the scope of the task.

Typically you should plan to provide print-friendly versions of most legalese pages, informative articles, help content & FAQ’s, product listings and detail sheets, as well as directions a user might need to complete a task. Often times you can exempt several types of pages from the print-friendly objective: most home pages, application interfaces, animated pages & images, advertising content and data entry forms.

The basics of a print media CSS

• Change the page’s colors to black and white; colors and median shades of gray might not print well.
• Use a font with serifs, it’s easier to read in print.
• Left-align your text and columns.
• Choose a font size that is easy on the eyes and affords paragraphs of a desirable length.
• Underline all links so the reader can still identify them.
• Remove non-essential images, especially advertising.
• Remove the navigation and site-frame images, as they are prone to lose context.
• Remove all JavaScript, Flash, and animated images.
• Formally cite references and contributors.

I’ve created an example print stylesheet that does what I’ve described above. You may use it as a starting point when designing your own. It’s full of notes, feel free to delete those as you see fit.

How to invoke your print-friendly stylesheet

In the HEAD of your document, you’ll add in the print CSS file just like you would a normal one, with a few tweaks.

<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

You’ll notice that the media is specified as print, and that’s the important part. That instructs your browser to apply the styles within only when the page is printed. The other media type that applies when printing is “all” … you can read more about the various media types if you like, but that’s out of this article’s scope.

So that’s it, you define a second (smaller) set of CSS rules to handle printable content, link the stylesheet only in the pages which users may need to print, and bam – your browser does the rest. You don’t have to maintain a second site template, it only requires one extra file and your boss is happy.

Yay!

Reference materials:

• http://www.netmechanic.com/news/vol4/design_no8.htm
• http://www.maratz.com/blog/archives/2004/09/21/10-minutes-to-printer-friendly-page/
• http://www.alistapart.com/articles/goingtoprint/
• http://meyerweb.com/eric/articles/webrev/200001.html

By doing yourself the tiny favor of mocking up your concept in a browser frame you can also remove some frustrations that can ruin the zen of your design. By accounting for these early on, your site will remain strong, using available space wisely and working on a variety of platforms. You may not realize some of these until you mock up a website that is framed by its natural environment, so I’d like to mention some of the considerations.

• The browser affects the user’s perception your website’s design and interface.
• A monitor may be 1024×768 pixels; the resulting browser portal window is not.
• The vertical scrolling track takes up space, and may not always be present
• A user may configure their browser to use more or less space

The last added bonus of this is that you can manipulate these photoshop files to depict a browser of any size. If it’s helpful to show your site or application on a wide screen monitor, non-standard aspect ratio, or one that’s extremely small, you will want to demonstrate that to the project stakeholders. Often times, doing such excercizes will even help you catch something you may have missed. Errors such as primary content below the scroll or applications that don’t utilize the aspect ratio well will be exposed.

Feel free to download these photoshop templates to get you started in mocking up your designs in their natural habitat. I’ve provbided zip files that contain PSD’s of the following browsers:

• Internet Explorer 7
• Internet Explorer 8
• Mozilla FireFox 3
• Opera 9
• Safari 3
• Safari
  
• Google Chrome

Enjoy!

You can't have all three!

I wish I could say that any designer or developer should be able to find an elegant way to pull all three off, but I can’t. I’ve come to realize that clients can make requests that truly astonish me. Sometimes the request merely illustrates how a client can want to have their cake and eat it too, but once in a while you get a request that spotlights an individual’s complete separation from reality.

If you insist on exploring the truly wacky side of client interaction, the there are places that can illustrate this point rather sharply. Some of my favorites that I’ve saved from eLance:

“Need photo hosting, management and sharing site just like flickr. Budget: $1000″

“Do you want to create the next facebook?! Budget: $500″

“Dating website with social networking tools. Budget $500″

More information about this topic:

• http://en.wikipedia.org/wiki/Project_triangle
• http://en.wikipedia.org/wiki/Project_management_triangle
• http://answers.google.com/answers/threadview?id=63190
• http://www.sixside.com/fast_good_cheap.asp
• http://ifacethoughts.net/2007/05/04/fast-good-and-cheap/
• http://www.codescene.com/2006/01/the-design-triangle.php
• http://www.stc.org/intercom/PDFs/2001/200104_06-10.pdf
• http://ifacethoughts.net/2007/05/04/fast-good-and-cheap/

What exactly is a wire-frame?

A wire-frame is a visual description of page architecture, with implied functionality, completely devoid of aesthetic or interactivity. It is literally, the skeletal frame upon which you will hang a skin of color and style. A wire-frame is not a description of layout, it is not a process map, nor is it a document that defines visual style.

Five distinct and tangible benefits

You might be wondering why I’m advocating adding an extra step. Perhaps you get a project and simply sit down in front of the computer and start brainstorming in Photoshop or Illustrator. That’s fine, it’s what I did for many years, and it works fine. Still, as I look backwards at a string of personal and professional projects, I can honestly say that adding this step of process produces better results and does it much faster. I can pinpoint situations in every project where I went through a series of quick-turnaround wire-frames before hitting photoshop. In once case, the final deck of wire-frames was 50 pages that went through 12 iterations each – in one month. Can you imagine doing that in Photoshop? It would break even the most masochistic workaholic web geek.

• Smooth out errors in the process and flow of your project. Often times, I’ve found that even a rough articulation of a page or process will expose some kind of logical or usability challenge.
• Refine the concept before designing and developing it. A Photoshop file could contain hundreds of layers and styles, requiring complex interactions to make what appears to be a simple edit.
• Get agreement on what to build from project stakeholders. Even non-technical and non-creatives can view a wire-frame and understand what they’re looking at. Getting approval on a deck of wire-frames leaves no surprises for business owners.
• Reduce the design process to a question of pure aesthetics. If you’ve already got a page concepted, you’re not slowing down to ask yourself “OK what are all the elements that belong on this registration form?” … because you have already designed it.
• Easily communicate conceptual details about what is being built. Once completed, a wire-frame can be shared with anyone on the project, preserving and communicating important details. Any project manager or developer can grab the deck of wire-frames and page through to see a concept of what is being built.

Who should make a wire-frame?

The short answer is that anyone on the project can and should be encouraged to contribute at the conceptual level. In fact, a great idea is to kick off the project by having different participants create wire-frames on their own, and then come together to compare the results. You’ll see how everyone’s conceptualization is brings different ideas and value. The business leader, the architect, the UI expert, the designer and the developer will all naturally create a concept with a unique feel.

After doing this, it’s a good idea to hand the wire-frames off to a single owner who is responsible for their further development. Most people are consumers web content – especially those of us who make our living on from the web – and therefore can rough out an idea just fine. But this does not mean that you take a design-by-committee approach.

Can I see some examples?

Sure thing, below is an example image of Apple’s website broken down into its basic elements. Remember, a wire-frame can illustrate a single page architecture or many pages in a process. If possible, I like to create a wire-frame for every single page (and as many permutations of process as time allows).

Apple's Home Page

What do I use to make a wire-frame?

The list below is ranked by my preference. I admit to being heavily biased towards a simple tool that helps me make many fast iterations to a concept before any pixels are pushed or code is written.

1. Balsamiq Mockups – it’s literally faster than sketching, and it’s really cheap. This is what I use for all my wire-frames. It’s one of the few innovative programs that has come out in the last five years – something that actually changed (improved) my workflow. Best of all, it’s an Air application.
2. Pencil and Paper – Which is what I would use if Balsamiq did not exist. The biggest drawback is that some clients and business partners have a mental block that prevents them from accepting something that wasn’t spit out of a program.
3. Adobe Illustrator – which is totally overkill for this, but if you’re familiar with the program you should be able to create some boxes and arrows in no time flat.
4. Adobe InDesign – some people enjoy this route because of the third party templates and integration with the rest of Adobe CS.
5. OmniGraffle – Simple and elegant and completely useful … available only for Mac. Boo!
6. Protoshare – great if you need to share your wireframes online
7. Sketchflow (MS Expression) – this looks really neat and integrated … and totally overkill. I haven’t tried it.
8. Microsoft Visio – just kidding! I wouldn’t lead you astray like that.
9. Axure – It reminds me of MS Word or Visio. I haven’t tried it.

A few tips for creating wire-frames

• Don’t add any gloss or style. It’s OK if some things don’t line up. I’ve found that if it looks too close to being done, some people may think it actually is. A rough look conveys the “work in progress” nature of a wire-frame.
• Don’t sweat the details. Is “Sign In” or “Log In” the most appropriate label for this button? Who cares! The button just makes the form go. Your team doesn’t need to hash out every detail at this stage.
• Work through a few iterations of your wire-frame(s), soliciting feedback between each revolution. You should end up with a basic, but refined concept of what you’re going to design and build.
• Don’t get attached to any particular concept or layout yet – it’s too early for that. In fact, it helps if you put off discussing specifics unless absolutely necessary.

Do more with your wireframes

Sometimes a flat sheet of paper can’t convey user process to a business user or interaction to a developer. When I read this tutorial on Abduzeedo about creating a deck of clickable PDFs, I immediately wondered why i wasn’t doing it yet. A mere month later and this has become the standard at work. The basic idea is to create a clickable PDF that very roughly simulates a user’s path through a task.

More Info About This Topic

• Download EightShapes Unify, for creating wire-frames in Adobe InDesign.
• Flickr group: I Love Wireframes
• Wireframes Magazine
• Using Wireframes to Streamline Your Development Process @ WebDesignerDepot

From whence we came …

We are proud of our print-media heritage, and thankful for the structure it provided our young profession in the late 90’s. Established design theory provided a starting point from which this new medium could grow. Lacking in a formal set of standards, we borrowed heavily from the graphic design and typographic rule books. Cozy and familiar, print-based design skills were a natural friend in this time of discovery. Websites posed few challenges that the designer had not tackled before. They were still just as flat and unresponsive as a flat sheet of paper.

This ain’t your pappy’s net anymore

Years after its creation, the web is fundamentally different than its 1.0 progenitor. It provides more than the simple static information we were once content with. As people ask web to do more, they desire to interact with online systems in new ways, each more complex than the last. Designers and developers are being asked to solve questions which are only partially formed, and less than fully understood. Is this the right way to move a person through process X? Does a person want this service flavored this way or that? How will a customer want to go about doing something?

Even the general public, consumers of web content who have little professional interest, have grasped the driving idea behind “Web 2.0.″ The notion being that we have reached a new era of what the web is and does. We’ve made a quantum leap forward to something that is different and, hopefully, better for everyone. We have explored a few dead ends along the way, but overall things are greatly improved. Unfortunately we are still heavily couched upon the 1.0 foundations in a few key areas.

Necessity is the mother of invention
-Plato

With all this new interactivity, we must leave behind the notion that web content resembles a sheet of paper in any way that really matters. To truly make a substantial move forward, we need to re-frame our mind’s eye, so that it does not gaze upon a two dimensional object whose content is merely absorbed. Instead we will envision a morphic, four dimensional object that does something that someone needs.

It’s not a sheet of paper.

Being a visual person, I enjoy picturing a website as something other than what they are, an object that implies the shape or structure within. Perhaps it’s an iceberg or a submarine, use any visual metaphor you like. The crux of the matter is that what lies beneath the UI of any web system is complex, malleable and purposeful. To open your mind to truly new and creative solutions, you need to shed every ounce of two-dimensional convention.

• Remember that people don’t view your website, they interact with it.
• Traditional media may be encountered randomly, web content is often asked for.
• Printed media can inform, engage and entertain. Websites do this while performing a task.
• Please, please (please) stop using “the fold” to refer to the bottom of the viewable content.

Remember, spray the fire extinguisher at the base of the fire. By changing your entire frame of mind about what a website is and can be, you open yourself up to elegant and creative ways to fix problems that might not even have a traditional solution. The way you get to be a Google or Flickr or Youtube is by offering something truly new. Re-framing your mind’s concept of the web can be tough, but the rewards are great. Doing so will provide you, as a designer or developer, a much larger sandbox to play in.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: top;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

The only thing I’ve really changed here is that I’ve set a default vertical-align to “top” rather than baseline.  I’ve found it requires less work and provides more expected behavior – but hey, what do I know?  Mod this however you see fit.  Incidentally, if you are a fan of the YUI way to do things, then you can grab their CSS reset.