News & Product Updates

summertour
15 Sep 2015

Creating & Designing Interactive Online Publications 

We have decided to start creating a set of demo catalogs that you can use for inspiration when you want to create and design your online publications. Our catalogs follow the latest design trends and are designed with different audiences in mind.

The first catalog we want to show you is "Summertour", which is a fictive travel agency offering holidays around the world. The online catalog focuses on selling travel destinations and hotels to the readers, but without having an actual shop. Summertour is instead all about creating a good vibe around holiday destinations and works more like a catalog for inspiration than for selling.

See the Summertour Catalog ➔ 

See Summertour's catalog if you want inspiration for:

  • Animations
  • Good use of images
  • Usage of pop-up pictures and frames
  • Video embedding
  • Usage of image slideshow

When designing your online catalogs it is quite important to keep a common thread. We want to create beautiful, interactive online publications and this starts with the colors you use to comply with the way animations behave.

Related read: Advantages and Constraints of Designing for Digital & Print

Another important thing in some types of flipbooks, especially the ones where readers are not supposed or required to read every page, is to have a table of contents in the beginning. You have to make it clear that the table of contents is clickable, and you can do so by using a smooth fade-in-fade-out animation.

Summertour Table of Contents

An example of a fade-in-fade-out animation pointing out the clickable elements.

Another thing that helps with branding is using a favicon and a pre-loader image. Most of the time the pre-loader image is the actual logo of the company. This makes the iPaper recognizable to readers even before it loads, so they know whose environment they are landing on. The favicon is the little icon that appears on the left of the address bar in most browsers. If someone bookmarks your iPaper, it will appear to the left of the name. This gives people a quick overview of what the bookmark is and raises even more awareness for your brand.

Pop-ups

Pop-ups are a good way to include content in your iPaper without having to put too much of it on one page or to create too many pages. A pop-up can incorporate images, text, and even other websites. They work quite smoothly. On spread 6-7 in our demo iPaper, you can see an icon that indicates "image." Once clicking on it, users will see a set of images from Bali. If you did not use a pop-up gallery, you would have to show all these pictures on other pages, or make them smaller and show them on the same page. However, with a pop-up gallery, you can just display them at full size - useful when you have to create catalogs that are not overwhelming the users with too much information and also catalogs that need to sell and inspire.

Summertour pop-up gallery

Example of a pop-up gallery

Pop-ups can be used for text, too, and not only for images. On spread 12-13, there is a small icon coming into the bottom right corner. Once clicking on it, the user sees a frame where there are an image, a text and even a Call-to-Action button. If there are many texts you need to show, but might not be that significant and relevant for everyone, hiding it in a pop-up is the best way to approach this. It is easy to find for people who need it, and it does not waste any space at all. It is a win-win.

Pop-up content

An example of a pop-up with text and images.

Another great way of having more content on your website is to bring the internet to your online catalog. How? - It is quite straightforward. You have to use a pop-up frame.

The pop-up frame allows you to take a whole website and show it to your readers in the environment of your catalog, and thatmakes it easy for the readers to see much information without leaving. With so many distractions on the internet, the likelihood of a user returning to your online flipbook after leaving it drops by quite a lot, so why not instead just keep them there and show them more information by using a frame?

See the Summertour Catalog ➔ 

Summertour pop-up frame

An example of a pop-up frame, a website visualized on top of your iPaper.

Animations

You can see animations on most pages, and there is a reason behind this. Studies show that animations if used proper, engage the readers and enhance their user experience, which is what you want to keep them on your iPaper for a longer period. You have to make sure you are not overusing them, as too many animations can become too much. In Summertour's iPaper, we employed animations as a way to attract the readers' attention without distracting them too much from their browsing.

Sometimes you can use animations to make the reader focus on some specific elements. It might be an image, a button she might not otherwise see or an icon. On the cover page of Summertour's catalog, there are six links at the bottom, but because there is a big splash image, many readers would not see them. By flying them in one at a time, they attract the readers' attention and even indicate that they can be clicked on.

Summertour cover

Most readers might not notice the links at the bottom, but the animations make them visible and, suddenly, also important in the eyes of the reader.

Use big images

Another thing you will predominantly notice in Summetour's catalog is the big splash images. There is a purpose to them. Using images in online publications are a very effective way of keeping the reader in your environment. Another trick that this online catalog makes use to is based on the human brain. Without going too much into details, the human brain is more attentive and processes visuals 60.000x faster than it written text. This means that if you want your readers to be inspired by or to want to buy something, you'd better use big images. Using big images is especially important for a travel catalog (but is also relevant for furniture - IKEA is splendid at doing this, cars, places to visit, fashion, and so on)

Who can use this?

This Summertour catalog can be used as inspiration by many types of companies, but in this case, it would be best for B2C companies. As mentioned in the beginning, Summertour's catalog is not supposed to sell anything (that is why there is no integrated shop in the iPaper). The catalog is meant to make the destinations more attractive by showing images from there, as well as emphasizing places where tourists can stay.

There are also many companies who use iPaper for branding and for giving their readers different information. They can also make use of the same type of iPaper, including the usage of big splash images, animations and pop-up elements that give the reader a pleasant reading experience.

See the Summertour Catalog ➔ 

This kind of catalog might not help you sell too much, but you can always take inspiration from here and create an iPaper with an integrated shop. However, even if you do not, you should not underestimate the power of good branding. There are companies out there using a digital publishing software for branding only and if you are one of them, this type of catalog is the perfect one for you.


  

About the author

Christian Vasile

Christian Vasile

​Christian comes to work with a single goal in mind: to make sure iPaper stays at the top of the digital publishing industry in terms of usability. His job is all about improving our software's user experience and obsessing about every single detail that makes iPaper great. He can be bribed with pancakes & nutella.

Back to the blog

Sign up to the Academy Blog

All Topics