Horizontal Home Screen Layout/Mockup

[mistervee]

Myself and Aries are trying to get the design of the home screen finalized.

The graphic design of the overall skin is a bit up in the air atm and to be honest i have been a bit all over the place and unsure what exactly that will be. I am hoping to finalize the look of the home screen so the rest of the skin textures can then be completed to match this style.

The idea as stated a while back and stated in the kodi addon-rules; "No mods. Mods are great, and pop up frequently in the forums. But they are only confusing to non-forum-goers. This can be vague, each is evaluated on its own merit. By naming your "mod" different and make it substantial different enough, we will of course take it in consideration."

[mistervee]

@mikesilvo164 @bartolomesoriano @meowmoo @MadMikeDoc @ArieS1204

This is Aries mock-up.

Thoughts? https://imgur.com/a/4mQYP

[bartolomesoriano]

Thank you @mistervee and @ArieS1204!

My personal preference is the first picture, but with the color of the third picture for the library stats and submenu and date, etc.

Having said that, I am a big fan of the icon menus that you had provided so far @mistervee, and I hope that icon menus can make it to the final design.

One small question looking at the mockups: how can you tell which submenu option is selected?

[mistervee]

The menu in the pictures are all the same. As i understand each one just has a different background to show how the menu looks with contrasting colors.

If this is what we use the menu text will simply be replaced with icons.

Being a mock-up i haven't really thought about the functionality yet. Only it will be similar to what we have now.

[bartolomesoriano]

@mistervee, I see about the colors. There seems to be a difference between the first picture and the others in the border around the submenu and the library stats and date and time. The first picture has a solid border, and the others show a border with lines. I prefer the solid border.

Thanks for considering the icons!

[mistervee]

@ArieS1204 will have to clarify. I think the white background makes the border look solid?

[ArieS1204]

Yeah, @mistervee is right, the background dictates the appearance of the borders/fill. Which I kinda dig. But if it's an issue I can always disable that.

Another option, maybe more modern(?) could be that: https://imgur.com/a/gdiwf

As you can see I moved the window with the date in it to make it touch the horizontal menu but left the rest detached. Just to show you the possibilities. Again, it could be with shadow or not.

As @mistervee said, we need to decide on the horizontal and vertical menu textures so we can at least get an alpha out and then I can match whatever other textures are needed.

so @mistervee @MadMikeDoc @bartolomesoriano @mikesilvo164 @meowmoo Thoughts? Comments?

[bartolomesoriano]

@ArieS1204 well done, thanks! I like the second mockup better, except that I would prefer all the items to be touching the menu bar and not detached. This is indeed a more modern look that I really like.

Could you also mockup the vertical menu? This was an area that I did not like so much in the first implementation of it. Thanks.

@mistervee, @mikesilvo164, @meowmoo, @MadMikeDoc

[mistervee]

@ArieS1204 Seems like the first link is broken.

Here it is again if anyone had further comments https://imgur.com/a/C53No

[ArieS1204]

Hmm, not sure what happened to the first link... Anyway, thanks for bringing it back!

I cannot come up with a good layout for the vertical menu... This is what I have so far so it matches the horizontal menu: https://imgur.com/a/aYl7c Of course the window (submenu) on the right would appear if you choose the arrow going right.

Or I have this one (which I prefer): https://imgur.com/a/0ZPKe

Do you guys have any idea for a different layout?

[ArieS1204]

Guys? Any comments?

[MikeSiLVO]

@ArieS1204 Please do not get discouraged (entmutigt). Thank you for all that you have done!

Getting all of us to agree on something will not be easy which is one of the reasons I chose to take a backseat on all decisions 😉

I think that asking for opinions is a noble idea but somebody needs to decide (@mistervee ) how to proceed. I may have some opinions and/or suggestions but I think that they should be read and only followed if both you @ArieS1204 & @mistervee actually agree with what I am rambling on about.

I do not dislike the images posted but they do not seem "modern" to me. This is a subjective opinion of course and "Flat" seems to be the current way to go ATM and while this looks great and all, to me at least, it does not appear "new".

It is hard to articulate so my apologies if I appear rude in any way.

I have one other thing to mention and that is the name of the skin when completed. I think if you want the skin in the Kodi repo then there should be no "Aeon' or "Nox" in the name at all. I don't currently have an alternative but if the name is completely different then I think it will have the best chance of inclusion in the default Kodi repository.

Thanks for listening 😃

[bartolomesoriano]

@ArieS1204, I like the first vertical menu mockup better. I would prefer, even though I know it might not be consistent with the horizontal layout, for the veritcal menu bar to be narrower, even if the font used is different, and in a different size. In my opinion, in the mockup it takes up too much space on the screen.

[mistervee]

@bartolomesoriano @ArieS1204 @mikesilvo164 @meowmoo @MadMikeDoc

I have had some time to think about this. Lets put the kodi repo and skin name aside for the moment.

The mock-ups look great but i would have to agree with @mikesilvo164 as i don't think they look modern enough. I prefer a timeless look and the original Aeon skin by DJH fits this perfectly.

It is hard to find good screen shots or videos as this was done way back in 2009 so if you want to take a look install xbmc 9 and the skin. (you could just look on youtube for aeon auriga)

Skin https://github.com/djh/aeon/tree/auriga XBMC 9.0 https://filehippo.com/download_kodi/5714/

DJH gave me permission to recode his original skin close to a year ago. I got about half way and stopped, then moved onto a recode of madnox.

What i would like to do is to combine the the best of many worlds. Use the textures from aeon with a @ArieS1204 buff to it. Also the functionality concepts from aeon madnox and community contributions. The color picker that i have coded will also play a big part with customization.

For the vertical menu, i am not sure. May be it is best to remove this option? I wont use it, will others?

So to sum it up i will finalize the horizontal home menu with @ArieS1204 . This will include nowplaying and a basic version of the widgets. From that point we can move to the final look of other parts of the skin.

Thoughts?

[bartolomesoriano]

@mistervee, from my perspective, go ahead! I would also agree with removing the vertical menu. I eagerly await what you and @ArieS1204 come up with. Thanks for keeping this moving forward.

[ArieS1204]

Ok, when I used the word 'modern', I was just talking about the submenu/date/library bars only. To me sharper edges = modern :) I was not implying that my design was overall different that what Aeon Nox/Madnox is. One of the reasons I've been using Aeon Nox/Madnox for some time now is the main menu. To me it is simply perfect as it is.

Regarding the Vertical Menu, I myself would not be using it either so I don't care if it's there or not. If you guys want it, we need to decide on a final design...

By the way @mikesilvo164, I never had a chance to tell you that since you don't like PMs but if you need any gfx done for your mod, I AM a PM away :D

I will try to install XBMC 9 and try to see what you mean @mistervee

@bartolomesoriano, thanks for giving your opinions as much as you did. Really appreciated :)

[mistervee]

@ArieS1204 @bartolomesoriano Seems like we agree on the vertical menu. I will drop the feature from the skin.

@ArieS1204 It is a tough one to decide. Modern can be different things to different people. I do agree the menu looks great in madnox. My thoughts are to try do a combo of the original aeon and madnox style with our own personal twist on it. Its not just about the graphics in the original skin its the animations between window too.

I really want all of us to be content with the way the skin looks. We also need to consider how the color picker affect the textures. There is no way we can account for all possible user color choices, i think at least 50% is possible.

I have used @ArieS1204 menu texture and combined with the transparency from the original aeon menu texture.

I have made some functioning mock ups using the color picker so we can see the variation between them.

Also a different font that support almost all languages. https://mplus-fonts.osdn.jp/about-en.html

Let the Mock ups begin!!

Original Aeon by DJH (not a mockup screen shot from xbmc 9 and aeon) https://imgur.com/a/optZI

Some mock-ups using current code (functioning on my machine but rough)

NOTE

• Different screen shots are only done by changing the color picker settings in skin. All textures are the same.

Textures

• Main menu background is Aries version with the transparency added from DJH's version.
• The info bar and submenu are exact copy's from the original aeon.

Same color's as original https://imgur.com/a/65bbQ

Dark Theme https://imgur.com/a/alU2r

Blue theme. Infobar similar color to Aeon Madnox https://imgur.com/a/kGR4d

Red theme. Infobar similar color to Aeon Madnox https://imgur.com/a/ymH6Z

Multi color theme https://imgur.com/a/W2aRX

Thoughts or improvements ideas?

[mistervee]

EDIT

That dark theme was too dark. All the texture's were set to FF000000. So if you add some grey to the mix...... https://imgur.com/a/EYMrX

This should give you an idea of how the color picker effects textures.

Keep in mind any one of us can create color themes for the skin. We can have as many color themes as we like. The texture's just need to work nice with them.

[mistervee]

EDIT 2

For comparison this is aeon madnox home screen https://imgur.com/a/p8n2p

[mistervee]

Lets consider now playing and the widgets;

A slight shift to the main menu and this is the area to work with (there are no plans to have to horizontal menu center of the screen) https://imgur.com/a/Vsbgc

Widgets; https://imgur.com/a/9NXAL

Now playing; https://imgur.com/a/IoxdS

The widgets and now playing will not be visible at the same time.

I plan to have one widget per menu item at once with the addition of plot ect when focused. The idea is if you push up the widget will flip to the next one. This means you can have 4+ widgets per menu item. The same as what aeon nox 5 offers with the multi movie widget, but with the choice of what ever art type and content you choose.

@bartolomesoriano @ArieS1204 @mikesilvo164 @meowmoo @MadMikeDoc This is all sort of coded ATM. It is rough and not as functional as would like. I am waiting on further comments and suggestions from you all before i make anything final, which then will be a push to github.

[bartolomesoriano]

@mistervee, I like the now playing, and the widgets, including what you mention of multiple widgets per menu item even though only one is showing at a time. I would love to see how other art types would look, in particular those where it is desirable to have the title (label) as part of each widget item, like an episode thumb or a weather item. I would also like to see a focused widget item with the plot info, etc.

In terms of the menu, I like both your first mockup and the last one from the post where you show widgets and now playing. I don't particularly care for colored textures for the info bars (like the multicolor mockup you showed). I think that in all cases, in all mockups, the text of the infobars is hard to read, especially against a white background. I think, for me, it would be even worse looking at it from 10 feet on my tv. I would like to see what you and @ArieS1204 can come up with to improve that.

For now, those are my 2 cents! Again, thank you for your and @ArieS1204's work in keeping this great skin moving forward!

[mistervee]

@bartolomesoriano

The other art types are a WIP. I do plan on adding the plot and title options.

I cant say i like the multi color option either. That was really to demonstrate the color picker https://imgur.com/a/ysUsM

I agree with your choice of mockups. I am thinking maybe that should be the default color theme?

You have a point with the info bar.

How about this with a bolder font? https://imgur.com/a/Q2FOp

[ArieS1204]

I like where this is going :) So are we going with my main menu texture + the infobar/submenu from original aeon nox over the 'pointy' ones I made, correct? If so then I need to redo time-bar.png and submenu-bar.png, presently in Madnox, to get rid of the shadow and fix the jagged edges. @mistervee, please confirm so I can get it done. Also, another option to make it work on every colored backgrounds and no issue reading the text would be to make both time bars and the submenu 100% opaque. What do you guys think? I know I like a bit of transparency but that could be the answer...

[mistervee]

I would go with your main menu texture's. If you could send me the variations wallpaper, wrinkled paper ect. With the slight modification that we previously discussed. That would be great. I can add the transparency effect.

Then i can code in a option to toggle between the backgrounds.

For the timebar and submenu this is what i am using. In the screen shots kodi is applying a tint of FF202020 https://imgur.com/a/EfyL6

It is not the same one from aeon madnox, its from the 2009 aeon. It is a lot smoother and without the shadow.

I don't really see an issue with having it a little bit transparent. May be it could be toned down?

It might be best to also make it a darker color so the user can't choose light colors which would also make it hard to read. (as you can see from the multi-color screenshot).

[ArieS1204]

Sounds good to me. I will work on the variations for the main menu but please refresh my memory about the slight modification we talked about... We've talked about so many things that I'm not sure now.

[ArieS1204]

Or can you send me the main one you are using now so I can use it as an example to do the other ones?

[mistervee]

This should explain it.

https://imgur.com/a/b6nKl

The texture is almost identical to the one you have provided apart from having the lighter color top and bottom of texture.

I used a alpha mask plugin in paint.net to combine the transparent image with the main one. No idea how this will work in photoshop.

[bartolomesoriano]

@mistervee, the infobar looks better in the pictures you provided. I agree about the mockups I mentioned being the default colors for the skin, hopefully the rest agree also. I am looking forward to testing all of this. :)

[ArieS1204]

Ok, before I make them all, how does this one look? https://imgur.com/a/6t0xM

Is that what you want @mistervee ? Let me know if the shadows are too dark or/and if the shadows will be a different png and I should make them without the shadows? We are almost there, hehe.

[mistervee]

The shadow is a different png which is really the glow color in the color picker. All the textures just need much lighter shadow. I would say similar to the main menu image i posted.

I am just thinking maybe the texture overall should be a bit lighter in color? The pattern doesn't really stand out. Keeping in mind the color picker in kodi can be used to make it darker for different themes.

You should be able to replace the image media/home/horizontal-default-back.png in your install to see what i mean.

Nearly there :smiley:

[ArieS1204]

Ok, so that's what I have: Lighter in color and no shadow since it will be a separate texture. https://imgur.com/a/tbjqU

What say you?

[mistervee]

Nice work. Lets go for the rest. 😄

(not to try and nit pick you missed one pixel on the right side of the image)

[ArieS1204]

@mistervee Fixed the missing pixel! Good eye! :) I've PMed you the link to get all the different textures for the main menu. Awaiting orders to what to do next :+1:

[mistervee]

Thanks Aries.

Awesome work.

Give me a day or two to try and push something to git. Then we can figure out what is next.

[mistervee]

Complete.