A presentation given at the Minnesota Magazine & Publications Association. 3 of 4. See also Magazine Cover design, Magazine Design System, and Magazine Design Troubleshooting.

1. EDITORIAL / DESIGN
INTERACTIVE
MMPA 2009 SUMMIT & EXPO
MAY 21, 2009
MMPA 2009 SUMMIT & EXPO 05.21

2. EDITORIAL / DESIGN - INTER ACTIVE
EDITORIAL / DESIGN
INTERACTIVE
n WEB PUBLICATION MODELS
n DIGITAL MEDIA PROPERTIES
n STRUCTURE
n IDENTITY
n NAVIGATION
n EXPERIENCE
MMPA 2009 SUMMIT & EXPO 05.21

3. EDITORIAL / DESIGN - INTER ACTIVE
WEB PUBLICATION
MODELS:
WHICH ONE ARE YOU?
n STATIC
n CHRONOLOGICAL
n DYNAMIC
MMPA 2009 SUMMIT & EXPO 05.21

4. EDITORIAL / DESIGN - INTER ACTIVE
WEB PUBLICATION MODELS
static pages
server space and ftp
connection software.
requires some html
knowledge by the
designer/editor.
BBedit, Dreamweaver.
MMPA 2009 SUMMIT & EXPO 05.21

5. EDITORIAL / DESIGN - INTER ACTIVE
WEB PUBLICATION MODELS
static pages
server space and ftp
connection software.
requires some html
knowledge by the
designer/editor.
BBedit, Dreamweaver.
MMPA 2009 SUMMIT & EXPO 05.21

6. EDITORIAL / DESIGN - INTER ACTIVE
WEB PUBLICATION MODELS
chronological pages (blog)
server space, database
set-up and blogging
platform (wordpress,
movabletype, typepad
etc.).
requires knowledge of
the blogging system.
knowledge of css/html is
helpful.
MMPA 2009 SUMMIT & EXPO 05.21

7. EDITORIAL / DESIGN - INTER ACTIVE
WEB PUBLICATION MODELS
chronological pages (blog)
server space, database
set-up and blogging
platform (wordpress,
movabletype, etc.).
requires knowledge of
the blogging system.
knowledge of html is
helpful.
MMPA 2009 SUMMIT & EXPO 05.21

8. EDITORIAL / DESIGN - INTER ACTIVE
WEB PUBLICATION MODELS
dynamic pages
server space, database
set-up, and content
management system
(drupal, joomla,
coldfusion).
requires programmers
knowledge of CMS.
MMPA 2009 SUMMIT & EXPO 05.21

9. EDITORIAL / DESIGN - INTER ACTIVE
WEB PUBLICATION MODELS
dynamic pages
server space, database
set-up, and content
management system
(drupal, joomla,
coldfusion).
requires programmers
knowledge of CMS.
MMPA 2009 SUMMIT & EXPO 05.21

10. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA
PROPERTIES:
ALL WEBSITE CONTENT SHOULD BE
n SEARCHABLE
n CUSTOMIZABLE
n FLEXIBLE
n EXPANDABLE
MMPA 2009 SUMMIT & EXPO 05.21

11. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
searchable
valid html
MMPA 2009 SUMMIT & EXPO 05.21

12. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
searchable
valid html
page title
MMPA 2009 SUMMIT & EXPO 05.21

13. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
searchable
valid html
page title
headings <h1></h1>
MMPA 2009 SUMMIT & EXPO 05.21

14. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
searchable
valid html
page title
headings
meta tags
MMPA 2009 SUMMIT & EXPO 05.21

15. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
searchable
valid html
page title
headings
meta tags
alt tags
MMPA 2009 SUMMIT & EXPO 05.21

16. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
searchable
valid html
page title
headings
meta tags
alt tags
MMPA 2009 SUMMIT & EXPO 05.21

17. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
searchable
valid html
page title
headings
meta tags
alt tags
css-design
MMPA 2009 SUMMIT & EXPO 05.21

18. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
searchable
valid html
page title
headings
meta tags
alt tags
css-design
links
MMPA 2009 SUMMIT & EXPO 05.21

19. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
customizable
text resize
MMPA 2009 SUMMIT & EXPO 05.21

20. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
customizable
text resize
translate
MMPA 2009 SUMMIT & EXPO 05.21

21. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
flexible
copy
MMPA 2009 SUMMIT & EXPO 05.21

22. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
flexible
copy & paste
MMPA 2009 SUMMIT & EXPO 05.21

23. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
flexible
copy & paste
multiple channels
MMPA 2009 SUMMIT & EXPO 05.21

24. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
flexible
copy & paste
multiple channels
MMPA 2009 SUMMIT & EXPO 05.21

25. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
flexible
copy & paste
multiple channels
MMPA 2009 SUMMIT & EXPO 05.21

26. EDITORIAL / DESIGN - INTER ACTIVE
DIGITAL MEDIA PROPERTIES
expandable
design adjusts to
the content
MMPA 2009 SUMMIT & EXPO 05.21

27. EDITORIAL / DESIGN - INTER ACTIVE
STRUCTURE:
BUILD A SOUND CONSTRUCTION
n INFORMATION ARCHITECTURE
n GRID
MMPA 2009 SUMMIT & EXPO 05.21

28. EDITORIAL / DESIGN - INTER ACTIVE
STRUCTURE:
INFORMATION ARCHITECTURE
n ORGANIZE THE CONTENT OF YOUR WEBSITE
ACCORDING TO USER NEEDS NOT THE
ORGANIZATION OF YOUR PRINT PUBLICATION.
n MOST PRINT PUBLICATIONS ARE ORGANIZE THE SAME
WAY. TOC, FEATURE ARTICLES, COLUMNS,
DEPARTMENTS, LETTERS, MARKETPLACE, ETC.
n USERS TEND TO LOOK FOR TOPICS, THEMES,
RESOURCES, FEATURES.
MMPA 2009 SUMMIT & EXPO 05.21

29. EDITORIAL / DESIGN - INTER ACTIVE
STRUCTURE: I. A.
print
organize content based on
user needs
PPA 2009 ANNUAL CONVENTION 02.28

30. EDITORIAL / DESIGN - INTER ACTIVE
STRUCTURE: I. A.
web
organize content based on
user needs
PPA 2009 ANNUAL CONVENTION 02.28

31. EDITORIAL / DESIGN - INTER ACTIVE
STRUCTURE: I. A.
web
organize content based on
user needs
PPA 2009 ANNUAL CONVENTION 02.28

32. EDITORIAL / DESIGN - INTER ACTIVE
STRUCTURE: I. A.
web
topics
themes
resources
features
PPA 2009 ANNUAL CONVENTION 02.28

33. EDITORIAL / DESIGN - INTER ACTIVE
STRUCTURE: I. A.
l.a.t.c.h.
location
alphabet
time
category
hierarchy
l.a.t.c.h. credit - richard saul wurman
PPA 2009 ANNUAL CONVENTION 02.28

34. EDITORIAL / DESIGN - INTER ACTIVE
STRUCTURE:
GRIDS… USE ‘EM
n A GRID IS A GRID NO MATTER IF ITS IN PRINT
OR ON THE SCREEN.
n IT HELPS CREATE HIERARCHY AND ORGANIZATION
THROUGHOUT THE WEBSITE.
n THE GRID SHOULD BE FLEXIBLE ENOUGH TO BE USED
WITH ALL THE DIFFERENT SECTIONS OF YOUR
WEBSITE.
MMPA 2009 SUMMIT & EXPO 05.21

35. EDITORIAL / DESIGN - INTER ACTIVE
STRUCTURE: GRID
homepage
PPA 2009 ANNUAL CONVENTION 02.28

36. EDITORIAL / DESIGN - INTER ACTIVE
STRUCTURE: GRID
section opener
PPA 2009 ANNUAL CONVENTION 02.28

37. EDITORIAL / DESIGN - INTER ACTIVE
STRUCTURE: GRID
article page
PPA 2009 ANNUAL CONVENTION 02.28

38. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY:
IT’S VISUAL & EXPERIENTIAL
n LOGO
n TYPOGRAPHY
n COLOR
n IMAGERY
MMPA 2009 SUMMIT & EXPO 05.21

39. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY:
ROTATING LOGOS ARE SO 1998
n USE THE SAME LOGO AS PRINT
n OR A VARIATION THAT IS DIFFERENT ONLY IN
ORIENTATION AND SIZE.
n TYPEFACE AND COLOR SHOULD MATCH PRINT.
n TAGLINES SHOULD BE REPEATED AS WELL.
MMPA 2009 SUMMIT & EXPO 05.21

40. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY: LOGOTYPE
Tufts Magazine
PPA 2009 ANNUAL CONVENTION 02.28

41. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY:
SANS-SERIF FONTS RULES
n USE WEB STANDARD FONTS FOR ALL TYPE.
n EXCEPTIONS WOULD BE THE LOGOTYPE AND GLOBAL
NAVIGATION TO ENHANCE BRAND.
n FORMAT TYPE PROPERLY WITH CSS MEASUREMENTS OF
EMS AND %.
MMPA 2009 SUMMIT & EXPO 05.21

42. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY: TYPOGRAPHY
wired.com
PPA 2009 ANNUAL CONVENTION 02.28

43. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY: TYPOGRAPHY
typetester.org
PPA 2009 ANNUAL CONVENTION 02.28

44. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY:
WEB COLORS ARE FREE
n STICK TO A DEFINED COLOR PALETTE.
n USE COLOR TO COMMUNICATE AN IDENTITY
n AND TO ORGANIZE INFORMATION.
MMPA 2009 SUMMIT & EXPO 05.21

45. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY: COLOR
minnesotamonthly.com
communicate identity
organize information
PPA 2009 ANNUAL CONVENTION 02.28

46. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY: COLOR
kuler.com
PPA 2009 ANNUAL CONVENTION 02.28

47. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY:
IMAGES ARE NOT FREE… SOME ARE
n THE WAY YOU WORK WITH IMAGERY SAYS AS MUCH
ABOUT YOUR VISUAL IDENTITY AS YOUR USE OF TYPE
AND COLOR.
n BE CAREFUL OF OVERUSING STOCK. IT’S MORE
VISIBLE ONLINE THAN IN PRINT.
n CONSIDER SLIDESHOWS AND/OR VIDEO AS EXPANDED
ONLINE CONTENT.
MMPA 2009 SUMMIT & EXPO 05.21

48. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY: IMAGERY
YouTube
Vimeo
FlickrVideo
Slideshare
PPA 2009 ANNUAL CONVENTION 02.28

49. EDITORIAL / DESIGN - INTER ACTIVE
IDENTITY: IMAGERY
creative commons
on flickr.com
PPA 2009 ANNUAL CONVENTION 02.28

50. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION:
CLICK ME, CLICK ME
n THE SIMPLE TEST
n TYPES
n VISUAL CLUES
n CONVENTIONS
MMPA 2009 SUMMIT & EXPO 05.21

51. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION:
THE SIMPLE TEST
n WHERE AM I
n WHAT’S HERE
n WHERE CAN I GO
n WHERE HAVE I BEEN
MMPA 2009 SUMMIT & EXPO 05.21

52. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION: TYPES
tufts.edu/alumni/magazine
PPA 2009 ANNUAL CONVENTION 02.28

53. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION
TYPES OF TYPE
n GLOBAL. CLEARLY DEFINE THE GLOBAL NAVIGATION TO
GET USERS TO THE MAIN SECTIONS OF YOUR WEBSITE
NO MATTER WHERE THEY ENTER THE WEBSITE.
n LOCAL. CONTAINS LINKS TO CONTENT RELEVANT TO
THE SECTION.
n CONTEXTUAL. THESE ARE EMBEDDED IN THE CONTENT
OF THE PAGE. LINK FROM DESCRIPTIVE WORDS AND
PHRASES NOT THE UBIQUITOUS “CLICK HERE.”
MMPA 2009 SUMMIT & EXPO 05.21

54. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION: TYPES
global
links to the global sections
local
links within a global
section
contextual
links within the content
PPA 2009 ANNUAL CONVENTION 02.28

55. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION:
HOW ABOUT A VISUAL CLUE
n MYSTERY. NAVIGATION SHOULDN’T BE: HIDDEN,
DIFFICULT TO FIND, OR INAPPROPRIATELY PLAYFUL.
n VISUAL HIERARCHIES. COLOR, POSITION, SIZE, AND
SHAPE HELP USERS COMPREHEND STRUCTURE &
MAKE CHOICES.
n LABELS. NAVIGATION SHOULD BE CLEARLY LABELED.
MMPA 2009 SUMMIT & EXPO 05.21

56. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION:
I NEED ANOTHER VISUAL CLUE
n ICONS. DON’T ALWAYS TRANSLATE WELL ACROSS
CULTURES & EXPERIENCES. ADD TEXT LABELS TO ICONS.
n OPTIONS. TOO MANY OR TOO FEW OPTIONS CAN BE
CONFUSING.
n HELP. IF YOU HAVE TO PUT A NOTE SUCH AS “NEED
HELP NAVIGATING THE SITE” YOU’VE FAILED AS A
WEB DESIGNER.
MMPA 2009 SUMMIT & EXPO 05.21

57. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION: VISUAL CLUES
ckamanagement.com
don’t hide navigation
PPA 2009 ANNUAL CONVENTION 02.28

58. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION: VISUAL CLUES
harley-davidson.com
color as a visual clue
PPA 2009 ANNUAL CONVENTION 02.28

59. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION: VISUAL CLUES
yahoo.com
use labels with icons
PPA 2009 ANNUAL CONVENTION 02.28

60. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION: VISUAL CLUES
yahoo.com
use labels with icons
PPA 2009 ANNUAL CONVENTION 02.28

61. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION: VISUAL CLUES
teacherxpress.com
too many options can
be confusing
PPA 2009 ANNUAL CONVENTION 02.28

62. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION:
CONVENTIONS
n CONTACT & ABOUT. USERS EXPECT TO SEE CONTACT
AND ABOUT US LINKS.
n SEARCH.
n LOGO LINK. THE LOGO IS THE LINK TO THE HOMEPAGE.
MMPA 2009 SUMMIT & EXPO 05.21

63. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION: CONVENTIONS
tufts.edu/alumni/magazine
contact us. even if the
contact is just a list of
email addresses.
PPA 2009 ANNUAL CONVENTION 02.28

64. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION: CONVENTIONS
minnesotamonthly.com
search. some users
start there.
PPA 2009 ANNUAL CONVENTION 02.28

65. EDITORIAL / DESIGN - INTER ACTIVE
NAVIGATION: CONVENTIONS
wired.com
logo is the home link
PPA 2009 ANNUAL CONVENTION 02.28

66. EDITORIAL / DESIGN - INTER ACTIVE
EXPERIENCE
A succesful user experience is created when
content and design come together to provide a
well-written, designed, and constructed website
that provides users with the means to gain new
knowledge and/or share their own knowledge.
MMPA 2009 SUMMIT & EXPO 05.21

67. EDITORIAL / DESIGN - INTER ACTIVE
EXPERIENCE
Content is King
MMPA 2009 SUMMIT & EXPO 05.21

68. EDITORIAL / DESIGN - INTER ACTIVE
EXPERIENCE
Content is King
Usability is Queen
MMPA 2009 SUMMIT & EXPO 05.21

69. EDITORIAL / DESIGN - INTER ACTIVE
EXPERIENCE
Sometimes the Queen wins
MMPA 2009 SUMMIT & EXPO 05.21

70. EDITORIAL / DESIGN - INTER ACTIVE
LINKS
http://delicious.com/chrisstcyr/mmpa09
…THANK YOU.
MMPA 2009 SUMMIT & EXPO 05.21