Implementing a Design Strategy: Part 2: Print to Web

1,453 views

Published on

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,453
On SlideShare
0
From Embeds
0
Number of Embeds
134
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Implementing a Design Strategy: Part 2: Print to Web

  1. 1. iMPLeMentinG A deSiGn StRAteGy part 2: print to web ppa 2009 annual convention february 28, 2009 ppa 2009 annual convention 02.28
  2. 2. iMPLeMentinG A deSiGn StRAteGy part 2: print to web digital media properties + identity + structure + navigation + eXperience ppa 2009 annual convention 02.28
  3. 3. implementing a design str ategy: web diGitAL MediA PROPeRtieS: all website content should be searchable n customizable n fleXible n eXpandable n ppa 2009 annual convention 02.28
  4. 4. implementing a design str ategy: web identity: it’s visual & eXperiential logo + typography + color + imagery ppa 2009 annual convention 02.28
  5. 5. implementing a design str ategy: web identity: rotating logos are so 1998 use the same logo as print n or a variation that is different only in its n orientation and size. typeface and color should match print. n taglines should be repeated as well. n ppa 2009 annual convention 02.28
  6. 6. implementing a design str ategy: web identity: LOGOtyPe Parents ppa 2009 annual convention 02.28
  7. 7. implementing a design str ategy: web identity: LOGOtyPe parents.com ppa 2009 annual convention 02.28
  8. 8. implementing a design str ategy: web identity: sans-serif fonts rules use web standard fonts for all type. n eXceptions would be the logotype and global n navigation to enhance brand. format type properly with css measurements n of ems and %. piXels are not the best options as they are not resizable in internet eXplorer. ppa 2009 annual convention 02.28
  9. 9. implementing a design str ategy: web identity: tyPOGRAPHy Wondertime ppa 2009 annual convention 02.28
  10. 10. implementing a design str ategy: web identity: tyPOGRAPHy wondertime.com ppa 2009 annual convention 02.28
  11. 11. implementing a design str ategy: web identity: web colors are free sticK to a defined color palette. n use color to communicate an identity n and to organize information. n ppa 2009 annual convention 02.28
  12. 12. implementing a design str ategy: web identity: COLOR Cookie ppa 2009 annual convention 02.28
  13. 13. implementing a design str ategy: web identity: COLOR cookiemag.com ppa 2009 annual convention 02.28
  14. 14. implementing a design str ategy: web identity: images are not free the way you worK with imagery says as much n about your visual identity as your use of type and color. be careful of overusing stocK. it’s more n visible online than in print. be consistent. n ppa 2009 annual convention 02.28
  15. 15. implementing a design str ategy: web identity: iMAGeRy Wondertime ppa 2009 annual convention 02.28
  16. 16. implementing a design str ategy: web identity: iMAGeRy wondertime.com ppa 2009 annual convention 02.28
  17. 17. implementing a design str ategy: web StRUCtURe: build a sound construction information architecture + grid ppa 2009 annual convention 02.28
  18. 18. implementing a design str ategy: web StRUCtURe: information architecture organize the content of your website n according to user needs not the organization of your print publication. most print publications are organize the same n way. toc, feature articles, columns, departments, letters, marKetplace, etc. users tend to looK for topics, themes, n resources, features. ppa 2009 annual convention 02.28
  19. 19. implementing a design str ategy: web StRUCtUReS: i. A. print ppa 2009 annual convention 02.28
  20. 20. implementing a design str ategy: web StRUCtUReS: i. A. web ppa 2009 annual convention 02.28
  21. 21. implementing a design str ategy: web StRUCtUReS: i. A. Cookie ppa 2009 annual convention 02.28
  22. 22. implementing a design str ategy: web StRUCtUReS: i. A. cookiemag.com ppa 2009 annual convention 02.28
  23. 23. implementing a design str ategy: web StRUCtUReS: i. A. Parents ppa 2009 annual convention 02.28
  24. 24. implementing a design str ategy: web StRUCtUReS: i. A. parents.com ppa 2009 annual convention 02.28
  25. 25. implementing a design str ategy: web StRUCtURe: grids… use ‘em a grid is a grid no matter if its in print or on the n screen. it helps create hierarchy and organization n throughout the website. the grid should be fleXible enough to be used n with all the different sections of your website. ppa 2009 annual convention 02.28
  26. 26. implementing a design str ategy: web StRUCtUReS: GRid Family Fun ppa 2009 annual convention 02.28
  27. 27. implementing a design str ategy: web StRUCtUReS: GRid familyfun.com ppa 2009 annual convention 02.28
  28. 28. implementing a design str ategy: web nAViGAtiOn: clicK me, clicK me the simple test + types + visual clues + conventions ppa 2009 annual convention 02.28
  29. 29. implementing a design str ategy: web nAViGAtiOn: the simple test where am i n what’s here n where can i go n where have i been n ppa 2009 annual convention 02.28
  30. 30. implementing a design str ategy: web nAViGAtiOn: tyPeS njfamily.com ppa 2009 annual convention 02.28
  31. 31. implementing a design str ategy: web nAViGAtiOn types of type global. clearly define the global navigation to n get users to the main sections of your website no matter where they enter the website. local. contains linKs to content relevant to n the section. conteXtual. these are embedded in the content n of the page. linK from descriptive words and phrases not the ubiQuitous “clicK here.” ppa 2009 annual convention 02.28
  32. 32. implementing a design str ategy: web nAViGAtiOn: tyPeS wondertime.com ppa 2009 annual convention 02.28
  33. 33. implementing a design str ategy: web nAViGAtiOn: tyPeS wondertime.com ppa 2009 annual convention 02.28
  34. 34. implementing a design str ategy: web nAViGAtiOn: tyPeS wondertime.com ppa 2009 annual convention 02.28
  35. 35. implementing a design str ategy: web nAViGAtiOn: how about a visual clue mystery. navigation shouldn’t be: hidden, n difficult to find, or inappropriately playful. visual hierarchies. color, position, size, and n shape help users comprehend structure & maKe choices. labels. navigation should be clearly labeled. n ppa 2009 annual convention 02.28
  36. 36. implementing a design str ategy: web nAViGAtiOn: i need another visual clue icons. don’t always translate well across n cultures & eXperiences. add teXt labels to icons. options. too many or too few options can be n confusing. help. if you have to put a note such as “need n help navigating the site” you’ve failed as a web designer. ppa 2009 annual convention 02.28
  37. 37. implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS ckamanagement.com ppa 2009 annual convention 02.28
  38. 38. implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS sjb.com.au ppa 2009 annual convention 02.28
  39. 39. implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS njfamily.com ppa 2009 annual convention 02.28
  40. 40. implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS littlerockfamily.com ppa 2009 annual convention 02.28
  41. 41. implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS littlerockfamily.com ppa 2009 annual convention 02.28
  42. 42. implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS craigslist.com ppa 2009 annual convention 02.28
  43. 43. implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS teacherxpress.com ppa 2009 annual convention 02.28
  44. 44. implementing a design str ategy: web nAViGAtiOn: ViSUAL CLUeS projectmiso.com/mainnet.asp ppa 2009 annual convention 02.28
  45. 45. implementing a design str ategy: web nAViGAtiOn: conventions contact & about. users eXpect to see contact n and about us linKs. logo linK. the logo is the linK to the homepage. n search. search fields n ppa 2009 annual convention 02.28
  46. 46. implementing a design str ategy: web nAViGAtiOn: COnVentiOnS hvparent.com ppa 2009 annual convention 02.28
  47. 47. implementing a design str ategy: web nAViGAtiOn: COnVentiOnS cookie.com ppa 2009 annual convention 02.28
  48. 48. implementing a design str ategy: web nAViGAtiOn: COnVentiOnS carolinaparent.com ppa 2009 annual convention 02.28
  49. 49. implementing a design str ategy: web eXPeRienCe: design for behavior assessment of time + scan / search + looK / watch + read / associate / share + respond / discuss / connect websites are active and interactive spaces. readers use them in different ways then a print publication. understanding reader behavior can direct the designed eXperience of an online publication. ppa 2009 annual convention 02.28
  50. 50. implementing a design str ategy: web eXPeRienCe: assessment of time unliKe a print publication websites don’t n immediately provide visual clues to the scope of the website. the thicKness of a booK, the proportion of teXt & image, edit & ad are all clues to the reader about the assessment of time. ppa 2009 annual convention 02.28
  51. 51. implementing a design str ategy: web eXPeRienCe: assessment of time home page. it should answer the Questions of n what is this website and what’s new. it’s the cover – grabs your attention it’s the table of contents – headlines & images, linK to feature articles it’s the indeX – searching for specific information ppa 2009 annual convention 02.28
  52. 52. implementing a design str ategy: web eXPeRienCe: ASSeSSMent OF tiMe The Greatest of All Time: A Tribute to Muhammad Ali ppa 2009 annual convention 02.28
  53. 53. implementing a design str ategy: web eXPeRienCe: ASSeSSMent OF tiMe Bhutan: AVisual Odyssey Across the Last Himalayan Kingdom ppa 2009 annual convention 02.28
  54. 54. implementing a design str ategy: web eXPeRienCe: ASSeSSMent OF tiMe parents.com ppa 2009 annual convention 02.28
  55. 55. implementing a design str ategy: web eXPeRienCe: ASSeSSMent OF tiMe njfamily.com ppa 2009 annual convention 02.28
  56. 56. implementing a design str ategy: web eXPeRienCe: scan / search scanning. does the display teXt and image allow n for scanning? headlines should be: content specific. Keyword n searchable. linK ready. headlines are often taKen out of conteXt of the story and placed in a list of linKs. body teXt. get to the main point of the article in n the first paragraph. ppa 2009 annual convention 02.28
  57. 57. implementing a design str ategy: web eXPeRienCe: SCAn/SeARCH parents.com ppa 2009 annual convention 02.28
  58. 58. implementing a design str ategy: web eXPeRienCe: SCAn/SeARCH parents.com ppa 2009 annual convention 02.28
  59. 59. implementing a design str ategy: web eXPeRienCe: SCAn/SeARCH google.com/reader ppa 2009 annual convention 02.28
  60. 60. implementing a design str ategy: web eXPeRienCe: looK / watch imagery. leave the large high resolution images n for your print publication. for the website use smaller singular images, photo galleries,and slideshows. slideshows and videos with audio immerse the n audience in the content in ways that print can- not. flicKr, slideshare, youtube. ppa 2009 annual convention 02.28
  61. 61. implementing a design str ategy: web eXPeRienCe: LOOK/WAtCH memphisparent.com flickr.com ppa 2009 annual convention 02.28
  62. 62. implementing a design str ategy: web eXPeRienCe: LOOK/WAtCH familyfun.com ppa 2009 annual convention 02.28
  63. 63. implementing a design str ategy: web eXPeRienCe: LOOK/WAtCH youtube.com ppa 2009 annual convention 02.28
  64. 64. implementing a design str ategy: web eXPeRienCe: read / associate / share linKing from within the content of articles n provides a seamless associative connection that replicates thinKing and conversation. conversation is about sharing information. n provide tools to allow users to share your n content. social booKmarKing, postings on facebooK. ppa 2009 annual convention 02.28
  65. 65. implementing a design str ategy: web eXPeRienCe: ReAd/ ASSOCiAte/SHARe parents.com ppa 2009 annual convention 02.28
  66. 66. implementing a design str ategy: web eXPeRienCe: ReAd/ ASSOCiAte/SHARe njfamily.com ppa 2009 annual convention 02.28
  67. 67. implementing a design str ategy: web eXPeRienCe: ReAd/ ASSOCiAte/SHARe njfamily.com ppa 2009 annual convention 02.28
  68. 68. implementing a design str ategy: web eXPeRienCe: ReAd/ ASSOCiAte/SHARe njfamily.com ppa 2009 annual convention 02.28
  69. 69. implementing a design str ategy: web eXPeRienCe: ReAd/ ASSOCiAte/SHARe wilmingtonparent.com ppa 2009 annual convention 02.28
  70. 70. implementing a design str ategy: web eXPeRienCe: ReAd/ ASSOCiAte/SHARe wilmingtonparent.com ppa 2009 annual convention 02.28
  71. 71. implementing a design str ategy: web eXPeRienCe: ReAd/ ASSOCiAte/SHARe wilmingtonparent.com ppa 2009 annual convention 02.28
  72. 72. implementing a design str ategy: web eXPeRienCe: respond / discuss / connect reader commenting, uploading photos, allow n users to become part of the community. allowing you audience to interact with the n content, not Just read it, establishes a connec- tion between writer and audience. this is con- version. the community taKes ownership of the content. n facebooK pages for companies, twitter updates. ppa 2009 annual convention 02.28
  73. 73. implementing a design str ategy: web eXPeRienCe: ReSPOnd/ diSCUSS/COnneCt northernnevadafamily.com ppa 2009 annual convention 02.28
  74. 74. implementing a design str ategy: web eXPeRienCe: ReSPOnd/ diSCUSS/COnneCt twitter.com/indyschild ppa 2009 annual convention 02.28
  75. 75. implementing a design str ategy: web eXPeRienCe: ReSPOnd/ diSCUSS/COnneCt facebook.com search: little rock family ppa 2009 annual convention 02.28
  76. 76. implementing a design str ategy: web USABiLity Usability happens when content and design come together to provide a well-written, designed, and constr ucted website that provides users with the means to gain new knowledge and/or share their own knowledge. ppa 2009 annual convention 02.28
  77. 77. implementing a design str ategy: web LinKS http://delicious.com/chrisstcyr/ppa09 ppa 2009 annual convention 02.28

×