how to create a digitally optimized publication re-designing your … · 2011. 9. 28. · • best...
TRANSCRIPT
![Page 1: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/1.jpg)
YOUR LOGO YOUR LOGO
Re-designing your content to Online
Presented by the Zmags Customer Service Team
How to Create a Digitally Optimized Publication
![Page 2: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/2.jpg)
Page 2
Presentation Outline
Defining Goals & Objectives
Analyzing your environment
Options & opportunities
Key design elements to improve readability
Brochure / magazine best practices
1
2
3
4
5
E-commerce / catalog best practices
Cross Platform best practices
Test, Track, Analyze & Refine
6
7
8
Questions & Answers 9
![Page 3: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/3.jpg)
Page 2
Presentation Outline
Defining Goals & Objectives
Analyzing your environment
Options & opportunities
Key design elements to improve readability
Brochure / magazine best practices
1
2
3
4
5
E-commerce / catalog best practices
Mobile best practices
Track, Analyze & Refine
6
7
8
Questions & Answers 9
![Page 4: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/4.jpg)
YOUR LOGO YOUR LOGO
Re-designing your content to Online
Presented by the Zmags Customer Service Team
1. Strategic Objectives & Opportunities
![Page 5: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/5.jpg)
Page 4
Goals & Objectives
Identifying your key macro, micro goals & objectives
Engagement
Conversions Bounces
Subscribe
Clicks
Likes
Call to Action
Add to Basket
Shares
Audience
Ads Time
![Page 6: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/6.jpg)
Page 5
Analyzing your environment
Evaluate your resources &
skills internally, including:
• Time
• Skills
• Professional Services
Evaluate your content that you can utilize, including:
• Images
• Videos
• RSS, Social Media
Evaluate your audience and their needs, including:
• Demographics
• Reading Habits
• Location / Language
• Needs & Wants
Evaluating your competitors and their strategy, including:
• Strategy
• Key Successes
• Delivery
![Page 7: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/7.jpg)
Page 6
Options & Opportunities
Options to reach your goals within your environment
Macro: Conversions Macro: Audience Micro: Add to basket Micro: Subscribes
How do I increase overall
basket conversions on
my site?
How do I expand / reach
a new audience?
How do I increase add
to basket events in my
publication?
How do I increase
subscriptions on my
publication?
Options • Design pages with
more / less products
per page (Impulse)
• Use embedded viewer
for consistent brand
• Use product
performance statistics
to redefine content
• Great product visuals
• Clear instructions page
• Promote publication
share function
• Promote crop & email
function
• Use surveys to interact
with audience
• Target content to
different demographics
• Clear products on a
page
• Clear & positioned
CTA
• Use flash basket
enrichments
• Inpage product
slideshows
• Promote sharing
with Facebook like
• Subscribe button
on viewer
• Subscription form
on publication intro
page
• Restrict with
security
Opportunities • Seamlessly integrate
with existing e-
commerce software
using CommercePro
• Use Zmags
professional services
for advice
• Deploy to Facebook
• Utilize facebook
demographic
advertising
• SEO optimization
• Paid search (Google)
• Wibiya toolbar
• Utilize product
popups within
CommercePro
• Deploy preview
version to
• Utilize preview
version with signup
form
![Page 8: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/8.jpg)
YOUR LOGO YOUR LOGO
Re-designing your content to Online
Presented by the Zmags Customer Service Team
2. Key Design & Readability Elements
![Page 9: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/9.jpg)
Page 8
Preliminary Design Recommendations
Square page = more space
• Best Size: 8.5 x 9.33 Inch
• 150 dots per inch
Better Layout = Easy Read
• F Shaped Layout
• CTA on middle right
• Strong cover page
Quality / Quantity?
• 10 – 60 Pages Optimum
• 50% users read all pages
• 20% exit at cover page
• 5% exit at spread 1 & 2
Larger fonts = No Zooming
• 12% higher time spent pp
• Best Fonts: Georgia,
Verdana , Rockwell
• Best Font Size: 13pt +
![Page 10: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/10.jpg)
Page 9
Other Key Design Elements
Key factors contributing to an engaging publication
1471mille Simplicity
Colour
Psychology
Triggers
Core
Design
Elements
![Page 11: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/11.jpg)
Page 10
Power of Visuals - Great Visual Design Matters
Key factors to consider when using visuals
Show & Tell
High Image
Ratio
Clear CTA
Intuitive
Media Emotion
![Page 12: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/12.jpg)
YOUR LOGO YOUR LOGO
Re-designing your content to Online
Presented by the Zmags Customer Service Team
3. Brochure / Magazine Best Practices
![Page 13: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/13.jpg)
Key Brochure / Magazine Best Practices
Pages
Square Page Size (8.5 x 9.33)
20 – 40 pages
Large font sizes
Follow the eye layout
Branding
Use vibrant background
Use only core features
Use complimentary colors
Embed within site
Engagement
Lots of interactivity
Tell a story / engage reader
Flash Animation
Popups
Cover & Intro Page
Use simple animation
Deeplink to content on cover
Video on intro page
Capture subscribers with form
![Page 14: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/14.jpg)
YOUR LOGO YOUR LOGO
Re-designing your content to Online
Presented by the Zmags Customer Service Team
4. Ecommerce / Catalog Best Practices
![Page 15: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/15.jpg)
Key Catalog / Commerce Best Practices
Pages
Square Page Size (8.5 x 9.33)
40 - 100 pages
Large font sizes
Follow the eye layout
Products per page
Colors & Visuals
Color Psychology
Good product visuals
Videos
Engagement
Less interactivity
Use clear CTA
Basket / Pulse Animation
Product Popups
Integration
Embedded viewer
Integration with shopping
basket provider
Facebook page
Sharing (Wibiya)
![Page 16: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/16.jpg)
Cross Platform Best Practices
Pages
Square Page Size (8.5 x 9.33)
40 - 100 pages
Large font sizes
Follow the eye layout
Design for single pages
Branding & Visuals
Branding viewer in line with
site
Use strong visuals
Engagement
Embedded videos on page
Clear CTA embedded into
Choose right link effect
Limitations
Design with no flash animation
No capability for popups
![Page 17: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/17.jpg)
YOUR LOGO YOUR LOGO
Re-designing your content to Online
Presented by the Zmags Customer Service Team
5. Cross Platform Best Practices
![Page 18: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/18.jpg)
YOUR LOGO YOUR LOGO
Re-designing your content to Online
Presented by the Zmags Customer Service Team
6. Test, Track, Analyze & Refine
![Page 19: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/19.jpg)
Key Catalog / Commerce Best Practices
Pages
Square Page Size (8.5 x 9.33)
40 - 100 pages
Large font sizes
Follow the eye layout
Design for single pages
Branding & Visuals
Branding viewer in line with
site
Use strong visuals
Engagement
Embedded videos on page
Clear CTA embedded into
Choose right link effect
Limitations
Design with no flash animation
No capability for popups
![Page 20: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/20.jpg)
YOUR LOGO YOUR LOGO
Re-designing your content to Online
Presented by the Zmags Customer Service Team
6. Track, Analyze & Refine
![Page 21: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/21.jpg)
YOUR LOGO
Test, Track, Analyze & Refine Process
4 Steps to carrying out a redesign of your existing content based on statistics
Identify the key metrics on your publication:
Reader engagement time
Time spent per page
Read through rates
Bounce rates
Zoom time
Perform Internal
Testing
Testing
Identify Key
Metrics
Track Analyze
Analyze & find
opportunities
Refine
Refine Content
Analyze content reporting & identify opportunities in mobile / facebook statistics:
Mobile statistics
Facebook statistics
Referrer statistics
Commerce Analytics:
Funnel stats
Product performance
Heatmap statistics
Refinement & Repurposing of content based on findings:
Refine areas of content
Perform internal testing on your publication:
Test display on all devices
Test all links
Gather feedback from internal stakeholders
![Page 22: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/22.jpg)
Confidential and Proprietary 1
Contact Us
USA: +1 877 239 7522United Kingdom: +44 (0)800 975 0242Denmark: +45 70 20 80 06
To learn more about Zmags and what we do:[email protected]
Phone: +1 866 989 6247
![Page 23: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/23.jpg)
YOUR LOGO YOUR LOGO
Re-designing your content to Online
Presented by the Zmags Customer Service Team
Customer Success Services
![Page 24: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/24.jpg)
YOUR LOGO YOUR LOGO
Re-designing your content to Online
Presented by the Zmags Customer Service Team
Community Workshop & Resources
![Page 25: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/25.jpg)
Page 21
Community Workshop
The workshop area contains:
• 6 workshop sessions
http://community.zmags.com/workshop_redesign
Resource Pack
The resource pack contains:
• Page template
• Intro page template
• Flash components
http://supportdk.zmags.com/webinar/redesign.zip
![Page 26: How to Create a Digitally Optimized Publication Re-designing your … · 2011. 9. 28. · • Best Size: 8.5 x 9.33 Inch • 150 dots per inch Better Layout = Easy ReadLarger fonts](https://reader035.vdocuments.site/reader035/viewer/2022071010/5fc894ee01d80a2df466079e/html5/thumbnails/26.jpg)
Page 22
Do You Have
Any Questions?