Webinar - Top Website Design Trends for 2012

2,895 views

Published on

As 2011 draws to a close, there’s no better time to evaluate your organization’s 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.

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,895
On SlideShare
0
From Embeds
0
Number of Embeds
470
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Explain what the website actually does.
  • The golden ratio is an irrational mathematical constant, approximately 1.61803398874989. This ratio has been used by mankind for centuries.
  • The golden ratio is an irrational mathematical constant, approximately 1.61803398874989. This ratio has been used by mankind for centuries.
  • Webinar - Top Website Design Trends for 2012

    1. 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. 2. GoToWebinar Controls• Click the button with the arrows to minimize your GoToWebinar controls• Type 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. 3. Introduction • Marketing Services at the intersection • Next Generation CMS software, of art and science. combining web content management, email marketing and • Integrated offering including: multi-channel campaign • brand development management. • digital strategy • website redesign • All delivered in the cloud. • social media • advertising and communications • Over 200 customers in industries • analytics and optimization including software and technology, higher education, healthcare and sports 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. 4. Introducing Shaun Scholtz • Interactive Art Director at Station X. • Works closely with the design team and digital strategists, creating engaging online experiences and innovative campaigns. • Over 7 years experience in interactive and graphic design, front- end development, photography and film. • Worked with a wide range of clients, including The Canadian Tourism Commission, NIKE, TEDx, ScotiaBan k, 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. 5. Our Approach to Web Design • Not just a coat of paint: your web design needs to support your overall business goals. • Focus focus focus: on usability and customer experience, as much as eye- catching design. • Design elements should encourage visitors to take the actions you want them to take. • A successful website = design + content + SEO + conversion optimization. • Think holistically: solid web design is a necessary part of your bigger web marketing 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. 6. Characteristics of Effective Websites 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. 7. Web Design Trends of 2012 Some considerations: • Aesthetic design is an important part of a larger process. • Trends have had a way of guiding (and sometimes misguiding) a brand‟s depiction online. • Although it‟s a smart idea to keep tabs on what‟s current, a trend is meant to inform your design process, 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. 8. HTML5, CSS3 and JQUERY • FireFox 8, Chrome 10.5, Safari 5 and Internet Explorer 9 = HTML 5 nativity and integration. • Moving beyond simple animations to truly interactive experiences. • With blend of CSS3 and javascript, it‟s now recognized by developers, designers and big brands like Apple 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. 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. 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. 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. 12. Mobile Compatibility and Responsive Layouts • Increased emphasis on mobile access cannot be ignored. • Mobile is exponentially tipping the scale on where users are spending their time. • As a result, web design trends are more 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. 13. Mobile Compatibility and Responsive 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. 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. 15. Mobile Compatibility and Responsive 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. 16. Typographic Layouts • Typographic layouts are still an effective way of grabbing attention, when done correctly. • Especially with Typekit and Google Fonts pioneering the way, there really is no need for images anymore. • Site optimization and accessibility have 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. 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. 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. 19. The Grid • The word „simplicity‟ can have many different stylistic interpretations, with the grid layout being the most evident. • Its original intent was to streamline web development by using common dimensions in the design layout. • If used effectively, employing the “Golden Ratio”, then the design will hit a sweet spot, instinctively appealing to your 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. 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. 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. 22. Large Background Images • This one won‟t be disappearing anytime soon: a trend or a best practice? • As marketing and advertising budgets decrease, there continues to be investment in the production space, on digital assets like product photography, rich video content and 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. 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. 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. 25. Perceived Affordance and Metaphoric Design • Don Norman‟s discussions on perceived affordance in design. • “When you first see something you have never seen before, how do you know what to do?” • Many visual metaphors in design. • Drop-shadows, gradients and rounded-corners are techniques used to create the illusion of depth and 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. 26. Perceived Affordance and Metaphoric 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. 27. Perceived Affordance and Metaphoric 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. 28. Social Media Integration • With its ubiquitous nature, implementation of social media links on your website is becoming more important. • The key? Avoid a generic button or link on your website, and opt instead to integrate your links into your website‟s overall theme.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    29. 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. 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. 31. Illustration • Illustration has always added a humanistic dimension to design. • For some time, it was commonly used for buttons and certain interface elements, but has now evolved into a far more integrated experience.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    32. 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. 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. 34. Single Page Websites & the Fold • The “Fold”: whether a myth or outdated user practice, the definition of where the fold is has been open to interpretation • With the explosion of single page websites, content becomes more of a story-book • Narrative is key, and single page websites lend themselves well 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. 35. Single Page Websites & the Fold http://www.madebywater.com/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    36. 36. Single Page Websites & the Fold http://www.ambermiro.com/index.html#To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    37. 37. Parallax • Has become quite popular over the last year. • When implemented properly, it creates a fresh perspective in user engagement, breaking the linear paradigm of scrolling. • The drawback to this great use of front-end technology? The limited capability of most current browsers.To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    38. 38. Parallax http://www.mosandbows.com.au/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    39. 39. Parallax http://unfold.no/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    40. 40. From Annoying Pop-Up to Elegant Modal • Modal boxes have become far more prevalent in interface design. • They have improved the ability to layer information effectively without losing the user. • No longer used solely in image galleries: • Contact forms • Login windows • Tool and help windowsTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    41. 41. From Annoying Pop-Up to Elegant Modal http://steinway.com/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    42. 42. From Annoying Pop-Up to Elegant Modal http://www.istockphoto.com/To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    43. 43. From Annoying Pop-Up to Elegant Modal http://www.facebook.comTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    44. 44. Summary 1. HTML5, CSS3 and JQUERY 2. Mobile Compatibility and Responsive Layouts 3. Typographic Layouts 4. The Grid 5. Large Background Images 6. Perceived Affordance and Metaphoric Design 7. Social Media Integration 8. Illustration 9. Single Page Websites 10. Parallax 11. Elegant Modal BoxesTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    45. 45. Looking For More?Contact us if you‟d like to know more about:• Next-gen content management• Campaign tools• Web design and development• Web analytics & optimization• Social media, digital, mobile and email strategyTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co
    46. 46. Q+A Richard Sharp, VP Marketing Marqui Richard.Sharp@marqui.com Shaun Scholtz, Interactive Art Director Station X Shaun.Scholtz@stationx.co DM us on Twitter at www.twitter.com/Marqui_CMS or www.twitter.com/therealstationxTo learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co

    ×