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”

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

Conceptualizing the page or website with other principals on the project helps unify the group’s expectations regarding the final product. By sketching up the a rough outline, you’ll give your idea a small but valuable nudge in the direction of formality before the rest of your team starts working on it. By presenting your design team with a visual aid, you can better illustrate the purpose and goals of your project.

Worth 1000 Words

Working out a concept sketch allows you to communicate with your designers in a realm they understand. They are almost certainly visual problem solvers, in addition to other valuable skills and talents. When you take the time to formalize your idea into a sketch, and then communicate that idea to them verbally with the sketch, you’re greatly increasing the quality of your idea transmission. Imagine it as the difference between listening to the radio and watching TV. When listening to the radio, you have to rely on abstract reasoning and imagination to fill in the details.

Don’t Fuss Over Details Yet

Focus on presenting your creative team with a roughed out idea that illustrates the singular purpose of the page or site you’re dreaming up. Thinking about granular details now is almost always a complete waste of time, given the amount of change most web projects see before launch. Right now, your goal is to define what it does and how. Getting hung up on layout type or the specifics of an interactive UI object aren’t going to help you get this project launched.

Concept is Not Layout

It’s easy to fall in love with a sketch. On that piece of paper, your idea is just barely tangible, so full of possibility and lacking in any practical limits or concessions to reality. Unfortunately, that can often fatally cripple a project still in its early stages. When you become emotionally tied to something that is still conceptual, when your mind’s eye sees a detail as intrinsic to the spirit of the whole, change and adaptation become a battle to be won rather than an opportunity to be seized.

In more basic terms, avoid being extremely proscriptive in terms of layout, architecture and process. This is not the phase to determine if an interactive widget takes the form of a filmstrip, carousel or iTunes cover widget. Your company probably pays people a lot of money to think about those things – you want to get your money’s worth, right? Communicate your idea clearly and let your people run with it.

Get The Sketch Pad

You can really take certain things to the limit, peeling back layers of granularity to expose new benefits of formalizing things which others might simply interperet as a naked expression of OCD. Sketching your website ideas up on fancy paper is one of them. I’m super serious. Download the sketch pad that is way too fancy:

• Illustrator Zip File (1,206k)
• Adobe PDF

Here’s another great sketchpad

More about This Topic

• http://www.visualorange.net/html/web_site_concept.php
• http://cat.xula.edu/tutorials/planning/sketch