With print publishers increasingly being pushed online the design department is being forced to adapt and manage across multiple mediums. This talk tries to identify common mistakes and differences between the mediums and tries to get designers to think seriously about how best to carry brands onto the internet.

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