Archive for February, 2011

We have theories about everything: why the sky is blue, why apples fall, why bees buzz (and do other unmentionable things), why my boss said a certain thing, why that girl in the restaurant looked at me, why didn’t that girl in the restaurant look at me…. We’re wired to theorize. Theories make us feel secure. We can wrap our heads around them and explain them with little diagrams on whiteboards, or with equations, or even graphs. We give theories fancy names like “The Classical Elemental Theory” and “The Flat Earth Hypothesis.”

The bottom line is: we humans love theories. Yet as a wise person once said, “In theory, theory and practice are the same. In practice, they are not.” This article is about practice. It’s about five and a half — yes, half — habits that highly effective designers tend to share and which I’ve observed first-hand in the complicated, non-theoretical, absolutely real world. If practice is your thing, keep reading.

This article doesn’t provide an ultimate medicine for becoming a highly effective designer, but it might help you achieve a better workflow.

They Know When To Quit

Some of you might know Vince Lombardi as a football legend. I know him as the guy who ruined the world by uttering seven simple yet lethal words: “Winners never quit, and quitters never win.” You’ll find this unassuming little quotation’s fingerprints all over tragic events worldwide: co-dependent lovers who implode their relationships, leaders of warring nations who refuse to compromise for peace, CEOs who won’t back down from flawed strategies to save their company from bankruptcy, and blackjack players who double-down instead of retreating to their rooms.

Admittedly, Vince wasn’t the real offender. He was just a messenger for the real culprit: our humanness. The urge to persevere despite seemingly unconquerable conditions is as human as opposable thumbs. We’re so awful at cutting our losses that there’s even a technical term for this tendency: loss aversion. We strongly prefer to avoid losses than to achieve gains. It’s central to our inability to quit. Quitting has a bad rep, but it’s often the most rational option.

Quitting doesn’t necessarily mean pulling a Jerry Maguire, although it did work out well for him in the end.

As Seth Godin writes in a little book about quitting called The Dip, “Winners quit all the time. They just quit the right stuff at the right time.” It’s worthy, practical advice that can curb the runaway idealist in every designer. Bear in mind, we’re not just talking about quitting your job. We’re talking about quitting things on a daily basis. This entails: picking your battles at work; discerning not just your design goals, but your non-goals; relenting to client needs when necessary; and trading off some design idealism for business karma.

Ironically, quitting can be good for your career. So, that’s the first habit: learn to quit. Let things go. Kill your darlings.

They Redesign Processes

I remember when Agile software development methodologies were all the rage. I was working at Amazon as a program manager at the time, and our team was the first to adopt Scrum. Scrum was going to enable us to ship early, with twice the features and zero overhead (at least, that’s how we interpreted Ken Schwaber’s words).

It would have been nothing short of a miracle, but then again, most of us were fresh out of school, and miracles, free pizza and unicorns were part of our reality. In the end, we shipped almost a year behind schedule, with fewer than half of the planned features. Worse, over 75% of the team quit within 90 days of launch (which is not necessarily a bad thing, as we just learned). Yippee ki-yay!

What’s most worrisome about failures such as these, though, is that they so often occur despite “gold standard” processes. It happens all the time.

Tomes have been written about why our best practices fail so frequently. For a literary (even theoretical) overview, I direct you to two books: The Design of Design by Fred Brooks, author of The Mythical Man-Month and recipient of the 1999 Turing Award; and The Black Swan, by the brilliant, Larry David-like Nassim Nicholas Taleb.

A Website Named Desire illustrates (see the screenshot above) the non-linear and highly erratic nature of the web design process in the real world.

To understand such failures from a practical standpoint, we must turn to another book: Predictably Irrational, by behavioral economist Dan Ariely. Ariely’s research confirms that predictable irrationality is often the root cause of process failures. Indeed, as A Website Named Desire illustrates, our biases, prejudices, quiet agendas, irrational actions and diverse portfolio of imperfections are more often to blame than the processes themselves.

Formal processes work when we accept the irrational nature of people and make room for those imperfections. Thus, the key to successful processes lies in how practically we implement and execute them, not in how well we adhere to an ideal.

Highly effective designers embrace and learn processes — and then tweak them to work well in reality.

They Combat Distortions Of Reality

Picture this. You’re reviewing final comps with a set of stakeholders. After multiple iterations, you’re finally feeling great about the design. Then, out of nowhere, a senior manager says, “I think we need to change the blue on the top bar. It doesn’t feel right. I showed it to my wife, who’s pretty good at picking colors, and she felt the same way.” He continues, and then delivers the final blow: “I know you worked hard to find the right color scheme, but picking colors is pretty subjective, right? It’d be worth taking another pass at this.”

Groan.

“How a Web Design Goes Straight to Hell,” a classic post on Matthew Inman’s “The Oatmeal”, humorously depicts distortions of reality.

“Design is subjective” is one among many prevailing distortions of reality — ideas that have gone unchecked for so long that they parade around as facts — in our organizations. You might recognize these other distortions: “Data and logic trump intuition,“ “Design is decoration,” and “More feedback leads to better designs.” Then there are those that hit closer to home, like “The page has a fold,” and (everyone’s personal favorite) “Make the logo bigger.” (Note that there is now much evidence out there against distortions like these.)

These clichés seem benign but, in fact, are extremely harmful. They are the proverbial elephant in the room at the heart of dysfunctional organizations. Highly effective designers work to resolve these distortions in their organizations.

They Find The Right Environment

People are brilliant scavengers. In a world of a million choices, we know exactly where to look when we need something. We’re good at identifying environments that meet our demands, almost without thinking. We instinctively know how to find certain things (keyword: certain).

When it comes to finding slightly more intangible things — true love, a good job, a great employee — many of us spend a lifetime searching awkwardly and failing repeatedly. We can’t wrap our minds around such abstract pursuits. God knows we try, though; how many times have you heard someone proclaim that they have made a spreadsheet to determine a life choice or a good partner?

Identifying a good work environment falls into the same category. We’re usually terrible at it. Here’s a little secret: highly effective designers are most often products of a good work environment and know how to seek them out.

What does a good work environment look like?

The answer is hidden in a brilliant presentation on clients by Michael Bierut. I recommend watching the whole thing, but if you don’t have the time, then watch the four-minute section from 13:00 to 17:00. In it, Michael answers the questions “What do I look for in a client?” and “What should I look for in a work environment?”

Michael Bierut’s presentation on clients also answers the question “What should I look for in a work environment?”

The simple answer is trust, passion, courage and brains. Each quality has obvious benefits. In a trusting environment, stakeholders can rely on their designers’ gut instincts. Where there is passion, the will to make meaningful progress will flourish. Courage enables designers to take risk and bring cutting-edge designs to market. Brains — not genius, but real-world, common-sense brains — bring it all together.

All four of these qualities must exist simultaneously to make a good environment. Take one away, and the environment will eventually become dysfunctional. For instance, take away trust, and you end up testing 41 shades of blue to find the right one.

They Habitually Rewrite The Habits

In the software industry, we strive to build “perfect” (read: bug-free) things that can’t be improved. This is a worthy goal, but it can have negative side effects. For example, we often conclude that certain practices, processes and lines of thinking have reached their zenith and can’t be modified. We start treating real life like a line of code — a meticulously crafted string, neatly concluded by a semicolon, that reaps a perfect, logical result (needless to say, I’m not referring to Web development here).

Reality — or should I say practice — proves that this kind of thinking is a mistake.

If this article were written a decade ago, it would have listed different habits. A decade from now, I expect some of the habits will have changed; for example, eventually we’ll all agree that “Design is subjective” is a distortion of reality. Heck, if you had written this article, you might have listed completely different habits.

Highly effective designers are aware of this. They’re always questioning, rethinking, improving and refining the dogma. Their methods are best captured by an old Chinese proverb: “All things change, and we change with them.”

There you have it: the final habit. It’s one and a half times as important as the other habits.

Now you know what the “half” means.

(al)

© Nishant Kothary for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags:

Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues.

The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article. Next week we will present even more useful new tools and resources for front-end developers. We sincerely appreciate the efforts of the design community — thank you, guys!

Interesting and Original Techniques

Wonder-Webkit: 3D Transforms
This is a remarkable example of what can be done using CSS3 3D transformations. The interesting stuff is the possibility of manipulate the transformation matrix of any element of the DOM, In this case we get the matrix given only the four end points of the element. Don’t forget to click on the items, too. Who thought a couple of years ago that something like that would be possible with only CSS?

CSS Box Shadow & Text Shadow Experiments
The CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don’t even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect. The article features three remarkable examples of using box-shadow property creatively to achieve effects that don’t have much to do with shadows.

CSS3 Depth of Field
Sawyer Hollenshead’s experiment is an attempt to create the “Depth of Field” effect with CSS. The blurry text is accomplished using text-shadow, with the text color set to transparent. Take a look at the demo and don’t forget to press ‘n’ to toggle animation.

Art Deco Selectable Text
This is a quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge was to have this kind of ‘split letters’ as part of a web page layout, while retaining the ability to select text.

CSS3 :toggle-button without JavaScript
This demo presents a CSS3 toggle-button that works without JavaScript. If you ever need it: You stack two <a>s on top of each other and then disable pointer-events for the top <a> on :target.

About War and Bananas
This student project explores new ways of styling and designing websites in an artistic way. The students from Merz Akademie in Germany used Picasso’s “Guernica” as the footage, seperated the picture into different layers and animated them using CSS.

WebKit Clock
This demo is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and no image files. The CSS file is huge, yet the result is quite remarkable.

Pure CSS Slideshow
This technique uses CSS transforms and positioning to create the pure CSS-based slideshow. Unfortunately, no documentation is available (yet).

CSS Dock
This is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the :target pseudo-class and CSS animations for the bouncing effect.

Andrew Hoyer
An interesting experiment by Andrew Hoyer. The walking man is implemented using only CSS3 animations and simple HTML. The key idea behind all of this is the fact that a CSS transformation applied to an element also applies to all of its children. Works in Webkit-browsers only.

Type study: An all CSS button
Dan Cederholm explains how through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create a highly polished three-dimensional, responsive button that doesn’t require images.

3D Text
This technique uses multiple text-shadows to create a 3D appearance of the text on any HTML element. No extra mark-up is used. Works in the latest builds of Safari, Chrome, Firefox, and Opera.

Spin those Icons with CSS3
Tom Kenny features a neat effect which spins the social icons with the help of a CSS transforms and transition when you hover over them. A very nice enhancement.

The Shapes of CSS
The article presents various geometrical forms, all created using CSS and a single HTML element. The following forms are presented: square, rectangle, circle, oval, triangle, parallelogram, trapezoid, star, pentagon, hexagon, octagon, heart and infinity — all using CSS only.

CSS background image hacks
Emulating background image crop, background image opacity, background transforms, and improved background positioning. The article explains a few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Making Better Select Elements with CSS3 and jQuery
This tutorial explains how to take an ordinary select element, and replace it with a better looking version, while keeping all the functionality intact. It uses CSS3 multiple background and a transparent PNG image as a sprite. Currently, multiple backgrounds are supported by Firefox, Safari, Chrome and Opera. For Internet Explorer and older versions of the first browsers, a fallback is defined, which is basically just a regular version of the background. When parsing the CSS document, browsers that do not understand multiple background will just ignore the rule and use the plain one.

CSS-Only 3D Slideshow
This tutorial shows how to create a 3D slideshow using only HTML and CSS. No JavaScript required. You’ll be able to mimic a click event with CSS using the :focus pseudo-class and the HTML5 element <figcaption>, but the idea is the same. As the author admits, this method isn’t necessarily “better” than using JavaScript, but simply a neat alternative that takes advantages of the newest HTML5 elements.

Have Fun with Borders
This tutorial shows three simple technique to add a light shadow, “pressed” and “beveled” states to text blocks and images. By Soh Tanaka.

Animated CSS3 Owl
“What about having an owl that moved his eyes every so often and when hovered over would raise his wings while a few light rays would spin in the background. A little excessive? Probably. Necessary? Not at all. However, that’s exactly what I was looking to do with CSS3 transforms, transitions, and animations.” An interesting experiment, best viewed in Safari or Chrome.

CSS Social Sign-in Buttons
This blog post describes a fairly simple technique for creating nice responsive CSS-buttons using a CSS sprite, border-radius, shadows and CSS gradients.

Rotating color cube box with CSS3 animation, transforms and gradients
A yet another remarkable experiment that presents a rotating color cube using CSS3 animations and transforms. Be aware that the browser may slow down a bit when loading the demo.

CSS3 Demo: 3D Interactive Galaxy
A CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, the designer used 3D CSS properties available in Safari 5 and on the iPhone and iPad.

Getting Hardboiled with CSS3 2D Transforms
Andy Clarke explains how to use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards. The working demo is available as well.

How to create Microsoft Office Minibar with jQuery and CSS3
Janko Jovanovic explains how to create a Microsoft Office Minibar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

Angled Content Mask with CSS
This article explains how to create angled CSS content “masks”. The idea is pretty simple and uses CSS transform property (rotation, to be more precise).

Rotating Feature Boxes
All the animation here are CSS3 transitions. JavaScript only watches for the clicks and applies and removes classes as needed. So when you click on a block, that block’s class’ is adjusted. The new classes have different size and position values. Because the block has transition CSS applied, those new sizes and postion values are animated as well.

Pure CSS3 box-shadow page curl effect
Okay, the CSS3 code here is quirky and might seem a bit bloated first, but it’s a nice example of using various CSS3 features together to create an effect that would usually require images.

Pure CSS Folded-Corner Effect
Learn how to create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds; supported by Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

Useful Practical Techniques

Smooth Fading Image Captions with Pure CSS3
Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included.

Fade Image Into Another
Learn how to create an image rollover by giving the element a background image. There are three ways to fade in the opacity. Click here to find out more:

New @Font-Face Syntax: Simpler, Easier
With IE9 and FF4 nearing release, Ethan Dunham from Font Squirrel has revisited the problem of a cross-browser CSS @font-face syntax and found a new and simpler solution. In this article, Richard Fink explains the new syntax and its variations and suggests the most reasonable syntax to use. Also, check FontSpring’s The New Bulletproof @font-face Syntax. Please notice that this technique no longer works in Internet Explorer 9.

The New Clearfix Method
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. The new clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, the new clearfix method triggers hasLayout with some proprietary CSS. Thus, the New Clearfix method effectively clears floats in all currently used browsers without using any hacks.

Quick Tip: Mimic a Click Event with CSS
Jeffrey Way shares with us a quick tip with a video that will illustrate a nifty technique by using plain and simple CSS to mimic click events.

Breadcrumb Navigation with CSS Triangles
This article describes a fairly simple technique for creating triangles with pure CSS. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. Useful for little arrow sticking out from speech bubbles, navigation pointers, and more.

Responsive Images: Experimenting with Context-Aware Image Sizing
Since Ethan Marcotte coined the term, responsive Web design has gained a lot of attention in the Web design community, mainly due to its remarkable potential for flexible layouts that respond to the browser’s viewport for the best user experience. The main problem with such designs, however, is figuring out how to serve small images to mobile devices and tablets and large ones to desktop displays. The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions.

CSS powered ribbons the clean way
Harry Roberts presents a simple technique that uses an image and CSS to create clean ribbons. This technique creates a white <h2> with a pink background, pulls the <h2> out of the content area with a negative margin and then places the image absolutely left-bottom of the <h2> in a :before pseudo-element.

Create a centred horizontal navigation
Centring block level elements is easy, just define a width and set margin: 0 auto;, but what if you don’t know that fixed width? You could use text-align: center;, but that won't work on 100%-width block-level elements either. However, there is a way to have a centred horizontal navigation without knowing an explicit width, and without adding CSS.

Keep Margins Out of Link Lists
When building a menu or other list of links, it's generally a good practice to use display: block; or display: inline-block; so that you can increase the size of the link target. The simple truth: bigger link targets are easier for people to click and lead to better user experience. Make sure list items don't have padding, but links do and don't use margins, so there are no un-clickable gaps.

Pure CSS3 Post Tags
This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts. See also Image-Free Tag Shape.

Styling children based on their number, with CSS3
Lea Verou presents an interesting technique for styling children based on their number. It is based on the relationship between :nth-child and :nth-last-child. With the technique, the number of total rules is still O(N), but the number of selectors in every rule becomes just 2, making this trick practical for far larger numbers of children.

Wrapping Long URLs and Text Content with CSS
To wrap long URLs, strings of text, and other content, it's enough to apply a carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags). Very useful for cases when code snippets need to be presented in a blog post with a fixed content width.

Pure CSS(3) accordion
An interesting accordion technique that uses nothing but semantic HTML, CSS and some progressive CSS3. There are also two versions, a horizontal one and a vertical one.

Target iPhone and iPad with CSS3 Media Queries
A detailed explanation of how to se CSS3 media queries to apply CSS style to the portrait and landscape modes in mobile devices such as iPad or iPhone.

Rein In Fluid Width By Limiting HTML Width
If you are making a fluid width site but wish to limit the maximum width it can expand, you can do so easily by literally applying a max-width to the html element. Quick and useful tip.

Inline Boxes with Bottom Alignment
Imagine that you want to keep a "Submit" button at the bottom of a line box, aligned with form controls positioned below their label (see below). If the containing block is not wide enough for the "Submit" button to flow next to the other controls, that button must be displayed at the beginning of the next line box with minimal space above it. The article explains a solution for this problem.

Transparent CSS Sprites
The idea of the technique is to create a transparent sprite allowing the background-color to show through. If you are familiar with CSS Sprites, you should be able to grasp this twist relatively easily. Simply, an image with a transparent “knocked-out” transparent center is placed over a background colour. Changing the background colour changes the appearance of the element.

Jump links and viewport positioning
"Using within-page links presses the jumped-to content right at the very top of the viewport. This can be a problem when using a fixed header. With a bit of hackery, there are some CSS methods to insert space between the top of the viewport and the target element within a page."

Mimic Equal Columns with CSS3 Gradients
"What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as the primary content section exceeds the height of the sidebar. Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images." A nice piece by Jeffrey Way.

Double Click in CSS
There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Now, here is the idea: can we somehow pull off a double click with pure CSS? Yes, we can, if the input covers link, buries on focus, which triggers hover on link keeping it on top. Work on WebKit (including Mobile) and Firefox. So we've basically created a "light" alternative to hover for the sequence tap → change state / activate link → tap again to visit link.

Center Multiple DIVs with CSS
At some point, you may have a situation where you want to center multiple elements (maybe «div» elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center. You can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements.

Clearing Floats with Overflow
One of the common problems we face when coding with float-based layouts is that the wrapper container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new trick, but still very useful.

Different Transitions for Hover On / Hover Off
The idea of this technique is to solve an interesting problem: what about using different transition for hover on and off? In the example, when you hover over, the :hover transition overrides the transition set in the regular state, and that property animates. When you hover off, the transition from the regular state takes over and that property animates. Useful.

Stretch a Box to its Parent's Bounds
A powerful feature that enables absolute positioning of stretching a box. The most popular use is having a box positioned in either top or bottom and right or left coordinates.

Equal Height Column Layouts with Borders and Negative Margins in CSS
This article demonstrates different construct techniques and brushes up on a few concepts you might have missed.

Using CSS Text-Shadow to Create Cool Text Effects
The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop's Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. A demo is available if you'd like to see what it looks like before you give it a try yourself.

Fluid Width Equal Height Columns
Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element.

CSS Box-Shadow:Inset
It's always nice to be able to add a vignetting effect to photos sans-Photoshop, but the way browsers interpret box-shadow:inset is to throw the shadow behind the image, rendering it invisible. While this seems pretty useless, it does make sense when you consider other kinds of content.

Flexible Navigation
An interesting technique for a navigation that uses only CSS transforms and transitions and no JavaScript.

Circle Zoom
A very nice hover effect: the Twitter icon has a circle as a background and the circle increases its radius when the users hovers the mouse over it.

Last Click

CSS3 Memory
A game of memory in which you will have to find three matching cards (as a tribute to the CSS transitions).

CSS 3D Scrolling @ BeerCamp at SXSW 2011
Now, that's innovative: while you are scrolling down the page, the site appears to have a 3D scrolling effect. And it has a nice Inception reference. Can you discover it?

50 New Useful CSS Techniques, Tutorials and Tools
The previous round-up of CSS techniques on Smashing Magazine. In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills.

© Vitaly Friedman for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS

Typography is not only an all-important aspect of design, it is also an art form in and of itself. Choosing the right font, the perfect spacing and even the correct shape of text can be an important factor as to whether a project fails or succeeds. Although Illustrator is not really used for multiple-paged projects, many would agree that it is one of the most powerful applications for creating vector graphics, such as logos, and it is also often used for one-page documents, such as business cards, posters, or postcards.

Since we can easily transfer graphics from Illustrator to Photoshop and InDesign, designers often use Illustrator to create vector type that they can then incorporate into projects in another program. For instance, you can create a nice type design within Illustrator, then add some extra effects in Photoshop. Or you may need to design a text illustration within Illustrator to place within your brochure project in InDesign.

If you have never taken the time to explore the type side of Illustrator, you may be surprised at the powerful tools that Illustrator provides for working with type. Similar text features found in Photoshop and InDesign are also available in Illustrator — only Illustrator comes with its own unique set of typographical features as well. So for those of you who use another Adobe Suite program, you will easily catch on to Illustrator’s type idiosyncrasies.

No matter what your purpose for working with type in Illustrator is, as a designer, you will not only improve your work, but also save valuable time by knowing the different typographical tools available. Here, we will focus on some of the most important aspects of typography that every Illustrator user should know:

1. Metric vs. Optical Kerning
2. Roman Hanging Punctuation
3. The Glyphs Panel
4. Hyphens and Dashes
5. Styles Panels
6. Placing Type on a Path
7. Point Type vs. Area Type
8. Creating Columns of Text
9. Text Flow Between Containers
10. Scaling Area Type Numerically

1. Metric Vs. Optical Kerning

Kerning is an important aspect of design. It has to do with the adjustment of space between letters in order to improve the visual treatment of typography, and Illustrator provides the right kerning tools for designers. In more recent versions of Illustrator’s CS series, three automatic kerning options are available: “Auto” (also known as metric), “Optical” and “Metrics – Roman Only.” In addition, manual kerning is available. All have their place in design, but knowing which one to use when can be confusing without some basic knowledge.

Auto, or metrics, kerning is built into type using kern pairs; for instance, all PostScript fonts have kern pairs built into them. Illustrator interprets this kerning code to determine how much space to put between certain letter combinations, such as “WA,” “LA,” “To” and “Ty.”

Optical kerning is also an automatic kerning option built into type but slightly different than the Auto option.  It uses the shapes of the letters to determine the space to put between characters. Optical kerning works well when combining letters of more than one font or when a font has little to no kerning built in. Use manual kerning where possible, since it provides the highest level of control. Most often, though, one would use manual kerning only in display copy, headlines, business cards and other short blocks of text.

The “Metrics – Roman Only” option, which was added into Illustrator in the CS4 version, is for Japanese typography. This option adds kerning only to Roman glyphs or any character that rotates in vertical text. Basically, it works with Latin characters, such as Basic Latin or Latin Extended, and the half-width Katakana. To switch to Optical kerning, first select the text you wish to change. Then, under the Characters palette (Window → Type → Character), click on the Kerning drop-down menu. Then select “Optical.”

Or, if you would like to manually kern letters yourself, place the cursor between two letters, and choose a value in the Character palette:

To turn off kerning between selected characters, set it to “0”:

Keep in mind that to adjust the value between entire groups of letters, you will have to use the tracking settings in the Character palette. The tracking is adjusted in the drop-down menu located to the right of the Kerning drop-down menu. Hover your mouse over the menu to see “Set the tracking for the selected characters,” as in the screenshot below:

Illustrator’s default kerning is “Auto,” so simply select this if you would like to turn it back on.

Useful Tip: One excellent way to save yourself some time while designing is to use Illustrator’s keyboard shortcuts to change manual kerning and tracking settings. To change the kerning between two characters, simply place the cursor between the two letters. Then use Alt/Option + left/right arrow. The kerning will decrease with Alt/Option + left arrow and increase with Alt/Option + right arrow.

To change the tracking for an entire group of letters, first select the letters you want to change. As with kerning, use Alt/Option + left arrow to decrease tracking and Alt/Option + right arrow to increase tracking.

2. Roman Hanging Punctuation

Roman hanging punctuation will give your blocks of text a clean appearance, taking your typography from amateur to pro. But what exactly is this tool that is hardly talked about? Turning on the Roman hanging option in Illustrator will make the text line up evenly by “hanging” quotation marks in the margin. Otherwise, quotations are set flush with text, within the margin.

To turn on Roman hanging punctuation, open the Paragraph tool panel, and click on the arrow on the upper right of the box. A drop-down menu will appear in which you can choose “Roman Hanging Punctuation.”

Keep in mind that you can turn on or off the Roman Hanging Punctuation for entire blocks of text. Just select the blocks of text and use the same drop-down menu to change the setting.

3. The Glyphs Panel

Glyphs are any characters found within a font family. The Glyphs panel in Illustrator is the place to locate font objects, from normal characters to the special symbols. Whatever font you have selected when you open the glyphs panel is the menu that will be displayed. Fortunately, you do not have to keep exiting the Glyphs panel every time you would like to see the glyphs for another font or see glyphs similar to the one you’ve selected. You can also keep the Glyphs panel open while moving your cursor to different locations in the document.

To open the Glyphs Panel, go to Window → Type → Glyphs. Click on a glyph to select it; double-click to insert it in the line of text. Illustrator places the character wherever your blinking text cursor is located.

Hover your mouse over glyphs to see the Unicode (the name given to each character in the Glyphs panel); the Unicode is displayed at the top of the panel. Once you have found the glyph you would like to use, simply double-click on the character to insert it into your current project.

To see a different font, simply choose a different family and style from the drop-down boxes at the bottom of the panel.

To see the glyphs in a larger or smaller preview display, click on the zoom in and out buttons located in the lower-right corner of the panel.

In the “Show” menu at the top of the panel, you can limit the type of characters displayed in that font; for instance, “Oldstyle Figures.”

You might notice that some characters in a font include an arrow in the lower-right corner of the character box in the Glyphs panel. This arrow indicates that alternate glyphs are available for this character. To access these alternates, simply click and hold the character. Drag your cursor over the alternate glyph you would like to use, and release the mouse. The glyph should now be inserted in the text.

4. Hyphens and Dashes

One of the easiest ways to disqualify yourself as a professional designer is by using hyphens and dashes incorrectly. The rules are somewhat tedious but fairly easy to learn and remember.

A hyphen is the shortest in length and is located on the keyboard next to the “+” sign. It has three functions. It is used when a word is split at the end of a line of text. It is used to join two words together to create a compound word, such as “fun-loving dad” and “anti-American.” A hyphen is also used with two-word numbers, such as forty-two. If in doubt, look up the word in a dictionary and use a hyphen if the word is not present. Example: “Twenty-two dollars is all that your un- line break loving dad will give to a well-intentioned suitor.”

An en dash is the second longest in length and is used to show a span of time or a numerical range; for example, 5–9, July–September, 1:00–8:00. In the Glyphs panel in Illustrator, the en dash Unicode is U+2013. Example: “Our vacation is from June 13–18.”

An em dash is the longest in length of the three and is used to show a break in thought. For instance, “Down the road—and a long winding road it was—they traveled as quickly as possible.” In Illustrator, the em dash Unicode is U+2014. Example: “We gathered our supplies — all eight truck loads — and started slowly up the bypass.”

5. Styles Panels

When working with large amounts of text in Illustrator, you do not have to keep applying the same font styles manually to every heading and block of text. You can simply save your settings using the Character Styles panel or the Paragraph Styles panel. Both can be found under Window → Type.

To set a style, simply type your heading or paragraph using the font styles you want to save. Then go to Window → Type → Character Styles, or Window → Type → Paragraph Styles. A Styles panel box will appear, and in the upper-right corner will be a small arrow, which is the Styles menu. To create your own name for the style, choose “New Character” or “Paragraph Style,” type a name, and click OK.

When you would like to add your new Character or Paragraph Style to text, select the text. Then click on the style that you created in the Style panel box. The style you saved will now be added to the text.

To edit a style, click on the style in the panel box, then click to the Character and Paragraph Style options in the drop-down menu, or simply double-click on the style you want to change.

Now on the left side of the dialog box that pops open, click on a formatting category. Make the changes you need, click OK, and all text that you’ve applied to this style will be changed. Keep in mind that if text is selected, the changes will be made to it only. Click on the Selection tool and then click anywhere on the work desk to make sure that text is not selected before attempting to change the style of all text.

To delete a style, select it in the Character or Paragraph Styles panel. Then click the “Delete” button in the bottom-right corner of the panel. Or just drag the style onto the “Delete” button. The formatting of text associated with this style will not change, but a style will no longer be applied to this text.

6. Placing Type On a Path

Most Illustrator users know that type can be placed on a path to create shaped text or text that wraps around an object. The technique for applying text to a path is different depending on the path, though. Type can be placed on either an open path, which is a line with a beginning and end, or a closed path, such as a circle or square.

Open Paths

To place type on an open path (i.e. a line with a beginning and end), begin by creating a path, such as a curved line. Make sure to select the Type tool, and then move your cursor over the path until the cursor changes to a Type on a Path icon, which has a line through it.

Then just click on the path, and you will have created a Path Type object. The Stroke objects will be gone, and a blinking cursor will appear in which you can type your message.

To make any changes to your open path type, choose the Selection tool and click on the path. In and out ports (small white boxes) will appear at either end of the path and a line in the center and on the far left and right. Basically, Illustrator is now treating the path as it would area type. Drag one of the lines to make the text path shorter or longer; make sure that your cursor is an arrow with a line-and-arrow symbol next to it.

You can change the actual type just as you would any other area type, including by changing the font size. Doing this, though, may make the text extend outside of the area type’s boundaries. If this happens, a red plus sign will appear.

If you click on the plus sign, the cursor will change to a linked container cursor (it looks like a text box). Then, click on another area in your project to create another open path line of the same size and shape as your first. New text will continue to flow onto this new line.

Or simply drag the beginning and end lines to make text fit on the path:

Make changes to the actual path that the text sits on by choosing the Direct Selection tool and then clicking on the path. You can now lengthen or shorten the path or change the shape, just as you would with any other path.

You can also move the type to sit underneath the path by dragging the center line to the opposite side of the path. Or go to Type → Type on a Path → Type on a Path Options. In the box that appears, check the “Flip” box and click OK.

To flip type over, go to Type → Type on a Path → Type on a Path Options. Select the Flip box and then select “Ascender” in the “Align to Path” menu. Other changes can be made in this dialog box as well: change the effect, choose other path alignment options or adjust the spacing.

Closed Paths

The confusing part of placing type on a closed path is that the start and end points are in the same place. With an open path, your starting point is wherever you click with the Type tool to create a Path Type object, and the end point is the end of the path. On a closed path, both the start and end points are wherever you click, because the object creates a continuous line. The center line on a closed path, such as a circle, would then be at the bottom of the circle if your start point is at the top. To place type on a closed path, you will have to choose the Type on a Path tool by clicking on the Type tool and dragging to pull out the Type menu.

Then click on the path where you would like the text to start and begin typing. Once again, make sure the cursor changes to the Type on a Path symbol.

Just as with an open path, you can change the location of the start and end points and, therefore, move the location of the text on the object.

You can also move type underneath the line or flip type over the same way as you would with open type. Simply go to Type → Type on a Path → Type on a Path Options, and change the settings to get the desired effect. Or you can make changes by dragging the center line.

7. Point Type vs. Area Type

Point type, created by selecting the Type tool, is so called because it adds text to a certain point in an image. Area type, created by selecting the Area Type tool, adds text to fill a specified area of an image.

Point type is often used for headlines and other single lines of text. The more you type, the longer the text line becomes. To move text to another line, you must manually press Enter or Return on the keyboard. Area type is used for paragraphs of text and is surrounded by a bounding box. As you type, the text automatically flows to fill the box. The bounding box in area type will have two large boxes, called ports, in addition to the normal bounding box handles. These ports are the in and out boxes from which text flows between area type containers.

When selecting point type with the Selection tool and if you have selected “Show Bounding Box” in the View drop-down menu, a bounding box will appear surrounding the text. However, when changing the shape or size of the bounding box with point type, the text will become distorted because no shape is holding the text. On the other hand, changing the size or shape of area text will simply change the way the text fills the bounding box.

8. Creating Columns of Text

Any area type can easily be divided into columns, or even rows, whenever needed. First, create the area type, and then select it. Go to Type → Area Type Options. In the box that appears, you will see options for changing the settings of both rows and columns, as well as for resizing the area type.

Change the number of rows or columns by changing the Number settings underneath the Row or Column settings. The “Span” changes the width of individual rows or columns, and the “Gutter” changes the distance between each row or column.

If you select the “Fixed” box, then you can resize the area, and the number of rows or columns will change, not their width.

With the Fixed box deselected, the size of the rows and columns will increase or decrease when resizing, but the number of rows or columns will remain the same.

If you break the text into both columns and rows, rather than just one or the other, then you will want to choose the way text flows between columns and rows in the Options section. Selecting “By Rows” will cause the text to be read from left to right, first in the top row and then in the bottom row. Selecting “By Columns” will cause the text to be read left to right, first in the left column and then in the right column.

9. Text Flow Between Containers

With certain projects, you may need to make text flow from one area type container to the next. For instance, you may have created an area type frame in the exact size you need, but as you type, the text “overflows,” which Illustrator alerts you about with a red box with a plus sign inside.

Clicking on this plus sign with the Direct Selection tool will change your cursor to the linked container symbol.

Click again on the artboard and Illustrator will create a new container of the exact same size as the first. Text will now continue to “flow” from the previous container into this new one.

If you would like to create a container of different proportions, though, then click and drag on the artboard until the container is the size you desire.

10. Scaling Area Type Numerically

Instead of resizing an area type bounding box by using the handles, you can scale it numerically, making for a more accurate size that can be repeated. Go to Type → Area Type Options, and enter the size of box you need.

Or you can go to Object → Transform → Scale to size a bounding box numerically. Keep in mind that these techniques will also change the scale of the text. To keep text the same while changing the box only, click on a side of the frame using the Direct Selection tool, and then scale the bounding box. The text should remain the same while the size of the bounding box changes.

Type Tool Shortcuts

Keyboard shortcuts will make your work in Adobe Illustrator go that much faster. Memorize each of the following to improve your workflow:

• Shift + Control/Command + O : Create outlines.
• Alt + Control/Command + I : Show or hide hidden characters.
• T : This way you can select the Type tool faster.
• Control/Command + T : Show or hide the Character panel.
• Shift + Control/Command + T : Show or hide the Tabs panel.
• Alt + Control/Command + T : Show or hide the Paragraph panel.
• Alt + Shift + Control/Command + T : Show or hide the Open Type panel.
• Shift : Hold down while the Type tool is selected to switch between horizontal and vertical text.
• Escape : Press while typing to escape from the type object. The Selection tool and type object will also be selected.

Keep in mind that these are only type tool shortcuts and commands. Print out a complete list of shortcuts from KeyXL to have on hand if needed.

Other Resources

You may be interested in the following articles and related resources:

• Illustrator’s Type Tool: A Comprehensive Introduction, Vector Tuts+
  Learn about Illustrator’s Type tool in this comprehensive introduction.
• Vertical Type Tools, Bloomsburg University, IT Department
  Another excellent article with basic tips on using Illustrator’s Type Tool.
• Using Adobe Illustrator CS4: Type, Adobe
  Look up specific help on type in Illustrator from Adobe itself.

(al) (ik) (vf)

© Tara Hornor for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: illustrator, typography

We’re well into 2011, and many designers and developers around the world are planning their travels for the year, including the possibility of attending any Web design or development conferences. To help you out with your plans for the upcoming months, we’ve put together a list of conferences and events that you might want to consider.

This particular post covers events taking place in about a six month timeframe that ends in late August and early September. Later this year, we’ll post another article like this at the end of August that will cover events covering a six-month period beginning in September.

As always, there is no way for us to be able to include every possible event here, but we’ll be glad to update the list if you provide a comment to an upcoming event that you feel would be of interest to Smashing Magazine’s readers. This may also be the chance to eventually meet each other this year.

Choose the month that interests you most:

• March 2011 Events
• April 2011 Events
• May 2011 Events
• June 2011 Events
• July 2011 Events
• August 2011 Events

March 2011 Events

Drupalcon Chicago
“In March of 2011, thousands of Drupal users, developers, designers, evaluators and businesspeople will descend on Chicago’s Sheraton Hotel and Towers for sessions, talks, code sprints, and more at DrupalCon Chicago. Whether you’re already using Drupal or considering it for your company or organization, you won’t want to miss out on this one-of-a-kind event.”

When: March 7 – 10, 2011
Where: Chicago, IL, USA at the Sheraton Chicago Hotel

FITC Amsterdam
“FITC Amsterdam will feature over 50 presentations and panels covering the Creative, Technical, and Business aspects of Flash and digital media. The conference offers two full days and nights of events, plus one day of optional pre-festival workshops and over 750 attendees anticipated from around the globe.”

When: March 8 – 9, 2011
Where: Amsterdam, the Netherlands at De Meervaart

SXSW Interactive
“SXSW® Interactive features five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders, the incredible new SXSW Trade Show and an unbeatable lineup of special programs showcasing the best new digital works, video games and innovative ideas the international community has to offer.”

When: March 11 – 15, 2011
Where: Austin, TX, USA

The Big M
“The Big M is a brand new independent mobile focused event aimed at those who want to learn from and connect with the very best people in the industry. Join us in beautiful Bath for two days of sessions and workshops on mobile development, mobile design and mobile business. Hear from leading industry figures, be inspired and connect.”

When: March 20 – 22, 2011
Where: Bath, UK

SES Conference & Expo
“SES Conference & Expo is the leading global event series that educates delegates in search and social marketing, putting a special focus on tactics and best practices. SES Events provide instruction from the industry’s top experts, including representatives from the Search Engines themselves.”

When: Various dates starting March 21, 2011
Where: New York, Shanghai, Toronto, San Francisco, Chicago

DevConnections
“Join us and explore the latest trends and get the most up to date information and training available. All while networking with your colleagues and building a valuable network of peers in one of the most entertaining cities in the world.”

When: March 27 – 30, 2011
Where: Orlando, FL, USA at the Grande Lakes JW Marriott Resort Hotel

An Event Apart Seattle
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: March 28 – 30, 2011
Where: Seattle, WA, USA at the Bell Harbor Conference Center

Web 2.0 Expo
“Web 2.0 Expo, co-produced by O’Reilly Media, Inc. and UBM TechWeb, showcases the latest Web 2.0 business models, development paradigms, products, and design strategies for the builders of the next-generation Web.”

When: March 28 – 31, 2011
Where: San Francisco, CA, USA at Moscone West

Photoshop World Conference & Expo
“Designed to help you boost your training and experience, the Photoshop World graphic design and photography convention offers three days of pulse-pounding training with classes from renowned experts in the field and a once-in-a-lifetime experience guaranteed to enhance your skill set and help your work soar to new heights!”

When: March 30 – April 1, 2011
Where: Orlando, FL, USA at the Orange County Convention Center

IA Summit
“The IA Summit is the premier destination for those who practice, research and are interested in the structural design of shared information environments. Some call themselves information architects (and many don’t) but all share a common desire to help people live better lives through meaningful experiences with information.”

When: March 30 – April 3, 2011
Where: Denver, CO, USA at the Colorado Convention Center

Think Vitamin Online Conferences
“Membership includes valuable conferences. You can attend live, watch the video later or view videos of past online conferences. Ask the speakers your questions and chat with the other attendees.”

When: Numerous dates starting March 2011
Where: Online

The Usability Week 2011 Conference
“Many conferences offer cavernous exhibit halls, brief seminars on second-hand discoveries, and a sense of anonymity that can be truly alienating. Usability Week takes a different approach. In place of scattered, shallow talks, Usability Week offers up to 6 days of deep learning as international experts lead full-day tutorials.”

When: Various dates between February 28 – May 13, 2011
Where: Hong Kong, Melbourne, London, Washington, and Minneapolis

April 2011 Events

FFK11
“The conference offers about 30 sessions about developing and designing applications and Web sites. 10 full day workshops with just 19 attendees in each workshop are available as well”.

When: April 5 – 8, 2011
Where: MediaPark, Cologne, Germany

Scottish Ruby Conference
“The Scottish Ruby Conference rebrands the successful Scotland on Rails conference.”

When: April 7 – 9, 2011
Where: Edinburgh, Scotland at the Royal College of Physicians

Voices That Matter: iPhone Developers Conference
“Reinforce your skills and discover emerging trends this April at the Voices That Matter: iPhone Developers Conference, where we will connect you with some of the biggest names in the industry, as they teach you how to create effective user interfaces, utilizing exciting design and the latest technology, for the iPhone, iPad, or both.”

When: April 9 – 10, 2011
Where: Seattle, WA, USA at the Bell Harbor International Conference Center

CodeConf
“Coding is about more than code. Whether it’s building a solid community, writing good documentation, or hacking space exploration, CodeConf is about improving the software ecosystem through best practices. Come with an open mind and leave a better programmer.”

When: April 9 – 10, 2011
Where: San Francisco, CA, USA at the Hyatt Regency

360|Flex Conferences
“360|Flex is the first and still the best Adobe Flex developer conference in the world. We’re not a publishing company pushing books, or a media company selling subscriptions. We’re a conference company, focused on community. Our goal is to bring the best and brightest in the developer community together for 4 days of incredible sessions, awesome parties, good times, and learning.”

When: April 10 – 13, 2011
Where: Denver, CO, USA at the Marriot Denver South

Breaking Development Conference
“Join us for two days of quality talks describing how to design, develop, and leverage the mobile web. Our speakers will walk you through mobile strategies appropriate for your company, design considerations for the mobile platform, development techniques, and how to use web technologies to build cross platform applications.”

When: April 11 – 12, 2011
Where: Dallas, TX, USA at the Gaylord Texan in Grapevine

O’Reilly MySQL Conference & Expo
“The O’Reilly MySQL Conference & Expo is an interactive learning community—four days packed with connections to MySQL developers and open source experts who know their subject inside and out. You’ll gain unique insights from speakers, vendors, project leaders, and other participants who are using MySQL to successfully run the world’s most demanding applications, saving millions of dollars over proprietary software and hardware solutions.”

When: April 11 – 14, 2011
Where: Santa Clara, CA, USA at the The Hyatt Regency

MIX11
“MIX is a gathering of developers, designers, UX experts and business professionals creating the most innovative and profitable consumer sites on the web. Sessions range from technical, code-based topics to expert advice on content strategy, usability and design. Explore the future of the standards-based web — join the conversation at MIX11.”

When: April 12 – 14, 2011
Where: Las Vegas, NV, USA at the Mandalay Bay Convention Center

UX London
“UX London is a unique three-day event combining inspirational talks with in-depth workshops presented by some of the industry’s biggest names. Whether you’re beginning your career, or a seasoned professional, UX London is your chance to add core skills, absorb strategic thinking, and learn advanced techniques from pioneers in the field.”

When: April 13 – 15, 2011
Where: London, UK at the Cumberland Hotel

WebDU
“webDU is the premier Antipodean Web Technology Conference, taking place 14-15 April 2011 in Sydney, Australia. This is the ninth year the conference will be held. The conference offers the opportunity to get hands-on technical training, gain new skills, hear breaking news from the Web Industry, network with peers and industry leaders, and ultimately become more successful developing and delivering web applications.”

When: April 14 – 15, 2011
Where: Sydney, Australia at the Four Points by Sheraton Sydney, Darling Harbour

Where 2.0
“The O’Reilly Where 2.0 Conference explores the intersection of location technologies and trends in software development, business strategies, and marketing. The source for all things location-aware, Where 2.0 brings together CTOs, marketers, developers, technologists, researchers, geographers, startups, business developers, and entrepreneurs.”

When: April 19 – 21, 2011
Where: Santa Clara, CA, USA at the Santa Clara Convention Center

The Next Web Conference
“The Next Web brings together the best from Europe and the United States to look at overall Internet trends.”

When: April 27 – 29, 2011
Where: Amsterdam, the Netherlands

LessConf
“LessConf is a two-day conference with just 225 attendees. Lunch is provided on site. You’ll get the meet the speakers. You’ll get inspired (again). Between speakers and during lunch there are tons of opportunities to meet others in our industry. At LessConf you will hear great speakers, meet amazing people, and develop relationships.”

When: April 29 – 30, 2011
Where: Atlanta, GA, USA at the Georgia Institute Of Technology

May 2011 Events

JSConf
“JSConf is one of the best tech conferences out there and rightly so, because JavaScript or JS is one of the best languages out there. The core focus of this conference is to present the wonders of JavaScript that are often overlooked. The content of the conference caters to all types of JavaScript developers from client interface to server development to testing.”

When: May 2 – 3, 2011
Where: Portland, OR, USA at the Portland Art Museum

FITC Toronto 2011
“Now in its 10th year, FITC Toronto is one of the largest and longest running events of its kind in the world. With some of the most unique and engaging presenters from around the globe, FITC Toronto is a three day blitz of presentations, demonstrations, and panel discussions, sandwiched between our legendary FITC parties and abundant networking opportunities. Topped off with the FITC Award Show, it’s three days and nights that will leave you inspired, energized and awed.”

When: May 2 – 4, 2011
Where: Toronto, ON, Canada at the Guvernment

An Event Apart Boston
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: May 2 – 4, 2011
Where: Boston, MA, USA at the Marriott Copley Place

CMS Expo
“You’re invited to compare the best of the best in CMS and learn first-hand, from leading developers, designers and business minds of our time.”

When: May 2 – 4, 2011
Where: Chicago, Illinois, USA at the Hilton Orrington Hotel

WordCamp Developers
“The conference will feature 2 tracks, one targeting WordPress UX topics and issues, and the other targeting strictly development issues. The day will also be host to a WordPress Un-Conference where participants are encouraged to pitch talks and join in discussion.”

When: May 5, 2011
Where: Vancouver, BC, Canada

Make Web Not War
“At this conference, attendees will have the opportunity to learn about the latest technologies and techniques available to the ever-evolving web community. Here we will explore the power and flexibility of new web paradigms, mixed web environments, interoperable applications, and PHP on Windows and Azure. MWNW is about bridging the gap between different platforms, communities, and developers of all trades and backgrounds.”

When: May 6 – 7, 2011
Where: Vancouver, BC, Canada

J and Beyond
“An International Joomla! Conference.”

When: May 6 – 8, 2011
Where: Kercrade, the Netherlands at the Rolduc Conference Centre

Google I/O Developer Conference
“Google I/O brings together thousands of developers for two days of deep technical content, focused on building the next generation of web, mobile, and enterprise applications with Google and open web technologies such as Android, Google Chrome, Google APIs, Google Web Toolkit, App Engine, and more.”

When: May 10 – 11, 2011
Where: San Francisco, CA, USA at the Moscone Center

UX Lx: User Experience Lisbon
“Three eventful days in Lisbon to learn from world renowned speakers and meet UX Professionals from around the world. Hone up your skills with 16 practical workshops, 26 thought provoking talks and enjoy the city with lots of networking activities.”

When: May 11 – 13, 2011
Where: Lisbon, Portugal at the FIL Meeting Centre

Mobilism
“In two days we’ll explore the mobile world from a web-centric point of view. All of our speakers are deeply rooted in the web and have at one time or another decided to take their talent to mobile. They will teach you which web techniques work on mobile, which don’t, and which new ones you need in order to keep up with a rapidly changing web.”

When: May 12 – 13, 2011
Where: Amsterdam, the Netherlands, in Felix Meritis

Web Directions Unplugged
“HTML5 is fast becoming the way to develop not just web apps, but native apps for platforms like Android, iOS and webOS. Join us for two groundbreaking days of practical development and design presented by leading experts in this exploding field.”

When: May 12 – 13, 2011
Where: Seattle, WA, USA at The Conference Center

Valio Con
“Conference at the beach where it’s all about actual fun and not sitting in a hotel lobby the entire time.”

When: May 13 – 15, 2011
Where: San Diego, CA, USA

RailsConf
“RailsConf, co-produced by Ruby Central, Inc. and O’Reilly Media, Inc., is the largest official conference dedicated to everything Ruby on Rails. Through keynotes, sessions, tutorials, events, and of course lots of hallway hacking, RailsConf is the meeting place for the Ruby on Rails community.”

When: May 16 – 19, 2011
Where: Baltimore, MD, USA

Future of Web Design
“The Future of Web Design is coming back to London in 2011. Following on from the success of last year we will be bringing you a beautiful three full days of essential web learning.”

When: May 17-18, 2011
Where: London, UK at the The Brewery

Falsy Values
“A true JavaScript event.”

When: May 18 – 20, 2011
Where: Warsaw, Poland

TYPO Berlin
“To shift is to pick up speed, to push the envelope, to change your perspective. All three are useful strategies for TYPO 2011, in order to bring visual communications in line with the latest developments in technology.”

When: May 19 – 21, 2011
Where: Berlin, Germany

InDesignSecretsLive Print and ePublishing Conference
“Founded by world-renowned InDesign experts David Blatner and Anne-Marie Concepción, and dedicated to the proposition that InDesign professionals deserve a great learning experience, the Print and ePublishing Conference brings together over a dozen of the leading InDesign experts minds for three days of non-stop inspiration and education!”

When: May 23 – 25, 2011
Where: Alexandria, VA, USA at the Westin Alexandria

Gravity Free
“GRAVITY FREE 2011 is a celebration of excellence in multidisciplinary design innovation. It stars a remarkable cast of world-class designers who are changing the way we see the world, from a diverse group of design disciplines”

When: May 24 – 26, 2011
Where: San Francisco, CA, USA at the

Web Directions @media
“HTML5, CSS3, JavaScript, Mobile, Interaction Design, User Experience, and everything else that’s hot right now—it’s all on the carefully curated Web Directions @media program for 2011.”

When: May 24 – 27, 2011
Where: London, UK at Queen Elizabeth Hall

mesh conference
“mesh is happening because the five founders (see below) believed that Toronto deserved to have a world-class conference where people with an enthusiasm for the Web could talk about how it is affecting the media, marketing, business and society as a whole.”

When: May 25 – 26, 2011
Where: Toronto, ON, Canada

WebVisions
“WebVisions explores the future of design, content creation, user experience and business strategy to uncover the trends and agents of change that will shatter your assumptions about the Web. Be ready to network, share ideas and be inspired by an all-star lineup of speakers.”

When: May 25 – 27, 2011
Where: Portland, OR, USA at the Oregon Convention Center

International PHP Conference
“The IPC is the global recognized event for PHP developers, webworkers, IT managers and everyone interested in web-technology. Again, the conference will focus on main topics for developers and core-technologies for decision makers. We will show how to scale your applications, explain the details of Continuous Integration or evaluate different approaches to NoSQL.”

When: May 29 – June 11
Where: Berlin, Germany at the Maritim proArte Hotel

webinale
“Business, Design and Technology are the three basic pillars for success on the World Wide Web. This webinar has been prescribed for these three pillars of the first conference in 2007.”

When: May 30 – June 1, 2011
Where: Berlin, Germany at the Maritim proArte Hotel

June 2011 Events

Interlink Web Design Conference
“nterlink Conference will be a small and carefully crafted 3-day web event that will appeal to all web professionals. This international web design conference welcomes website architects, usability specialists, project managers, marketing coordinators, web developers, website designers and any other online professional that wants to meet others in the industry and get inspired.”

When: June 2 – 4, 2011
Where: Vancouver, BC, Canada at The Capilano Performing Arts Theatre

Internet Week
“Since 2008, Internet Week has taken place all over the city, thanks to our many partners hosting diverse events in different locations. The result is a critical mass of web-focused events that raises the profile of NYC’s industry as a whole, as well as the partners who participate.”

When: June 6 – 13, 2011
Where: New York City, NY, USA at Metropolitan Pavilion & The Altman Building, and around NYC

DIBI Conference
“DIBI (pronounced “dibby”), is the annual Design It. Build It. Conference held at The Sage Gateshead in the North East of England. DIBI brings together both sides of the web coin for an unusual two-track web conference. World renowned speakers leading in their fields of work will talk about all things web.”

When: June 7 – 8, 2011
Where: Newcastle upon Tyne, UK

TYPO3
“We invite you to the North American TYPO3 conference held this year in San Francisco. This will be a great time to learn more about the powerful system we use everyday and to connect with other developers from both North America and Europe. Several internationally-known leaders of the TYPO3 community will be attending and presenting.”

When: June 9 – 11, 2011
Where: San Francisco, CA, USA at the Fort Mason Center

Flash and the City
“Explore, discover, connect.”

When: June 9 – 12, 2011
Where: New York City, NY, USA

UXcamp Europe
“The main rule of the conference is: No spectators, just participants! This BarCamp-rule does not mean everybody has to do a Session, but everybody should come prepared to participate in an active manner.”

When: June 11 – 12, 2011
Where: Berlin, Germany at Erwin-Schrödinger-Zentrum of the Humboldt University

WordCamp Kansas City
“WordCamps are community organized meetings for users of WordPress, the blogging platform and content management system that is sweeping the online world.”

When: June 11 – 12, 2011
Where: Kansas City, MO, USA at Johnson County Community College

An Event Apart Atlanta
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: June 13 – 15, 2011
Where: Atlanta, GA, USA at the InterContinental Atlanta

140 Character Conference
“The #140conf events provide a platform for the worldwide twitter community to: listen, connect, share and engage with each other, while collectively exploring the effects of the emerging real-time internet on business.”

When: June 15-16, 2011
Where: New York City, NY, USA

Nordic Ruby Conference
“Come to Nordic Ruby 2011 and you will get a two day, single track Ruby conference, featuring the winning concept of 30 minute talks and 30 minute breaks. Very appreciated last year.”

When: June 16 – 18, 2011
Where: Gothenburg, Sweden

Ampersand
“The Web Typography Conference”

When: June 17, 2011
Where: Brighton, UK

HOW Design Live
“What do you call a mega-gathering of thousands of designers, freelancers, in-house managers and—new for 2011—packaging designers, plus a speaker roster packed with some of the brightest minds in the industry? HOW Design Live! Click the links below for more on each HOW Design Live event, then sign up for The BIG Ticket for exclusive access to all four conferences!”

When: June 22 – 27, 2011
Where: Chicago, IL, USA at the Hyatt Regency

Eyeo Festival
“Three days of inspirational talks, demos, labs, and workshops and opportunities to connect with people whose extraordinary creations are pushing the envelope. The line up is amazing. 30 brilliant individuals, one amazing collection of talent and insight. Add yourself to the mix, and it just gets better.”

When: June 27 – 29, 2011
Where: Minneapolis, MN, USA at the McNamara Alumini Center

Future of Web Apps
“The Future of Web Apps is coming to Las Vegas in 2011. The brand new event is a beautiful three full days of essential web learning.”

When: June 27 – 29, 2011
Where: Las Vegas, NV, USA at Meet exhibition venue

July 2011 Events

Designer/Developer Workflow Conference
“What’s the big deal about workflow? Workflow is something we all do, day in and day out – although you may not even think about it. Do you work with multiple applications during the day? Do you work with team members, departments, clients, etc.? Improving those workflows is what D2W is all about.”

When: July 14 – 16, 2011
Where: Kansas City, MO, USA at the Crown Plaza Hotel

Front-End Design Conference
“Front-End Conf is an event dedicated to content, presentation and behavior and to the awesome people in the design and development community.”

When: July 23, 2011
Where: St. Petersburg, FL, USA

The O’Reilly Open Source Convention
“OSCON provides a central place to gain exposure to and evaluate the new projects, tools, services, platforms, languages, software and standards sweeping through the open source community and the broader technology industry.”

When: July 25-29, 2011
Where: Portland, OR, USA

re:build Conference
“re:build is an intimate one-day event hosted in Downtown Indianapolis. We’re busy lining up some of our favorite speakers from all across the country. ”

When: July 29, 2011
Where: Indianapolis, IN, USA

UXCampLondon
“A one day BarCamp in Richmond, London for anyone involved or interested in user experience design, interaction design, information architecture or usability.”

When: Summer, 2011
Where: London, UK

August 2011 Events

An Event Apart Minneapolis
“An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: August 8 – 10, 2011, 2011
Where: Minneapolis, MN, USA at the InterContinental Atlanta

WordCamp
“WordCamp San Francisco is the official annual conference of the WordPress open source project. WordCamp SF 2010 brought together 700+ WordPress users and developers from around the world. In 2011 we’re expanding the programming for publishers, bloggers, and developers.”

When: August 12 – 14, 2011
Where: San Francisco, CA, USA at the Mission Bay Conference Center

Drupalcon London
“DrupalCon is an international event that brings together the people who use, develop, design and support the Drupal platform. DrupalCon London 2011 will feature content from the most influential people and brightest minds within the Drupal community and beyond, in addition to countless opportunities for networking, code sprints, and more.”

When: August 21 – 26, 2011
Where: London, UK

UX Australia
“The conference covers core user experience design topics – strategy, user-centred design, interaction design, information architecture, information design, service design, content & visual design. It’s not just digital though, and will also include presentations on the design of physical objects and environments.”

When: August 22 – 26, 2011
Where: Sydney, Australia at Four points by Sheraton

UX Week
“Calling UX professionals (or aspiring professionals) of all levels! Join us at UX Week 2011, the premier user experience conference, for fun times , inspiring sessions on the main stage and roll-up-your-sleeves learning during two full days of workshops. It’s going to rock.”

When: August 23 – 26, 2011
Where: San Francisco, CA at The Mission Bay Conference Center at UCSF

Related Links

• Conference Roundup
  A web app inspired by the original conference roundup here on Smashing Magazine.
• Lanyrd
  The Social Conference Directory. Also check Smashing Magazine’s Profile.
• ontwik
  Lectures, Screencasts And Conferences For Real Web Developers & Designers

What Event Will You Attend?

Have you attended one of these conferences before, or do you plan to attend any in 2011? Why do you enjoy attending these types of events? Which ones do you recommend and why? Please let us know in the comments.

© Louis Lazaris for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags:

I used to think the beginning of a website design project was the best part. Hopes are high. People are full of great ideas. Nobody is disappointed yet. But as I gained experience, I found that learning about a client’s brand, competitors and customers doesn’t always give clear direction about design goals.

Brand discussions can generate goals like “be modern,” but they don’t necessarily determine how to accomplish those goals. Competitor reviews can devolve into cherry-picking sessions that spawn “frankencomps” rather than provide helpful feedback. And mood boards, which communicate a general feeling, don’t help to articulate or prioritize design goals. With a design matrix, you can guide discussions and establish clear direction.

Hey, You Got Math In My Art…

Sometimes the abstract nature of design is enough to make you envy the people over in accounting, with their definite answers and proven formulas. While the beauty of design is that it transcends the world of definite answers, introducing a little math in the form of design matrices can help you create better websites by providing a clear picture of where the website design is today and where it should go tomorrow.

Design matrices don’t require any serious math skills because they’re based on the coordinate system. Chances are you’ve seen a competitor matrix that ranks brands according to two key attributes on X and Y axes (for example, value could be plotted against profit margin). A design matrix is essentially like a competitor matrix but ranks the client’s website against competitor websites, and it uses design attributes (“clean” and “warm,” for example) instead of other points of competitive comparison.

A typical competitor matrix ranks brands according to rational factors. (This example, which compares a few car models, was created for illustrative purposes only.)

A design matrix ranks website designs according to design attributes. (This example, which compares airline website designs, was created for illustrative purposes only).

Design matrices are powerful tools for determining the path of the website design process, because: they force you to determine two design attributes to focus on; they build consensus within a team; they guide the clients’ perception of competitors; and, most importantly, they lead to differentiated website designs.

The Art (And Math) Of Building A Design Matrix

Step 1: Gather Information

To build a design matrix, you will need to know the client’s core brand attributes and main competitors. You should also have a broad understanding of what the redesign aims to accomplish (from a design perspective): “the website is cluttered” or “our website is not engaging.” The good news is that information gathering is a normal part of the discovery phase.

A design matrix should not be the only piece of work involved in the discovery phase, but it can replace some other approaches. Creating or documenting a brand’s position and defining the key redesign goals are essential. However, a design matrix could potentially replace mood boards. A mood board is a collage or grid of images that capture the “feel” or “tone” of a brand. They are valuable tools for providing direction to new brands, but they provide a less concrete direction than a design matrix. If the brand is in its nascent form and needs broad high-level direction, then mood boards work well; but if you are working with an established brand or a client who prefers a concrete approach, then a design matrix is the best bet.

Document the brand’s position before creating a design matrix. (For illustrative purposes only.)

Image Spark is a great resource for creating online mood boards—particularly useful if you are working with a company that requires high-level brand definition.

Another common discovery activity that design matrices can replace is the “competitor website review.” Looking at competitors’ websites can generate lively discussion, but too often it either shifts the focus to feature sets instead of design direction, or it becomes a cherry-picking session for disparate design elements from a variety of websites that the designer is somehow supposed to mash together into a single coherent website design.

Create a design matrix that shows the current website in relation to competing websites. This way, you are less likely to get distracted by feature sets or be expected to combine all sorts of design elements. That said, if you are looking for an energizing group activity, competitor reviews can generate more brainstorming than a design matrix. Doing both is an option, but if you do that, then do the matrix after the walk-through of competitors.

Delta Airlines’ website.

United Airlines’ website.

Looking at these individual airline websites, rather than comparing them on a design matrix, can lead to a less design-oriented and more feature-focused conversation.

Step 2: Determine Your X and Y Axes

Narrowing down a design direction to two attributes can be uncomfortable for those of us accustomed to creative briefs that list a litany of brand attributes to guide our design. How often have we heard that a design should be “clean,” “inspiring,” “warm,” “engaging,” “approachable” and “trustworthy”? How do we even accomplish just two of these attributes? And if we must choose only two, how do we decide?

Understand that a design matrix is not intended to limit the final design to two attributes. That would be almost impossible. It is intended to illustrate the two most important attributes for taking the website design to the next level and differentiating it from that of competitors.

To determine your X and Y axes, ask yourself the following questions:

• Of all the brand’s attributes, what will make this client stand out from the crowd? Which design traits reinforce those brand attributes?
• What are the competitor websites’ strengths and weaknesses?
• What does the design need to do better in order to accomplish the website’s goals?

The X and Y axes should not be nearly synonymous (for example, “warm” and “engaging”), nor should they be mutually exclusive (“innovative” and “traditional”). There should be a slight tension between the two attributes.

The airline websites, for example, are ranked according to how “clean” and “personable” their designs are. There is a slight, but not negating, tension between these two attributes. Clean websites can come across as cold if they don’t have a distinctive voice or warm color palette. Personable websites are often less functionally organized. Achieving a high ranking for both attributes is a worthy challenge, and stepping up to that challenge will definitely create a distinctive website.

You might find that you change the labels of your axes as you place the websites on the matrix (see step 3), but the above process should get you pretty close to determining what the final axes should be.

Step 3: Play a Little

You know the competitors. You have a clear idea of what is important, brand- and design-wise. You have determined your x and y axes. It’s time to try some things out.

Place all of the websites on your matrix as you would rank them off the top of your head. As you begin to place them, you will most likely rearrange some as you compare them to others. This is a natural part of the process because the matrix shows relationships as well as individual rankings.

I was influenced by Jet Blue’s overall branding and so originally ranked its website’s personality fairly high. Later, when I compared it to the Delta and Virgin America websites, I revised the ranking.

Design matrices do not have to be limited to ranking competitors. They can also show a client’s website’s position among affinity brands (i.e. brands with a similar “feel” and customer base). Mini USA and Apple, for example, might be considered affinity brands because they both exemplify modern design and appeal to similar customer types.

Step 4: Get Serious

Things will take shape fairly quickly, but there is a final step before declaring your design direction matrix done and dusted. Before sharing the matrix with the client team, make sure you can defend it. Show it to others in your agency and see if they agree with your placement decisions. Ask these key questions:

1. Do my axes represent the two most important design attributes?
2. Can I clearly articulate why I placed each website where I did?
3. Will the redesign be able to get the website to the top-right corner? If not, what is holding it back?

If you answered yes, yes and yes (or yes, yes and yes if we do a certain thing…), then your website design direction matrix is ready to share with the client.

Creating Buy-In With Design Matrices

Everyone loves talking about design, but with everyone talking, we don’t always hear other ideas. If you show a client a design matrix before creating the initial comprehensives, then you will visibly and quantifiably show that you are on the same page; and because of that, you’ll likely be successful in the long run.

The design matrix will clearly show which websites you think best capture the desired attributes and where the current website falls into the mix. It is a tangible foundation for a conversation about design.

Invite the client to participate actively in this stage of the design process. Clients usually want to feel like they have had direct input in the design, and designers always prefer that the input comes sooner in a high-level, directional form (“The design feels cold”), rather than later in an overly specific form (“Make that element blue”).

Discuss the following questions:

• Does the matrix address the two most important design attributes?
• Do we all agree on the placement of competing and/or affinity brands?
• Do we all agree on the placement of the client’s brand?
• If we end up in the top-right corner, are we where we want to be?

Using a design matrix can be risky, mainly for one reason. Some clients have difficulty prioritizing the two most important design elements, and then they dig their heels in and declare that there are in fact four equally important elements. Hopefully, the matrix demonstrates how your choice of attributes distinguishes the website. If you meet with a lot of resistance, just create two matrices or conduct a competitor review (as discussed in step one).

Be prepared to explain your rationale and defend your position — but also be open to suggestions. Maybe there are good reasons to focus on different attributes, or maybe the team feels that the placements of some website are not quite right. Revising a design matrix is much easier than revising a design.

Truly Going The Distance

Creating a design matrix is a great first step, and getting client feedback is an awesome second step, but the most important step is to use the matrix as a resource as you design and when you present your designs to the client.

Ultimately, the purpose of a design matrix is to move a website design in the right direction. Specifically, move it to that space in the upper-right corner that represents the best of both worlds. As you design, continually refer to the matrix and see where your new iterations might fall on it.

Think about these questions as you design, and take notes for upcoming presentations:

• Do the new iterations embody the key attributes?
• Are they better than the competing and affinity brands?
• How do they accomplish the design goals?

When presenting designs to a client, review key findings and recommendations made during the discovery phase. Before presenting your designs, review the matrix with the client, and revisit the matrix at the end of the presentation to show that progress has been made.

Training Wheels: A Step-By-Step Overview Of A Design Matrix For Cannondale

The following walk-through illustrates the design matrix process in its entirety and addresses the kinds of decisions that need to be made when creating a matrix. The exercise below is entirely theoretical. I do not work, nor have I ever worked, for any major bicycle manufacturer, including Cannondale. Thoughts about what design attributes Cannondale might strive for are purely my opinion. Thoughts about competing website design attributes are informed by looking at their websites and general industry expertise — just as yours will be.

How would you create a design matrix for Cannondale? (This example is purely illustrative.)

Step 1: Understand

For the purposes of this exercise, let’s assume that Cannondale has chosen you to redesign its website. Your first step will be to understand its brand, its competition and the desired attributes of its new website. Let’s also assume that you left the initial discovery meeting with this information:

• Cannondale’s key competitors are Trek, Giant, Diamondback and Fuji.
• Its brand is about performance, innovation and a superior craftsmanship that inspires riders.

When you ask about the desired design attributes, Cannondale’s representatives say the website should capture the sense of elation that comes with a successful bike ride. They also want the website to showcase technical innovation, dedication to quality and devotion to the individual rider. Your notes read, “inspiring, innovative, technical, individual, quality.”

Step 2: Determine Your Axes

The X and Y axes reflect the client’s most important and desired design attributes, but do look at competing websites before naming the axes; they will inform your direction and give you ideas about what would be distinctive.

Upon viewing the competitor websites, I found both Trek’s and Fuji’s to be “immersive” and “powerful,” with clean, bold imagery. Fuji’s was slightly colder and more “technical.” Diamondback has an inspiring home page, but the website loses steam and doesn’t showcase the individual bikes distinctively. Giant has a strong focus on teams and individual riders and helpful bike selection tools, but the design is flat.

So, how does all of this play into naming the axes and creating the matrix? Going back to your note about desired design attributes, we see that Cannondale wants to showcase technical innovation, which Trek and Fuji do well on their websites; Cannondale wants to inspire, which Trek and Fuji do through immersive imagery; unlike Giant, though, Cannondale doesn’t want to focus on racing.

At first, it may seem that “inspiring” and “innovative” would be good axes names, but those attributes don’t have quite enough tension. They are not synonyms, but there is no balance either. “Inspiring” and “quality” may come to mind, but “quality” is not a design attribute; it’s something the client wants to showcase (it’s an attribute of the product, not the design).

I chose “inspiring” and “technical” for the desired design attributes. “Inspiring” works because the client wants to inspire riders. “Technical” is a good second attribute because it captures innovation and product quality while striking a balance with “inspiring.” There is a healthy tension between the two words. Capturing both emotion and technical detail is difficult. Accomplish that balance and you’ll leave the competition in the dust.

Step 3: Place Websites on the Matrix

I always start by plotting all of the websites roughly where I think they fall on the matrix, and then I move them around as I consider the relationships between the websites.

I originally placed Cannondale’s website in the lower-left corner but, as I compared it to the other websites, I realized that it’s actually more technically focused than others, including Diamondback and Giant. That said, the Trek and Fuji websites are still more technical, with their bold product showcases and detailed imagery.

Inspiration-wise, the current Cannondale website seems to be on par with Giant’s: there is imagery of bikers, but it feels flat and diminutive.  Diamondback’s immersive home page raises it a bit above the others. Trek’s warmth and voice put it in the lead for inspiration. I originally had Trek in the upper-right, but I ultimately decided that Fuji’s website has a more technical feel to it.

The final matrix (below) is informative on many levels. It shows where Cannondale currently is and where the websites are that it needs to surpass in order to get to where we determined it needs to go. Naturally, the final design will have a unique flavor, but looking at the competing designs will partly uncover how to get there.

A design matrix informs the path of the design process.

Step 4: Consensus

This is a purely illustrative example, so I did not show this to a team (or the client) for feedback. Typically, feedback focuses on the desired design attributes (“Is this where we want to go?”) and the placement of all of the websites on the matrix. The most important thing is to agree on direction, of course, and then to determine the goal. The hard part is to design a website that gets there.

Step 5 (the Big One): Using It

The last step is not so much a step as a big stride. Once you’ve created the matrix, the important part comes: using it to create a better website. Make a copy for everyone involved in the project (including those in other disciplines) and have them put it up somewhere to serve as a daily reminder and motivator.

Refer to the matrix as you design. Are the decisions you are making moving you toward the upper-right? For example, if you were choosing images for the Cannondale website, ask yourself relevant questions:

• Is this image inspirational?
• Does it convey the technical expertise of Cannondale?
• How can the design be more inspiring?
• How can I better convey the technical passion of the brand?

As mentioned, revisiting the matrix when showing comps to the client will help justify your approach, but the real reason to create a matrix isn’t to sell comps or do a fun exercise during discovery; rather, it is to remind us of the path we are on. We could take so many directions, and going down a road that looks good but doesn’t take you where you want to be is all too easy.

Think of your design matrix as a compass. It’s not as precise (or cold) as a GPS; it’s an old pocket compass that wobbles a bit as you walk but still gets you to the summit.

Do’s And Don’ts

The beauty of design matrices is that they provide a new way to look at competitors and a tangible foundation on which to begin discussions with clients. They also enable you to play a little as you tweak the axes’ names and the websites’ placement to get them just right. There is wiggle room in the methodology and application, so have fun with it. That said, there are a few set guidelines worth adhering to for success:

• Don’t be afraid to experiment.
• Do get your ducks in a row. Verify the desired design attributes and the competitor and affinity brands with a client before proceeding, so that the matrix is relevant.
• Don’t base your insights on home pages alone. A website’s design is more than the home page. Your matrix might use a home page screenshot, but include it only if it represents the overall design of the website.
• Do share your toys. Get team input about the placement of websites on the matrix. It’s not an altogether scientific approach, but be as objective as possible.
• Don’t carve it in stone. Be open to recommendations from clients. Changing a matrix is easier than changing a comp.
• Do use it to sell your work. Present the matrix as part of your comp presentation in order to explain your rationale and sell your comps.
• Don’t matrix and run. Don’t abandon the matrix after the discovery process. Refer to it regularly.

Enjoy the process of creating a matrix and of seeing opportunities to design a distinctive website for your client.

Further Reading

• “Differentiating Your Design: A Visual Approach to Competitive Reviews,” by Michael Hawley
• “Beyond “I Hate Green”: Managing Productive Visual Design Reviews,” by Kim Cullen
• “The Four Phases of Design Thinking,” by Warren Berger

(al) (vf)

© Bridge for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: business, Design, matrix