Download - Webinar - Top Website Design Trends for 2012

To learn more about Marqui: 1.888.662.7784 | www.marqui.comTo learn more about Station X: 604.639.2266 | www.stationx.co

Top WebsiteDesign TrendsFor 2012

Ideas and Inspiration for Your 2012 Web Redesign


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 Send


Introduction

• Next Generation CMS software, combining web content management, email marketing and multi-channel campaign management.

• All delivered in the cloud.

• Over 200 customers in industries including software and technology, higher education, healthcare and sports and entertainment.

• Marketing Services at the intersection of art and science.

• Integrated offering including:

• brand development• digital strategy• website redesign• social media• advertising and

communications• analytics and optimization


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, ScotiaBank, MEC and Silverbirch Hotels.


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.


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 - Agnostic


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.


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.


http://thewildernessdowntown.com/




http://www.allisnotlo.st/index_en.html



http://www.apple.com/html5/showcase/typography/


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.


http://www.webdesignyorkshire.com/



http://2011.dconstruct.org/



http://www.tweetdeck.com/



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.


http://www.rga.com/

Typographic Layouts


http://www.snowdenindustries.com/

Typographic Layouts


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.


http://www.fab.com

The Grid


http://www.etsy.com

The Grid


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.


http://www.timberland.com



http://www.handlewithlove.net/



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.


http://www.apple.com



http://beetle.de/



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.


http://www.stuffandnonsense.co.uk/



http://www.justdot.gr/



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.


http://sasquatchfestival.com/

Illustration


http://www.cocacola.pt/historiasfelizesparacomer/

Illustration


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.


http://www.madebywater.com/



http://www.ambermiro.com/index.html#



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.


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

Parallax


http://unfold.no/

Parallax


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 windows


http://steinway.com/



http://www.istockphoto.com/



http://www.facebook.com



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 Boxes


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 strategy


Q + A

Richard Sharp, VP Marketing [email protected]

Shaun Scholtz, Interactive Art DirectorStation [email protected]

DM us on Twitter at www.twitter.com/Marqui_CMS or www.twitter.com/therealstationx

mailto:[email protected]

mailto:[email protected]

http://www.twitter.com/Marqui_CMS

https://twitter.com/#!/therealstationx

Download - Webinar - Top Website Design Trends for 2012

Top Related