Ongoing design work for Jellyfin ATV #807
Replies: 24 comments 43 replies
|
Had some time to work on the TV view. Here's how it's looking
|
|
WoW, I want this asop in the app!!! |
|
Looks absolutely gorgeous and very clean! Just my two cents:
|
|
Should the home screens use the subtle gradient? I was thinking maybe the side panel would be solid colored and the overall background could have the gradient. |
|
|
|
Yeah that's what I was thinking. |
|
I'll check the accessibility. If that's okay then we're good to go :) Main reason why I didn't want the gradient there was for focus. The bright colours of the posters and font should really be the main focal attention imo. |
|
Yeah fair enough and I'm not a designer, so take my recommendations with a grain of salt lol |
|
Firstly, really like how this is looking. Just a couple of thoughts: A general thought is on the sizing of items with respect to a TV interface. I've not tried it on a TV, but I'm guessing things would be quite small looking, and potentially not easy to read from a couch a few meters away. Not tried it as I say, so could be very wrong, but just comparing to what other TV interfaces look like it seems like it may need making a bit larger. Secondly is the SyncPlay button at the top of the screen. If you're scrolling down through a library, then getting back up to the top of the screen for any controls can result in a lot of scrolling work. I understand it's probably there as that's where it is in web, but I think it may make more sense to have it in the menu bar at the side, just making it easier to get to in most circumstances with fewer button presses. |
|
I'm thinking we could also look at using this for the Roku Client as well, if there are no objections from yourself or the ATV team. |
Go wild :) Give me some time to fully finalise the components though. I don't want you / others to re-work :P |
|
Regarding sizing, the Android TV documentation has some guidelines: https://tv.withgoogle.com/style/typography.html |
|
I'm also not keen on the SyncPlay button. I don't mind the placement but the style looks out of place to me. The items next to it look so sleek in comparison, the button stands out with that heavy background. |
|
@MrTimscampi Thank you! I'll check it against my designs atm. I'm pretty sure I meet the reqs though :) |
|
Worked on this a little more today Changes:
|
|
When multiple filters are applied, or even one, these are the views:
When a filter is applied, the remove filter button also becomes available for ease of UX |
|
Absolutely amazing, does any part of it have code behind it, or is it just a concept? Cant wait for androidtv to look like this. |
|
It's all concept art right now. We'd love to make these designs a reality but that will take quite some time, I'm prioritizing the stability of the app (like rewriting the playback code) above redesigning right now. |
|
As you should, cant wait to see it. |
|
This may be an unpopular opinion, but I find myself avoiding regular use of the AndroidTV app because of the layout / look over any stability issues. I'm eager to see this much improved look, as well as enabling skins in the app. Don't underestimate the value of pleasant looking :) |
You’re 100% correct. The average end user…. Not the person setting up the server and going through all that… but the family me never who wants to watch a movie or show…. They want it to look beautiful and work flawlessly. To many apps out there to have an “out dated” app as your primary way of viewing things. |
|
So you'd rather have an app that looks pretty but crashes when you try to play a video instead of an app that doesn't look super pretty but is able to play the video? |
|
Have you considered what the cards should look like when images aren't available? Lots of content might not be matched correctly, and I'm sure many users won't be setting their avatars. Absolutely loving the designs so far though! Do you mind if I use any of these ideas in Gelli for Android? |
|
I haven't. I am not sure if this is something that the apps focus on, that'd be more the server. Correct me if I am wrong @thornbill Also yes, you can use it for Gelli, but I'm not sure it will help you from a UX perspective. I've mainly focussed for video content :( Feel free to take inspiration from it though 👍 |
|
It's definitely possible for media to be missing images. Right now we just show a solid color with an icon depending on the type of media that it is as a placeholder in that case. Ideally most media should have images though. |
|
Can you do a TV guide mock up for me? :D |
|
Elaborate what you mean please? I pretty much want a design that looks like a modern cable box guide. Channel headers on left programs to the right. No pagination. A settings button will need to be somewhere. |
|
@MrChip53 I do not have a Live TV sub in any of my media servers, so I'm not entirely familiar with the use cases it provides. What I'd love is to see if there is something already in Jellyfin, primarily to extract the functions it has. I'll re-work the UI and UX with the existing set of functions if possible, else I'll add a few functions which may require more time. |
|
@RemuxKid There is some stuff in the main web app already, Roku, and of course Android TV. I'll get a set of screenshots from them for you. |
|
@anthonylavado Thanks :) Atm, my JF is buggy because of library size, so not being able to utilise it fully :(. Mainly waiting for the DB re-write :D |
|
Sorry I completely forgot about this but currently for the rewrite all I have is a very very rough design that would never make it to final. Here are some Roku screens though jellyfin/jellyfin-roku#336 |
|
These are all awesome. I’m a graphics designer at heart and would love to help with these and some others for Jellyfin. My expertise is in visual consistency, proper branding, usability and more…. All on cross platform solutions. If you’re open to help, let me know! |
|
Yknow I remember one of the devs saying jf lacks a design language, maybe see about that? You should join the matrix/discord/irc (it’s all the same chat you can just join how you like :)) |
|
@jedicoach44 If you're comfy with UI, I can invite you to the Figma file I'm editing? |
|
Absolutely. I'd love to get in there and take a look and help in any way I can! |
|
It is ongoing in 0.12 to have the possibility to choose the video version of a title? Like between 4k and 1080p like the audios and subtitles chooses? It's a big issue for me... Thanks! |
|
This is best as a separate thread/issue (one likely exists), rather than in this discussion about design. Nothing personal, just trying to stay focused 🙂 |
|
No problem, I understand. I speak of it there, because this option have to be integrated to the design and thinking of the best way to it. I say it, because the way to choose the audio and subtitles actually doesn't look pretty good, probably to short to show correctly the text in. Thank you for your work! |
|
FYI: we can add missing features without rewriting the complete UI. And even if a feature is seen in a mockup, it won't mean it will be implemented when creating the code for that UI. |
|
I'm a mere jellyfin user, I would like to know if someone has already started to develop if they have a beta app or is it just a concept? |
|
All concept |
|
There are screens that look somewhat empty in the designs, perhaps putting a background image at the top right would give more visibility to the screens. something like that:
It seems to me that the interface is beautiful and more dynamic |
|
For LiveTV, would it be possible to have an option for the Guide to not have pagination, and just have all of the channels in a single list, like the web client or Jellyfin Media Player app? |
|
That will be part of the goal with the new guide, yes. |
|
This looks absolutely incredible. Great job ! |
|
Try to come closer with emby android tv app, it's more like Netflix style. For example use the style of Jellyfin Media Player for Windows, it's really awasome and you can view your theme on this and your custom logo. It will be perfect if we can add our logo on Apps (Android TV, Samsung TV etc) as iOS App and Jellyfin Media Player. I'm web designer too, if you want anything tell me 😉 |
|
I've had a look around for an update on the GUI for Android tv but can't seem to get a concise answer of what the current status is or whether it's even begun to move from concept visuals only. Does anyone know? 🤷♀️ |
|
The latest version (0.12) contains changes to the user interface. There hasn't been much visual changes since. This discussion contains concept art only. |
|
I like the mocked up designs, the blue looks super cool, but I hate menu's on the side. I know Jellyfin is based on Plex, but I would hope things lead away from their style (which is one of my main gripes). The current design could easily be spruced up and, improved by a designer. Elegent and simplicty is the key. |
|
Jellyfin started as a fork of Emby 3 years ago when Emby went closed source. (The Android TV app had been closed for many years prior to that though.) There is no direct relation to Plex. 🙂 |
|
It looks really great ! |
This comment was marked as off-topic.
This comment was marked as off-topic.
|
Any updates on this? Would be possible to share the Figma project so that other people could pick it up and contribute? It's a really great design 🔥 |
This comment was marked as off-topic.
This comment was marked as off-topic.
|
An update on this would be amazing |
|
There isn't really anything to update. I don't think the person who started working on this design has been active in a long time. |
|
That's really a shame. I hope the source code at least is released so someone else can continue it... |
|
There is no source. It's just a few mockups. |
|
Reminds me of this Reddit Jellyfin post that got a lot of attention, but never materialized https://www.reddit.com/r/jellyfin/comments/10buwhw/jellyfin_react_web_client_looking_for_prealpha/ |
|
Is there a ETA for releasing this? |
|
I'm wondering if this is the path forward, or is there a path forward in which the Android TV app merely uses the Web UI as the face, similar to how the android app works, or something else entirely? |
|
Hey all - jumping in to offer help building this, not just admiring it. About me: I've been doing software for 30+ years and was a core dev on Freevo (the old Python media-center/PVR project), so TV UIs are home turf. These days I'm a daily Jellyfin user on a Shield. @MS-design-ui's mockups still look great and the "is this still just a concept?" question that keeps coming up here nails the problem: the design isn't the blocker, the implementation is, and that's tied to the Leanback to Compose migration. I've been poking around the codebase and think I get the lay of the land migration's going foundation-first (Compose host, router/backstack, interaction tracking, LegacyImageCardView redone in Compose), and it's plain Compose on your own ui/base components + JellyfinTheme, not androidx.tv. I threw together a little Compose "modern home" prototype (hero + landscape rows) on top of that and ran it on my Shield to feel it out. Mostly I just want to help however actually fits your plan, not lob a redesign over the wall. A few questions:
Happy to start small and follow your lead. Thanks for all the work. -TT |
and others
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
So as mentioned and shown in Element, I'd love to help out with designing a perfect experience for Jellyfin.
Background
I'm a big fan of jellyfin, but I find certain things difficult to use in the current state. I'd like to help on an ongoing basis with UI and the UX of things.
Work in progress for now
Log-in (WIP)
The new design allows the feel for multiple users, and the ease of multiple servers. Seeing as most users (Assumption) have one primary server, they'd really be connecting to only one server at any time. The idea relies on recently logged in, followed by alphabetical results (fed from the server if the user is broadcasted)
Home screen
The new home screen allows a resemblance with the web UI and other major streaming platforms. It's following branding from the JF branding site. Where I could use creative freedom, I have done.
Detail page view
I've done this for movies only, for now, the TV shows will require a little more thought since there are multiple things within that.
Style Guide
Typography
Icons
Shared components
Buttons
Colours
I'll update progress in this discussion, and would love feedback on designs. After all, this is a community-driven project :)
All reactions