Can someone guide me what is the design pattern used in the below image?

iTunes: list of cover images

What is it called?

  • 38
    While first name may be "carousel" or "cover flow" as was mentioned, but it's last name is "think twice before using me". Distorted images add no benefit to user experience.
    – Runnick
    Commented May 4, 2017 at 15:08
  • 6
    @Runnick I'm not claiming it is a good thing to do, but a potential benefit of that transformation is you can see more of the images (as opposed to unaltered rectangles) while using less screen space. Almost like you are flipping through a stack of albums. Commented May 4, 2017 at 16:49
  • 2
    @AustinHenley I'd argue you can really see only three images; other are actually hidden (you see like 10% of the image). With regular thumbnails you'd see more. As for albums stack I don't want to flip it, I want the ones I need to jump right in my hand :)
    – Runnick
    Commented May 4, 2017 at 17:13
  • 2
    The motto of Norstrilia: "Don't be too clever"
    – user67695
    Commented May 4, 2017 at 17:57
  • 1
    @Runnick I use Spotify which only shows maybe 5% of the album cover (less than in this screenshot), and I can always recognize what it is. I wish Spotify would stack more of these 5% previews! Commented May 4, 2017 at 18:39

2 Answers 2


It's called Cover Flow.

It's used by Apple in OS X (among others).

Cover Flow is an animated, three-dimensional graphical user interface element that is integrated within the Macintosh Finder and other Apple Inc. products for visually flipping through snapshots of documents, website bookmarks, album artwork, or photographs.

See: Cover Flow


As made clear by comments, Cover Flow is based on the Carousel pattern.

Carousels allow multiple pieces of content to occupy a single, coveted space. This may placate corporate infighting, but on large or small viewports, people often scroll past carousels. A static hero or integrating content in the UI may be better solutions. But if a carousel is your hero, good navigation and content can help make it effective.

More on carousels here.

Another interesting link provided via the comments about the origins of the Cover Flow here.

  • 1
    It's not limited to Apple products (although I have no idea if that's where it originated or not). It's a quite common theme on many media server applications, for example (Emby, Kodi, that sort of thing) or anywhere that a pretty visual representation of content is required. Here you can see it in Windows Media Center, for example: cdn.redmondpie.com/wp-content/uploads/2009/08/…
    – flith
    Commented May 4, 2017 at 12:32
  • 10
    @flith That's exactly why I think those "Apple" (or actually any company based) answers are not really constructive. In this case Cover Flow seems to refer to an Apple product which is not really a design pattern on its own.
    – Rolf ツ
    Commented May 4, 2017 at 12:41
  • 2
    By the way, latest OS X uses usability friendlier design: core0.staticworld.net/images/article/2016/03/…
    – Runnick
    Commented May 4, 2017 at 15:11
  • 2
    Here is a forum thread where the (late) developer called it Cover Flow before he sold the idea to Apple: arstechnica.com/civis/viewtopic.php?f=19&t=313706
    – jejorda2
    Commented May 5, 2017 at 13:55
  • 1
    @Runnick The latest "OS X" is named "macOS". Not to be confused with "Mac OS", of course. Commented May 7, 2017 at 12:16

It's an ordinary Carousel with a fancy 3D touch to it.

Carousel according to the Yahoo design pattern library

Image source: Yahoo design pattern library

Carousels are often used on webpages, in this context a carousel often shows a single item at any given time and offers some sort of auto rotation function. Many think that using carousels on webpages (as header) is considered bad practice, for various reasons I will not cover in this answer.

Carousels come in may different variations and can be used in many different ways. An often seen usage is that of browsing a set of images (or albums) some offer a 3D like experience like in your example.

Navigation is often a combination of: scrolling, touch (mobile) or navigational buttons. When a carousel contains a limited amount of items a progress style navigation element can be used to show the currently selected/focused item (page-indicator).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.