63
7 Pillars Digital Marketing Academy Webinar Presented by: Arman Rousta Digital Strategist & CEO of Blueliner January 2011 2:00 – 3:00pm EST TM Web Design Trends 2011

Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Embed Size (px)

DESCRIPTION

This is a presentation that I have prepared for the DMA (Direct Marketing Association) twice. This updated version was presented as a webinar for Blueliner Marketing. I demonstrate best practices in web design by giving screencast tours of websites.

Citation preview

Page 1: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

7 Pillars Digital Marketing Academy

Webinar Presented by:Arman RoustaDigital Strategist & CEO of Blueliner

January 20112:00 – 3:00pm EST

TM

Web Design Trends 2011

Page 2: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Overview – Table of ContentsOverview – Table of Contents

• Introduction to Blueliner Marketing• Web Design Trends & Tools• Best Practices Website Tour• Questions & Answers• Upcoming Webinars

Page 3: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Interactive Marketing ClientsInteractive Marketing Clients

California Closets (Lifestyle)California Closets (Lifestyle)

Completely Bare (Beauty)Completely Bare (Beauty)

IZOD Men’s Fragrance (Beauty)IZOD Men’s Fragrance (Beauty)

Bogner (Fashion) Bogner (Fashion)

Allied Home Mortgage (Real Estate)Allied Home Mortgage (Real Estate)

New York Video School (Education)New York Video School (Education)

401kid (Finance)401kid (Finance)

CMS Forex (Finance)CMS Forex (Finance)

Guardian Water & Power (Energy)Guardian Water & Power (Energy)

Morningside Translations (Translations)Morningside Translations (Translations)

Blueliner is a reputable digital marketing agency based in New York, with presence in Asia, Latin America and Europe. We have built successful social, mobile and search campaigns for hundreds of clients, including:

Medical Hair Restoration (Medical)Medical Hair Restoration (Medical)

Manhattan Orthopaedic Care (Medical)Manhattan Orthopaedic Care (Medical)

Russia Today (Media)Russia Today (Media)

SogoTrade (Finance)SogoTrade (Finance)

Icebreaker (Fashion)Icebreaker (Fashion)

Lufthansa (Travel)Lufthansa (Travel)

Chaa Creek Resort (Travel)Chaa Creek Resort (Travel)

Celect.org (Social Media)Celect.org (Social Media)

Bid on the City (Real Estate)Bid on the City (Real Estate)

Red Clay Media (Marketing)Red Clay Media (Marketing)

Page 4: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

pillar 1. Content (Copy, Video, Photography, Audio)

pillar 2. design UX (Branding, Web Development)

pillar 3. SEO (Organic Search, Organic CSE, Onsite Search)

pillar 4. digital Media (Paid Search, CPM, Affiliate, Retargeting)

pillar 5. CRM (Customer Service, Email Marketing, Web Analytics)

pillar 6. Social media (SMM, Online PR, Networks, Blogs, Games)

pillar 7. Mobile

The The 7 Pillars 7 Pillars of Digital Marketingof Digital Marketing

Page 5: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

What Makes A Good Website?What Makes A Good Website?

• Usability (clarity, simplicity, speed)• Satisfying User Experience (UX)• Organized Site Navigation

• Great Branding & Design Elements• Quality Content and Offerings• Interactivity – User Engagement

Page 6: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

13 Trends & Best Practices13 Trends & Best Practices

1. Increasing Use of Video

2. Built on CMS (Content Management Systems) platforms, like Wordpress, Drupal, Diem and Joomla

3. Bigger Fonts and Powerful Header Images

4. Heavy Social Media integration

5. Use of Engagement Tools, like Chat, Music, Forums, Blogs, Polls, and other user-contribution features

6. Mobile Versions

7. Multi-lingual / IP-targeting to show local content

8. Detailed Borders as Backgrounds

9. Useful Footer Bar Design

10. Bread Crumb Navigation

11. SEO Considerations – proper meta data tagging

12. Intelligent Incorporation of Ads

13. Pre-loaders & Favicons

Page 7: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Poll # 1Poll # 1

Does your website operate off of a CMS or blog, where you can dynamically update content?

• Yes – whole site is on a CMS• Yes – some pages are on CMS• No• Unsure

Page 8: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

The Rise of The Rise of EverythingEverything Mobile Mobile

• Nearly 10% of website traffic is now coming from mobile; we expect that to be over 20% within two years.

• The canvas is smaller; KISS principle

• Test your mobile site on all popular devices and browsers

• Mobile Apps vs. (Mobile) “M Sites”

Page 9: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Building a Good WebsiteBuilding a Good Website

• Project Planning & Execution• Defining the website’s purpose and vision• Establishing a reasonable budget (build + maintain)• Hiring the right team• QA process (Use Jing or similar service)

• Adding Interactive Elements (Social, Blogs, Polls)• Marketing Basics: Analytics, SEO, CRM (Email)• Personalize the Experience

Key Questions: Web Analytics & CRMHow long do people stay on your site?How often do they return?What do they do on the site (transact, interact)?

Page 10: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Poll # 2Poll # 2

How often does someone in your organization check Web Analytics?

• Every day• 1-2 times/week• 1-2 times/months• Less than once/month • We don’t have Analytics

Page 11: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Channels (example: Travel/Tourism)Channels (example: Travel/Tourism)

Travel sites, blogs and discussion boards

Micro-blogging service Twitter

Biggest social network Facebook

Photo sharingnetwork Flickr

Video sharingwebsite YouTube

Page 12: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Poll # 3Poll # 3

Do you offer sharing and social bookmarking tools, such as “Email to Friend” or “Upload to Facebook” for some of your web content?

• Yes• No• Unsure

Page 13: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Web Analytics Case Study – An A/B TestWeb Analytics Case Study – An A/B Test

OPTION 1: /home

Flash Banner: YES

Form on Home Pg: YES

Page 14: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Web Analytics Case Study – An A/B TestWeb Analytics Case Study – An A/B Test

OPTION 2: /home2

Flash Banner: NO

Form on Home Pg: YES

Page 15: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Web Analytics Case Study – An A/B TestWeb Analytics Case Study – An A/B Test

OPTION 3: /index

Flash Banner: NO

Form on Home Pg: NO

Page 16: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Web Analytics Case Study – An A/B TestWeb Analytics Case Study – An A/B Test

OPTION 4: /index2

Flash Banner: YES

Form on Home Pg: NO

Page 17: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Web Analytics Case Study – An A/B TestWeb Analytics Case Study – An A/B TestResults

TipTip: Use Google Web Optimizer to Run A/B Tests!: Use Google Web Optimizer to Run A/B Tests!

Page 18: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Poll # 4Poll # 4

Has your company ever run a multivariate test using Google Website Optimizer, Optimost or some other A/B Testing analytics tool?

• Yes• No• Unsure

Page 19: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Best Practices Best Practices Website TourWebsite Tour

[Top Sites & Why We Like Them][Top Sites & Why We Like Them]

Page 20: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.restorationhardware.com

Page 21: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.restorationhardware.com

What we like about it: • Design Gallery – shop while you’re in the

experience of visualizing a room• Clear and concise messaging• Design/Graphics are top-notch

Page 22: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.tripadvisor.com

Page 23: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.tripadvisor.com

What we like about it: • Intelligent Facebook Integration• User engagement (reviews)• Special offers widgets (flight deals)• Promotion of other family of sites

Page 24: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.shopflick.com

Page 25: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.shopflick.com

What we like about it: • Use of Video during shopping experience• Meet the Designers, Personalizes the Sale• Use of Tags (for SEO, User Experience)• Great layout, graphics, special effects

Page 26: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.tumi.com

Page 27: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.tumi.com

What we like about it: • Recently Viewed Widget• Subscription Options• Compare Products Widget• Search Functionality• Shop by Country• Overall Navigation• Lifestyle Imagery + Product Images

Page 28: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.1800lighting.com

Page 29: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.1800lighting.com

What we like about it: • Domain Name strategy• Ability to Buy straight from Videos• In Stock Updated real-time & Store Availability• Home Page Calls to Action (Ads)• User Friendly Shopping Experience

• Green Add to Cart with + Sign• Shop Accessories upsell

• Brands get featured sections

Page 30: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Best Practices Best Practices Website TourWebsite Tour

[Browse Sites][Browse Sites]

Page 31: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Questions & Questions & AnswersAnswers

Page 32: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Thank you for your participation! For questions Thank you for your participation! For questions or comments about this presentation, contact:or comments about this presentation, contact:

Arman Rousta Chief Executive [email protected]

212.904.1240 office

55 Broad Street, 17th FloorNew York, NY 10004www.bluelinerny.com

Page 33: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

Bonus Material: Bonus Material: Website Tour Website Tour ContinuedContinued[More Sites we Like (some of which [More Sites we Like (some of which we also built!)]we also built!)]

Page 34: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.nyvideoschool.com

Page 35: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.nyvideoschool.com

What we like about it: • Incorporation of video throughout site• Use of AJAX for user-friendliness• Good branding, clear messaging and CTAs• Different levels of membership and access

Page 36: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.mint.com

Page 37: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.mint.com

What we like about it: • Web 2.0 defined• Clear and concise messaging• Design/Graphics are top-notch• Usability of web-software is second to none• Account setup really does take 5 minutes• Functionality is impressive – ability to split

transactions, create own categories, tags, etc.

Page 38: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.tigweb.org

Page 39: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.tigweb.org

• What we like about it: • Great Calls to Action• Clear Promotion of User Generated Content• Color-coding of Top Navigation and Sections

Page 40: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.skittles.com

Page 41: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.skittles.com

What we like about it: • Complete Innovation – new type of website• Immersion with Social Networks• Creative and fun

Page 42: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.chaacreek.com/belize-travel-blog

Page 43: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.chaacreek.com/belize-travel-blog www.chaacreek.com/belize-travel-blog

What we like about it: • Full-CMS Site (using Wordpress)• Excellent Branding, gives feel for resort• Big Header Graphics• Border Graphics• Effective use of Flash in SEO-friendly site

Page 44: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.snooth.com www.snooth.com

Page 45: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.snooth.com www.snooth.com

What we like about it: • It’s just a great idea – perfect social network• Web 2.0 widgets everywhere

• Sharing, Friending, RSS Feeds, etc.• Geo-targeting site visitors based on IP Address• Mobile version and promotion of it• Simple and creative navigation

Page 46: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.visuallease.com www.visuallease.com

Page 47: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.visuallease.com www.visuallease.com

What we like about it: • Big Header Graphics• Full-CMS Site (using Wordpress)• Effective use of Flash in SEO-friendly site• Javascript Top Navigation• Good CTAs

Page 48: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.barackobama.com/tvwww.barackobama.com/tv

Page 49: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.barackobama.com/tv www.barackobama.com/tv

What we like about it: • Full suite of Web 2.0 tools• Excellent use of video as medium• User participation via functional tools/programs• Depth of content

Page 50: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.endless.com www.endless.com

Page 51: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.endless.comwww.endless.com

What we like about it: • Best of breed ecommerce navigation• Level of detail – showing views and granular hi-

resolution product images

Page 52: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.treehugger.com www.treehugger.com

Page 53: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.treehugger.com www.treehugger.com

What we like about it: • great navigation: side scrolling (set people's

expectations)• navigation: bread crumb• navigation: 3 categories in top nav, every pg• appropriate 'green' advertising / videos in expanded

ads• Green Trend - tell users how to help, what to do

-"how to help treehugger"

Page 54: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.boagworld.com www.boagworld.com

Page 55: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.boagworld.com www.boagworld.com

What we like about it: • Useful and well-designed footer (not just an after-

thought – rather used strategically)• Big Easy buttons, headers and fonts• Great and visible interactive features• Frequently updated quality content – key for blogs

Page 56: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.redclaymedia.com www.redclaymedia.com

Page 57: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.redclaymedia.com www.redclaymedia.com

What we like about it: • Contact form drop down• Multi-color text• Neat Flash concept/integration within home page• Big headers with captivating content• Blog integration to top navigation

Page 58: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.bluelinerny.comwww.bluelinerny.com

Page 59: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.bluelinerny.com www.bluelinerny.com

What we like about it: • Video integration into home page• Powerful flash header, with rotating branding

plugs• News and blog feeds in home page – dynamic

content, great for SEO• Featured client, rotating images, gives the feeling

of active projects and capabilities• Flash top and left-side navigation• Phone number on every page of the site• Nifty flash portfolio section• Integration of blog that has powerful add-ons• It’s our own site – perhaps we’re a bit vain

Page 60: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.allstategarage.com www.allstategarage.com

Page 61: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.allstategarage.comwww.allstategarage.com

What we like about it: • Integrates navigation and video• Design detailing, such as garage borders• Interactive elements – design your bike

Page 62: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.facebook.com www.facebook.com

Page 63: Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

www.facebook.com www.facebook.com

What we like about it: • Can’t say enough about it – this is the best

website around• RELEVANCE – news feeds, application add-on

model, and ability to customize the entire experience give user EXACTLY what they want

• Tagging people in pictures (largest picture upload site on web)

• Organized, simple, intuitive