I'm working on a UI which needs to include a series of video thumbnails and folders containing more video thumbnails.

At current, the videos are being layed out in a 'list view'. A video thumbnail appers on the left and metada fills up the real estate on the right. (see image below)

enter image description here

Soon we will need to include video folders as well as video thumbnails. I've been asked to place the video folders in a grid view above the video thumbnails (as seen below)

enter image description here

Although I don't like the idea of compbining a list view and a grid view. I've considered maintaining consistency of the interface by applying the list style layout to the interface (see below)

enter image description here

However by doing this less content will be seen above the fold. Unfortunately we cannot apply the grid view to the video thumbnails. Any suggestions on how to approach this?

  • How much content are we talking about? Will the Video thumbs act as "featured content" or is it just that they haven't found their way to a folder? Is this a web page or a native client?
    – Babossa
    Commented Jul 29, 2014 at 7:35
  • These video thumbnails have already been placed into a single category ie 'Languages' (so they could be videos about linguistics, phonetics, etc.) but there are also subcategories within the 'Languages' category, ie 'French', 'English', 'German'. We're talking about ALOT of content. It's a web page.
    – user47821
    Commented Jul 29, 2014 at 7:40
  • 1
    Feels like you need to open the discussion again. I think YOU should be the one to decide the layouts of folders and videos, not some manager or PO. To me, it would make more sense to do the other way around (listing folders, maybe on the left, and then present videos as a grid in a main content area (in the center and right) How come you cannot apply the grid view to the video thumbs?
    – Babossa
    Commented Jul 29, 2014 at 8:13
  • Are there any device restrictions on splitting the interface? Commented Jul 30, 2014 at 9:17

1 Answer 1


Use 3 or 4 column grid for everything and separate Folders and Video with sub-headings Or without them and separate folders and videos with double amount of space. As listing everything in one line could cause a lot of scrolling.

Use proximity(Visually Group Related Elements) to differentiate between folders and videos


download bmml source – Wireframes created with Balsamiq Mockups


download bmml source

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.