Organic Web Design Exploring Nature as Metaphor in Responsive Web Design A thesis submitted to the School of Visual Communication Design, College of Communication and Information of Kent State University in partial fulfillment of the requirements for the degree of Master of Fine Arts by Alexander J. Catanese APRIL, 2017 Tesis written by Alexander J. Catanese B.F.A., Kent State University, 2014 M.F.A., Kent State University, 2017 Approved by " Jessica Barness, M.F.A., Advisor School of Visual Communication Design " David Robins, Ph.D., Acting Director School of Visual Communication Design " Amy Reynolds, Ph.D., Dean College of Communication and Information "iii Table of Contents PAGE TABLE OF CONTENTS ..............................................................................................iii LIST OF FIGURES ...................................................................................................v ACKNOWLEDGEMENTS ...........................................................................................vi CHAPTER I. INTRODUCTION ........................................................................................1 Personal Experience .........................................................................1 Introduction ...................................................................................3 Methodology ...................................................................................4 II. RESPONSIVE WEB DESIGN & THE MEDIUM OF THE WEB .................................6 Digital Technologies in Design ...........................................................7 Te Rise of Responsive Design ...........................................................9 On Standardization in Responsive Design ...........................................14 Te Web as a Medium .......................................................................18 Looking for New Approaches ............................................................22 III. NATURE AND DESIGN ..............................................................................25 Relations Between the Arts & Sciences ...............................................26 Biomimicry as an Emerging Design Paradigm .....................................32 Nature as Metaphor in Visual Communication Design ..........................41 IV. CRITICAL MAKING EXPERIMENTS ...............................................................49 Research environment .....................................................................49 June 44: A Tidal Archive ...................................................................55 Forming a Set of Organic Principles ...................................................60 News Feed as Stratum ......................................................................64 Blog as an Alluvial River ....................................................................71 "iv V. EVALUATIVE QUESTIONNAIRE .....................................................................78 Evaluation Process ...........................................................................78 Insights and Findings .......................................................................78 VI. IMPLICATIONS ........................................................................................81 Organic Web Design .........................................................................81 APPENDICES .........................................................................................................83 Participant Survey .....................................................................................85 REFERENCES ........................................................................................................88 "v List of Figures FIGURE PAGE 1. New York Times Website ............................................................................11 2. David Hockney’s “Robert Littman Floating in My Pool” .................................21 3. J.H. Mathewson’s “Master Images” of Science ...............................................31 4. Biomimicry Process.................................................................................... 36 5. “Ryukyu Alive” .........................................................................................45 6. “Artifacts of the Presence Era” ....................................................................46 7. Tidal Archive: Biomimicry Process ...............................................................55 8. Tidal Archive: Data Visualization ..................................................................57 9. Tidal Archive: Interface Metaphor Creation ...................................................57 10. Tidal Archive: Modular Development ...........................................................58 11. Tidal Archive: Final Prototype .....................................................................58 12. Organic Principles: Cross References ............................................................61 13. Organic Principles: Properties For Web Design ..............................................63 14. News Feed As Stratum: Google News ............................................................65 15. News Feed As Stratum: Geologic Strata .........................................................67 16. News Feed As Stratum: Wireframing ............................................................67 17. News Feed As Stratum: Organic Principle Evaluation .....................................68 18. News Feed As Stratum: Final Prototype ........................................................68 19. Alluvial Blog: Initial Prototype With “Layered Sediment” ...............................73 20. Alluvial Blog: Content Is A Liquid .................................................................74 21. Alluvial Blog: Alluvial River Channels ...........................................................75 "vi Acknowledgments Tank you to my wife, Katey, for her unwavering friendship, patience, grace, and support during my graduate studies—and in all of my life. Her honest observation, intuition, and ideas are truly behind all that I do, including her thoughtful reflections and conversations with me throughout the making and writing of this thesis. To my parents and family, who continually support me in my graduate studies and career, and encourage me to pursue a field of study that never feels like work. Tank you to Nate Mucha, who I consider as both a mentor and friend, and who sparked my initial interest in both craft and interaction design. Further, I wouldn’t be the designer I am without the continual critique, guidance, and inspiring character of my friends and colleagues at Each+Every: Katey Catanese, Alan Walker, and Ryan Hammond, who continually push me to be critical, reflect often, and find joy in my work. Tank you to my church community in Kent, for their continual support, friendship, encouragement, and prayer throughout my graduate studies—and in my life. Finally, I would like to thank my professors and peers at the School of Visual Communication Design for their overwhelming support, encouragement, and critique. To Jessica Barness, for her openness and encouragement to explore new ideas; to Ken Visocky O’Grady, for the energy, passion, and dedication he brings to each student in the graduate program; and to Alan Walker and Jordan Kauffman, for their constant support and feedback throughout the writing of this thesis, and throughout our graduate studies together. "1 Chapter I: Introduction ‘Copying nature’ is one thing and understanding nature is another. Copying nature can be simply a form of manual dexterity that does not help us to understand, for it shows us things as we are accustomed to seeing them. But studying the structures of nature, observing the evolution of forms, can give everyone a better understanding of the world we live in. —Bruno Munari Personal Experience Troughout high school and into my undergraduate coursework, I spent hours upon hours hiking in the Cuyahoga Valley National Park, which lies within a 15 minute drive of Kent, Ohio. I grew up with the park in my own backyard in a sense, and always counted it as a blessing to visit a place in which time was seemingly preserved. Amidst difficult coursework and circumstances, nature provided a place of silence and of rest, but also of creative exploration—it was a new space for seeing and thinking, which I often found inspiring my design work. I was learning the process of design for the first time during my foundational years in Te School of Visual Communication design, and I quickly became interested in the relationships between craft, human experience, and design. I was taking classes that introduced me to the fundamentals of form, motion, typography, color, and texture. I focused heavily throughout my coursework on classes having to do with interaction design, including HTML/CSS, User Experience Design, Interaction Design: "2 Cultures and Communities, and Critical Making. I also worked as an intern at a local letterpress studio. Eventually, the studio grew into a brand identity and interaction practice, where I worked among various mediums—from coding to user experience design—at any given time. I began to consider the craft of my work in new ways as I dealt with new mediums, and I owe much of what I now know about craft—it’s way of seeing and doing, whether working with code or a printing press from 1890—to Nate Mucha, who completed “Te American Craftsman: A Contemporary Revival” (2012) and ran the studio. I consider him as a mentor and inspiring