Webinar - Top Website Design Trends for 2012

Top Website
Design Trends
For 2012
Ideas and Inspiration for Your 2012 Web Redesign

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

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

• 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.


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.


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.


HTML5, CSS3 and
JQUERY

http://thewildernessdowntown.com/


HTML5, CSS3 and
JQUERY

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


HTML5, CSS3 and
JQUERY

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.


Responsive Layouts

http://www.webdesignyorkshire.com/


Responsive Layouts

http://2011.dconstruct.org/


Responsive Layouts

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.


Typographic Layouts

http://www.rga.com/


Typographic Layouts

http://www.snowdenindustries.com/


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.


The Grid

http://www.fab.com


The Grid

http://www.etsy.com


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.


Metaphoric Design

http://www.apple.com


Metaphoric Design

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.


Illustration

http://sasquatchfestival.com/


Illustration

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


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.


the Fold

http://www.madebywater.com/


the Fold

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.


Parallax

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


Parallax

http://unfold.no/


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


Elegant Modal

http://steinway.com/


Elegant Modal

http://www.istockphoto.com/


Elegant Modal

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
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/therealstationx


Webinar - Top Website Design Trends for 2012

Recommended

Recommended

More Related Content

More from Marqui CMS

More from Marqui CMS (17)

Recently uploaded

Recently uploaded (20)

Webinar - Top Website Design Trends for 2012

Editor's Notes