SpMp UI designs
Throughout SpMp’s development, I’ve mostly just thrown UI layouts together on the spot, implementing ideas as I come up with them. Occasionally, however, I’ve sat down with some paper and a pencil and planned a screen out (shocking, I know).
Whenever I draw one of these, it always pleasantly surprises me how smoothly I’m able to implement them in software, and how little I have to change.
Not all of these have exact recorded dates, but they’re definitely in chronological order of creation.
Portrait home feed page
2023-04-17It was during this first design when I had the (apparently unique) idea to display the current line of the song’s lyrics persistently, rather than just in the player view. Pinned items aren’t shown in the ‘after’ image, but they were implemented as designed.
This design has persisted almost in its original state since it was implemented, with the only difference being that the buttons in the floating menu (bottom-right corner) were redistributed. The only change to this screen was that the search button moved to the left of the feed filters at the top of the screen.
| Design | Before (v0.0.1) | After (v0.0.2) |
|---|---|---|
 |  |  |
Settings page
2023-04| Design | Before (v0.0.1) | After (v0.0.2) |
|---|---|---|
 |  |  |
Library page
2023-05Unlike most other designs, which were for replacing existing layouts, this was for a completely new UI. While technically there was a library page in SpMp before I made this, it had almost no functionality and the things that were there were very temporary.
Most of this design never made it into SpMp directly. While you can see in the implementation image that I added most of the left-hand screen from the design, it’s only a partial implementation and I clearly didn’t spend much time polishing it. If I remember correctly, the library page stayed in this state for a while before I completely replaced it for v0.2.0 (without a drawn design).
| Design | Implementation |
|---|---|
 |  |
Playlist page
2023-05While I’m not certain, I think this was also a case of a design I made for a completely new UI. Most of the design made it into the implementation, although I replaced the row of action chip buttons with some icon buttons above the wide play button.
This has survived to the current day, with some adjustments including moving the icon buttons back to their original position, and convenience buttons for selecting all items as well as jumping to the top or bottom of the list.
| Design | After (probably v0.0.2) | Now (pre-v0.4.0) |
|---|---|---|
 |  |  |
Landscape player page
2023-11-07| Design | Implementation |
|---|---|
 |  |
Song theming menu
2023-12-06| Design | Implementation |
|---|---|
 |  |
Landscape artist page
2023-12-06| Design | Implementation |
|---|---|
 |  |
Landscape home feed page
2023-12-12| Design | Implementation |
|---|---|
 |  |
Miscellaneous content page
2023-12-12| Design | Implementation |
|---|---|
 |  |