The Tendo View » design

Visual design terminology: Talk the talk

Selena Welz — Tue, 07 Sep 2010 05:41:46 +0000

Jargon is an expected component of any specialized field. But visual communications is, I feel, a special case. Many of us have to deal with visuals in some aspect of our jobs, even if we aren’t actually designers or users of design tools like PhotoShop.

Unfortunately, I’ve noticed a lot of garbled use of visual design terms. In fact, I’ve observed individuals who appear to be communicating because they’re using the same terminology, only to find later–when deliverables are handed in–that they were going in completely different directions.

Below are some commonly misused terms, and a few resources to help you keep your design terminology straight.

Color terms—Color terms are the most commonly misused and the least understood. Many people don’t even realize that there is a difference among them. But there is. And knowing the differences might help out when it comes time to talk color. Here’s a quick rundown of the basics:

Chroma—the saturation or intensity of a color.
Hue—the color of a color; the basic true pigment.
Shade—a hue mixed with an amount of black. For example, maroon is a darker shade of red.
Tint—a hue mixed with an amount of white. For example, violet is a tint of purple.
Tone—a hue mixed with an amount of grey. For example, rose is a tone of red (or pink).
Value—the relative lightness or darkness of a color. A bright blue and a bright green have a different hue, but a similar value. If you removed the hue, you would be left with a similar gray. (Have you ever printed out a PowerPoint in black-and-white and you can’t read the bar graphs? It’s because the bars of color have the same values.)

Infographic—Short for information graphic. An infographic is a specific type of graphic that is intended to visually display information, data, or knowledge. A bar graph and a subway map are two examples of infographics. Lots of people refer to any image displayed on a website as an infographic, but unless it’s displaying some kind of information, it’s just an image.

Mock-up—A working model or prototype. In a Web design context, a mock-up would consist of an HTML page with the navigation, draft or placeholder text, and visual elements in place. A mock-up would come after wireframes and before the staged Web pages. Mock-ups are often confused with wireframes (see below).

Raster graphic—A graphic file composed of pixels (or little squares of color) on a grid. Also called a bitmap. Each pixel contains color information that adds to the image. Common raster file types include .jpg, .gif and .tiff. Raster files with high resolution are packed with color information, making them ideal for print production. But because they have a fixed resolution, they are limited in terms of their ability to scale. Scaling a raster image too large will result in jagged edges or pixelation.

This term isn’t so much confused as typically met with a blank stare. But it’s helpful to understand which types of graphic files are used in different formats and why.

Vector graphic—A visual image composed of paths (or lines) anchored by points. A vector image is created by the relationship of the points to one another, so it can be infinitely scaled up or down without loss of image quality or pixelation (no pixels!). Adobe Illustrator, for example, is a vector-based graphics program. Because of their scalability, vector graphics are ideal for logos and are often used in Flash. Examples of vector file types include .svg, .vlf and .swf.

Similar to the term raster, the term vector is more unknown than misunderstood.

Wireframe—A visual representation of how the navigational elements will be laid out on a webpage. Usually consisting of simple boxes with perhaps a few labels, a wireframe will indicate where the navigational and content elements will be placed. Creating a wireframe is an important part of the planning process prior to developing actual pages. Here are some wireframe examples. Wireframes are often confused with mock-ups.

Getting familiar with visual design terminology is a great first step toward ensuring a successful project. Here are some reliable glossaries to help you determine the meaning of specific terms in the context of visual design:

Have any funny examples of misused visual design terms or additional resources to offer? Post a comment.

How to collaborate better with designers

Selena Welz — Tue, 31 Aug 2010 19:27:03 +0000

For many people, the most fun part of creating a website or publication is the visual design aspect. I know it is for me. It’s what I call “fun” creativity (as opposed to “not so fun” creativity, such as trying to transform a product data sheet into an interesting and engaging article for readers).

And yet because visual design brings together people who are visual thinkers and people who are, well, not visual thinkers, projects can often go awry.

Understanding and embracing the creative process, and keeping the channels of communication open, are the best ways to ensure a design that will meet your goals.

In that vein, here are a few tips I’ve picked up from working on creative projects.

Tips for working with visual designers:

If you’re not sure, ask. Visual designers don’t expect everyone to know their jargon any more than a rocket scientist does. So don’t worry about anyone thinking you’re ignorant if you need to ask what sans serif means. Designers are always happy to explain terms. If they aren’t, find a new designer.
Use examples to illustrate what you mean. My interpretation of “modern” or “fresh” might be different than yours. It’s always helpful for designers if you can point out examples of what you mean by certain descriptions.
Define how you’re using visual design terms. Or, ask your colleagues to do so. Many terms are misused, so you might think you’re communicating clearly when you really aren’t. (For example, I’ve seen the term wireframe used to represent everything from a content outline to a fully functioning HTML page mock-up.)
Start with a creative brief. Sorry folks, but “I’ll know it when I see it” just doesn’t cut it. No one expects you to design your project yourself, but you are expected to be able to clearly articulate the goals, audience, key qualities, and/or characteristics of your project for your designer. Otherwise, you’re just wasting time and money.
Be patient. Except in rare circumstances, no designer will produce exactly what you want the first time. And maybe not the second. This back-and-forth process is perhaps the most misunderstood aspect of design (and writing!). More often than not, your ideal design is reached through feedback, discussion, and collaboration that happens during the design process.

By keeping these tips in mind, you can avoid some of the potential pitfalls in the visual design process, and instead focus on the fun stuff. Enjoy!

Have some tips of your own to share, or disagree with any of mine? Leave a comment to tell me about it.

Less is more with YouTube redesign

Siobhan Nash — Tue, 06 Apr 2010 21:27:04 +0000

I have to admit, I never got the fascination of YouTube. What I didn’t understand was how my friends, and the masses in general, discovered these video gems. Really, my trouble with YouTube was that the site was hard to use. For me, it was like walking into a thrift store. I knew there were great finds to be had, but I couldn’t get past all the clutter.

With YouTube’s recently redesigned website, it’s like walking into a brand new department store that’s bright, spacious, and nicely laid out.

The new YouTube site exhibits many of the best practices we at Tendo preach to our clients about website design. Most importantly, it’s clean and well organized. Gone is the clutter that overwhelmed the old site design. The use of mouseovers to reveal additional actions is a great device for taming clutter.

The most often used user tasks are easy to find. Also, the site presents users with options (for example, viewing the next video) at the appropriate times and doesn’t distract them with unnecessary information or actions.

Providing users with a clean design and simple navigation will keep them engaged so they spend more time on your website. I’m going to go watch the much-talked-about videos of my friend’s dog now that I’ve found them.

6 good infographics sources–and how USA Today fooled everyone

Bill Golden — Thu, 22 Oct 2009 22:30:09 +0000

I distinctly remember some of the criticism of USA Today when it first launched: the color photography, the short articles, and all of those big infographics. That’s journalism? Do the editors have no faith in America’s ability to read? (See example of an effective infographic to the right)

Well, sure enough, the venerable New York Times eventually switched to color photography. And if you’ve read the Wall Street Journal lately, you know it’s hardly the text-centric newspaper it once was.

One thing USA Today realized, even before the rise of the Internet, is that we humans have become increasingly visual creatures. Nowadays, with screens and information pervading every nook and cranny we inhabit, figuring out how to organize and present that information is more important than ever.

As a result, those big infographics have become increasingly popular. In Information Design Workbook, author Kim Baer nicely summarizes the reasons why. “With all this information flying at us, we’re craving some guidance to help us sort through it. Hence the preponderance of blogs, news aggregators, content-specific RSS feeds, and an even greater need for information graphics and charts to help visually distill information. Editorial direction and thoughtful design can help us sort through and decide what’s most meaningful for us.”

In helping clients develop more effective communications, we’re leaning on infographics more and more. They’re particularly useful on the Web, when you have a limited chance to engage your reader. And visuals can go a long way if you need to communicate complex information, or a lot of it. Apparently USA Today knew something the rest of the newspaper industry didn’t.

I’m working on a mini case study about an infographic Tendo helped produce with a partner, so look for that follow-up post soon. In the meantime, I’ve listed some good resources below if you want to learn more about information graphics, or if you’re looking for inspiration.

Cool Infographics

40 Useful and Creative Infographics

Edward Tufte

FlowingData

Flickr

Information Design Workbook

Sticker envy

Tendo Communications — Wed, 05 Nov 2008 18:46:41 +0000

I was feeling pretty good about getting up early yesterday to cast my ballot, until I received an unexpected hazing once I got to work … about the size of my “I Voted” sticker. It seems that some of my co-workers were significantly better endowed in that department than myself, and weren’t shy about trumpeting it.

I suppose that if voting methods can’t be uniformly implemented—electronic voting versus paper ballots, versus paper ballots in wacky shapes like butterflies—then voting stickers are just as susceptible to similar independence. Still, it’d be easier to take if my once-proud emblem wasn’t so clearly the runt of Tendo’s litter. Heck, everyone else walked in with “I Voted” in three languages.

“Your sticker sucks,” said Chris, in a rare moment of subtle tact.

If there’s a lesson to be learned here about marketing, it’s that design does matter. My sad little oval with the rudimentary and hardly-to-scale corner image of a flag doesn’t even match up to San Francisco’s tri-language sticker, which employs only a tiny star as its lone design element. Head down the Peninsula to San Mateo County and you’ll find a full presidential seal, complete with “I Voted” in the requisite three languages, plus the signifier that it’s a presidential election. It’s also the only sticker to identify where it’s from.

Unless there’s a clearinghouse of generic voting stickers doing gangbuster business somewhere, the San Mateo offering couldn’t have cost much more to produce. And it goes a long way toward showing that effort and execution do matter in one’s final product. Perhaps this is a lesson to learn in campaigning, as well. —Jason Turbow, managing editor

Apple: A Little More Polishing Would Help the User Experience Match the Sleek Design

Tendo Communications — Sat, 01 Nov 2008 18:28:59 +0000

Apple’s website does a great job of maintaining the company’s consistent and powerful branding and provides a lot of engaging content. But like much of Apple’s user interface design, what seems simple on the surface can get complicated fast if you need something specific.

BRAVO

The website follows the same sense of visual simplicity as the company’s products. The home page ensures that the featured product takes center stage with lots of white space, limited copy, and large images. Apple displays restraint by focusing most of the home page’s attention on one product at a time, usually its latest release.

The site places a heavy emphasis on visual design, blending colorful imagery with bold headlines and copy to create balanced compositions on each page. It’s a pleasant departure from the usual column format with pictures in boxes.

The copy is short, decisive, and punchy (if a tad smug at times) and does a good job of tapping that emotional response to Apple’s products that makes its fan base so loyal. And just like all of Apple’s branding, it’s carried out consistently across the site, from the copy to the look and feel.

Because Apple has fewer products to sell (as compared to Dell or HP, which sell hundreds of products to a variety of market segments), the site is easily divided into six segments: the store, three product categories (Mac, iPod/iTunes, and iPhone), downloads, and support.

TRY AGAIN

While the site offers seemingly rich and varied product info, including video and galleries of dramatic product photography, most of it offers more style than substance. Many links on the site, such as the “iPod Your Life” link, lead to pages that are little more than additional branding experiences, yet provide no additional value.

Top-level navigation, such as locating your desired product or service segment, is easy. But cross navigation, i.e. moving from one segment to another without using the top navigation, is unclear, if it exists at all. Beware the hapless user looking for clear links to iPod support in the iPod product segment.

Apple offers a ton of self-help product support on its site, but finding the specific info you need can be extremely difficult. Basic problems are easy enough to locate and solve with the support content, but it ends there. Need to find information on problems that are more complicated? The answers are usually buried deep within the discussion forums.

We have to throw some props to Apple for supporting and maintaining such a robust online community of users, but navigating the vast discussion boards is like entering a labyrinth. Cross–navigation to other discussion boards isn’t possible, and if you do find some useful information, you’d better copy and paste it into another document because you may never find it again. While the moderators do a decent job of responding to posts (and providing links to other posts or other areas of the site that may answer questions), the discussion boards mainly work because of the persistence and helpful nature of other Apple users who have encountered—then solved—a multitude of problems.

Overall, Apple’s site is a branding powerhouse that is presented beautifully and consistently. It stands apart from other consumer electronics e-commerce sites. But also true to Apple’s tendency, a little more polishing beneath the surface would make for a user experience that matches its sleek design.

Hallmark knows its audience, but is it alienating everyone else?

Tendo Communications — Sat, 02 Feb 2008 00:23:39 +0000

For nearly 100 years, Hallmark has been a trusted brand in America, with familiar slogans like, “when you care enough to send the very best.” But now it’s time for Hallmark.com to morph into a brand of the 21st century.

BRAVO

Hallmark.com is primarily geared toward consumers, specifically the Oprah-watching crowd, and they appeal to this group with holiday-themed gifts, reasonable prices, and lifestyle content courtesy of Hallmark Magazine. But they talk to their business customers, too—they have a small section devoted to business sales and potential franchise owners. And in true Hallmark fashion, they cover all their bases with the holidays, even promoting non-Hallmark holidays like St. Patrick’s Day (hey, Mother’s Day had to start somewhere).

The general organization of Hallmark.com is good, with a clean design and a number of useful tools on the site, including a birthday calendar to help you remember important dates, and even the opportunity to have someone else personalize, address, and mail your cards for you. The frazzled moms who frequent the site can use Hallmark as their personal assistant and PDA rolled into one.

Finally, the company wears its “good corporate citizen” banner in the form of a heavily promoted microsite that explores their partnership with (Product) Red, which helps people with AIDS in Africa.

TRY AGAIN

While the top navigation of the site is logical—divided by broad categories like shopping online, searching for a Hallmark store, and the Hallmark Magazine—the left nav seems like a jumble of topics without much order. Holidays and occasions are mixed in with sections like “need it today” and “memory making.” The subcategories, which let users shop by occasion, recipient, and so on, offer a more intuitive shopping experience and a better organizational structure.

I support a company that knows its audience and goes after it, and clearly this site is targeting middle-aged women, but it almost goes too niche. The Hallmark Magazine, for example, gets a lot of real estate, but with departments like “renew,” “nest,” “connect,” and “nourish,” it has no hope of broadening its appeal to younger women or urban women. The Hallmark channel is worse—when we last checked, it featured star bios on Shirley Jones and Patty Duke, to name a few. Is Angela Lansbury next?

Any company that allows its brand to get this staid—are you in the market for a pastel-colored children’s croquet set?—is taking a big risk.