Logo of UI Challenges
Sign in

Gallery

See what others have created

Photo Albums Grid

misaka

@misaka

EasyCamera & Media

Photo Albums Grid

Design the photo library albums view on mobile: a grid of album covers with each album title and item count visible at a glance. Include system albums like Recents and Favorites alongside user albums.

This screen sits in the media app’s browsing flow, where people scan for the right album before opening it. The grid should feel quick to skim, with cover imagery doing most of the recognition work.

Treat the album cover as the main visual anchor and keep the metadata secondary but legible. The layout needs to handle a mix of square and varied cover images without making the grid feel messy.

Make the system albums clearly part of the same library, but distinct enough that users can spot them instantly. The challenge is to balance density with clarity on a small screen.

What to deliver

  • Design the default album grid with system albums and user albums.
  • Show album tiles with cover image, title, and item count.
  • Define spacing, crop behavior, and text truncation for long names.
  • Include a state for empty or near-empty albums where the cover still reads well.

Use cover crops and title spacing to make long album names stay readable without stealing attention from the thumbnail.