Transcript Timely or Timeless

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