We noticed you're browsing in private or incognito mode.

To continue reading this article, please exit incognito mode or log in.

Not a subscriber? Subscribe now for unlimited access to online articles.

Business Report

Tools for Better Web Design

Scott Klemmer’s software helps designers improve their Web pages by leveraging what’s already online.

If you like (or dislike) the design of this or any Web page, you can view the source code and see just how our designers created it—the option is under the “Tools” menu of many browsers. This openness is one of the best things about the Web, says Scott Klemmer, a professor at Stanford University who runs the Human Computer Interaction group. But he adds that unless you are an experienced Web designer or coder, it’s difficult to figure out which part of the code does what. Klemmer’s lab creates tools that help novice and experienced designers alike take advantage of such existing Web content to improve and adapt their designs more quickly.

The best way to develop a user-friendly design that pleases coder, designer, and customer is to come up with a lot of prototypes, most of which will be thrown out. But retooling a design by trial and error takes a long time, so Klemmer is trying to automate the process. Many of his tools can be downloaded free from his lab or from partners, including Adobe. Thousands of people have downloaded a tool called Blueprint, which is now available as a plug-in for Adobe’s Flash and Flex Builder tools. Through Blueprint, designers coding a page can search for examples of code without having to click through pages of results generated by conventional search engines. Experiments by Klemmer’s group showed that professional programmers using Blueprint completed tasks 28 percent faster and wrote higher-rated code than those using traditional Web search engines.

Another tool, Bricolage, which Klemmer and his student Ranjitha Kumar developed a few months ago, can take any Web page and re-render it in the style of another, thanks to an algorithm that separates a page’s content from its stylistic templates. The idea is not to enable people to copy designs wholesale, but to facilitate brainstorming. “As opposed to taking hours to make each new mock-up of a page, you can see if a particular direction is interesting,” he says. Bricolage can also be used to rapidly redesign a page for display on different devices, such as a desktop computer, an Android phone, or an iPad.

“In design, there are so many stakeholders—the tech people, the client, the designers—and designs are hard to describe in words,” he says. Having examples on hand helps speed the process: “In creative work, you infer and build expertise from looking at a huge corpus of examples.” Klemmer notes that art students learn what makes a good painting not by studying lists of criteria but by looking at example after example, good paintings and bad. What makes good design can be as difficult to articulate as what makes a good painting, especially when people with different vocabularies—Web designers, programmers, and customers—are trying to communicate.

Klemmer, who is 33, initially planned to be an artist and graphic designer. When he was doing his undergraduate work at Brown University, he says, he was inspired by how much computers could do to facilitate creative work. An internship at Microsoft cofounder Paul Allen’s think tank Interval Research cemented his ambition to create software tools for designers. Klemmer says one of Interval’s goals was to develop the generation of user interface tools that would come after the graphical user interface.

A similar ambition underpins Klemmer’s work today: he wants to make the Web more accessible. Today’s Web user is probably on a mobile device, and as the population ages, more Web users will have limited vision or motor skills. But making a new version of a site for every type of user or device is incredibly time-consuming. With the tools he’s developing, a designer could make one canonical version of a website and then develop software that automates the conversion of this design into versions that work for the increasingly wide variety of people who may be viewing it.

Blockchain is changing how the world does business, whether you’re ready or not. Learn from the experts at Business of Blockchain 2019.

Register now
Next in this Business Report
Design as Business Strategy

In Business Impact this month, we are exploring good design–of products, services, and the entire customer experience. How has design become a competitive advantage for businesses? How does it help to foster innovation? We’ll explain where good designs come from and how technology is changing the way they are carried out.

Want more award-winning journalism? Subscribe to Print + All Access Digital.
  • Print + All Access Digital {! insider.prices.print_digital !}*

    {! insider.display.menuOptionsLabel !}

    The best of MIT Technology Review in print and online, plus unlimited access to our online archive, an ad-free web experience, discounts to MIT Technology Review events, and The Download delivered to your email in-box each weekday.

    See details+

    12-month subscription

    Unlimited access to all our daily online news and feature stories

    6 bi-monthly issues of print + digital magazine

    10% discount to MIT Technology Review events

    Access to entire PDF magazine archive dating back to 1899

    Ad-free website experience

    The Download: newsletter delivery each weekday to your inbox

    The MIT Technology Review App

You've read of three free articles this month. for unlimited online access. You've read of three free articles this month. for unlimited online access. This is your last free article this month. for unlimited online access. You've read all your free articles this month. for unlimited online access. You've read of three free articles this month. for more, or for unlimited online access. for two more free articles, or for unlimited online access.