Channels ▼
RSS

Form, Function, Emotion


Form, Function, Emotion

Inside the philosophy and process of Frog Design

May 2002

When it comes to surviving in a rapidly consolidating market for design services, possessing a pool of design talent and an entrepreneurial spirit is only half of the solution. The other half, according to Mark Rolston, VP of Creative for the Digital Media Group at Frog Design, is found in the "gray space."

For Frog Design, the German firm that designed the Macintosh case for Apple, the gray space is the convergence of business, engineering, and interaction. When focusing on a product's usability, these areas can't be isolated. "Too many design studios started to fail in 1999 because they had convergent problems and were dealing with them in segmented ways," says Rolston, who launched Frog's digital media group in 1994. "Studios like Organic and Razorfish screwed themselves," he adds, bluntly. "They had monkeys doing Photoshop work who did not understand the business problems. They were handed usability designs where the usability designer didn't care about how [the product] looked."

Founded in 1969 as Esslinger Design by product designer Hartmut Esslinger, Frog branched out to the United States from Germany in the 1980s, and moved into brand design. Frog's philosophy calls on the company's employees to regard product, brand, and user interface design as "inextricably linked."

Redesigning SAP

In the Digital Media Group's early days, Frog had its share of straightforward Web design projects. But the group's standards and practices turned a sharp corner in 1998 when SAP, the world's largest enterprise software company, hired Frog to help improve the look and usability of R/3, SAP's enterprise resource planning suite.

"With SAP," notes Rolston, "we cut our teeth on developing a methodology for defining design solutions at a less literal level, and at a more abstract, procedural series of layers." In effect, prompted by the practices of software engineers, the Digital Media Group began to objectify the design process. To explain, Rolston refers to the levels of abstraction that programming languages have gained over the years. "When I was a kid playing with computers, if you wanted to program the Commodore 64, you could write in Basic or you could write in microcode. There was no level of abstraction there," says Rolston. "Nowadays, even the OS is made up of several layers of abstraction. All of it is meant to further remove us from having to be more detailed than we need to be at any particular time."

In programming scenarios, it's often more efficient for developers to talk about objects than about specific lines of code that represent an idea. The group at Frog feels that the same is true of Web design. Using the example of the graphic artist who will "fuss and fuss over the right shade of blue" while failing to see the bigger picture, Rolston says his team approaches things from a bird's eye view to create a kind of meta-design in layers before delving into production. The goal is to find a common taxonomy to discuss both problems and solutions. "Too many design conversations happen without an agreed upon language," says Rolston. "[We need] a taxonomy in the sense that letters make words and words make sentences and sentences make paragraphs. There's layering even inside of that—of different meaning and formality—and all of that is agreed upon before you've even written a word."

Layers of abstraction don't necessarily mean that software engineers are always efficient. In most cases, standard control libraries (like collections of sliders, trees, lists, and tables) provide developers and designers with pre-built widgets that save time when building applications. With SAP, however, the developers had a non-standard control library overrun with duplicate controls. Frog immediately went to work producing a smaller list of uniform controls that SAP's developers could use for each problem. "If they had 20 table controls, we reduced it to one," says Rolston. The group defined a smaller, universal library of widgets from which application interfaces could be built. Each widget now has its own set of rules for how it can be used and displayed. For example, if a button has a label, the rules define where next to the button the label will appear.

As with any borrowed idea, a bit of adaptation and refinement was needed. For example, the group quickly realized that control is a word with mixed meanings. Some Web site elements do more than control a function—they take on properties and functions based on their content, or on surrounding elements. To better explain how Web pages work, Frog adopted an atom and molecule metaphor. The metaphor defines a Web page as a series of molecules. Molecules are groups of elements called atoms, like buttons and labels and textfields. The molecules adhere to global branding guidelines that define attributes like color, type, voice, and content.

According to Frog's system, content has its own layers. For example, a page could have business content and a second layer of product content with its own voice. Likewise, visual content, such as photography and charts, will have styles that relate specifically to it.

Figure 1 shows the SAP R/3 interface. Launched in 1999, R/3's new look was a big hit with customers, many of whom were pleasantly surprised by the shift from a black and white interface to one with full color.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video