Icons!

[CTalvio]

Hello!

Did some more drafting. Refined the waveform thingy, did some more variants on the rotated JF arrow, yadayada. I have opinions but I'll keep them to myself at first so as not to skew any first impressions.

How about colors? I did some two and three tone examples as unlike the JF UI, phonograph is flat. Some using the JF colors, some with the default main and accent color of the app. It might be cool to have the icon match those colors, though maybe not with these particular colors? The UI could be set to match JFs color scheme by default? Or something else entirely!

[CTalvio]

I did also try to think of something entirely different to the JF logo. But I'm pulling a blank on anything that would not be "generic music app playbuttonheadsetnote".

One thing I did not try yet is any of the shapes back from when the logo for JF was first discussed that ended up not getting chosen.

[Fabeuss]

A3 is great ! :+1: Like a guitar plectrum :smile:

[dkanada]

What would A3 look like with the lines oriented parallel and perpendicular to the purple edge?

[CTalvio]

My favorites from that one are C4 and E2. A3 Was really very thrown together, no measurements done just brushstrokes to cut out some lines from the shape. Now I made some more refined versions in row 2. Also an entirely new idea in row 4.

Row 3, the other orientations for the lines, Really reduces the "waveform" look, and the JF shape also isn't symmetrical in that direction, so another shape may be in order. Or something like 1B-D could work.

Also keep in mind how these may look when scaled down. Gaps can disappear.

[dkanada]

You're right my idea was horrible :laughing: The first and second rows look really good, and I also really like 4A and 4D on the bottom.

I'm still deciding whether the gradient is too close to the official logo or not. It looks nice in a few of the icons but not all of them. The three color swatch you picked for several of them also looks really good. How did you pick the gold color from the first batch? I was going to suggest a single color from the swatch you used but I think it would look too bland with just a single color, depending on the shape.

I'm also considering how the colors would fit into the existing interface, which is extremely bland. I was already planning on a "cover view" for the main fragments to highlight the images, and our nightly uses blurhash to generate burred images we can use as placeholders. Figuring out animations for the icon would also be cool, I've always wanted to look into that area for Android.

[CTalvio]

The gold color was composed of the two yellows in the phonograph icon. I personally really like the two/three tone look, as it fits the phonograph UI. But as you can see with D1 from the first batch, they need to be separated by a gap to look good. Unless you intend to bring gradients to the Gelli UI to match it with JF rather than keep it phonography, I would go with a flat look for the icon too to match it with the app.

As the phonograph UI uses a main/accent color setup, two colors could be made to fit the UI, while a third being present in the icon would not be detrimental if it adds to it. (such as the single dot in D1)

I already set JF colors in the settings of Gelli myself. If you used flattened JF colors in the logo, and change the default main/accent colors to match, Gelli could fit very nicely into the JF look, but with a more androidy aesthetic.

[CTalvio]

As for animations, I've never done that with icons before, not quite. I created an android boot animation once in blender, which I am very proficient with, so an animation using just a series of image frames is a definite can do. If android apps typically use something like animated vectors (is that a thing?) then I don't know how I'd do that. Not yet at least.

[CTalvio]

I think these are the good ones so far. Let me know if you want to see what some different color schemes might look like.

[Fabeuss]

Great, the one at bottom left is nice !

[n-peugnet]

I personally really like the current one. The gradient is a cool reminder of the Jellyfin logo and the shape is at the same time representative and a derivation of the original shape.

[ThibaultNocchi]

Personally I also like the gradient and color scheme of the Jellyfin logo. I also really liked D2 and E2 in your first post. It's a nice difference from the official logo but keeps the color scheme so it's all nice and tidy on my phone launcher.

[dkanada]

@ThibaultNocchi really not a fan D or E in the first image at the moment. @ido1990 since you were also considering interface changes, what do you think of these options? I've been too busy for code changes lately but I still definitely think a nicer icon is a good idea, these are good candidates.

[dkanada]

@ido1990 lets move the interface discussion here as well to avoid cluttering the official repository. I'm not strictly opposed to any changes, but there were some specific items I had in mind that bother me.

1. I'd really like quicker access to the artist and album links on songs, maybe with a swipe left gesture to show two icon buttons?
2. I need somewhere to put playback details on the now playing fragment. There will be a fair amount of information so I need a dialog or fragment somewhere. Perhaps it could match the song details as well once I implement that feature again.
3. The favorite action on the now playing fragment feels really dated. I was thinking long press on the cards anywhere in the client could favorite said item.
4. I had plans to unify the genre and playlist views with the existing album and artist views since they all provide enough information for that nice banner.
5. The main issue I have with the app is that it feels too generic for my taste. I'm not sure how far I'd be willing to stray from material design but definitely more than this.

Regarding the last point, keep in mind I can access blurred placeholders for all images once 10.6.0 is released and will almost definitely use them somehow. Since the icon might also keep the gradient, it might be a good idea to implement a more "frosted glass" style throughout the client, but I have no idea what that would look like. One last item, I'm definitely a fan of options when it comes to design, like the two different now playing styles, so I'd like to add more of that if possible.

[ThibaultNocchi]

@dkanada No problem for the logo, that's your app afterall! :)

On the other hand, about the long press to favorite an item, it doesn't really feel as good UX to me. How should someone discover this kind of feature? Moreover, the current heart icon on the now playing fragment allows to easily check the favorite state of the song.

[ido1990]

For the logo, I would pick the left one on the sharp section.

1-4. I still need to install the app on my phone in order to get some perspective about the flow of the screens. 5. It feels generic because of the Material Design, that's why I asked you on the JF issue how far would you go with changing the design. More work need to be done on the UX before applying UI ideas although I can use the current UX as base if speed is needed. Designing an app from scratch is not a fast process.

[dkanada]

There could be a setting for the long press action with options like play next, add to queue, favorite, and shuffle. You're right though, it's not as discoverable as the icon button. This might relate to yet another thing I was considering, which is an icon or other quick reference somewhere showing the play method of the current song between direct and transcode. I am generally satisfied with the existing UX bar a few problem areas, I just think more gesture controls are a good thing for usability.

[ThibaultNocchi]

I guess keeping the current option plus adding those quick "hidden" actions could be great. Also, I like the idea to display if it is a direct or transcode play, I was wondering if it worked today while using it haha.

[ido1990]

@ido1990 lets move the interface discussion here as well to avoid cluttering the official repository. I'm not strictly opposed to any changes, but there were some specific items I had in mind that bother me.

1. I'd really like quicker access to the artist and album links on songs, maybe with a swipe left gesture to show two icon buttons?

2. I need somewhere to put playback details on the now playing fragment. There will be a fair amount of information so I need a dialog or fragment somewhere. Perhaps it could match the song details as well once I implement that feature again.

3. The favorite action on the now playing fragment feels really dated. I was thinking long press on the cards anywhere in the client could favorite said item.

4. I had plans to unify the genre and playlist views with the existing album and artist views since they all provide enough information for that nice banner.

5. The main issue I have with the app is that it feels too generic for my taste. I'm not sure how far I'd be willing to stray from material design but definitely more than this.

Regarding the last point, keep in mind I can access blurred placeholders for all images once 10.6.0 is released and will almost definitely use them somehow. Since the icon might also keep the gradient, it might be a good idea to implement a more "frosted glass" style throughout the client, but I have no idea what that would look like. One last item, I'm definitely a fan of options when it comes to design, like the two different now playing styles, so I'd like to add more of that if possible. @dkanada

I took the time to play with the app. It much more than generic, you implemented some nice features like pulling the playlist from the bottom and the animation of the play pause button, well done! After thinking about the points you mentioned, I created a wireframe of the now playing screen (Hoping I was able to figure out what you meant).

1. 1-3 referenced in the wireframe and one more thing about the song progress bar (oval instead of line is more pleasant).

   • I'm not sure how much and what type of information you want to show (except of Artist and Album name).
   • You have some "real estate" in the Play button area, it can be shrunk down to get more space for information.

2. I want to try to wireframe a Home screen more in the direction of what JF has. What do you think?

3. Maybe setting a color pallette will solve the "generic" look. I don't know if giving the ability to choose the color to the user is good. But maybe I'm wrong...

[ThibaultNocchi]

I'm thinking of maybe changing the upper left cross by a down arrow would be great, mirroring the up arrow when this screen is closed.

Also on the third point, I do like the coloration of the now playing card with the current album cover palette. Would you keep it?

[KristupasSavickas]

@ido1990

I like the progress bar, the current one is weird and yours is something I would expect to see in Android. I do like the idea of adding a way of navigating to an album/artist from the song, but I think they way you did it now is a bit visually busy. Maybe context menu + icon inside of it would be better.

I really like the way plex did their new music paplication: https://plexamp.com/

The background seems to be a gradient of the currently played album cover, which is a pattern being used a lot these days through iOS, Android (i.e. the media notification) and Windows. Really dig the look, but don't think it would play well with material design, boxy shapes and cards.

I don't know if Gelli has enough momentum/manpower to go for a full redesign like this, so maybe a good first step would be to change the colors to ones generally associated with Jellyfin (various shades of purple/black). Also, another quick thing to consider could be the bottom bar navigation, the tabs do look outdated.

[dkanada]

1. We should keep the heart icon because that's what Jellyfin uses elsewhere.
2. I agree the space under the buttons is very busy even on the current version.

I think the speaker icon we have right now is useless because obviously that information is for the current song. I also think the information should be centered and the playlist information looks weird with left alignment. As a matter of fact, besides the visualizer seekbar which I hate, Plexamp is a step in the right direction since we can use blurhash everywhere now. Something extremely minimalistic like that would be excellent, with as many gesture controls as possible to display more information.

[ido1990]

@KristupasSavickas Using JF colors is good idea, the icon is already using these colors.

@dkanada The design of Plexamp is nice and minimalistic but that's far from the guidelines of Material Design. Looking at the design of the app, I guess many hours were spent on the UX and UI. Do you intend to go that far from the Material Design?

Maybe I'll spend some time on different direction...

[CTalvio]

So Jellyamp is a thing. https://github.com/m0ngr31/jellyamp

It's not in a usable state, but the creator messaged me on reddit about an icon too, but someone he knew made something he was happy with before we got anywhere.

I actually really like what he went with. It's the JF icon, with a play button, but it also looks like mobius strip. I made a version with shading to REALLY make the effect pronounced. I'm kinda mad I didn't come up with it, since it's obviously not an option now.

[Fabeuss]

Really amazing icon !

[ido1990]

Looks good but it looks like the upper part is bigger... I'm the only one who sees it?

On Sat, Jul 18, 2020, 22:52 Fabeuss [email protected] wrote:

Really amazing icon !

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dkanada/gelli/issues/14#issuecomment-660533649, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD44IDDQETVZC5OHW4AKO4DR4H4RHANCNFSM4N6ZQ66A .

[CTalvio]

@ido1990

You are correct.

The JF shape is not an equilateral triangle, the top angle is slightly sharper than the bottom two. So it is not actually symmetrical in three directions, but only two, horizontally. It's really subtle, at first glance you do not notice it at all.

[CTalvio]

Did some doodling of potential new shapes, just to explore some non-derivative options.

Got a round version of the waveform, angular play button combined with the letter G, some blobs, and two blobish play buttons in the top right. I like those.

I'll turn any of the shapes into proper examples if they spark interest to being considered.

[ThibaultNocchi]

The one on the top left looks like a pretty cumbersome F1 steering wheel haha.

I do prefer the two top right as they look the most like the ones you initially did. :)

[ido1990]

For me the one on the top left looks like a form of the Unown Pokemon :)

[CTalvio]

For the logo, I would pick the left one on the sharp section.

Looking at this conversation again. Still want an icon? Should I make some SVGs of that one? Would be nice to replace the phonograph icon that shows up in the status bar, too.