Webinar - Top Website Design Trends for 2012

Download Webinar  - Top Website Design Trends for 2012

Post on 12-May-2015

2.529 views

Category:

Design

0 download

Embed Size (px)

DESCRIPTION

As 2011 draws to a close, theres no better time to evaluate your organizations most powerful marketing tool: your website. Layout, graphics and navigation can have a monumental effect on your marketing ROI, but do you know which website design trends can engage your visitors and help you meet your business goals? Register now to join Richard Sharp, VP of Marketing at Marqui, and Shaun Scholtz, Interactive Art Director at Station X Communications, as they provide a sneak peek into the 2012 web design landscape, with insight into keeping your website design fresh and forward-looking.

TRANSCRIPT

  • 1.Top Website Design Trends For 2012 Ideas and Inspiration for Your 2012 Web RedesignTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co

2. GoToWebinar ControlsClick the button with the arrows to minimize your GoToWebinar controlsType your questions for us into the box at the bottom and press SendTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 3. Introduction Marketing Services at the intersection Next Generation CMS software,of art and science. combining web contentmanagement, email marketing and Integrated offering including:multi-channel campaignbrand developmentmanagement.digital strategywebsite redesign All delivered in the cloud.social mediaadvertising and communications Over 200 customers in industriesanalytics and optimization including software and technology,higher education, healthcare andsports and entertainment.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 4. Introducing Shaun Scholtz Interactive Art Director at Station X. Works closely with the design teamand digital strategists, creatingengaging online experiences andinnovative campaigns. Over 7 years experience ininteractive and graphic design, front-end development, photography andfilm. Worked with a wide range ofclients, including The CanadianTourismCommission, NIKE, TEDx, ScotiaBank, MEC and Silverbirch Hotels.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 5. Our Approach to Web Design Not just a coat of paint: your web designneeds to support your overall businessgoals. Focus focus focus: on usability andcustomer experience, as much as eye-catching design. Design elements should encouragevisitors to take the actions you want themto take. A successful website = design + content+ SEO + conversion optimization. Think holistically: solid web design is anecessary part of your bigger webmarketing and user experience picture.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 6. Characteristics of EffectiveWebsites 1. Effective usability 2. Search engine optimization 3. Strategic, continually updated content 4. Easy-to-maintain and scalable 5. Measurable 6. Performance 7. Platform - AgnosticTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 7. Web Design Trends of 2012 Some considerations: Aesthetic design is an important partof a larger process. Trends have had a way of guiding(and sometimes misguiding) abrands depiction online. Although its a smart idea to keeptabs on whats current, a trend ismeant to inform your designprocess, not dictate it.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 8. HTML5, CSS3 and JQUERY FireFox 8, Chrome 10.5, Safari 5and Internet Explorer 9 = HTML5 nativity and integration. Moving beyond simple animationsto truly interactive experiences. With blend of CSS3 and javascript,its now recognized by developers,designers and big brands likeApple and Google.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 9. HTML5, CSS3 and JQUERY http://thewildernessdowntown.com/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 10. HTML5, CSS3 and JQUERY http://www.allisnotlo.st/index_en.htmlTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 11. HTML5, CSS3 and JQUERY http://www.apple.com/html5/showcase/typography/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 12. Mobile Compatibility and Responsive Layouts Increased emphasis on mobileaccess cannot be ignored. Mobile is exponentially tipping thescale on where users are spendingtheir time. As a result, web design trends aremore dependent on compatibility.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 13. Mobile Compatibility andResponsive Layouts http://www.webdesignyorkshire.com/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 14. Mobile Compatibility and Responsive Layouts http://2011.dconstruct.org/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 15. Mobile Compatibility andResponsive Layouts http://www.tweetdeck.com/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 16. Typographic Layouts Typographic layouts are still aneffective way of grabbing attention,when done correctly. Especially with Typekit and GoogleFonts pioneering the way, there reallyis no need for images anymore. Site optimization and accessibilityhave become paramount.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 17. Typographic Layouts http://www.rga.com/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 18. Typographic Layouts http://www.snowdenindustries.com/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 19. The Grid The word simplicity can have manydifferent stylistic interpretations, withthe grid layout being the most evident. Its original intent was to streamlineweb development by using commondimensions in the design layout. If used effectively, employing theGolden Ratio, then the design will hita sweet spot, instinctively appealing toyour visitors.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 20. The Grid http://www.fab.comTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 21. The Grid http://www.etsy.comTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 22. Large Background Images This one wont be disappearinganytime soon: a trend or a bestpractice? As marketing and advertisingbudgets decrease, therecontinues to be investment inthe production space, on digitalassets like productphotography, rich video contentand interactive campaigns.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 23. Large Background Images http://www.timberland.comTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 24. Large Background Images http://www.handlewithlove.net/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 25. Perceived Affordance andMetaphoric Design Don Normans discussions onperceived affordance in design. When you first see something youhave never seen before, how doyou know what to do? Many visual metaphors in design. Drop-shadows, gradients androunded-corners are techniquesused to create the illusion of depthand 3-dimensionality.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 26. Perceived Affordance andMetaphoric Design http://www.apple.comTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 27. Perceived Affordance andMetaphoric Design http://beetle.de/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 28. Social Media Integration With its ubiquitous nature,implementation of social medialinks on your website isbecoming more important. The key? Avoid a generic buttonor link on your website, and optinstead to integrate your linksinto your websites overalltheme.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 29. Social Media Integration http://www.stuffandnonsense.co.uk/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 30. Social Media Integration http://www.justdot.gr/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 31. Illustration Illustration has always added ahumanistic dimension to design. For some time, it was commonlyused for buttons and certaininterface elements, but has nowevolved into a far more integratedexperience.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 32. Illustration http://sasquatchfestival.com/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 33. Illustration http://www.cocacola.pt/historiasfelizesparacomer/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 34. Single Page Websites &the Fold The Fold: whether a myth oroutdated user practice, thedefinition of where the fold ishas been open to interpretation With the explosion of singlepage websites, contentbecomes more of a story-book Narrative is key, and singlepage websites lend themselveswell to this format.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co 35. Single Page Websites &the Fold http://www.madebywater.com/To learn mo