Paper Made Computer Icons

Paul Honeywill

School of Humanities and Cultural

Interpretation, University of Plymouth,

Earl Richards Road North, Exeter, EX2 6AS

Abstract

This article investigates how the established rules for optical construction, spatial harmony and added message value affect the computer icon. Symbols which have adapted and partly used these known factors for construction are explained in two case studies. Each uses phonetic alphabet components in the final design and each has been adjusted to give added message value. We explain the elements that have to function within the matrix and the methodology behind the construction of a symbol that uses letterform. A brief recent history to place the symbol into that context is considered through a corporate appearance programme.

Introduction

Multi-functional computer platforms are equipped with several types of Graphical User Interface (GUI). This ranges from numerical and text data to still and moving graphic images and sound. It is through these mixed media that human reasoning has to interface with a machine (Kobayashi, 1986).The human factors that influence our ability to reason such as emotion, philosophy and ideology are taken into consideration when designing a graphic symbol. In many cultures the heart represents love. In the ideograms, pictograms and rebus writing of the Maya, the heart represents human sacrifice (Eric and Thompson, 1972). Our ideology is the framework in which we reason, it is influenced by our culture, ethnic group, gender and so on. It colours our philosophy and governs our emotions. 

Computer icons are designed to evoke a selective message or concept. As a user, we double click on a culturally familiar icon that projects all the necessary information for us to decide whether we are launching a word processing program or discarding a file. Familiarity of use reinforced by a label tells us which application we want within that family group of icons (Figure 1).

  

Figure 1: Icons of the GUI

The effectiveness of any particular icon is what it has selectively decided to tell us, and, therefore, what the designer has consciously omitted through an understanding of certain design methodologies. This spans back through the decades to the traditions of drawing. It is not what the artist includes, it is what the artist leaves out which makes the picture (Goldsmith, 1983).The commercial artist has evolved into the graphic designer by embracing and developing this method of image refinement.

Corporate Messages

The refined elements within an image can be manipulated to convey a message. This need for encapsulating a message has been perceived and developed by the graphic image makers. The obvious example is corporate identity and its application. The purpose of any corporate identity scheme is to convey a message about a company, industry or individual. The identity becomes a shop front, designed to give the viewer a controlled perception of what they can expect. These symbols are reinforced with a typographic message. The typeface itself is again selected to confirm the idea and endorse the message. The viewer is not expected to disassemble the elements of the design and read the message like a sentence (Bliss, 1965). It is the wholeness of the design that projects the concept. This concept can then be applied to unify and identify all the components of the organisation.

An appearance programme manual is compiled to ensure that all components of a large organisation comply with the decisions of the image makers. When designing a symbol using the traditional methodologies of the drawing board the designer constructs an architecture based on the grid. When the grid is removed the elements that make up the design retain a spatial integrity that encapsulates the whole symbol. There is nothing more unconvincing than a design that does not follow certain design criteria. The first publication entirely devoted to identity manuals demonstrates the use of design

 

Figure 2: Paper matrix

architecture, or a paper matrix (Figure 2), which was used to develop and deploy a symbol (Carter, 1976). Design unification across a corporate range had already been identified approximately 20 years earlier with the production of the first corporate identity user manual. Carter's book of collective manuals is evidence that a grid architecture and systematic application was an established practice amongst corporate designers.

With this practice established, many large companies embraced the unifying qualities of a single image projection that embodies the corporate message. On 2nd March 1970 Burlington Northern came into existence. The Chair,John Budd, and the President, Louis Menk, wrote a joint letter to the company employees stating,"This program is more than a mere system of design and set standards. It is also an expression of confidence and pride in the capabilities of the new Burlington Northern and its men and women who will ensure its success" (Carter, 1976). Applied systematically across each department within the company, the aim of the symbol was to unify its members and project an outward image to the world.

This need for multiple corporate application has made the designer consider different qualities when reproduced. Complex designs have to contemplate the obvious letterhead, glossy brochures and sides of vehicles through to cardboard boxes. Each has a different surface texture to consider and a different colour formulation start point. The computer-based icon is another extension of the designers" range of application. The GUI is a recent addition in the world of graphic design. However, the technique can be transported from the drawing board to the computer through the methodology employed in corporate design when developing any appearance programme.

The most important element to any immersion in this visual blanket is the symbol that will unify all the components to create the whole. The iconic language of the computer interface uses many of these symbol and matrix construction concepts. The computer icon borrows from the design methodology of the drawing board, and then varies it, applying the technique to the pixel matrix.

Icons of the GUI have to work in harmony with each other and within a 32 x 32 pixel matrix. In the same way as the corporate symbol has been developed, a family of symbols can be used to inform visually and unify. To evaluate the evolution of the computer icon design standards we need to consider recent symbol design methodologies. Mealing (1991) explores the development of the pictographic symbols used in the Olympic events using four graphic representations from different dates. The first image illustrating the Olympic wrestling event is drawn realistically, the last being the most recent and graphically sophisticated. Each is designed to operate within a family group and each group reflects the designerism of the period in which it was designed. It is the three latter designs that reflect the grid architecture that allows for the transition from simplified pictures to sophisticated representations.

Designer method with its architectural grid approach lends itself readily to the picture element matrix when constructing icons for the GUI. It is the grid placed on the drawing board that allows us the visual leap to an icon designed for the screen. The 1964, 1968 and 1972 Olympic designs could have easily been designed with the GUI clearly in mind, indeed Mealing draws his analogy of reproduction constraints from the pixel matrix (Figure 3) for a screen icon.

Figure 3: 1964, 1968 and 1972 Olympic symbols

Figure 4: Aicher's horizontal/vertical and diagonal grid for the Munich games

 

Figure 5: Aicher's interchangeable body alphabet

The 1972 Munich Olympic Symbols were designed using a horizontal/vertical and diagonal grid (Figure 4). Aicher's grid design for the games also contained interchangeable elements that made up a "body alphabet" (Hulburt, 1978). To design a symbol requires the designer to consider every possible combination of application. To design a symbol as part of a visual family, with each symbol conveying a different message, requires an extension of the first to ensure harmony across the range. Every eventuality has to be considered including the environment in which it will be placed. The design process has to be executed across a broad front and if one symbol within the family fails then adjustments will have to be made for part or all the range (Figure 5).

The Olympic symbols have a history of development from the first representational illustrations to the latter sophisticated graphics. Their language and visual exposure resurfaces every four years. They have become familiar icons that represent the games just as much as the five circles. If icons are to be fixed within a 32 x 32 pixel matrix and used as the language of the GUI, they must have a common unity with their fellows. They must also have the ability to adapt, develop and expand according to set criteria.

Labeling the Message

Designers are used to working with the typographic variations of the Roman alphabet. The subtle typographic differences of Serif and Sans Serif, periods of change from old, transitional through to modern, are understood (Linotype Collection, 1989). The construction, different weights and kern pair values are known (Figure 6) to the trained designer (Collier, 1990). Through knowing this the designer is best equipped to visually exploit and develop a family of symbols. With the Roman alphabet we use twenty six characters to represent the words we use in verbal communication, We see them, but we do not hear them, they are merely shapes that represent sound.

There are over ten thousand typographic variations, which may visually shout, whisper, project authority, demand and so on. Linotype's Mergenthaler Type Library quotes the designer Adrian Frutiger, who defends subtle typographic differences by arguing, "You may ask why so many different typefaces. They all serve the same purpose but they express mans' diversity. I once saw a list of Medoc wines featuring 60 different Medocs all of the same year. All of them were wines but each was different from the others. It's the nuances that are important". In the same way, icons as encapsulated concepts should have variation.

Figure 6: Bottom row has been pair kerned

Case Studies

The two case studies below examine the design methodology used for creating a symbol. The first investigates the development of the symbol by drawing reference from the Roman alphabet and graphic representation, the second was developed from a primary source, the Maya culture of the classic period. Both were constructed using grid architecture on a computer and not on a drawing board. The 32 x 32 pixel matrix was not considered an option as these symbols are devised to convey a corporate message. However, one application of the second symbol will be as a visual unification between a number of products, using both printed and screen-based delivery in Belize, Central America. Both were designed by the author in 1993 and both reflect the environment in which they are expected to function.

 

Figure 7: Final symbol with type on letterhead

Example 1: Marine Security Limited

The criteria for the design of the symbol were the embodiment of security specific to marine-related activities. To be precise within the design of this symbol would cause the alienation of potential user groups. When the elements of the design are developed they can be manipulated within the grid architecture. The grid is not being used to slot the elements neatly into boxes, it is there to ensure visual alignment and spatial harmony. Certain graphic representations can be tested and eliminated according to the criteria of the concept that is to be conveyed.

In the final symbol (Figure 7) a circle encapsulates the three elements within the design, the reversal of the circle allows the elements to be viewed reversed out of a black background. The 'M' (Adobe, Eras Bold) is underlined by a graphic illustrative representation of water stepped and repeated to convey movement and a gradient fill has been added to create the illusion of depth. The 'S' is drawn in freeform as a representation of an estuary, breaking out of the circle. The shape suggests 'S' but only works as a representation of an estuary by the context in which it has been placed.

The symbol is labeled with the company name, this again retains its own spatial integrity towards the symbol. Physically the circle sits proud of the left side grid line of type. When the grid is removed the label and the symbol appear optically aligned. This is also true of any typographic construction, characters like 'r' sit on the baseline whereas the 'c' sits below the baseline and above the 'x' height, optically both appear the same height (figure 8).

Figure 8: Optical character balance of the baseline ant 'x' height

The first element: Background

The circle is the unifying component, each element within the design has to balance visually with its neighbours. A computer generated grid is placed over the circle, so that a spatial integrity can exist between the elements. The use of scale helps in the emphasis of the message, the larger 'S' is for security and the estuary breaking out into open water.

The second element: M

The typographic style that is to be applied to all printed matter within the company is Adobe Eras. The use of the 'M' helps to unify the symbol to the typography of all the company's communication. The font family contains six weights, Light, Book, Medium, Demi, Bold and Ultra Bold (Figure 9).The sans serif typeface, which first appeared at the beginning of the 19th century is distinguished by an optically consistent line weight (Linotype Collection, 1989). This visual characteristic helps the words to project authority. The range of weights allows the designer to be firm or gentle but always projecting a feeling of strength and security.

 

Figure 9: Eras, sans serif typeface family

The third element: Underlining the M

To underline a letter or word you can simply draw a line underneath, or you can stylize the line to give the symbol further meaning. The symbol for water can be traced back to the original development of cuneiform signs Jenson, 1970). There is nothing new in wavy lines, merely the treatment. Here a graphic illustrative representation of water stepped and repeated to convey movement with gradient fill has been added to create the illusion of depth. This element is designed to appear as blue whenever colour is used. Blue is suitable as a signal colour because of the spectral sensitivity of the human eye in failing light conditions (De Grandis, 1986). If colour is used once it focuses the attention of the viewer, if colour is used twice you halve the impact. AII other elements of the symbol are designed to be white, reversed out of the black background.

Figure 11: (a) Symbol as basic design elements. (b) Optically balanced with elements reversed white out of the black background. (c) As a final symbol. (d) Spatial relationship with label, note alignment of label with symbol breaking across the line. (e) Applied to stationery where the symbol and type have a spatial relationship with the paper.

The fourth element: S

The use of phonetic letterform as an element within a symbol is only valid when used within its own cultural barriers (Eco, 1976). Recognizable phonetic letterform can be altered to reinforce a message, this gives the message added value, but the shape must still maintain its recognizable phonetic features.

During the developmental process several typographic styles were experimented with. The initial working drawings led to the conclusion that the 'S' would have to be constructed if it was to have a further meaning. It has been manipulated and elongated to break the circle at two points. The apex of the letter completely breaks the circle, the baseline partly breaks the bottom of the circle. This partial break at the bottom is to anchor the 'S' to the background, and stop it visually 'floating' within the confines of the design. The 'S' is drawn as a freehand graphic but retains the sans serif characteristic of an optically consistent line weight (figure 10). It is 'corder' as a representation of estuary than the water element, which is illustrative (Mealing and Yazdani, 1991).

 

Figure 10: Line weight differences between the sans serf '5' and the serif 'S'

Changing a characteristic of a letter is often used by the designer to change the meaning or add emphasis. The second example also manipulates the letterform to convey a cultural connection. Unlike the 'S' of Marine Security the addition of the bar to the 'pb' of Print Publish Belize makes the symbol less recognizable as a letterform. The symbol has been removed from the environment in which it has been designed to function. To a user who is not immersed in Belizean culture, drinks Maya brand beer, sees green or thinks Maya, it merely looks Central American.

Example 2: Print and Publish Belize

The main design work was carried out in Belmopan, the administrative capital of Belize. The original design for the Government Printer uses the central image of the national flag to promote Belizean identity. The emblem is used on all government publications. This is retained in the redesign to aid national internal communications. In its new role it underpins the integrity of the communication and gives authority to the new symbol (Figure 12).When the emblem is placed outside a Central American cultural context its meaning is diluted.

Figure 12: Emblem of Belize

Print and Publish Belize is the redesign for the Belizean Government Printing and the publishing imprint for the newly formed Belizean Publishing (Figure 13).The design is based upon Maya carvings at Xunantunich "The Maiden of the Rock", which is in the Peten lowlands of Belize (Figure 14a).The symbol had to embody a national identity specific to the region and the reproductive nature of printing and publishing. It had to express the ideology of its people, projecting a firm control over a potentially hostile environment. It was decided to develop a symbol that could function both nationally and internationally.

Before the project began preliminary research in the United Kingdom showed that the Maya hieroglyph system in the Belize/Guatemala region of Central America had developed independently of other known writing systems. The general opinion is that the indigenous people of Mexico never carried writing beyond a rudimentary stage and there are no hieroglyphs in South America. If we discount the influence from across the Pacific. Trace a route from the Mediterranean rim to Alaska and down through NorthAmerica. Then evidence suggests that the Maya system developed independently without any outside influence (Eric end Thompson, 1972).

The Maya system operates on several levels of communication, it has main signs, affixes, prefixes and infixes to adjust meanings within a hieroglyph. On one level it is a prompt for the speaker to expand the concept. In the same way a computer icon should project all the necessary information for the user to make an informed decision. The final symbol for Print and Publish Belize does not attempt to express itself as Maya writing, because the writing system is too explicit for the purpose of this symbol. After photographing Xunantunich it was decided that repeat patterns within Classic architecture was the appropriate approach (Figure 14,b).

 

Figure 13: Symbol with type on letterhead. The label Print can be substituted with Publish

Figure 14: (a) Print and Publish Belize symbol source, Maya carvings at Xunantunich. (b) Symbol element superimposed over Maya carving. (c) Adaption of Roman alphabet using established typographic criteria.

In Figure 14c the initial design was first developed to adapt the Maya designs of the Classic period to Roman letterform. This approach was to help the symbol when conveying its message to other cultures. It soon became apparent that the Roman model was not working and was, therefore, abandoned after the responses to the visuals were evaluated. However, by using established typographic criteria for the counters and ascenders the letterform was adapted along the same principles as the 'S'in Marine Security (McLean, 1980). Therefore, what has survived this interpretation is the methodology used for the architecture of the symbol through the visual alignments on the horizontal grid line. The bar below the 'p' end above the 'b' have been physically foreshortened to appear optically correct.

Adaption of the Roman letterform as an element within the final symbol

In Figure 14c (I) Helvetica upper case was chosen for its optically consistent line weight. (11) It was then horizontally scaled 155% to reflect the proportion of the Maya carving in Figure 14b. (111) The letterform was then converted into paths, with the elements split within the path, so the central bowl outline of the 'p' could be cloned. (IV) The cloned bowl was reduced in proportion and then extended horizontally, so that the centre appeared optically consistent. (V) The bar would be in close proximity to the neighbouring elements within the final symbol, therefore the bar below the 'p' was drawn as a freeform graphic with an optical weight equivalent to the upper and lower bowl. The right side of the bar is also shorter than the 'p', yet both appear optically on the same vertical alignment. The ascender has been reduced in length so that the bar and ascender both sit on the baseline. (VI) The final outline has had the paths joined and grouped. (VII) The final element was filled and cloned, the duplicated element was rotated 180. and then rotated around a reflection axis to create the mirrored element 'b'. The final elements were placed within a grid structure. Each 'pb' element within the paper grid was vertically reduced to signify the reproductive nature of printing and publishing. The symbol was applied across a range of limited applications and tested.

Figure 15: Transformation of line segments and deletion of paths

After the responses were evaluated, it was considered that the symbol did not fulfill the initial criteria, it was decided to further adapt the Roman letterform. (VIII) The 'p' was converted back to paths, certain points were removed and line segment characteristics were altered from curves to straight lines (Figure 15). (IX) The curve of the 'p' has been reduced with the addition of straight line segments, the position of the bar was considered so that the right vertical alignment of the 'p' is still optically correct. (X) To establish which line segments and points were altered, the Roman letterform was used as a template. (XI) At this stage the final element went through the same process as the initial Roman letterform when applied to the paper grid (Figure 16).

Conclusion

The grid structure for developing any symbol is to establish visual harmony with the elements within the design. The design for a non-computer based symbol is not required to fit neatly into the squares of the grid. When redrawing the design for a computer version of the Print and Publish Belize symbol, the 32 x 32 pixel matrix did not allow for sufficient optical balancing of the image. The bars above 'pb' did not have the required pixel latitude to allow for the optical alignment expected for good design practice. The matrix also limited the wholeness of the design. The paper based solution can be modified to harmonise with the screen. The repeat and diminishing size of 'pb' is to convey the reproductive nature of printing and publishing, the modification for the icon pixel matrix weakens the symbols added message (Figure 17).

Figure 16: (a) Symbol within paper matrix as a f nal symbol. (b) Symbol, label and emblem of the nation applied to stationery. (c) Applied architectural surface graphics.

 

Figure 17: Print and Publish Belize within the 32 x 32 pixel matrix 

The agenda for the development of the symbol designed on the drawing board has been set by a need for image refinement, message encapsulation and multiple application controlled through a grid architecture. Aicher's (1972) paper grid allowed the interchangeable body alphabet to be developed across a broad front. Frutiger (1989) argued that typography should have subtle nuances and it is this, which has allowed typography to evolve. The computer 32 x 32 pixel matrix is the point of contact for icon construction. The size of the icon appears in proportion for its function on the screen. The computer icon has borrowed from the drawing board but has not retained the precision.

When adapting the principles of graphic design procedures for producing a symbol for the 32 x 32 pixel matrix certain inadequacies are exposed. Elements which have rules for optical construction, spatial harmony and added message value content are subordinate to the number 32, and therefore repressed. This constrains the designer to accept these limitations or ask the question: why 32?

References

Bliss C. K. 1965 Semantography (Blissymbolics), Semantography publications

Carter D. 1976 Corporate Identity Manuals, Century Communications Unlimited, Inc. section 2

Collier D.1990 Colliers Rules to DTP,AddisonWesley De Grandis L.1986 Theory and use of colour, Blandford Press

Dreyfuss H. 1972 Symbol Sourcebook, McGraw-Hill Book Company

Eco U.1976 A Theory of Semiotics, Indiana University Press

Eric J. Thompson S. 1972 Maya Hieroglyphs without Tears, Trustees of the British Museum

Goldsmith E.1984 Research into illustration, an approach and a review, Cambridge University Press

HurlburtA. 1978 The Grid,Van Nostrand Reinhold Company

Jenson H, 1970 Sign, Symbol and Script, George Allen and Unwin Limited

Kobayashi K. 1986 Computers and Communications, MIT Press

Linotype 1989 Lino Type Collection Mergenthaler Type Library, Linotype AG p3

McLean R. 1980 The Thames and Hudson Manual of Typography,Thames and Hudson

Mealing S. Yazdani M. 1990 A Computer-based Iconic Language, Intelligent Tutoring Media, 1 (3) 133-136

Mealing S. 1991 Talking Pictures, Intelligent Tutoring Media, 2 (2) 63-69

THE AUTHOR

Since graduating from Ravensbourne in 1981 with a first class honours degree in Graphic Communication Design Paul Honeywill has been involved in many corporate appearance programmes and international signing systems. His work with symbol construction has ranged from a Health Authority with over 4,000 applications to the redefinition of Print Belize and the visual formulation start point for Publish Belize. He has also designed a pictographic sign system for a five language hotel and leisure complex in the middle Mediterranean, where the only language used to reinforce the system was English and Arabic. He is now the Subject Director for the MA Publishing and Book Production Course at the University of Plymouth.