Archive for August, 2012

Creativity Illustrated: Collection of Imaginative Vector Posters


  

Vectors are quite the popular format to use for many graphic designers looking to create interesting character illustrations and more. With the versatility that continues to be offered with each generation of illustration programs that are on the market, the growing body of work being produced is not only quite stunning, it is creatively inspiring.

Below we take a look at just a sampling of this format with a showcase of imaginative vector posters that demonstrate the reach of this inspiring artform. With so many talented artists and designers calling this arena home, there are sure to be pieces that have wide appeal. Enjoy!

Creatively Illustrated

petersen automotive museum : aerodynamics poster by strongstuff

poster design by etrix

The Vector Creatures poster by grelin-machin

Welcome to Rapture Poster by v12r

ULTRAVIOLET LA by benestrada

Bang, Bang, You’re Dead by KairNeko

Flight of the Conchords – 2 by OH-Deviant-One

Batman Begins Movie Poster by Onizzuka

SONICA Poster Front by strych9

“fly with U.S.” poster by strongstuff

Snorri – poster by recycledwax

One nation under Candy by grelin-machin

Colour Wheel Poster 2011 by sALuUm

NOBODY’S HERO by benestrada

Aoeb poster by f0xyme

Green Lantern OA travel poster by MikeMahle

J23 poster

“1985:1up” poster by strongstuff

Little Monsters by recycledwax

Sausages frome the depths by grelin-machin

MILLENCOLIN by benestrada

The Hunger Games – Art Deco Vector Concept Poster by LadyBug-17

Velvet Drive by chibighibli

House of Secrets Poster by BrandonRagnar

“murmaider 12.21.12″ poster by strongstuff

Food Fight by recycledwax

The monster of the swamp by grelin-machin

PSYCHOBILLY SHOW POSTER by benestrada

Munny – Change Poster by OH-Deviant-One

‘Coffee and cigarettes’ poster by Hertzen

THE MARIGOLD SANCTION poster by rodolforever

All For Now

This finishes off our collection for now, but as always we are looking to hear from our readers on the posters we shared. If you have anything that you would like to share, be it your two cents, or a link to a favorite of yours, scroll on down to the comment section and share.

(rb)


Separate Mobile Website Vs. Responsive Website // Presidential Smackdown Edition


  

The US presidential race is heading into full swing, which means we’ll soon see the candidates intensely debate the country’s hot-button issues. While the candidates are busy battling it out, the Web design world is entrenched in its own debate about how to address the mobile Web: creating separate mobile websites versus creating responsive websites.

It just so happens that the two US presidential candidates have chosen different mobile strategies for their official websites. In the red corner is Republican candidate Mitt Romney’s dedicated mobile website, and in the blue corner is incumbent Barack Obama’s responsive website.

Mitt Romney and Barack Obama websites

We’re going to see how well their mobile Web experiences stack up. But before we do, we need to ask a few questions.

Why Bother With Mobile?

Why are the candidates attempting to create mobile-optimized Web experiences? Well, the US population is sitting at around 311 million. Of those 311 million people, about half of US adults own a smartphone. On top of that, for a whopping 28% of Americans, a mobile device is their primary way of accessing the Web. So, for a candidate looking to reach potential voters, mobile provides a tremendous opportunity to connect with their constituents.

What’s more is that people are arriving to the mobile Web through more diverse channels than ever before. In addition to direct and referral traffic, candidates are using social networks, email campaigns, SMS campaigns, search and more. Because these activities are increasingly happening on mobile, creating Web experiences optimized for mobile makes even more sense for the candidates.

What Drives to Mobile Web?
These are just a few channels that drive people to the Web on mobile devices.

The candidates see mobile as a big opportunity to turn visitors into voters. We can see the candidates’ incentive, but now we must ask another important “Why� question.

Why Would Anyone Visit A Candidate’s Website?

Who is visiting these candidates’ websites? What are they looking for? Why might they want on a mobile device?

Visitors are generally either looking for information on the candidates or looking to take action.

The Information-Oriented Visitor

The information-oriented user might be looking for basic information about the candidate, such as his biography, background or stance on issues. They might also be interested in regularly updated information such as news, locale-specific blog posts and information like myth busting (where the candidate tries to dispel nasty rumors circulating in the media). The official websites give the candidates a chance to deliver information straight from the horse’s mouth, free from news media bias and inaccuracies that arise from crowd-sourced information.

The Action-Oriented Visitor

The action-oriented user is looking to support the candidate in some way, shape or form. Both websites prominently feature calls to action asking visitors to donate money to the campaign and to sign up for their email newsletter. Action-oriented users might also want to connect with the candidates on social media channels, volunteer their time at an event, make calls on the candidate’s behalf or shop for merchandise.

The candidates have accounted for these use cases in their Web experiences. Let’s look at how they execute on mobile.

Criteria For Judging: Layon’s Theory of Mobile Motivation

The effectiveness of Romney and Obama’s positions on the economy, foreign policy, social issues and other important subjects depends on certain criteria. Likewise, we need to establish a set of criteria to determine the effectiveness of the candidates’ mobile Web experiences.

Mobile Web designer Kristofer Layon has a clever way of looking at the hierarchy of mobile needs. His “theory of mobile motivation� is based on Maslow’s hierarchy of needs, a psychological theory that identifies the various levels of human needs.

Maslow's Hierarchy of Needs
Maslow’s hierarchy of needs.

Kristofer Layon has applied that theory to the needs of mobile Web users, where primary access and navigation are the most essential aspects of an experience, and at the top of the pyramid are HTML5 enhancements (such as offline storage and a boatload of other features).

Layon’s Hierarchy of Mobile Needs
Layon’s hierarchy of mobile needs.

Let’s apply a simplified version of Kristofer’s hierarchy to evaluate how well each candidate’s website holds up.

My simplified version of Layon's Hierarchy of Mobile Needs
My simplified version of Layon’s hierarchy of mobile needs.

Access

First and foremost, users need to be able to access an experience. The most beautiful design in the world will accomplish nothing if people can’t view it. Historically, the mobile Web has been viewed as the Web Lite™, whose users get served only a subset of content and functionality. However, a whopping 28% of US residents use a mobile device as their primary way to access the Web. With more people relying on their mobile devices to access the Web, achieving content parity and giving users access to a full experience regardless of their device or configuration are more important than ever. Let’s see how the presidential candidates’ mobile Web experiences hold up.

Barack Obama

Barack Obama’s “mobile� website has no “full site� link because it shares the same code base as the “desktop� website. Content on a responsive website lives under one roof, which gives the website a better chance of achieving content parity. And while responsive designers can (and do) hide content from small-screen users, responsive design affords less opportunity to fork the content and create disparate experiences, which would deprive certain users of valuable information and features.

Mitt Romney

Mitt Romney’s website uses device detection to route mobile users to a separate dedicated website. Creating this separate experience allows the designers to tailor the mobile Web experience, but a separate design and subdomain also opens the door to some serious problems.

The main problem with Mitt Romney’s mobile website is that only a fraction of the full website’s features are included.

Mitt Romney mobile site features vs desktop site features
Only some of the features from the full website have made it onto the mobile-specific website.

It’s a myth that mobile users don’t want access to all of the information and functionality available to desktop users. The absence of key content on Romney’s mobile website leaves a lot of serious questions unanswered for potential supporters, such as “Who is this guy, anyway?,� “Where does he stand on issues?,� “What’s his plan for the economy?,� “What can he do for my state?� and “Where can I shop?�

Another common problem with separate mobile websites is URL management. Because desktop and mobile content live at separate URLs, device detection is required to route users to the appropriate site. Unfortunately, many websites don’t go deep enough in their URL redirection, so desktop users will get sent to mobile content and vice versa. This becomes apparent when mobile content gets shared by mobile users on social networks and then gets accessed by desktop users:

Romney's mobile site displayed on a desktop
Issues arise when a mobile URL is accessed from a desktop.

As we can see, having Web content all under the same roof and URL definitely makes it easier to give visitors access to the content they’re looking for, regardless of the device they happen to be using.

Interact

Basic access to a website is essential, but what happens once the visitor is on the website? They need to be able to interact with the content and get around the website. Let’s start with one of the most common and important interactions: navigation.

Navigation

Navigation, especially on mobile, should be like a good friend: there when you need it, but considerate enough to give you your space. When navigation takes up a ton of real estate, it gets in the way and becomes that annoying friend who won’t leave you alone. When it’s inaccessible, hidden or just hard to reach, it becomes that friend who’s conveniently absent when you’re looking for help to move to your new apartment.

Barack Obama

obamanav
Obama’s website serves navigation at the top for large screens and then transforms it into a left fly-out menu for screens narrower than 1024 pixels.

Obama’s website has Facebook-esque left fly-out navigation for small screen resolutions. Among popular responsive techniques, this one is relatively complex and opens the door to problems. As Stephanie Rieger points out in her post “A Plea for Progressive Enhancement,� Obama’s navigation fails on a whole load of mobile devices: “And the menu failed. Never even opened. Suddenly, the site was without navigation… at all.�

These situations, regardless of approach, can be avoided using proper progressive-enhancement techniques, but it’s a good example of the challenges that arise when creating adaptive experiences.

Mitt Romney

Mitt Romney Mobile Nav
Romney’s mobile website has a dashboard home page and “Back� and “Home� links for inner pages. The full website has top navigation.

Romney’s relatively simple mobile navigation contrasts starkly with Obama’s navigation. It sits as a dashboard on the home page, and all inner pages simply include a “Back� button and a logo that links back to the home page.

This navigation technique certainly solves the problem of limited real estate and avoids complexity, but it creates other issues. Requiring a full page refresh just to jump to another section of the website isn’t very efficient. A logo as a button doesn’t exactly scream “Click me for navigation!� And the “Back� button does nothing if the visitor arrives at the website on a page other than the home page. It’s also worth noting that mobile browsers already have their own back buttons, so duplicating that functionality in the header could be regarded as wasted space.

Scrolling

Scrolling is an interesting interaction on mobile devices. The “fold� as a set pixel value is a myth, but users still need to be able to access the core content as quickly as possible.

Mitt Romney

Romney’s mobile website has an acceptable page length. Not much chrome or clutter before you get to the core content, and for the most part the user doesn’t have to scroll much to find what they need.

Barack Obama

Obama’s pages contain a massive amount of content, often introducing entirely new sections far down in the flow. The result is extremely long pages that have serious problems.

Romney vs Obama's mobile page length

Scrolling through disparate content types is not a good experience. How do users figure out that other content exists? Finding what they’re looking for becomes a scavenger hunt. While they might be all right with sifting through one or two content types (for example, a blog’s main article and subsequent sidebar), a lot of disparate types makes the content unfindable and the page impractical.

While content parity is essential for mobile users, that doesn’t mean websites have to be one size fits all. Techniques like lazy loading and conditional loading enable Web creators to provide access to full content without having to stuff it all on the page at the same time. And while those techniques can be extremely effective, there’s no substitute for subtracting supplementary content everywhere to focus on core content.

In addition to the annoyance caused by having to scroll through so much content, these massively long pages have another downside: terrible performance.

Perform

Performance has gotten the short end of the stick. Web creators have assumed too much about the user’s context (“Of course, the user has a fast connection!� “Of course, their machine is powerful!�). As a result of these convenient assumptions, the average page now weighs a whopping 1 MB.

One MB might not seem like a big deal until we look at the mobile user’s expectations. 71% of mobile users expect mobile websites to load as fast, if not faster, than desktop websites, and 74% of mobile visitors will abandon a website if it takes more than 5 seconds to load. In other words, you have 5 seconds to get someone’s attention. Make it count.

To evaluate how well the candidates’ websites perform, we’ll use the excellent Blaze.io mobile performance test to capture performance results on real devices.

Mitt Romney

Romney Mobile performance

A typical page on Romney’s mobile website is about 687 KB and, as a result, takes about 8.75 seconds to load. While that’s over the 5-second mark, the pages still weigh less than the average size.

Barack Obama

Obama performance results

A typical page on Obama’s responsive website is a massive 4.2 MB, resulting in a 25-second loading time.

Despite the fact that only the most patient of visitors would wait 25 seconds for a page to load, such a large payload creates real accessibility problems. Some devices (such as my cousin’s company-issued BlackBerry) won’t even render the page because it’s too large.

Real BlackBerry trying to load barackobama.com

While some of this is RIM’s or my cousin’s employer’s doing, it’s a legitimate constraint that we need to be mindful of.

Unfortunately, poor performance is prevalent among the current crop of responsive designs in the wild. Guy Podjarny, chief product architect at Akamai and CTO of Blaze.io, discovered that only 3% of small-screen versions of responsive websites are significantly lighter than their large-screen counterparts. This is all the more reason to focus on performance as a key component of adaptive Web design.

Enhance

We’ve talked about content parity and the importance of providing access to information and functionality regardless of device or configuration. But that doesn’t mean we have to settle on serving a one-size-fits-all experience. Many mobile devices and browsers can do things that desktops cannot. Making the most of these wonderful features will take the mobile experience to the next level.

Mobile Communication

Obama’s designers have implemented one huge enhancement: the ability to make calls on the candidate’s behalf directly from a phone. We tend to forget that mobile phones are, at root, voice-based communication devices and that mobile browsers can initiate a call when the user clicks a tel link. By exploiting this enhancement, Obama is able to mobilize his mobile users into action, which could have a big impact on the campaign.

Obama Call functionality
Obama’s call functionality enables users to make calls on the candidate’s behalf, right from their phones.

Besides enabling phone calls to be initiated from the browser, there are many other opportunities for mobile enhancement. Here are just a few ways that both websites could enhance the experience and make the most of the mobile Web.

Simple Form Enhancements

The great thing about form enhancements is that they require barely any effort. One enhancement for many mobile browsers is to specify an HTML5 input type to pull up the appropriate virtual keyboard for the user. While this enhancement isn’t particularly mind-blowing, anything that allows the user to complete their task more quickly certainly helps and could lead to more conversions.

Simple form enhancements can make an experience just a bit less tedious
Setting these forms to input type=number would pull up the appropriate virtual keyboard, thus saving the user an extra step.

Geolocation

Detecting location is an extremely powerful way to provide users with contextually relevant information. Imagine dynamically displaying blog posts, news and upcoming events relevant to the user’s location. Obama’s website smartly allows users to choose their state; perhaps they could take it further and add geolocation as a way to identify it. Geolocation can also save steps when filling out forms, and it creates opportunities for innovative new features.

Touch Events

The beauty of touchscreens is that they give users a way to interact directly with content and can add a layer of fun to the experience. These websites could leverage touch events to allow users to swipe through photos in a gallery or to thumb through a quick overview of the candidates’ stances on important issues.

Many More

This is just a small sampling of enhancements. Support for a ton of features can be detected, and a ton of use cases emerge from the plethora of devices that access the Web. Ask questions. “Can I offer features that are useful to users on the go?� “How might I use offline storage to improve the experience?� “How can I take advantage of touch events?� Lay a solid foundation, and look for opportunities to enhance.

So, Who Wins?

If there’s one lesson to learn from analyzing these websites and techniques, it’s that this stuff is genuinely hard. A lot goes into making a great mobile Web experience, and I’m personally thrilled that the candidates have taken the important first steps toward making their websites mobile-friendly. Viewing the mobile web as a wonderful journey and not as a destination is absolutely essential. As we step into the deep end of multi-device Web design, we must strive to continually improve our websites and services in order to better serve our users — wherever they may be.

While the design of a candidate’s website might not determine the outcome of the presidential election, it will certainly influence how the world perceives the candidate. And for a Web-savvy voter like myself, a website’s design might just sway my vote. I know who I’m voting for in November!

(al)


© Brad Frost for Smashing Magazine, 2012.


High Quality Responsive and Retina Display Ready WordPress Themes


  

Mobile web traffic is growing at a rapid rate. According to The Next Web, mobile web traffic has risen as much as 35% since July 2011. What will that mean for 2013 and 2014? We’re sure you can guess. The web is propelling forward at warp speed, such that the weight sitting upon the shoulders of web designers and developers has never been greater. Mobile web consumers expect to view web content on the device of their choosing without straining their eyes — and rightfully so.

Whether you’re an online store, real estate firm, antique shop, restaurant or university it’s time to start thinking about how you can revamp your site to be as user-friendly as possible. We’ll stress the word “revamp” as it’s not about jamming your current content structure into a responsive design but rather thinking outside the box to determine how you can best serve information to consumers in a way that makes sense in a responsive environment. That may mean focus groups, market research and a lot of trial and error, but in the end it will be worth it.

Also keep in mind that smartphones have become quite accessible to those with hearing and/or vision impairments, and guess what? They’re your web consumers, too. Wouldn’t it be nice to give them a site they could easily navigate without having to zoom-in over and over, possibly getting lost in the process?

As if that wasn’t enough to think about, there’s one more thing to keep in mind — the Retina display. Just as HD televisions became the norm over time, the Retina display is following in its footsteps. The better of an image we see on our desktops and laptops the better of an image we’ll want to see on our smartphones. Ask yourself this: What happens when the current Retina display on an iOS device gets two times better? Five times better? Your slightly-blurred image will really be in rough shape then.

So let’s get to it! After viewing hundreds of responsive and Retina display ready WordPress themes on our MacBook Pro’s, iPad’s and iPhone’s we’ve compiled a list of 50 for you to check out. The majority are business and portfolio themes with a few e-commerce mixed in, but with a little tweaking these could suit just about any industry or profession.

Responsive Retina Display Ready WordPress Themes

Appster ($40) | Business and Portfolio Theme by Prothemeus

Appster

Info | Demo

Camp ($55) | eCommerce Theme by Prothemeus

Camp

Info | Demo

Entity ($40) | Portfolio Theme by SwiftPSD

Entity

Info | Demo

Fresco ($45) | Portfolio Theme by Contempo

Fresco

Info | Demo

Kingdom ($40) | Portfolio Theme by SwiftPSD

Kingdom

Info | Demo

Lattice ($45) | Portfolio Theme by Contempo

Lattice

Info | Demo

OrganicWeb ($40) | Environmental Theme by Colibri Interactive

OrganicWeb

Info | Demo

Outreach ($40) | Charity/Nonprofit Theme by Design Crumbs

Outreach

Info | Demo

SneakPeek ($40) | Portfolio Theme by Add Two More

SneakPeek

Info | Demo

Stacker ($30) | Portfolio Theme by xRicrdx

Stacker

Info | Demo

Responsive WordPress Themes

Agenci ($40) | Creative Agency Theme by Purty Pixels

Agenci

Info | Demo

AREA53 ($50) | Creative Agency/Portfolio Theme by AREA53

AREA53

Info | Demo

Aware ($45) | Portfolio Theme by Andre Gagnon

Aware

Info | Demo

Bruan ($40) | Creative Agency/Portfolio Theme by Jonathan Atkinson

Bruan

Info | Demo

CleanR ($35) | Creative Agency Theme by Zen Themes

CleanR

Info | Demo

Contrast ($40) | Creative Agency Theme by First Base Design

Contrast

Info | Demo

Cotton Candy ($40)| Portfolio Theme by Pixelous

Cotton-Candy

Info | Demo

Cubano ($40) | Portfolio Theme by MushinDesign

Cubano

Info | Demo

Desat ($40) | Portfolio Theme by Themnific

Desat

Info | Demo

Float ($35) | Blog Theme by myTheme

Float

Info | Demo

Fluid ($59) | Creative Agency/Portfolio Theme by Theme Fit

Fluid

Info | Demo

Gigawatt eCommerce ($55) | eCommerce Theme by Obox Themes

Gigawatt eCommerce

Info | Demo

Hero ($49) | Portfolio Theme by Theme Trust

Hero

Info | Demo

Jigsaw ($45) | Creative Agency Theme by Adaptive Themes

Jigsaw

Info | Demo

Magic Space ($40) | Business Theme by HawkTheme

Magic Space

Info | Demo

Kinetico ($55) | eCommerce Theme by XThemes

Kinetico

Info | Demo

Knead ($35) | Portfolio Theme by Obox Themes

Knead

Info | Demo

KnowHow ($45) | Knowledge Base/Wiki Theme by Chris Mooney

KnowHow

Info | Demo

Mindful ($49) | Creative Agency Theme by Theme Trust

Mindful

Info | Demo

Plug ($40)| Creative Agency/Business Theme by jdsans

Plug

Info | Demo

Radius | Creative Agency Theme by Okay Themes

Radius

Info | Demo

Reach ($40) | Creative Agency/Portfolio Theme by EugeneO

Reach

Info | Demo

Reason ($45) | Portfolio Theme by MDNW

Reason

Info | Demo

Responser ($45) | Portfolio Theme by 70kilo

Responser

Info | Demo

Reveal ($49) | Portfolio Theme by Theme Trust

Reveal

Info | Demo

Rime ($50)| Creative Agency/Portfolio Theme by imaginem

Rime

Info | Demo

Ruskin ($40) | Creative Agency Theme by United Themes

Ruskin

Info | Demo

Shelflife ($70) | eCommerce Theme by Woo Themes

Shelflife

Info | Demo

Shiny ($45) | Creative Agency/Portfolio Theme by MC Studios

Shiny

Info | Demo

Simflex ($40) | Blog/Portfolio Theme by Pablo Fierro

Simflex

Info | Demo

Size Mttrs ($40) | Portfolio Theme by HappyCom

SizeMttrs

Info | Demo

Slick ($45) | Creative Agency/Portfolio Theme by Mattia Viviani

Slick

Info | Demo

SmartStart ($45) | Creative Agency Theme by Samuli Saarinen

SmartStart

Info | Demo

Spacing ($45) | Creative Agency/Portfolio Theme by Tauris

Spacing

Info | Demo

Stilo ($40) | Portfolio Theme by Purty Pixels

Stilo

Info | Demo

Submarine ($45) | Portfolio Theme by Pressly Themes

Submarine

Info | Demo

Travel ($40) | Fullscreen Travel Theme by UIUXUX Studio

Travel

Info | Demo

Uber ($49) | Creative Agency Theme by Theme Trust

Uber

Info | Demo

Viewport ($50) | Blog Theme by ThemeZilla

Viewport

Info | Demo

William ($40)| Portfolio Theme by nistic

William

Info | Demo

Wrapping Up

Change is never easy. We’re with you on that. But this is one change you should consider making for your website and the sites of your clients. Granted, there will be some exceptions — if you’re working in IT with complex networking software maybe you don’t need a responsive site — but the rest of us likely fall within the consumer web market and would be more than fine on a responsive platform. It will mean rethinking your content strategy, including marketing and adspace, but as the saying goes — “content is king” — and it should be your top priority to focus on delivering it well to as wide an audience as you can.

Helpful Resources

(rb)


Finding Your Tone Of Voice // Stand out from the crowd


  

When creating content for the Web, considering tone of voice is important. Your tone can help you stand out from competitors, communicate efficiently and effectively with your audience and share your personality.

What Is Tone Of Voice, And Why Is It Important?

Tone of voice isn’t what we say but how we say it. It’s the language we use, the way we construct sentences, the sound of our words and the personality we communicate. It is to writing what logo, color and typeface are to branding.

When we speak to others in person, our non-verbal communication says more than the words themselves. Non-verbal communication consists of facial expressions, tone, cues, gestures and pitch. Online, we lose of all of these except tone. We can imbue our Web copy with a tone that is distinct, clear, consistent and relevant to the target audience.

You can’t create a strong and effective user experience without language. And tone of voice plays a big role in this by doing the following:

  • Differentiating you from competitors,
  • Showing your personality,
  • Helping you gain and retain customers.

Here are some snippets of content from the “About� pages of well-known brands. You can see how each has its own unique and appropriate tone of voice.

Starbucks

“To say that Starbucks purchases and roasts high-quality whole bean coffee is very true. That’s the essence of what we do — but it hardly tells the whole story.

Our coffeehouses have become a beacon for coffee lovers everywhere. Why do they insist on Starbucks? Because they know they can count on genuine service, an inviting atmosphere and a superb cup of expertly roasted and richly brewed coffee every time.”

American Express

“Each day, American Express makes it easier, safer and more rewarding for consumers and businesses to purchase the things they need and for merchants to sell their goods and services. An engine of commerce, American Express provides innovative payment, travel and expense management solutions for individuals and businesses of all sizes.”

British Airways

British Airways is a full service global airline, offering year-round low fares with an extensive global route network flying to and from centrally-located airports.”

Disney

The Walt Disney Company, together with its subsidiaries and affiliates, is a leading diversified international family entertainment and media enterprise with five business segments: media networks, parks and resorts, studio entertainment, consumer products and interactive media.”

Each of these organizations has its own voice. The formality of Disney’s voice might be surprising, but despite the fact that it sells “fun,� Disney is still a massive corporation. You need a voice that is true to your company’s culture and values. As Aarron Walter says in his book Designing for Emotion, “To engage your audience emotionally, you must let your brand’s personality show.�

How To Find The Right Tone

You need to have a lot in place before getting started, and the process needs to be embedded in the project. It’s more than about just cobbling together a few sentences. Tone of voice requires careful decisions based on the company’s values and personality.

You might need to adjust your process to find the right tone because each project has its own constraints and deliverables. But research is key, and it could include the following:

  • Interviews with stakeholders,
  • Content audits,
  • Brand reviews,
  • Audience research.

Interviews With Stakeholders

The key stakeholders are usually the decision-makers, so engaging them and getting them involved is essential. Your interviews with them needn’t be restricted to tone of voice, but they should include it.

Give them enough time to say everything they need to say, but keep the discussion focused on three of four major topics. You might want to ask what they think how the company sounds like to others and how they want it to sound. It is also chance to find out which voices among competitors and other organizations they like or dislike. Asking how they view their position in the marketplace would be valuable, too.

Don’t let them focus on what they think the solution should be, though. They need to tell you their problems; solving them is your job. The stakeholders should be concerned with their culture, business objectives and reasons for initiating this project. You could also send them your list of questions or an agenda before the interview so that they are not caught off guard.

Keeping the interviews informal would also help. The more comfortable the stakeholders feel with you, the more honest they will be.

Content Audits

A content audit can be a project in itself, depending on how much content you are dealing with. By reviewing all of your current content, you can see what the tone of voice is and then ask later in the research phase whether it is relevant. Reviewing the content relative to the tone should be done carefully, though. If new content is being written, then the people responsible will need guidance on what tone to adopt.

This is also an opportunity to assess whether the tone is consistent across all of the content. Perhaps your social media channels and corporate brochure vary in tone, but do they still sound like your company?

Speak Up!
The voice should be essentially the same, regardless of the platform. Image source.

Research

Tone of voice is one part of a brand, so it needs to be considered as part of the big picture. The tone needs to fit the visual identity of the company, too. A formal, corporate-looking brand identity paired with a casual and chatty voice wouldn’t be coherent. Reviewing the brand, including typefaces, colors, language and imagery, will help you determine the most appropriate and authentic tone.

Stakeholder and Client Research

Who will be “listening� to you? Getting input from stakeholders is helpful, but these people usually aren’t the target audience. Any research you invest in the audience will be time well spent, even it it confirms what you already knew. Only when you know the audience will you be able to tell whether the tone of voice is appropriate.

This is all about asking questions. Gather information, and then draw insights from it to find out what works and what has to change.

If you are part of a team, then take time away from email and the phone to have a dedicated session about tone of voice. As a team, ask these questions:

  • What is our personality?
  • How do we sound to others?
  • How do we want to sound?
  • Are we authentic?
  • Who are we targeting?
  • How can we keep our voice but change the tone?

The team could also create mood boards related to how it views the company. These could reveal whether these insiders all view the company in the same way.

Getting everyone on board is important because if the team understands the tone of the company, then it will be able to communicate it consistently. In large organizations, certain stakeholders will likely need to be involved in this process, with the guidelines communicated to everyone else.

You might have to face some hard truths about who you are during this phase. Perhaps you want to be very informal but your industry doesn’t allow it. The key is to be honest. All of the information you gather from the questions above will start to paint a detailed picture of who you are.

You can then narrow down to more specific questions:

  • Should we use jargon?
  • Can we use humor?
  • How informal can we be?
  • What punctuation should we use?
  • What do our competitors sound like?

One final question not to be ignored is, “Who are we engaging with?”

Audience Research

Your tone of voice has to communicate who you are to the target audience. But what if you have different audiences?

Your tone has to suit the brand, no matter who you are talking to, and this in turn will result in a good user experience. When addressing investors, you might find yourself sounding corporate and business-like. If a segment of your audience is younger, you might change your tone to suit it. Don’t. This immediately prevents you from being consistent, which means you aren’t being authentic, which is critical.

The change will happen at the level of content. The tone will stay the same, while the content will be adapted and refined as needed. Your message might be serious, but that doesn’t mean you can’t say it in a friendly way.

If you are a company that builds things, you could say this:

“The diversity in our department enables us to be innovative and creative, resulting in revolutionary, ground-breaking and immersive experiences for our target customers.”

Or you could say this:

“We build awesome products that our customers love.”

Going through these processes will have yielded a lot of data and information. The challenge now is to decide what’s right. This will be complicated by diverging opinions, and you will need buy-in from the stakeholders.

With a full understanding of the company’s challenges, personality, brand and target audience(s), you’re in a strong position to determine what the tone of voice should be. Any decisions you now make will be backed up by data.

Don’t be afraid to challenge the decision-makers either. They hired you for your expertise after all. Showing examples of their current tone and the proposed new tone will help. Stakeholders often think they sound a certain way when in fact their tone is very different. They might have trouble admitting this, but they can’t argue with cold hard data, and all of the time you’ve spent on research and auditing will support your decisions.

Once the tone has been decided, write down guidelines. The tone of voice might be a part of broader branding guidelines. If not, then put something together that informs everyone in the organization what you should sound like.

Showing examples is best. Include before-and-afters, and even list words to use and words to avoid if needed. If everyone on the team understands the tone, then they will help to keep it consistent, especially if you have more than one content creator.

Different Tones

MailChimp has taken its guidelines a step further by putting them online for all to see, on a website named Voice and Tone. The website makes clear through examples, tips and descriptions of feelings exactly how to achieve MailChimp’s tone of voice in all areas, including apps, social media, the main website, the blog and internal communications. The same approach and presentation could be used for printed guidelines, too. Tell team members how to get the tone right, but also show them.

Here are some pages from “Voice and Tone”:

Voice And Tone 1
Content types on MailChimp’s “Voice and Tone”.

Voice And Tone - Freddie's Jokes
Voice and Tone explains the jokes of MailChimp’s mascot, Freddie.

Voice And Tone - Failure Message
An explanation of how to write failure messages.

If the project allows you to have fun with the design and language, then you can get quirky or adopt a tone that others in the marketplace would shy away from. There’s a fine line between coming across as fun and quirky and coming across as unprofessional or snarky.

If you are in the legal, government or banking industry, then going the informal chatty route might not be appropriate, because you will need to appear trustworthy and professional to customers. Would you bank with a company that sounded like it wanted to have fun all day? I wouldn’t. I work hard for my money and want it to be looked after.

Your tone can still be friendly. The key is to be credible, because the worst thing you could do is try to sound like someone else or be something you are not.

I was at a local arts and literature festival recently, and one of the slides that was shown before each talk said this:

Turn Mobile Off - Standard

The tone of voice here was true to the spirit of the festival, making it authentic, and it was noticeable in other signage, making it consistent. It suited the personality of the festival and appealed to the audience that attended. The tone wasn’t negative (“Please turn your phone off�), which is the approach most commonly taken by cinemas, theaters and airlines. Instead, you were asked turn your phone back on after the talk, on the assumption that you had already turned it off. The bonus of asking you to share news of the session encouraged further positive behavior.

Given the nature of the event, the tone could have been complemented with more personality in the visuals. Something like:

Turn Your Mobile Off - Personality
The tone is the same in both graphics, just presented in different ways.

How Others Do It

Let’s explore the personality and tone of voice of some well-known brands and organizations. Some get it right, others less so. Let’s take a look at Ben & Jerry’s website:

Ben & Jerry's Subpage 1
Ben & Jerry’s presenting the various flavours they have available.

Tone of voice doesn’t work in isolation here, though. Illustrations, bright colors, a scrapbook feel, sans-serif fonts, animation and a lot of cows all support the friendly, fun and relaxed tone of voice.

Compare that to this more sophisticated and formal home page of the White House:

The White House Homepage

As you’d expect, Ben and Jerry’s and the White House have very different tones of voice, but they are appropriate for what they are and fit their personalities.

The White House’s website has a traditional color palette (a patriotic combination), a serif typeface, photography rather than illustrations, and a formal and professional tone of voice.

Authenticity And Consistency

While this is getting into other design elements, note that tone of voice can dictate the personality of everything else on the website. It shouldn’t be tacked on at the end of the project through a few tweaks to the copy. It needs to be considered from the start so that it can be communicated precisely at all times.

Ben & Jerry’s and the White House get it right. Each has found a tone that suits it and represents what it is.

But we often learn more from those who do it wrong.

Let’s take LOVEFiLM, an online film and game rental service, for example. With this service, you create an account, add films or games to a list, choose a subscription package, and then receive your selections in the mail. No late fees, no deadlines, no return postage costs.

I’m a subscriber, and the service is excellent. The tone of the website is not. LOVEFiLM provides entertainment, something fun to help users relax and escape to another world. Its tone of voice should reflect these values, e.g. by pushing the boundaries by playing on famous film quotes and titles. Instead, its personality is very middle-of-the-road.

LOVEFiLM Home Page
LOVEFiLM’s home page, lacking in personality

The content and tone don’t prevent the user from achieving their objective — it is clear, for example, where to sign up for a free trial — but the tone is boring and formal. Saying something like, “Want free films for a month? Of course you do. Get started here!â€� would be much more appealing.

LOVEFiLM Sign Up Page
LOVEFiLM’s unfriendly sign-up and sign-in pages

Again, the user knows what to do here, but the company could really engage users with a distinct tone of voice, building a fun personality and creating a better experience.

This is a big claim, but it shows just how important tone of voice is. If you invest the time to find the tone that best represents who you are, then you are being true to yourself; you’re being authentic. If you then communicate in that tone of voice all of the time, both online or offline, then you are being consistent, and you will positively influence how your organization is perceived.

By being authentic and consistent, audiences will understand your brand and have a good experience wherever they are exposed to it. They will recognize you, and your relationship with them will flourish. They will keep coming back because they feel an emotional connection. If you aren’t authentic or are trying to be something you are not, then their experience with your brand will be inconsistent, and they will see through you and find it harder to engage with you.

Your tone must lead the way at all times. So, find out who you are, and if that means facing up to some harsh truths, so be it. Perhaps you aren’t as fun as you’d like to be; that’s OK, as long as your tone of voice reflects that at all times. Being consistent and distinctive in a large organization is harder, but it is still possible.

The surest sign of a lack of authenticity is hearing stakeholders say, “We want to sound like Innocent.� Innocent is a company that make smoothies and juices and is well known for its informal and chatty tone of voice. Wanting to be like Innocent is fine if you have the same culture, values and personality. But most companies don’t, and they want to be like Innocent just because it has perfected its tone of voice and is regarded as a trailblazer for it.

Innocent Home Page
Its quirky print advertisements shows a consistent tone of voice. Large preview.

Innocent Print Advertisements
Innocent’s friendly subscription box. Large preview.

By emulating another company’s tone of voice, you won’t be emulating their success. Admiring the company and being influenced by its tone is fine, but you can’t recreate it because too many variables are at play, such as product, service, location and audience.

Is This The End?

No, it’s not. Once your content is live, don’t leave it unloved. Keep checking that the tone is relevant. Organizations change, perhaps not overnight, but over time; so, if your culture changes, then maybe the tone has to be adapted, too.

That might be a long way off yet, though. First, do an audit and see if your tone is right. If not, then a research and discovery phase will enable you to gather all of the information needed to make informed decisions.

At the fore of the decision-making process should be your culture, personality and audience. When you have determined the tone, apply it across the brand so that you establish authenticity and so that the user experience is consistent. Then, audiences will engage with you, feel an emotional connection and keep coming back for more.

What are your thoughts on the importance of the voice and tone? Share your thoughts with us in the comments section below!

(al) (il)


© Robert Mills for Smashing Magazine, 2012.


Showcase of Incredible Design Portfolios From All Over the World


  

No matter when or why you find yourself browsing the internet, there is no short of different logos, websites and print designs filling the web. Having experience in the fields helps one to distinguish the visual candy from the beauty of great web design. In this information age the competition remains fierce, always causing the bar to be raised. With so many creative people focused on web design, it takes a log to stand out from the crowds.

Generally speaking, some of the most unusual and amazing websites belong to designers. Of course, there are a lot of designers who have no site or one that doesn’t show off the full power of their skills. As the saying goes, “the cobbler’s children go unshod”.

A designer’s website should be surprising. Looking at a designer’s or web studio’s site should allow a potential customer to draw a conclusion about their talent and technical skills. Portfolios are an extremely important part of a designer’s website, but that doesn’t mean that any other parts can just be thrown together. Think about it. If you were a customer, you wouldn’t choose a designer whose site doesn’t impress you.

Today we’d like to share with you an showcase of incredible design portfolios from all around the world. A lot of effort and time has been invested since the designer’s first sketch was created to the wonderful design you can see now. So take a look, and get inspired.

Talent and Skills Put into Practice

Domani Web Studio

designers sites

Iji Digital Web studio

designers sites

Pianofuzz Web studio

designers sites

Cafundoe Web Studio

designers sites

Carsonified Web Studio

designers sites

Ica Lab Web Studio

designers sites

XHTML Kitchen web Design and Development Studio

designers sites

ONY Web Studio

designers sites

Nile Web Studio

designers sites

Just Be Nice studio

designers sites

Creative People Agency

designers sites

Instinct Web Agency

designers sites

73dpi Ukrainian Web Studio

designers sites

FabWebDesign by Fabrizio Michels (CSS winner)

designers sites

Liechtenecker is an Austrian Web Agency

designers sites

SiteSoft Design Studio

designers sites

SmallStudio Creative Agency

designers sites

StudioBreakfast Design and Web Studio

designers sites

Florian Bernard’s Portfolio 13flo

designers sites

The California design studio 2Advenced

designers sites

French Design Agency Blan? Fonce

designers sites

Dutch Design Studio Cartelle

designers sites

Dave Werner’s Portfolio

designers sites

Domenico Tedone Stylish Portfolio

designers sites

New York Creative Agency “Hello Monday�

designers sites

The German-Swiss Design Studio

designers sites

Great Britain Design Studio

designers sites

Freelance Designer Nick Jones’ Website

designers sites

Nick Joore’s Portfolio Website

designers sites

Personal Website of a Japanese Art Director “Unouplus�

designers sites

Personal Website Online Designer Yodabaz

designers sites

Art. Lebedev Studio

designers sites

Filidor Wiese

designers sites

RedKeds Creative Agency

designers sites

Award Winning Russian Creative Agency

designers sites

Artem Gorbunov Design Bureau

designers sites

BrandStudio – Russian Creative Agency

designers sites

Lebrand Creative Russia

designers sites

Zero – Interactive Agency

designers sites

908 Inc

designers sites

Turbomilk – Custom Icon and GUI Design

designers sites

Studio Psyho

designers sites

ATELIER Russian Agency

designers sites

Russian Design-bureau “Knock Knock�

designers sites

Aero Creative Agency

designers sites

Russian Agency “Stuudio� Spash Screen

designers sites

Motto Ukrainian Agency

designers sites

Russian Studio “Minisol�

designers sites

Click – Russian Internet Agency

designers sites

Piezo Design

designers sites

Conclusion

Web design is a unique artform. The competition level is high, so designers tend to put their best foot forward with their websites. As you can see, some sites have won awards as a symbol that the effort put in was well spent. Hope, you enjoyed the collection of amazing designer’s websites. What website do you like the most and why does it stand out from the rest? Feel free to share your thoughts in the comments.

(rb)


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress