What’s there to be afraid? Stalkers? Is the team really so ugly that their mugs can’t appear on the site? Or is the team so transient that upkeep would be too much of a challenge?

If you really want to create two-way dialogue and meaningful relationships with your customers (i.e. join the conversation on the social web), then give your customers access to your people. We don’t have relationships with abstract entities in the same way that we do with flesh and blood people. Not even if you anthropomorphise your business six ways to Sunday.

In the end, it’ll be good for everyone. Your staff will enjoy a more public sense of ownership and involvement, and your customers will rest easy knowing there are real people behind the curtain.

Below are some examples of nicely executed team pages (yes, I included KA+A).

We all know about outsourcing and offshoring. If you’re like me the word offshoring conjures up thoughts of talking to someone with a thick accent in India while trying to understand why your computer beeps twice then flatlines when you press the power button. But if that’s offshoring, what’s INsourcing?

Indiana has lots of great universities. In fact several of them are top 10 for certain majors. The list includes the University of Notre Dame, Purdue University, Indiana University, Ball State University, and Rose-Hulman Institute of Technology. The list goes on. There are lots of great companies headquartered here. There’s Eli Lilly, Hill-Rom, ITT Tech, ExactTarget, and I couldn’t forget Steak ‘n Shake. INsourcing is the idea of using the local resources that Indiana produces. It’s the concept of aggressively hiring graduates from the state’s universities. It’s the idea of going after those who have been laid off or are moving on from some of the top companies. Too often Indiana is a stepping stone to greater things for many in their educational and professional careers. That’s not to say there isn’t local talent. I make a point of finding and meeting with talented individuals all the time. They’re not hard to find. Go to a Ruby on Rails meet up or an iPhone developers meeting. Check out an entrepreneur group or a CEO round table. Look at the test scores of young students in Indiana. You’ll be surprised how much talent there is. Did you know that Apple employs local talent and has them work remotely? I’m not talking about the guys in the Apple store. I’m talking about the people who develop code and design devices who are working right here. I was surprised when I found that out. Corn and soybeans aren’t Indiana’s largest export, talent is. If companies like Apple, Microsoft, and Google have realized this, our local companies need to as well.

So what is INsourcing? It’s the aggressive hiring and utilization of local talent and resources here in Indiana.

With the upcoming release of Apple’s iPad (April 3rd, 2010), there has been an increasing amount of buzz recently around the change in the way we will consume media. With an estimated 40-50 tablet devices set for release by early 2011, Wired Magazine, in partnership with Adobe, has seen this as an opportunity to rethink the way we connect with magazine brands, leading to a fundamental shift in the way Wired is produced with it’s new digital app.

At the SXSW panel After Magazines: Wired’s Digital Rebirth, panelists Scott Dadich (Creative Director, Wired Magazine) and Jeremy Clark (Senior Experience Design Manager, Adobe) explained the production methods of the app using Adobe Air, and showcased its features with a multi-platform demo.

Wired’s Goal: Publish Once, Author Anywhere

The average Wired article takes 24 days to go from initial copy to finished layout—a tight timeframe considering Wired is a monthly publication. Luckily, the team responsible for the print version of the mag are able to repurpose the layouts for use on the iPad and other devices, with only incremental hours, and no need for any additional staff.

Whereas reading a print magazine is a single-axis, linear experience, Wired have succeeded in developing their digital magazine into a multi-axis, non-linear experience. Articles are navigated by swiping left and right, while pages within these articles are accessed by swiping up and down. In addition to this, readers can tap the screen to bring up the ‘Scrubber’, a scrolling navigation bar that allows the reader to scroll page-by-page through the magazine. There is also a ‘Browse’ mode, which provides a fully zoomed-out view, allowing easy access to any article or page with just a couple of taps.

It’s not just Print, it’s Print Plus

The digital app is not simply a straight, digitized version of the print mag, it is much more. The app utilizes audio and video, perfect for providing snippets of interviews, music clips and movie trailers. Illustrations, charts and diagrams can be animated and even allow reader interaction. Photography has a whole new lease of life with the use of galleries, allowing multiple images to occupy the same space, accessed with a swipe of the finger, and 360 VR imagery allows the reader to see more of a tested product than a typical 2D photo. The orientation of the iPad plays a big part in the layout of the articles too. Rotating the iPad from landscape to portrait (or vice-versa) can switch editorial images, offering different perspectives on the same image, or zoom in on interactive content that appears smaller in the alternative orientation.

Of course, it’s not just editorial content that gets the special treatment. Using the same features listed above, consumers can interact with their favorite brands in a whole new way. Fashion labels can showcase collections in one ad and can utilize high-resolution photography to allow detailed close-ups (using your finger and the ‘Rover Dot’ to move around each image). Automotive brands can use 360 VR photography to allow rotatable views of their vehicles. Music labels can embed clips of songs or albums, just as movie studios can embed movie trailers, clips and featurettes.

Reflective vs. Emissive Displays

Many skeptics have expressed concern that reading long articles on the iPad, which uses an emissive light display (LCD/LED screen), brings on eye fatigue much faster than on devices such as Amazon’s Kindle, which uses a monochromatic, reflective light display. Due to the high resolution display of the iPad, Wired are able to use the same custom typeface family they do in the print version of their magazine. Wired’s typefaces were specifically designed to minimize the amount eye fatigue reader. Further research into reflective vs. emissive light displays is being conducted in conjunction with Hoefler & Frere Jones, although they admit there could be years of work ahead in this respect. Also, the monochromatic display of the Kindle isn’t conducive to an engaging, immersive interactive experience like that of the iPad.

The Better the Design,
The Easier the Reading Experience,
The Deeper the Engagement,
The More Connected the User,
The Stronger the Brand Relationship.

Social networking is expected to play a huge part in Wired’s digital rebirth, with Twitter, Facebook and email integration directly within the app, with content sharing capabilities being implemented. The ability for ‘Favorite’ articles will also be present, as well as strong search capabilities. Content will have a ’sticky’ shelf life and will be available for purchase/viewing from within the app. Finally, user engagement will be tracked using Omniture (the web analytics platform acquired by Adobe in October 2009).

Wired’s iPad app is set for release this summer, through the iPad app store. Versions for other devices such as iPhone and Google’s Nexus 1 later in the year. Subscription pricing TBA.

Wired rocks audience at SXSW with iPad demo from Mangrove on Vimeo.

]]> http://www.kaplusa.com/blog/2010/03/sxsw-wired%e2%80%99s-digital-rebirth/feed/ 0 http://www.kaplusa.com/blog/2010/03/sxsw-indianapolis-invades-austin/ http://www.kaplusa.com/blog/2010/03/sxsw-indianapolis-invades-austin/#comments Fri, 19 Mar 2010 19:13:47 +0000 Clay Reinken http://www.kaplusa.com/blog/?p=3552

Every year, as we arrive in Austin, we usually head immediately to our favorite spot, The Boiling Pot, for some spicy crawfish and Shiner Bock. And every year, our guest list continues to grow. We didn’t have any trouble finding Hoosiers in Austin this year as we were pleased to have over 40 of our friends join us to kick off what ended up being a very memorable and engaging week. With everyone’s hands and eyes cemented to their iPhones for the remainder of the conference, the menu at The Boiling Pot seemed the appropriate choice to start it off, forcing us to put down our phones for some real socializing and interaction.

Joining us this year was the Formstack & Formspring.me team (no, they were not in jail), the Design Solutions Team from ExactTarget, Graphite, Healthx, BlueLock, SmallBox, PocketTales, Tuitive, SandpaperStudio, AIGA Indy & Jacksonville, Apparel Media Group, James Paden, Paul Roales, and sketchnoter Mike Rohde.

If you’re going to be at SXSW next year, be sure to drop us a line so we can make room for you at the table.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

In all likelihood you probably read the first five (or perhaps only two) words of the first paragraph before skipping down to here. Many of you can probably recite the first line off by heart, but most likely all of you know what the text’s name and primary usage is. Used as placeholder text by graphic designers and typesetters for the last 50 years (and possibly as far back as the 15th Century), Lorem Ipsum was chosen because it closely represents the ‘shape’ of modern text and can be dropped in place of real text for layout purposes. It is based on an excerpt of de Finibus Bonorum et Malorum (On the Ends of Goods and Evils), written by Cicero in 45 B.C. Its approximate translation is as follows:

“Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?”

I say ‘approximate translation’ because the standard Lorem Ipsum passage is full of grammatical errors and omissions, effectively rendering it as nonsense. Of course, because of its new intended purpose and the fall in Latin literacy this isn’t really a problem. Using Lorem Ipsum to fill in for a paragraph of text is by no means ideal but I suppose is acceptable. Using it to fill in for headlines, taglines or any copy that should inform a client of intended messaging is most definitely not.

There are plenty alternatives to Lorem Ipsum available online, but mostly all are comprised of random words to make up nonsense text. One example is the Malevole Text Generator, which generates paragraphs based on popular 80s TV show theme tunes. While this is certainly amusing, it is not really appropriate for, say, a mock-up of a law firm’s website.

Back in the days when QuarkXPress was the primary layout application for print designers, there existed a plug-in called Jabberwocky. Jabberwocky generated the same nonsense text as the majority of today’s online text generators, but it had one trick up its sleeve—the option for designers to specify nouns, verbs, adjectives, etc., to generate custom paragraphs of text. That meant it was possible to generate copy that was specific to your target audience, e.g. by entering law-specific terminology to use in a layout for a law firm.

I suppose the redeeming factors of Lorem Ipsum are its wide recognition and the obliviousness of people to its original meaning. Reading the first couple of words is enough for most to understand it will be replaced with real text somewhere down the line. Bearing that in mind, would a web app based on Quark’s Jabberwocky be a good idea? I think it could work and would be a great side project. Until that day I suppose I’ll just keep using Lorem Ipsum.

Case in point: The SXSW iPhone app. I guess it’s supposed to serve as my SXSW HQ while I’m in Austin. It’s a modest little app, comprised of a scheduler, GPS map, newsreader, electronic business card, and micro-messaging app rolled up into one neat little cluster of a package. Oh, and it’s really slow. And I’m in Indy right now. I can’t imagine how it’s going to perform when the geek-horde invades Austin.

But don’t worry, there’s a web app to save you from that app! It’s called SitBy.Us, and it’s great. It runs much faster than the official app, primarily because it focuses on the one thing an SXSW app should focus on: your schedule. I’ve already got maps, Tweetie, and Google Reader on my phone, so why would I want shoddy imitations of those that are branded SXSW?

SitBy.Us is well designed and beautiful in its simplicity. Times are color coded so its easy to see what’s happening at a glance. The filtering option is limited to time slots, unlike the SXSW website which gives you so many filtering options your head wants to explode (can someone please explain the difference between a Panel, Studio SX, Core Conversation, and Workshop to me!!!).

SitBy.Us does one more thing. One more good thing. SitBy.Us let’s you check into and event and indicate where you’re sitting so that your friends can find you when they get there. If your like me, and traveling with a posse, this is a very good thing. For once, I won’t have to wonder around a packed, already-started panel swinging my head back and forth trying to spot my buddy with the hoodie, MacBook Pro, and Manhattan Portage messenger bag in a sea of people with hoodies, MacBook Pros, and Manhattan Portage messenger bags.

To top it all off, you log in via Twitter, so you’re already connected to all of your friends and followers. Highly recommending this to anyone headed down South this week. Get it here.

Sources include Twitter, LinkedIn, Flickr, MySpace, and more. The Twitter piece will even show you a list of recent Tweets. Very cool. If you’re a Gmail user, check it out.

Most notably, ExactTarget was the only ESP to achieve a perfect score in the Customers category. According to the report, “with high satisfaction scores and online community, ExactTarget can successfully meet marketers’ complex business needs.” That’s particularly exciting for the KA+A team, since we had the opportunity to work with ExactTarget on the creation of their user community, 3Sixty. With over 16,000 members, 3Sixty has become a model of what an online user community can and should be.

Well, the team at KA+A wanted to congratulate ExactTarget for their success in the Wave report, so we decided to create a little trophy for them. What would be more appropriate than a surfboard!? We delivered the board (pictured below) earlier this week, and they thought it was so cool that they brought it on stage during their 2010 Sales and Services conference.

Congratulations on a great 2009, ExactTarget. And thanks for giving us an opportunity to design a custom surfboard!

Double Spacing

This convention harks back to the days of monospaced typewriters where it was common practice to insert a double space to distinguish the beginning of a sentence from the surrounding single word spaces. When using proportional fonts this really isn’t necessary, and is, to be brutally honest, just plain ugly.

‘Dumb’ Quotes

Typewriters are also responsible for the introduction of ‘straight quotes’, non-specific quote marks designed as a space-saving measure for the keyboard, avoiding the need for separate opening and closing quote marks. Straight quotes are commonly used in place of proper quotation marks or ‘curly quotes’. Many designers will tell you that straight quotes are used to represent feet and inches, but in reality, feet and inches should be represented using primes. Straight quotes are obsolete and should not
be used.

Incorrect Hyphenation and Sentence Breaks

Hyphens are the most commonly used method of splitting sentences and indicating ranges of values. However, hyphens should only be used to split words across lines or to connect compound words (e.g. double-barreled). To indicate a break in thought in a sentence, an em dash with hairline spaces should be used (an en dash with a space before and after is also acceptable, but should be kerned appropriately).

Horizontal and Vertical Scaling

Well-designed typefaces have varying degrees of contrast between horizontal and vertical strokes. For example, in most sans-serif typefaces the vertical strokes are optically thicker than horizontals in order for them to look the same width. Distorting type through scaling upsets the balance of a typeface. With vertical scaling the vertical strokes can become too thick, disrupting the left-to-right flow of a piece of type, and smooth curves can appear to ‘peak’ in certain areas. With extreme horizontal scaling the horizontal strokes become thinner than the verticals. If it is really necessary to distort type, it should be no more than 1-2% wider before it becomes obviously noticeable. It is best practice to use a typeface family with the appropriate widths for your needs – many now have multiple widths ranging from Ultra Compressed to Extended.

Auto-Styling

Many design and layout applications permit ‘faked’ bold, italic and small caps. The apps use mathematical algorithms to stroke, slant and scale individual characters. Adding a stroke to make a bold weight loses some of the details that aid legibility, and simply skewing the typeface affects the overall weight and can cause some strokes to virtually disappear. Fake small caps are achieved by forcing lowercase characters to uppercase and scaling them down, making them feel narrower and lighter than the original lowercase. Commercial typefaces are designed with multiple weights, italics and variants, each with carefully considered optical corrections and custom-designed glyphs. For example, bold weights have greater contrast between horizontal and vertical strokes, italics generally utilize a single-storey lowercase ‘a’, and small caps have been width- and weight-corrected for optical balance. Again, the best solution is to choose a type family with the appropriate variants for your needs. Please, steer clear of auto-styling.

Widows, Orphans and Rivers

“An orphan has no past, a widow has no future.” An orphan is a single word line at the end of a paragraph. A widow is a single line of text at the top of a column. Both result in excessive white space which interrupts the balance of a set piece of text. A river is a line of white space that appears to run through a paragraph of text. Creative kerning and letter-spacing, or rewriting the text is the only effective solution to these issues.

Poor Kerning

Typefaces are generally spaced for text usage (small) and not for display purposes (large). Manual kerning is required to make display type look evenly spaced, a practice which is non-existent outside the design community, and one which many designers tend to overlook. It is also worth noting that the majority of typefaces are designed with tabular figures – numbers which sit within an equal space so they line up perfectly in tables. For text and display purposes, this needs a lot of manual correction. Some typefaces have sets of lining and old-style figures, but again these tend to be spaced for text use, unless there are size-specific variants.

Can you see what’s wrong with the statement above?

Bad typography is everywhere. It can be found in magazine articles, outdoor signage, restaurant menus, billboards, newspaper and TV advertisements and all over the internet. Spend just 30 seconds looking it’s easy to find a whole host of typographic faux pas—incorrect hyphenation, ‘dumb’ quotes, double-spacing, widows, orphans, poor kerning… the list goes on. Typography is something every designer should deeply care about, which is why it pains me to see it abused so profusely.

Typographic literacy seems to be on the decline, and as many designers who are not well-versed in typography move into teaching, they pass on little typographic knowledge to their students. A lot of typographic knowledge can be gained in the workplace, but with the demise of the dedicated design agency proofreader, there is less chance of catching typographic errors before a project goes live or to print.

The average non-designer reading a newspaper or browsing online probably doesn’t care about typography and has no awareness of when something is wrong. For example, not many will be able to tell you the difference between dumb quotes, foot and inch marks, or quotation marks. Almost all standard installed system fonts use tabular figures so they don’t think about—and really have no method of—kerning numerals set within text.

Technology is a major barrier in the way of good typography. There aren’t enough keys on a computer keyboard to have separate keys for hyphen, em dash and en dash, or for separate open and closed, single and double quotation mark keys. Designers have to rely on keyboard shortcuts to find the characters they need, and some don’t even have keyboard shortcuts at all—in that case a character viewer such as PopChar on the Mac is needed, or several minutes of trawling through Alt character tables on Windows.

Some software developers have implemented a Smart Quotes feature in their applications that automatically substitutes dumb quotes for quotation marks. This is a step in the right direction, but really it only just masks the problem.

Online typography is a whole other issue as there is currently not a lot of typographic control available. That is changing, albeit slowly, as updates to HTML and CSS are rolled out. It wasn’t until HTML 4 that many of the appropriate characters became available for use, but it takes a lot longer to type ’ for a right single quote than simply ", so you can already see the route the majority will take. Kerning web fonts is still a no-go and for the time being it seems unlikely to stay that way. It’s unlikely there will ever be as much typographic control on screen as is in traditional media.

So, could you tell what was wrong with the type in the first image? It uses a horizontally-scaled typeface, ‘dumb’ quotes, double hyphen and forced bold auto-styling. Below is the way the opening statement should have been written, with appropriate typeface, ‘curly’ quotes and en dash:

Just as the boom in SMS messaging signaled a rise in bad grammar and punctuation, so too is technology at least partly responsible for the decline in typographic literacy. As a designer I feel responsible for raising awareness of these issues and educating people on the way things should be done. Here are some examples of common typographic errors and how to correct them.