Genshin Guides Website

Inspiration

Going back to when I was a beginner and mid game player of Genshin Impact, I remember thinking I knew everything…up until I faced things like artifact sets and talent leveling that is. I had no idea what I was doing and so I turned to the internet but all the website that I checked where overloaded with information, buttons and options. I didn’t know where to start. That’s why I designed this website.

What it does and is

Genshin Guides is a minimalist, aesthetic and easy to use website for beginners and mid game players of Genshin Impact. With a simple UI with limited buttons and symbols to simplify the information, the website is perfect for those that don’t want to be overwhelmed with information. Whether it is for talent leveling or artifact sets, users can get what they need with one glance and if they desire more information about what the artifact sets do or what the talents do, they can simply hover their cursor over the icons of what they want to learn more about. They don’t have to go through lines upon lines of useless text to unearth what they were looking for.

The website is also color coded. On a larger scale, each nation has a distinctive color palette applied to the UI of their page and this color palette is in line with the color palette of the nations in the game, making it easy for users to identify what character is in what nation and so on. As well as that, the elements are color coded; all the Cryo characters have their talents displayed in the same colors, all the Electro characters have theirs in the same color and so on.

The further information of the artifact sets displays all pieces in the set, letting user know which belongs to which with a quick look, these images are also in-line with those in-game.

The talents are also explained in simple, understandable language to further aid those that, like me, simply don’t understand them sometimes.

Throughout the designing process I drew upon information related to the following workshops:

• Intro to Web Development (This was used when considering the functionality of the website and how the design would be converted into HTML at a later stage)
• Intro to UI/UX Design (This was used when deciding what program to make the design with as well as when considering color palettes and laying elements out etc.)
• Intro to Human-Centered Design (This was used when considering the layouts and interactive aspect of the website as well as how the users would travel through the website)

How we built it

The website was designed using Figma

Challenges we ran into

Learning Figma as I made the prototype was pretty difficult.

Accomplishments that we're proud of

The final look and experience of the website is one that I am very happy with

What we learned

I learned about time management and understanding the program, language or service that I am using to a certain degree throughout this project.

What's next for Genshin Guides Website

Converting the design into HTML and CSS

Built With

• figma