PRINTED ADVERTISEMENT AND WEB ADVERTISEMENT: A COMPARATIVE STUDY ON DESIGN CHARACTERISTICS OF BOTH MEDIA A THESIS SUBMITTED TO THE DEPARTMENT OF GRAPHIC DESIGN AND THE INSTITUE OF FINE ARTS OF BİLKENT UNIVERSITY IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE DEGREE OF MASTER OF FINE ARTS By Gökçe Çuhadar September, 2005 I certify that I have read this thesis and that in my opinion it is fully adequate, in scope and in quality as a thesis for degree of Master of Fine Arts. ______________________________________ Assist. Prof. Marek Brzozowski (Advisor) I certify that I have read this thesis and that in my opinion it is fully adequate, in scope and in quality as a thesis for degree of Master of Fine Arts. ______________________________________ Assist. Prof. Andreas Treske (Co-Advisor) I certify that I have read this thesis and that in my opinion it is fully adequate, in scope and in quality as a thesis for degree of Master of Fine Arts. ______________________________________ Assist. Prof. Alexander Djikia Approved by the Institute of Fine Arts ____________________________________________________ Prof. Dr. Bülent Özgüç. Director of the Institute of Fine Arts ii ABSTRACT PRINTED ADVERTISEMENT AND WEB ADVERTISEMENT: A COMPARATIVE STUDY ON DESIGN CHARACTERISTICS OF BOTH MEDIA Gökçe Çuhadar M.F.A in Graphic Design Supervisor: Assist. Prof. Marek Brzozowski September, 2005 This thesis compares two forms of media advertising; printed advertising and advertising designed for the web, and covers the elements of design, the principles of design, and the experimental design aspects of the two mediums by means of the question “Do the principles of printed advertising design apply to web advertising?” Keywords: Printed Advertising, Web Advertising, Design Elements, Design Principles, Experimental Design Aspects iii ÖZET BASILI REKLAM VE WEB REKLAMI: HER İKİ REKLAM ARACININ TASARIM ÖZELLİKLERİNİ KARŞILAŞTIRAN BİR ANALİZ Gökçe Çuhadar Grafik Tasarım Bölümü Yüksek Lisans Tez Yöneticisi: Yar. Doç. Marek Brzozowski Eylül, 2005 Bu tez basılı reklam ile web reklamı arasındaki, tasarım elemanlarını, tasarım prensiplerini ve tecrübesel tasarım özelliklerini karşılaştırmalı olarak incelerken, “Basılı reklam tasarımı prensipleri web reklamına uygulanabilir mi?” sorusunu sorgulamaktadır. Anahtar Kelimeler: Basılı Reklam, Web Reklamı, Tasarım Elemanları, Tasarım Prensipleri, Tecrübesel Tasarım iv ACKNOWLEDGEMENTS I would like to thank Assist. Prof. Marek Brzozowski for his invaluable supervision, guidance and encouragement throughout the preparation of this study. Also I would like to thank Assist. Prof. Andreas Treske, and, Assist. Prof. Alexander Djikia who helped me to organize, structure and produce this thesis. Also for their invaluable support and trust, I would like to thank to my family; my mother Berin Şenli, my father İbrahim Şenli, my sister Gözde Şenli and my dearest husband Sinan Çuhadar to whom I owe what I have. v TABLE OF CONTENTS ABSTRACT ………………………………………………………………………...III ÖZET ……………………………………………………………………………….IV ACKNOWLEDGEMENTS …………………………………………………….…...V TABLE OF CONTENTS …………………………………………………………..VI LIST OF FIGURES …………………………………………………………...….VIII INTRODUCTION …………………………………………………………….……..1 CHAPTER 1: DESIGNING ADVERTISING FOR THE PRINTED AND FOR THE WEB MEDIUM ……………………………………………………....5 1.1 Delineating the printed advertising medium ………………………………………5 1.2 Delineating the web advertising medium ………………………………………9 CHAPTER 2: A COMPARISON BETWEEN THE TWO MEDIUMS OF ADVERTISING DESIGN ………………………………………….14 2.1 Comparing elements of design between the two medium………………………14 2.1.1 Form and Size …………………………………………………………....14 2.1.2 Color ……………………………………………….…………………….21 2.1.3 Image………………………………………………….…………….........31 2.1.4 Text ………………………………………………………………….…..36 2.2 Comparing design principles in both medium………………………………….45 2.2.1 Balance…………………………………………………………………...45 2.2.2 Unity………...……………………………………………………………49 2.2.3 Emphasis ………………………………………………………………...57 2.2.4 Rhythm……………………………………………………………….….62 2.3 Experimental design differences and similarities between the two mediums….65 vi 2.3.1 Interactivity……………………………………………………………….65 2.3.2 Time……………………………………………………………………....71 2.3.3 Touch (Virtual/ Corporeal)………………………………………….……76 2.3.4 Navigation………………………………………………………………...79 2.3.5 Organization of information……………………………………………...82 CONCLUSION……………………………..………………………………………87 REFERENCES……………………………………………………………………...91 vii LIST OF FIGURES Figure 1: Portrait arrangement in application….........................................................16 Figure 2: Eight different banners sizes according to pixel dimensions…………..…18 Figure 3: A screen shot of a typical floating ad……………………………………..19 Figure 4: Color spectrum…………………………………………………………... 22 Figure 5: Measurement of value (from black to white)……………………………..23 Figure 6: Contrast and brightness levels…………………………………………….23 Figure 7: No saturation on top, to full saturation on the bottom………………….…24 Figure 8: Additive primary colors…………………………………………..……….24 Figure 9: Subtractive primaries………………………………………………..….…25 Figure 10: The brown color looks lighter on the left, than on the right…………..…25 Figure 11: The top bar of solid grey seems to contain a gradient of light grey (left) to dark grey (right) in the bottom figure……………………………………25 Figure 12: Giorgio Armani’s web advertising example, to show how it works in some ways and how it doesn’t in other way………………………….…29 Figure 13: Finans Bank banner ad……………………………………………..……30 Figure 14: Close-up of an image………………………………………………….…33 Figure15: Stallone High protein puddings banner ads……………………………....34 Figure 16: Ford Advertisings...............................................................................…...35 Figure 17: Most usable font sizes…………………………………………………...37 Figure 18: Times and Ariel fonts…………………………………..…………….….37 Figure 19: Different bitmaps of small type sizes……………………...………….…38 Figure 20: Background examples……………………………………..…………….40 viii Figure 21: Peugeot’s Magazine ad………………………………………………….41 Figure 22: Place colored text on neutral background to improve legibility……...…42 Figure 23: Banner ads…………………………………………….………………...43 Figure 24: Magazine ads…………………………………………………………....43 Figure 25: Magazine ad and a button ad…………………………………………....44 Figure 26: A full page magazine ad (balancing heavy weight on the center)………46 Figure 27: Banner examples with different sizes…………………………….……..47 Figure 28: Web ad examples…………………………………………..……………48 Figure 29: Magazine ad examples……………………………………………..……49 Figure 30: Example of proximity…………………………………………………...50 Figure 31: Example of similarity………………………………………………..….51 Figure 32: Example of continuation………………………………………………...51 Figure 33: Example of closure……………………………………………………...52 Figure 34: Example of figure/ground………………………………………………52 Figure 35: Different ads of the same product……………………………………....53 Figure 36: Application of a grid system in a magazine ad…………………………55 Figure 37: A web site organized with a grid system……………….………………55 Figure 38: Alignment in a magazine ad………………………….……….………..56 Figure 39: Flow in a banner ad…………………………………………………….56 Figure 40: Magazine ad examples about emphasis………………………………..58 Figure 41: American Red Cross banner ad………………………………………...59 Figure 42: Visual confusion in a banner……………………………………….…..59 Figure 43: Example of focal points in different banner ads……………………....60 Figure 44: Animated banner examples………………………………………..….61 Figure 45: Z pattern which eye follows…………………………………………..63 ix Figure 46: Ads of Garanti……………………………………...…………………64 Figure 47: Example of different banner ads……………………………………...64 Figure 48: A book ad from Amazon.com web site…………………………….…..74 Figure 49: Animated banner; divided into frames………………………………...75 Figure 50: Peugeouts’ site map……………………………………………...…….80 Figure 51: Peugeots’ web sites’ navigation tools……………………………...….81 Figure 52: Peugeots’ fixed navigation tools in every link; including; home and sitemap link………………………………………………………..….82 Figure 53: Example about organization of information……………………….…..84 Figure 54: Screen shots from Garantis’ Cepbank demo………………………….85 Figure 55: Cepbanks’ web ad ……………………………………………………..86 x