2012 Interactive Design Trends

1. Interactive Design Trends
April 12, 2012

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. Evolving Communications Channel
Multi- New Digital Interactive
Media Media Media Media
DATE CLIENT
April 12, 2012 Baptist Communicators

4. Designing for Print is not the same as
designing for Web
Different sets of constraints.
DATE CLIENT
April 12, 2012 Baptist Communicators

5. Print Design vs. Web Design
Similarities are universal principles of design:
• Typography
• Visual hierarchy
• Color
• Balance
• Composition
DATE CLIENT
April 12, 2012 Baptist Communicators

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 display
DATE CLIENT
April 12, 2012 Baptist Communicators

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 device
DATE CLIENT
April 12, 2012 Baptist Communicators

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
content
DATE CLIENT
April 12, 2012 Baptist Communicators

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 each
DATE CLIENT
April 12, 2012 Baptist Communicators

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 browser
DATE CLIENT
April 12, 2012 Baptist Communicators

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. Types of Interactive Media
• Social Media
• Mobile
• Texting
• Mobile Websites
• Applications
• Websites
• Email
• Internet Video
• Interactive Television
• Mall Kiosks
• Video Games
DATE CLIENT
April 12, 2012 Baptist Communicators

13. Types of Interactive Media
• Social Media
• Mobile
• Texting
• Mobile Websites
• Applications
• Websites
• Email
• Internet Video
• Interactive Television
• Mall Kiosks
• Video Games
DATE CLIENT
April 12, 2012 Baptist Communicators

14. Web Design Trends
DATE CLIENT
April 12, 2012 Baptist Communicators

15. Web Design Trends
• One Page Sites
• Animation
• Responsive Design
• Web Fonts
DATE CLIENT
April 12, 2012 Baptist Communicators

16. Web Design Trends
One Page Sites
(Interactive version of Posters)
DATE CLIENT
April 12, 2012 Baptist Communicators

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. 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. Web Design Trends
mosandbows.com.au/
DATE CLIENT
April 12, 2012 Baptist Communicators

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.com
DATE CLIENT
April 12, 2012 Baptist Communicators

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. Web Design Trends
www.evoluxion.com/en
DATE CLIENT
April 12, 2012 Baptist Communicators

23. Web Design Trends
Animation isn’t just Flash anymore
DATE CLIENT
April 12, 2012 Baptist Communicators

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. Web Design Trends
alainrodriguezz.com/
DATE CLIENT
April 12, 2012 Baptist Communicators

26. Web Design Trends
Animation
• The key is to keep it simple; less is more
fat-man-collective.com/hello.php
DATE CLIENT
April 12, 2012 Baptist Communicators

27. Web Design Trends
pro-foods.com/
DATE CLIENT
April 12, 2012 Baptist Communicators

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 to
DATE CLIENT
April 12, 2012 Baptist Communicators

29. Infographics
Water Politics
DATE CLIENT
April 12, 2012 Baptist Communicators

30. Infographics
Static and Animated Infographic
DATE CLIENT
April 12, 2012 Baptist Communicators

31. Web Design Trends
Responsive Web Design
DATE CLIENT
April 12, 2012 Baptist Communicators

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 resolutions
DATE CLIENT
April 12, 2012 Baptist Communicators

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 CSS3
DATE CLIENT
April 12, 2012 Baptist Communicators

34. Web Design Trends
DATE CLIENT
April 12, 2012 Baptist Communicators

35. Web Design Trends
DATE CLIENT
April 12, 2012 Baptist Communicators

36. Web Design Trends
Fonts
DATE CLIENT
April 12, 2012 Baptist Communicators

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 Fonts
DATE CLIENT
April 12, 2012 Baptist Communicators

38. Web Design Trends
DATE CLIENT
April 12, 2012 Baptist Communicators

39. Mobile
DATE CLIENT
April 12, 2012 Baptist Communicators

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
users
DATE CLIENT
April 12, 2012 Baptist Communicators

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 networking
DATE CLIENT
April 12, 2012 Baptist Communicators

42. Mobile
Devices
Other
Tablet
2% 1%
Moible
5%
Share of Connected
Device
Classic Web
92%
DATE CLIENT
April 12, 2012 Baptist Communicators

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,000
DATE CLIENT
April 12, 2012 Baptist Communicators

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. 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 mapping
DATE CLIENT
April 12, 2012 Baptist Communicators

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 connection
DATE CLIENT
April 12, 2012 Baptist Communicators

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
website
DATE CLIENT
April 12, 2012 Baptist Communicators

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. 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. Mobile
Advantages of Apps
• Interactive gaming
• Regular usage/personalization
• Complex calculations or reporting
• Native functionality or processing required
• No connection required – providing offline access
DATE CLIENT
April 12, 2012 Baptist Communicators

51. Online Video
DATE CLIENT
April 12, 2012 Baptist Communicators

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 videos
DATE CLIENT
April 12, 2012 Baptist Communicators

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. Email Messaging
DATE CLIENT
April 12, 2012 Baptist Communicators

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. 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 personalization
DATE CLIENT
April 12, 2012 Baptist Communicators

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 marketing
DATE CLIENT
April 12, 2012 Baptist Communicators

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 message
DATE CLIENT
April 12, 2012 Baptist Communicators

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 linking
DATE CLIENT
April 12, 2012 Baptist Communicators

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 deployment
DATE CLIENT
April 12, 2012 Baptist Communicators

61. Thank You.