Renew UI and UX main menu into TABS

[sael]

UPDATE: adjusted lightness and highlights to make image more legible with low brightness monitors.

Hello friends of the elements! 

I have been working for several days now into restructuring the main menu screen, in order to modernize it a little in accordance to modern gaming menus, where the different options are divided into different screens or sub menus. In this case, after arguing a little with people from the community we arrived at the idea that tabs would be the way to go.
This would help to 1° be less overwhelming to new players, being easier to read, and 2° it gives us a lot of free space, which means that we could add a ton more buttons and options for different purposes.
 
So after a ton of work, I made this:

Main menu background clean:

Spoiler for Hidden:

(note that the quality of the image lowers a little when uploading to https://postimg.cc/).
The metal slobs up there are the different tabs. Clicking or hoovering on them would show different menus inside the center plaque.

Here is an example (this is just illustrative) of how it would look like:

Main menu, "cards" tab:

Spoiler for Hidden:

This is just a sketch, but in this example the parts that appear in all tabs (account, gold, invitations from other players) appear on the right side, while the center and left side can be used for that specific tab. In this example, after you click on the cards tab and that menu opens up, you can then click on "shop", and that would take you to the current shop:


Entering the shop:

Spoiler for Hidden:

The same goes for deck editing, etc. After going to the respective tab, each button takes you to the current menu, since this would only affect the main menu.
So that's the basic preview. I would add that the center wooden plaque can be changed for something else (like a metal one) although after working so much on the wooden one I grew into it, and I personally prefer it. The same goes to say for the background, I have a few different options (like using the currently active dark wood background, or using a solid slightly textured grainy one) although I think this one is the one that looks better of them all.

Also, we could change the buttons and the typography in the future. It's up for discussion =) .
What remains to discuss is maybe, in the case the response is generally positive to the suggestion, then design a visual marker that let's you know in which tab you are currently in. I would wait for the programmers to tell me what would be convenient for that purpose.

So I hope you like it, eager to read your opinion !

edit: fixed typo on cards tab.

sael

[timpa]

What would go (from the main menu) in each tab?

[sael]

What would go (from the main menu) in each tab?

this is tentative and open for debate. The main idea is actually that the new menu with tabs can be very flexible, since there is a ton of available space and better organized.
A first approximation would be:

Battle

• commoner
• mage
• champion
• demigod
• arena 1
• arena 2

with columns for cost - reward for each,
+the things at the right side (gold, account, current deck, tips, invites)
+PvE stats at the right side


Deck

• current deck selected
• List of quick access decks (aka favorites) maybe with an edit button at the side of each (top 10?)
  (maybe a space for little notes or stats at the side of each, like for example upped/unupped)
• new deck
• Arena deck
• view all

+the things at the right side (gold, account, tips, invites)


Cards
as shown in example.
Maybe library should be changed to "my library". And then other players library on players tab.

Players

• My stats full display (name, PvE, PvP, gold, +???)
• Send PvP invite:  this one can go here, in battle tab or both)
• Search player library:
• Leaderboards
• Full display dedicated invites list (all pending)

+the things at the right side (gold, current deck, tips)

Quests

• Tutorial
• Daily challenges
• Notifications for current running events
• Quests

+the things at the right side (gold, account, current deck, tips, invites)


That would be the most like the current arrangement. What I think is important to notice is that more space would allow for implementing a ton of new choices. Want a friends and enemies menu? add button or even small display to players tab! Want to see what are the newest implemented cards? Add display on cards tab. Want to add stats for particular decks? add button next to deck list.
Just some ideas from the top of my head. I hope that gives you a more complete visualization

edit: FINAL NOTE: There is also the possibility of adding one or two new tabs, or fusing some of the ones that I proposed into one. I feel 5 is a good number and looks pretty neat, but in case of necessity, it can be done.

sael

[Septima Rhay]

I like some of the aesthetic changes you've proposed Sael. It's a nice look, gives a bit more 3D feel.  The additional lighting effects brightens up the space. The wood background has a nice warm feel, but perhaps the stone background currently being used would keep things more consistent.  Although the text overload is less of an issue now, the introduction of many colors and additional textures can be disorienting.  A balance of visual interest and simplicity can be sought. Tabs probably need to be much smaller, especially if they stay at the top when visiting other screens (except in a battle).  I'm envisioning a main screen where the focus is to (1) select a deck and (2) select a battle.  Bound deck buttons would be there and searching a deck name and pressing "select" will also (1) confirm that's your current deck and (2) generate an image of the deck on the main screen.  One could not edit their deck on the main screen; they'd have to press "Manage Decks" tab.

Tabs
Main Screen -> Select bound deck or search deck by typing; select AI battle; PvP invite, Custom, Settings, and Logout buttons here
Manage Decks -> routes to current deck editing screen
Card Shop -> routes to current shop (shop button); add "Bazaar" button to Shop -> routes to Bazaar Screen
Card Library -> routes to current library (Library button); add "Upgrade" button to Library -> routes to upgrade screen
Player Stats -> proposed new screen with personal stats, search other player stats, leaderboard buttons

Here's another take on the main screen:

Spoiler for no deck selected:

Spoiler for #2 bound deck selected:

Spoiler for searched deck selected: