Text-based MMORPG com JavaScript

Melhorando nossa UI

Nosso banco já esta mais ou menos no esquema agora vamos melhorar nossa UI antes de começar a mexer com o Backend.

Eu gosto de modelar o banco antes de fazer a UI porque ele me da uma boa ideia dos campos que colocarei na tela e assim preciso refatorar menos minha UI. Eu não sou o melhor designer do mundo, mas hoje em dia você tem varias ferramentas legais no mercado para criar uma UI bonita sem muito esforço, para agilizar nosso processo eu vou fazer um prompt no Midjourney e no DALL-E do ChatGPT, mas se você manjar dos paranaue de desing você pode ir direto pro Figma, Zeplin, Adobe XD, etc.

Eu vou usar o Midjourney:

/imagine An UI of a MMOWB, text-based RPG, focused in the UX, made in FIGMA design tool, clean design, menu on the left --ar 16:9 --v 5.2

Esse foi o resultado que ele me deu:

Pro meu gosto pessoal eu achei qque a interface 1 e 3 ficaram mais interessantes, a primeira inclusive me lembra muito o estilo de Ragnarok online, já a terceira lembra mais o estilo de RPG de mesa.

Vou pedir variações da terceira interface:

Eu gostei bastante da primeira opção, então vou pedir um upscale dela e vamos seguir com ela.

Apesar de não precisar eu solicitel um upscale de 4X para ter uma imagem maior e mais detalhada.

Agora que ja temos a base do nosso design temos duas opções, tentar reproduzir ele diretamente no nosso código ou fazer ele no figma, ambas as opções são interessantes, ja que fazendo no figma podemos aproveitar o CSS que ele gera pra gente, no meu caso como estou usando tailwind não vai ser tão util, mas se não for seu caso você pode usar essa opção.