2 Introductions Debbie Snyder VP of Client Solutions...
-
Upload
emmeline-poole -
Category
Documents
-
view
218 -
download
1
Transcript of 2 Introductions Debbie Snyder VP of Client Solutions...
![Page 1: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/1.jpg)
![Page 2: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/2.jpg)
2
Introductions
Debbie SnyderVP of Client Solutions
Thalia DriessenCreative Director, Chief Trend Spotter
![Page 3: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/3.jpg)
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
![Page 4: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/4.jpg)
4
![Page 5: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/5.jpg)
5
Timely or Timeless: Why Trends Matter
Web 1.0 Web 2.0 Semantic Web
1993 - 2003 2004-2010 2011-2015 2016 & beyond
MobileWeb
![Page 6: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/6.jpg)
6
Timely or Timeless: Why Trends Matter
![Page 7: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/7.jpg)
7
Timely or Timeless: Why Trends Matter
![Page 8: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/8.jpg)
8
Timely or Timeless: Why Trends Matter
![Page 9: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/9.jpg)
9
FLATRESPONSIVE OR ADAPTIVE?
CUSTOM FONTS Cards & Tiles
sticky content
microinteractions
Hero Graphics
![Page 10: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/10.jpg)
“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
![Page 11: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/11.jpg)
11
Responsive Web Design or Bust
• Single Codebase
• Any Screen Size
• Any Platform
• Any Orientation
![Page 12: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/12.jpg)
12
Why It Matters
Credit: cruxcollaborative.com / data: exacttarget.com
![Page 13: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/13.jpg)
13
Fixed Layout
• Also called static layout
• Overall width is a set size (pixels)
• More controlled placement of elements
• Not ideal for mobile viewing
![Page 14: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/14.jpg)
14
Fluid Layout
• Also called liquid layout
• Percentage based
• Some elements can be fixed (margins)
• Less control of specific elements (text)
![Page 15: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/15.jpg)
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
![Page 16: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/16.jpg)
16
Responsive Web Design
• Fluid percentage based layouts
• Flexible content blocks, scalable type
• Use of Media Queries
• Like a series of fluid layouts
![Page 17: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/17.jpg)
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
![Page 18: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/18.jpg)
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
![Page 19: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/19.jpg)
“…Make it memorable. Make it inviting to look at. Make it fun to read.”
![Page 20: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/20.jpg)
20
What is Sticky Content?
• Content that keeps visitors on your site
• Encourages visitors to return frequently
• Inspires visitors to share your content
![Page 21: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/21.jpg)
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
![Page 22: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/22.jpg)
Example
![Page 23: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/23.jpg)
![Page 24: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/24.jpg)
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
![Page 25: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/25.jpg)
“Simplicity is the keynote of elegance”
- Coco Chanel
![Page 26: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/26.jpg)
26
What is Flat Design?
Flats where its at
Wordcloud - usabilla.com
![Page 27: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/27.jpg)
27
Skeuomorphic vs. Flat
Flats where its at
![Page 28: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/28.jpg)
• Few / No Added Effects
• Solid, Vibrant Colors
• Unique Typography
• Conventional Placement
• Simple Shapes
• Large Hero Graphics
• Illustration / Iconography
• Contrast
![Page 29: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/29.jpg)
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.
![Page 30: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/30.jpg)
“The future depends on what you do today.”
-Mahatma Gandhi
![Page 31: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/31.jpg)
31
#1 - Typography – Non-boring Fonts
• No longer limited to the standards
• Google Fonts
• Font Embedding - @font-face
• Sizing and Spacing
![Page 32: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/32.jpg)
32
#2 - Large Hero Graphic
• Single High Quality Image
• Emotive
![Page 33: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/33.jpg)
33
#3 - Ghost Buttons
• No solid fill – overlaid on images / various backgrounds.
• Clean and minimal
Example from Google.com/nexus
![Page 34: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/34.jpg)
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
![Page 35: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/35.jpg)
35
#5 – Long Pages
• Vertical scrolling is more common again. Use of sections.
• Floating Nav - stays on top of page as user scrolls down.
![Page 36: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/36.jpg)
36
#6 - Cards & Tiles
• Influence by Pinterest and Windows Metro
![Page 37: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/37.jpg)
“The future belongs to those who believe in the beauty of their dreams.”
- Eleanor Roosevelt
![Page 38: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/38.jpg)
38
The Future…The Internet of Things
![Page 39: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/39.jpg)
39
Virtual Reality
![Page 40: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/40.jpg)
40
Natural User Interface
![Page 41: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/41.jpg)
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
![Page 42: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/42.jpg)
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
![Page 43: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/43.jpg)
43
Any Questions?
![Page 44: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/44.jpg)
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.
![Page 45: 2 Introductions Debbie Snyder VP of Client Solutions Debbie.snyder@adcieo.comThalia.driessen@adcieo.com Thalia Driessen Creative Director, Chief Trend.](https://reader036.fdocuments.us/reader036/viewer/2022062423/56649e0e5503460f94af8d15/html5/thumbnails/45.jpg)
45
Thank You for Joining Us Today!
Technology Solutions
Virtual Assistant
Web Design &
Development
Chat Support
Custom Development & Implementation