From Print to Digital Design
2 likes1,859 views
The document discusses the evolution and transformation from print to digital design, highlighting the differences, challenges, and necessary adaptations in design philosophy. It emphasizes the shift from controlling narratives in print to accommodating user behavior and control in digital media, urging designers to embrace this change for successful online experiences. The author offers practical steps for organizations to transition effectively into the digital landscape.
From Print to Digital Design
- 1. 1 From Print to Digital Design: What’s Different, What’s Essential and How to Get There in Three Easy Steps Andrew Duck APC 2009
- 2. 2 What did you signup for? A brief look at the impact of the web on print How organisations and their print designers should respond to this change
- 3. 3 What isn’t covered? Why you should invest in the web Technical aspects of design An actual demonstration
- 4. 4 What is print and digital design? “Web design is the skill of creating presentations of content that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software...” “...Web design is similar (in a very simplistic way) to traditional print publishing.” - Wikipedia, June 2009.
- 5. 5 Graphic design “The term graphic design can refer to a number of artistic and professional disciplines which focus on visual communication and presentation.” - Wikipedia, June 2009.
- 6. 6 History of design Graphic design as a discipline has a relatively recent history Graphic design-like activities have spanned the history of humankind 19th century Computers
- 7. 7 So where are we now? 2009 20 years on from invention of web x years on from mainstream web adoption
- 8. 8 What do I have to learn? Looking for a simple, tactical list of hands-on skills necessary
- 9. 9 Adobe Flash Print designers are drawn to flash first, it is the closest approximation of print design work Can control typeface Flash has it’s place High degree of control over spatial layout Unfortunately leads to assumption authorial Emphasis on visual invention control can be exerted online. Easy to animate static graphic design conventions
- 10. 10 History
- 11. 11 Media fragmentation in the 1940s Radio Newspaper Magazine Cinema Theatre Poster
- 12. 12 Media fragmentation in the 2000s Radio Tape Laserdisc Smartphone Newspaper Satellite DVD Satellite RSS Magazine CD Quicktime Radio Flickr Cinema Walkman Internet HDTV BitTorrent Theatre Video Game Email BluRay YouTube Poster PC Webcam iTunes Wikipedia TV VCR TiVo Podcasting Joost Long Play Mobile Phone PDA Blogging
- 13. 13 Media fragmentation in 2009 Everything we already mentioned.... PLUS Twitter FriendFeed Facebook Scribd LinkedIn iReport Dell IdeaStation
- 14. 14
- 15. 15 So what does an organisation do?
- 16. 16 Stop
- 17. 17 “Looking for opportunities to execute the sort of improvisational and dramatic creative visions that we see in printed periodicals, for instance, is likely to become an exercise in disappointment” - Khoi Vinh, Design Director, New York Times
- 18. 18 Why the web? Why are you using the web? Are you treating it as “print-in-disguise”? Do you have a budget for it? What does web really mean to your business?
- 19. 19 Web is still an afterthought Small budget Logical extension of existing print marketing Just repurpose and slap it up on the web... are you kidding?
- 20. 20 Reflexive Approach Traditionally, designers try to apply a print mentality online fixing type sizes specifying typefaces ignoring usability and expediency Assuming users will adopt a print-focused way of consuming content
- 21. 21 Snap! It didn’t work. Eventually you realise there is very little room for visual virtuosity online Web is simply not effective for highly expressive visual skills
- 22. 22 “The definition of insanity is doing the same thing over and over again and expecting different results.” - Albert Einstein
- 23. 23 Stop, take note. So it didn’t work previously. To change you first have to understand why
- 24. 24 Let Go
- 25. 25 “The medium is the message.” - Marshall McLuhan (1911 - 1980)
- 26. 26 The medium is different HTML, CSS and Flash are useless unless you shift your thinking So what changed? What is design?
- 27. 27 Narratives Historically we have defined good design as solutions that also tell good stories. There is fine-tuned management of every element One-way communication of information from the author to the audience CONTROL
- 28. 28 Control If narrative is the guiding principle of traditional design, then control is its most important tool.
- 29. 29 How does this apply to digital? The guiding principle of interactive or digital media is not narrative - it’s behaviour. Designing for behaviour means transferring some measure of control from author to user. Digital media is taking control away from designers.
- 30. 30 Designer point-of-view “Designers must control the communication, because we know what we’re doing.” “If we give people what they say they want, they’ll never get what we know they need.”
- 31. 31 This is not new For more than a decade users have rejected techniques designers have used to exert control in digital media: Typographical Linking a sites functionality exclusively to a “This site is best viewed with Cooper Black. proprietary technology such as Internet Please download it and install it before viewing” Explorer or Adobe Flash Rendering text as images instead of as HTML Resizing browser windows or launching child windows
- 32. 32 No value If user control trumps all, aren’t we saying that design has no value? No, of course not, but to understand why we first have to understand behaviours
- 33. 33 Print What can you do with print? Read it Mark it The design is interlaced with the content, the Cut it out designer in the end retains control over this media. Photocopy it In each case it’s difficult to separate the text from its presentation.
- 34. 34 Online What can you do with text online? Enlarge it Click on it Quote it Rollover it Edit it Change typeface Read it via other formats (RSS for example, free of presentational layers) Have it read by a screen reader Comment on it Re-publish it
- 35. 35 Uh oh. In digital media, presentation and content are separable. This is especially true of content management systems. The designer has seemingly lost control. This isn’t actually bad.
- 36. 36 Where is the control? This interpretation of a loss of control is infact a multiplicity of states. Content lives free of design. The challenge has changed. Now there are more states to design. The user also demands a certain amount of control over these states.
- 37. 37 Still employed? I hope so, the designer still has a job to do How does the content behave in each of these possible states? What is the overall experience of the user? UCD (user-centered design) has existed for quite some time, but now we are extending this to design behaviours and experiences, an immersion in the media.
- 38. 38 What are we designing again?
- 39. 39 Digital media Digital media is as different from print as speech is different from a conversation They are both exchanges of information between people. But one is a controlled environment and the other is uncontrolled.
- 40. 40 It looks like writing Digital media looks like writing, but it is infact conversation Instant messaging Email Bulletin boards Blogs Meta-sites (digg, twitter) - tagging, links, micro commenting Traditional journalism becomes a framework for conversation
- 41. 41 Media evolution The tension between print and digital is emblematic of a long-running pattern of media evolution. There is often a struggle between documents and conversations. Good narrative gives rise to good conversation. This push and pull is essential to media evolution. Documents and conversations are not mutually exclusive. They are inherently dependent upon one another.
- 42. 42 Giving up control Working on the web requires designers to give up the very things they are meant to control page size alignment fonts colors
- 43. 43 “The ratio of constraints to possibilities is far less kind in digital media, and understanding these constraints – understanding how to finesse them and how to subvert them appropriately – requires an attention to detail that bores all but the most dedicated.” - Khoi Vinh, Design Director, New York Times
- 44. 44 Constraints Ratio of constraints to possibilities A need to understand constraints and embrace them
- 45. 45 Designing for the unknown Typography Browsers Monitor resolutions Operating systems Colour calibration (no CMYK) Mobile devices Accessibility Javascript Usability Flash Connection speed Quicktime / Windows Media
- 46. 46 “Web design is not a method for implementing narrative, as it is in print, but rather a method for making behaviours possible.” - Khoi Vinh, Design Director, New York Times
- 47. 47 Sweat the small stuff Online is about the small details The building blocks of a large cohesive platform
- 48. 48 The fold There is no fold Horizontal scrolling is bad The web is both 1 and n dimensional
- 49. 49 1 & and the n th dimension Print design is 2-dimensional The web is simultaneously both 1- and n- dimensional The n-dimension provides navigation A web page is a scrolling experience as opposed to a canvas experience In print, this is turning a page, very simplistic Fixed positioning goes against the nature of Online, much more complex relationships and HTML requirements are formed 2-dimensional relationships are of lesser importance than 1-dimensional (what’s first, what’s later)
- 50. 50 Trust Online trust is key 7 seconds, 8.6 seconds or 0.07 seconds Visual appeal is a leading trust factor
- 51. 51 Experiment?
- 52. 52 Anticipate changes Expect content to change - unlike print, this is possible
- 53. 53 Deep linking is a reality Search engines will deposit visitors at any page on your site
- 54. 54 Be consistent Websites are an entity Unlike print which is ever-changing and stands on its own Users don’t like change (navigation & design)
- 55. 55 Could it get more complex? IE.. oh and IE 6 There are no circles Columns Variable opacity Semantic Rounded corners Web standards Bandwidth Indexing Make everything a graphic Contrast
- 56. 56 It’s still experimental Having celebrated 20 yrs of the world wide web this year we realised it’s all still experimental Explosive growth, very little consolidation, standards debates and a print mentality
- 57. 57 Step 4.
- 58. 58 Transcend
- 59. 59 “Everything we know about web design is all we know about print design” -
- 60. 60 Concept 1 - Form will follow function That’s what people say about print Unfortunately it’s not true, the more accurate would be “form follows function, as long as it’s really pretty” This looser interpretation has dominated the web for the past decade. Due to the utilitarian nature of the web its essential that form follows function
- 61. 61 Experiences Print communications blast generic messages The number of viewers or readers, which has to clumsily defined masses of readers, but unfortunately carried across to the web. online experiences come down to a single user, the context they create and the satisfaction of People will continue to pay for impressions, but their individual goals eventually profits will depend on satisfying the goals and needs of the most important users Older mediums tend to have more general goals (increased reach, to be informed) How web design looks doesn’t determine how well it will work, aesthetics are important but Due to the brute force nature of the older they are a means to an end, just a tool used in mediums, measuring success has come down order to achieve success. to sheer numbers.
- 62. 62 Concept 2 - Content will run wild Print design is all about control Both intentional and accidental forces explode this carefully crafted work into disaggregated In print, contrast creates hierarchy; eye chunks of content movement defines how people interact with content Plenty of organisations are still wasting time trying to fight, rather than embrace, the realities More online users are abandoning creator- of online content distribution controlled environments Legal wrangling will surely continue, but lawsuits Print newspapers continue to dictate how and will only control profits, not usage. where people read stories
- 63. 63 Concept 3 - Will depend on liquid content CSS has taken over the presentation layer Mashups accelerating Disparate data sources
- 64. 64 Concept 4 - leverage unique distribution Stop using the web as a billboard
- 65. 65 Where to go? Master the visual Start designing for specific users or needs Embrace your ignorance Don’t be distracted by business models that don’t begin and end with real users and their goals, needs ior desires. Don’t be distracted by technology or technologists Don’t be distracted by failure
- 66. 66 Review Step 1 - STOP Step 2 - LET GO Step 3 - EXPERIMENT Step 4 - TRANSCEND
- 67. 67 Thoughts The principles of good storytelling still apply - with adjustment. There is a compromise between user control People are looking for narrative design to be and designer intention, we just haven’t reached expressed in a language that’s native to digital the sweet spot yet. media. As our tools enable more control, the Users want to retain control over their own expectation for greater control will increase – for experiences. users and designers. Users also want their experiences to be guided and clear.
- 68. 68 Thanks Andrew Duck andrew.duck@quiqcorp.com