This document discusses how interaction designers currently use PDF portfolios that do not showcase interactivity, which is counterintuitive. It proposes redesigning the interaction design portfolio to be fully interactive and portray the roles of an interaction designer through visual design, information architecture, usability, copywriting, and delighting the user. The redesigned portfolio would use in-line interactions and mockups to demonstrate projects in their original context while keeping the user on the site. The goal is to correctly showcase interaction design and make the portfolio experience interactive.

1. PORTFOLIOS ON THE WEB

2. These days, creatives
in every field have
online portfolios.

3. Illustration
Art
Landscape Design
Architecture
Industrial Design

4. Photography
Motion Graphics
Graphic Design
Copywriting
Interaction Design

5. Photography
Motion Graphics
Graphic Design
Copywriting
Interaction Design

6. IDEAL MEDIA

7. Each design discipline has
an ideal medium, the one
in which the work was
meant to be seen.

8. Photography
Motion Graphics
Graphic Design
Copywriting
Interaction Design

9. Image
Motion Graphics
Graphic Design
Copywriting
Interaction Design

14. Image
Motion Graphics
Graphic Design
Copywriting
Interaction Design

15. Image
Video
Graphic Design
Copywriting
Interaction Design

22. Image
Video
Graphic Design
Copywriting
Interaction Design

23. Image
Video
Image
Copywriting
Interaction Design

30. Image
Video
Image
Copywriting
Interaction Design

31. Image
Video
Image
Text / Image / Video
Interaction Design

35. Image
Video
Image
Text / Image / Video
Interaction Design

36. Image
Video
Image
Text / Image / Video
Interactive Media

41. WAIT, WHAT?

42. Image
Video
Image
Text / Image / Video
Interactive Media

43. Image
Video
Image
Text / Image / Video
Image?

48. THIS IS A PDF FILE

49. The work is interactive,
but you can’t interact
with the work itself.

50. SQUANDERED POTENTIAL

51. The irony is that
Interaction Design is
most suited for the
web, yet uses the least
appropriate medium.

58. The interactions, gestures,
info architecture, experience,
and many other aspects of the
design are ignored.

59. It doesn’t have to
be this way.

60. REDESIGNING THE
INTERACTION DESIGN
PORTFOLIO

61. OBJECTIVE

62. Rethink the way we portray
the role of interaction
designers, and the way we
present interaction design.

64. CRITERIA

65. It must correctly portray the
roles of an interaction designer.

66. It must correctly portray the
roles of an interaction designer.
It must cater to professionals
as well as laymen.

67. It must correctly portray the
roles of an interaction designer.
It must cater to professionals
as well as laymen.
It must be interactive.

68. At first, this project was
meant to be more of an
educational site, but now
it’s a pure portfolio.

69. HOW TO SHOW
THE ROLES OF AN
INTERACTION DESIGNER

70. Visual Design
Information Architecture
Usability
Copy
Delighting the User

71. Visual Design
Information Architecture
Usability
Copy
Delighting the User

73. Visual Design
Information Architecture
Usability
Copy
Delighting the User

74. Gamify

75. bad good

76. In-line Interactive Project

77. Visual Design
Information Architecture
Usability
Copy
Delighting the User

80. Visual Design
Information Architecture
Usability
Copy
Delighting the User

82. “The design must be
tailored to a certain subset
of people. For instance, you
are from New York, using
Chrome on a Mac.”

83. Visual Design
Information Architecture
Usability
Copy
Delighting the User

88. IN-LINE INTERACTION

89. One of the best ways to
present design work is to
visit the original context
pros: context, full experience
con: you have to leave the site

93. In-line

94. jQ mockup

98. joelcalifa.com/inlinetest

101. DESIGN IS A PROCESS

102. Market Research
Wireframing
Usability Testing
Iteration
etc.

103. You can learn a lot about
designers through their
design process.

109. The final portfolio
will include details
about my process

110. RECAP

111. Interaction Design isn’t
presented in the best way.

112. I want to make this better,
using my portfolio as a test.

113. I’ll do this by creating an
actually interactive portfolio.

114. and by presenting many of
my roles as a designer.

115. It’s going to be pretty rad.

116. FIN.