designing for showcase workshop. · 1. choose a consistent hotspot design that will work across all...

31
Designing for Showcase Workshop. GUIDE FOR GRAPHIC DESIGNERS

Upload: others

Post on 15-Jul-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Designing for Showcase Workshop.

GUIDE FOR GRAPHIC DESIGNERS

Page 2: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Built for a mobile sales force, Showcase Workshop entrusts marketing and sales managers as well as their agency with an unprecedented level of control over their branding.

Give your clients elegance, versatility, and control.

Showcase Workshop closes the gap between the creation of sales materials at headquarters or within your agency, and their use in face-to-face sales presentations.

It’s a complete collateral management system that’s never out of date.

2

Page 3: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Leading brands selling everything from energy to creativity, from motor vehicles to education use Showcase Workshop to:

Control content from any web browser

Eliminate print and distribution costs

Coordinate an international sales force

Ensure a consistent sales experience

With Showcase Workshop, salespeople in the field have the product information and software integration they need to save time, sell more, and boost revenue.

But to succeed, they need enticing, intuitive, branded presentations.

That’s where this Designer’s Guide fits in.

In the next 15 minutes, we’ll cover:

How to get started quickly (3 steps, pages 5 -19)

the specs (pages 20-22)

The three new revenue streams Showcase Workshop offers through its creative partners program (page 27)

Inspiring examples of Showcase designs (28-30)

They need your smart design.

3

Page 4: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

How do enterprises use Showcase to distribute & control their existing collateral?

Create a Showcase Workshop account

a. Create a content map

b. Design menu screens

c. Upload sales/marketing collateral and menu screens to Showcase Workshop file library

d. Assemble content in the Showcase Workshop editor

Add users and publish the showcase

The team uses Showcase in meetings to impress customers and prospects

They nail more sales!

Prospects ask for more information. The sales team sends them links to content from Showcase

The Showcase Workshop app collects analytic data along the way. Admin users can check analytic and activity data across all users in the account

The insights from analytic data is incorporated into future updates

1

23 4

5

8

6

7

4

Page 5: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Three steps to a smoother design process.Rejoice! There is no ‘one best way’ to design a Showcase presentation.

In fact, that limitless potential is probably what attracted your creative mind in the first place.

Here’s 3 tips to ease your design process and please the team.

Organise a content map

Design menu screens

Build the showcase

5

Page 6: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Organise a content map.Where a website needs a site map, a Showcase presentation needs a content map.

6

Page 7: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Some of your clients will have a shipping container’s worth of collateral to cram into their Showcase. A content map will keep you sane, and keep them happy.

Menu Screen

Video played within Showcase

PDF/Presentation viewed within Showcase

Password-protected content

External link (requires Internet access)

7

Page 8: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

08

Time to get your hands dirty: Design menu screens.Design your customers’ menu screens using your regular design software, and save them as images using the specs on pages 20-22.

Showcase’s blank template option offers the opportunity to reinforce your client’s brand, and the overall intent of their Showcase presentation.

The following pages reflect Showcase’s design best practices. Bonus points for big buttons!

8

Page 9: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

1. Choose a consistent hotspot design that will work across all locations of the Showcase.

2. Breadcrumbs help users to remember where they are within the Showcase.

3. Clear the area around the ‘Menu’ button (located in the bottom left of the screen), the ‘Home/Back’ button (located in the upper left corner of the screen) and the ‘Share’ button (top right).

Even though the hotspots change size, they all adhere to the same basic shape. Users never have to wonder.

9

Page 10: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

These two menu screens don’t use consistent hotspot devices, forcing the user to think about what a hotspot is on each screen, detracting from the overall experience and impact.

Not so much.

10

Page 11: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

In some cases, you’ll have to change the hotspots’ placement to suit your design. With a consistent appearance, different placement won’t distract your prospect. For an example of smart use of hotspots, check out these screenshots from Career NZ. See how their position changes throughout the Showcase, but retains a consistent appearance?

The user never questions which visual device is a hotspot in this Showcase presentation.

Consistent Appearance. Flexible Placement.

11

Page 12: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Likewise with these examples from Z Energy: consistent appearance, flexible placement.

12

Page 13: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Here’s some final examples from Maxava. Say it with us now: Consistent appearance. Flexible placement.

13

Page 14: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

There are three locations on the screen that are off limits to your hotspots: the top left, top right, and bottom left corner of the screen (regardless of the tablet’s orientation). This is where the Showcase app reserves real estate for the back button, share button, and menu button, respectively.

Keep clear for back button

Keep clear for share button

Keep clear for menu button

Worth Repeating:

14

Page 15: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Here’s where it all comes together.

Build the showcase.

The following five-step process assumes you’ve already designed your menu screens, using the specs on pages 20-22 ,and have uploaded them to the Showcase Workshop file library.

15

Page 16: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

1. Create a new ShowcaseWhen you create a new showcase from the Home tab, you have a couple of options:

• New showcase from template

• New blank canvas

The templates have background images, hotspots, and sample files already in place as a starting point. Useful for those just getting to grips with Showcase, but designers will quickly graduate to the ‘blank canvas’ option.

This is a single blank slide you can start with.

You can select the exact device orientation and aspect ratio you want to work with if you know it.

If you don’t know the ratio, or are designing for multiple differently sized devices, fear not - all sizes still scale gracefully on different screens, with subtle letterboxing where necessary.

Building basics.

16

Page 17: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

The default ratio of 4:3 will work great in almost any situation, or search for the device type + ”aspect ratio” online.

The blank canvas chooser will also tell you the best pixel dimensions for background images in your chosen ratio.

Once you’ve chosen the settings you want, click ‘Make it!’ to get cracking with your brand new showcase.

2. Set a backgroundSelect ‘Set background’ from the side bar.

Choose your main menu design file from the file library.

3. Create a new hotspotShowcase ‘hotspots’ allow you to add interactions which provide access to your collateral.

Click the ‘New hotspot’ button.

A new hotspot will be created.

17

Page 18: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

4. Position & resize the hotspotTo position a hotspot, click to highlight the hotspot you wish to position.

Drag with the mouse cursor to move the hotspot to a position on your showcase.

To resize a hotspot, use the drag handle at the bottom right corner of the hotspot.

For ‘pixel perfect’ resizing, you can also manually adjust the width and height properties of a hotspot from the side bar.

5. Add content to the hotspotClick on the hotspot you wish to add content to, and the ‘Hotspot Editor’ will appear on the right of your screen.

Choose from images, video, documents, URL or a sub-menu.

That’s it! Once you have built a complete showcase, hit PUBLISH at the top right of your editing screen.

18

Page 19: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Additional features:PIN protect – Restrict access to materials in your showcase. Clicking a hotspot with PIN protection will prompt the user for a 4-digit code. You can assign a unique PIN to each protected area. (Especially handy for trade show situations.)

Shared Content – The shared content feature allows you to create a list of shareable files to be associated with your showcase. You can add content from your file library, or upload new content to the list.

For more tips and full details on how to use these other functions, download the companion, Admin User Guide: http://showcaseworkshop.com/user-guides/Showcase-User-Guide_AdminUser.pdf

What do you reckon?Do you have a tip for designing Showcase presentations? Do you have suggested updates for this guide? We’d love for you to share.

If your suggestion is awesome, we’ll send you one of our very smart Showcase Workshop t-shirts, as modelled below by Connor.

Email us: [email protected]

Showcase Workshop User Guide

Version 4.1

Administrator

19

Page 20: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

The specs.Ready for launch? We thought so! Just keep these specs in mind while you’re designing, and you’re sorted.

Landscape dimensions are given; for portrait, simply reverse the values.

There is no file size limit. However, your client’s file library in their Showcase workshop should not exceed 1000GB in total.

20

Page 21: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

...iPads

Ratio: 4:3

Dimensions: 2048 x 1536 pixels

Resolution, iPad 3, 4, Air & Air 2: 264 ppi

Resolution, iPad Mini 2 & Mini 3: 326 ppi

...Samsung Galaxy, Google Nexus, Microsoft Surface 1 & 2

Ratio: 16:9

Dimensions: 1280 x 752 pixels

Resolution: 150 ppi

...Microsoft Surface 3

Ratio: 3:2

Dimensions: 1080 x 720 pixels

Resolution: 216 ppi

Any showcase you build can be used across any device. Depending on the size, some black space may appear around the edge, but the showcase will still work perfectly.

For menu screen images on...

21

Page 22: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Video formatsShowcase Workshop has a built-in encoder; all standard video formats (mov, mp4, m4v, avi, wmv, flv, mpg, mpeg) will work.

Other document formatsThe most common document types will appear in Showcase without modification, including: PDF, PNG, JPEG, PPT, XLS and DOC.

Working with MS Office: Sometimes there is a conflict between complex Microsoft files (e.g. Powerpoints with many layers) and the iPad’s ability to render those files accurately. If you are using any Microsoft Office files, we recommend saving them as PDFs before uploading them to Showcase Workshop.

Showcase does not support animation in Powerpoints at this time.

Color FidelityWork in RGB color. If using CMYK color, the tablet’s screen might not render the colours properly.

Minimum Font Size The minimum readable font size on iPad is 14pt. We suggest you use 14pt or larger for all body copy.

22

Page 23: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

From the frontlines:Adding Showcase to your agency’s wheelhouse.

23

Page 24: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

In early 2013, Adam’s team wowed Careers NZ, a public agency, by creating a fresh Showcase presentation under a tight deadline for an upcoming expo. The client was impressed. Find Careers NZ’s case study on the Showcase Workshop website at http://showcaseworkshop.com/user-guides/Showcase-Case-Study-Careers-NZ.pdf

Curious about adding Showcase presentations to your creative agency’s suite of services? According to Adam Blackwell, the owner of Stun, it’s a great way to add new revenue streams to your business.

Showcase Software Ltd: Was Careers NZ already a client of Stun’s?

Adam Blackwell: No, they weren’t. They only discovered Showcase two weeks before a career expo, and they really wanted to make their booth more interactive. With a two-week deadline, we started with a two-hour dive to make sure that what they thought they needed was what they actually needed.

Showcase: Is two weeks enough time when working with a new client?

Adam: Yes. If the resources are readily available and your agency has the bandwidth, you can turn around a Showcase in even less time. Client expectations have been set by the time it takes to design and update websites which are comparatively more complex.

24

Page 25: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Showcase: What especially impressed the client with your team’s work?

Adam: Our speed. We took days to turn around the initial design. They were even more pleased by the speed of subsequent changes and updates to the materials. Showcase makes it incredibly easy.

Showcase: What raw materials did you have to work with?

Adam: We ran with a couple of basic PowerPoint decks, a Word document, a handful of emails, and their style guide. We quickly mocked up a suggested visual approach - just a few screens - for their feedback.

Because tablets are still relatively new, clients aren’t as familiar with their format. So you have greater leeway with your design suggestions.

Showcase Software Ltd: How did you decide on content organization?

Adam Blackwell: Some clients have a hard time organizing their content first; some prefer to (or have to) organize as they go. You do have to start somewhere, though, so I suggest determining a few goals for the Showcase first. The organization of the content will flow from there.

For the kind of personal presentations that Showcase fosters, the priority isn’t educating the viewer on every possible aspect of all of your offerings. It’s about allowing the user to discover the key information that’s relevant to her in the smoothest fashion.

Showcase Software Ltd: Why would you recommend Showcase to other creative agencies?

Adam Blackwell: Showcase allows you to present information in a more intuitive approach than even a website. It gives you so much versatility to apply creative thinking however you want. Once someone decides to explore your Showcase, he’s on your desired path.

If you have some experience with design, Showcase is very easy to use. You don’t need to hire a developer, and you can still meet your clients’ emerging needs for a mobile presence.

25

Page 26: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Creative partner programBoost your agency’s revenue with Showcase.

26

Page 27: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Have you watched as your clients diverted their advertising budgets toward app development?

That’s revenue siphoning out of your budget.

Many of your clients don’t need a custom app coded from the ground up. They just need something that will align with their brand, update smoothly, and allow them to keep pace with the rapid advancement of technology.

They just need you to introduce them to Showcase.

Create three new revenue streams for your agency.

Revenue Stream #1: Get 20% of every Showcase subscription you sign up.

Today, enterprises around the world are paying a flat $20 USD/user/month fee for access to Showcase. And they’re loving it. Why not tap into that demand, and resell Showcase to your clients? For every subscription that you sign up, your agency will earn 20%, month after month after month.

Revenue Stream #2: Create or adapt their collateral for Showcase.

Though Showcase is easy enough for your clients to use out of the box, they’ll probably want some out-of-the-box creativity from your agency. They’ve trusted you to plan, design, and execute smart sales and marketing materials in the past. That’s just what they’ll need when they subscribe to Showcase.

Revenue Stream #3: Manage your clients’ regular updates.

Some of your clients may need to update their sales collateral regularly to comply with government regulations or frequent changes in their industries. With Showcase, it’s easy to offer this additional service on a retained basis.

If your agency already provides content or user management services, why not bring that offering into the mobile era?

Add three new revenue streams to your agency today.Learn more about our Creative Partner Program by emailing us.

27

Page 28: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Here’s some sample menu designs for inspiration.

28

Page 29: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

NZTEPride & Joy

Spark The Warehouse

29

Page 30: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

RaboDirectVodafone

Now go create Showcase magic!

30

Page 31: Designing for Showcase Workshop. · 1. Choose a consistent hotspot design that will work across all locations of the Showcase. 2. Breadcrumbs help users to remember where they are

Showcase and the Showcase logo is © Showcase Software Limited 2016. All rights reserved.

@showcaseworks

Showcase Software Limited

US Head Office 510 Red Hill Avenue

San Anselmo, CA 94960, USA

New Zealand Office 19 Blair Street, Te Aro

Wellington, 6149, New Zealand Phone: +64 4 385 6572

Email: [email protected]