Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)
-
Upload
arman-rousta -
Category
Business
-
view
3.344 -
download
0
description
Transcript of 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
Overview – Table of ContentsOverview – Table of Contents
• Introduction to Blueliner Marketing• Web Design Trends & Tools• Best Practices Website Tour• Questions & Answers• Upcoming Webinars
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)
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
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
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
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
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”
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)?
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
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
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
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
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
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
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
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!
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
Best Practices Best Practices Website TourWebsite Tour
[Top Sites & Why We Like Them][Top Sites & Why We Like Them]
www.restorationhardware.com
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
www.tripadvisor.com
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
www.shopflick.com
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
www.tumi.com
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
www.1800lighting.com
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
Best Practices Best Practices Website TourWebsite Tour
[Browse Sites][Browse Sites]
Questions & Questions & AnswersAnswers
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
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!)]
www.nyvideoschool.com
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
www.mint.com
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.
www.tigweb.org
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
www.skittles.com
www.skittles.com
What we like about it: • Complete Innovation – new type of website• Immersion with Social Networks• Creative and fun
www.chaacreek.com/belize-travel-blog
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
www.snooth.com www.snooth.com
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
www.visuallease.com www.visuallease.com
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
www.barackobama.com/tvwww.barackobama.com/tv
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
www.endless.com www.endless.com
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
www.treehugger.com www.treehugger.com
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"
www.boagworld.com www.boagworld.com
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
www.redclaymedia.com www.redclaymedia.com
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
www.bluelinerny.comwww.bluelinerny.com
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
www.allstategarage.com www.allstategarage.com
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
www.facebook.com www.facebook.com
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