Design proposal: consistent set of cards (#973) · Issues · funkwhale / funkwhale

Design proposal: consistent set of cards

Context

Funkwhale is about to have a brand new sidebar (#594 (closed)) on the one hand, and to support new kind of contents (#170 (closed)) on the other hand. This requires some work on the visual side that could also benefit to existing content.

Current Issues

There are some issues while browsing the different kind of items (playlists, album, artist…):

items sometimes are hard to parse (playlist items holds many numerals, "⋅⋅⋅" icon are visually disconnected from the rest of the artists card, play icons hide most of the album covers…)
clicking/tapping on an item picture does nothing
some icons do not bring much value or are misleading (see headphones on artist cards, music note on playlist cards, or "share" arrow in menus for reporting)
some menus are overloaded (tracks offer no less than 4 menu entries for reporting content)
items do not feel like they belong to the same app (a range of stuff from flat lists to rounded cards with shadows)
podcasts do not have their own cards yet :)

Goals

We are aiming to:

make the ui feel more cohesive
allow for easy distinction/recognization of different kind of items
establish clear, reusable patterns
give the right information in the right place

Let's keep focus on cards first. There are other things to improve but they are out of our scope.

Proposal

What we currently have for album cards felt like a solid base to build upon. I bring some improvements to it and made declinations of it:

RFC

Comments are always welcome!

<!--
Hi there! You are about to share feature request or an idea, and we want to thank you!

If it's the first time you post here, please take a moment to read our Code of Conduct
(https://funkwhale.audio/code-of-conduct/) and ensure your issue respect our guidelines.

To ensure we can deal with your idea or request, please try to stick
to the following structure. You can leave the parts text between `<!- ->`
markers untouched, they won't be displayed in your final message.

Please do not edit the following line, it's used for automatic classification
-->

## Context

Funkwhale is about to have a brand new sidebar (#594) on the one hand, and to support new kind of contents (#170) on the other hand. This requires some work on the visual side that could also benefit to existing content.

## Current Issues

There are some issues while browsing the different kind of items (playlists, album, artist…):

- items sometimes are hard to parse (playlist items holds many numerals, "⋅⋅⋅" icon are visually disconnected from the rest of the artists card, play icons hide most of the album covers…)
- clicking/tapping on an item picture does nothing
- some icons do not bring much value or are misleading (see headphones on artist cards, music note on playlist cards, or "share" arrow in menus for reporting)
- some menus are overloaded (tracks offer no less than 4 menu entries for reporting content) 
- items do not feel like they belong to the same app (a range of stuff from flat lists to rounded cards with shadows)
- podcasts do not have their own cards yet :)

## Goals

We are aiming to:

- make the ui feel more cohesive
- allow for easy distinction/recognization of different kind of items
- establish clear, reusable patterns
- give the right information in the right place

Let's keep focus on cards first. There are other things to improve but they are out of our scope.

## Proposal

What we currently have for album cards felt like a solid base to build upon. I bring some improvements to it and made declinations of it:

![cards](https://dev.funkwhale.audio/mjourdan/funkwhale-design/raw/master/browser/cards.png)

## RFC

Comments are always welcome!

Discussion
Designs

The one place for your designs

To enable design management, you'll need to meet the requirements. If you need help, reach out to our support team for assistance.