Design suggestions + mockups + other stuff
bragefuglseth opened this issue · 8 comments
Hi, I'm stoked to see that Spot is coming alive again, it's such a great app! I know that the current focus will be on ironing out bugs, updating dependencies and adding requested features, but I'd still like to help out with some design suggestions to give the current UX a little extra polish.
This issue is a little all over the place, as I'm not really pushing a very specific change, but rather just rambling away and illustrating in an attempt to help. You can probably just close the issue immediately and use it as a reference :)
Login window
When opening Spot for the first time, users are presented with this dialog:
It does the job, but feels a little empty and unwelcoming. Here's how it could look instead, adopting modern GNOME patterns:
While the login dialog is shown, there is no need to show the main window as well. There isn't any content there yet, after all! :)
Sidebar
The current sidebar layout looks like this:
Some remarks:
- The "New Playlist" and "Playlists" buttons are rows in the "All Playlists" section. I think we should try to only have playlists there.
- All of the playlists have the same icon, which kinda takes away the purpose of having icons there. What if we swapped that out with small playlist covers?
- The playlists seem to be ordered statically. It would be nice if they were put in the order you have played them in recently, so the last one is at the top while the ones you listen to less frequently are further down.
- The "Now Playing" section is kinda weird. I think it should show the actual order the songs will be played in. The actual album/playlist that's playing could be accessed by clicking the song title (which would then open the actual page for that).
Here's a mockup:
Having the playlist covers visible in the sidebar makes the separate "playlists" view kinda redundant. I'm not sure how easy it is to pull through with regards to loading speeds and performance, but some caching would probably be possible. If it isn't, using labels only and no icons would still make the view cleaner.
Search
The search view looks bare-bones. Instead of using dropdowns for artists and albums, it could just use titles instead, kinda like this:
Other things
- Having a play button in the albums/playlists view would be nice, but this has already been suggested in #493. I often like to use this button in Spotify to start my playlist at an entirely random song, and the lack of this in Spot is a little pain point.
- I'm not sure if having an in-app light/dark mode preference is really needed. This preference is mainly useful for text-heavy apps like Text Editor and Builder, which some people may prefer to always be dark. If someone wants Spot to be in light or dark mode, they probably want all other apps to be so too, and thus they'll set their entire system to light/dark mode. If anything, this could probably be reduced to making the app follow the system by default, and having an "Always Dark" toggle.
- When the playlist/album title is aligned to the center of the screen, the artist/creator should also move to the center.
- Long playlist names should wrap instead of overflowing.
- This text style is deprecated. I'd use title-1 now.
Some Adwaita news
Libadwaita is getting new widgets! Among them, there's a Sidebar widget that Spot will need to adopt, as the current way of doing sidebars will be deprecated. This is still lies a little in the future, since the sidebar widget isn't in stable Libadwaita yet, I just thought I should make sure that you are aware of it.
TWIG?
I think you should announce Spot's comeback in the GNOME community's weekly news article, This Week in GNOME. I'm sure the community would love to hear about it, and what the future plans for the application are. It could potentially attract some new contributors. You can submit a post to TWIG by following these instructions.
Phew! This is a lot, but if you disagree with some things / are unable to implement them, you can just pick and choose what you like / use this as a reference for future development.
I hope this is helpful in some way! Thank you for creating Spot!
At last, here's a little treat: A banner that can be used to promote the app! :)
Sorry, not something related to this issue directly. I wanted to know how did you design these gtk mockups? Did you code them or there is a Figma design kit for gtk?
Sorry, not something related to this issue directly. I wanted to know how did you design these gtk mockups? Did you code them or there is a Figma design kit for gtk?
GNOME uses Inkscape for mockups. They are SVGs. The Mockup Resources repository contains SVG assets that can be copied and pasted as needed. It's also possible to use things other designers have drawn in existing mockups. There are no Figma assets AFAIK, but SVG allows for a lot of flexibility 😄
Ahah there's a lot to go through here, but I appreciate the feedback!!
It would probably be easier to open a couple dedicated issues to track progress/discussion for each suggestion.
But just to answer some of your points:
- I love that login dialog mockup!! almost itching to start working on it
- sidebar: I agree with most of your points! dynamically ordering playlists might be its own issue entirely (I've always wanted to have some kind of history implemented, @Diegovsky too I think, but this might take more work than the other points). Also looking forward to what libadwaita is going to offer! Leaflets have been a bit troublesome to get right for me at least (I still can't figure out stuff like #386)
- search: it's one of the screens I haven't touched since its inception! I intend to work on it next actually, and I'd love some input from you or @jannuary on the design (I'll explain below)
- light dark/theme: I don't think there's an issue with keeping the option there, but maybe we should change the default value to follow system theme?
- various alignement/font issues: I am sort of aware of them (and there are more, if you switch to the narrow screen layout some things look pretty bad), these could definitely could be good first issues, I've been too lazy to address them myself :P
As for TWIG (great banner by the way thanks!) I think I'm fine without the extra attention for now :) Looks like there's already a decent chunk of work ahead
About search: I want to rework it to display a few more results, including individual tracks (finally!) and playlists.
Keeping the constraints of having a narrow screen in mind, the results would probably be displayed in a list with a similar style to what we have for songs at the moment, with small differences in the row layout depending on the result type (album, artist, etc)
Example layout (Inkscape is not my forte):
(headerbar with entry)
-----------------------------
[item 1 = some artist]
[item 2 = some album]
[item 3 = some other album]
9item 4 = some song]
but I'd like to allow the search results to be refined by selecting an artist. I imagine the layout of an artist result to be something like
| (picture) (artist name) (filter or pin icon btn) (forward arrow icon btn) |
where the last button would just open the artist page (which I also need to redesign eventually).
The first button, however, would move the artist at the top of the page and give it a distinctive visual style:
(headerbar with entry)
-----------------------------
[item 1 = "pinned"/"filtered" artist]
(space/separator?)
[item 2 = some album]
[item 3 = some other album]
9item 4 = some song]
and the results would be updated to match the pinned artist.
This is not very standard -- I understand this kind of feature usually involves a dropdown next to the search entry, and then "pills" in the entry itself, but that would use up a lot of space, and I think this kind of "iterative" search experience could be nice.
Does that make sense?
It would probably be easier to open a couple dedicated issues to track progress/discussion for each suggestion.
My thought process was that you probably have a lot of other priorities/concerns for the app right now, and thus I wanted to present these as potential ideas for later on instead of concise suggestions you have to address right now 🙂
The login redesign utilizes some new Libadwaita widgets, so you'll have to update to the latest Libadwaita first if you haven't already.
As for the search stuff, it looks interesting! I'll mock it up! 😀
I'll open separate issues for the main points.
About search: I want to rework it to display a few more results, including individual tracks (finally!) and playlists.
I have made an initial mockup in #616 now, let me know if you want anything changed :)
Closing this as I have separated out most of my points into different issues.
Re: light/dark toggle — I'm fine with dropping it and using light by default.