About twice a week I find myself explaining to startups why it’s better to invest your time in building a prototype of your web application than wasting hundreds of hours on a 50 page business plan no-one is going to read.

Below is a one page explanation of the advantages of creating prototypes:

This year we will have helped create and redesign dozens of websites and web applications. These sites and apps belong to our clients so they will get the glory and limelight as they launch into the big wide world. That’s okay with us because that’s what we do. We’re the guys behind the scenes making these products and businesses possible. For every blockbuster movie there are thousands of crew and extras behind the scenes. For every political campaign there are thousands of volunteers and uncelebrated supporters.

We don’t work for awards and kudos. We get up each day to help other entrepreneurs become more successful. We’re not altruists, we still make money, but we love this quiet role.

Edith Wharton said it best, “There are two ways to spread light – be the candle or be the mirror that reflects it.”

We recently updated our own home page design with some very positive results. As you can see below the redesign wasn’t significantly different but there were some key improvements. Our goal with this redesign was to reduce the “drop-off” or bounce rate from the site.

From the Google Analytics charts below you can see that we had a massive improvement in bounce rates. The new design reduced bounce rates from an average of around 50% to around 5%.

Here are the specific changes we made:

1. Remove the search bar from the navigation
2. Make the positioning statement clearer and more focused
3. Increase the size of the portfolio area to give more attention to the design work we do for your clients
4. Make the contact form more accessible and give it a friendly face to make it feel more personal
5. Reduce the complexity of the blog and twitter feeds so the content is not overwhelming

Do you ever feel like life’s just getting way too complicated? Well, simplify it! Now is the time to use these websites as examples to inspire your the next time you want to create a simple and clean web design.

Now, to get to the “juicy” stuff you’ve all been waiting for…

Shout Digital:

(image source)

Finch:

(image source)

Interim Furnishings:

(image source)

Flavors.me:

(image source)

Fatburgr:

(image source)

Apple:

(image source)

Kristine:

(image source)

Nest Living:

(image source)

Coca Cola:

(image source)

Posterous:

(image source)

Fluid Book:

(image source)

Sortfolio:

(image source)

Rankin:

(image source)

A123 Systems:

(image source)

WordPress:

Are you ready to be inspired? Check out these not 20, but 21 (added one more for good measure) simple login forms that are truly impressive.

Design is subjective, but when it comes to login forms there are some fundamental elements that are staples. The design seems simple enough but there are some vital questions you need to ask yourself when building out a login form. How will the login look? Will you call the page a “login” or “sign-in” page? Will the login page have graphics/text? Will it be an extension of the existing site or it’s own page? etc…

Without further adieu, take a look at these inspiring login pages…

Mint:

(image source)

NikePlus:

(image source)

Threadless:

(image source)

MobileMe:

(image source)

Campaign Monitor:

(image source)

Vimeo:

(image source)

Posterous:

(image source)

Sortfolio:

(image source)

Polldaddy:

(image source)

Enernoc:

(image source)

Tumblr:

(image source)

Four Square:

(image source)

Scribd:

(image source)

Harvest:

(image source)

Blueleaf:

(image source)

Delicious:

(image source)

Mailchimp:

(image source)

Netflix:

(image source)

Skype:

(image source)

LinkedIn:

(image source)

Uber: (one more for good measure)

(image source)

As part of the What Not To Web event we’ve started to makeover some of the early submissions. The first one is a company called Rave that sells cell phones, plans and accessories. The original design was trying too hard and needed to be simplified. One problem we see with many sites is that they are trying to do too many things at the same time. Try keeping your users focused on doing one or two key things.

Here’s the ‘before’ design:

Before

After 20-minutes,and a few much needed tweaks we were able to make a significant difference to the website.

1. Users expect to find their profile or shopping cart information in the top right hand corner. Keeping the commonly used elements in the place where users will find them reduces anxiety.
2. Add a search bar helps your audience find the things they need quickly. This doesn’t mean you can be lazy about the rest of the sites design. It’s important that the products and services that you are selling are easy to find even when search is not available.
3. We didn’t need to change the navigation much but we brought the design in line with the simplified and more elegant aesthetic of the new design.
4. Creating a strong call to action on the extreme right of the page is essential to all sites that solicit an action from their audience. Using the large red font we are immediately giving action related instructions to the user. Research suggests that the more specific the instructions the higher your conversion rates.
5. We’ve chosen to create a functional call to action that helps the user sort through the options available to them before they even need to leave the home page.
6. Using a rotating set of images on the home page we can advertise a few different products or offers without having to clutter up the premium real estate.
7. We’ve selected to create a secondary set of product offers under the main image area. These are offers that we believe the company should highlight for promotional reasons. Bringing the high value offers to the front with simple content and calls to action helps sell these items better.
8. Creating credibility with the use of the carriers logos and matching that with the overall look and feel of the site makes this design feel more professional.

After

Do you really have the time and energy to read anymore? If you’re like me, you will more than likely answer this question with a big fat “NO.” Well my friend, let me introduce you to the infographic: a simplified visual representation of more complex situations, events and/or statistics.

I couldn’t resist myself and I had to compile a list of infographics that are, in my book, bad a$$. I’ll waste more words for a later post and get straight to the point: Check out these visually stunning and informational infographics…
Read more

We’ve been using Basecamp since it was first released. One of our goals was to centralize all project management into a single tool. We wanted to avoid a situation were our team would need multiple logins for several tools. Our desire to remain on a single platform has not always been easy. That goal was much harder to achieve than we initially thought. Web design projects are complex and require lots of different elements. Like other modern design firms we also are embracing Agile and Lean methodologies into our process management. That approach suggests adding several new tools like burn down charts. By molding ourselves around the Basecamp features we have actually simplified our process of web design.

By its very nature, Basecamp is a simple tool with far fewer features than its competitor’s products. This limited feature set has sometimes forced us to question our process to avoid having to add another tool or product to the project management process. Another consideration is that we all of our processes are built around the concept of checklists. We use checklists for everything.

Here are the specific ways we used Basecamp to manage our web design projects:

The Company To-Do List or Universal Backlog

This is where every day begins and is just a fancy name for a company to-do list. Using Agile, or just-in-time, philosophies we constructed a to-do list under a project called Backlog and everyone’s daily tasks are updated here. We meet, mostly virtually via Skype, each morning for a few minutes to confirm who will be doing what and if anyone needs help getting their work done. This is similar to the scrum concept except that we are discussing all projects. Most scrums or stand-ups are focused on a single project because the entire development team is only working on that one project. As we’re working on several projects we decided to centralize the to-do list so we can immediately see who’s doing what and who might have bandwidth for new tasks.

The idea here is that we manage our business in bite sized pieces. We don’t do task management any further ahead than one or two days. Although each project has an estimated time line associated with it, we have found that planning more than two weeks ahead is not only very difficult but irresponsible. If you’re designing an application UI there is no way you can tell what you’ll be doing in two weeks time.

View of the company to-do list or 'universal backlog' as we call it

Read more

See full gallery of examples here:

A recent situation encountered by by one of our clients has inspired me to pontificate on the topic of “Marketing Committees”. (Read: Why Corporate Web Design is Broken) Recently one of our clients mentioned to me that her marketing committee needed to review our design. Now, while in this particular scenario, I was assured that she has the final say in terms of this type of formality she often encounters with her organization (phew!) which calmed me down about the possibility of revamping our mockups again,  I’ve paraphrased, extrapolated, and derived questions from the our conversation  to represent what can happen when a committee who’s expertise lies just outside of the design world gathers in a room and analyzes site design:

“Does this constitute conventional web design?”

“Can we see research on where the eye lands first?”

“We need a few more mockups to help us decide what we want”

Ok. My suggestion to a marketing board such as this would be to avoid engaging in discussions about things such as “eye path”. While that is important for some applications and marketing material, it’s something “we all” heard about at one point or another in school and is the closest thing to psychological qualifiers most people can connect with in terms of effective design. It’s one of many aesthetic and functional elements that can go into designing a site. Psychologists do exist who study these types of things. But really, this is going too far.

Basically, if a site looks good and is easy to use, it is good. Worrying if evolutionary experts would find the site as perfectly engaging, sustainably and organically designed doesn’t really apply here. The site needs a clear purpose and the goal is to convey what you need to convey as most straightforwardly as possible.

In terms of “conventional” site elements, keep it simple. People travel to web pages because they expect to learn things they think (and hope) that web page holds, not browsing around the page for what they want to find out. That’s where simplicity comes into play and why one text column, one description, and clean functionality often wins out. For example, focus on including more “need to know only if it applies to you” information as you progress throughout the site or down the page. You’ll look if you need to look. Otherwise, no need to worry about it.

While these thoughts may not constitute criteria for a site to win international design awards (we don’t design that way anyways, because they often sacrifice content for aesthetics, which doesn’t really work for many of our clients), the purpose of the site is what drives the design. Don’t overcomplicate things.