Making $10,000 a Pixel: Optimizing Thumbnail Images in Search Results

In search results, the old adage a picture is worth a thousand words rings true. When it comes to making your search results more efficient to use, more relevant, and more attractive, images reign supreme. There is simply nothing else on your search results pages that can come close to offering the same potential as thumbnail images for dramatically increasing your conversion rates and revenues.

Nudelman, Greg. UXmatters (2009). Articles>Web Design>Graphic Design>Search

Effective Alt Text

It is perfectly possible to diligently apply alt text to every image on a site and create a result that is completely useless. Unless the alt text effectively conveys the information the image displays, it will be ineffective.

Frontend Infocentre (2008). Articles>Web Design>Accessibility>Graphic Design

In Which a Concept Model Makes Me Giddy

Concept models aren't for everyone. When I show fellow designers these artifacts, I sometimes get "You show that to clients?" Like any deliverable, there's a time and a place for concept models. If you're anything like me, however, you think visually. Even if your models don't see the light of day, a good model can help you get a better grip on the problem, or lay some groundwork for your designs.

Brown, Dan. User Interface Engineering (2009). Articles>Graphic Design>Technical Illustration>Sitemaps

Jim Coudal of Coudal Partners

Manufacturing, distribution, marketing, sales, customer contact – all of that is supremely manageable by a very small team. In the traditional model, you have this big corporation where the creative department is in the back, and they’re those wacky people with the Tabasco ties and chattering teeth in their cubicle, and everybody is a little afraid of them because they’re so “wild.” The rest of the company is the marketing, production, distribution, all of that. Well, our idea was that the little creative team could do everything.

Coudal, Jim. Design Glut (2009). Articles>Interviews>Graphic Design>Collaboration

The Art of Icons

Being "minimalist" and "streamlined" is not always most effective. Have you ever written yourself a quick, shorthand note, only to find later that you had no way to unpack your own great idea? Icons work similarly. They are pictures – meant to provide a visual shorthand to users moving through a task. While research indicates that icons are best when initially paired with text to increase recognition and learnability, users experienced with a given set of icons will begin to ignore the text, scanning for and acting from the image alone.

Michaels, Mary M. UI Design Newsletter (2007). Articles>Graphic Design>User Interface

Spatial Descriptions by Children

Drawing a map is cognitively challenging. It requires you to do some abstract visualization.

Katre, Dinesh S. Journal of HCI Vistas (2007). Articles>Graphic Design>Technical Illustration>Children

Ten Tips on How to Think Like a Designer

Below are 10 things (plus a bonus tip) that I have learned over the years from designers, things that designers do or know that the rest of us can benefit from.

Reynolds, Garr. Presentation Zen (2009). Articles>Presentations>Graphic Design

Eleven Ways to Use Images Poorly in Slides

As digital cameras have become ubiquitous, and cheap (or free) photo websites plentiful, more people than ever are using images in presentations. Images are not appropriate for every kind of talk, but even when images are appropriate (such as keynote/ballroom style presentations), people are still making the same common mistakes. So here are some things to keep in mind if you use images in your next talk.

Reynolds, Garr. Presentation Zen (2009). Articles>Presentations>Graphic Design>Visual Rhetoric

Copywriting or Design: Which Gets the Best Results?

Designers believe that if something isn’t working well, and it comes down to changing the copy or the design, it’s always the copy that should be changed, reduced or sometimes nearly completely eliminated. How can I convince my designer co-workers that succinct, simple and memorable words can be just as important as the visuals?

Chartrand, James. Men With Pens (2009). Articles>Graphic Design>Writing>Visual Rhetoric

How to Draw with HTML 5 Canvas

Among the set of goodies in the HTML 5 specification is Canvas which is a way to programmatically draw using JavaScript. We’ll explore the ins and outs of Canvas in this article, demonstrating what is possible with examples and links.

Newman, Jamie. Carsonified (2009). Articles>Web Design>Graphic Design>HTML5

Let’s Call It a Draw(ing Surface)

HTML 5 defines the CANVAS element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want.

Dive Into HTML5 (2009). Articles>Web Design>Graphic Design>HTML5

Stock It To Me

I do think stock photography allows you to quickly add professional looking images with somewhat of a limited budget. However, it is extremely easy to settle on tired overused somewhat ambiguous images (cliche handshakes, “strategizing” business people and towering skyscrapers) or even worse, duplicates of the same picture or people on different (potentially competitor) company branded information.

Noble, Jeff. User Interface Trends (2009). Articles>Graphic Design

The Social Life of Visualization: Part 1

In 2009 we are in the midst of an interesting era for data visualization, particularly as it becomes coupled with the social web. Increasing processing speed, bandwidth and storage capacity are making it relatively simple to render and access visual representations of data. Developers have released libraries of code so we can easily create our own visualizations; and access to all kinds of data is becoming incredibly standardized, particularly through the use of APIs. So as visualization becomes much more straightforward to integrate into online environments, it makes sense to rethink how it can best be used in this setting.

Yuille, Jeremy and Hugh Macdonald. Johnny Holland (2009). Articles>Graphic Design>Visual Rhetoric>Charts and Graphs

Visual Design for the Non-Designer

What can a non-designer do to harness the power of visual design without calling professional help? Quite a lot, says internationally-regarded visual designer Dan Rubin. We called Dan to talk about what design techniques are accessible to mere mortals.

Spool, Jared M. and Dan Rubin. User Interface Engineering (2009). Articles>Graphic Design>Visual Rhetoric>Podcasts

Analysis of Team Design Review

Every other team meeting, three team members get 30 minutes each to talk about projects they are working on, and they get to demonstrate some of the cool things they are integrating into the project. As a team, we look at the project and both learn from what they’ve done, and make suggestions on how they might improve the project.

Pehrson, Paul. Technically Speaking (2009). Articles>Collaboration>Graphic Design>Assessment

Setting Up Photoshop For Web, App and iPhone Development

Most people who have designed websites or apps in Photoshop will, at one point or another, have had issues trying to match colors in images to colors generated by HTML, CSS or code. This article aims to solve those problems once and for all.

Edwards, Marc. Smashing (2009). Articles>Graphic Design>Software>Adobe Photoshop

Rich Typography On The Web: Techniques and Tools

In addition to font stacks, why not replace the heading text with an image, embedded font, or bit of Flash? The methods described below are easier than they sound. And the end result is that the vast majority of users will see the beautiful typography you want them to see. A word of warning, though: don’t use dynamic text replacement for all of the text on your page. All that would do is slow it down and frustrate your visitors. Instead, save it for headings, menu items, pull quotes and other small bits of text.

Chapman, Cameron. Smashing (2009). Articles>Web Design>Typography>Graphic Design

Ampersands With Attitude

Ampersands have long been the character in a typeface with which typographers can indulge themselves. Sweeping curves, flirtatious finishes and bold statements – these are the things that make ampersands an exciting character to use and, better still, to design. There are, however, two problems.

Smashing (2008). Articles>Typography>Graphic Design>Fonts

Editors and Designers: 6 Ideas for Better Collaboration    

Demonstrates how collaboration between all involved in a project can improve the final product, improve the bottom line, and improve your own knowledge base. By understanding the point of view of your collaborators, you can present information better and be sure they understand your point of view better as well.

Hallmark, Erin and Marla Sowards. Intercom (2009). Articles>Editing>Graphic Design>Collaboration

Design Reviews and Posting Without Answers

In our design review sessions, a couple of members from our eight-person team share what they’re working on and ask questions about challenges they’re facing. We provide feedback and critique their project. If you’ve ever participated in a creative writing group, the design review works similarly. Team members use common sense and experience to guide their questions and reviews. Somewhat in contrast to a creative writing group, though, you don’t have to bring a finished piece to share.

Johnson, Tom H. I'd Rather Be Writing (2009). Articles>Graphic Design>Assessment>Collaboration

Usability Testing with User Proxies: When is "Close" Close Enough?

How can we designers get valid feedback from more design iterations in less time? One bottleneck in the design flow is finding a steady stream of usability testers. Between the extremes of the perfect (an actual user, on site) and the unacceptable (the developer who's coding the feature), lies the grey zone of user proxies. Can you use internal employees with relevant domain knowledge to usability test your products, and still get valid data?

Sy, Desirée. Designing the User Experience at Autodesk (2009). Articles>Graphic Design>Usability>Testing

The Tangible View Cube

As interaction designers at Autodesk, we sometimes engage in design and thought investigations that are not directly related to the task at hand. These investigations are ways to frame problems by venturing into related design disciplines. For example, in order to understand what might be an appropriate transition when changing views in a 3d model, we try to understand how a video artist would create a transition between two scenes in a video. To understand how to improve the graphic quality of elements drawn in a building information model, we look at lots of pencil sketches drawn by architects. We think, what would happen if an on-screen element was made from physical material?

Nikolovska, Lira. Designing the User Experience at Autodesk (2009). Articles>User Experience>Graphic Design

Speed Racer: Collaborative Sketching Saves the Day

Give 3 designers 4 weeks to create multiple conceptual designs for 8 features and what do you get? If they are team of innovative designers you might get the designs and a new process. If they are a team of committed designers you might get the designs and an improved collaboration. We were lucky. We got all three.

Sherman, Melissa. Designing the User Experience at Autodesk (2009). Articles>Collaboration>Graphic Design>Case Studies

Be Kind to the Color Blind 

Using color and color alone as a visual cue is appealing because it’s usually an aesthetically pleasing and a minimalist design technique. Calls to action and visual cues are critical to interface designers because users, especially on the web, have limited patience and are looking to process information and make decisions quickly. Since the brain recognizes and forms an emotional bond with colors almost immediately, colors are a natural choice for visual cues. Unfortunately, it’s easy to alienate or confuse some of your users when some of those aesthetically pleasing colors look very similar. To point out a few interfaces that use hard to differentiate colors as visual cues, here are a few examples that have given me some trouble.

Campbell, Chris. Particletree (2008). Articles>Graphic Design>Accessibility>Color

Visual Methods of Communicating Structure, Relationship, and Flow 

Many of us are more comfortable communicating in words than in pictures. For example, user assistance writers are by nature and training writers, so they understand words and are adept at using word processing and publishing tools. Writers use lexicentric tools not only for creating and delivering content, but also as cognitive tools—that is, tools that help them think more clearly and efficiently. Thus, a user assistance writer might create a user-task matrix or take advantage of a word processor’s outline view when creating or evaluating a document’s structure.

Hughes, Michael A. UXmatters (2009). Articles>Graphic Design>Technical Illustration>Workflow