Baptist communicators interactive design trends 2012

download
  • date post

    27-Jan-2015
  • Category

    Business
  • view

    102
  • download

    0

Embed Size (px)

description

2012 Interactive Design Trends

transcript

  • 1. Interactive Design TrendsApril 12, 2012

2. Definition of Interactive Media: Normally refers to products and services on digital computer-based systems which respond to the users actions by presenting content such astext, graphics, animations, video, audio, etc.DATE CLIENT April 12, 2012 Baptist Communicators 3. Evolving Communications ChannelMulti- NewDigitalInteractiveMediaMediaMediaMediaDATECLIENT April 12, 2012Baptist Communicators 4. Designing for Print is not the same asdesigning for WebDifferent sets of constraints.DATECLIENT April 12, 2012Baptist Communicators 5. Print Design vs. Web Design Similarities are universal principles of design: Typography Visual hierarchy Color Balance CompositionDATECLIENT April 12, 2012Baptist 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 displayDATE 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 deviceDATECLIENT April 12, 2012Baptist 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 contentDATECLIENT April 12, 2012Baptist 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 eachDATECLIENT April 12, 2012Baptist 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 browserDATECLIENT April 12, 2012Baptist 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 GamesDATECLIENT April 12, 2012Baptist Communicators 13. Types of Interactive Media Social Media Mobile Texting Mobile Websites Applications Websites Email Internet Video Interactive Television Mall Kiosks Video GamesDATECLIENT April 12, 2012Baptist Communicators 14. Web Design TrendsDATECLIENT April 12, 2012Baptist Communicators 15. Web Design Trends One Page Sites Animation Responsive Design Web FontsDATE CLIENT April 12, 2012 Baptist Communicators 16. Web Design TrendsOne 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.DATECLIENT April 12, 2012Baptist 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/DATECLIENT April 12, 2012Baptist Communicators 19. Web Design Trendsmosandbows.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 contentcreating fluid interaction for the user. http://worrydream.comDATE 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 theyre interested in. www.fizzysoftware.com/DATECLIENT April 12, 2012Baptist Communicators 22. Web Design Trendswww.evoluxion.com/enDATE CLIENT April 12, 2012 Baptist Communicators 23. Web Design TrendsAnimation isnt just Flash anymoreDATECLIENT April 12, 2012Baptist 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/DATECLIENT April 12, 2012Baptist Communicators 25. Web Design Trendsalainrodriguezz.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.phpDATE 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 toDATE CLIENT April 12, 2012 Baptist Communicators 29. InfographicsWater PoliticsDATECLIENT April 12, 2012Baptist Communicators 30. InfographicsStatic and Animated InfographicDATECLIENT April 12, 2012Baptist Communicators 31. Web Design TrendsResponsive Web DesignDATE 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 resolutionsDATECLIENT April 12, 2012Baptist 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 CSS3DATECLIENT April 12, 2012Baptist Communicators 34. Web Design TrendsDATE CLIENT April 12, 2012 Baptist Communicators 35. Web Design TrendsDATE CLIENT April 12, 2012 Baptist Communicators 36. Web Design TrendsFontsDATE 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 FontsDATE CLIENT April 12, 2012 Baptist Communicators 38. Web Design TrendsDATE CLIENT April 12, 2012 Baptist Communicators 39. MobileDATECLIENT April 12, 2012Baptist 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 usersDATECLIENT April 12, 2012Baptist 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 networkingDATE CLIENT April 12, 2012 Baptist Communicators 42. Mobile Devices Other Tablet2% 1%Moible 5% Share of Connected Device Classic Web 92%DATECLIENT April 12, 2012Baptist Communicators 43. MobileGeneral Reference Job Listings Top mobile Gaming Information categories 20112010 in 2011: Electronic PaymentOnline Retail Health Information05,000 10,000 15,000 20,000 25,000 30,000 35,000 40,000DATECLIENT April 12, 2012Baptist Communicators 44. MobileEstablishing a mobile presence for your company.Which is better an App or a Mobile Website?DATECLIENT April 12, 2012Baptist Communicators 45. Mobile Mobile Website Same as web - Browser-based HTML pages Designed f