Must Design

Beats By Dre Web Design Lessons
A friend shared the impressive NEWSJACK Dr. Dre and his Internet markeing team pulled off last week. Beats By Dre (http://www.beatsbydre.com ) has some cool web design tricks to steal too such as:

* Consistent images across channels (the Richard Sherman image rode the crest of the wave created by his "controversial" statements after last Sunday's game).
* HUGE RED BUY NOW Call To Action on the home page.
* Hero moves but does so SLOWLY so it isn't jarring.
* They've programmed their Richard Sherman page so his picture matches to every style, something I bet the site does for all celebrity endorsements (cool and NEW).
* Their social buttons are a little low for my taste, but they are well labeled as the "Beats Army" and every major social net is there and they are robust and fresh on all social nets.
* I like how they handle the colors too via the small swatches.

All in all a great ecommerce site in support of one of the best NEWSJACKS I've seen (see my notes on Dr. Dre's multi-channel attack of the web here:   http://sco.lt/8bJiDJ

Marty Note
Wow, you don't get much more money than Chuck Longanecker's 2012 predictions for web design's almost immediate future. 

Chuck is CEO of Digital Telepathy and boy does he have a copious amount of telepathy based on just how TRUE each of these trends is turning out. Talk about hitting the NAIL directly on its head.

We all need to get into Chuck's head (lol) because understanding how our design tectonic plates are shifting doesn't get any better:

* Lean Design (YES).
* Animation and more sophisticated HTML5 party tricks (YES).
* Less is More (YES).
* Multi-screen, multi-platform (YES!).

Great stuff every web designer and Internet marketer should walk and talk.  

The purpose of this post is not just to present the state of today's web design - it’s more pragmatic. Seven basic principles of a good web design are presented here.

Marty Note
This is a great post about what web design IS and IS NOT. I'm going to include my notes here so they follow the post since the writing, though brilliant, is not as direct as I like. Here are my much more direct interpretations of the 7 Basics of Great Website Design:

1. Website Design Can’t Win, But You Can Sure LOSE Due to It.
We've past the period when shinny websites work. Every website has seconds before a visitor clicks off to find what they are looking for on some other website.

2. Create Website Surfaces For Scanners and Skimmers since Readers will work for what they want.
Key to know not all information is great for "scanning" and "skimming". Tease the click don't drown it is another way to think of this idea. Also, content such as news, Q&A and testimonials have more attention hooks than sharing complex or highly detailed material. If your website depends on sharing complex and highly detailed content tease it with snippets and with graphics firs.

Stay with simple, clean and useable as your guide.

3. Avoid NEW until it is UNDERSTOOD.
You don't have to wait until some new thing is old hat, but avoid using The New simply because it is new. New hurts conversion because it requires explanation and is hard to tease since visitors don't have "made to stick" context. If you must present "new" present with an "old" analogy.

Read Made To Stick by Heath brothers for more.

4. Confused customers do many things, BUYING and CONVERTING and never among them.

5. Hierarchy of information and navigation is LIFE online.
People know there is a YOU or a team behind your design. They want to know what YOU want them to DO and why they should do it with YOU. Sites that make the curator's hand visible via navigation, images and copy win. Those who challenge visitors to figure everything out for them selves lose.

This is NOT to say some mystery can't work in a web designer's favor, but make sure the mystery is immediately solved before posing another one. Daisy chain one mystery on another and visitors get frustrated and leave since benefit doesn't equal the work to realize it.

6. Colors can ruin a website.
Colors have so many overt and covert signals they should be used sparingly and consistently with the brand. If you use RED for a Zen website do so in accents and carefully since red is an ALERT color and so may be inconsistent with the brand.

7. Devil is in the web design details.
In my almost 15 years of experience NOTHING on this list is more true. Once you make a website simple and clean any small dissonance becomes LARGE because it sticks out like the proverbial "sore thumb". Make sure your site is a smooth surface with a clear message.

Didn't ASK for a Web 3.0 site (necessarily) from the design and UX team at Atlantic BT, but they built me one anyway. Here are 5 Web 3.0 features they built into http://www.curecancerstarter.org :

* Cloud Content Management via CDN.

* Control to "Users" and math. 
* Control to "Visitors" & MVP. 
* Highly Responsive. 
* Framework to Unique Backends. 

Cloud Based Content Delivery Network
I used to have to worry about image "weight". Now talented programmers can use the cloud and caching to keep page load snappy even as the traditional "weight" of the page is high. Large images with large file sizes can be stored and cached in ways so they look great and don't slow the page presentation.  

Control To Cancer Centers & Algorithms
The IDEA of CureCancerStarter.org is to create a framework with more and more control available for "users", a term I hate but in this case users=cancer research centers. Even things like Hero image management will be managed by the framework code and an algorithm (when we have hundreds of cancer research campaigns on the website). The key is to design with as small a "designer" footprint as possible passing more and more "control" over via the Content Management System (CMS). 

Control to Visitors and MVPs
Visitors will be cancer patients, their friends and families so we created personas for our main groups of donors. Personas help understand the behaviors of any websites archetypes, something very important with donations. We are lacking a few features such as the ability to donate in someone's name and the ability to create tribes (groups and sub-groups), but the framework ASSUMES these features are coming (i.e. Atlantic BT's team coded a flexible framework capable of moving in any number of directions). We got something UP and LIVE (Ries stresses MVPs in The Lean Startup). 

Highly Responsive
We are working to make the framework SWIPE so IOS devices aren't compatible yet, but the site plays like an accordion (moves to meet the device looking at it be it phone, pad or computer). 

4 Unique Backends We Can't See
Perhaps CureCancerStarter.org's most revolutionary idea is to take the Facebook Framework idea and extend it via Authorize.net to an individual backened for each platform user (cancer center). CureCancerStarter.org pipes donations directly into the Authorize.net account of a cancer center. 

We pass the ball over to the cancer centers and so 100% of donations go to them. This pass does mean we are helpless when UNC has trouble setting up their Authorize.net environment (as they are now), but they will work it out with the bank and then the GENIUS of Mark Foulkrod's idea comes to the front - it is possible to divorce merchandising from payment systems with this methodology. 

I want to add commerce features to Scoop.it, Facebook and GPlus, but haven't been able to figure out a seamless way to do so. Once the Authorize.net environment is established it is AGNOSITIC to where transactions come from. This means ecommerce is simply a matter of a link, some graphics and an individual can accomplish the same thing as PayPal (easily transportable shopping cart). 

Explaining that StoryofCancer.org is the Charge To if you are on my Scoop.it may be needed, but the ability to easily add commerce into any corner means the distance between content and conversion just got shorter. 

KUDOS to the programmers and designres at Atlanticbt.com. They rocked this one!
http://www.atlanticbt.com