Baptist communicators interactive design trends 2012

April 12, 2012

Interactive Design Trends

DATE CLIENT

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.

April 12, 2012 Baptist Communicators

DATE CLIENT

Evolving Communications Channel


Multi-Media

New Media

Digital Media

Interactive

Media

DATE CLIENTApril 12, 2012 Baptist Communicators

Designing for Print is not the same as designing for Web

Different sets of constraints.

DATE CLIENT

Print Design vs. Web Design

Similarities are universal principles of design:• Typography• Visual hierarchy• Color• Balance• Composition


DATE CLIENT


• 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

Print Design vs. Web DesignSize• 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


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


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


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


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

Types of Interactive Media

• Social Media• Mobile• Texting• Mobile Websites• Applications• Websites• Email• Internet Video• Interactive Television• Mall Kiosks• Video Games


DATE CLIENT

Web Design Trends


DATE CLIENT

Web Design Trends

• One Page Sites• Animation• Responsive Design• Web Fonts


DATE CLIENT

Web Design Trends

One Page Sites(Interactive version of Posters)


DATE CLIENT

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

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/


http://www.villainhq.com/matchlings/



DATE CLIENT

Web Design Trends

mosandbows.com.au/


http://www.mosandbows.com.au/

DATE CLIENT

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


http://worrydream.com/

DATE CLIENT

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/


http://www.fizzysoftware.com/

DATE CLIENT

Web Design Trends

www.evoluxion.com/en


http://www.evoluxion.com/en



DATE CLIENT

Web Design Trends

Animation isn’t just Flash anymore


DATE CLIENT

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/


http://www.smallstudio.com.au/

DATE CLIENT

Web Design Trends

alainrodriguezz.com/


http://alainrodriguezz.com/

DATE CLIENT

Web Design Trends

Animation• The key is to keep it simple; less is more

fat-man-collective.com/hello.php


http://fat-man-collective.com/hello.php



DATE CLIENT

Web Design Trends

pro-foods.com/


http://pro-foods.com/



DATE CLIENT

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

Infographics


Water Politics

http://visual.ly/water-politics

DATE CLIENT

Infographics


Static and Animated Infographic

http://www.behance.net/gallery/SM-Baguio-Static-and-Animated-Infographics/3368275

http://www.behance.net/gallery/SM-Baguio-Static-and-Animated-Infographics/3368275

DATE CLIENT

Web Design Trends

Responsive Web Design


DATE CLIENT

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

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

Web Design Trends


DATE CLIENT

Web Design Trends

Fonts


DATE CLIENT

Web Design TrendsFonts• 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

Web Design Trends


DATE CLIENT

Mobile


DATE CLIENT

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

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

Mobile

Share of Connected Device


Classic Web92%

Moible5%

Tablet3%

Other1%

Devices

DATE CLIENT

Mobile

Top mobile categories in 2011:


Health Information

Online Retail

Electronic Payment

Gaming Information

Job Listings

General Reference

0 5,000 10,000 15,000 20,000 25,000 30,000 35,000 40,000

20112010

DATE CLIENT

Mobile

Establishing a mobile presence for your company.Which is better – an App or a Mobile Website?


DATE CLIENT

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

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

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

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

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

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

Online Video


DATE CLIENT

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

Online Video


YouTube; 50.40%Other; 38.30%

Vevo; 1.80%Hulu; 1.80% Yahoo Sites; 1.50% Microsoft Sites; 1.40% Viacom Digital; 1.20%

Share of Content Videos Viewed

DATE CLIENT

Email Messaging


DATE CLIENT

Email MarketingFun 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

Email MarketingTrends:• 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



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


Personalized Video Messaging

Healthcare• Patient care follow up• Quarterly healthcare tips• Fund raisingEducation• Follow up to web inquiry• Reminder to student population• Alumni messaging• Holiday message


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


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

Thank You.

Baptist communicators interactive design trends 2012

Business

Transcript of Baptist communicators interactive design trends 2012