Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign main screen #90

Open
henriiquecampos opened this issue Jan 14, 2020 · 0 comments
Open

Redesign main screen #90

henriiquecampos opened this issue Jan 14, 2020 · 0 comments
Assignees
Labels
art Creation of aesthetic visual, auditory or performing artworks expressing a design or technical skill design Creation of a plan or convention for the construction of an object, system or measurable interaction important Great value; likely to have a big impact on the final product urgent Requires immediate action or attention
Milestone

Comments

@henriiquecampos
Copy link
Member

henriiquecampos commented Jan 14, 2020

Kitchen Tales' main screen is meant to resemble a restaurant's menu, where the game is the restaurant, and players can "order" their dishes through the main screen's menu. There are different aspects of this menu:

  • Pages, which group similar options
  • Categories, which group options in a hierarchical structure
  • Dishes, which are the options themselves

main-screen-2

  • The layout uses a 10x10 pixels grid in a 1920x1080 screen
  • In blue, there is the whole menu itself
  • Behind the menu, we have the background which should resemble a table, as if the menu was laying on it
  • In green, we have the pages tabs, they are what will tell which is the current page being displayed in the menu
  • In yellow, we have the options of the current page, organized in order of relevance through their categories (main dishes > side dishes > desserts)
  • In red, we have the game's title logo "Kitchen Tales" as an image
  • In orange, we have a game's art, something that represents the gameplay, like a conceptual art
  • In purple, we have a fork and a knife image, outside of the menu, but standing on the table, to give the feeling that the player is about to feast

The menu should be elegant and simple, yet compelling and informative, playful and engaging. This is the main reference for what the menu should look like conceptually.

reference restaurant menu

To provide visual identity and still raise game awareness, so that the players know they are choosing options of a game, not food, we can use playful images of the game that provide context for the menu. This could be used in the pages options, instead of text. Something like in Kirby Super Star's main menu.

kirby super star main screen menu

If we go for a design where the options are displayed as images, we can use a carousel menu, to prevent the menu from being too bloated, like Kirby's.

main-screen-1

The layout for the pages shall resemble real pages, so if possible they could be stacked, like in this reference:

stacked menu pages

As for the organization of the page's options, they should be organized in this hierarchical order, grouped by relevance.

hierarchical grouped options

Remember: Kitchen Tales is a game with a flat design art direction, the menu must make use of flat design principles and aesthetic.

kitchen tales art reference


Issue Goal

This issue goal is to design the UI elements that will package this design. The deliverables requested are:

  • A full HD (1920x1080) .png image with all the elements put together in the layout presented above
  • A separated image for each UI element

You can create a folder called interface in the repository's images folder, put the files there and open a PR closing this issue to deliver them

@henriiquecampos henriiquecampos self-assigned this Jan 14, 2020
@henriiquecampos henriiquecampos added art Creation of aesthetic visual, auditory or performing artworks expressing a design or technical skill design Creation of a plan or convention for the construction of an object, system or measurable interaction important Great value; likely to have a big impact on the final product urgent Requires immediate action or attention labels Jan 14, 2020
@henriiquecampos henriiquecampos added this to the Alpha milestone Jan 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
art Creation of aesthetic visual, auditory or performing artworks expressing a design or technical skill design Creation of a plan or convention for the construction of an object, system or measurable interaction important Great value; likely to have a big impact on the final product urgent Requires immediate action or attention
Projects
None yet
Development

No branches or pull requests

1 participant