Website Design Trends in 2014

Website Design Trends in 2014PRESENTED BY THALIA DRIESSEN

Introductions

2 #bbcon - Presented by Thalia Driessen of Adcieo

Thalia DriessenCreative Director, Chief Trend Spotter

Adcieo, Inc.

Debbie Snyder

VP of Client SolutionsAdcieo, Inc.

Agenda

• 2014 Web Design Trends: The Standouts

• The Future: Near and Far

• Toolbox: Resources to Keep Ahead of the Curve

• Q&A

2 #bbcon - Presented by Thalia Driessen of Adcieo

But First … Why Talk About Trends?

2 #bbcon - Presented by Thalia Driessen of Adcieo

2 #bbcon - Presented by Thalia Driessen of Adcieo

2014 Web Design Trends

What is Responsive Web Design (RWD)?

• Single Codebase• Any Screen Size• Any Platform • Any Orientation

2 #bbcon - Presented by Thalia Driessen of Adcieo

Why It Matters

Credit: cruxcollaborative.com / data: exacttarget.com

2 #bbcon - Presented by Thalia Driessen of Adcieo

Fixed Layout

2 #bbcon - Presented by Thalia Driessen of Adcieo

Fluid Layout

2 #bbcon - Presented by Thalia Driessen of Adcieo

Adaptive Web Design

2 #bbcon - Presented by Thalia Driessen of Adcieo

Responsive Web Design

2 #bbcon - Presented by Thalia Driessen of Adcieo

• Grid-Based / Modular• Content Driven• Use of Typography

packdog.com

• Ample White Space• Good Sized Mobile Buttons• Fast Load Time

2 #bbcon - Presented by Thalia Driessen of Adcieo

Example

2 #bbcon - Presented by Thalia Driessen of Adcieo

Is It Right for You?

• Budget – Short-term vs. long-term value

• Resources – Coding and content editing can happen in one place

• SEO – Responsive is recommended by major search engines

2 #bbcon - Presented by Thalia Driessen of Adcieo

“You put water in a cup,

it becomes the cup; You put water into a

bottle, it becomes the

bottle… Be water, my

friend.”

- Bruce Lee

2 #bbcon - Presented by Thalia Driessen of Adcieo

What is Sticky Content?

• Content that keeps visitors on your site• Encourages visitors to return frequently• Inspires visitors to share your content

2 #bbcon - Presented by Thalia Driessen of Adcieo

What Makes it Stick

• Memorable• Emotional • Credible• Unexpected• Simple & Concrete• Relatable

2 #bbcon - Presented by Thalia Driessen of Adcieo

Example

2 #bbcon - Presented by Thalia Driessen of Adcieo

2 #bbcon - Presented by Thalia Driessen of Adcieo

Is It Right for You?

• Audience – How much do you know about yours

• Resources – Do you have content creators (external or internal)

• Technology – Does your website support a dynamic approach to content creation

2 #bbcon - Presented by Thalia Driessen of Adcieo

“…Make it memorable. Make it inviting to look at. Make it fun to read.”

2 #bbcon - Presented by Thalia Driessen of Adcieo

What is Flat Design?

Flats where its at

Wordcloud - usabilla.com

2 #bbcon - Presented by Thalia Driessen of Adcieo

Skeuomorphic vs. Flat

Flats where its at

2 #bbcon - Presented by Thalia Driessen of Adcieo

• Few / No Added Effects• Solid, Vibrant Colors• Unique Typography

• Simple shapes• Large Hero Graphics• Illustration / Iconography

Is It Right for You?

• Good User Experience - Clean uncluttered design that lends itself to responsive layouts.

• Navigation and Content – Can you streamline it

• Branding – Does it correlate

2 #bbcon - Presented by Thalia Driessen of Adcieo

“Simplicity is the keynote of elegance”

- Coco Chanel

2 #bbcon - Presented by Thalia Driessen of Adcieo

Non-Boring Fonts

• No more limiting to the old-school styles• Use with discretion• Google Fonts• Font Embedding - @font-face

Large Hero Area

Floating Navigation

blog.leadpages.net | sean bester

Parallax

2 #bbcon - Presented by Thalia Driessen of Adcieo

The Future…The Internet of Things

2 #bbcon - Presented by Thalia Driessen of Adcieo

The Future…Natural User Interface

2 #bbcon - Presented by Thalia Driessen of Adcieo

The Future…Virtual Reality

2 #bbcon - Presented by Thalia Driessen of Adcieo

“The future depends on what you do today.”

-Mahatma Gandhi

2 #bbcon - Presented by Thalia Driessen of Adcieo

Trend Toolbox - RWD

Test Your Site:• The Responsinator - responsinator.com• Responsive Design Checker - responsivedesignchecker.com

Ideas:• A List Apart –alistapart.com (search for responsive) • This Is Responsive - responsive.rga.com

Visualizing Responsive• Style Tiles - styletil.es

Inspiration:• Media Queries - mediaqueri.es

2 #bbcon - Presented by Thalia Driessen of Adcieo

Trend Toolbox

Ideas• Sethgodin.typepad.com• Techsoup.org• Ideas.ted.com

Design Inspiration• Webbyawards.com• SmashingMagazine.com

Typography• www.google.com/fonts• designinstruct.com/inspiration-web-design/google-fonts-examples/• fontsquirrel.com/tools/webfont-generator

Content (Sticky)• jeffbullas.com

2 #bbcon - Presented by Thalia Driessen of Adcieo

“The more I learn the more excited I get.”

- Johnny Cash

2 #bbcon - Presented by Thalia Driessen of Adcieo

Thank You for Joining Us Today!

Technology Solutions

Virtual Assistant

Web Design &

Development

Chat Support

Custom Development & Implementation

Debbie.snyder@adcieo.com

2 #bbcon - Presented by Thalia Driessen of Adcieo

Questions / Comments?

2 #bbcon - Presented by Thalia Driessen of Adcieo