Archive for April, 2012

Why We Shouldn’t Make Separate Mobile Websites


  

There has been a long-running war going on over the mobile Web: it can be summarized with the following question: “Is there a mobile Web?” That is, is the mobile device so fundamentally different that you should make different websites for it, or is there only one Web that we access using a variety of different devices? Acclaimed usability pundit Jakob Nielsen thinks that you should make separate mobile websites. I disagree.

Jakob Nielsen, the usability expert, recently published his latest mobile usability guidelines. He summarizes:

“Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.”

I disagree (mostly) with the idea that people need different content because they’re using different types of devices.

Firstly, because we’ve been here before, in the early years of this century. Around 2002, the huge UK supermarket chain Tesco launched Tesco Access—a website that was designed so that disabled people could browse the Tesco website and buy groceries that would be delivered to their homes.

It was a great success—heavily stripped down, all server-generated (as in, those days screen readers couldn’t handle much JavaScript) and it was highly usable. One design goal was “to allow customers to purchase an average of 30 items in just 15 minutes from login to checkout.” In fact, from a contemporary report, (cited by Mike Davis), “many non-disabled customers are switching from the main Tesco site to the Tesco Access site, because they find it easier and faster to use!” It also made Tesco a lot of money: “Work undertaken by Tesco.com to make their home grocery service more accessible to blind customers has resulted in revenue in excess of £13m per annum, revenue that simply wasn’t available to the company when the website was inaccessible to blind customers.”

However, some blind users weren’t happy. There were special offers on the “normal” Tesco website that weren’t available on the access website. There were advertisements that were similarly unavailable—which was a surprise; whereas most people hate advertisements, here was a community complaining that it wasn’t getting them.

The vital point is that you never know better than your users what content they want. When Nielsen writes that mobile websites should “cut features, to eliminate things that are not core to the mobile use case; [and] cut content, to reduce word count and defer secondary information to secondary pages,” he forgets this fact.

Tesco learned this:

“We have completely redesigned Access so that it is no longer separate from our main website but is now right at the center of it, enabling our Access customers to enjoy the same features and functionality available on the standard grocery website. As part of this work we have had to retire the old Access website.”

Nielsen writes:

“Build a separate mobile-optimized site (or mobile site) if you can afford it … Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two websites, and cross-linking to make it all work.”

From talking to people in the industry, and from my own experience of leading a dev team, I’ve found that building a separate mobile website is considered to be a cheaper option in some circumstances—there may be time or budgetary constraints. Sometimes teams don’t have another option but creating a separate website due to factors beyond their control.

I believe that this is not ideal, but for many it’s a reality. Re-factoring a whole website with responsive design requires auditing content. And changing a production website with all the attendant risks, then testing the whole website to ensure it works on mobile devices (while introducing no regressions in the desktop website)—all this is a huge task. If the website is powered by a CMS, it’s often cheaper and easier to leave the “desktop website” alone, and implement a parallel URL structure so that www.example.com/foo is mirrored by m.example.com/foo, and www.example.com/bar is mirrored by m.example.com/bar (with the CMS simply outputting the information into a highly simplified template for the mobile website).

The problem with this approach is Nielsen’s suggestion: “If mobile users arrive at your full website’s URL, auto-redirect them to your mobile website.” The question here is how can you reliably detect mobile browsers in order to redirect them? The fact is: you can’t. Most people attempt to do this with browser sniffing—checking the User Agent string that the browser sends to the server with every request. However, these are easily spoofed in browsers, so they can’t be relied upon, and they don’t tell the truth, anyways. “Browser sniffing” has a justifiably bad reputation, so is often renamed “device detection” these days, but it’s the same flawed concept.

Twitter_mobile
On mobile, Twitter.com automatically forwards users to a separate mobile website.

More troublesome is that there are literally hundreds of UA strings that your detection script needs to be aware of in order to send the visitor to the “right” page. The list is ever-growing, so you need to constantly check and update your detection scripts. And of course, you only know about a new User Agent string after it turns up in your analytics—so there will be a period between the first visitor arriving with an unknown UA and your adding it to your detection scripts (in which visitors will be sent to the wrong website).

Despite all this work to set up a second parallel website, you will still find that some visitors are sent to the wrong place, so here I agree with Nielsen:

“Offer a clear link from your full site to your mobile site for users who end up at the full site despite the redirect … Offer a clear link from your mobile site to your full site for those (few) users who need special features that are found only on the full site.”

Missing out features and content on mobile devices perpetuates the digital divide. As Josh Clark points out in his rebuttal:

“First, a growing number of people are using mobile as the only way they access the Web. A pair of studies late last year from Pew and from On Device Research showed that over 25% of people in the US who browse the Web on smartphones almost never use any other platform. That’s north of 11% of adults in the US, or about 25 million people, who only see the Web on small screens. There’s a digital-divide issue here. People who can afford only one screen or internet connection are choosing the phone. If you want to reach them at all, you have to reach them on mobile. We can’t settle for serving such a huge audience a stripped-down experience or force them to swim through a desktop layout in a small screen.”

The number of people only using mobile devices to access the Web is even higher in emerging economies. Why exclude them?

Mobile Usability

I also agree with Nielsen when he writes:

“When people access sites using mobile devices, their measured usability is much higher for mobile sites than for full sites.”

But from this he draws the wrong conclusion, that we should continue making special mobile websites. I believe that special mobile websites is like sticking plaster over the problem; we generally shouldn’t have separate mobile websites, anymore than we should have separate screen reader websites. The reason many “full websites” are unusable on mobile phones is because many full websites are unusable on any device. It’s often said that your expenditure rises as your income does, and that the amount of clutter you own expands to fill your house however many times you move to a bigger one. In the same way, website owners have long proved incontinent in keeping desktop websites focussed, simply because they have so much room. This is perfectly illustrated by the xkcd comic:

A Venn diagram showing
A Venn diagram showing “Things on the front page of a university website” and “Things people go to the site looking for.” Only one item is in the intersection: “Full name of school.” Image source: xkcd.

As I wrote on the website The Pastry Box on April 13th:

“The mobile pundits got it right: sites should be minimal, functional, with everything designed to help the user complete a task, and then go. But that doesn’t mean that you need to make a separate mobile site from your normal site. If your normal site isn’t minimal, functional, with everything designed to help the user complete a task, it’s time to rethink your whole site.

“And once you’ve done that, serve it to everyone, whatever the device.”

In a previous article, Nielsen wrote in September 2011 that he dropped testing usability with featurephones:

“Our first research found that feature phone usability is so miserable when accessing the Web that we recommend that most companies don’t bother supporting feature phones.

“Empirically, websites see very little traffic from feature phones, partly because people rarely go on the Web when their experience is so bad, and partly because the higher classes of phones have seen a dramatic uplift in market share since our earlier research.”

This is a highly westernized view. Many people can’t afford smartphones, so they use feature phones running proxy browsers (such as Opera Mini), which move the heavy lifting to servers. This is often the only way that underpowered featurephones can browse the Web. Statistics from Opera’s monthly State of the Mobile Web report (disclosure: Opera is my employer) shows that lower-end feature phones still dominate the market in Eastern Europe, Africa and other emerging economies—see the top 20 handsets worldwide for 2011 that accessed Opera Mini. Since February 2011, the number of unique users of Opera Mini has increased 78.17% and data traffic is up 142.79%.

A caveat about those statistics: not every user of Opera Mini is a featurephone user in developing countries. They’re widely used on high-end smartphones in the West, too, as we know that they are much faster than built-in browsers, and users really want speed.

Nielsen’s dismissal of feature phones reminds me of some attitudes to Web accessibility in the early 2000′s. His assertion that companies shouldn’t support feature phones because they see little traffic from feature phones is the classic accessibility chicken and egg situation: we don’t need to bother with making our website accessible, as no-one who visits us needs it. This is analogous to the owner of a restaurant that is up a flight of stairs saying he doesn’t need to add a wheelchair ramp as no-one with a wheelchair ever comes to his restaurant. It’s flawed logic.

Developing Usable Websites For All Devices

The W3C Mobile Web best practices say:

“One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices. The context of mobile use, device capability variations, bandwidth issues and mobile network capabilities all affect the representation. Furthermore, some services and information are more suitable for and targeted at particular user contexts.”

There will always be edge cases when separate, mobile-specific websites will be a better user experience, but this shouldn’t be your default when approaching the mobile Web. For a maintainable, future-friendly development methodology, I recommend that your default approach to mobile be to design one website that can adapt to different devices with viewport, Media Queries and other technologies that are often buzzworded “Responsive Design.”

Combining these techniques in a smart way with progressive enhancement allows your content to be viewed on any device (and with richer experiences available on more sophisticated devices), with the possibility of accessing device APIs such as geolocation, or the shiny new getUserMedia for camera access.

Although many other resources are available, I’ve written “Mobile-friendly: The mobile web optimization guide” which you’ll hopefully find a useful starting point.

Further Reading

(jvb) (il)



© Bruce Lawson for Smashing Magazine, 2012.


Design on the Go: Designer Apps for Android


  

As smartphones have advanced, and the display and photo capture technologies have improved, many have desired the ability to design and to edit images on their mobile phones. In fact, today hundreds of design applications exist on Google Play (previously known as Android Market). So in order to help you sift through the noise to find the ideal one for your needs, we decided to take a look at our top twenty designer apps for Android.

1. Adobe Photoshop Express

Photoshop express is an application based around the hugely successful computer program of the same name, but now adapted to mobile phone use. Though the app doesn’t have all the functions available on the PC version, it remains extremely popular for a wide range of photo editing functions.

2. WordPress Mobile

WordPress Mobile is a simplified version of the popular website blog managing software, which enables users to update, edit and create new websites straight from their smartphones. Ideal for any person who requires round the clock updates for their websites.

3. Color Dictionary

This useful application enables users to search and discover a variety of colors that can then be used in different design purposes. The Color Dictionary app can identify a color, or allow the user to select a color on a slider, and it will then apply a name to that color. Handy for all sorts of uses, whether choosing a website background or what color paint to buy for decorating your house!

4. ColorSnap

Similar to the Color Dictionary app, ColorSnap can capture colors from photos taken by your Android phone’s camera or pics from your library and identify them by matching to Sherwin-Williams‘ paint colors. The app is optimized for MDPI and HDPI phones and has never been tested on LDPI devices. It’s said to work well on old devices like the HTC Droid Incredible or the LG Ally, however, according to users’ reports, it doesn’t work well on Samsung’s Galaxy Nexus.

5. Color Mood Designer

In case you don’t like Color Dictionary and ColorSnap, Color Mood Designer is another app you can use to find the right color combination for your design project.

6. Finger Colors

The title of this app can make you think it’s another color-choosing app, but no, it’s actually used for painting and drawing with a user-friendly interface that won’t distract or interrupt you. The Finger Colors app enables you to set the width, transparency and color of your strokes, so you can draw or paint almost anything you want, including oil and watercolor paintings (well, digital ones).

7. Autodesk SketchBook Express

Similar to the previous apps, Autodesk SketchBook Express is a painting and drawing application with a huge range of useful tools. It works on smartphones that support multi-touch and run Android 2.1 or above; a powerful processor with a good amount of RAM will make the app run faster, but you can use it on mid-range devices like the Samsung Galaxy Ace, too.

8. Fotolab

Fotolab is an application that specializes in enabling users to alter the effects and colors of an already taken photo. Selective color draining, blurring and effect creating are all available, plus more. The app is easy to use, and even allows the user to set an initial effect and then add patches for alternative effects with just the press of a finger.

9. Photo Effects

Photo Effects provides the ability to apply numerous effects to your photos. Whether it be thermal, fisheye, hazed or pixelated, this application can provide the edit that you require. Normal edits can be made to improve photos, or they can be made entirely wacky! Easy to use and control.

10. Reduce Photo Size

Reduce Photo Size does exactly what it says on the tin. It can be used for editing image sizes, but its main use is to compress the actual file size. Many find that storing multiple images on their phone can deplete their memory rapidly, and so this app could be a useful solution to such a problem.

11. Photaf Panorama

This application enables easy arranging of panorama-style shots. While Android 4.0 is likely to provide this function itself, anyone who requires panorama creation without the new operating system will want to use this easily controlled app.

12. BeFunky Photo Editor

BeFunky is one of the most popular online photo editing programs, and now it’s available on Android, too. You can use the app to edit photos, apply different effects or add frames from the big collection it offers.

13. PicsArt – Photo Studio

PicsArt is one of the best and most complete photo editing apps that can be found on Google Play for free. You can use it not only for editing pics and applying effects to them, but also for drawing and sharing the works and the edited pics via Facebook, Flickr, Tumblr and a number of other social networking sites. It also adds new features to your smartphone’s camera and gives you the opportunity to take photos with effects the standard features don’t include.

14. Photo Enhance

Photo Enhance is another good photo editor to easily adjust brightness, contrast, balance and colors of your photos and make them look more detailed, as if they were taken with a very cool camera.

15. Dash of Color

Many users look for apps that turn usual pics into black-and-white ones. But if you’re looking for just the opposite, Dash of Color will help you add colors to any kind of black-and-white photo. You can also use this app to convert any image to a black-and-white one and then add some selective colors of your own choosing.

16. Fontroid

Most designers have to deal with fonts, and Fontroid is an app that can be useful in that arena. It enables you to draw and create your own fonts, upload them and share with your friends/colleagues. The best fonts become available for download from the official website in TrueType format.

17. Photo Grid

With Photo Grid by RoidApp you can turn your photo galleries into collages and easily add thumbnail photos for them. This is one of the most popular apps on Google Play with a huge number of positive user reviews, so you might find it worth trying.

18. Gallery+

Gallery+ is an application that provides greater flexibility for gallery organization for the images on your phone. Android has been criticized in the past for not enabling this on the operating system supplied gallery, and so Gallery+ has attempted to rectify this in order to make the organization of photos more convenient. Features that brighten up the backgrounds and style of the albums also exist.

19. PicWorld

PicWorld is a highly rated application that enables easy search of images across the Internet, using a variety of filters. Whatever photo you’re searching for on your mobile, PicWorld is likely to produce great results compared to manually searching through an Internet browser search engine.

20. HP e-print

This app, brought to you by the computing giant Hewlett Packard, enables easy printing of documents that are stored on your Android phone. Rather than needing to transfer the file from phone to computer and then to printer, the app enables the user to print straight from the mobile. Saving time and headaches.

That’s a Wrap

So what are your favorite design related and image editing apps for Android, either ones that made the list or those that didn’t? Feel free to leave us your thoughts in the comment section below. We look forward to hearing your two cents.

(rb)


Designing With Audio: What Is Sound Good For?


  

Our world is getting louder. Consider all the beeps and bops from your smartphone that alert you that something is happening, and all the feedback from your appliances when your toast is ready or your oven is heated, and when Siri responds to a question you’ve posed. Today our technology is expressing itself with sound, and, as interaction designers, we need to consider how to deliberately design with audio to create harmony rather than cacophony. The cacophony is beautifully captured in Chris Crutchfield’s video, in which he interprets the experience of receiving email, SMS texts, phone calls, Facebook messages and tweets all at the same time:

In this article, we’ll explore some of the uses of audio, where we might find it and when it is useful. This is meant not as a tutorial but rather as a discussion of some basics on using audio feedback.

Audio is a form of feedback that can be used either in combination with other forms, such as haptics, visual displays and LEDs, or on its own. We have to weigh several factors when designing feedback mechanisms: the scenario, the device and the interaction, where and how the device will be used, whether the user has a screen or display, whether the device has physical buttons or a touchscreen, where the user is relative to the device, and so on

Ear buds
(Image credit: Fey Ilyas)

For every action of the user, a good experience will include feedback that the action has been registered; for example, pressing a number key on a mobile phone would play a sound and show the number being pressed. Audio is particularly useful when there is no screen or when looking at the screen is not possible or not desirable (such as when users want to multitask). It’s interactive, creating a dialog with the user. It is also particularly good at providing feedback as “shared audio,� a form of feedback that reaches multiple people at once, such as a PA system or a citywide emergency warning system.

Audio is not always warranted. Something that makes noise repeatedly when other feedback would suffice is annoying. Audio that is private and intended for you but is heard by others is embarrassing, such as when your phone rings and announces a “Call from Sexy Neighbor.� Audio design has many ins and outs, but let’s start with some common uses of audio feedback.

Where We Find Audio

Many of us who work on interaction, mobile, device or game design have already discovered the importance of designing audio — audio is everywhere.

Mobile

Much of the Web is moving to mobile, which of course entails smaller screens and people on the go. But besides creating mobile-specific websites, there are ways to augment the mobile experience with audio when people aren’t looking at or can’t interact with the screen. A great example is GPS and turn-by-turn navigation systems that speak directions (either as part of a dedicated device or from a smartphone app). While audio isn’t yet native to mobile websites and apps, it is native to smartphones to indicate new email, incoming text messages and calendar events.

Gaming

For those who play video games, audio is integral to setting the mood, environment and situation, and it engages the user tremendously. First-person shooter games such as Halo and Call of Duty rely on audio feedback to show cause and effect — for example, the sound of a gun shooting and the moment of impact on the enemy. Or consider Wii Sports: the smash of the ball in tennis, the crack of the bat in baseball, and the cheer of fans all help to blur the line between the very physical game and the digital world.

Consumer Devices

As more appliances become smarter and connected, they might have more to say. Today a set of beeps tells you that the refrigerator door is open, but in the future you can expect notifications that the milk has gone bad or that you need to pick up eggs if you want to make that cake for your spouse’s birthday on Tuesday.

More and more of our everyday devices use audio feedback: a Bluetooth headset tells you who is calling, Nike+ tells you your current distance travelled and pace, and cars beep to help you park.

Speech Recognition and Robots

Voice interaction such as Siri’s is revolutionizing the way people interact with their iPhone and will help to change future interactions with all devices and information sources. People are beginning to talk to their devices and expect some audio feedback in return. Siri is just the start; we’re starting to see speech recognition in Xbox Kinect, Samsung TVs and more. Audio feedback is a natural way to let the user know that the system or device has heard them, is processing their request and so on.

Think of your favorite robots — HAL, Wall-E or any of the personal robotic devices that are emerging. These robots are developing human characteristics, with sounds being one of the strongest ways to deliver emotion. Leila Takayama of Willow Garage has talked about the “design challenge in communicating internal robot states and requests to effectively reach the robot’s assigned goals.â€� Willow Garage has created a set of sound libraries for communication between people and robots that might help make robots “more appealing.â€� Then there are other robots that speak English and other languages, such as the new Autom weight-loss coach. Studies have shown that people who use Autom stick with their diet and exercise routines for twice as long as people who use traditional weight-loss methods, perhaps partly because of its human-like interactions.

Why Use Audio?

There are numerous principles to determine why and when to use audio in designing interactions for devices. Being conscious about adding sound to a device is the first step in designing it right. The point is to do it deliberately, not as an afterthought, so that the audio means something and is not annoying. Here are some of the many scenarios in which you should consider using audio.

Instructions and Information

Audio is used to give instructions, especially where there is no screen or where looking at a screen would be difficult, unsafe or impossible. Again, think turn-by-turn directions. Or it can be used to augment visuals. The parking machine below obviously has visual instructions for entering a credit card, but they weren’t sufficient to get people to enter it correctly.

Audio can be used to offer information, either when no screen is available or when certain details would be better captured as audio. The Jambox by Jawbone tells the user when they need to recharge the battery. The Leapfrog LeapPad takes this one step further by specifying the type of batteries it needs!

Feedback and Interaction

As mentioned, audio is used as a feedback mechanism when the user takes action. This could be feedback for when the user pushes a button, such as when turning on a Jambox speaker, or to tell a driver that they are getting close to a parked car.

It’s also used to allow for interaction and conversation with our devices. We’re used to interacting with speech-recognition systems when we call an airline or a bank, and now sending a text message with your voice from a Windows phone is just as easy. The audio from these services and devices create a dialog that enables users to get things done.

Personalization and Customization

Audio allows for personalization of a device, helping to engage users and create an emotional attachment. Siri learns its user’s name and uses it in its replies, adding a personal connection to the interaction. Garmin and TomTom let users download all kinds of voices to their GPS devices, from Bert and Ernie to Star Wars characters to Kitt from Knight Rider, with the goal of creating more engaging experiences. Jawbone device owners can download different languages and characters to their Bluetooth headset and speaker, with the device volunteering such responses as, “A bombshell is whispering in my ear… And yes, I’m blushing.�

Audio also helps to establish personality and to humanize a device. Ford and other electric vehicle manufacturers are dealing with a proposed bill that would require electric vehicles to make some sound to ensure pedestrian safety. Ford has asked the public to vote on four different sounds that would essentially shape the personality of its cars. Here’s one of them:

In another example, to show the power of talking devices, Radio Lab reported on an experiment that pitted a hamster against a Barbie doll and a Furby (the popular furry electronic talking robot) to see how long kids could hold each of them upside down. While all of the five kids in the experiment could hold Barbie upside down “almost forever,� they treated Furby much more like the living hamster than the Barbie. Why? Well, when you hold Furby upside down, he says, “Me scared,� giving human-like characteristics to the toy. The kids said afterwards that they “didn’t want him to be scared.�

Conclusion

Audio is everywhere, and there are good reasons to use it: to instruct, enhance and engage and to personalize experiences. But if poorly designed or used inappropriately, it can detract from the experience and be annoying. We’ve covered the why and the where of audio. Next time, we’ll review some guidelines and principles on the ins and out of designing with audio.

(al)


© Karen Kaushansky for Smashing Magazine, 2012.


Massimo And Lella Vignelli: Designs That Will Outlive Mankind


  

There are two major things that had to be overcome in writing this spotlight on Massimo and Lella Vingnelli: One was how to approach the subjects in a different way as they’ve had so much written about them. Two, as with writing about other designers who are still living, one runs the risk of being told by them that the article is wrong or even worse, moronic. Admittedly, I’m more concerned about the first as the second is nothing new to my writing career.

As with my other spotlights on designers who greatly influenced or keep on influencing our industry, I’m interested in WHY they took the path that set them apart from other designers and HOW they can change the way designers think and create. It’s about inspiration. Their example is not one of purposeful self-important and self-initiated public relations – I refuse to write about those who practice such conceit to make up for lack of talent. It was pure talent and creativity that brought Vignelli Design into the public eye.

Pure Talent

“Pure,� as defined by the dictionary is:

  • Free from what vitiates, weakens, or pollutes.
  • Containing nothing that does not properly belong.
  • Being nonobjective and to be appraised on formal and technical qualities only.

“Pure talent?� That’s too abstract a concept. It’s Vignelli’s own words that best explains the success of his work: “We have to make a distinction between design and art. If you are an artist, you can do anything you want. It’s perfectly all right. Design serves a different purpose. If in the process of solving a problem you create a problem, obviously, you did not design.� (From an interview in Print magazine – 1991)


The Vignellis’ office in New York City. Simple, clean and… pure.


Massimo Vignelli at work. There’s something I don’t trust about a designer having an uncluttered desk! ;)

“Whatever we do, if not understood, fails to communicate and is wasted effort. We design things which we think are semantically correct and syntactically consistent but if, at the point of fruition, no one understands the result, or the meaning of all that effort, the entire work is useless. Sometimes it may need some explanation but it is better when not necessary. Any artifact should stand by itself in all its clarity. Otherwise, something really important has been missed.�

Vignelli was also driven by the notion of timelessness. On this he said: “You can reach timelessness if you look for the essence of things and not the appearance. The appearance is transitory — the appearance is fashion, the appearance is trendiness — but the essence is timeless.�

A Little History

Massimo Vignelli and his wife Lella, both designers, ran a successful design firm in Milan, Italy before coming to New York City in 1966 to start the New York branch of a new company, Unimark International. This quickly became one of the largest design firms in the world. When commuting back and forth became too much, they decided to make New York their home. In 1971, they founded Vignelli Associates.

It’s important to look at America at the time they arrived to make their mark on the design scene. The Vietnam War was in full swing and America was changing. It was the hippies vs. the conservative establishment, acid rock vs. bubblegum rock, and society was evolving. The Vignellis’ European sensibilities were to offer design America had not really experienced. Obviously it was successful and became a driving force in design that others would follow.

My First Exposure to Vignelli

Growing up in New York wasn’t easy. The subway map alone was a diagram of the human circulatory system, and as confusing to an adult as it was to me as a child. Foreign tourists and diehard New Yorkers alike all had to brave the death-inviting move of asking someone if they were on the correct train to their destination.

Vignelli’s now-classic New York City subway map was first introduced in 1972, following his work on the signage system in the late 1960s. Inspired by London’s Underground map (designed by Harry Beck in 1933—which was inspired by electrical circuit diagrams) Vignelli simplified New York’s complex, twisting, winding subway system into a clean graphic. “A different color for each line, a dot for every station. No dot, no station. Very simple. The whole map is designed on a 45/90 degrees grid with geographic distortions to accommodate the lines,� recalls Vignelli in his book, “From A to Z.�

It’s alleged that New Yorkers didn’t take to the design because it didn’t give an accurate representation of the distances the trains had to travel, borough to borough. The present map has returned to that pre-Vignelli jumble of veins and arteries; and despite the supposed dislike to Vignelli’s cleaner interpretation of the whole mess, other designers keep trying to reintroduce the same effective graphic that Vignelli had designed. Nothing is better then letting time vindicate your actions and beliefs!


A section of the 1979 subway map that replaced the Vignelli design, returning to the jumble of which Vignelli sought to make sense and order. Once again, people entered subway stations and were never seen again! Note how it includes surface streets, parks and sections of the continental shelf.


The 2011 map, returning to the idea that simple and clear is better. It stuck to the desire for realistic distances but got rid of the extraneous information that had nothing to do with the subway.

He is, however, still passionate about his design. “A diagram is a diagram. Don’t cheat me,� he is quoted as saying during an AIGA/NY event in 2010. Nothing burns the soul of a designer more than seeing a great design thrown away by non-creatives and those without the ability to understand how design affects people and products.

Listen to his thoughts about the map redesign and the problems he had to overcome…

In fact, if you look at the metro maps around the world, you’ll note that they all take inspiration from Vignelli’s design. I can only hope he smiles widely and thumbs his nose at his detractors.

Design Is Everything!

While other works by Vignelli may not be as public, you’ve probably seen and/or even lived with them, not knowing how this design team has affected you. Design is interesting because we use it everyday, in everything. To quote Vignelli from a 2007 article:

“Designers take care of everything around us. Everything that is around us, this table, this chair, this lamp, this pen has been designed. All of these things, everything has been designed by somebody.�

Have you flown anywhere lately? When you step aboard American Airlines, you are surrounded by Vignelli’s work. The 1967 redesign of the AA identity was pure Vignelli – simple, strong, functional and pleasing to the eye.

Do you eat? Could be you are using plates, glasses or mugs designed by Vignelli? The key to the design is usability. Plates, bowls, mugs and platters stack as opposed to the usual piling on as with most dish sets. It’s designed for function as well as form.


I don’t care how big your kitchen may be – these plates, bowls and platters are great design and real space savers!


The calendar designed by Vignelli has been around for longer than I can remember.

Crave any furniture designs lately? If not, you obviously haven’t seen any from the Vignellis. Anyone who appreciates great design will admire and almost certainly crave pieces either created by Vignelli or at least inspired by the duo.

“Here is an example of interaction between one field of design and another,� says Vignelli. “I call this the Bodoni Table, because the Bodoni typeface has big thick vertical strokes and very thin serifs, just as you see in this table.�

“This is a result of continuous cross-pollination between one experience and another. It is not true that if you’re a graphic designer, you can’t design furniture. You can design it, because design is one. The discipline of design is the same.�


Designed by Vignelli in the 1950s, this lamp is timeless. Function and form.

Print vs. Web

Naturally, like so many who have been in design for a time, Vignelli has an affinity for print. In a web culture, print, according to some, is a lost art and disappearing from our lives. Vignelli, among others, point to the permanence of print (as the couple’s personal library, pictured below, attests).

“We strongly believe in the permanence of the printed word as a witness to the culture of our time. Words and images interact to create feelings, to expand our perception, to enrich our knowledge.�

Of course, such passion for design understands web design and Vignelli has some advice that rings true…

Obviously, Massimo and Lella Vignelli look at all design challenges with the same dedication, and approach problem solving in the same logical way.

“Good design is a matter of discipline. It starts by looking at the problem and collecting all the available information about it. If you understand the problem, you have the solution. It’s really more about logic than imagination.� —New York Magazine Interview, 2007


A proposed redesign for The European Journal in 1978. Note how modern WordPress themes are similar in layout.

Another thought Mr. Vignelli has on print vs. web design is simple, yet all too true: “The computer is like a pencil. It is just a tool. The pencil is a submissive tool. Leave it there and the pencil is totally dead. It doesn’t offer anything; you have to guide it. But the computer is a seductive tool. It offers you incredible options, but your work can become a total disaster if you don’t have an idea to begin with.�

Lessons To Be Learned?

Like other designers who have practiced for decades, Massimo and Lella Vignelli offer lessons to all of us that we may not see right away. Let down your guard and preconceived notions on what is important in design and consider what the Vignellis have to teach us. The “WOW! Factor� we depend upon with computer programs and apps are no substitute for design basics. The basics are the foundation of all design.

I cheated the history of Vignelli Associates a bit for breavity at the beginning of this article. In an interview in Observatory, Mr. Vignelli relates the full story:

“We started the company with some friends here in the U.S., and we opened an office in New York. The person who was supposed to run the office got sick. I was in Milan at the time and I was commuting back and forth. I got tired of flying over twice a month, and so we decided to come over and run the office for a while and then go back. We’re still here after 40 years.�

This is a lesson in overcoming fear. Imagine moving to a new city, in a new country. What raw nerve that takes. I have several friends who moved from the U.S. to different countries in Europe and they were terrified. Excited but terrified.

The Vignellis accepted a challenge and met it head on with purpose, bravery and ended with great success. Should any simple design challenge frighten you? Not if you follow the design basics and build from there.


Massimo Vignelli with an uncut sheet of brochures, “Five Vignelli-isms” when he and Lella received The Architectural League President’s Medal “in recognition of a body of work so influential in its breadth that it has shaped the very way we see the world.â€� Note the advice in the Vignelli-isms!

Another admirable lesson is one that doesn’t come easy to most designers who do not wield the power Vignelli has. “I never work with middle management.� Says Vignelli. “Middle managers are dominated by fear of losing their job, and therefore they have no sense of risk. I always work with the top person, the president or the owner of a company. That’s it. Only the person at the top can take risk. He’s used to it. That is how he got to the position he is in. He understands what you are doing, and he doesn’t have to report to anybody. He makes his decision, and that’s the way it goes.�

How does one hope for the same power when starting out? The answer is you can’t, but you can try to seek out clients where you CAN work directly with the company owner as much as possible. You may be stuck with someone who says, “I’ll know what I like when I see it� but you may also find yourself working with someone who will trust your design ideas and give you free reign.

Mr. Vignelli, as all of the interviews with him seem to attest, worships purity in design (there’s that word again).  His focus is purposeful and without distraction of the thoughts too many designers have of how their design will be viewed by others. He knows his design is the best he can do and it leaves no doubts or regrets.

Sure with his career experience and decades of practice, he has nothing to doubt, but there’s a lesson for every designer no matter what level you’re at – focus on the design and not what peers will think. Please the client and yourself and in the end, your design will have the purity that will make it last.

So many designers yearn for recognition. They dream of being invited to the Oscars with all cameras turned to them while reporters announce that they have arrived and the crowd screams with admiration. Dream on, because it happens only to a small few. Those who have affected people’s everyday lives. Even then, they elicit recognition from the layperson of “oh, yes. He/she did that? I love his/her work.�

To reiterate a quote of mine that people tweeted all over the place, “people don’t remember the name of the designer – they remember the design and how it affected their life.� THAT is the purpose of design! Massimo and Lella Vignelli have done that and have been recognized through a real and deserved placement in design history. It is worth considering how they got there and what you can learn from their example.

(rb)


End tags, semi-colons and maintainable code

In Of parser-fetishists and semi-colons, Chris Heilmann brings up the importance of code maintainability, something that I feel is overlooked a bit too often.

The main issue Chris talks about is omitting semi-colons at the end of JavaScript statements, the subject of a current JavaScript drama. Doing so is valid syntax in many cases, and browsers parse and execute the code fine. However, it does not improve code readability for humans, who are often as important to target as the browsers that run the code.

Read full post

Posted in , , .

Copyright © Roger Johansson



  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress