Image for post
Image for post

Making extensive product presentations look elegant

Product presentation is a subtle art, requiring a delicate balance of images and information. They can also quickly get out of hand, sprawling over one hundred slides rather easily. Readymag editorial team asked Bohdan Broviy, a creative director at Edsson Software and a web design tutor at Kyiv-based Meat Studies, how to master this tricky task.

Put your decisions on display, but explain them

Typically I use presentations to show customers a finished design concept, be it a webpage, mobile app, or logo. Another frequent case is the presale — a stage of negotiations where we demonstrate we’re ready to resolve the customer’s problem prior to signing a deal.

The key principle is not to just show off the design, but to explain how we reached our result. Customers should feel that you fully understand their issue. If you present only the final picture they can always say “I don’t like it. The deal is over.” But if you explain your reasoning, you create the possibility for sustaining a discussion.

I have a rule of thumb regarding the number of slides: you’ll need at least five, with explanations for every design element. If the system is extra complex — say, if your task is to redesign a company’s entire website, or create an app from scratch — the presentation likely requires 100–150 slides, or even more.

Image for post
Image for post

Presentation and prototype is a match made in heaven

But after a while designers usually realize the situation is better than it seems. A presentation allows for some important opportunities — the main one, in my opinion, being the chance to tell a consequential story. You can plan in advance when and where your customers will encounter new design elements, what they need to know by that time, and how they might react.

For instance: say we show our customers an app logo. We explain the story behind our choice of color and fonts. Then, in the same presentation, the customers can click on the logo and view the first screen of the app. The graphic design, the explanation of your decisions, and the UX presentation, all in one.

This mockup looks static, but in fact, you can click on it to see the prototype of the app in use. Combining presentation and prototype helps you display the design quicker and more efficiently. A prototype is better than a hundred words of text.

Also, sudden interactivity might be the feature that makes your clients remember you — or, at the end of the day, make a deal with you. Even if the design doesn’t exactly match the customer’s desire, they’ll see how good you are. And when you get closer to presale this might be your most important advantage. Nobody expects the first version to be perfect.

The presentation should be transferable

Before, we had to send files via email or file sharing services, which isn’t the best way of doing things: requiring clients to register with a third-party service, having a third-party service menu potentially interfere with your menu, etc. Readymag helps solve all these problems.

Another useful feature is password protection. A client sees that no one else can possibly access their prototype. It’s better for your reputation, and your client’s.

Image for post
Image for post

The custom domain feature also helps a lot. If your domain name is chosen wisely, it will help sell your design long after the presentation itself. Even a month or two afterward a prospective customer can remember the web address and access the prototype. It gives them the chance to consider your proposal longer — and possibly decide to choose your company for the job.

Also, you’ll always have easy access to your projects. You won’t need to look for a link: you can just remember it.

Now for something more hands-on.

Layout and animation are deeply interconnected

On Load or On Hover animations can also cause problems if the widget you’re animating is too short: users stay there for only a brief moment, and the video won’t play properly.

On the other hand, sometimes I use vertical layouts to utilize particular animation techniques. Here’s an example.

What you see here is a logo presentation. It was intended to show the prospective customer how our logo idea was fashioned as a combination of the letters of their company name. That’s why we needed to give them an opportunity to scroll back and forth at their own pace. On Scroll animation is ideal for a task like this.

Useful little features

  • I use stock photos a lot. Sometimes you just need a generic landscape, and the ability to find and incorporate a stock photo straight from the editor really saves time.
  • Another important technique is video embedding. It’s very useful in making a background more engaging.
  • It’s important to remember that Vimeo and Youtube are different in this respect. Youtube uploads a lower quality video really quickly, then it gradually improves. Vimeo, on the other hand, doesn’t offer an opportunity to play the video until it uploads the best quality version. So if you embed Vimeo your user might be shown an empty screen for a while. And if you embed Youtube your user might see a lower quality video until it finishes processing.
  • I use templates constantly. I have a cover slide template, a ‘last slide’ template, and a full-of-content slide template. It saves a lot of time.
  • It’s also wise to realize that clicker is fully compatible with Readymag since it emulates left-and-right arrows on your keyboard. Magic Trackpad works too.

It’s easier than you think

It also helps to plan in advance. If you keep in mind that you’ll have to present your design concept, you can copy important things to your presentation draft on the fly. Working like this, I find it only takes me about 4 to 8 hours to put a quality product presentation together.

Image for post
Image for post

Love this story? Explore other pieces from Readymag.

Design digital publications and websites with Readymag.

Written by

The most elegant, simple and powerful web-tool for designing websites, presentations, portfolios and all kinds of digital publications.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store