Web Magazine Design

1,805 views

Published on

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

Published in: Design, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,805
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Web Magazine Design

  1. 1. EDITORIAL / DESIGN INTERACTIVE MMPA 2009 SUMMIT & EXPO MAY 21, 2009 MMPA 2009 SUMMIT & EXPO 05.21
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES searchable valid html MMPA 2009 SUMMIT & EXPO 05.21
  12. 12. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES searchable valid html page title MMPA 2009 SUMMIT & EXPO 05.21
  13. 13. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES searchable valid html page title headings <h1></h1> MMPA 2009 SUMMIT & EXPO 05.21
  14. 14. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES searchable valid html page title headings meta tags MMPA 2009 SUMMIT & EXPO 05.21
  15. 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. 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. 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. 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. 19. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES customizable text resize MMPA 2009 SUMMIT & EXPO 05.21
  20. 20. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES customizable text resize translate MMPA 2009 SUMMIT & EXPO 05.21
  21. 21. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES flexible copy MMPA 2009 SUMMIT & EXPO 05.21
  22. 22. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES flexible copy & paste MMPA 2009 SUMMIT & EXPO 05.21
  23. 23. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES flexible copy & paste multiple channels MMPA 2009 SUMMIT & EXPO 05.21
  24. 24. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES flexible copy & paste multiple channels MMPA 2009 SUMMIT & EXPO 05.21
  25. 25. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES flexible copy & paste multiple channels MMPA 2009 SUMMIT & EXPO 05.21
  26. 26. EDITORIAL / DESIGN - INTER ACTIVE DIGITAL MEDIA PROPERTIES expandable design adjusts to the content MMPA 2009 SUMMIT & EXPO 05.21
  27. 27. EDITORIAL / DESIGN - INTER ACTIVE STRUCTURE: BUILD A SOUND CONSTRUCTION n INFORMATION ARCHITECTURE n GRID MMPA 2009 SUMMIT & EXPO 05.21
  28. 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. 29. EDITORIAL / DESIGN - INTER ACTIVE STRUCTURE: I. A. print organize content based on user needs PPA 2009 ANNUAL CONVENTION 02.28
  30. 30. EDITORIAL / DESIGN - INTER ACTIVE STRUCTURE: I. A. web organize content based on user needs PPA 2009 ANNUAL CONVENTION 02.28
  31. 31. EDITORIAL / DESIGN - INTER ACTIVE STRUCTURE: I. A. web organize content based on user needs PPA 2009 ANNUAL CONVENTION 02.28
  32. 32. EDITORIAL / DESIGN - INTER ACTIVE STRUCTURE: I. A. web topics themes resources features PPA 2009 ANNUAL CONVENTION 02.28
  33. 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. 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. 35. EDITORIAL / DESIGN - INTER ACTIVE STRUCTURE: GRID homepage PPA 2009 ANNUAL CONVENTION 02.28
  36. 36. EDITORIAL / DESIGN - INTER ACTIVE STRUCTURE: GRID section opener PPA 2009 ANNUAL CONVENTION 02.28
  37. 37. EDITORIAL / DESIGN - INTER ACTIVE STRUCTURE: GRID article page PPA 2009 ANNUAL CONVENTION 02.28
  38. 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. 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. 40. EDITORIAL / DESIGN - INTER ACTIVE IDENTITY: LOGOTYPE Tufts Magazine PPA 2009 ANNUAL CONVENTION 02.28
  41. 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. 42. EDITORIAL / DESIGN - INTER ACTIVE IDENTITY: TYPOGRAPHY wired.com PPA 2009 ANNUAL CONVENTION 02.28
  43. 43. EDITORIAL / DESIGN - INTER ACTIVE IDENTITY: TYPOGRAPHY typetester.org PPA 2009 ANNUAL CONVENTION 02.28
  44. 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. 45. EDITORIAL / DESIGN - INTER ACTIVE IDENTITY: COLOR minnesotamonthly.com communicate identity organize information PPA 2009 ANNUAL CONVENTION 02.28
  46. 46. EDITORIAL / DESIGN - INTER ACTIVE IDENTITY: COLOR kuler.com PPA 2009 ANNUAL CONVENTION 02.28
  47. 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. 48. EDITORIAL / DESIGN - INTER ACTIVE IDENTITY: IMAGERY YouTube Vimeo FlickrVideo Slideshare PPA 2009 ANNUAL CONVENTION 02.28
  49. 49. EDITORIAL / DESIGN - INTER ACTIVE IDENTITY: IMAGERY creative commons on flickr.com PPA 2009 ANNUAL CONVENTION 02.28
  50. 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. 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. 52. EDITORIAL / DESIGN - INTER ACTIVE NAVIGATION: TYPES tufts.edu/alumni/magazine PPA 2009 ANNUAL CONVENTION 02.28
  53. 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. 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. 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. 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. 57. EDITORIAL / DESIGN - INTER ACTIVE NAVIGATION: VISUAL CLUES ckamanagement.com don’t hide navigation PPA 2009 ANNUAL CONVENTION 02.28
  58. 58. EDITORIAL / DESIGN - INTER ACTIVE NAVIGATION: VISUAL CLUES harley-davidson.com color as a visual clue PPA 2009 ANNUAL CONVENTION 02.28
  59. 59. EDITORIAL / DESIGN - INTER ACTIVE NAVIGATION: VISUAL CLUES yahoo.com use labels with icons PPA 2009 ANNUAL CONVENTION 02.28
  60. 60. EDITORIAL / DESIGN - INTER ACTIVE NAVIGATION: VISUAL CLUES yahoo.com use labels with icons PPA 2009 ANNUAL CONVENTION 02.28
  61. 61. EDITORIAL / DESIGN - INTER ACTIVE NAVIGATION: VISUAL CLUES teacherxpress.com too many options can be confusing PPA 2009 ANNUAL CONVENTION 02.28
  62. 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. 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. 64. EDITORIAL / DESIGN - INTER ACTIVE NAVIGATION: CONVENTIONS minnesotamonthly.com search. some users start there. PPA 2009 ANNUAL CONVENTION 02.28
  65. 65. EDITORIAL / DESIGN - INTER ACTIVE NAVIGATION: CONVENTIONS wired.com logo is the home link PPA 2009 ANNUAL CONVENTION 02.28
  66. 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. 67. EDITORIAL / DESIGN - INTER ACTIVE EXPERIENCE Content is King MMPA 2009 SUMMIT & EXPO 05.21
  68. 68. EDITORIAL / DESIGN - INTER ACTIVE EXPERIENCE Content is King Usability is Queen MMPA 2009 SUMMIT & EXPO 05.21
  69. 69. EDITORIAL / DESIGN - INTER ACTIVE EXPERIENCE Sometimes the Queen wins MMPA 2009 SUMMIT & EXPO 05.21
  70. 70. EDITORIAL / DESIGN - INTER ACTIVE LINKS http://delicious.com/chrisstcyr/mmpa09 …THANK YOU. MMPA 2009 SUMMIT & EXPO 05.21

×