26
YOUR LOGO YOUR LOGO Presented by the Zmags Customer Service Team How to Create a Digitally Optimized Publication

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

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

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

Facebook

• 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

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

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

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

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

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

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

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

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

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

PDF

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

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

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

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

PDF

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

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

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

Confidential and Proprietary 1

Contact Us

[email protected]

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

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

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

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

Page 22

Do You Have

Any Questions?