Lead gen pages are often misunderstood as standalone, single-page designs. There’s a science behind A/B testing and optimizing lead gen pages, but there’s also a component of creative user experience that should not be overlooked as you drill deeply into what drives your users through your conversion funnel.

Some user behaviors make clear sense, while others can confound your expectations. Overall, however, designing a complete experience around a conversion page is best understood taking these 3 “Ss” into consideration:

1. Somewhere—Users get to conversion pages from somewhere, so go there first!
2. Superficial—Good looks matter. Users respond to a particular aesthetic, so try different designs!
3. So Much More—Users engage deeper through community, so get them connected to you and each other! (FYI a Facebook Fan Page is a great ecosystem & it’s free)

Okay, so few weeks ago I posted about a redesign I’m working on for a lead generation page. That project began with a single page, but preliminary outcomes further demonstrated that we needed to step backwards and design for an entire experience, which is where Somewhere, Superficial, and So Much More came into play.

I’ll explain!

First, our initial A/B test is over:

• Good news—we didn’t break the existing conversion rate.
• Better news—we raised the conversion rate a little bit ;-)
• Great news—we blew up our Facebook Fan page by designing a thoughtful “Thank You”! (*We increased fan acquisition from 3 fans per day to 30+ fans per day)

Second, we’re embarking on Phase 2 of our test plan, so let me share what that plan looks like, because A/B testing can be delivered in a number of ways. Here is the 3-phase method I recommend and that we’re currently using:

Phase 1: Update, Don’t Break

(This phase is optional, in the project I’m working on we did need to update an older design before we could effectively move forward with testing.)

• Update the design to a higher standard that better expresses the brand
• Don’t break existing conversion (50 v. 50 split test, confirmed by a 5 v. 95 follow-up)
• Phase original design out completely

(Current design in the wild, original design)

Phase 2: Design Different Concepts

• Create 2 more well-informed aesthetically different designs
• Conduct user testing (DIY-style works well!)
• Release new designs into testing cycle in increments (10 v. 90% to start)

(Potential design to test)

Phase 3: Optimize One

• Select the “winning” design from the 3 that have been tested
• Optimize the winning design with A/B testing of the smaller elements on page (copy, image, steps, etc)

(Potential design to test)

Third, as we prepare for our next test, which will involve 3 very different designs, here are things we considered about the current experience to make sure we covered “Somewhere, Superficial, and So Much More”:

Traffic Sources

It’s important to learn about where your users are coming from; this is the first step to take in order to reduce your bounce rate.

Are your users coming to your site after clicking an ad? Are users coming to your site to learn something, or have they accidentally gotten there, is the message seductive, on target?

User Testing

User testing doesn’t have to be expensive, drawn out, or complicated. Do informal (or formal if you can) user testing to gather feedback on the different designs before you release them into the wild.

Form Friction

At the heart of every conversion page is a form. Determine what variables can be tested, and what variable make sense to test. Some form friction is good!

Let me share an example, for us, it seems like “phone number” is an easy variable to test out. But, it turns out it’s not! While we might get more conversions by taking that element out of the form, we would also open ourselves up to less qualified leads, which we don’t want and also aren’t equipped to scale for.

(*Consider your community support team, if you put their phone number on your conversion page can they handle the incoming calls?)

The Thank You

Never underestimate the opportunity for a second level of conversion that your “Thank You” messaging provides for you to create and facilitate community and further engagement.
Our Thank You experience in our first round of testing, totally changed our approach to how we were looking at this conversion page.

To wrap it all up, throughout this process of redesigning and optimizing a single conversion page (we’ve planned on about 3 months of testing), we’ve really come to understand that the best and most effective lead gen page designs involve an entire experience that goes well beyond a single page. Suddenly, our little conversion page isn’t so lonely or so little.

Take a look at your app’s conversion page, rally your team, and consider the impact of Somewhere, Superficial, and So Much More.

Editors Note: In his first article for Think Vitamin Thierry Koblentz discusses the issue of “resetting” your CSS.

“base.css” versus “reset.css”

For a long time, the very first line in my styles sheets was:

* {padding:0;margin:0;}

This simple rule was very convenient as it leveled margin and padding values of all elements across browsers. This “hard reset” was short and simple and it had the advantage of belonging to the main styles sheet rather than being an external file.

Later, this technique was denounced as bad practice as it makes the rendering agent style (check) every single element in a document. It also triggered issues with form controls, but authors were used to specifying styles for these.

Then came “reset” styles sheets. These files go way beyond resetting margin and padding. The most complete in terms of properties/elements involved has to be Eric Meyer’s. It “unstyles” everything you could think of, from a to var.

Authors start with a clean slate. From there, they most often write rules to style elements that were originally styled by the browser’s styles sheet, but overwritten by the reset file. In short, many elements are styled three times:

1. by the browser’s styles sheet (see User Agent Styles Sheets).
2. by the “reset” file.
3. by the author’s styles sheet.

Criticism of this Approach

Jonathan Snook, Jens Meiert and others have “criticized” this approach, saying more or less that there was no use for a “middle man”. On Jen’s site, “randomCommenter” summarizes the issue pretty well when asking: “Wouldn’t a well written base style sheet render a reset style sheet redundant and therefore useless?”

Actually, I believe Eric Meyer himself hints in that direction when he says:

“I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on. In other words, this is a starting point, not a self-contained black box of no-touchiness.”

In any case, people should at least evaluate the rules in these reset files before copying and pasting their content. For example, if one authors documents as HTML 4.01 Strict! one may safely remove from a reset styles sheets any reference to elements like:

• iframe
• applet
• strike
• u
• font
• s
• center

My Base Styles Sheet

Following the idea of “tweaking” a reset file, I came up with this “base styles sheet“. It sets default styling for many elements, follows a couple of recommendations regarding usability/accessibility, and addresses a few “common issues” as well.

What does it do that a reset doesn’t?

It fixes a few things

• It forces a gutter for a vertical scrollbar (when content is too short to require a scrollbar)
• It includes an IE button width fix
• It removes “sticky” outline (not in Internet Explorer though)
• It prevents “mysterious gaps below images“
• It prevents descenders letters in legend from being cut-off in Internet Explorer
• It vertically aligns checkboxes and radio buttons with their label
• It sets a default color background for the document with no shrink wrap effect on body¹

It styles lists by default

It is easier to remove markers on lists than to style them. So, by default, lists are styled to show indentation and markers depending on hierarchy and list types. But the styles sheet contains a class to reset this styling. When applied to a UL or OL – it will remove markers and left margin on their items.

It creates vertical “gutters”

Left and right padding are applied to most block-level elements to create vertical gutters. This allows to build layouts without having to use “padding” on main containers which helps to produce designs that do not break in IE 5 (or IE 6 in quirks mode) as width and padding values are not mixed. This is also an alternative to using non semantic wrappers as a workaround to avoid mixing these properties.

Why using padding instead of margin to create that space?

Using padding allows to paint elements’ background all across their parent container. Stretching from one edge to another. When this behavior is not sught, for example when styling a heading with a bottom border that should be no wider than what appears to be the “content box”, authors can use a class (in the sheet already) to revert that styling (swaping padding values with margin values).

It creates horizontal white space too

• Via margin – By default, vertical space is obtained through top margin. A top margin of 1.2em is applied to most block-level elements.
• Via padding – Authors can uncomment two rules in the styles sheet to create spacing using padding instead of margin. The advantage of this method is that it prevents two common “issues”:
  • Collapsing margins - Margins will not collapse since elements are not styled with vertical (top/bottom) margins.
  • Loss of top margin when clearing floats – When an element clears a float, it “loses” its top margin, but that gap is preserved if top padding is used instead.

What else?

Rules in this base styles sheet are well commented and values that one would like to change (font-family, font-size, line-height, color, padding, etc.) are placed near the top of the file.

You can download base.css with comments or a minified version. My advice is to use these rules as a starting point to create your own styles sheet. Do not link to an external file to then override property values, instead, add, remove and edit anything you want to end up with a main styles sheet for your own project(s).

My base.css styles sheet is a work in progress. If you play with it, and if you see things that should not belong in there or to the contrary things that should be included, please join the discussion.

¹ The YUI reset styles sheet sets a background-color on html. This styling makes the browser paint the background of body no taller than its content instead of matching the viewport’s height (this is by specs). I believe a future release of YUI reset will include this change.

Editors Note: Forrst is still in beta and as such you will need an account to view the links referenced below. Kyle, the creator of Forrst, has kindly offered 250 Think Vitamin readers an advanced invite. All you have to do is email kyle@forrst.com with subject “I’d love an invite!”.

A few weeks ago Carsonified’s Mike Kus gave five good great reasons why designers should know how to code. It generated quite a discussion. Around the same time I stumbled upon Forrst, a new platform for short-form sharing between designers and developers.

The Founder

It wasn’t a big surprise to learn that Forrst is a creation of Brooklyn-based developer/designer, Kyle Bragger. I first met Kyle when he was a developer for Huffington Post (back in the early days), more recently he’s CTO of Gary Vaynerchuk’s Cork’d.

Anyone who knows Kyle, however, also knows that he produces a seemingly never-ending stream of special projects. Honestly, I’m almost convinced that the internet actually spat him out as a human a few years ago.

The Feedback

While Forrst is early in it’s release, It’s safe to say that there’s some great long-term ideas in the community features that will have a profound impact on how designers and developers collaborate and learn more about supporting and even trading roles in development cycles. In fact, here is a sample post from a new member. Within moments it was peppered with positive and helpful feedback:

What Will You Find in Forrst?

Editors Note: Don’t forget to claim your invite (see top of the post for info)

• Mike Evans (@magic6435), designer/developer shared a REST interface for mongodb
• Thaibut Ninove (@thaibutninove) posted; applescript, allows users to tweet itunes tracks
• Kushal Pisavadia (@kushalp) a London-based standards-lover shared javascript to enable faux html 5 support in IE
• Posted! Relative time stamps in PHP anyone? shared by Billy Fowks, co-founder of rososo.com
• Quirky endeavors are discovered, like the one from Jonno Riekwel (Jonnotie), a designer doing a “psd a day for a year” thing & another from a user of inspiration sharing site yayeveryday!
• Pre-launch landing pages posted for new products like tapmates’ “screenport”
• A few folks share and discuss their workspace preferences
• And, finally, jQuery badassitude gets lots of love & learning

How Forrst Works & Getting an Invite

• Forrst is currently invite-only during beta testing; you can join the Forrst “Search Party” on Twitter. If you weren’t lucky enough to claim one of the 250 invites for Think Vitamin readers Kyle lifts the invite code requirement for 15 minutes every day, and new users can get instant access v. waiting for an invite code via email.
• Features for now include: profiles, follows, community badges and “expert mode,” email notifications, and an activity feed.
• Use the bookmarklet for easy posting as you go about your usual day online

Q&A With Kyle, Forrst Founder

Since Forrst is still in its infancy, I asked Kyle to answer a few more questions in his own words:

What makes Forrst different from other repositories out there for code-sharing?

Well Forrst isn’t quite a repository per se where you might host a project’s code (like Github or Beanstalk), instead it’s a destination where community members can share code snippets they find clever, interesting, or maybe even perplexing, and instantly get feedback about them.

Forrst is designed to help foster discussion and learning between its design and developer users. I do have plans to hook into popular hosted repository sites to a certain extent, so that even if you’re used to sharing bits of code via Gist or Pastie, you’ll still be able to do that when sharing on Forrst, but Forrst is meant to be the social destination for discussing code and design discoveries.

Kyle Bragger, Founder, Forrst

Forrst is newly launched, but already there are vibrant discussions taking place. What’s been the biggest surprise to you watching the Forrst community form?

It’s been simply amazing seeing just how passionate and active the community already is; two guys are already working on a weekly Forrst podcast, there’s an informal “build an app in a week” contest going on (it ends March 3rd).

Everyone is just super willing to provide constructive feedback, both to me as I continue to develop the site, but also to each other. It’s a great feeling — and really encouraging — seeing Forrst grow the way it has so far.

You seem to have become a community manager almost overnight, what’s it like to manage a community of designers and developers?

So far I’ve gotten a ton of positive feedback and constructive criticism; I think it’s hugely beneficial that this product happens to be for designers and developers — it makes distilling bug reports a lot quicker, and everyone’s had really valuable insight into what’s working and what’s not (in many cases, backed up by mockups and code snippets to illustrate their point — I can’t complain about that!).

I think, in general, if you’re building a product, you can’t be afraid of hearing criticism about it; with Forrst it’s especially interesting since the target audience are my designers and developers, who have tons of experience in app development.

The very goal of Forrst is to bring these two groups together to do great things, and the fact that they’re already helping me build a better product is evidence of how awesome this kind of collaboration can be delivered via short-form sharing.

Bringing designers and developers together can be quite a challenge, and I have to say after the recent (but fun) uproar over whether today’s designers should code or not, how do you anticipate helping these two user discover one another? If a designer doesn’t code, will she feel like she can still contribute?

One of the big focuses I’ve got for the next few months is tackling the discovery problem, both for people but also for content. Ideally, you’ll be able to come to Forrst, find some friends who’re already using it, jump in to the conversation, and ultimately be connected with what I’m calling “people you should know” — fellow developers and designers that you’ll find valuable to know and share with. I’m working on similar things for finding great content, too.

I’m a big fan of the friends-of-friends network, so I expect that will play a role. And, definitely, any designer who doesn’t code should be especially excited about participating in Forrst, because they can learn a lot from their developer peers (maybe even get inspired to learn to code!) and vice versa.

How does a social short-form sharing app enhance a professional network of creative people?

Minimal effort! I love that I can use Forrst to quickly share something I find interesting (using the Share on Forrst bookmarklet.)

Short-form sharing is a great way to begin a conversation without a lot of background or setup, and I think it solves a problem for this group who usually have gazillions of tabs open at any moment.

Forrst capitalizes on serendipity, making the most of great discoveries by connecting people to one another around the core technologies that they’re passionate about.

Thanks Kyle, see you over in Forrst!

A few weeks ago, I wrote up a case study around the perplexing case of designing user experiences for lead generation pages. I’m going to cover the results of our test shortly, but in the meantime I wanted to share part of the conversion funnel that has forever changed the way I’m going to design for sign-ups.

Designers do a lot of work engineering the experience of creating compelling sign-up forms for a variety of reasons (joining communities, requesting more information, age-gating verification, etc.). I’d like to take a closer look at how the Thank You page of the conversion flow can be leveraged more effectively for experiences that aren’t necessarily tied to joining a social network.

That said, social networking sites are full of awesome examples where the Thank You jumpstarts the user’s uptake, so if you’re:

• Tumblr, you have your user create her first blog post
• Twitter, you have your user find cool people to follow
• LinkedIn, you connect with your email address book
• Meetup, you have your user join a group

But, let’s say you’re a more traditional (perception = less fun) business like a university, can you do more than guide your user towards more descriptive content about the program or services offered (where bounce rate will be high)? How can you make the most of that transaction? How can you parlay the validation “Thank You” into action that can be both inspiring and measurable?

Thank You messaging is not supposed to feel like the awkward end of a first date “Do I kiss him?” moment.

The user has shared her information with you, triggering a response and follow up campaign. She’s staring at the Thank You page, confirming she submitted her information correctly. This is a powerful moment to turn your Thank You into more than:

• a data verification step
• a reiteration of your brand’s identity and tagline
• a jumping off into content (where the bound rate will be high and not super effective in terms of engagement, relationship development, etc.)

Social marketing channels have helped turn Thank You pages into opportunities for secondary levels of conversion where you can experiment with Facebook Fan Page and/or Twitter acquisition.

This brings me back to the use case at hand, while our lead gen page had a number of design constraints, we found that we had a lot of artistic leeway in creating a Thank You page, so we decided to make the number one goal of the page to excite the user to join our Facebook Fan page.

First, let’s look at the original Thank You page, which did include Facebook & Twitter opportunities:

(Note: I apologize for striking through the brand name, my client is a major university and getting approval to share the brand is a bit of a juggernaut.)

Now, let’s look at the redesign of the Thank You page, which puts primary focus on Facebook Fan acquisition v. promoting both Twitter and Facebook equally:

The design:

• Inspired by the idea of the excitement around an “acceptance letter”
• Focused on the fun of university life and community
• Featured access to current students, faculty, and admissions through Facebook

The results:

• Increased Fan Page uptake from 28 fans per week (a consistent rate for one year) to 300+ fans per week (2+ weeks of ongoing data)
• Increased the quality of interactions on the Fan Page, where we were encouraged to see prospects asking questions that were fielded by students, admissions, and faculty
• Increased interaction with blog content, driving traffic to the parent site and making better use of all editorial collateral

As You Design Conversion Experiences Thank You Messaging is:

• Integral—A necessary part of the conversion experience, it’s no longer just a simple hello/goodbye world
• Instantly Gratifying—If you’re testing a conversion experience the results are ongoing and take time. Adding a secondary conversion exercise like Facebook Fan acquisition is an immediate way to leverage (in real time) effects of your messaging
• Social—Leverages warm fuzzies in innovative ways and gets users connecting with one another
• Sticky—The last thing the user will remember about your brand, and can have the added possibility of taking the conversation even deeper into her personal network

Perhaps, the biggest takeaway from designing a great Thank You experience is that the more you can leverage the Thank You, they more you can get your users to connect with your app and with each other the less money you’ll need to spend on post conversion campaigns, marketing, and more. I’d love to hear your experiences around the “Thank You” in your designs, examples, etc.

Thank you!

*Design by my brilliant partners at jjomedia.com

We’ve all done it, written a post and then spent the following few minutes adding tags and assigning it to multiple categories. It’s all all good for Google juice, right? Well maybe not.

In this 2 minute video from the excellent Google Webmaster Help channel on YouTube Matt Cutts, head of Google’s Webspam team, explains that all we really need is a single category and a well written article.

Watch the video on YouTube

Sitemaps are like Marmite (Ed: yeast extract spread that divides opinion, very popular in the UK). You either love them or hate them. OK maybe you don’t ‘love’ them but they do seem to create an obvious divide between those that use them and those that don’t. I rarely use them but they are part of my day job and that got me wondering, what are the good, the bad and the ugly examples of sitemaps.

As well as looking at sitemaps in relation to those three criteria I will also discuss Google sitemaps, a whole new world for sitemaps.

The Good

Let’s start off on a high note. Sitemaps are a safety net. They can be a last resort for users before they abandon ship and leave your site having not found what they needed and vowing never to come back.

Another advantage in line with the above is that they are often the only full overview of your site (depending on the size and scope of it). All of the pages may be listed in the main navigation but if this is structured using drop-down menus for sub pages then your sitemap remains the only full overview and therefore serves an important purpose.

Much has been written on the SEO (Search Engine Optimisation) advantages to having a sitemap. They are cited as being a good method for getting your site listed on search engines and if you use Google Sitemaps it provides details of errors within your site such as broken links. Of course, there are other SEO methods so the advantages of having a sitemap for this purpose alone are perhaps questionable.

For me, as a Project Manager, sitemaps are useful for scoping projects when providing costs to potential clients and they are valuable when a project kicks off and the project team and client come together to discuss the information architecture of the site. In my experience, they also help some clients better understand the importance of how content is grouped, the hierarchy and the links between content.

Last and by no means least, sitemaps are simply helpful to some and no harm to others who choose not to use them. Let’s not assume everybody is adept at using the web, some people need more help than others and a sitemap can be the helping hand they need.

Before I move on to discuss the bad and the ugly, the sitemap on the Apple website (pictured above) is one of the better examples of one I have seen, many sites could learn a lot from this.

The Bad

No rose is without its thorn and unfortunately many sitemaps and prickly things. Let’s be blunt, most sitemaps are difficult to use. This can be because of the way they look or because of their sheer size. There is some sort of irony in sitemaps being difficult to use isn’t there?

Another solid argument for the slaying of sitemaps is that if a website is designed well with considered thought to navigation and information architecture then the user will have no difficulty in finding what they want and therefore a sitemap isn’t necessary.

This raises the question of at what point will user’s look at a sitemap? I already mentioned that they can be a last resort safety net, perhaps when there is no search function on the site but that again is linked to the design element. Include a search function and not a sitemap. Cover all bases perhaps and have both?

Depending on the site in question, if your content/structure is changing regularly then your sitemap will need to be amended in line with this. This can be a time suck but if ignored it will mean your sitemap is inaccurate so you might as well not have one anyway.

The sitemap for the Cardiff Council website is so big that it becomes impossible to use. It is a rather huge list that uses dots to represent the hierarchy. It would benefit enormously from having the sections divided up like the Apple example and thus making it easier to find what you are looking for.

The Ugly

Finally, let’s look at one ugly sitemap that suffers at the same hands of many others, it is too big to be both pretty and usable.

The Google way

And so to Google sitemaps. They differ from the standard visual sitemaps like the ones discussed above. Google sitemaps is a protocol that is an XML based system which helps Google crawl your site. It is seen as being one of the best ways to get a search engine to learn about your entire site, though it is by no means a guarantee of being indexed.

A lot of CMS’s have plugins and there are numerous code libraries to generate these. If you are savvy with XML you could use this approach to not only keep Google happy but to also generate a HTML version.

Over to you

What do you think? Are sitemaps good, bad or ugly? I’m sure there are many more pros and cons to this topic so please share them in the comments below.

If you use Twitter avatars in your web site or app then you need to check  out tweetimag.es. It’s a great free service courtesy of Joe Stump that allows you to reference any Twitter users avatar with a uniform URL.

Why is this important? If you have ever viewed the URL of your own avatar you will notice that it’s a direct link to a file hosted on Amazon S3 that includes the original file name. Here’s mine by way of example:

http://a1.twimg.com/profile_images/45645532/lime_half_bigger.jpg

If I change my avatar to a new file a brand new URL for the image will be created. Any reference in your app to the original avatar (most likely accessed via the API) will now result in a broken image. Of course you can code around this but you shouldn’t have to.

Using tweetimag.es is super simple. All you have to do to reference a users avatar in your application is use the following URL pattern:

<img src="http://img.tweetimag.es/i/{{username}}_{{size}}" alt="" />

The service gives you access to four sizes of avatar:

• m (24×24)
• n (48×48)
• b (73×73)
• o (original size, varies)

In order to grab my own avatar image 48 x 48 pixels I would do the following:

<img src="http://img.tweetimag.es/i/keirwhitaker_n" alt="keirwhitaker" />

We used this approach in our new Future of Web Design site and it works really well. Go check it out.

]]> http://carsonified.com/blog/design/super-simple-twitter-avatars/feed/ 6 http://carsonified.com/blog/design/cookie-cutter-web-sites/ http://carsonified.com/blog/design/cookie-cutter-web-sites/#comments Wed, 10 Feb 2010 09:37:28 +0000 kat Neville http://carsonified.com/?p=4464 kat Neville
The other day, someone lamented, “I can’t tell the difference from this site and the hundred of others I’ve seen. These days, more and more websites look the same.” We’re all learning better practices in web design, and that’s a good thing. But designing a website isn’t a simple recipe, and while it’s important to [...]]]>

The other day, someone lamented,

“I can’t tell the difference from this site and the hundred of others I’ve seen. These days, more and more websites look the same.”

We’re all learning better practices in web design, and that’s a good thing. But designing a website isn’t a simple recipe, and while it’s important to make a website useful, they don’t have to all look the same.

Things are placed where they are because they make sense, and the user has expectations based on using other websites. That’s not a bad thing, but in order to create memorable websites, we need to look at the actual content and design consciously.

But it’s not just WHERE things are, it’s also WHAT they look like: Web 2.0 elements such as subtle drop shadows and gradients are rampant. Sure, the web is looking much nicer than it did a few years ago, but at the same time, websites have increasingly following the same patterns.

So, this is a mini challenge to designers out there (including me!) to take a look at their designs and make sure we get them to reflect the personality of the person, company or product.

The typical website

In order to determine which conventions we will challenge, we need a starting point. Let’s dissect a standard web 2.0 website and go through some ways that we can make our websites a little bit more unique.

It’s got the logo in the top left corner, navigation in the top right, a bit of generic text, and a boring footer. Steve Stevenson’s site isn’t bad, but it lacks originality, personality, theme or anything that would make him stand out as a great designer.

Let’s look at some websites that do things a little bit more uniquely, to get inspiration to bring our websites to the next level!

The typical organization

Why do you have to put your logo in the top left hand corner? Who says navigation has to go across the top and to the right? For a skilled designer, you can organise your website against convention and still make it easy to use and navigate.

HTML5 is proposing navigation and footer tags, which is good in some ways: it will make searching through your code easier to find things like company name, navigation and more. But it is a bit prescriptive in describing where these elements should sit. Break conventions at your own risk!

Logo goes in the top left corner

The top left corner is the conventional location of logos, and it works: it’s the first thing people will see. But you don’t have to put it there. With careful planning, you can put your logo elsewhere. Here’s a few people that have moved their logos successfully.

Christophe Herbinet dares to put his logo in the bottom right corner. Scroll through his portfolio. Its solidity there in the bar is quite strong (It also reminds me of print advertising, where the established brands put their logos in that corner because of the way people read: left to right, top to bottom).

The Silver Empire has a centered logo, with a highly structured navigation embracing it. What I like best about this approach is, if you go to their portfolio, the designer there has used the centered logos on a few other sites. It is obviously a personal preference for this designer, and being able to see a distinctive style for a designer is great. A centered logo has a different balance than a left aligned logo.

Made By Elephant’s logo is right aligned. In fact the entire layout is anchored onto the right. Right-aligned logos also work well with lots of white space.

Navigation is text, along the top, with hovers

Viewers use your navigation to move through your site. A boring navigation is a real shame. Sure, a simple style can sometimes be the most effective, but think carefully whether you are keeping it simple because you’re too lazy to push it to the next level, or if it is truly the best solution. Its placement and style can tie your whole website together.

The images on Eyebridge’s website are vaguely related to their contents, but what stands out is their seamless integration into the theme. They’re on nails, and they rock back and forth when you hover. The light at the end turns on when you hover on it.

This elegant example on Dan Joe Design’s site has an unusual layout, but it is still done elegantly, so that navigating is easy. The navigation is on the right, but it doesn’t seem unusual, and on the individual pages, he reinforces the selected navigation at the top(I also love his t-shirts!).

The navigation on Juan Diego Velasco’s site is on the left, and vertical, like a tab. This navigation is interesting because it’s not actually required, as it’s a one page website. What it does is offer a quick reference for those who are looking for something fast (it takes you down to the footer, which is also very well done!).

This is a brilliant example of a designer who has worked with a copywriter to make a distinctive navigation. The logo and navigation are all encorporated into the layout, and emphasized by the copy.

Red Velvet Art’s website is a great example of an illustrated navigation that matches its website very well. I think they could have done more to the images on hover though (the camera changes a bit, but that’s it).

The Mission Bicycle site’s navigation is bold, simple and beautiful.

Square factor’s one page site using its navigation to scroll down, but I love how it shows (using down arrows) how far down you’re going. This site is also beautifully illustrated as you scroll down, and has a very nice footer.

Flook is an iphone app about finding interesting places to go in your community. Their navigation reflects their whole brand: it’s fun and it’s about community.

Buttons should be bevelled and shiny

Yes, it’s important that buttons look clickable and, sure, a slightly 3-d button does the trick. Unfortunately, it’s easy to add a bit of gradient, drop shadow and bevel to a rounded cornered rectangle. But let’s face it: every other website has the same button. There’s a real opportunity here to make your website better, by creating distinctive (but still clickable!) buttons.

On obox’s blog, we are not freelancers, they’ve done a really good job connecting html objects using hand drawn items. Here they’ve made a button that not only matches their website’s style, but also looks like a button.

Here, on Yorkdale’s back to school site, the hover
scribbles in, like a school book.

Subtle style change on my nite life’s holding page keeps the arrow looking like a button, but is still unique and stylish.

Websites should be 960px wide

This width has become the standard recently, and there’s some great tools for setting up your grid at this width. Why don’t we go narrower? A little bit wider?

Only 2 Designers chose a width of 250px for their content, with the menu and extras peaking out of the sides. They’ve also decided to go without a traditional footer. The overall effect is unique and distinctive.

Vertical scrolling only, please!

Almost every website, when they have too much content for one page, has a vertical scroll bar. People aren’t used to scrolling any other way. Sometimes though, you can create a much more interesting experience by moving around the page in different ways.

Alex Fluera’s photography portfolio is a typical use of a horizontal layout. Many photography websites look very elegant scrolling in this way.

The box doodle’s website keeps their main message static and allows you to scroll through the various entries. The way that they are positioned encourage you to scroll. Unfortunately the down arrow doesn’t let you scroll across.

Synthetic’s website defies multiple standards: its logo is at the bottom and it’s got horizontal scrolling. But, somehow this all ties in to make it fun to go through their work. Each piece has some random black and white clipart item with it, and the constant rainbow at the bottom encourages you to scroll. They’ve kept the menu static, though, so you don’t get lost.

Tyler’s site doesn’t have a traditional navigation. There’s no scroll bars. What he does well is makes moving to the next screen an experience. It’s fun, as the shapes melt into one another.

New Orleans Creative Community is another website that’s fun to use, but not too hard to navigate around, even though there are no scroll bars. While they have a drop down menu to navigate to different sections, the good times is dragging around, exploring, and reading all the random things they’ve put in.

Wall swaps is a cork board. It doesn’t have any scrolls; you’re going to have to explore with the little boxes at the bottom or you hold down ‘ctrl’ and slide around with your mouse. Brilliant!

Details with personality

It’s hard to write copy that delights. It’s hard to add details that are fun to use. I’ve seen so many websites with the same general text (mine too!), which offer nothing unique or interesting. But here’s your opportunity to reflect your personality (or the product’s, or the company’s) in the website. You started this website because you found something interesting, so why shouldn’t the design reflect that passion?  Make sure every viewer knows about that passion: take care with the copy, add something unique, and if you can think of something appropriate, make it delightful or entertaining.

Denise Chandler asks us if Phil sent us. He didn’t, but that’s okay. She’s got a lot of common webby items in there, but it’s got personality. Also check out her Team Fannypack. You would never accuse Denise of forgetting to add personality to her sites!

Jack Cheng has this great little graphic in the footer of his website. He’s prepared links to other items he works on, but has arranged them by length of attention required. Of course, twitter is at the far end.

Tinder is kinda fun for a landing page. You can change the colours, which I really like. They’re teasing us, just giving us the definition of their noun.

Hutch house doesn’t have the nicest typography, but it’s got a great graphic, and being able to change the theme is brilliant! They’ve also tied in the copy to match the various backgrounds.

Dustin Curtis has a different layout for every blog post he makes. What I like is this morbid timeline of his life, with his accomplishments so far, and potential death at the end.

Themes

Many well-loved websites have a theme, whereas the average web 2.0 website seems comparatively shallow. Just like someone who dresses like a punk but without the social/political context and knowledge, a website without a back story will often feel like a surface was just slapped on.

When a website has a solid theme, each element is carefully designed to match, and the overall experience is seamless. Here are some examples of websites who have implemented a fantastic theme.

Simon Collison’s website is both striking and a little bit weird. His animal sketches don’t necessarily relate to the sections they represent, and yet it works, because it’s consistent, and really seems to reflect his idiosyncratic personality.

Dollar dreadful is a collection of old stories. The site looks as if it’s an old newspaper advertising new books available. The hover effect on the available books changes to a large eye so you can download a preview pdf.

Nineteen 47 is all about sports clubs. They’ve thematically designed the whole site with sports memorabilia. The effect is nostalgic and comfortable.

While I think XHTML CSS Expert has done their theme up properly, making a ‘tailor-made’ work with their menu and examples (although their name lets it down a bit…it sounds like a generic ).

Twitter’s conference, Chirp is beautifully designed, and its style and theme is well executed throughout the entire site. I love that the night-time event (Hack Day) changes the background to night time. You can also tell who the web designer is by the style.

And now you…

The website examples given have taken the time to think about the reasons for doing things differently. It’s easy to create a traditional website for yourself, but I want to challenge you to think about what makes you different from other people, and how you can reflect that in your work. While there’s some ideas here, I encourage you to create a style for yourself, to create delight for those viewing your website that is uniquely you.

• Do you have a theme?
• Does it have a personality, or could it be any website out there?
• How can you make every component work cohesively?
• Is it easy to navigate?
• Can you reorganize things (so they still make sense)?
• Is it delightful, fun or interesting?
• And finally… Are you just copying, or are you creating?

We are delighted to announce that Future of Web Design will be returning to London for the 4th year running. Taking place from May 17th – 19th 2010 in the heart of London it will be packed full of great talks, workshops and networking opportunities.

Grab the early bird discounts

There are a number of early-bird offers available including £195 off a two day conference pass, they are limited in number so grab them whilst they’re hot.

Amazing speakers

Here’s just a few of the great speakers we have lined up for this year. Full details of their sessions are available on the new site http://futureofwebdesign.com.

• Dan Cederholm – How to Get Started with CSS3
• Simon Collison – What will Web Design Look Like in Two Years?
• Molly Holzschlag – Progressive CSS3 Design
• Dan Rubin – Usability testing, interface design, prototyping and rapid iteration
• Relly Annett-Baker – Words and Pictures: Copy and the design process
• Paul Boag – How to Run a Successful Web Design Business
• Sarah Parmenter – iPhone interface design
• Joshua Davis – HYPE framework
• Elliot Jay Stocks – Successful Through Self-Promotion
• Brendan Dawes – How To Be More Creative

New venues, new format and longer sessions

• New conference venue – This year we move to The Brewery in the hear of the City
• New workshop venue – The beautiful Wallace Space will play host to the workshops
• New 3 day format – 2 days of talks and 1 day of in-depth workshops
• 2 tracks – Each day will feature two tracks giving you over 30 sessions to pick from
• Refreshments – Complimentary coffee, tea, juices and lunch for every attendee
• In depth sessions – Longer 40 minute sessions allowing speakers to go into detail on their specialty

Go and check out our new web site http://futureofwebdesign.com. Let us know what you think.

Donating money to a charity should be as quick and easy online as it is to stuff a few coins in a collection pot on the high street. It should also be apparent what the money will be used for.

With these two things in mind, it is surprising how often charities miss the mark when it comes to their online donation screens. Fiddly pull-downs, peculiar microcopy, trillions of steps, and minimal transparency.

Here are some of our step-by-step notes and drafts from a concept exercise on behalf of a well-known charity. The goal was to create a screen that encourages more site visitors to give, and give larger amounts.

We don’t know if these ideas will ultimately be used, but they illustrate ways of evolving the user experience in a way that should increase the amount of money collected.

The starting point

(Disclaimer: we combined two screens in to one to have a truly poor starting point for the exercise.)

The centre of the donations page has the words “Charge me” followed by one drop-down menu with well over fifty options starting at $2.00 increasing by one dollar up to $30 and then in larger increments up to the $1000 mark. The second menu has only one option: zero cents.

Round 1

First of all we remove the second menu. It offers literally no value and, worse, has a negative effect on the overall impression of the charity at the point of transaction.

And it is a transaction, even if some people might object to using that word in the charitable context. I believe calling something by its real name makes it easier to resolve any issues that surround it.

Also changed the copy from “Charge me” to “I am donating”.

Round 2

Online donations come in at an average of $17. Not bad but comparatively not good enough. I am certain the very long drop-down menu is part of the problem. With over 50 options it takes a lot of scrolling to get anywhere.

I cut the donation options from 50 to just seven. This offers a good range, and makes sure all the options are always visible on screen.

The amounts represent those the charity know, based on both offline and online experience, are likely to make people whip out their credit cards. The new amounts are $20, $30, $40, $50, $100, $150, and $200.

This intentionally puts the minimum donation amount over the $17 average. It is a slightly risky move but with large potential upside.

I also did away with the drop-down menu and replaced it with a clear display of all the amounts plus radio buttons. Clear and simple.

Round 3

Until now focus has been on tweaking what is already there. It is time to make a big change.

A problem with donating is that even when we are giving a relatively small amount, say $10 or $20, the money suddenly feels like $100 or $200 and we might hesitate to give it up.

To work around this I remove the seven donation amounts, and replace them with a large bold field with “$20″ in it. This establishes the giving of something tangible like a twenty-dollar note as the normal, logical thing to do; “Of course I should give a twenty, anything less would be silly”.

Before I visualize the effect of the donation I put a nice big button with the copy “+20 I can help more” next to the amount field. Each click raises the amount to be donated by 20 dollars. It shamelessly (for a good cause) plays on pride and generosity.

Under the “I can afford…” button I add a text link option: “I can’t give more than $10″. This lowers the amount in the field and displays the message “Giving, not the amount, is what matters.” Making it possible for people to give, even if it is a bit less, makes perfect sense.

Round 4

Another challenge with charity sites is that one rarely gets a really good idea of how the money will be used. Food for poor people in my city, or schoolbooks for kids in a developing nation, or tools for farmers, sound good but they are still quite abstract.

In this round we fix this problem by visualizing the result of the donation.

To the right of the donation amount I add a headline: “30 families in this area need your help”. Underneath it 30 family icons (with different numbers of parents and kids) represent the families.

The idea is that for each 20 dollars one of the icons would be highlighted, i.e. your money benefits these people.

Still I didn’t feel this was clear enough. So for each icon that lit up, I added a call-out listing what a family would receive for the money. For example a bus pass, seven breakfasts and a weeks worth of lunch boxes to take to school.

Much better. Plus, imagine if you are the person donating money and suddenly changed your mind… It’ll be a lot harder to do when you have to picture a family missing out on breakfast and lunch for a week.

Conclusion

The goal with the exercise was to create a screen that encouraged more visitors to give, and give larger amounts. At the end of it we had two alternative solutions. The first one (round 1-2 above) used small improvements to create a better experience.

The other completely re-imagined how online donations look and work (round 3-4).

Time will tell if these ideas ever get used, but at the very least they illustrate ways of evolving the user experience in a way that should increase the amount of money the charity collects.

To learn more about designing for charities, including the importance of having a funding goal, stating a clear mission, offering other ways to help and so on, please see “8 tips to design a charity website” at the Webdesigner Depot.