EiF by Piotr Kocybik i INNI

estetyka i funkcja - kwaralnik, numer 1.

////09

ESTETYKA I FUNKCJA

Redakcja:

Piotr Kocybik

Korekta 1:

Władysław Targosz,

Korekta 2:

Jakub Sowiński

Liechtenstein i Norwegię ze środków Mechanizmu Finansowego

inni.pl

Europejskiego Obszaru Gospodarczego oraz Norweskiego Mech-

Opracowanie graficzne: Druk:

Tomatoe Print.

Publikacja wydana dzięki wsparciu udzielonym przez Islandię,

anizmu Finansowego oraz budżetu Rzeczypospolitej Polskiej

NA POCZĄTEK

TEORIE

PRAKTYKI

LUDZIE

OBRAZKI

NA KONIEC

SPIS TREŚCI 04

Manifest. Piotr Kocybik.

Funkcjonalizm. Stuart Brown

Minimalizm. Stuart Brown

Aesthetic function. Milena Radzikowska

Systemy informacyjne. Krzysztof Lenk.

Massimo Vignell by Designboom

08 11

Skrypty w indyku Stuart Brown

Code is poetry Wilson Miner

Helvetica Calendar Concept Stuart Brown

Projektowanie informacji. Stuart Brown

14 18

Bruno Monguzzi Stuart Brown

Andreas Nicholas Fischer about Himself

Projektowanie informacji. Stuart Brown

Projektowanie informacji Stuart Brown

Projektowanie informacji. Stuart Brown

Projektowanie informacji Stuart Brown

Projektowanie informacji Stuart Brown 3

NA POCZÄ&#x201E;TEK

MANIFEST

Estetyka funkcji.

Ver sequisl ut esecte exercil iusciliquis num vent prat. Percipit il iustism odigna am volortie dolortionsed tatum dunt alis dio od do do et ute dionsequam in ulputat wisl ullamcore magna commy nim eugiatu eraesecte do elis esequat. Ut wis erilis aci eugiam dolortin ute verat, conse te feugait venibh ex ea facip exerilisit ad ent nos nostionum do corper sim dolobore commy nissi. Enim zzrilis ea commy nullandre tin henis ad magna faciliq uamet, quatio eugue facidunt nos ex ex eniat wisi. Vulput accum vent velenim iurerostio od erilit vullam, quation sequisci bla faccummy num iurercilisi. Urer in vel dit nibh ex ero ent luptat, vullum do doloreet adit praesto exercil iquipsum zzrilisl ullum in ullaore dolessi blandre tismodio con utpat, sit volortis aut at vero enim irilisi. Quamconsecte cortio dolum ipisisisi. Ure tat, quisi. Inibh ero eugiam, verat vulluptat vel utpat. Ustie duis at aliscil iquipsum delesecte diam elenibh er il ut lorem dolore ming exero od eniatie do er in utatinim nonum dolore facinit amcon vel ipissectem qui tem at, quat lorperaestie volorero dunt ex eum auguero od eumsandrerat lumsan velit aliquat wismodi psuscilit, quate con eumsandrero od min henit am qui etum quiscipsusto etum nos accummy nummolorem et autpat, commod tat praesectem dolore vullut atet nullan hent utate te mincil eu faccum quamet loreetue dolorer secte velis dolore el ut alit luptat. Iscil ut lum do ex ea adiametum quis etum digna faciliquis dolore molore feugait nostrud dolumsandre magna faccum venis duis autpatis dolortion ut nit ulputat eugait nonsed mod esto dipsum do consequamet, conseni amcommy nos nim zzriustis el ing ex ex erosto odo ea feugiat. Sum velisisl utpat velenit alisi. Agna faccum verci bla alit at inciliquipit in hendree tueraessit alisl el dolore faccum et adignisit, quatum venim dipit ad etuer sumsandre modion ut et, ver acil utem vel et, consectet wis augiate tem ing exercipit in ulput lummolor sim vel ex eum veros er summod magnim ex esequis esto cor ilis do consecte dit nos ex eu feu feum ad dolore magna accummo dionseq uatummy niam, corero exerili ssecte enim incil ulla faciduisim dolore eummodipit adipsuscil il et, consectet, consendre .ipisit volortis acillam zzrit inis nostrud tin et illam, summy nit ero odolortisl eugait eum quisit pratem zzrillan henim dolesequat la at. Onsed dolobor. adipsuscip endrem alit, si tem quat, sum do odolummolore dolorer aestrud dolum vullaore dolor sequismolum acing exer se dolut dipis nis adigna faccum num dolor sectet et at wisl eugait auit vel dionumsan hent num vel ea acil incilis moloreet, velestrud do exercing el iure velisi eratio doloreraesed ea at. Gait dolortincin venisim et, se tie facidunt landigna facin vel incidunt accum ex exerostrud te dolummy nullan ullam enis adiam aut endre minim digna at la feugait, quis ex eraesed tat at illaore dolor in ute dolorem alisseq uissim vel ipit veliquisim amet utet nos nostrud dolorem vulluptat. Luptat lum in henim et iustionse te commy nos aut lamet, commolorem quamcommy nulputat nim num dolore tiniscin vulla feugait ut aliquis molutat, voloborem zzrilit, consed eraesequis non veniam digna facipsustis ero eugait, sim aute tat vulputat. Duisit lorero commod erit am vulluptate diam, quipis nonum velesequatio core el et loborem dunt velitSumsandio exerosto esto consendio odolobo rperostionse dolobor aci tat verostrud magna feummy nim at eum ver ilisim accum digna aut accummy nostrud et, vullan ut euipsuscidui bla faccum irit aciduip sustio con utatue conulputat vullam, cor acin elit at at. Ut wisisissi tisl ullan velisi.Or accum iniscipit wismolesto odiat. Tinci tis doluptat ip ea con utpat. Alit wisismodit exer adiam ilis nullutp atuerci blamet inis etue modolore commy nulla feu feugait aliquisl iurem ad minibh ea consed exerciliquat iliquis nim ipis amcorpercin eriure dolobore dipisl ea adio coreet in hendre euisim venim euis eraessi bla consequis num iure dio odolenim veliquis el il exeriustrud exeraessis ad dolutat. Ril in el ulluptat ipisisl ut ut iriureet lor at praessim vent wis deliquisim dit iriurem nis nit aliquat wis ent praese facin ulpute tet acil dolendit amcore vulputpatis niscidunt aut velismod modolut aciduisl exeriuscing eum esectem exercilis nulluptatum in velesed modoloreetum illa faci er sit lut lore dolore consequisit veriure venit lamcon utat num nis autat pratie vel incilisl euismolobor adiatem inisl iriusci bla core diam, core veliquam in hendrerosto od tio doloreet do cor susto dio dolobore te commolobor illa adiam, commod mod eumsand ipsusto odit praesse quamet luptat, commy nonse core veliquat luptatinci blaorem zzrit loreet ulla aliquis dolortisci bla adignisi. Duismodigna feu facilisi esto odolobortie dolorpero od dunt wisit adit illan ullaore mincilit, sectem vulla con henim eum exercipit, vulla am doluptat volore commy num dui. Eriureet lobor augait dolor sequam inciduis et, con ullandrem aliquam quat. Isl ipit vendre ercidunt nostrud magna faci tetum velismod ent wisl iril utpate do dunt lum do con heniam, sequat alit praesequat, suscipsum vent in vel et iustion sequis alit lobortisl dunt luptat loreet lore modolorem vel enibh erostin cillam quipisisl dolobor incidunt ut dolore dolorper sit nit luptat. Volore vulput aci elisci esse cortisiscip etuerit, quam ipis doloboreet lorem aliquat. Lobore dolorem adionsed tet, vel ullan hendre tatem veros nulla alit venim volesequat. Duiscipit ad eu feuisit ut vel dunt il iureet dit aliquis molore ming elessiscilis dunt irit er irit accummy niam illa am delismo dolore min henibh et loreet wisi. Ugueriliqui tat nis niat laortie min veliquisl elesto con et, quatie dolortin er susci blam quam, vel dio dolummy num incipsuscil ute vulla commodo lendion euismol orpercing eu feugait ut ute dunt lorem ilit, verat. Periurem vel ese minci euis nim incilla facipis nit vendion sectem quis et ilit, quat at ipit wis aut nit luptat dolor si. Ustions equisi te conulla feuguero consectet niatue con vel dignim iurerit exer se ea faccumsandre ex ex erilit wis ea faccum dolorer sis at lummod molessed euguerit dit alit lam irillam augiamc onsequi blamcon senibh eliquatem velissit niam iure tet wisis alit atummolore dolore magnit alis nonsOnsenisi. Feumsan ea faccum ver sum zzrilis accumsandiat wis delessed tatis esto dolore magnit lorperilit il do odigna ad doloreros nullum nullaor eriureet autat lobore conulput nummodo odolut augue faci el inciniscilis acipit wis am iriure tio corero do euis ad delesto consenit eum zzriliq uamcommy nonsequate mod euis do consecte mod ero del ulla consectem duisim nostrud te te feuis et la faci endigna facil utpatue voleniatio commodit venis dolore dolorper sum dolore modolorem dolore conullummy nibh eugue volorper secte tat. Ummod te dolor augait prate commod eugait nim zzriure dolut vendrer iriure feu faciliq uationullum veliqua tuercinim vent ex eum adiationsed diam, quat lortisim et ing etuerci euguer irillaore dip elese feugiat adit, venibh essit alit ipsum nostis augue dolum vendrercip essendiam aliquam incin ut laorerc iduismodo doloreet nullan et velendreet vel dipsummod duisl ullutat dolobore. 4

NA POCZÄ&#x201E;TEK

MANIFEST

Funkcja estetyki.

Ver sequisl ut esecte exercil iusciliquis num vent prat. Percipit il iustism odigna am volortie dolortionsed tatum dunt alis dio od do do et ute dionsequam in ulputat wisl ullamcore magna commy nim eugiatu eraesecte do elis esequat. Ut wis erilis aci eugiam dolortin ute verat, conse te feugait venibh ex ea facip exerilisit ad ent nos nostionum do corper sim dolobore commy nissi. Enim zzrilis ea commy nullandre tin henis ad magna faciliq uamet, quatio eugue facidunt nos ex ex eniat wisi. Vulput accum vent velenim iurerostio od erilit vullam, quation sequisci bla faccummy num iurercilisi. Urer in vel dit nibh ex ero ent luptat, vullum do doloreet adit praesto exercil iquipsum zzrilisl ullum in ullaore dolessi blandre tismodio con utpat, sit volortis aut at vero enim irilisi. Quamconsecte cortio dolum ipisisisi. Ure tat, quisi. Inibh ero eugiam, verat vulluptat vel utpat. Ustie duis at aliscil iquipsum delesecte diam elenibh er il ut lorem dolore ming exero od eniatie do er in utatinim nonum dolore facinit amcon vel ipissectem qui tem at, quat lorperaestie volorero dunt ex eum auguero od eumsandrerat lumsan velit aliquat wismodi psuscilit, quate con eumsandrero od min henit am qui etum quiscipsusto etum nos accummy nummolorem et autpat, commod tat praesectem dolore vullut atet nullan hent utate te mincil eu faccum quamet loreetue dolorer secte velis dolore el ut alit luptat. Iscil ut lum do ex ea adiametum quis etum digna faciliquis dolore molore feugait nostrud dolumsandre magna faccum venis duis autpatis dolortion ut nit ulputat eugait nonsed mod esto dipsum do consequamet, conseni amcommy nos nim zzriustis el ing ex ex erosto odo ea feugiat. Sum velisisl utpat velenit alisi. Agna faccum verci bla alit at inciliquipit in hendree tueraessit alisl el dolore faccum et adignisit, quatum venim dipit ad etuer sumsandre modion ut et, ver acil utem vel et, consectet wis augiate tem ing exercipit in ulput lummolor sim vel ex eum veros er summod magnim ex esequis esto cor ilis do consecte dit nos ex eu feu feum ad dolore magna accummo dionseq uatummy niam, corero exerili ssecte enim incil ulla faciduisim dolore eummodipit adipsuscil il et, consectet, consendre pisit volortis acillam zzrit inis nostrud tin et illam, summy nit ero odolortisl eugait eum quisit pratem zzrillan henim dolesequat la at. Onsed dolobor. adipsuscip endrem alit, si tem quat, sum do odolummolore dolorer aestrud dolum vullaore dolor sequismolum acing exer se dolut dipis nis adigna faccum num dolor sectet et at wisl eugait auit vel dionumsan hent num vel ea acil incilis moloreet, velestrud do exercing el iure velisi eratio doloreraesed ea at. Gait dolortincin venisim et, se tie facidunt landigna facin vel incidunt accum ex exerostrud te dolummy nullan ullam enis adiam aut endre minim digna at la feugait, quis ex eraesed tat at illaore dolor in ute dolorem alisseq uissim vel ipit veliquisim amet utet nos nostrud dolorem vulluptat. Luptat lum in henim et iustionse te commy nos aut lamet, commolorem quamcommy nulputat nim num dolore tiniscin vulla feugait ut aliquis molutat, voloborem zzrilit, consed eraesequis non veniam digna facipsustis ero eugait, sim aute tat vulputat. Duisit lorero commod erit am vulluptate diam, quipis nonum velesequatio core el et loborem dunt velitSumsandio exerosto esto consendio odolobo rperostionse dolobor aci tat verostrud magna feummy nim at eum ver ilisim accum digna aut accummy nostrud et, vullan ut euipsuscidui bla faccum irit aciduip sustio con utatue conulputat vullam, cor acin elit at at. Ut wisisissi tisl ullan velisi.Or accum iniscipit wismolesto odiat. Tinci tis doluptat ip ea con utpat. Alit wisismodit exer adiam ilis nullutp atuerci blamet inis etue modolore commy nulla feu feugait aliquisl iurem ad minibh ea consed exerciliquat iliquis nim ipis amcorpercin eriure dolobore dipisl ea adio coreet in hendre euisim venim euis eraessi bla consequis num iure dio odolenim veliquis el il exeriustrud exeraessis ad dolutat. Ril in el ulluptat ipisisl ut ut iriureet lor at praessim vent wis deliquisim dit iriurem nis nit aliquat wis ent praese facin ulpute tet acil dolendit amcore vulputpatis niscidunt aut velismod modolut aciduisl exeriuscing eum esectem exercilis nulluptatum in velesed modoloreetum illa faci er sit lut lore dolore consequisit veriure venit lamcon utat num nis autat pratie vel incilisl euismolobor adiatem inisl iriusci bla core diam, core veliquam in hendrerosto od tio doloreet do cor susto dio dolobore te commolobor illa adiam, commod mod eumsand ipsusto odit praesse quamet luptat, commy nonse core veliquat luptatinci blaorem zzrit loreet ulla aliquis dolortisci bla adignisi. Duismodigna feu facilisi esto odolobortie dolorpero od dunt wisit adit illan ullaore mincilit, sectem vulla con henim eum exercipit, vulla am doluptat volore commy num dui eriureet lobor augait dolor sequam inciduis et, con ullandrem aliquam quat. Isl ipit vendre ercidunt nostrud magna faci tetum velismod ent wisl iril utpate do dunt lum do con heniam, sequat alit praesequat, suscipsum vent in vel et iustion sequis alit lobortisl dunt luptat loreet lore modolorem vel enibh erostin cillam quipisisl dolobor incidunt ut dolore dolorper sit nit luptat. Volore vulput aci elisci esse cortisiscip etuerit, quam ipis doloboreet lorem aliquat. Lobore dolorem adionsed tet, vel ullan hendre tatem veros nulla alit venim volesequat. Duiscipit ad eu feuisit ut vel dunt il iureet dit aliquis molore ming elessiscilis dunt irit er irit accummy niam illa am delismo dolore min henibh et loreet wisi. Ugueriliqui tat nis niat laortie min veliquisl elesto con et, quatie dolortin er susci blam quam, vel dio dolummy num incipsuscil ute vulla commodo lendion euismol orpercing eu feugait ut ute dunt lorem ilit, verat. Periurem vel ese minci euis nim incilla facipis nit vendion sectem quis et ilit, quat at ipit wis aut nit luptat dolor si. Ustions equisi te conulla feuguero consectet niatue con vel dignim iurerit exer se eanimalius . 5

TEORIE

Aesthetic Function

Visual confidence and research. by Milena Radzikowska

The Aesthetic Function Before we address the aesthetic function proper, it might be useful to describe in brief some of the various factors that are associated with the aesthetic, and which are influenced by it. The aesthetic, however, is not intrinsically reliant on these factors. That is, each factor can be successfully addressed in either an aesthetic or non-aesthetic way.

Abstract.

Introduction.

The goal of this article is to identify and describe one of the primary purposes of aesthetic quality in the design of computer interfaces and visualization tools. We suggest that humanists can derive advantages in visual research by acknowledging by their efforts to advance aesthetic quality that a significant function of aesthetics in this context is to inspire the userâ&#x20AC;&#x2122;s confidence. This confidence typically serves to create a sense of trust in the provider of the interface or tool. In turn, this increased trust may result in an increased willingness to engage with the object, on the basis that it demonstrates an attention to detail that promises to reward increased engagement. In addition to confidence, the aesthetic may also contribute to a heightened degree of satisfaction with having spent time using or investigating the object. In the realm of interface design and visualization research, we propose that these aesthetic functions have implications not only for the quality of interactions, but also for the results

Since the professionalization of various humanities disciplines in the latter part of the nineteenth century, humanities scholars have been primarily occupied with the interpretation and analysis of existing cultural artifacts, such as texts. The expertise and artistry required to produce the material form of the objects are generally outside the scope of a humanities education, and are placed instead within the fine arts. However, since the rise of personal computing and graphical interfaces, many humanities scholars have been empowered to create the interface through which their materials can be studied: the proliferation of digital collections such as Perseus (www.perseus.tufts.edu) and Rossetti (www.rossettiarchive. org) bears witness to this phenomenon. The distinctions between author, critic, editor and publisher have blurred. Significantly though, the knowledge and perspective of artists and designers have either largely been ignored by the digital humanities scholar,

of the standard measures of performance and preference.

or else have contributed in a manner that has not been subject to direct analysis. Whether working with basic web interfaces to text archives, or with projects that combine text and images, or with dynamically interactive experimental prototypes, researchers have the opportunity to extend their understanding through including the study of interface aesthetics alongside more traditional measures of performance and preference. The significance of the visual is sufficiently evident in all of these cases that aesthetic factors become intrinsically woven with issues of functionality (Dillon 2001, Petersen et al 2004). In addition to the larger area of computer interfaces in general, the growing interest in the more specialized field Confidence, Visual Research, and the Aesthetic Function 2 of humanities visualization systems is another research area where the study of design issues is relevant (Bradley and Rockwell 1994). Research interests in graphic design and presentation find a new relevance and weight, not only as a contributing factor, but also as an area of study in their own right. For instance, Udsen and JĂ¸rgensen (2005) provide a summary of

TEORIE

recent studies in interface aesthetics and create a taxonomy of four approaches: the cultural, the functionalistic, the experience-based and the techno-futuristic. Ngo et al. (2002) offer a model of interface aesthetics consisting of fourteen distinct characteristics. Bertelsen and Pold (2004) suggest adapting the process of art criticism for use in criticizing interface aesthetics. Hallnäs and Redström (2002) propose the noun “expressional” as a counterbalance to the adjective “functional,” with the former term suggesting the components that go into the continuing presence of the designed computational object in everyday life. Fishwick et al. (2005, 2006) discuss the complex effects of art on computing. We address the issue of graphic design contributions to visualization research by making reference to several interdisciplinary interface design research projects at the University of Alberta, McMaster University, and York University. Our emphasis is on the functional differences between early and later prototypes, including an analysis of what Frascara (1997) calls “the aesthetic function of design.” We argue that aesthetic function is a composite that includes attracting viewers, holding their attention, and compelling their trust and respect. Design, in other words, is of utmost importance to the value and legitimacy of scholarly digital content. Previous studies have shown a significant relationship between perceived aesthetic quality and perceived usability for a variety of cultures. In Japan, Kurosu and Kashimura 1995) found that apparent usability correlates more strongly to aesthetic aspects of the interface than to actual usability. Tractinsky (1997) replicated their results in Israel. Karvonen (2000) takes this line of reasoning further in her Scandinavian study of the relationship between trust and design, finding that people tended to rate web sites with a clearly professional design quality as being more trustworthy than more vernacular sites. The connection between graphic design and academic research also has implications for the ongoing need for improved communication between the academic and non-academic worlds. Several strategies are required at different levels, including public information campaigns, academic contributions to popular media, and a significant presence of the academic in the community. In this context of the academic’s role as public intellectual, one potential role that design has to play is in visually rewarding the reader of research results. However, there are barriers to be overcome, not least of all within the academy. It might even be argued that there is an anti-aesthetic subtext in certain research areas, since effort to engage readers through visual appeal (and its related Confidence, Visual Research, and the Aesthetic Function 3 functionality) might be understood as devaluing more essential research outcomes. However, Pujol (2001) points out that the visual qualities of professional design are one of the key signifiers by which we distinguish the individual voice from the institutional. If someone handletters a sign to advertise a garage sale, we understand the sale as an amateur activity. If that same person employs graphic design skills and produces a glossy poster, we may interpret the same event, at least until we arrive at the site, as a professional rather than amateur activity. To summarize, the graphic quality of the design, particularly in the areas of visualization and information design research, can contribute both to the esults obtained from user study, and to the reception of those research results. Careful attention to the details of graphic presentation can have a significant impact on the perceived value of a digital collection, the function of a visualization system, the research results available from analysis of visualizations, and the dissemination of findings both within the academic community and for the larger public audience.

aesthetic expierience is a form of seduction

The Aesthetic Experience. There is a considerable body of literature dealing with aesthetic theory, which ranges from the classical interest in discussing aesthetic factors, such as symmetry and balance, to postmodern questions about the cultural role of the aesthetic and the reasons for embracing instead the anti-aesthetic, particularly in fine art (Carroll 2001). From the perspective of perception and response, some theorists focus in particular on the aesthetic experience, which is generally understood to be a form of emotional reaction to a perceived object (Dufrenne 1973). A connection is commonly made between this emotional reaction and its purported function in civilizing us: The value of beauty, then, is that along with human contact it enables us to break out of the otherwise impregnable spiritual isolation to which every one of us is born and to feel ourselves at home in the world. Beauty and friendship enable us to get outside ourselves and to live as we ought to live, in concord with the world we are part of, and to feel ourselves part of it (Pye 1978, p. 102). Whether or not the perceived object needs to be a work of art per se is open to debate. Dufrenne (1973) takes it as a given for the purposes of his analysis, while Carroll (2001) challenges the assumption that there is any intrinsic connection, pointing out that many works of art are intended to promote other kinds of responses, and that in any case, the interpretive response is often as central as the aesthetic. For some researchers, the aesthetic experience is a form of seduction. Khaslavsky and Shedroff (1999) discuss the seductive experience, breaking the process into three phases – enticement, relationship, and fulfillment – which Confidence, Visual Research, and the Aesthetic Function 4 translate into a range of requirements that must be met at different points in the relationship between the user and the object.Finally, a variety of theorists have attempted to operationalise the study of aesthetic experience, whether in its relation to art or to interfaces. Munro (1956), for instance, suggests 7

TEORIE: Aesthetic Function

an empirical approach using semantic differentials, similar to studies in other branches of sociology. Attempts have also been made to factor the aesthetic experience into its components. For example, Jennings (2000) defines the aesthetic experience as occurring when a person is consciously engaged in an activity that is immersive, pleasurable, unique, and personally rewarding.

The Aesthetic Function. Before we address the aesthetic function proper, it might be useful to describe in brief some of the various factors that are associated with the aesthetic, and which are influenced by it. The aesthetic, however, is not intrinsically reliant on these factors. That is, each factor can be successfully addressed in either an aesthetic or non-aesthetic way. The first two factors are those typically discussed in the context of the design of public signage systems. The factors are whether the sign can be seen—whether it is discernible—and once it has been discerned, whether or not it is legible. In both these cases, the choices made by the designer will have an aesthetic dimension. There are instances of signage which are wonderfully discernible against their surrounds, and which are hallmarks for legibility once they have been discerned, for instance, by the anxious traveler. However, it is not essential that in order to meet these criteria, the signage also be beautiful. The aesthetic is possibly a component, but is neither necessary nor sufficient for the signage to perform its function. A parallel instance occurs in the design of web pages, where the suggestion is often made by designers that part of their work consists of establishing meaningful arrangement of the visual elements, efficient arrangement of the menu items and other working parts, and a logical structure for navigation. Certainly these aspects of web design are within the purview of the designer. However, as in the case of signage, it is certainly possible to make a web page that features meaningful placement of items, clear navigation, and efficient arrangement of menus that is nonetheless not visually attractive. All one needs is the addition of an annoying and encumbering background pattern and a few distracting animated gifs, and the job is done. Although the aesthetic can be a component of design decisions that also affect performance, the aesthetic and the functional have also often been disassociated. For instance, in many practical discussions, the two concepts are placed at difference poles, with the somewhat pejorative term “decorative” replacing the more positive 8

connotations of the word “aesthetic.” The aesthetic in Confidence, Visual Research, and the Aesthetic Function 5 these cases is almost invariably considered a kind of luxury or indulgence, that can be dismissed until the real work is complete, and added on as a sort of icing or final polish to a project that might just as well do without the extra expense and complication. Function and aesthetics are also occasionally linked, as in Frank Lloyd Wright’s famous modernist formulation “form follows function.” The principle here is that a particular kind of aesthetic—one with a minimal or absent amount of ornamentation—can be seen as deriving from meeting performance requirements. The futuristic, streamlined look of the designs by Raymond Loewy or R. Buckminster Fuller provide good examples. However, the various factors that involve the aesthetic can be logically identified, and the aesthetic component separately discussed. For example, it is reasonable to think of good typographic practices as involving an aesthetic component. Page layout is often described in terms of balance and harmony, both of which are aesthetic principles, but these attributes also contribute to the usefulness of the page as an object for sustained reading. However, as in the earlier examples given for electronic media, it is also possible to have a printed page that serves very well as an object for sustained reading, which is not balanced or harmonious. One thinks, for instance, of pages created using a mechanical typewriter, where the conditions of production were not of the kind that could privilege considerations of experimental modification to line length or sophisticated adjustments of leading, and where font choice was minimal if present as an option at all. Nonetheless, for two centuries people were able to read typewritten pages. So although it is possible to associate aesthetic value with page design, it is not reasonable to say that the aesthetic is intrinsic to the success of the page. Our proposal is that the aesthetic functions are not necessarily those functions that are typically conscious, intentional, or telic. That is, they don’t refer to the grosser acts of accomplishing a task. Instead, the aesthetic function is to provide the viewer, or in the case of visualization research the experimental participant, with implicit associations to the notions of quality and attention to detail. The primary aesthetic function is therefore to inspire confidence, which results in visualization research in a number of advantages to the researcher, the participant in the research (or eventually the user of the system), and the larger community that receives and assesses the results. This larger function of inspiring confidence can be divided into three sub- functions, related respectively to trust, willingness, and satisfaction.

TEORIE: Aesthetic Function

with every aspect of the tool. If everything about it looks considered, and it is clear that a reasonable allocation of resources has gone into its development, then the effect on the user will be to increase trust in the people responsible, which may include the designer, the researcher, and the developer. A related set of cues have to do with the provision by the designer of visible indications that the interface or visualization system has been created in consultation with the relevant domain experts. These visible indications work in both directions: from the content expert to the designer and from the designer to the content expert. In this context, one indication of the professionalism of the researcher or developer who has the ultimate responsibility for the design can be the high level of professionalism apparent in the design.

confidence, visual research, and the aesthetic function

Trust.

Willingness.

Trust is a factor in associations; it deals with the relationship between While trust implies a relationship between the designer and the user, wilthe user and the designer. In most cases, however, the designer won’t be lingness is a factor that reflects the user’s internal state during the task. present when Confidence, Visual Research, and the Aesthetic Function At a basic level, the question is whether or not the user is willing to take 6 the user is interacting with the interface. It is therefore necessary for on the task at all, given the tools at hand. At a more sophisticated level, the designer to take measures to help instill a sense of trust through the question becomes to what extent the user is willing to persevere. the mediation of the interface. The opposite of trust is mistrust or fear. Perseverance is important throughout a task, but is particularly signiWhat do people using a visualization tool or computer interface have to ficant when something goes wrong. The user’s willingness to engage in fear, that trust would become an issue? They may fear that their time troubleshooting has to be predicated on the belief that the investment will be wasted, that they won’t get their tasks completed properly or at will be rewarded with success in overcoming the difficulty. During troall, and that the experience will be unpleasant. They may fear potentially ubleshooting, the user puts in resources without receiving immediate nasty surprises. They may fear the lack of control associated with not benefit, based on confidence in a later benefit. Good aesthetic function clearly knowing what is going on. These are all reasonable fears, and demonstrates that the designer is trying to pack in rewards whenever they can be mitigated or even forestalled to the point that they never rewards are possible. arise, through the provision of various aspects of the design intended to At yet another level, there is the issue of morale, which is related in part increase cognitive reassurance. Cognitive reassurance can be provided to the influence of the environment over time. Morale is in some sense in a variety of ways, but some of the factors that should be included are “willingness writ large,” and the details that can encourage willingness can the ready availability of help and the provision of an environment that also support morale. As Pujol (2001) points out, it is important to consider seems appropriate to accomplish the task. The users want to feel that the the change in user experience with repeated exposure to the same design. designers are familiar with current best practices. In some cases, where Novelty and amusement can rapidly turn into repetition and irritation, as best practices change rapidly, it may happen that a particular design does fashionable trends indicate in any number of fields, and interface design not represent current best practice. However, even in these instances, if is no exception. However, it is also possible for the designer to create an the design represents a previous best practice that the user can identify, environment where the attraction of the interface can persist and even there is a degree of reassurance possible. A similar case can be made for grow through repeated exposure. the visual position of the design. Does it accommodate somebody’s visual culture? Ideally, it should be positioned for the visual culture of the user; however, if there has clearly been attention paid to positioning it within some visual culture, that may be sufficient to indicate that the designer had some kind of user in mind. Whether the cues are in the form of adoption of best practices or in the choice of visual position, or both, the goal should be to impress the user 9

TEORIE: Aesthetic function

Example.

artifacts providing autotelic experiences.

Our first example is a prototype system for blocking and reading plays, called “Watching the Script” (Ruecker et al. 2004). The interface design has gone through three distinct stages, beginning with a white parallelogram, moving to a four-colour square, and ending with a very attractive full-colour combination of stage, playback controls, and large coloured dots that clearly indicate character positions From top to bottom are shown three stages in the visual development of the interface for the Watching the Script project. This sequence demonstrates the increase in various kinds of functionality, including the aesthetic function. Contributors to the project include Stan Ruecker, Stéfan Sinclair, Eric Homich, and designers. Attention to the details of the graphic design is in this case intrinsically related to the details of the functions of the system, such as the location and movement of characters and text. However, the list of additional qualities would not be complete without acknowledging that part of the attraction of the most recent iteration is the aesthetic function.

Satisfaction.

Clients.

Satisfaction can be derived from several different kinds of pleasurable experience, which may function individually or in harmony. Such pleasure can be understood as occurring at three levels: in the tool as an effective and attractive tool; in the high visual quality of the result of the process of using the tool; and in the fact that the project looks more polished when the findings are presented or published.

There are three distinct groups that benefit directly from an increase in trust, confidence, and satisfaction. These are the designer, the user (or study participant), and the academic community. In discussing trust to this point, there has been the implicit assumption that the perceiver who is influenced by the aesthetic function is the study participant or the end user. The user may also possibly be a researcher, who is making use of the interface or visualization as a tool for studying other data, rather than as an object of study in its own right.However, there are also other people involved in the process, who are equally likely to respond in some way related to confidence. This group includes the academic community who receives and evaluates the work. To begin with, there is the research or developer whose object of study is the tool. This person’s confidence in the efficacy of the visualization system might be based on research results involving standard measures of performance and preference, or may simply be based on the conviction that the system is good at performing its function. However, in cases where the system is also manifestly well designed, with a recognizable attention to the aesthetic details, the developer may experience a satisfaction similar to the one felt by the other users of the system. Finally, there is the affective response of the academic community, who would experience the system not as users, but at one level removed, in the form of screen shots or other illustrations used in describing the visualization in the context of presenting research results. Figure 2 shows the cycle of production, use, and publication that ties these three communities together through the experience of the designed object.

Confidence, Visual Research, and the Aesthetic Function. In its extreme form, this value can result in forms of interface that are in some senses autotelic — they can become an end in themselves for some users, who find their attractions sufficient to make the system worth further attention, outside the context of any particular research task. For some members of the design community, the development of artifacts that can provide autotelic experiences is understood as one of the inevitable evolutionary consequences of a competitive marketplace (Jordan 2000), where tools that are merely functional are eventually replaced by tools that are functional and also easy to use; these tools in turn are replaced by those that are functional, usable, and also a source of pleasure.

PRAKTYKI

html baseline grid

Code is poetry

Wilson Miner from A List Apart.

We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid. But we’re scrappy folks, web designers. We don’t give up easy. In the long slow battle with browser support and platform inconsistencies, we’ve been able to bring more and more sophisticated print techniques onto the web—sometimes kicking and screaming.

We have the technology Over the last year or so, there’s been a lot of talk about grid systems and using column grids for website layouts. Mark gave us a lesson plan, Khoi gave us a case study and Cameron gave us a toolkit. The message is clear: we have the browser support, the know-how, and the tools we need to create consistent multi-column grid layouts on the web. We can apply the same principles of proportion and balance to the type within those columns by borrowing another technique from our print brethren: the baseline grid. The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page. Imagine those old Big Chief ruled writing pads they gave you in grade school to practice penmanship and you’ve got the basic idea. The magical end result is that all the text on your page lines up across all the columns, creating a harmonious vertical rhythm. In print, it’s not that hard. Just enable the baseline grid in Quark or InDesign and set the increment based on the line-height you want. On the web of course, it’s another story. It’s hard enough to align things vertically with CSS because it’s tough to predict where every element will fall, and it only gets worse when we’re dealing with type, which is hard enough to size consistently on its own. But with a little math and a slightly obsessive attention to detail, we can make it work.

Firing up the grid Note: I’ve used pixel units for sizing text in the examples for this article. Recognizing that this may be a surprising recommendation for an article in this publication, I’ve addressed some of my reasons for doing so—as well as some alternate techniques that use relative units—further down. The first thing we have to do is set a line-height for our grid. I’ve chosen a pretty standard base font size of 12 pixels, and set the line-height at 18 pixels, which gives us a nice open leading of about 150%. It’s important to think about your line-heights up front. You want a ratio of font size to line-height that’s a good balance for readability and that’s easily divisible into smaller units (more on this later). I’ve also borrowed a trick from Khoi and created a tiling background image

that I can use on the page while I’m working to make sure everything lines up where I want it to. You can see the end result with the grid turned on in this example. You’ll notice in the previous example that the text doesn’t fall directly on the grid lines. Because of the way CSS renders line-height (by adding space above and below the letters) it’s a lot easier to line the text up within the grid lines rather than directly on them. It’s possible to adjust your background image to take this into account, or tweak the padding on certain elements so the text starts in a different place, but there’s no point making this more complicated than it needs to be. Paragraphs and headers I’ll start by resetting the margin and padding on everything to zero so we don’t have to worry about default browser styles. In practice, you’ll probably want to use something a little more precise, but for the purposes of this example, a good old star selector will do just fine. 01.

* {

02.

margin: 0;

03. 04.

padding: 0; }

We want space between paragraphs, but the default top and bottom margins of 1em (which works out in this case to 12 pixels) won’t work with our 18 pixel grid, so we’ll set the bottom margin on paragraphs to 18 pixels. 01.

p {

02. 03.

margin-bottom: 18px; }

As we set the font size for headers, we also need to set appropriate lineheights in multiples of 18, as well as adding the 18 pixel bottom margin. 01.

h1 {

02.

font-size: 24px;

03.

line-height: 36px;

04.

margin-bottom: 18px;

05.

}

06.

h2 {

07.

font-size: 18px;

08.

line-height: 18px;

09.

margin-bottom: 18px;

10.

}

11.

h3 {

12.

font-size: 12px;

13. 14.

line-height: 18px; }

The pattern is pretty simple. Any time you add vertical space with a margin or padding, you need to add it in units of 18 pixels to maintain the baseline grid. You don’t always have to add it in one place, but you need to add it in pairs that add up to 18 pixels. For instance, you could set a top margin of 12 pixels and a bottom margin of 6 pixels.

PRAKTYKI: Code is poetry

Lists Lists are a little bit tougher. We’re used to adding a little padding between each list item and before or after a nested list. Depending on your grid size, you may have to choose between adding a lot of extra space (adding a full grid line) or adding none at all and letting list items fall on the regular grid lines. Since the 18-pixel line-height we started with is pretty generous, the “none at all” option works pretty well here. I’ll just add the bottom margin of 18 pixels. 01.

ul,

02.

ol {

03. 04.

margin-bottom: 18px; }

As for nested lists, it’s possible to add half of your line-height (in this case, 9 pixels) of margin above and below nested lists. Adding half a line to the top and another half to the bottom means the contents of the list will be “off the grid,” but the grid will get back on track once the list ends. It’s a compromise, but sometimes worth it for designs in which you need to accommodate especially long or complicated nested lists.

01. .callout :last-child { 02. 03.

margin-bottom: 0; }

The important thing to remember with callouts and sidebars is to keep the line-height the same even if you make the text smaller. You might be tempted to tighten it up, but even for 11- or 10-pixel font sizes, 18 pixels is still a very readable line-height. All your baseline are belong to us You can see it all put together in this example. If you don’t believe me, put your rulers away and check it out with the background grid visible. You can start to see why baseline grids aren’t used very often on the web. It’s pretty tough to keep up with it—especially as your layouts get more complicated—and we’ve only touched the surface of some of the relatively manageable challenges. Just as in print, baseline grids are not always the right choice for every layout, and sometimes you need to make exceptions or exclude certain elements from the grid to make a layout work. But it’s definitely possible, and something that’s worth experimenting with, especially in combination with a horizontal or column grid. A nice balanced baseline grid—even just within the main content area—can add polish and readability as we move typesetting on the web to the next generation with CSS3 and beyond.

Floats and sidebars

Don’t fear the pixel

Here’s where a little discipline comes in. Images and other elements floated within your text need to be sized vertically in multiples of your grid increment: in this case, multiples of 18. If they’re sized correctly, you can add margins around them that add up vertically to a multiple of 18, and the text will always break in the right place, directly under your image.

One final note on font sizing: I’m using pixels instead of ems in this example for one reason: it makes everything simpler. With pixels, I can set one base line-height for the entire document and I don’t have to recalculate it whenever I use a smaller font size. When designing a practical system like this, it’s important that it’s relatively easy (for yourself and others) to use and maintain. You can use relative sizes, but it quickly becomes a lot more difficult to maintain as the math becomes more complicated. It’s easy to get 12 out of 18 (just set the line-height to 1.5em), but when you want to adjust the text size but keep the same line-height, the fractions start to get messy, and predicting how browsers are going to round your values makes it hard to be exact. It’s certainly possible however, and if you’re interested in trying something similar with relative text sizes, I’d recommend checking out Richard Rutter’s excellent 24 ways article, Compose to a Vertical Rhythm. In the end, it’s a tradeoff. Most browsers will scale pixel-based line-heights proportionally along with the text. Of course, the margins don’t scale, and neither do the images. But is it worth making the system more complicated just to make the margins scale if the images don’t? It depends on the situation. In the end, it’s up to you. At some point as designers we have to strike a balance between creating pixel-perfect layouts and infinitely flexible ones. When you get down to it, resizable text is primarily an accessibility feature, not a design feature. Ideally it’s something that should be provided by the browser, no matter how the page is built, and in modern browsers it is. As long as all your content is readable and accessible at all sizes, it’s not necessarily true that the design must maintain integrity as you scale.

01. .left { 02.

float: left;

03. 04.

margin: 0 18px 18px 0; }

05. .right { 06.

float: right;

07. 08.

margin: 0 0 18px 18px; }

Other floated elements like callout boxes are a little bit more complicated, since it’s harder to predict their height based on the content inside. As long as all text and images inside the float follow the 18-pixel rules, and you always add vertical padding and margins in groups that add up to 18, everything should line up no matter what you put inside. 01. .callout { 02.

border: 1px solid #ddd;

01.

padding: 8px 10px;

02. 03.

margin-bottom: 18px; }

Notice that I added 8 pixels of padding to the top and bottom of the floated element, since the border width already accounted for 2 pixels of added height (8 + 8 + 1 + 1 = 18). I’m also going to suck out the bottom margin on the last element in the 12

callout so we don’t end up with too much extra space inside. This isn’t a critical layout feature (the grid is still intact without it), so I’ll go ahead and use the :last-child pseudo class since it doesn’t require me to add any extra markup. IE6 won’t get it, but it won’t break the layout.

LUDZIE

Massimo Vignelli

interview & bio by Designboom

Massimo Vignelli, born in Milan, he studied architecture in Milan and Venice. he travelled to the United States from 1957 to 1960 on fellowships from towle silversmiths in Massachusetts and the institute of design, illinois institute of technology, Chicago.

LUDZIE: Massimo Vignelli

Vignelli Bio. Massimo Vignelli, born in Milan, he studied architecture in Milan and Venice. he travelled to the United States from 1957 to 1960 on fellowships from Towle Silversmiths in Massachusetts and the Institute of Design, Illinois Institute of Technology, Chicago. in 1960, with Lella Vignelli, he established the Vignelli Office of Design and Architecture in Milan. In 1965, Massimo Vignelli became co-founder and design director of Unimark international corporation. With Lella Vignelli, he established the offices of Vignelli Associates in 1971, and Vignelli Designs in 1978. His work includes graphic and corporate identity programs, publication designs, architectural graphics, and exhibition, interior, furniture, and consumer product designs for many leading american and european companies and institutions.

Massimo Vignelli:

Vignelli has had his work exhibited and entered in the permanent collections of several museums; notably, the Museum of Modern Art, the Metropolitan Museum of art, the Brooklyn Museum, and the Cooper-Hewitt - Museum in New York. He has has taught and lectured on design in the United States and abroad. He is a past president of the Alliance Graphique Internationale (AGl) and the American Institute of Graphic Arts (AlGA), a vice president of the architectural league, and a member of the Industrial Designers Society of America (IDSA). the head office of Vignelli Associates is located in New York.

â&#x20AC;&#x17E;The best moment of a day is when I go to bed with a feeling of some accomplishment.â&#x20AC;?

Bicentennial poster USA , 1976 by Vignelli Associates

American Airlines identity, 1979 by Vignelli Associates

LUDZIE: Massimo Vignelli

United Colors of Benetton identity, 1995 by Vignelli Associates

Knoll International Poster, 1966 by Vignelli Associates

Kono table for Casigliani, 1985 by Vignelli Associates

Luminaire Watches, 1985 by Vignelli Associates

LUDZIE: Massimo Vignelli.

Vignelli Interview. who would you like to design for? to do the vatican corporate identity program, I would keep the symbol but change everything else...

designboom: what is the best moment of Your day? Massimo Vignelli: when I go to bed with a feeling of some accomplishment.

which project has given you the most satisfaction? national parks service graphic program or any other one of great impact, that we have done trough the years.

what kind of music do you listen to at the moment? baroque, most of the time.

do you discuss your work with other architects and designers? yes I love to, we share experiences, fees, results.

do you listen to the radio? all day long, a classical station, or my iPod.

what books do you have on your bedside table? any book that I started on an airplane.

do you read design magazines? yes, many, abitare, domus, architectural record, A+U, eye and more.

describe your style, like a good friend of yours would describe it. spare, essential, intellectually elegant, strong, timeless (at least I hope! )

can you describe an evolution in your work from your first projects to the present day? my work has been pretty much consistent, from the beginning, but I think it has undergone a continuos refinement, to become more and more essential.

where do you get news from? TV and new york times

do you notice how women are dressing? absolutely. it tells me everything about the person.

what kind of clothes do You avoid wearing? anything trendy, fancy...

do you have any pets? no. I would love to, but I travel too much.

when you were a child, did you want to become a designer / architect? since I was 14 years old I had no other desire

where do you work on your designs and projects? at my desk, no matter where it happens to be 16

Massimo Vignelli

do you think today there is the proliferation of the decorative without a real social significance,decoration in absense of common values, ... pretty superficial? yes, and I hate it. itâ&#x20AC;&#x2122;s so shallow.

is there any designer and/or architect from the past, you appreciate a lot? Palladio, Joseph Hoffmann, Mies Van Der Rohe, Louis Kahn...

and those still working? Richard Meier, Tadao Ando, and a few others.

any advice for the young ? learn from the past, think of the present, dream of the future.

what are you afraid of regarding the future? global pollution, explosion of vulgarity, and social irresponsibility.

OBRAZKI

Andreas Nicolas Fischer Bio. Andreas Nicolas Fischer, born in Munich, Germany. is a graduate of Joachim Sauterâ&#x20AC;&#x2122;s class at the University of the Arts Berlin. He concerns himself with the visualization of data, which normally lies beyond human perception. He works with scientific information visualization and generative systems, to create drawings, sculptures (data artefacts) and installations. The artist lives and works in Berlin.

OBRAZKI

generative art ?

OBRAZKI: Andreas Nicholas Fischer

rysunki świetlne 2 Andreas Nicholas Fischer

rysunki świetlne Andreas Nicholas Fischer

OBRAZKI: Andreas Nicholas Fischer

Fundament Mapping of the world gross domestic product 2007 Andreas Nicholas Fischer, beech wood, poplar plywood; 40 × 60 × 20 cm;

The data sculpture Fundament shows the allocation of the world’s gross domestic product in comparison to the worldwide derivatives volume. The statistical data was aquired from the CIA World Factbook and the International Monetary Fund. The sculpture consists of two layers which visualize two data sets with the same principle.

The lower half is a mapping of the world’s GDP and the top half is a mapping of the derivatives volume, alloted to the coordinates of the countries on a map.

This sculpture is a statistical map, a hybrid between physical and conceptual space. The horizontal arrangement equates to the Mercator projection of a world map and the vertical axis metaphorically corresponds to the financial activity of the country.

Wachstum Andreas Nicholas Fischer.

Wachstum is a series of images created with a generative system. The application follows algorithms, which define the parameters of the growth process. Each time the application is being run, it creates one unique image over time.

The piece was inspired by theoretical botany and the growth process in nature. An archival print of the piece was shown at the Top 40 Juried Competition exhibition in the Los Angeles Center for Digital Art in March 2007.