2 Introductions Debbie Snyder VP of Client Solutions Thalia Driessen Creative 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.0Web 2.0 Semantic Web & beyond Mobile Web

6 Timely or Timeless: Why Trends Matter

7

8

9 FLAT RESPONSIVE 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 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.comresponsinator.com Responsive Design Checker - responsivedesignchecker.comresponsivedesignchecker.com Ideas: A List Apart –alistapart.com (search for responsive)alistapart.com This Is Responsive - responsive.rga.comresponsive.rga.com Visualizing Responsive Style Tiles - styletil.esstyletil.es Inspiration: Media Queries - mediaqueri.esmediaqueri.es

42 Trend Toolbox Ideas Sethgodin.typepad.com Techsoup.org Ideas.ted.com Design Inspiration Webbyawards.com SmashingMagazine.com Typography 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