Archive for February, 2010

Posted on February 20, 2010 - by David Etheredge

Web Design Process – Types of Websites

So you want to get a website built for your business or organization. If you are like most people, you have little or no experience with website design, so you may feel like you are flying blind when it comes to the best process for selecting a designer and what you can (and should) expect from that designer as the project proceeds.

Building a website is just like any other business process – the more informed and educated you are about the process, the more likely you are to achieve your goals and stay within the budget and timeframe you have available. We’re here to help!

In this series of articles we will explore the process of developing a website. Specifically we’ll cover;

1. Types of websites
2. The development team
3. The development process
4. Costs and development schedules

Types of Websites

Before you start looking for Web Designer, it is extremely useful to know what kind of website you intend to build. In general there are 7 types of business websites:

Postcard Sites – this is a very small website (1 or 2 pages) that provides information about a company, event, product or service intended to drive a very specific action on part of the user. Examples include placeholder websites that precede the development of a larger, more fully featured website, promotional websites tied to seasonal offers, special events such as concerts, periodic marketing campaigns and the like. Postcard sites are similar in many ways to full page magazine or newspaper ads – they are used to communicate a single, strong message and to drive action off of that message.

Brochure Websites – these are online marketing tools that provide visitors with key information about a company including who they are, what they do, the location of their business, contact information and information on the kinds of products and services they offer. Brochure sites are characterized by having a small number of pages (3 to 20) which are mainly comprised of little more than text, a graphic or two and possibly a simple form. They are designed to serve the same function that a company prospectus, sales kit or marketing brochure serves in print marketing.

Product Websites – this a website that focuses primarily on driving sales or leads for individual products and services. Product websites are characterized by having individual product information (pictures, descriptions, pricing, data/spec sheets, etc) for a larger number of similar products. Product websites may incorporate e-commerce allowing customers to buy products directly, or it may serve as an online catalog providing customers with the information required for them to make purchases offline. Product websites are often database driven and incorporate systems allowing the client to adminstrate product information and inventory directly, in real time.

Publishing Websites – sites that focus on distribution of periodic content including articles, videos, interactive games and podcasts like ESPN.com or the SavvyTalk blog. Publishing sites are characterized by the use of a Content Management System (CMS), such as WordPress, SlideShowPro or Joomla to author, edit and publish content to the site in real time, without requiring a programmer to code the content for you. Publishing sites are typically broken into categories of content, have authors and editors for each content category and publish new content on a regular schedule. Publishing sites may only have a handful of pages when initially launched, but can grow to hundreds or thousands of pages over time as the publisher adds content.

Community Websites – websites that focus on allowing visitors to particpate in online discussions and other multi-user activities through the use of chat, private messaging, user forums, bulletin boards or classified ads. Craig’s List, E-bay, Facebook and Ning networks are examples of community websites. Community websites are characterized by being focused on the proliferation of user developed content and will almost always include tools that enable users to publish directly to the site. Most Community websites require a very signficant amount of moderation and user support relative to non- community oriented sites.

Productivity Websites – these are websites that offer tools and systems designed to allow users to accomplish specific tasks or activities related to their business or personal lives. Etrade (trade stocks), Bank of America (manage bank accounts), MapQuest (get driving directions) and Google (search the web) are examples of Productivity websites. Such sites are characterized by having proprietary back end tools and systems that can be exceptionally complex and often require constant maintenance and support.

Hybrid Websites - many websites are hybrids of the types shown above, with a postcard, brochure or publishing site forming the main offering and product catalog / e-commerce, productivity tools, community and/or publishing components “bolted” on to the core website. It is very important to understand that in most cases  adding more complex functionality such as e-commerce, content mangement, productivity tools or communinty systems to a brochure website will increase the cost building the website by a signicant amount.

We have a saying around here that “just” is the most expensive word in the English language. We often get client’s who will say something like “I want a small brochure website, just with e-commerce”.  They don’t understand that adding e-commerce can mean;

• Integrating a shopping cart solution
• Getting a merchant provider and a payment gateway
• Purchasing and installing an SSL certificate on their server
• Providing product, order and customer administration
• Developing and editing web ready copy and photo images for all products
• Integrating analytics and conversion tracking
• Integrating shipping
• Back end integration with the client’s order tracking or bookkeeping system
• Extensive testing of the entire system

Building an e-commerce system doesn’t get any cheaper or easier to do simply because its added to a brochure website. Unless by “e-commerce” you mean adding one or two PayPal buttons to your site, building a web store is almost certainly going to increase the cost of development by thousands or tens of thousands of dollars (or hundreds of thousands of dollars if you want to build the next Amazon.com!).

The moral of the story is that if you want a hybrid website that combines elements of a publishing website, an e-commerce website and a productivity website (for example) then cost and time required for development of the site will be significantly more than a site that features just one of those elements.

So now that you have a grasp of the general types of websites, the next step to understanding the Web Design Process is to review the different disciplines required to build a professional website.

The next article in this series - “Web Design Process – The Development Team”, will be published soon.

Posted on February 20, 2010 - by Lisa Nalewak

Content Formatting Tips for WordPress Pages

WordPress is a popular content management platform that many web designers use to enable content management features on sites they build for their clients, meaning that someone at a client’s organization can access content on their website through an editor and make modifications to the content on a page as they like, without knowing any code or having to FTP web files up and down from their web server.

For the most part, our WordPress clients are fairly conversant with the content management editor (and if they aren’t, we train them), so learning how to efficiently use WordPress tools generally isn’t a challenge. What does become something of a challenge for our clients is understanding some design fundamentals for text and content layouts that allow for neat, professional looking web pages, and that helps each page clearly communicate its message or value proposition.

It is not uncommon for folks untrained in design and layout to try and embellish pages with too many fonts, typesizes, or colors in an effort to give pages some “pizzazz”, which instead leads to pages that look “too busy” or “messy”. Or, perhaps they are not sure how to break up text and arrange other elements on a page to give it proper visual hierarchy and make it easy and intuitive for a reader to follow. Or perhaps content isn’t being clearly communicated because there are not enough subheads or supporting graphics on a page to help tell the story at a glance.

To help, I’ve put together a quick list of tips to keep in mind when formatting pages. While these tips apply when laying out pages in WordPress managed websites, they also are general formatting principles that will help any document look more professional and polished.

1) Text fonts, sizes and styles

The same text elements on every page should be consistent. For example, all titles should be the same font, typestyle and type size. The same goes for subheads and body text.

2) Placement of graphic images in content areas

The size, placement and treatment of graphics on each page in a Word Press site should be similar. For example, if a large image is associated with an article, it should be someplace very visible within the body text of the article and above the fold and the text should always have the same margins around the photos from page to page. Images should be similar in size. Some clients prefer images to be in the same place each time. Some prefer placement variation. What is important is that each page is consistent in how the text and photos interact.

3) Splitting text into 2 columns

Splitting text into 2 columns helps add more white space to a page and makes large passages of text look more manageable, which makes it more likely people will read the content rather than skip over it.

4) Using subheads to split up large chunks of text, and to aid in the communication of messaging.

By using subheads in the body of text, you accomplish a few things: a) Users get a good sense of the main messages being communicated on a page by reading the title and subheads before having to read all the text, so you can communicate your main points faster. In addition, calling out the main ideas of text in subheads means you will enjoy reinforcement of your message or value propositions in the subheads as well as in the main body of the text, so you drive your point home more than once. b) Breaking up text using subheads makes a page look less “threatening” visually. When you break up text into smaller, “digestible” chunks, readers are more likely to read each bit than if it were presented in one long passage.

5) Addition of graphic under page titles

The addition of a graphic under page titles, like a rule line, (be sure it’s consistent across all pages) adds visual interest to the page and gives it a more polished appearance.

6) Inclusion of larger graphics or call-outs to each page to visually communicate messaging

The addition of graphics to a page can be extremely helpful in illustrating your messages or value propositions for the content on that page. Graphics can be photographs, charts, or even text that communicates your main points, but is laid out in a way that is graphically interesting and pulls a reader’s attention.

For example, a long passage of text on a single web page might explain the 3 steps of a “How To” process. To help communicate the main message of the article, create a graphic call-out that lists the “3 steps” in bullet points. Embellish it with graphically interesting (but appropriate) text, and perhaps supporting background graphics (but be sure it is still easily readable). Place the graphic near the top of the article.

This page now communicates the 3 steps of our “How To” process immediately upon hitting its URL. As a reader, I already understand the main point of this entire page of text without reading a single word in the main body of the article. Now that I’m interested, I’ll read the rest to get the full story.

Posted on February 20, 2010 - by Lisa Nalewak

The difference between being “Just a Graphic Designer” and a “Graphic Designer People Want to Hire”.

This topic has come up many times in conversations I’ve had with industry peers: What makes a graphic designer a “great” graphic designer versus an “average” or “typical” graphic designer? Plenty of people I’ve interviewed have asked me “What makes you decide to hire one designer over another?”

First of all, let’s define “graphic designer”. A “graphic designer” can be many different people: someone who is focused on producing artwork for art’s sake, equivalent to someone who produces fine art for a living (painting, sculpting, etc). They can be an artist who creates graphics for clothing, or designs patterns for fabrics or carpeting. They can be someone who designs patterns or scenes for embellishing automobiles. There is a wide spectrum of positions for which “graphic designer” applies. For the sake of this article however, I define a “graphic designer” as someone who works creatively in a commercial advertising/marketing capacity.

Evaluating someone as a “great” graphic designer is partially interpretive, and the hiring process involves the subjective evaluation of intangibles like character, attitude and professionalism. Nonetheless, I do believe you can distill the main requirements for “graphic designer greatness” into a few key areas that require specific, high degrees of competency. I discuss them below so that as a graphic designer trying to find work in the advertising/marketing space, you’re armed with a good understanding of what people who hire designers are looking for, and to help you prepare as best you can to land the job you’ve always wanted.

Requirements for “Designer Greatness”: 

1) High degree of artistic ability, alternatively referred to as “talent”

2) Advanced skill with popular creative tools

3) Working knowledge of popular industry production processes

4) Excellent understanding of business and marketing fundamentals, particularly how to leverage business and marketing knowledge to create end-products that meet or exceed a client’s goals and expectations

5) Ability to visualize and experience end-products you’re creating through the eyes of the target audience (and sometimes, multiple target audiences)

6) Responsible and proactive work ethic

1) Artistic Ability or “Talent”:

What Is It? – Artistic Ability is the “base” talent of all successful designers. It’s a designer’s ability (partially innate, partially learned) to envision and design a polished, professional looking finished product, whether it be a printed piece of collateral, a logo, a website, a billboard ad, etc. It requires an advanced understanding of color, composition, and typography and adept handling of element unity, dominance, hierarchy and balance. It is by far the most elemental talent a designer needs, for without it they are, in essence, not a designer. However, it is also the most common talent found among designers, which is why – to someone like myself who hires and fires designers for a living – it is the most basic requirement, and not the one that helps me make the ultimate hiring decision. All people who make it past Step One in the Hiring Process will possess excellent Artistic Ability, so it represents only the first step in the culling process.

Advice for Designers – If you are looking to get hired as a designer, be sure your level of talent meets or exceeds the level of talent that is currently acceptable in the jobs you desire and to which you are applying. It takes one level of talent to work at a small, local newspaper designing classified ads for small businesses. It takes a very different level of talent to land a job at a top New York advertising agency. If you are unsure about your ability level, talk to a design professional working in a similar position to the one you want and ask them to evaluate your work. Show them multiple pieces, and describe each project’s background in detail (including the business goal of each piece you designed), and then ask them to honestly evaluate your work. If they believe your work is not up to the level it needs to be, ask them to give you advice on how you can get there. Any designer with talent can get better: for some it just takes longer, so don’t give up!

2) Skill with Popular Creative Tools

What Is It? – This is a person’s expertise (which is learned, not innate) with the most popular creative productivity tools in the industry. These include applications like Photoshop, Illustrator and Quark Express (called “The Big Three” by many), other popular graphic applications like Flash, InDesign and Corel Draw and other productivity tools like Adobe Acrobat, Word Processing programs, MS Office applications, AdobeVersion Cue and Windows/Mac operating systems.

Advice for Designers – It is extremely important that designers be experts in the use of the most popular programs used in the graphics industry, because in the design world, you’ll need them to do your job and because – most importantly – time translates into money. If one designer can achieve a specific result in 1 hour, and that same task takes someone else 3 hours, it’s not hard to understand why the person who is most efficient with their productivity tools will be preferred over the other: that first person can do three times the amount of work in the same amount of time as the other and for a design agency, that means higher productivity and higher profitability.

The best way to learn tools is to use them. Set aside an hour or two a day and just play. Investigate all the different functions your software package offers. Create “projects” for yourself, and see them through to fruition by using features you’ve never used before. Most software tools come with tutorials: they are definitely worth exploring. You’ll learn an enormous amount of new material, and you may learn how to become more efficient with processes you already know. In addition, many local colleges and adult education programs offer classes in the most popular graphic design and business software, as do the actual software publishers themselves. If you can afford to take these classes, do it. They’re an excellent investment in yourself and can give you an edge over other designers when looking for employment.

Even if you feel you are already well versed with your software, be sure to continually educate yourself on new features and functionality that are part of new version releases. Being an expert in Photoshop 6.0 might have made you competitive back when 6.0 was the latest version of Photoshop available, but if you have neglected to keep up with the most recent versions, that expertise will get you nowhere today.

3) Knowledge of popular industry production processes

What Is It? – Simply put, this is the technical understanding of how the visual pieces designers create are actually produced, printed or published. It means possessing the production knowledge necessary to ensure that a visual communications piece prints, outputs or displays correctly in the media for which it was designed. This knowledge is critical when prepping an art file you’ve created. Much of the technical information for the correct production of a piece is assigned by the designer and is included (or “embedded”) in the art file itself.

Advice for Designers – Know the different production requirements for art that you create for various media formats. For example, when creating an ad for a magazine, be sure you understand how that magazine will be printed and produced so the art you create 1) takes advantage of that particular production process’ strengths and avoids its weaknesses, and 2) reproduces correctly and at the best quality. When creating a graphic that will support a web magazine’s editorial feature, make sure you understand the specific technical requirements for that image as it applies to electronic distribution over the web. Understanding the different production methods used to produce the most popular forms of visual communications will also allow you to get creative with materials as well, and create unique pieces with atypical stocks and finishing processes.

If you possess high quality artistic talent, but do not know the difference between setting up art to print in spot-color, four-color process and for electronic distribution, or do not know how to create a die-line, or what type of challenges to expect when overprinting inks, or designing for billboards, you have immediately put yourself at an disadvantage over other talented artists with this critical production knowledge. Why? Because it 1) limits your creativity and 2) limits the effectiveness of your work, which means someone else will have to “fix” your art to produce it correctly. That costs either your agency or your client money, and causes frustrations for both as well.

The best way to keep abreast of production technology is to be proactive about reaching out to production companies that specialize in various media, and to look for sources of information in print and on the web. Talk to you local offset printer. Visit a web fed press. Visit a large commercial digital press. Talk to web design gurus. Subscribe to different magazines that cover these topics. Follow blogs that cover advances in the different production technologies. Join groups on social networking sites that share information, tips and strategies on different production methods. Visit your local Chamber of Commerce or Community College and take continuing ed classes. There are many more ways to keep on top of production technology. It’s up to you to find them and keep yourself educated and up-to-date.

4) Excellent understanding of business and marketing fundamentals

What Is It? – Basically, having an excellent understanding of business and marketing fundamentals as a designer means you understand WHY a piece is being created for a company and how that piece fits strategically into a broader, higher-level marketing and/or business plan. It means you understand the specific business goal a piece you are designing must achieve, why it is important that the piece achieve it, and why the achievement of that business goal is the most important criteria for evaluating the success of your design (not whether or not you think it looks pretty or “artistic”). In the design of visual communication pieces for business, art plays a secondary and supportive role. In order to achieve this understanding, you must be familiar with how businesses work and how they market themselves.

Advice for Designers – The understanding of business and marketing fundamentals is the most rare – and the most important – attribute designers possess. Those that have it are years ahead of those that don’t, because they do not demand that their agency spend months, and possibly years (which costs time and money) teaching them why the art they are creating is important to the client, and how it will be used. That knowledge makes a big difference in a designer’s ability to design an effective piece, and clients want pieces that produce results, not just look pretty. All else being equal, I will hire a designer with excellent business and marketing acumen and good creative tool skills over one with elite creative tool skills and weak business and marketing acumen, because the tool skills come very quickly to talented artists. The business and marketing acumen isn’t as intuitive and takes longer to develop.

While every industry has some unique factors that effect how companies in their space do business and how they market themselves to their consumers, there are still general, fundamental business and marketing practices that are common amongst all industries. Most people learn these through experience. Some learn them from books and study. Some from both. Whatever way you can, you must learn these basics so you can approach your design from the perspective of a business and marketing professional first, and as an artist second.

If you approach a project in the same way as your client, who is no doubt a business or marketing professional and NOT a designer, you will be at an enormous advantage over other designers who do not speak the same “language” as your client. When you approach a piece from a business and marketing perspective, and design it to meet a specific business or marketing goal, you are ensuring that your piece is effective and drives results for your client. And that’s what clients want: results, not art.

There are numerous books out there that teach people about the fundamentals of business and marketing. Get some. Read them. Take introductory classes or go to seminars for entrepreneurs. Talk to other designers who’ve been doing what they do for a long time, particularly those who do a lot of work in direct mail and print advertising. Find out how they approach a project from a business perspective, and then start doing it yourself. When you find yourself thinking “How should I design a cool-looking business card so it convinces the recipient he absolutely needs my client’s services?” rather than “How can I design this business card so it looks really cool?”, you’ll know you’re now thinking like a business professional, and that will put you at a serious advantage over other designers who do not.

5) Ability to see through the eyes of the target market

What is it? – Simply put, having the ability to experience the world, including interacting with collateral you’ve designed, through the eyes of your target market means you can remove yourself from your own system of beliefs and values when evaluating an experience. Instead, you evaluate experiences using a system of beliefs and values common to people within your target market segment, even if their beliefs and values are vastly different from your own. Another popular way of saying the same thing is “Being able to walk in someone else’s shoes”, in this case, the shoes of your target audience.

Advice for Designers – It is not easy to fundamentally change the way you think in order to be more like another type of person. However, with practice, it becomes easier to achieve. If you are unable to attain this level of “enlightenment” when designing something for a specific target audience, rest assured the final product you design will be nowhere near as compelling and effective as a piece created with the wants, needs, beliefs and desires of the target audience in mind. It is essential that as a designer, you become skilled at removing your likes, tastes, desires, style preferences and personal feelings from the process of design, and instead learn to execute a design using the likes, tastes, desires, style and personal preferences of your target audience instead. To do this, you must first recognize who your target market is, and then research their preferences as they pertain to the topic of your design project.

For example, let’s say you are asked to design a postcard to sell women’s swimsuits. The target demographic is women, aged 25 to 40, which is being mailed to a retail clothing chain’s mailing list. You don’t have to think too hard in this example to understand that your card has to appeal to women, particularly to younger women. But, can you dig further to uncover more about this audience? What type of woman does this clothing chain attract? Trendy, fashion conscious women? Outdoorsy, natural-type women? Frugal, conservative women? Where are most of these women located? Are women in Dallas generally different then women in Boston? How about income? Are these women generally in lower, mid or upper level income brackets? Are they generally healthy, active types or do they tend to be more sedate and indoor activity oriented? Does this have an effect on how they view their bodies? Once you learn the specifics, you can put together a “value list” for your “average” target customer and from that, you can get a good design direction for your project.

For our example, let’s say our target audience is generally outdoorsy type women and that the chain is located in the Boston area, and that most people who shop at this chain are in the mid and upper level income brackets. Based on this and conversations with your client about their customers, you are able to infer that these type of women are likely to respond to graphics and visuals that emphasize the outdoors, that they can afford and are likely to purchase high-level products, that they are generally more liberal in their values than conservative, that they tend to be active and most have a healthy body image. Now, you approach your design project by thinking “If I were this woman, what type of design elements would motivate me to pick up this card, read it, and then respond?” An earthy color palette would be a good place to start, as would a handmade-looking, fibrous card stock. Perhaps imagery of outdoor scenery, coupled with a natural, flowing arrangement of body flattering suits in the layout, anchored with green-friendly messaging would help our piece “connect” with its audience. This is a very different approach than if we were designing for a hip, urban crowd, or for a conservative, more reserved crowd, and – most likely – it’s also quite different from the types of things that would motivate you if you were the recipient of the piece in the mail. It’s all about thinking from the perspective of the target audience, and putting aside your personal preferences to achieve the best end-product possible.

The best way to brush up on this skill is to do it. Give yourself assignments: create a series of designs for the same product, but for different target audiences. Change the gender, age, income and geographic value of the end-user. Change their hobbies and likes. Change the political climate of the country, even. For each new set of demographics, values and beliefs you make up, create a completely different design. There are many factors that go into “thinking like another”, so try to get as creative as possible. Over time, it will become second nature to approach every design project you take on from the perspective of the target audience instead of from your own perspective (or even the perspective of the client) and the efficacy of your designs will improve greatly.

6) Responsible and proactive work ethic

What is it? – Hopefully, this is already something most people looking to embark on a successful professional career already cultivate, but still, it’s worth mentioning. Being responsible and proactive basically means that you are an amazingly stable and dependable worker, always strive to meet and exceed the expectations of those who count on you, and take the initiative on a regular basis without being asked to do so. In my experience, finding people with responsible and proactive work ethics has surprisingly not been as easy as I would have thought. For every great person I find, I go through about 3 or 4 who prove that they care very little about their work or the company they work for.

Advice for Designers – Being responsible means that you take it upon yourself to achieve the best results you can every time you work on a project, and that you can be counted on to perform your work when you are scheduled to, when you are asked to, and when you have deadlines to meet that may necessitate overtime. Being responsible means letting other people who count on you know if you have to take a sick day, if you can’t finish something in the time you are given, or if you been assigned something that is not within your capabilities. Being responsible means that you care immensely how your actions effect other people, and as a designer, you are cognizant about what you have to do and when, and you strive to keep the people around you (including clients and co-workers) happy and motivated to continue working with you.

Being proactive means that you “go the extra mile” and do things without being asked first, because you know they are the right things to do, and/or would benefit you, your co-workers or your company. You spend time after work to add a special touch to a design, or to better learn a creative tool. You approach your supervisors and ask to be given more of the type of work you’re interested in. You offer thoughtful suggestions and ideas that help increase your company’s productivity, its success, it profitability. You help a coworker learn a new software package. You reach out and follow-up with someone on a topic of discussion rather than hanging-back and waiting for an email to appear in your mailbox. In essence, you are good at “taking the bull by the horns” and making things happen rather than waiting for them to happen on their own.

In the rather competitive design world, it’s important a designer is both these things. If you are not responsible, it won’t take long for people to learn they can’t depend on you, and work coming your way will dry up. If you’re employed as a designer somewhere and you are not responsible, you will lose your job (there is no doubt about that one). If you do not make efforts to be proactive, you will not be thought of as an invaluable team member, but rather as just an asset that is likely easy to replace. Do not underestimate the value of being proactive. It is the key element that separates great, thoughtful designers who enjoy bright, progressive careers from those that just collect their paycheck and remain cubicle gophers for life.

Posted on February 15, 2010 - by David Etheredge

Website Design for Smartphones – Part 1

Why every business needs a mobile website

If you haven’t already heard the news, Smartphones are here to stay. Just a few minutes with Google and you can unearth tons of data pertaining to mobile device and smartphone sales projections – for example multiple research firms predict (one example here) that the global mobile market will approach 6.0 billion subscribers by 2014 with something like 33% of those devices being smartphones. Yes, that’s 2.0 billion smartphone users texting and surfing the web while they try to steer their Mini Coopers with their knees. Roads and highways are destined to get a LOT less safe over the next few years. But that’s a different article for another day.

This series of articles is going to explore website design for smartphones. Specifically three questions;

1. Do companies need to develop a mobile website in addition to (or instead of) a traditional website?
2. What should be the goals of a mobile website?
3. What is the process for developing a mobile website?

By the time we’re done, you should have a pretty good grasp of the “why?, what? and how?” of mobile website design for the next generation of web enabled smartphones.

If your business currently relies upon a traditional website for marketing, lead generation, sales or support, then you should strongly consider building a dedicated website for mobile devices. In December 2009, Gartner (the self proclaimed “world’s leading information technology research and advisory company”) dropped this bombshell in a report outlining their Information Technology predictions for the next several years; by 2013 mobile devices will surpass personal computers as the most common web access device worldwide.

Let that sink in a minute or two. In just three years, people globally will be more likely to visit your website using a smartphone than a computer. This fantastic post at ‘If only we’d thought of that’ digs a bit deeper into some of the findings of the Gartner report. Foks, we’re talking about a universal paradigm shift here and the implications are staggering.

Clearly a signficant part of the growth in mobile device sales will come from emerging markets in areas like South America, Africa and India where a large number of consumers can’t afford large ticket items like personal computers and where high speed broadband infrastructure simply won’t exist. But even in the U.S. where personal comuters are almost ubiquitous, you only have to walk into your local Best Buy to see where the market is going – smartphones reside in the most visible section of the store, right in front of the entrance, while personal computers are relegated to the bowels of store – against the far back wall.

It’s a fair bet that U.S. consumers who don’t already have a connected device; the poor, the young or the old, will be more likely to enter the market through a $100 smartphone than a $1000 PC. Best Buy certainly thinks so.

What this means for busineses is pretty clear. If you want to remain relevant to the millions of consumers who will be using smartphones as their primary device for browsing the web, you must have a website optimized for mobile browsing. And you’d better get it done soon because over the next few years, consumers will be increasingly more likley to decide which products and services they wish to buy and who and where to get them from based on information they gather on their phone.

In other words, those businesses that have a high quality, easy to use mobile website which properly drives consumer behavior will have a significant competitive advantage over businesses that do not.

All the big boys are doing it. Geico, Coke and Nike are just a handful of the major national brands scrambling to differentiate themselves from competitors by staking out positions on the mobile web. The mistake that many startups, local and regional companies make is assuming that mobile marketing is too expensive or complicated for any but Fortune 500 companies to pursue.

Not so! If you already have an effective web presence you are only a few steps away from being able to effectively market your company on smartphones.

In the next article in the series, ‘Website Design for Smartphones – Part 2′ we’ll explore the goals of an effective mobile website.

Posted on February 15, 2010 - by David Etheredge

Website Design for Smartphones – Part 2

Goals of Effective Mobile Websites

 

For the most part web users and mobile users are different animals. One’s a hippopatamus comfortably floating in the security of their home or office (or the local Starbucks) grazing on content for minutes and minutes at a time, wandering about as their whims or needs take them. The other is a cheetah dashing at top speed after a specific target, eyes on the kill. Hippos browse, cheetahs hunt.

Clearly this is a generalization, but it is an effective one for analyzing usage patterns for mobile and traditional websites. It all comes down to a single factor – speed. How fast does the site load? How easy is it to determine what content is available on the site and where it can be found? How consice is the messaging? Hippos have minutes or even hours to find and absorb what they need. Cheetahs have seconds.

If a mobile user cannot find and assimilate the information they need in 60 seconds or less, your website has failed as an effective mobile marketing tool.

With this assumption in mind, lets take a look at the primary goals of a commercial webite:

1. Branding.
2. Marketing Communications.
3. Lead Generation & Sales.
4. Productivity Enhancement.
5. Content Distribution.

The purpose of Branding is to create a kind of pavlovian response in consumers so that when they think of a service or product that your company offers, they automatically jump to your brand instead of some competitor. For a lot of consumers, when they hear the word “insurance” they immediately hop to “Geico” or “Aflack” depending on whether or not they have a bigger soft spot for geckos or duckies. The height of success in branding is when consumers start using your brand name (Coke, Frisbee, Kleenex) as the common term for an entire product segment (soft drinks, flying disks, tissues).

In the world of modern marketing where entertainment is king, branding is all about crating an image that is cooler, funnier, sexier or more outlandish than the other guys. Getting noticed = successful advertising. Getting noticed repeatedly = successful branding. For mobile media, this means giving your customers a reason to come back to your site over and over until your brand is a fundamental part of their regular routine.

Of all of the goals associated with successful mobile marketing, Branding is the hardest to achieve. But it’s also the most valuable because it is the primary method by which a potential customer becomes a life-long customer. Good branding through a mobile website means giving users a compelling reason to come back to your site over and over, even if they aren’t necessarily making a purchase.

Coca-Cola does this by creating mobile games and other entertainment applications. Nike does it by offering applications that help athletes train. GoDaddy does it through “adverporn” by parading a never ending stream of “slutty” vixens in front of male consumers in a manner that suggests you’ll eventually see Danica Patrick having hot lesbian sex if you just come back to their website often enough.

All of these methods boil down to a simple rule made famous by the film ‘Field of Dreams’ – build it and they will come. The “it” is compelling content. Create entertainment, educational or productivity content on your website that provides real value to users and they will visit your site repeatedly. Next to simply providing a better product or service than your competitors, the goodwill you create with web visitors in this fashion is the most effective way differentiate your brand in the marketplace.

Marketing Communications is simply the process of telling consumers who you are, what you do and why they should choose you over your compeitors. Truly effective marketing communications drive action, such as getting customers to generate a lead through an email form, to pick up the phone and call your sales force or to close an online or offline sale. Bad marketing communications create unecessary impediments to actions and in the worst case will cause a potential customer to leave your website with the attitude that you are not a company with which they wish to do business.

Website design and marketing communications are not the same thing.  Many web designerers have no understanding of how to properly drive desirable consumer behavior because they have no experience or formal training in sales or marketing. Relying on a designer who is not a trained marketing professional may result in the development of a website that is so poorly conceived that it is a deterrant to potential customers.

It is often better to have no website at all, than to have one with poorly concieved messaging. This is particularly true of mobile websites where you literally have seconds to communicate to a visitor why they should choose your company over your competitors.

For the vast majority of businesses, Lead Generation & Sales are the most important functions of their website. All the content and messaging in the world means nothing if you are not able to eventually convert visitors into sales.

In the mobile realm, the KISS principle fully applies. Searching for, learning about and buying products using a smartphone or other mobile device should be the simplest process possible. For traditional website users, there is a wealth of data informing us that a measurable percentage of potential consumers are lost for each additional step required of the user during the ordering or checkout process.

For mobile users the importance of this lesson cannot be understated – generating a sale or a lead through a mobile device must be so simple and easy that even a South Carolina beauty queen can do it.

It only takes a few minutes for a competent business person to start thinking up ways that Smartphones could be used in the field to cut costs or enhance productivity for just about any business you can imagine.

Combine a GPS locator with a digital camera and an easy to use online form and drivers can send a report to both the police and their insurance company complete with exact location, photos of their car and the other parties insurance, driver’s license and contact information just seconds after an accident occurs.

The potential for using smartphones for productivity enhancement is mind boggling and over the next few years a billion dollar industry is certain to emerge developing smartphone applications just like the one described above. Smartphone application development is a topic we’ll explore in another article, but for now the important thing to understand is that the first step in creating and distributing smartphone applications is to build a mobile website where users will be able to find, learn about and download such applications in the future.

Finally we have content distribution which is the process of making media and data available to users in various forms including articles, pictures, videos and audio files.

For many businesses content distribution is not currently of primary importance. But for newspapers, tv & radio networks, universities, the blogosphere and the entertainment industry at large, content distribution is the cornerstone of their surival. For such organizations, insuring that online content including news articles, video segments and radio shows are accessible and easy to use on  smartphones will be the difference between success and failure in an online world dominated by mass market mobile users.

And now we come to the heart of the matter – the user. Mass market mobile users have a disease, and the only cure isn’t more cowbell, its a fever. Or to be exact a F.E.V.R

FEVR is an acronym for “Fast Easy Visual Results”. Clearly, making a website load fast, easy to use and understand, visually stimulating and results oriented should be the absolute top priority of every web designer whether they are developing for computer browsers or smartphones!

But it’s not.

Websites are generally designed around text and not graphics. Search engines like text. Programmers like text. Web browsers like text (“http” stands for “hyper text transfer protocol”). Look at the vast majority of websites and you’ll see that the text to graphics ratio is routinely 2 or 3 to 1 or greater.

But people don’t like text so much, they like pictures.  There’s a reason why proud parents open up their wallet to show you photos of their kids instead of handing you a photocopy of juniors birth certificate. For human beings, pictures are a fast, easy and fun way to share information.

Websites that are designed around text are fast for web browsers to load and easy for search engines and computers to process. But if you want to make a site fast and easy for people, you need to build it primarily around graphics, not text.

What this means is that most modern day websites are too complex and too text heavy to drive effective results with mobile users. To drive results, a mobile site must be fast and easy to use and for people, fast and easy equates to a visual medium. Fast, Easy, Visual Results – FEVR!

The good news is that your existing website may already contain most of the content (pictures, multimedia and copy) required to build an excellent mobile website. The bad news is that building a good mobile website is more akin to creating a printed marketing piece like a brochure, sales kit or catalog, than it is to building a traditional website. In other words, you probably need to redesign your existing website if you wish to effectively engage mobile users.

To learn more about how to build a mobile website, check out ‘Website Design for Smartphones – Part 3′.

If you haven’t already done so, you may find it useful to read ‘Website Design for Smartphones – Part 1‘.

Posted on February 14, 2010 - by David Etheredge

Website Design for Smartphones – Part 3

Website Design for Mobile Devices

So how do you build a good mobile website? In part this will depend on your market and your consumer, but there are general principles that can help guide you along the way;

1. Navigation on a mobile website should be as simple and intuitive as possible. You cannot ask mobile users to “figure out” how to find content on your site, it must be obvious. Mobile Users know exactly how to exit your mobile site and if they can’t figure out how to get what they want immediatly, that’s exactly what they will do.
2. Where possible, use pictures, not text to communicate with mobile users. Text should be used to supplement information on your site, but the more graphically rich your mobile site is, the more effective it will be at quickly and easily driving user behavior. This advice runs counter to generally accepted best practices for traditional website design because search engines rely almost entirely on textual, not graphical, content for determining search rankings.
3. Optimize mobile sites for real users first, not search engines. Many of the worst practices in traditional website design orginated from the need to optimize websites so that they would rank well on search engines. Google and other search engines have spent years attempting to retrain the web design industry to build website for people and not search engine spiders. Although search optimization will still be an important part of mobile website design, it is essential that it take a back seat to human usability factors.
4. Understand the specific  goals of mobile users and design your site to accomplish those goals as quickly and efficiently as possible. When a person on a smartphone visits your website, it is likley that they are looking for something very specific (contact information, driving directions, pricing or other specific informaton on products or services you offer, customer support, etc.). Where traditional websites may focus on “selling” customers on a company, product or service, a mobile site needs to help customers go directly to the information or content that they require.
5. Insure mobile content is “light weight” so that it loads as quickly as possible. With near universal access to broadband in the U.S., traditional websites have increased in size and complexity as the use of Flash, streaming audio and video and other interactive media has become commonplace. Content load times that may be acceptable to a personal computer user on broadband may not be acceptable to a mobile user on a wireless network.
6. When in doubt, follow the “FEVR” principle of mobile design. Make your mobile site fast and easy to use, communicate visually using graphics as much as possible and drive user behavior towards very specific results. Fast, Easy, Visual, Results.

Now that the general recommendations are out of the way, let’s get into some specifics. The following methodology is certainly not the only way of designing a mobile website, but we believe it is an effective way to do so.

Mobile Website Structure

The vast majority of mobile websites can be built around the same core structure:

1. A home page
2. A contact us / locate us page or section
3. A products or services page or section
4. A “who we are / what we do” page or section
5. A “why us?” page or section

Home Page: The home page should display the company logo, a short descriptive tagline, a graphic that visually underscores the organization’s products, services or area of interest, and navigation to the other core pages or sections of the site.

Contact / Locate Page or Section: The contact us page should allow the user to directly contact the company by phone, text message, email and/or live chat (the more options the bettter). For brick and mortar companies, a “locate us” function should be included that allows the user to generate driving directions in real time from their current location to the nearest store or office. In cases where the user is encouraged to connect directly with a specific individual at the company (Real Estate, Insurance Brokers, Lawyers) a personal bio with pictures and contact info for each member of your “team” should be included.

Product / Services Page or Section: Structure of the Product / Services section of a mobile website will vary greatly from business to business. In some cases, a list with short descriptions may be sufficient to drive users to an event that generates a lead or sale for your company. In other cases a full online store may be appropritate. Whatever the case, product and service listings must be easy to search or filter on according to the user’s need and they must be presented in such a manner that the user can quickly guage their interest and move on to the next item.

Unlike web stores, where users can potentially view a larger number of products or services all together on a single page, mobile users will probably be required to flip through a series of items one after another. As a result it is essentail that mobile product and serivce offerings be segmented in very precise categories so that users can quickly drill down to the exact items they are looking for by selecting the appropriate category.

“Who We Are / What We Do” Page or Section: One of the worst mistakes that companys make on traditional websites is failing to clearly and simply state who they are, what they do and where they conduct business. A mobile website should include a page that quickly and clearly provides this information to potential customers. The more specific information a user has about a company, the more likely a transaction is to occur. Websites that omit this information, either intentionally or by design, come across as potentially being undependable or “shady” (and they often are!)

“Why Us?” Page or Section: Another big mistake in website design is failure to provide sufficient reasons why a user should choose your company over your competitors. A “Why Us?” section may provide customer testimonials or references, links to your profile on organizations such as the BBB or Dun & Bradsteet, promotional offers and coupons, or it could include a portfolio or your work, a list of clients or a summary of recent projects. In any event, giving potential clients some reason other than just price or product selection to pick you over your competitors is almost always an excellent idea.

Obviously you don’t need to actually call your Why Us section, “Why Us”! For SavvyDog Design’s iPhone website, our “Portfolio” section is used to provide visitor’s with a compelling reason why they should choose us over another design company.

There are other types of content you may need beyond those mentioned above (for example Publishing sites will require sections for various types of content they distribute), but in general these five elements will form the core of almost every good mobile website.

 Mobile Webpage Structure – Introducing Mobile Cards and Decks

So far throughout this series of articles we’ve struggled to differentiate traditional web design from mobile web design while using the same terminology for both processes. This can certainly be confusing, so internally we’ve decided to change the way that we refer to structural elements on mobile websites.

The terms “page” and “section” are derived from books and other literary formats and their use stresses the textual nature of traditional website design. If, as we’ve proposed previously, we are to think of web design for mobile devices in a more graphical way, then it makes sense to refer to ”pages” and “sections” in a way that accentuates the principles of effective design for the mobile medium. To this end, we refer to mobile pages as “cards” and to sections on a mobile site as “decks”.

Whether you look at playing cards, postcards, greeting cards or collectible card games like Magic the Gathering or Yugio, its evident that printed cards often feature a “graphic heavy” design principle where information is communicated through pictures first with text used in a supporting role or not at all. Such cards also tend to be restrictred to a small size that can easily be taken in and understood in a glance. Finally, all cards of a similar type tend to follow a very formalized structure designed to pack a lot of information into a small, but well organized area.

Sounds a lot like an iPhone screen doesn’t it?

And when you have a large number of cards of the same size and type, you typically organize them into a “deck”, which, assuming you are dealing with a liminted number of cards, is an excellent structure for viewing a series of cards one after the other until you find the one you want.

Now you might be saying to yourself, “who cares what terminology you use to describe pages and sections in a website?” The answer is that in the design world, the name we give to something we wish to create often informs our perception of how that element should be designed.

The term “page” suggests to a designer that they should follow literary principles; a lot of text with some or no graphics in support and a variable document length depending on the amount of text involved.

The term “card” suggests a medium where graphics are more important than text, where there is a very limited amount of space in which to work and where a rigid format should be enforced to ensure quick, easy assimilation of information depicted in the design.

The use of the term “deck” instead of “section” enforces the idea that all similar cards on a mobile website (such as products, items in a portfolio, or team bios) should follow the same layout and be organized in a such a way as to allow the user to easily “flip” between them in order to quickly locate and “pull out” the one they are looking for.

So now that we’ve explored the structure for mobile websites, we can get down to the last and most important bit – the actual development process.

Mobile Website Development

1. Project Specification – work with a Marketing professional to define the primary goals of your mobile website, outlining the specific user activities that the site should drive, such as lead generation, calls to action or product sales. Define the simplest possible path(s) for users to achieve the desired activities and avoid building unecessary or frivolous content into the specification. Also include a detailed list of the types of mobile devices you wish to specifically support with your mobile website (you will probably need to discuss this with your mobile developer in advance as device support is a complex issue).
2. Development Specification - working from the Project Specification, have a User Interface Designer or Website Architect create and provide you with a site map that lists every card or deck to be included in your mobile website and a navigational structure that clearly shows how users will navigate between various elements of the site. In addition, the Development Specification should discuss any user activity that can take place on any card in the site which will require additional coding or development (such as e-commerce, database integration or interactive media). Revise the site and navigational maps until they accurately represent the entire mobile site you wish to build.
3. Graphic Design – work with a Graphic Designer to develop the artwork and layouts for the home page, each deck template (a consistent graphical structure within which all cards of similar content will be built) and all individual cards in the site that are not part of a deck. Where necessary, use placeholder artwork and text until the general elements of the design are completed and approved.
4. Working Shell (optional) – work with an HTML coder to create a working shell of the site that allows users to navigate between all of the decks in the site. For small sites, this step may be unecessary, but for large, complicated sites, testing navigation and site structure in this manner prior to building out all final content can save time and money in the event the navigational design has some unforseen flaw.
5. Content Placement – work with a Graphic Designer and a Marketing communications specialist to author / edit and layout final content for every card in the site. Final layouts for cards can be viewed and approved in static form (.jpg or .pdf for example) before they are handed off to the coder to create the BETA version of the mobile website.
6. BETA Website – work with a mobile applications / website developer to build the final version of your mobile website. Make certain the developer provides you with a fully functional version of the website (a BETA version) which you can test through a web browser on a personal computer, before the site is published for mobile use. Also, make sure the developer will test to find and fix any “bugs” with the site so that it performs as intended on the mobile devices / smartphones you intend to target.
7. Go Live and QA Test – have your developer take the website live and then immediately allocate the time and resources necessary to self test your mobile website on all target devices possible. In many cases developers will warranty their work from defects which arise from development issues for a period of 30 – 60 days but after that, the client will be responsible for the cost of fixing any issues which are not identified during the warranty period. It is almost always in the client’s best interest to perform (or hire a third party to perform) thorough Quality Assurance testing even if the developer provides testing as a part of their service.
8. Show Off Your Mobile Site – Congratulations, you’ve got an awesome new sales tool with which to taunt your competitors and woo new customers! Whip out your iPhone and impress some random person in a bar with your new site.

If you haven’t already done so, you may find it useful to read the first part in this series - ‘Website Design for Smartphones – Part 1‘.

Posted on February 8, 2010 - by Lisa Nalewak

Resolution

This is the 5th in a series of articles on Graphic Design specifically written for Business Professionals.

The topic of “Resolution” is probably the most common area of misunderstanding among people when dealing with graphics, even more so than color formats. Resolution of an image refers to the density of color information found within a certain area of the graphic. The higher the density of color information, the sharper and more clear the image. The lower the density of color information, the lower the sharpness and detail of the image.

Measurement Terms

There are two ways to communicate resolution. One is using a DPI value, or dots per inch value. (A dot is equal to a pixel on your screen, which displays at 72dpi). The more dots per inch in an image, the higher the image’s resolution. If you can envision this it makes sense: squishing 600 separate color dots in an inch of space gives you more precise control on the color in that area than if you had only 100 dots. DPI is the standard that most people use because it quickly communicates the image’s overall quality and its intended use.

Another is by using the width and height of an image in pixels or it’s Pixel Dimensions, and it’s actual size in inches. “Actual Size” refers to the intended physical dimensions of the image when it’s displayed, either electronically, or in print.

For example, a 900 pixel x 900 pixel image that is 3 inches x 3 inches in actual size is going to be a higher quality image than a 300 pixel x 300 pixel image at 3 inches x 3 inches in actual size. If you have acute math skills, you can probably already see that you can use this information to determine an image’s DPI, and that they are in fact two ways to measure the same value. For those that don’t see, we’ll touch upon how to do that in a few paragraphs.

Another measurement of a graphic is its “File Size”. This will be reported in kilobits, or megabits, and sometimes even gigabits. This is the actual amount of memory the image’s file takes up on a computer. File Size is different from DPI, Pixel Dimensions and Actual Size values, so don’t get confused. The only relation File Size has to resolution is that higher resolution images take up more memory space, because there is more color data to remember. File Size is not needed to determine DPI or to alter image resolutions.

Resolution of an Image

Resolution is important because different types of graphic applications require different resolution values for graphics. This ensures they are viewed correctly and look their best in their different applications.

Web based (or electronic) graphics need to be 72dpi at actual size. This is for two reasons, 1) so that the image’s file size is as small as possible for good load times and 2) because your average monitor’s resolution is 72dpi and it will generally display graphics at 72 dots per inch, and no more.

A printing press needs much more color information to make type and other small details clear and crisp when viewed at arm’s length. So, graphics for printed material need to be a minimum of 300dpi at actual size. Graphics printed at a lower resolution than 300dpi will look “fuzzy” or pixilated.

The formula for determining DPI is:

DPI = height in pixels / height in inches OR width in pixels / width in inches.

You can use either dimension, because graphics are proportional, and the width’s DPI will always be the same as the height’s DPI.

Determining DPI of an existing graphic

Let’s say we have a graphic on our system for which we’d like to determine the DPI value. We open up our graphic in a software program like Photoshop, and check the Image Size. This will give us the dimensions of the image in pixels, for both width and height. In our example, the image is 900 pixels wide x 900 pixels high.

Next, we use the rulers in our software to determine the actual size of the image. Since we are interested in a dots per inch value, and not a dots per centimeter or millimeter value, I set inches as my ruler unit. I open up my ruler and I see that my image is 3 inches wide by 3 inches tall.

Next, to determine the DPI of this image, I solve the following equation:

DPI = 900/3, or 300 pixels/inch. Simple enough!

Our image is 300 dpi at the actual size of 3” x 3”. This means that if we were to print this image, it would print out at 3” wide x 3” wide at 300 dots per inch.

Don’t Mix and Match!

Now, if we were to display this image on a monitor, what do you think would happen? Since monitors are set to display images at 72dpi, and not 300dpi, the monitor would display our image at 72 dpi, meaning that the physical size of the image would need to increase to get all 900 pixels of information along each side to display. So it would end up being a much larger physical size than 3” x 3”. In fact, it would display that image at 300/72nds the physical size of our print image, or at 4.17 times the size of the original image, or at approximately 12.5” x 12.5” inches on our monitor. This is why images that are set up for print look so much bigger on a monitor than they do when they are printed.

The reverse is true as well. If we have an image that is 3” x 3” in actual size, but it’s been created to display on a monitor, and its resolution is 72dpi, what do you think will happen when it’s printed out on paper at 300dpi? Yup, it will print at 72/300ths of the size it appears on a monitor, or just under 25% of it’s actual size, which is .75” x .75”. This is actually smaller than most postage stamps! A little hard to see, no doubt.

This is why it is terribly important that a graphic is created using the correct DPI measurement for whatever use it’s intended.

File Size and Resolution

As mentioned above, the File Size of a graphic is affected by its resolution. The higher the DPI, and the larger the actual size of the graphic, the more color information the file needs to incorporate, so the bigger the actual file size.

Another factor is the amount of color, and the amount of color difference in a graphic. White does not take up much memory, because it is basically void of color to a graphic program. Black is actually a mix of many colors, particularly in process printing, so it takes up a lot more memory than white. If you have a broad range of different colors and lots of color detail, and colors change in almost every pixel of your graphic, the file will be much larger than if there are big areas of the same color and less color diversity.

Once you become familiar with resolution and graphics, you can sometimes get a feel for a file’s DPI and Actual Size by just viewing the graphic to see what it looks like, and then by checking its file size, but this comes with practice and is NOT meant to be a way to determine true DPI or Actual Size. It’s merely a way to just eyeball an estimate before you begin your actual measuring.

Posted on February 1, 2010 - by Lisa Nalewak

Spot Color – When Color Saturation and Consistency is Key

This is the 4th in a series of articles on Graphic Design specifically written for Business Professionals.

Spot Color refers to a printing process that uses specially colored inks to attain a very specific color when printed. Each individual ink is a unique color, and is a careful combination of pigments that are mixed in very exact proportions each time the ink is created, so that the ink is always the same color when laid down on paper, or on other substrates. Unlike process color, which uses cyan, magenta, yellow and black inks to lay down dots on paper that, when viewed from a distance, can create the entire color spectrum, spot color inks are usually laid down on paper to represent its color, and its color only (or a screen thereof, which is a lighter version of that color).

There are a number of companies that produce spot color inks. The largest and most well known in the design industry is Pantone (www.Pantone.com). Pantone has created a color matching system that is used by designers and printers to guarantee exact color matches whenever an ink is mixed and printed. Pantone sells Pantone Matching System (or PMS) booklets and “color fans” that include chips of all the different inks they produce and how they look on coated and uncoated stocks, so a designer can use these books to see a color when it’s printed, and can show a client how a color will look in “real life”, rather than how it looks on an electronic proof of a piece viewed on a monitor (monitors use RGB color, which will look different than the actual printed color – see my post on RGB color for more information).

These booklets also contain the “recipe” for the colors, so printers know how to mix the inks correctly by using specific amounts of Pantone supplied pigments. Using one of these books to pick an ink color is very much like going to the paint store and picking a paint chip of a color you like, and then bringing it to a person who then mixes it following a very specific “recipe” for getting that exact color paint, every time.

Spot color inks can achieve special effects like neon brightness or a metallic sheen by adding special compounds or pigments to the ink. These effects are not achievable using four-color process (or CMYK) printing. Whenever you see neon ink, or ink with a metallic sheen, it was created using a spot color ink. Whenever you want this sort of effect in a printed piece, you must use a spot color ink.

You can mimic a standard spot color (one without special properties like neon brightness or a metallic effect) by using a combination of the four process colors (cyan, magenta, black and yellow) to achieve the desired color. There are two issues with this, however: 1) color saturation and 2) color consistency.

Color saturation is a measure of a color’s “brightness”. There are some pigments (particularly blues) that when used in a spot color ink are far brighter and more vibrant than can be achieved by trying to mix the same color using the four process colors inks. For example, the bane of every designer is a pantone color called Reflex Blue. As a spot color, it is a vibrant, deep, indigo blue. When printed in it’s four-color equivalent, it’s a light navy blue. The two look very different. There is no color combination using CMYK process inks that can attain the equivalent of Reflex Blue. If you want the Reflex Blue color in a printed piece, you will need to use the Spot Color ink to achieve that result. This is very difficult to explain to someone who doesn’t understand the limitations of four-color process printing versus spot color printing, without seeing the two results printed side-by-side.

Color consistency is how similar a color looks each time it is printed. When process color inks are used to mimic a Spot Color ink, there can be variations in the way the resulting color looks. For example, if the pressman recently filled the magenta ink well on the machine, but the cyan well is getting low, the resulting color may run “hot” on magenta, meaning that the color will have a very full amount of red in it and look “more red”. If you switch the amount of inks in the wells, and the press is full on blue but is getting low on magenta, your color may run “hot” on cyan, and the color will have a bluer look to it. In addition, a pressman will adjust the relationships between the intensities of the four process colors before starting the printing run, so that the resulting printed pieces are as balanced as possible (reds print red and not purple, blues print blue and not green, etc.). While the press is operating, the pressman will also do their best to maintain the color consistency from the first piece to the last. These tweaks during the print process mean that each time a job is run, there is the opportunity for the colors to be balanced differently than in previous runs. If you compare, side-by-side, the same printed piece run two different times on two different four-color process presses, it is not uncommon to see slight differences in colors that should be the same. In contrast, spot colors will almost always look exactly the same.

Because spot colors can have unique color properties, are generally more vibrant than colors created using process color inks, and are more consistent when printed, they are used most frequently to color corporate identity materials. For some companies, particularly large companies with very well known retail brands (McDonald’s, Nike, Coca-cola, etc.), it is extremely important that their brand always look the same. It would not do to see a McDonald’s logo where the red looked a little bit more purple than it should, or have Coca-Cola’s red seem a bit more like an orange. To ensure that these colors always look as consistent as possible, designers are required to define specific spot color inks for these elements when creating art for printed collateral.

Spot colors are also used when consistency is important in evoking a specific response. It is wise to use the same, vibrant spot color blue on an investment firm’s annual report each year, creating a feeling of stability and consistency that is important to a company like a financial institution. It is a good idea to use a spot color for the sunny yellow portion of a travel company’s letterhead, ensuring their customers have the same emotional response each time they interact with communications they receive from that travel company.

Spot colors can also be printed in “screens” or “halftones”, meaning you can print the color in a lighter version of itself by adding spaces between dots of the color to let the paper background show through. On a white piece of paper, a Kelly green spot color ink printed at a 70% screen (meaning 70% of the background will show through the area the ink is printed on) will look like a light mint green. A bright red spot color ink printed on white paper at a 60% screen will look pink. You can sometimes use screens to make a piece appear like it was printed with more than a single spot color ink (like a Kelly green and a mint green) by using different screens of the color in a design.

You can also overprint spot colors, meaning you can print one spot color ink on top of the other during a press run to get a new, third color. In general, you’ll get the best overprint results by using screens. For example, you can use a screen of a spot color yellow and a screen of a spot color blue and to get a green where they overlap. Overprinting is a fairly advanced production technique, and your designer needs to be very knowledgeable about spot color printing in order to realize expected results.

When graphic designers create graphics to be printed in spot-color, they “set” the colors for the graphics they create using “custom” inks that are defined inside their graphic design programs. When using Pantone inks, they set a color for a graphic by picking it’s color code out of a list their design program will display and applying it to the selected graphic. This way, when a printing press outputs these files as printed materials, it understands that it must lay down that specific spot color ink in the areas the designer defined to include that spot color inside the graphics file.

What does this mean to me?

So what things do you need to keep in mind about spot color that’ll make your life easier when you purchase design services or printing services, or need to use or modify art you already have on file?

1)      Spot colors allow you to achieve special effects, like neon colors and metallic inks, in your printed collateral.

2)      Spot colors are generally more vibrant than colors created using a combination of process color inks, so they are good to use when rich and bold color adds to the overall effect of a design.

3)      Spot colors allow you to maintain excellent color consistency across multiple printed pieces and different print runs or output methods.

4)      Because of the special properties of Spot Color inks, they are best used when color vibrancy and consistency are very important in the pieces you are printing.

5)      Spot colors are generally more expensive to use than four-color process colors.

6)      You can add spot colors to four-color process printing, as 5^th, 6^th and even 7^th and 8^th colors in a print job to embellish a piece, or add special effects (like a metallic rule line on a page with full-color photographs). The more spot colors you add to a press run, the more expensive the final piece.

7)      Spot colors can not be used to achieve full-color printing or inside of full-color graphics (for example, you can’t make the navy blue jacket someone is wearing in a full-color photograph Reflex Blue instead by “applying” that color to the jacket.)

8)      You should NOT use spot color art set up for printing in any document you’re creating to be displayed on an electronic device (PowerPoint slides, web graphics, etc.) It’s best to convert these graphics to their RGB equivalents so that they display correctly and so you can tweak the colors to most closely match their Spot Color equivalents.

9)      SPOT COLORS LOOK DIFFERENT PRINTED ON PAPER THEN WHEN VIEWED ON A COMPUTER SCREEN. When an able computer application automatically converts Spot Color art you are viewing to its RGB equivalent in order to display it on your monitor, the colors will look different than they do when printed. In some cases, the color variation will be very noticeable, while in other cases it’s not as noticeable.

10)  SPOT COLORS LOOK DIFFERENT PRINTED OUT ON A LASER OR INK JET PRINTER THAN THEY LOOK WHEN PRINTED BY A PRINTING PRESS. That is because your desktop printer is converting the spot color ink to its CMYK equivalent for output, and as I explained above, some spot colors translate very poorly to CMYK color because CMYK inks can not approximate the vibrancy of spot color ink pigments.

11)  It is imperative that you check the spot color in a booklet prepared by the ink vendor so you can see the exact color it will be when you print it. DO NOT RELY ON YOUR COMPUTER SCREEN OR YOUR DESKTOP PRINTER to proof color for spot color artwork. I should really repeat this as point #12 too, because it is a very important thing to remember. It’s an extremely common mistake people make unknowingly, and then wonder why their printed materials don’t look the way the expect them to look when they get them back from the press.

How to handle Spot Color artwork for electronic display

Yes, this paragraph is a repeat of the one from my RGB and CMYK posts, but I’ll say it again: A good designer will ask you how you plan to use the art they are creating for you, and then will deliver you the art in multiple file formats and in multiple color formats that are matched as closely as possible. In this way, they assure that you have the art you need for any application, whether it’s print or electronic so you don’t experience color surprises down the road.

If you have Spot Color artwork that you need to display electronically or have printed in process color, and you don’t have it in RGB or CMYK format, a knowledgeable designer will be able to convert your Spot Color file to RGB and/or CMYK for you. In most cases, color “rebalancing” will be necessary. The graphic quality of the art you give your designer will also affect the outcome. Higher resolution images generally give better color conversion results.

How to handle Spot Color artwork for Process-Color printing

Because the CMYK equivalents of Spot Colors are often quite different than the Spot Color inks themselves, you must be SURE you want to print your Spot Color artwork using CMYK inks, instead. If you are, ask your designer to color balance the artwork so that when it prints, it’s as close a match as possible to the original Spot Color inks. Some spot color inks translate very poorly to process color (blues, purples and reds are the worst) others aren’t quite as bad, though you will always notice a difference, no matter what the color (unless it’s cyan, magenta, process yellow or process black). An experienced designer will understand how to do this, a bad or inexperienced designer will not.

Continue to the 5th article in this series.