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


But First … Why Talk About Trends?



2014 Web Design Trends

What is Responsive Web Design (RWD)?

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


Why It Matters

Credit: cruxcollaborative.com / data: exacttarget.com


Fixed Layout


Fluid Layout


Adaptive Web Design


Responsive Web Design


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

packdog.com

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


Example


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


“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


What is Sticky Content?

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


What Makes it Stick

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


Example




• 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


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


What is Flat Design?

Flats where its at

Wordcloud - usabilla.com


Skeuomorphic vs. Flat

Flats where its at


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

• Simple shapes• Large Hero Graphics• Illustration / Iconography


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

• Navigation and Content – Can you streamline it

• Branding – Does it correlate


“Simplicity is the keynote of elegance”

- Coco Chanel


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


The Future…The Internet of Things


The Future…Natural User Interface


The Future…Virtual Reality


“The future depends on what you do today.”

-Mahatma Gandhi


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


http://www.responsinator.com/

http://responsivedesignchecker.com/

http://www.alistapart.com/

http://responsive.rga.com/

http://styletil.es/

http://mediaqueri.es/

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


http://www.Sethgodin.typepad.com/

http://www.Techsoup.org/

http://Ideas.ted.com/

http://www.Webbyawards.com/

http://www.SmashingMagazine.com/

https://www.google.com/fonts



http://designinstruct.com/inspiration-web-design/google-fonts-examples/



http://www.fontsquirrel.com/tools/webfont-generator



http://jeffbullas.com/

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

- Johnny Cash


Thank You for Joining Us Today!

Technology Solutions

Virtual Assistant

Web Design &

Development

Chat Support

Custom Development & Implementation

[email protected]


mailto:[email protected]

Questions / Comments?
