Ongoing design work for Jellyfin ATV #807
Replies: 22 comments 43 replies
-
|
Had some time to work on the TV view. Here's how it's looking
|
Beta Was this translation helpful? Give feedback.
-
|
WoW, I want this asop in the app!!! |
Beta Was this translation helpful? Give feedback.
-
|
Looks absolutely gorgeous and very clean! Just my two cents:
|
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Yeah that's what I was thinking. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah fair enough and I'm not a designer, so take my recommendations with a grain of salt lol |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
Go wild :) Give me some time to fully finalise the components though. I don't want you / others to re-work :P |
Beta Was this translation helpful? Give feedback.
-
|
Regarding sizing, the Android TV documentation has some guidelines: https://tv.withgoogle.com/style/typography.html |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
@MrTimscampi Thank you! I'll check it against my designs atm. I'm pretty sure I meet the reqs though :) |
Beta Was this translation helpful? Give feedback.
-
|
Worked on this a little more today Changes:
|
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
As you should, cant wait to see it. |
Beta Was this translation helpful? Give feedback.
-
|
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 :) |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
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 👍 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Can you do a TV guide mock up for me? :D |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
@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 |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
|
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 :)) |
Beta Was this translation helpful? Give feedback.
-
|
@jedicoach44 If you're comfy with UI, I can invite you to the Figma file I'm editing? |
Beta Was this translation helpful? Give feedback.
-
|
Absolutely. I'd love to get in there and take a look and help in any way I can! |
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
|
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 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
All concept |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
That will be part of the goal with the new guide, yes. |
Beta Was this translation helpful? Give feedback.
-
|
This looks absolutely incredible. Great job ! |
Beta Was this translation helpful? Give feedback.
-
|
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 😉 |
Beta Was this translation helpful? Give feedback.
-
|
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? 🤷♀️ |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
It looks really great ! |
Beta Was this translation helpful? Give feedback.
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 🔥 |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
|
An update on this would be amazing |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
That's really a shame. I hope the source code at least is released so someone else can continue it... |
Beta Was this translation helpful? Give feedback.
-
|
There is no source. It's just a few mockups. |
Beta Was this translation helpful? Give feedback.
-
|
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/ |
Beta Was this translation helpful? Give feedback.
-
|
Is there a ETA for releasing this? |
Beta Was this translation helpful? Give feedback.
and others
-
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 :)
Beta Was this translation helpful? Give feedback.
All reactions