The 10 Commandments of Web Design

Many of the big reveals at the recent Adobe MAX Creative Conference centered on Adobe’s increased focus on the Creative Cloud and the sneaks of still-in-the-lab technologies, but the Luminary Sessions gave creatives opportunities to learn a thing or two about their craft. Case in point: Jeffrey Zeldman‘s The Ten Commandments of Web Design. In this humorous, no-bullshit talk, Zeldman showed examples of what every creative needs to know when designing for the web. Here’s what you need to know:

1. Thou Shalt Entertain

When creating a website for a client, it is easy to overlook humor. Playful designs can often become coding nightmares that creatives would rather avoid. The good news is that Zeldman says web-based entertainment does not have to be complex (or even brilliant). For example, Canada’s New Democratic Party website turned a technical error into an opportunity to promote their message. When a broken link redirected web surfers to a 404 Error page, they were met with the following message: “Ottawa’s broken. And so is this link. We’re working to fix both.” The result is funny, pointed and makes visitors feel like they are interacting with a personality instead of a computer.

2. Test Everything (Even Assumptions)

Google the words “SEO tips” and the search engine returns with more than 43 million hits in .37 seconds. Since it is unlikely that all those pages are full of carefully curated information on how to get more people to your page, it’s understandable why there is so much misinformation about what works and what doesn’t. In addition to getting potentially erroneous information online, people also tend to assume that people exhibit the same habits as themselves on the interwebs. One look at your mom trying to figure out how comments sections work or how to post an article to Facebook, and this theory quickly falls apart. As Zeldman is quick to point out, this is why we must test different web elements to make sure they are intuitive for the majority of the people who visit your site. His example involved changing the cute icons that show people how to post an article on social media to linked words that tell them exactly what each does.

Screen shot 2013-05-14 at 1.10.25 PM

 

 

 

 

 

 

3. Thou Shalt Iterate

Consider the following quote by Milton Glaser: “I move things around until they look right.” When designing for the web, this method still should ring true. Repeatedly moving things around until they look right is the best way to find what works for your audience. When Zeldman realized that social media “shares” were down on the A List Apart website (which he publishes), he decided to move the “share this” section around until it worked. As it turns out, the section worked best at the top of the page instead of at the bottom where it is traditionally located. In doing this, Zeldman learned something interesting: People tweet articles they haven’t read. While he isn’t sure if this phenomenon is the result of wanting to save an article for later or simply because people want to appear as if they are reading article (or another reason entirely), moving the section was a great way to engage visitors in a way that makes sense for the way they read and interact online. The social media boost probably didn’t hurt A List Apart’s web stats either.

4. Thou Shalt Ship

As Zeldman puts it, “The enemy of good is great. The enemy of great is shipping.” What he means is that getting your website out the door can be the biggest challenge. Sure, everyone wants to build the perfect website with all the most beautiful graphics and ideal functionality, but at some point, it is more important to get your project on the market. Your best bet is to ship and work out the minor kinks once visitors have had a chance to interact with your design. After all, a delayed ship date is just one way for the competition to put you out of business.

Zeldman gave the example of his associate who has doubled his rates three times hoping to force his client to ship. The last time the associate told his client he was doubling his rates, he was met with some minor push back: Why was it getting it so expensive? His response? Something along the lines of: “Because I have doubled my rates three times trying to get you to ship. I would recommend that you reject my new rates and ship.” Instead, the company is continuing to employ him. In another example, Zeldman worked as a creative director for a company that can best be described as wildly negligent and unorganized (someone lost a finger and also fell through a hole in the floor after returning from the hospital for the whole finger thing—you can’t make this stuff up). In this situation, the company also passed its launch deadline and refused to ship. One day the boss came by and told Zeldman to increase the number of pixels on a certain project. It was then that Zeldman decide, “if you can’t delegate on the pixel level, you’ll never ship.”

5. Engage the Community

Keep the bonds between you and your customer base sacred. The lesson here is that you need to connect with your customers where they are and not where you think they are or where you think they should be. When Zeldman noticed a drop in site comments, he investigated the issue only to find that people had taken to social media to comment on the content. Whereas people of yesterday’s blogging era would comment on the post itself, the tech savvy of today would rather post the article to Facebook or Twitter and use those forums to discuss, debate or dissect it. Once the mystery was solved, Zeldman sought to reclaim comments on his site by offering visitors the option to embed their comments on the A List Apart site to other social media sites as well.

6. Love Thy Use as Thyself

This commandment is essentially the first five bundled together. Zeldman’s main point throughout the discussion was simple: Meet your clients/visitors/audience where they are. This is where everything you iterate and change comes together to create an awesome user experience for those who visit your site.

7. Remember the Content and Keep it Sacred

Repeat after me: Content is king. While this little mantra has always held true in the editorial world, the web is a whole different animal. Zeldman insists content should still be a top priority. “Create the content and design around it,” he says. “It comes down to getting the right content to the right user at the right time.”

8. Thou Shalt Make Magic, Not Perfection

As anyone who is hesitant to ship will tell you, striving to make magic in lieu of perfection can be difficult. Zeldman used Instagram as an example of a company that “did a million things wrong but did one thing better than anyone.” While the ill-fated misstep of announcing the company could claim ownership of everyone’s photos and use them for any purpose caused fans to leave in droves, the thing they did right, however, was magic. That magical thing was creating a fast and easy way to upload an image. Because “people don’t like to wait while they’re waiting,” as in when they are checking their phone in a long line at the grocery store, Instagram made its app seem quicker by starting to upload the image before the filter is added. This makes posting a photo a seamless (and nearly instant) process.

9. Thou Shall Prioritize

We’ve all been there: You call a meeting to discuss a project and end up discussing everything but the project. Getting sidetracked, brainstorming ideas that end up not being feasible due to budget or time constraints, etc. are all time wasters that no one has the patience for. The solution? Get better at prioritizing. One of the best sources for learning how to do this at the very first kickoff meeting is Kevin M. Hoffman’s Kick Ass Kickoff Meetings post on A List Apart. Read it. Learn it. Live it.

10. To Thine Known Self Be True

Long ago, there was a website dedicated to helping farmers and ranchers share hay. Those who needed it could find it, and those who had it could sell it. The website was simple but brilliant. “Need hay” and “Have hay” icons directed those who wanted to buy hay and those who wanted to sell hay to the proper resources. Somewhere along the line, however, the USDA Farm Service Agency (FSA) took over the website, combining inquiries concerning hay with its other online services. Now, the website is not only hard to find but looks like this:

Screen shot 2013-05-15 at 8.43.25 AM

 

 

 

 

 

 

 

 

 

 

As Zeldman jokes, “I guess ‘need hay’ and ‘have hay’ was too complicated, so they needed to put ‘add a hay ad’ and ‘remove a hay ad.’ They forgot what they were good at.” Don’t make the same mistake by focusing on what you do well.

“Remember, this is design, not religion,” Zeldman says.

 

Want to learn more about designing for the web? Be sure to check out Mark O’Brien’s The Conversion-Focused Website session at HOW Design Live. Sign up to attend today.

a0c10ec5eabd98f3fbcd7b2e6b79ed0a_6937-HDL-EB-300x250

COMMENT