Issue
Article
Vol.28 No.2, April 1996
Article
Issue
Issue |
Article |
Vol.28 No.2, April 1996 |
Article |
Issue |
"Tools & Techniques in Visual Design Development" provided an opportunity for a small group of experienced practitioners in visual design to share concrete tools and techniques for the design development of visual interfaces. While many tools are available that explicitly support "widget building" in keeping with various GUI standards, these tools represent only a portion of those used in actual day-to-day practice. While their built-in constraints make them convenient for prototyping standard interfaces, these very constraints limit their usefulness in developing unconventional interfaces (for multimedia titles, for instance).
I've observed that visual designers often adapt existing tools and improvise techniques in order to overcome the limitations of tools both explicitly intended and not intended for use in interface design. This workshop provided an opportunity to share some of that knowledge with fellow participants.
The workshop's goals were twofold:
Five participants (with me as facilitator) met for one day. Prior to the workshop, participants submitted abstracts of their tool or technique that were circulated to the group. At the workshop, each person was allotted approximately one hour to present. Discussion followed each presentation and continued through our communal lunch break.
Two presenters focused on tools specific to World Wide Web design and prototyping, two on drawing and painting techniques for generating visual elements, and one on the visual representation of users' mental models of dynamic information spaces. Since more complete descriptions of each technique have been submitted for publication in future issues of the Bulletin, only brief excerpts from the original submissions appear below, followed by participant bios.
The presentation topics and presenters were:
With the advent of displaying information on computer monitors, issues of navigating through virtual information spaces have arisen. Large and complex databases of information in text, graphics, video, and sound, which can be randomly accessed, pose daunting challenges for those of us who design navigational affordances for a variety of readers. We attempt to deal with these issues by diagramming the flow of information or charting the paths a reader may take through the information. This activity tends to be part of the planning phase of any information design (aka, interface design) project, be it paper- or electronically-based.
Comparing navigational paths and devices in books and CD-ROMs can help us understand the different ways one might explore these information spaces. By explicitly drawing a map of the information space and the paths one may take through that space, we begin to visualize the mental map that we've created. When we ask some of our users to draw a map of the same information space, we stand to learn a great deal!
I propose Adobe Acrobat Portable Document Format (PDF) files as a tool platform that allows for the very rapid creation of navigable information spaces. With 100% desktop publishing output power as well as uninhibited ingredient flow into the prototype, the suite of Acrobat tools available for less than $500 allow for the creation of hi-res, portable, full-color, navigation simulations. The interfaces are scalable in size. Any application that can `Print' can contribute visual material, either one or more pages, to be added to a `live' document simulating an information experience.
Limitations of Acrobat are the lack of interactivity. Thus the prototypes explored are highly graphic, and graphic of high quality, but facilitate exploration of information organization and navigation rather than interactive information.
Though it was originally designed as an animation tool, the capabilities of Macromedia Director actually make it an ideal environment for developing the visual design of human interfaces. With its orientation towards screen display and not printed output, an integrated bitmap editor, the ability to store a nearly unlimited amount of individual bitmaps in the "cast" of a single file, and to assemble up to 48 discrete graphics (including object-oriented text and graphic primitives) onto a "stage", Director provides many of the features important to the human interface designer that are lacking in bitmapped paint programs and GUI building tools. As a bonus, Director's scripting language, Lingo, can be used to turn static assemblies of graphics into fully interactive software prototypes for design refinement and usability testing.
Recently released, version 3.0 of Adobe Photoshop adds layering features that can be useful to the interface designer as well. Photoshop's emphasis on 24-bit painting and photo-realistic image editing, combined with its excellent interoperability with the object-oriented drawing software Adobe Illustrator, make it a natural for developing interfaces containing sophisticated graphics and images, such as those found in multimedia productions.
Two specific examples of layered painting techniques will be shown in the Workshop. The first will demonstrate the use of Macromedia Director to create multiple iterations of a window design, including toolbars, text editing fields and icons. The second will demonstrate the use of layers in Adobe Photoshop to create active, highlighted and inactive states of a set of visually sophisticated toolbar buttons. The second demonstration will also show Photoshop's ability to rasterize icon designs created in Adobe Illustrator and apply a "glowing" effect to them.
The rise of Mosaic-like web browsers has resulted in a proliferation of web sites on the Internet, many of which use graphics in various ways on the pages. I have been designing the graphics for a new Internet advertising service called The Sphere Information Services, located in San Jose, CA (http://powerof.thesphere.com).
The Sphere pages use a variety of graphics: splash screens which have several clickable areas, icons for sounds, pictures of the people who work for the Sphere, separator bars, etc. In the course of developing the graphics I have learned a some lessons which I will share here. I expect some of this to be fairly basic and for the knowledge to evolve as we learn more about what works or doesn't on a web page.
All of my work is done a Macintosh and then tested on a Sun, SGI, and MS Windows platform. The screen resolutions vary among the platforms. Since Netscape is the browser of choice, I test using that browser primarily. I use Ofoto scanning software, Adobe Photoshop, and a variety of GIF utilities to create the graphics.
While the advantages of icons for computer users are well known (take up less screen space, entertaining, visually appealing, etc.), the disadvantages of icons for their designers are also well known. Icons are difficult and time consuming to develop, they are often tricky to test and usually have many evolutions in form before final release. "Traditional" icon design (if there is such a thing) depends upon the grid-like development of images from the ground up. If you are working on a 32 pixel by 32 pixel icon, you would create a 32x32 grid, and start creating black and white images from this. While this is still a valuable technique, it often ignores the richness of potential icons that could be taken from photographic and video sources. Traditional icon design is also not very designer-friendly for later icon animation. A more photographic or video-based approach creates an opportunity for icon animation that taps into many of the powerful animation applications available on the market.
This presentation is meant to cut down on the design and development time of still and animated icons (I make the assumption that those present are already familiar with the process of creating consistent and legible icon systems). These techniques evolved over frustrations with clients regarding the development time of icons. It seems that people tend to equate `small' and `simple' with easy and inexpensive. This has been the opposite of my experience. I originally used this technique as a way for doing very fast rough comps of icons for initial client approval. I now use this process for both the generation of `final form' icons as well as for the basic brainstorming of possible icons that are then developed in a more traditional fashion.
We agreed that the design of visual interfaces often necessitates new ways of using existing tools, whether traditional (drawing) or computer-based. Unfortunately, since these techniques tend to be shared informally, they are ephemeral and not widely known. We felt that the CHI workshop format provided a great opportunity for sharing knowledge in a small peer-group setting.
Loretta Staples is President and Director of Design of U dot I, Inc., a San Francisco-based studio specializing in interface design. Before founding U dot I, Loretta worked as an interface designer at Apple Computer, graphic designer for The Understanding Business, exhibit developer for The Burdick Group, and textile curator for the Yale University Art Gallery. She can be reached at loretta@udoti.com.
Issue |
Article |
Vol.28 No.2, April 1996 |
Article |
Issue |