Scott McCloud describes six elements of design in his visual textbook Understanding Comics.

• Two weeks ago I looked at idea and form, which sit at the core of the creative process.
• One week ago I examined idiom and structure, and what role they play in web design.
• Today we finish the journey by looking at craft and surface.

Craft

The craft is all the accumulated bits of knowledge and technique that let an artist turn their ideas and design decisions into art.  Online this typically means a knowledge of computer code, common browser errors, methods for creating specific visual effects, and various other best practices.  A site that loads quickly, runs without errors, and maintains consistently professional brand messaging throughout has been well crafted.  To pull this off seamlessly, the whole of the web development team plays a part in the crafting process, as each has their own area of specialty.  Part of Marissa’s skill here at MB/I has been to build a team of consummate craftsmen that includes Natalya, Wendy, and Zac.

Surface

The surface of the design is simultaneously its most and least important element.  Most people will decide whether or not they want to stay on a website within a second of landing.  If you don’t look to be professional and up-to-date, you might as well bid your web traffic a bon voyage right now.

It’s also easy to over-invest in the surface.  Ten years ago, everyone who was anyone would have a Flash landing page.  Now they’re out of vogue, and often viewed as just one more click or delay before a visitor can get to the real content.  The new fashion is social media integration, and for the time being you ignore it at your own peril.

However, the surface really is just the outermost layer of a design.  No matter what decisions you make, they will eventually pale in the face of the next new thing.  What’s really important is the strength of the underlying ideas, infrastructure, and craft.

Besides, now that Content Management Systems are in widespread use, it is easy to build a new surface layer to polish up an otherwise sound design.

Other Philosophies of Design

Understanding Comics spoke directly to my personal experiences because of my interest in semiotics (the study of meaningful symbols) and the many years I spent studying the cartoonist’s craft.  However, I am always interested in reading other takes on the design process.  If you have any other design books to recommend, please do so below!

Thank you.

Nowadays information comes at us in a flood. Multiple TV stations run news 24-7, Twitter provides an unending stream of two line summaries of the universe, and no matter what topic interests you, there will never be a dearth of relevant blogs bringing out yet more stats and figures.

Sometimes it would be nice of somebody would just stop and take the time to take all this data that our ever expanding infosphere has made available, and turn it into something understandable.

Worry not: relief is in sight!

Designers and data analysts from around the web have been finding ways to fit this information into familiar visual paradigms so that the rest of us can start to make sense of it all.  What follows are ten of our favorite infographics on social media.

1> The Art of Listening

Social media is something of a catch-all term that can be applied to several different types of sites.  The Art of Listening does a good job of listing the best known social media sites and identifying where they fit within the social media spectrum.

Source: www.pamorama.net

2> Building a Company with Social Media

Even if you can name and identify the different types of social media, it can be difficult to pick out which ones will be most useful to your company or department.  These colorful administrators would be glad to help!

Source: searchengineoptimization.elliance.com

3> Life Cycle of a Blog Post

We especially like to help businesses craft their first branded company blog.  But what happens to those posts once you put them online?  This interactive picture published by WIRED Magazine helps you see how your post gets to readers and other interested parties, and also the routes it takes to get to them.

Source: www.wired.com

4> Donut Marketing

As you develop a more expansive social media presence, you should think about developing your website into the hub that connects all of the pieces in one place.  If you hear Scott or Marissa mention Social Media Integration, this is what’ they’re talking about.

Source: searchengineoptimization.elliance.com

5> People Streams

Donut Marketing showed you how to arrange your online presence, People Streams shows you why.  Each social media network that you join can become an ingress to your website, where you can control the message, the display, and the overall visitor experience.

Source: searchengineoptimization.elliance.com

6> Air Force Web Posting Response Assessment

An important part of maintaining a social media presence is knowing when and how to respond to other people’s posts.  If someone is out there looking for a fight, trying to “correct” them can sometimes be the worst thing you can do for your brand.  When in doubt, you can probably find guidance in this flow chart put out by the U.S. Air Force.

7> Social Network Map

A slightly more tongue in cheek approach to social media can be found in this 2010 “map” inspired by the comic XKCD.  Each “continent” has been sized according to the amount of traffic the corresponding social network receives.

Source: www.flowtown.com

8> Twitter Territory

Twitter makes a fairly big “continent,” doesn’t it?  If you’re curious how it shapes up in the real world, this map shows you the adoption rate by state and highlights which states are above and  below average for the USA.

Source: www.hubspot.com

9> Ages of Social Network Users

Knowing the age of your desired audience can also play an important roll in deciding which social network is right for you.  This chart uses vibrant colors and an unambiguous layout to make that determination easy.

Source: royal.pingdom.com/2010/02/16/study-ages-of-social-network-users/

10> World Map of Social Media Networks

We all know that Facebook is the current king of traffic in the United States, but those who serve a wider client base will want to consider each of their client bases.  This map based on 2007 data shows which network dominates each country.

Source: manyeyes.alphaworks.ibm.com

Have you found another valuable infographic?

Please take the space below to tell us all about it!

Last week I wrote on idea and form.  These two elements of design are often decided internally before you even begin the search for a designer, and they sit at the core of the creative process outlined in Scott McCloud’s visual textbook Understanding Comics.

However, once you bring a developer into the process, they’re going to want to get at the infrastructure of the design, and for this we’ll need to move onto the next two layers.

Idiom

The design’s idiom is like its genre - a set of design standards that help visitors to stylistically distinguish one kind of presence from another.  You have likely encountered several of these idioms of web design without even thinking about it: blogs, news sites, Facebook pages, online stores, interactive brochures, animated showcase environments.  You may already have an idea of what format you want to use, but it does not hurt to ask your web developer which style of web site they think best serves your idea and resources.  Better still, ask them what the different types of websites are.  If your web developer can define common web site variations in an easy to understand manner, it fair to assume that they also understand the capabilities and limitations of each of those idioms.

Structure

Structuring a design involves taking the idea, form and idiom, and connecting them in a compelling manner that fits the needs of your specific project.  It is here where a developer like Marissa Berger really gets the chance to shine.  A developer with an eye for structure will undoubtedly want to get at who is visiting the site, whether or not there is a narrative to help drive their path, what level of access visitors and administrators will have, what information can go live right away (or needs to be held for internal approval first), who should have access to that information, and how it will be displayed.  A site that you can navigate without a second thought has been well structured, and if it draws you along a particular path without your realizing it, you have encountered a masterwork.

Next Week

We come to the final stages of the design process, the craft and surface.

Lindsay Gower of Blue Ribbon Writing has been Marissa’s friend and ally since before I joined the company. She is kind, insightful, and passionate about the English language. It has been a pleasure working beside her on websites and blogs.

Thank you, Lindsay, I hope you enjoy these treasures we gathered for you from around the web.

Save the Words!

“Pick me!”

“Me, me, meeee”

“No, pick me”

These are the cries of disused words in danger of being dropped from the English lexicon. The Oxford English Dictionary has gathered them all into one place so that may make one final plea for circulation. Logophiles (“word lovers” to the rest of us) can get advice on how to spread or adopt the words, and previous owners of the Condensed OED will appreciate the site’s magnifying glass motif.

Bookworm

Bookworm is a fun and addictive word game that tests your vocabulary against the clock. There are rewards for building longer words, but if you let any of your letters sit disused for long enough, you’ll get burned. This game was one of the earlier creations of Popcap, the company that developed the Facebook hit Bejeweled Blitz and the award winning Plants vs. Zombies.

Wordle

As High King Azaz, the Unabridged, (from Norton Juster’s novel The Phantom Tollbooth) would most likely tell you, there is an art to the use of words. Nothing drives that point home more than Wordle, an online program can take any essay, blog, or transcript and turn it into a literal picture of words.

MLA Language Map

It’s easy to forget, but the Modern Language Association does produce more than style guides and topical bibliographies. This interactive map can give you a county-by-county view of language use within the United States.

We hope you enjoy your gifts and wish you many happy returns!

Recently Scott Stiefvater and I were discussing the principles behind the CMS driven model of website design that MB/I favors.  In that conversation he mentioned the three levels of content and presentation (the core application, the modules, and the interface and display).  This reminded me of the six elements of design presented in Scott McCloud’s visual textbook Understanding Comics.

From inception to presentation these layers are: the idea, the form, the idiom, the structure, the craft, and the surface. This week I’d like to look at the two innermost layers, idea and form.

The Idea

The idea sits at the very core of the creative process.  It is the reason why you want something created.  This can be a product you want to sell, a problem you wish to solve, an insight you want to share, or any of a billion other things that demand communication or record.  Spending the time to identify and understand your core idea will help you to stay on target as you are exposed to different choices and options that can help you express and share it.

The Form

In loose terms, the form of a design can be thought of as it’s medium.  Since you are currently reading The Gold Mine, you’re probably considering a business website, but have you thought about how you want that website to be viewed?  Designing a website for a desktop viewing is not the same as designing for a smartphone or an iPad.  Each form has different strengths, limitations, properties, and peculiarities.

There are also complimentary forms that you can use to express different aspects of your idea.  Marissa, Natalya, and Wendy aren’t just good web designers, they also make killer business cards and mailers, Zac is a musician and community organizer, Scott produces videos, and I like to develop and test new games when the time permits.

By the time you start looking for a web developer you should already have given some thought to the form of and idea behind your new design.

Next Week

We’ll look at the idiom and structure, and how to tell if your web developer is on the top of their game.

We recently had the good fortune of welcoming Mike Coughlin of WhiteHat SEO to one of our team meetings.  Mike did a wonderful job of laying out the three main elements of any SEO (Search Engine Optimization) campaign.

1. Research Keywords

At the beginning you research keywords.  A good keyword needs to accurately describe your business.  It also needs to receive search traffic and if you’re going to invest effort in “claiming” a keyword, you need to know that it is possible to displace those websites that appear on the first page of web results.

You can start with just a few keywords, but eventually you will want each page to help you build traffic towards some relevant keyword or key phrase.

2. On-Page SEO (or Proper Page Architecture)

As developers and designers we were, of course, interested in what we could do for our clients on their own pages.  It was sobering to realize that online searches have matured to the point where on-page SEO is no longer sufficient to earn a good placement on a SERP (search engine results page).  However, it is still a necessary step to maintaining what position you have.

Here are a number of things you can look at yourself to see if your site is properly built for SEO

Do your Page Titles work for you?

A good page title will say who you are, include the targeted keyword, and still be relevant to the function of the page.

Do you have Smart URLs (also known as Pretty URLs)?

Go to your web page and look at the address bar of your Web Browser.  If you can read the address and get a rough idea of what sort of page you are on, you have Smart URLs.

The CMS (Content Management Systems) that MB/I uses allow you to customized these Smart URLs so that you can include your primary keyword here as well.

Does each page have a Meta Description?

The Meta Description is what appears after the Page Title in a search result.  It is usually a short paragraph that shows why the link was included on the SERP.  If you do not write your own, Google will use a machine to try and figure out what’s most relevant about your page.

Have you thought about Headings?

Search Engines look at headings as well as titles when trying to figure out the topic of a page.  Your primary heading (marked with <H1> in the code) should include your keyword.

Have you described your Images?

Every time you post a new image online, you have the chance to name it and to provide an alternate description.  These are not only useful in making your site ADA compliant, but they also provide search engines with more information about your content, and introduce the possibility of someone finding your page through a Google Images search.

Have you included your Keyword organically?

It is important to use your keyword (and its typical variations) in your copy.

It is also important to remember that you are writing for real people.

Hitting this balance is difficult to do right off the bat.  This is part of why a good CMS is instrumental in a good SEO campaign.  It allows you to change your content on the fly, adding in content or normalizing vocabulary as you see fit.

We were pleased to realize that we were already ahead of the game, and that our designs and preferred content management systems already make it easy to manage these things.

3. Off-Page SEO (or Link-Building)

After your page has been set up properly, the SEO process continues by looking to other websites and finding ways to get them to link back to you.  Places where you can add in links to your website on your own are good for building up a volume of links.  However, you will also want a number of “quality” links.

Getting a quality link is something like making a sale.  You will want to research prospects and their value in building clientele, build a rapport, pitch your site, and ultimately convince your prospect to close the deal by linking back to your site.

In Conclusion

I would like to thank Mike Coughlin.  It was gracious of him to come to our meeting, and we are looking forward to seeing what WhiteHat and their strategies can do.

We all need a place to start when embarking upon a creative endeavor - and make no mistake about it, a good presentation is a work of creativity.  However, there are some concrete steps we can all take to make sure that the underlying core of our projects are solid.  I hope mine can speak for themselves…

10 – Stick to your Central Message

A presentation is not a survey course.  You cannot cover everything.  Make sure you know what you’re going to talk about and ruthlessly remove all subject matter which deviates from that subject.

9 – Have an Objective

As a professional, you do not have the luxury of speaking just for the sake of speaking.  Decide what you want your audience to do and the results you want from your presentation and use that knowledge to inform what questions you’ll ask and which points you’ll cover.

8 - Break it into Focused Points

Presentations are about drawing audience focus along a path of your design.  By breaking your presentation into smaller pieces you can force yourself to think about what what the audience needs to know each step of the way to get from wherever they start to the objective where you conclude.  Keep your presentation targeted on your points of focus and your audience will follow your arguments with ease.

7 – Know Your Audience

Can you speak to members of your audience before the presentation?  Ask why they are attending and what they are expecting to see.  Think about what sort of problems you can solve for your audience members and mold your points of focus to their concerns.

6 – Medium Matters, so Mind the Details

If you’re going to give a live presentation, make sure your slides cannot tell the story without you.  If someone else is controlling the slide machine, schedule a technical rehearsal with them.  Nothing kills the conversational flow like, “next slide please.”

Conversely, if you’re preparing a website, prepare for people who want to find their own path.  Put information at their fingertips, but present it in such a way that they can quickly returned to your prepared narrative.

5 - Practice for Content, not Phrasing

There you are, the night before a big presentation, running through your speech again and again until you can recite it in your sleep.  Ooops!

A presentation is more than just a recitation.  You want to come across as a human being, impassioned by your topic and knowledgeable about its applications.  So, while practice is important (some would say critical), you can’t just worry about the words.  Try practicing without looking at your cards or slides.  Be willing to change your wording.  Be confident in the knowledge that it’s the content and not the phrasing that people have come to see.

4 – Knock! Knock!

Not everything has to be on topic.  A touch of humor helps ease the tension between presenter and audience.  However, unless you are a stand up comic, a single well chosen gag ought to suffice.  Remember, as with everything else in your presentation, it is important to know your audience.

3 – Give Credit Where Credit is Due

In putting together this list I drew suggestions from Garr Reynolds’ Presentation Zen, Nancy Duarte’s Slide:ology, and Scott Stiefvater’s “Avoid Causing Death by PowerPoint.”

Acknowledging your sources is not only the responsible and ethical thing to do, but it ensures that you provide your audience with additional resources they can use if they want to study the topic further on their own.

2 – Include a Call to Action

It’s not enough for us mention that we are @MBIweb on Twitter, or for you to post a single slide with your telephone number.  You need to tell your audience what you want.  Right now we’re not interested in e-mails or blog comments – instead we want you to join us on Twitter!

Follow us at http://twitter.com/MBIweb and Tweet your favorite point of advice!

1 – Never Give a Presentation You Wouldn’t Want to Sit Through

Before you call a presentation done, you have to check its survivability.  Record a dry run, have someone read it back to you, gauge the faces of your test audience, do something to make sure you aren’t giving a presentation that you yourself would hate if you were on the other side of the podium.

If you can’t make it through your own presentation, it’s time to run back through your guidelines and figure out where you went astray.

Twitter, Facebook, Buzz, LinkedIn, Flikr, Photobucket, Ning, Xanga, WordPress, …. The list of social media platforms goes on and on.  Some overlap with each other, others have no channels of compatibility, and most of the services that would allow you to synchronize the content of multiple services are annoyingly piecemeal.

Enter Ping.fm.

Ping.fm has compiled a list of 40 blogging sites, social networks, online status recorders, social bookmarking services, and photo sharing sites - each and every one of which can be updated individually or in groups from within the Ping.fm interface.

See a service you don’t yet use?  Ping.fm will walk you through the initial steps of creating your account, and will automatically group it with similar social media services so you can go right on posting as you normally would.

So what’s the down side?  Ping will only send information.  This makes it great for articles, press releases, and other announcements that you will want to go far and wide but means that you will still need to log into each individual service if you want to take part in the two way communication that makes web 2.0 what it is.

Have you used ping? Submit a Comment to tell us about it!

Online Ore is an ongoing feature at The Gold Mine featuring tools and resources from around the web and wider world. If you know a site we should prospect please e-mail Aaron Rubman at Marissa Berger Interactive.

Have you ever been looking for that perfect fact that helps you translate a statistic from your presentation into a language your audience understands?  Well this week’s vein of online ore will help you do just that.

For example, 1 in every 8.5 American children under the age of 18 is without health insurance.  The same portion of the California population filed for personal bankruptcy in 2008.

Book of Odds has been online for close to a year offering articles and odds statements on topics from sports and relationships to health and death.  And once you have found a statement of odds you like, you can scan short lists of related odds and other events with similar probabilities.

One warning: Book of Odds doesn’t like dealing with percentages.  If you’re looking for something with a 71% chance of being true, you will need to look for something with a 1 in 1.408 chance of occurring.

What do you use to find fun facts for presentations?

Online Ore is an ongoing feature at The Gold Mine featuring tools and resources from around the web and wider world. If you know a site we should prospect please e-mail Aaron Rubman at Marissa Berger Interactive.

Link building is one of the key elements to Search Engine Optimization.  The more reputable sites you can get to refer people to your site, the better your search engine results will be.  You will usually need a well known and positive reputation in order to garner such links, but there are some small steps you can take on your own to get the ball rolling.

There You Are!

I don’t know about you, but when I first decide where I want to go shopping, one of the first questions I ask myself is, “what’s near me?”  I’d be willing to bet that your potential customers ask themselves the same.  And the internet gives us that information.  I can find nearby businesses through Google Places, Yahoo! Local, Bing Local Listings, CitySearch, Yelp!, or YellowPages.com, but only if they’ve listed themselves.

Make sure you can be found.  List yourself on all six.

It’s Not A Review, It’s Publicity

Widely read review sites like Yelp!, Epinions, ResellerRatings.com, and ConsummerSearch.com are viewed as reputable by the major search engines, and allow you to include a link to your own website once you claim your business profile.

If you have any hang-ups about bad reviews, it’s time to get over them.  According to Google Trends the number of people looking for good reviews outnumber those looking for bad reviews 7 to 2.  Besides, the lines between maps, directories, and review are constantly blurring.  Even the Yellow Pages accompany listings with ratings nowadays.

Unless you intend to close shop, you should be prepared to receive online reviews.  Better by far to take a moment so that would-be reviewers can find you (and your business).

Linked In Is The New Business Card

Social media is replacing the older traditions of business and calling cards.  If you want business contacts to remember your details, make sure you’re on their Social Media of choice.  At the very least that means maintaining Facebook, Twitter, and LinkedIn profiles.  Depending on what industry you‘re in, there may be other relevant social media sites as well.

Now ask yourself, would your business card be complete without an address or telephone number?  Then don’t build a social media profile without a link to your website or e-mail address.

The Future is Calling

Some analysts are already predicting the advent of a “Social Media Killer.”  However, they have no idea what it will look like or when it will appear.  But just as Social Media didn’t kill the business website, neither will the invention to be named later.  Include a link back to your existing website and you will be set for whatever comes.