Baptist communicators interactive design trends 2012

1,155 views

Published on

2012 Interactive Design Trends

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

  • Be the first to like this

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

No notes for slide

Baptist communicators interactive design trends 2012

  1. 1. Interactive Design Trends April 12, 2012
  2. 2. Definition of Interactive Media: Normally refers to products and services on digital computer-based systems which respond to the user’s actions by presenting content such as text, graphics, animations, video, audio, etc.DATE CLIENT April 12, 2012 Baptist Communicators
  3. 3. Evolving Communications Channel Multi- New Digital Interactive Media Media Media MediaDATE CLIENT April 12, 2012 Baptist Communicators
  4. 4. Designing for Print is not the same as designing for Web Different sets of constraints.DATE CLIENT April 12, 2012 Baptist Communicators
  5. 5. Print Design vs. Web Design Similarities are universal principles of design: • Typography • Visual hierarchy • Color • Balance • CompositionDATE CLIENT April 12, 2012 Baptist Communicators
  6. 6. Print Design vs. Web Design • Web is interactive and print is not • Print – finished product someone holds in their hands • Web – ever evolving piece viewed on a computer displayDATE CLIENT April 12, 2012 Baptist Communicators
  7. 7. Print Design vs. Web Design Size • With print you have a fixed size output • With web, each page may have different vertical dimensions • With web, different options for width of the web page (fixed or fluid) • What a web site visitor sees is only partially determined by the designer; other variables in play affecting how much of a page viewer sees:  Factors include size of the screen on device accessing content from  Display resolution  Plug-ins (or lack of) installed on the deviceDATE CLIENT April 12, 2012 Baptist Communicators
  8. 8. Print Design vs. Web Design Content • Print content is finalized before printing; layouts can rely on predetermined amount of copy • Web content is ever changing • Web design must accommodate different types/amounts of contentDATE CLIENT April 12, 2012 Baptist Communicators
  9. 9. Print Design vs. Web Design Typography • In print, typographic options are limited only by the font library and imagination of the designer • There are many constraints on web  Consider what fonts are commonly available to most users; backup font will take its place  Back up fonts might have different width or height  There are font embedding options; designers need to know advantages and licensing for eachDATE CLIENT April 12, 2012 Baptist Communicators
  10. 10. Print Design vs. Web Design Browser and Device Limitations • In print, a designer can control the design of each element on a page • On web, the design is rendered in different browsers with different capabilities • A design will not display with 100% similarity across all browsers • A lot of time and extraneous code can go into trying to get cohesiveness (hacking) but load time of the page is impacted; future updates are also more difficult • Time should be spent upfront to ensure that the design is flexible enough to render to best ability of each browserDATE CLIENT April 12, 2012 Baptist Communicators
  11. 11. Print Design vs. Web Design Designing Interaction • Print focuses on communication, aesthetics and concept • Web design must consider the “user experience”  What is the right amount of content to show?  Is the interface intuitive?  Where are the hot-spots for eye traffic on a page  Do the buttons look clickable?  Does the user know where they are or where they are going (“bread crumbs”)?  Does it matter if content is “below the fold”?DATE CLIENT April 12, 2012 Baptist Communicators
  12. 12. Types of Interactive Media • Social Media • Mobile • Texting • Mobile Websites • Applications • Websites • Email • Internet Video • Interactive Television • Mall Kiosks • Video GamesDATE CLIENT April 12, 2012 Baptist Communicators
  13. 13. Types of Interactive Media • Social Media • Mobile • Texting • Mobile Websites • Applications • Websites • Email • Internet Video • Interactive Television • Mall Kiosks • Video GamesDATE CLIENT April 12, 2012 Baptist Communicators
  14. 14. Web Design TrendsDATE CLIENT April 12, 2012 Baptist Communicators
  15. 15. Web Design Trends • One Page Sites • Animation • Responsive Design • Web FontsDATE CLIENT April 12, 2012 Baptist Communicators
  16. 16. Web Design Trends One Page Sites (Interactive version of Posters)DATE CLIENT April 12, 2012 Baptist Communicators
  17. 17. Web Design Trends One Page Site Benefits • Left to right navigation or top to bottom. Viewers consume page in a linear, predictable order. Can tell a story and finish off with desired call to action. Multi-page sites, users can enter at any point in the site. • Simplistic in terms of coding. No repeatable page templates. CMS system not necessary. • Easily incorporates animation. User moving around inside a single page. Animated elements can move from one frame of content to another.DATE CLIENT April 12, 2012 Baptist Communicators
  18. 18. Web Design Trends One Page Sites • A popular technique with single-page sites is the use of sliding elements. • As the user scrolls, some elements of the page slide faster than others and sometimes in different directions (“paralax scrolling”) • Highlight certain elements, transition to the next area, bring life to the content. villainhq.com/matchlings/DATE CLIENT April 12, 2012 Baptist Communicators
  19. 19. Web Design Trends mosandbows.com.au/DATE CLIENT April 12, 2012 Baptist Communicators
  20. 20. Web Design Trends One Page Sites • Dynamically loading content – change the contents of the page based on the actions of the user. • The page dynamically loads up (reveals) the requested content…creating fluid interaction for the user. http://worrydream.comDATE CLIENT April 12, 2012 Baptist Communicators
  21. 21. Web Design Trends One Page Sites • Fixed Navigation – menu fixed in place when the page scrolls. • Navigation is always within clicking range and lets user jump to any section they’re interested in. www.fizzysoftware.com/DATE CLIENT April 12, 2012 Baptist Communicators
  22. 22. Web Design Trends www.evoluxion.com/enDATE CLIENT April 12, 2012 Baptist Communicators
  23. 23. Web Design Trends Animation isn’t just Flash anymoreDATE CLIENT April 12, 2012 Baptist Communicators
  24. 24. Web Design Trends Animation • Flash-based sites are known for animation, transitions and sounds • Can be accomplished with HTML, CSS and JavaScript. • Rich visuals makes it super flashy. www.smallstudio.com.au/DATE CLIENT April 12, 2012 Baptist Communicators
  25. 25. Web Design Trends alainrodriguezz.com/DATE CLIENT April 12, 2012 Baptist Communicators
  26. 26. Web Design Trends Animation • The key is to keep it simple; less is more fat-man-collective.com/hello.phpDATE CLIENT April 12, 2012 Baptist Communicators
  27. 27. Web Design Trends pro-foods.com/DATE CLIENT April 12, 2012 Baptist Communicators
  28. 28. Web Design Trends Animation • Infographics becoming more popular  Able to explain complex concepts  Easy to scan  Easy to understand  Visual  Resonates with current visual communication culture  Informative  Entertaining  More readily shared and linked toDATE CLIENT April 12, 2012 Baptist Communicators
  29. 29. Infographics Water PoliticsDATE CLIENT April 12, 2012 Baptist Communicators
  30. 30. Infographics Static and Animated InfographicDATE CLIENT April 12, 2012 Baptist Communicators
  31. 31. Web Design Trends Responsive Web DesignDATE CLIENT April 12, 2012 Baptist Communicators
  32. 32. Web Design Trends Responsive Web Design (RWD) • Adapts a layout to a viewing environment • Users across a broad range of devices can view the same thing • Helps design a flexible architecture • It guarantees that any website will look good in different screen resolutionsDATE CLIENT April 12, 2012 Baptist Communicators
  33. 33. Web Design Trends Responsive Web Design (RWD) • Used techniques such as flexible grids, fluid images, and media queries (CSS3 orientation) • “Mobile first” philosophy (design based on simple format first) • Problems with IE 6/7/8 do not support CSS3DATE CLIENT April 12, 2012 Baptist Communicators
  34. 34. Web Design TrendsDATE CLIENT April 12, 2012 Baptist Communicators
  35. 35. Web Design TrendsDATE CLIENT April 12, 2012 Baptist Communicators
  36. 36. Web Design Trends FontsDATE CLIENT April 12, 2012 Baptist Communicators
  37. 37. Web Design Trends Fonts • No longer just Helvetica and Arial • WOFF (Web Open Front Font) is becoming standardized format  Backed by Mozilla, Opera and Microsoft  Allows TrueType, OpenType or Open Font Format fonts to be embedded into web pages  WOFF support is built into Firefox 3.6 and above, Google Chrome version 5 and above, Internet Explorer 9 and will be supported in Safari • Font foundries have embraced: Typekit, Webtype, Fonts.com Web Fonts, and Google Web FontsDATE CLIENT April 12, 2012 Baptist Communicators
  38. 38. Web Design TrendsDATE CLIENT April 12, 2012 Baptist Communicators
  39. 39. MobileDATE CLIENT April 12, 2012 Baptist Communicators
  40. 40. Mobile Smartphones Status: • January 2011 – Android surpasses Blackberry to lead smartphone market • By December – 1. Android (47.3%); 2. iPhone (29.6%); 3. Blackberry (16.0%) • Android and iPhone in the hands of 3 in 4 smartphone owners • iPhone debut two additional carriers – Verizon and Sprint • December 2011 – Smartphone penetration reaches 2 in 5 mobile usersDATE CLIENT April 12, 2012 Baptist Communicators
  41. 41. Mobile Smartphones and tablets redefine media consumption: • 3 in 4 feature phone owner texted in 2011 • 3 in 5 used their phone to take pictures • 1 in 4 captured video on their mobile phones • 47.6% accessed applications 47.5% accessed web browser • 41% access email • 35.3% access social networkingDATE CLIENT April 12, 2012 Baptist Communicators
  42. 42. Mobile Devices Other Tablet 2% 1% Moible 5% Share of Connected Device Classic Web 92%DATE CLIENT April 12, 2012 Baptist Communicators
  43. 43. Mobile General Reference Job Listings Top mobile Gaming Information categories 2011 2010 in 2011: Electronic Payment Online Retail Health Information 0 5,000 10,000 15,000 20,000 25,000 30,000 35,000 40,000DATE CLIENT April 12, 2012 Baptist Communicators
  44. 44. Mobile Establishing a mobile presence for your company. Which is better – an App or a Mobile Website?DATE CLIENT April 12, 2012 Baptist Communicators
  45. 45. Mobile Mobile Website • Same as web - Browser-based HTML pages • Designed for smaller handheld display and touch-screen interface • Can display text content, data, images and video • Access mobile-specific features such as click-to-call or location- based mappingDATE CLIENT April 12, 2012 Baptist Communicators
  46. 46. Mobile Mobile Apps • Applications downloaded and installed on mobile device • Users visit device-specific portals such as App Store or Android Market • App may pull content and data from internet or may download content so it can be accessed without an Internet connectionDATE CLIENT April 12, 2012 Baptist Communicators
  47. 47. Mobile Which is Better? Depends on your end goal. • Developing an interactive game – go with an app • Offer mobile-friendly content to wide audience – go with mobile websiteDATE CLIENT April 12, 2012 Baptist Communicators
  48. 48. Mobile Advantages of Mobile Website • Immediacy - Instant availability (no download necessary) • Compatibility – Different mobile devices and easily integrated with QR codes (apps require separate versions for each device) • Upgradability – Can be updated instantly (app changes must be pushed to user) • Findability – Can be found easily thru search results (apps found through stores) • Shareability – Can be shared easily by companies and between users via link (apps can’t be shared this way)DATE CLIENT April 12, 2012 Baptist Communicators
  49. 49. Mobile Advantages of Mobile Website (continued) • Reach – Broader reach across platforms, shared and search engines • LifeCycle – Always available for users to return to them (average shelf-life of an app is less than 30 days according to some research) • Time and Cost – Easier and less expensive (apps take longer and might need to develop multiple apps for different platforms)DATE CLIENT April 12, 2012 Baptist Communicators
  50. 50. Mobile Advantages of Apps • Interactive gaming • Regular usage/personalization • Complex calculations or reporting • Native functionality or processing required • No connection required – providing offline accessDATE CLIENT April 12, 2012 Baptist Communicators
  51. 51. Online VideoDATE CLIENT April 12, 2012 Baptist Communicators
  52. 52. Online Video • Fastest growing online marketing tool • 44% of viewers take action after watching video online • More than 100 million Americans watch online video content on an average day (43% increase since 2010) • 43.5 billion videos were viewed in December 2011 • Average viewer watched 239 videosDATE CLIENT April 12, 2012 Baptist Communicators
  53. 53. Online Video Microsoft Viacom Yahoo Sites, 1.50% Sites, 1.40% Digital, 1.20% Hulu, 1.80% Vevo, 1.80% Share of Content Videos Viewed YouTube, 50.40% Other, 38.30%DATE CLIENT April 12, 2012 Baptist Communicators
  54. 54. Email MessagingDATE CLIENT April 12, 2012 Baptist Communicators
  55. 55. Email Marketing Fun Facts (2011): • 3.146 billion email accounts worldwide • 294 billion emails sent per day • 112 emails sent and received per day by the average corporate user • Microsoft Outlook is the most popular email account (27.6%) • 19% spam emails delivered to corporate mail boxes despite spam filters • $44.25 return on $1 invested in email marketing • 40 years since the first email was sent in 1971 (Ray Tomlinson)DATE CLIENT April 12, 2012 Baptist Communicators
  56. 56. Email Marketing Trends: • Cross-pollination of email with social media • “Trigger” emails driven by online interactions; higher open rates • New email formats better suited to touchscreen generation and more responsive design techniques • Email enables conversation between users and advertisers; expect lower number of “no-reply” email addresses • More “gamification” applications for email; fun and interactive • Leverage database technology and segmentation to target users more accurately; more personalizationDATE CLIENT April 12, 2012 Baptist Communicators
  57. 57. Personalized Video Messaging • The video you received is an example of Personalized Video Messaging. • Deliver personalized video messages via email • Message is personal and relevant • Viewers watch with more attentiveness • Delivers about 2x better click through performance over non- personalized videos • Opportunity for viral marketingDATE CLIENT April 12, 2012 Baptist Communicators
  58. 58. Personalized Video Messaging Healthcare • Patient care follow up • Quarterly healthcare tips • Fund raising Education • Follow up to web inquiry • Reminder to student population • Alumni messaging • Holiday messageDATE CLIENT April 12, 2012 Baptist Communicators
  59. 59. Set-Up • Tape brief introduction and names • Program individual URLs for each name • Produce series of videos • Develop eblast template and landing page template for each video deployment • Develop appropriate web pages for linkingDATE CLIENT April 12, 2012 Baptist Communicators
  60. 60. Deployment Two methods to deploy: • Eblasts through email system such as Constant Contact or Mail Chimp  Batched deployment • Web-based deployment  Individual, at-need  Develop web page for representatives to go for deploymentDATE CLIENT April 12, 2012 Baptist Communicators
  61. 61. Thank You.

×