Main navigation

How to create a beautiful slideshow

Photograph: Fabrizio Verrecchia via Unsplash

A slideshow is a series of images that appear in a carousel at an automatic or manually controlled playback speed. Slideshows create a sense of motion to an otherwise static web page and can add a sleeker feel to your pages.

They’re great for spotlighting content whether in a random assortment or in a series. The Apple iPhone landing page uses a series of images to highlight the engineering and manufacturing efforts of the high-end product.

Photograph: Apple

Some content is better suited for a slideshow than a static image. In this article we’re going to discuss the fundamentals of what makes a beautiful slideshow.

Image consistency

First things first – make sure all your images are the same image size and aspect ratio. This ensures your slideshow flows consistently without any visually unappealing effects, such as the example below. While it’s possible to create an interesting look this way, we would generally advise against it.

A slideshow will resize an image too large for its set width – but if the aspect ratio differs between images, the empty space will be filled with a white background.To avoid this and to keep the flow of your slideshow consistent, make sure to resize and crop your images before uploading.

Photograph: Moonfruit

Automatic playback

Something that really sets off a slideshow and brings it to life is automatic playback. You can showcase your images for different effects; tell a story, see a product from different perspectives or show off a catalogue. Playback timing and the option for visitors to control playback are both integral to creating a slideshow that is not only beautiful, but pragmatic.

Photograph: Adidas

Adidas use a slideshow on their online shop to spotlight trainers and t-shirts. The slideshow uses automatic playback to showcase all four products.

In the Moonfruit responsive editor, the transition speed of your slideshow can easily be modified. With automatic playback enabled, ensure that the contents of your slides is easily readable and can be read within the time selected. With this in mind, avoid cramming your images with a lot of text or using images that aren’t easily distinguishable.

Minimalist user interface

Nobody likes using a clunky interface, which can make interacting with the actual contents of a website difficult. Ensure it’s easy it is to navigate through your images – a good slideshow takes up no more space than a single image, yet showcases countless more without disrupting the user’s experience.

Photograph: Moonfruit

The slideshow above uses a filmstrip – a design which includes thumbnail previews of all images in the slideshow. Clicking on a thumbnail rotates the slideshow to spotlight the selected image. Filmstrips are great when you want preview a large catalogue of images in a small space.

Arrows are used to navigate your slideshow, and the Moonfruit editor includes a variety of designs to suit the look and feel of your website and brand. The arrow design above is perfect for a clean look – or for a real minimalist feel you can even remove them altogether.

Why don’t you try some of these techniques using the new responsive editor? It’s free.

What did you think of this article? Want to see more like it? Let us know in the comments or @moonfruit.