2

Introductions

Debbie SnyderVP of Client Solutions

Debbie.snyder@adcieo.com

Thalia.driessen@adcieo.com

Thalia DriessenCreative Director, Chief Trend Spotter

3

What We’ll Cover Today

• Timely or Timeless: Why Trends Matter

• Current Web Design Trends: The Standouts

• The Future: Near and Far

• Trend Toolbox: Resources to Keep Ahead of the Curve

• Q&A

4

5

Timely or Timeless: Why Trends Matter

Web 1.0 Web 2.0 Semantic Web

1993 - 2003 2004-2010 2011-2015 2016 & beyond

MobileWeb

6

Timely or Timeless: Why Trends Matter

7

Timely or Timeless: Why Trends Matter

8

Timely or Timeless: Why Trends Matter

9

FLATRESPONSIVE OR ADAPTIVE?

CUSTOM FONTS Cards & Tiles

sticky content

microinteractions

Hero Graphics

“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

11

Responsive Web Design or Bust

• Single Codebase

• Any Screen Size

• Any Platform

• Any Orientation

12

Why It Matters

Credit: cruxcollaborative.com / data: exacttarget.com

13

Fixed Layout

• Also called static layout

• Overall width is a set size (pixels)

• More controlled placement of elements

• Not ideal for mobile viewing

14

Fluid Layout

• Also called liquid layout

• Percentage based

• Some elements can be fixed (margins)

• Less control of specific elements (text)

15

Adaptive Web Design

• Use of media queries for device detection

• Like an assortment of fixed layouts

• Some elements can be fluid

• More customized approach / more coding

16

Responsive Web Design

• Fluid percentage based layouts

• Flexible content blocks, scalable type

• Use of Media Queries

• Like a series of fluid layouts

17

• Grid-Based / Modular

• Content Driven

• Use of Typography

• Responsive Imagery

packdog.com

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

Characteristics of Good Responsive Design

18

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

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

20

What is Sticky Content?

• Content that keeps visitors on your site

• Encourages visitors to return frequently

• Inspires visitors to share your content

21

What Makes it Stick

• Memorable

• Emotional

• Credible

• Unexpected

• Simple & Concrete

• Relatable*

* Research has shown Millennials are more likely to trust a complete stranger than a company. It’s why user-generated content is considered far more compelling than any content a brand produces. - JeffBullas.com

Example

24

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

“Simplicity is the keynote of elegance”

- Coco Chanel

26

What is Flat Design?

Flats where its at

Wordcloud - usabilla.com

27

Skeuomorphic vs. Flat

Flats where its at

• Few / No Added Effects

• Solid, Vibrant Colors

• Unique Typography

• Conventional Placement

• Simple Shapes

• Large Hero Graphics

• Illustration / Iconography

• Contrast

29

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 – Correlation with your overall brand voice / look and feel.

“The future depends on what you do today.”

-Mahatma Gandhi

31

#1 - Typography – Non-boring Fonts

• No longer limited to the standards

• Google Fonts

• Font Embedding - @font-face

• Sizing and Spacing

32

#2 - Large Hero Graphic

• Single High Quality Image

• Emotive

33

#3 - Ghost Buttons

• No solid fill – overlaid on images / various backgrounds.

• Clean and minimal

Example from Google.com/nexus

34

#4 – Microinteractions

• Engaging the user on single tasks

• From Dan Saffer’s new book Microinteractions, it’s the details that make systems feel more human …

Example from Virginamerica.com

35

#5 – Long Pages

• Vertical scrolling is more common again. Use of sections.

• Floating Nav - stays on top of page as user scrolls down.

36

#6 - Cards & Tiles

• Influence by Pinterest and Windows Metro

“The future belongs to those who believe in the beauty of their dreams.”

- Eleanor Roosevelt

38

The Future…The Internet of Things

39

Virtual Reality

40

Natural User Interface

41

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 ResponsiveStyle Tiles - styletil.es

Inspiration:Media Queries - mediaqueri.es

42

Trend Toolbox

IdeasSethgodin.typepad.com

Techsoup.orgIdeas.ted.com

http://www.trendhunter.com

Design InspirationWebbyawards.com

SmashingMagazine.com

Typographywww.google.com/fonts

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

Content (Sticky)jeffbullas.com

43

Any Questions?

44

Special Take-Away

Is it time for a redesign?

Or maybe a refinement?

Take our Web Design

Self-Audit to see where you stand.*

*Each participant will receive a free copy.

45

Thank You for Joining Us Today!

Technology Solutions

Virtual Assistant

Web Design &

Development

Chat Support

Custom Development & Implementation

Debbie.snyder@adcieo.com