How Print Design is the Future of Interaction

89 likes5,309 views

The document discusses the future of interaction design and its relationship with print design, emphasizing the need for new visual approaches that reflect digital capabilities. It critiques the current superficiality of design that mimics real-world objects and argues for a more meaningful representation of information onscreen. Key insights from various designers highlight the importance of functionality, minimalism, and the distinction between digital and print design principles.

Design

i’m not a graphic designeri’m an interaction designer

i’m not a graphic designeri’m an interaction designer i work at microsoft on windows phone, with a team of talented designers

three things:how the visual language of interfaces have been shapedwhy interfaces need a new approach to visual designwhat we can learn from print design

artifact as UIReal worlds objects used as metaphors to describe the technology.Hyper-realism is the dominant aesthetic.Ergonomics, Usability, Cognition are primary concerns.Translation of content from analog to digital are the driving activities.Interfaces focus on techniques for manipulating and organizing content. Re-creating our digital things.

information as UIContent is represented as it exists.Content is assumed to be interactive.Speed, usability and bounce rate are primary concerns.Augmentation of objects, people, places, and data with relevant information is the driving activity.Creating our digital selves.

“Paul Rand famously wrote: The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring.In the context of web and high-technology product design, this observation from Mr. Rand takes on special import.” -Andrei Michael Herasimchuk

“Leather buttons…feels very much like real leather buttons would feel: Tacky. it feels wrong and it is wrong. It’s kitsch. If you use favor style over function to make something look like something it is not, you are not a product designer, you are an illusion artist.”-Oliver Reichenstein

“Chrome arises from a chronic case of object-envy. We like interacting with physical objects in the real world, goes the reasoning, so it will presumably be more pleasant to interact with computer software if it pretends to be a physical object too. But why?-Steven Poole

“…a networked, digital, interactive copy of, say, the Tao TeChing is simultaneously more and less than the one I keep on my shelf. You give up the tangible, phenomenological’isnessof the book, and in return you’re afforded an extraordinary new range of capabilities. Shouldn’t the interface, y’know, reflect this?”-Adam Greenfield

a change in value deserves a change in expression

a change in value deserves a change in expressionthe value is the information on the surface, not the object it once resided

We owe more to the existing look and feel of digital devices to the engineers at SRI and Xerox Parc, than to any of the early leaders of information communication like Paul Rand, or Massimo Vignelli.

“Anything that is a great print design is likely to be a lousy web design. There are so many differences between the two media that it is necessary to take different design approaches to utilize the strengths of each medium and minimize its weaknesses.”-Jakob Nielsen

what is true for print design is true for interaction

hierarchy and structure with grids“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”-Mark Boulton

reduction of elements“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away”-Antoine de Saint-Exupery

uncompromising focus on typography“Font-size is a tool for readability, impact and rhythm. (It creates) a very efficient way of guiding the reader’s eyes through the page, thus working as an interface to the content.”-Diogo Terror

“…in the 21st century, Internet standards have successfully separated design and content….readers are in control of how the content they are reading looks. And, as it turns out, many of those readers like their designs to be as minimal as possible.Call this wave The Undesigned Web.”-Dylan Tweney

“Bad design begets more bad design. Especially when the decision is left to a public conditioned to prefer whatever it is that they are currently living with. The problem then exists when bad design becomes accepted by designers as business as usual.”-Paul Rand

“I say that flat is the new black; that 2D is the new avant-garde; that a surface doesn't have to be ashamed of being a surface.”-Steven Poole

regardless the debate whether print is dead, print design is not

what we need:the wantthe designersthe process

what we get:beautiful productsbeautiful brands

thanks@mkruzeniski#inspiredbyprint@WPdesignteam

How Print Design is the Future of Interaction

1. how print designis the future of interaction

2. @mkruzeniski#inspiredbyprint

3. i’m not a graphic designer

4. i’m not a graphic designeri’m an interaction designer

5. i’m not a graphic designeri’m an interaction designer i work at microsoft on windows phone, with a team of talented designers

6. three things:how the visual language of interfaces have been shapedwhy interfaces need a new approach to visual designwhat we can learn from print design

7. by “print” I don’t mean

10. by “future” I mean now

11. a brief history of interaction

36. artifact as UIReal worlds objects used as metaphors to describe the technology.Hyper-realism is the dominant aesthetic.Ergonomics, Usability, Cognition are primary concerns.Translation of content from analog to digital are the driving activities.Interfaces focus on techniques for manipulating and organizing content. Re-creating our digital things.

43. information as UIContent is represented as it exists.Content is assumed to be interactive.Speed, usability and bounce rate are primary concerns.Augmentation of objects, people, places, and data with relevant information is the driving activity.Creating our digital selves.

44. informationartifact

46. “Paul Rand famously wrote: The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring.In the context of web and high-technology product design, this observation from Mr. Rand takes on special import.” -Andrei Michael Herasimchuk

48. “Leather buttons…feels very much like real leather buttons would feel: Tacky. it feels wrong and it is wrong. It’s kitsch. If you use favor style over function to make something look like something it is not, you are not a product designer, you are an illusion artist.”-Oliver Reichenstein

49. “Chrome arises from a chronic case of object-envy. We like interacting with physical objects in the real world, goes the reasoning, so it will presumably be more pleasant to interact with computer software if it pretends to be a physical object too. But why?-Steven Poole

50. cecin’est pas un poubelle.

51. information and artifact converge here

53. “…a networked, digital, interactive copy of, say, the Tao TeChing is simultaneously more and less than the one I keep on my shelf. You give up the tangible, phenomenological’isnessof the book, and in return you’re afforded an extraordinary new range of capabilities. Shouldn’t the interface, y’know, reflect this?”-Adam Greenfield

54. a change in value deserves a change in expression

55. a change in value deserves a change in expressionthe value is the information on the surface, not the object it once resided

56. We owe more to the existing look and feel of digital devices to the engineers at SRI and Xerox Parc, than to any of the early leaders of information communication like Paul Rand, or Massimo Vignelli.

57. inspired by print

72. “Anything that is a great print design is likely to be a lousy web design. There are so many differences between the two media that it is necessary to take different design approaches to utilize the strengths of each medium and minimize its weaknesses.”-Jakob Nielsen

73. what is true for print design is true for interaction

74. hierarchy and structure with grids“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”-Mark Boulton

76. confident use of negative space

78. reduction of elements“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away”-Antoine de Saint-Exupery

80. objectivity through imagery

82. uncompromising focus on typography“Font-size is a tool for readability, impact and rhythm. (It creates) a very efficient way of guiding the reader’s eyes through the page, thus working as an interface to the content.”-Diogo Terror

84. proportion and pacing

86. universal iconography

88. inspired by print

99. the undesigning

100. “…in the 21st century, Internet standards have successfully separated design and content….readers are in control of how the content they are reading looks. And, as it turns out, many of those readers like their designs to be as minimal as possible.Call this wave The Undesigned Web.”-Dylan Tweney

101. “Bad design begets more bad design. Especially when the decision is left to a public conditioned to prefer whatever it is that they are currently living with. The problem then exists when bad design becomes accepted by designers as business as usual.”-Paul Rand

102. “I say that flat is the new black; that 2D is the new avant-garde; that a surface doesn't have to be ashamed of being a surface.”-Steven Poole

103. regardless the debate whether print is dead, print design is not

104. what we need:

105. what we need:the want

107. what we need:the wantthe designers

108. what we need:the wantthe designersthe process

109. what we get:

110. what we get:beautiful products

111. what we get:beautiful productsbeautiful brands

112. thanks@mkruzeniski#inspiredbyprint@WPdesignteam

Editor's Notes

#7: The three topics that I will discuss during this talk.
#8: By print, I don’t mean trying to reproduce the effect of printed matter on a screen (i.e. paper effects). I mean graphic design I mean the principled approach to designing a surface in its most traditional sense.
#9: By print, I don’t mean trying to reproduce the effect of printed matter on a screen (i.e. paper effects). I mean graphic design I mean the principled approach to designing a surface in its most traditional sense. [image: Wall Street Journal app for iPad]
#10: By print, I don’t mean trying to reproduce the effect of printed matter on a screen (i.e. paper effects). I mean graphic design I mean the principled approach to designing a surface in its most traditional sense. [image: “Bring in da Noise, Bring in da Funk” by Paula Scher, 1995]
#12: Let’s start by looking back on the history of interfaces. It helps to understand why interfaces look the way they do today.
#13: If we trace the history of modern User Interface, it all begins with Vannevar Bush’s Memex machine. In a 1945 letter to the editor in The Atlantic Monthly, Bush described a machine built in to a desk, that would allow its owner to store, annotate, and link documents and media. The interface to the desk was two displays; one would display information, and the other was a surface for taking notes, annotations, or linking to other material. The machine would help humans organize larger collections of knowledge, and is regarded by some as one of the original blueprints for the modern web. [image: the Memex machine]
#14: Bush first began mulling the idea of a machine that could help humans achieve a higher level of organized knowledge in a 1939 essay, “Mechanization and the Record.” Building on that idea, he sent a letter to the editor of Fortune magazine describing what he called memex, (a portmanteau of “memory” and “index”) his conceptualization of this sort of collective memory machine that would eventually become the blueprint for the modern day web.After thinking about the potential of augmented memory for several years, Bush set out his thoughts at length in the essay "As We May Think" in the Atlantic Monthly, which was published July 1945. In the article, Bush predicted that "wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified".“For years inventions have extended man’s physical powers rather than the powers of his mind. Trip hammers that multiply the fists, microscopes that sharpen the eye, and engines of destruction and detection are new results, but not the end results, of modern science. Now, says Dr. Bush, instruments are at hand which, if properly developed, will give man access to and command over the inherited knowledge of the ages. The perfection of these pacific instruments should be the first objective of our scientists as they emerge from their war work.”[image: the Memex machine]
#15: At the very least, the Memex was an important inspiration for the first computer designs at SRI and Xerox PARC, which are the foundation for the PC’s we use and live with today. It was Bush’s essay that inspired a young Douglas Englebart to try and actually build such a machine. In 1962, Douglas published his ideas in a seminal essay entitled "Augmenting Human Intellect." In this paper, Douglas argued that digital computers could provide the quickest method to "increase the capability of a man to approach a complex problem situation, to gain comprehension to suit his particular needs, and to derive solutions to problems." He envisioned the computer not as a replacement for human intellect, but a tool for enhancing it. Douglas and his growing staff worked for years to develop the ideas and technology that finally culminated in a public demonstration in front of over a thousand computer professionals in 1968: “The Mother of all demo’s”[image: Doug Engelbart’s “Mother of all demo’s”, 1968]
#16: In 1973, the first graphical user interface was built at PARC, using the desktop as a metaphor. Engelbart's work directly led to the advances at Xerox PARC. Several people went from SRI to Xerox PARC in the early 1970s. In 1973 Xerox PARC developed the Alto personal computer. It had a bitmapped screen, and was the first computer to demonstrate the desktop metaphor and graphical user interface (GUI). It was not a commercial product, but several thousand units were built and were heavily used at PARC, as well as other XEROX offices, and at several universities for many years. The Alto greatly influenced the design of personal computers during the late 1970s and early 1980s, notably the Three Rivers PERQ, the Apple Lisa and Macintosh, and the first Sun workstations.The GUI was first developed at Xerox PARC by Alan Kay, Larry Tesler, Dan Ingalls and a number of other researchers. It used windows, icons and menus to support commands such as opening files, deleting files, moving files, etc. In 1981 Xerox introduced a pioneering product, Star, incorporating many of PARC's innovations. Although not commercially successful, Star greatly influenced future developments, for example at Apple, Microsoft and Sun Microsystems.[image: the Xerox Alto, 1973]
#17: Looking back at the first screenshots of this first GUI, the designs feel familiar even now. In 1974 PARC developed a What-You-See-Is-What-You-Get cut & paste interface, and in 1975 the demonstrated pop-up menus. [image: the Xerox Alto graphical user interface, 1973]
#18: The desktop concept was pushed quite a bit further by 1981 in the commercial Xerox Star PC interface (1981), which was an important influence for the PC UI’s created at Microsoft, Apple, NeXT, and Sun Microsystems. [image: the Xerox Star graphical user interface, 1981]
#19: Fast forward years later to modern PC interfaces and you can see those same initial metaphors and design patterns have firmly cemented themselves. The Apple work extended PARC's considerably, adding manipulatable icons, a fixed drop-down menu bar and drag&drop manipulation of objects in the file system (see Macintosh Finder) for example.The Apple GS/OS desktop introduced color and an early version of the Finder, in 1986[image: the Macintosh Desktop,1984]
#20: Windows 3.0 was the third major release of Microsoft Windows, and was released on 22 May 1990. \\[image: the Windows 3.0 desktop, 1990]
#21: Magic Cap (short for Magic Communicating Applications Platform) was an object-orientedoperating system for PDAs developed by General Magic. Designed for portable, networked computing, the launch of Magic Cap in 1994 predated the Palm OS by several years.[image: Magic Cap graphical user inteface, 1994]
#22: Magic Cap (short for Magic Communicating Applications Platform) was an object-orientedoperating system for PDAs developed by General Magic. Designed for portable, networked computing, the launch of Magic Cap in 1994 predated the Palm OS by several years.[image: Magic Cap graphical user inteface, 1994]
#23: Magic Cap (short for Magic Communicating Applications Platform) was an object-orientedoperating system for PDAs developed by General Magic. Designed for portable, networked computing, the launch of Magic Cap in 1994 predated the Palm OS by several years.[image: Magic Cap graphical user inteface, 1994]
#24: Bob is one of the most widely cited (and derided)example of a UI that literally translates physical objects and space as a navigation paradigm. [image: Microsoft Bob graphical user interface, 1995]
#25: The increase of resolution from 16 to 32 bit saw UI rendered in increasingly greater detail. The extra pixels and colors gave our metaphors the textures of real materials, including bevels, glows, shadows, reflections and gloss. Controls are rendered as knobs, switches, dials, tools, and three-dimensional buttons to evoke the familiarity of their analogy counterpart. [image:Winamp 1.0, 1997]
#26: The increase of resolution from 16 to 32 bit saw UI rendered in increasingly greater detail. The extra pixels and colors gave our metaphors the textures of real materials, including bevels, glows, shadows, reflections and gloss. Controls are rendered as knobs, switches, dials, tools, and three-dimensional buttons to evoke the familiarity of their analogy counterpart. [image: Kai’s Photo Soap,mid 90’s]
#27: The extreme rendering of interface elements didn’t subside, but did become more sophisticated over time. [image: The OSX with Aqua theme and user interface, first introduced at the January 2000 Macworld Conference & Expo in San Francisco. Aqua's first appearance in a commercial product was in the July 2000 release of iMovie 2.]
#28: The extreme rendering of interface elements didn’t subside, but did become more sophisticated over time. [image: Windows XP and Windows Media Player. Windows XP was released to manufacturers on August 24, 2001]
#29: The extreme rendering of interface elements didn’t subside, but did become more sophisticated over time. [image: Windows 7 iconography. Windows 7 was released to manufacturer’s on July 22, 2009]
#30: As media, like books, photos and music, become more common in the desktop environment, they take on the same metaphorical treatments. They are packaged and presented with outdated details, shading or textures to simulate the look and feel of real world artifacts. However, a book doesn’t need to be rendered with a cover and pages to appreciate and undertstand “book-ness”. The story, the images, the content are the book – not the textures of the materials. Similarly, a movie doesn’t need to look like a DVD on a shelf to understand that it belongs to a collection, and an audio mixer doesn’t require cables and knobs to be capable as a tool, and a Notebook does not require leather and a spiral bind to be familiar.[image: Delicious Library, 2004]
#31: As media, like books, photos and music, become more common in the desktop environment, they take on the same metaphorical treatments. They are packaged and presented with outdated details, shading or textures to simulate the look and feel of real world artifacts. However, a book doesn’t need to be rendered with a cover and pages to appreciate and undertstand “book-ness”. The story, the images, the content are the book – not the textures of the materials. Similarly, a movie doesn’t need to look like a DVD on a shelf to understand that it belongs to a collection, and an audio mixer doesn’t require cables and knobs to be capable as a tool, and a Notebook does not require leather and a spiral bind to be familiar.[image: HP TouchSmart PC,2007]
#32: While most mainstream UI’s rely on simulated texture, drop-shadows and lighting effects to mimic the materiality of their metaphors on an upright 2D plane, some concept interfaces like Bumptop push the desktop metaphor deeper by adding a 3rd dimension to the desktop, and physics to the icons to allow them to move more realistically across the desktop surface. [image: Bumptop Desktop– 2007]
#33: The iPad User Interface Guidelinesrecommend realistic material texturing for 3rd party applications. [image: iPad Notes app, 2010]
#34: The iPad User Interface Guidelinesrecommend realistic material texturing for 3rd party applications.[image: Yahoo! Entertainment iPad app]
#35: The iPad User Interface Guidelinesrecommend realistic material texturing for 3rd party application developers. [image:Amplitude iPad app]
#36: [image: Android 3.0 Honeycomb UI]
#37: As computers have become faster and resolution surface higher, the focus of visual UI design has been on polishing metaphors rather than exploring other approaches: more detail, more shiny, more texture, more depth, more shading, more transparency. It’s as if we are trying to rebuild the objects around us inside of our computers. But that approach makes far less sense today than it did 30 years ago.
#38: Because of bandwidth constraints and limitations of rendering technologies, UI development on the web had a different approach from the desktop. The focus on the first web sites was on delivering only the most essential information.[image: whitehouse.gov,1994]
#39: Because of bandwidth constraints and limitations of rendering technologies, UI development on the web had a different approach from the desktop. The focus on the first web sites was on delivering only the most essential information.[image: google.com,1996]
#40: Because of bandwidth constraints and limitations of rendering technologies, UI development on the web had a different approach from the desktop. The focus on the first web sites was on delivering only the most essential information.[image: thefacebook.com, 2004]
#41: Over time, much of web UI design has been about adding more content and information, and has largely avoided recreating the physical control metaphors of desktop and client interfaces. A valuable paradigm that the web introduced is the notion that the content itself is interactive. [image: facebook.com, 2011]
#42: Mint.com represents a strong example of UI design focusing on highlighting (and polishing) information. [image: mint.com, 2007]
#43: Over time, much of web UI design has been about adding more content and information, and has largely avoided recreating the physical control metaphors of desktop and client interfaces. A valuable paradigm that the web introduced is the notion that the content itself is interactive. [image: amazon.com, 2011]
#46: The continual building up of information has in many cases however become unwieldy, and the way that the information is presented lacks design/communication consideration. [image: eBay]
#48: In the case of artefact as UI, there is a lack of meaningful product and brand differentiation.
#49: In the early days of interaction design when software concepts was best explained through heavy handed metaphors, the familiarity of these objects and textures was appropriate. As an approach to design however, skeumorphism has outlived its usefulness and as Designers we should begin critiquing it for what it is: shallow, meaningless, distracting, tacky and kitsch. As Oliver Reichenstein suggest in his post “Designing for the iPad: Reality Check”, “If you…make something look like something it is not, you are not a product designer, you are an illusion artist.”
#50: In the early days of interaction design when software concepts was best explained through heavy handed metaphors, the familiarity of these objects and textures was appropriate. As an approach to design however, skeumorphism has outlived its usefulness and as Designers we should begin critiquing it for what it is: shallow, meaningless, distracting, tacky and kitsch. As Oliver Reichenstein suggest in his post “Designing for the iPad: Reality Check”, “If you…make something look like something it is not, you are not a product designer, you are an illusion artist.”
#51: “The aggregate system of "metaphorics" in today's UI design is tottering and nonsensical. It's time to scour away the accumulated sediment of imaginary hardware and furniture, time to chuck out the chintz.”-Steven Poole
#53: In mobile devices, artifact and information UI experiences coexist and begin to inform one another.
#58: So what does the interface for a networked, information driven experience look like? In Print Design we can find several hundred years of expertise in communicating and rendering information.
#59: As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. It has gone through many periods, influenced by advancement of technologies, politics, and cultural movements. [image: The Gutenberg Bible,1455]
#60: As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. It has gone through many periods, influenced by advancement of technologies, politics, and cultural movements. [image:Philippe Grandjean,Romain du Roi Typeface, 1702]
#61: As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. It has gone through many periods, influenced by advancement of technologies, politics, and cultural movements. [image: Oeuvres de Jean Racine, Modern Roman Typeface, 1801]
#62: As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. It has gone through many periods, influenced by advancement of technologies, politics, and cultural movements. [image: example of a bill poster and early specimen of decorative typefaces, c. 1850]
#63: As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. It has gone through many periods, influenced by advancement of technologies, politics, and cultural movements. [image:Punch magazine, 1841 London]
#64: As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. It has gone through many periods, influenced by advancement of technologies, politics, and cultural movements.[image: example of Art Nouveau, Cabaret du Chat Noir by TheophileSteinlen, 1896]
#65: As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. It has gone through many periods, influenced by advancement of technologies, politics, and cultural movements. [image: example of Futurism, DeperoFuturista by FortunatoDepero,1927]
#66: As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. It has gone through many periods, influenced by advancement of technologies, politics, and cultural movements. [image: example of Russian Constructivism]
#67: As a craft, design for printed media has a rich history. Several generations of designers have pushed its boundaries in countless directions. It has been shaped over several hundred years as both a functional and aesthetic discipline, with a deep foundation of principles, practices, theories, and professional dialogue. It has gone through many periods, influenced by advancement of technologies, politics, and cultural movements. [image: Bauhaus catalog cover designed by Herbert Bayer]
#68: The movement of the International Style – or Swiss Style - in particular established a way of thinking that is particularly relevant to challenges that concern Interaction Design now. [image: Die Gute Form by Emil Ruder, 1958]
#69: Functionally, the International Style created a foundation for thinking about information that is very useful for Interaction Design. The International Style looked to build a new aesthetic by deriving beauty from the innate qualities of the machine, championed standardization and mathematical grids for organizing information, and created simple and recognizable iconography.[image:New York Subway Map by Massimo Vignelli, 1972]
#70: Functionally, the International Style created a foundation for thinking about information that is very useful for Interaction Design. The International Style looked to build a new aesthetic by deriving beauty from the innate qualities of the machine, championed standardization and mathematical grids for organizing information, and created simple and recognizable iconography.[image: example logo’s by Paul Rand]
#71: Though Graphic Design has continued to evolve, the principles of design persist as a foundation in Graphic Design practice today. [image: “Bring in da Noise, Bring in da Funk” by Paula Scher, 1995]
#72: Though Graphic Design has continued to evolve, the principles of design persist as a foundation in Graphic Design practice today. [image: Burocrata typeface promo by WeWorkForThem]
#73: I disagree. The core design principles established by Graphic Design are in fact very useful for the design of interfaces as well. In our exploration of the differences, we’ve forgotten how much they are the same. Basically, they are both about clarity in communication and simplicity through systems.
#74: I disagree. The core design principles established by Graphic Design are in fact very useful for the design of interfaces as well. In our exploration of the differences, we’ve forgotten how much they are the same. Basically, they are both about clarity in communication and simplicity through systems.
#75: Much of Interaction Design is about reducing complexity. A grid system organizes information in a logical, consistent, and meaningful framework, which both designers and developers can work within. A grid provides anchors for the eyes, improving readability. Strong use of geometry in a layout creates a visual hierarchy that allows users to easily scan and discover information.
#76: Hierarchy and Structure with Grids“Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”- Mark Boulton Much of Interaction Design is about reducing complexity. A grid system organizes information in a logical, consistent, and meaningful framework, which both designers and developers can work within. A grid provides anchors for the eyes, improving readability. Strong use of geometry in a layout creates a visual hierarchy that allows users to easily scan and discover information.[image on the right: Opernhaus Zurich poster by Joseph Muller Brockmann]
#77: Confident use of Negative space“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away” - Antoine de Saint-Exupery A common goal of UI design has been to densely pack as much information as is possible on a given screen. However, giving content some space to breathe provides critical focal points. It allows the positive space to communicate clearly and create impact. A balanced page make the promoted information more easily digestible. [image: poster for Little Miss Sunshine, 2006]
#78: Confident use of Negative space“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away” - Antoine de Saint-Exupery A common goal of UI design has been to densely pack as much information as is possible on a given screen. However, giving content some space to breathe provides critical focal points. It allows the positive space to communicate clearly and create impact. A balanced page make the promoted information more easily digestible. [image: poster for Little Miss Sunshine, 2006]
#79: Reduction of Elements“Less is More” – Robert Browning“Make everything as simple as possible, but not simpler” – Albert Einstein“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away” - Antoine de Saint-ExuperyUI elements clutter the content it contains. The role of the designer is to edit, to find balance. Reducing an interface to only the most essential elements shines focus on the primary tasks of the UI. What may be lost in information density is gained in simplicity. The resulting UI will feel light, smart, easy, fast and responsive.
#80: Reduction of Elements“Less is More” – Robert Browning“Make everything as simple as possible, but not simpler” – Albert Einstein“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to take away” - Antoine de Saint-Exupery UI elements clutter the content it contains. The role of the designer is to edit, to find balance. Reducing an interface to only the most essential elements shines focus on the primary tasks of the UI. What may be lost in information density is gained in simplicity. The resulting UI will feel light, smart, easy, fast and responsive.[image: Create & Barrel packaging]
#81: Objectivity through ImageryThough much of Swiss graphic design is remembered for its powerful use of typography, photography was also an important part of the style. Photos were seen as a more accurate means to convey information compared to illustrations. Similarly in a UI, it’s the content that people want, not the chrome. Using imagery instead of iconography or illustration reduces the need to translate metaphors, and promotes direct interaction with content.
#82: Objectivity through ImageryThough much of Swiss graphic design is remembered for its powerful use of typography, photography was also an important part of the style. Photos were seen as a more accurate means to convey information compared to illustrations. Similarly in a UI, it’s the content that people want, not the chrome. Using imagery instead of iconography or illustration reduces the need to translate metaphors, and promotes direct interaction with content.[image: advertisement for The North Face]
#83: Emphasis on TypographyEmphasizing typography is not about reducing an interface to only text. Good type is about appreciating the ability of type to create impact, hierarchy, direction, and rhythm though size and weight. Diogo Terror described the power of a typographic approach to UI well in Lessons from Swiss Style Graphic Design: “Font-size is a tool for readability, impact and rhythm. Different font-sizes not only generate visual impact, but also provide readers with a hint about the hierarchy of the presented data. Huge words are the entry points, the top-level elements in the content’s information architecture and page’s hierarchy. This is a very efficient way of guiding the reader’s eyes through the page, thus working as an interface to the content.”-Diogo Terror
#84: Emphasis on TypographyEmphasizing typography is not about reducing an interface to only text. Good type is about appreciating the ability of type to create impact, hierarchy, direction, and rhythm though size and weight. Diogo Terror described the power of a typographic approach to UI well in Lessons from Swiss Style Graphic Design: “Font-size is a tool for readability, impact and rhythm. Different font-sizes not only generate visual impact, but also provide readers with a hint about the hierarchy of the presented data. Huge words are the entry points, the top-level elements in the content’s information architecture and page’s hierarchy. This is a very efficient way of guiding the reader’s eyes through the page, thus working as an interface to the content.”-Diogo Terror[image: InternationaleJuni-Festwochen 1962 poster by Joseph Muller-Brockmann]
#85: Proportion and Pacing in a design help to tell a story and let it unfold over time.
#86: Proportion and Pacing in a design help to tell a story and let it unfold over time. [image: American Airlines branding by Paul Rand]
#87: The International Style pursued standardization and simplification of iconography so that icons were universally understood. The use of icons today has become so rampant and gratuitous that we’ve lost a lot of common understanding. They are used too often as decorative elements and are losing a lot of communication value.
#88: The International Style pursued standardization and simplification of iconography so that icons were universally understood. The use of icons today has become so rampant and gratuitous that we’ve lost a lot of common understanding. They are used too often as decorative elements and are losing a lot of communication value.
#91: [image:American Airlines redesign concept by Dustin Curtis (@dcurtis)]
#93: [image:Facebook redesign concept]
#94: [image on the left: Windows Mobile 6.5][image on the right: Windows Phone 7]
#95: [image: An example of a Windows Phone 7 3rd party app]
#96: [image: Photoshop.com, 2010]
#97: [image: Nike Better World, http://www.nikebetterworld.com/, 2011]
#98: [image: Popular Science+ magazine app for the iPad, designed by BERG London, 2010]
#99: [image: Flipboard app for iPad]
#100: Allegorically, The International Style in interesting because it rallied against the overuse of ornamentation, embellishment, illustrations, and decoration that was common in graphic design prior to the 1950’s. [video: Michael Beirut describes this breaking of typographic and illustrative bad habits inthe film Helvetica][video link: http://www.youtube.com/watch?v=0i4PHqG4wdw ]
#101: In November Dylan Tweney wrote an article for The Atlantic and Wired.com, which discussed the trend of minimally designed RSS readers such as Flipboard and Instapaper. It’s unfortunate that “Design” has become synonymous with overly graphic and heavily decorated experiences, in the way of content. A design as minimal and polished as Flipboard in fact requires a lot of design attention, and should be highlighted as the best in interactive design today. [article: http://www.theatlantic.com/technology/archive/2010/11/the-undesigned-web/65458/ ]
#102: In November Dylan Tweney wrote an article for The Atlantic and Wired.com, which discussed the trend of minimally designed RSS readers such as Flipboard and Instapaper. It’s unfortunate that “Design” has become synonymous with overly graphic and heavily decorated experiences, in the way of content. A design as minimal and polished as Flipboard in fact requires a lot of design attention, and should be highlighted as the best in interactive design today. [article: http://www.theatlantic.com/technology/archive/2010/11/the-undesigned-web/65458/ ]
#103: In November Dylan Tweney wrote an article for The Atlantic and Wired.com, which discussed the trend of minimally designed RSS readers such as Flipboard and Instapaper. It’s unfortunate that “Design” has become synonymous with overly graphic and heavily decorated experiences, in the way of content. A design as minimal and polished as Flipboard in fact requires a lot of design attention, and should be highlighted as the best in interactive design today. [article: http://www.theatlantic.com/technology/archive/2010/11/the-undesigned-web/65458/ ]
#106: Interaction Designers are relatively central to the creation of interactive experiences. To improve the condition of graphic design in interfaces, we need to make it a higher priority.
#107: Interaction Designers are relatively central to the creation of interactive experiences. To improve the condition of graphic design in interfaces, we need to make it a higher priority. [image: a word cloud from the IxDA 2011 conference in Boulder, CO. Visual design as a topic was not well represented.]
#108: Our field needs more Designers that are classically trained in Graphic Design, that are sensitive to type, color, structure, and communication.
#109: To improve the visual quality of interfaces, visual design has to part of up front product development, just like interaction design. If it is applied at the end of a waterfall process, the opportunity for great visual design in a product is lost.

How Print Design is the Future of Interaction

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to How Print Design is the Future of Interaction (20)

Recently uploaded (20)

How Print Design is the Future of Interaction

Editor's Notes