UI update with a mobile responsive approach

[Luke-Fernando]

Improve the UI of the website

---

The Synopsis

UI and UX of a website act as a great part of a project that helps users understand the platform and makes it easy to interact with the features and functionalities. A decent-looking website also creates more user attention. Modern and responsive UI is a must-have feature for pretty much any kind of project these days.

The Problem

The website only has a very basic set of stylings just for essential functions to work with. Not being responsive is a huge problem that can prevent people who use mobile devices to access this site.

The Solution

I love to contribute to this project by helping to change the whole website's layout to be more responsive and user-friendly. Also, I have a modern design idea to make this website more modern looking with a minimal design as possible while keeping every main functionality of the website the same as before.

What to change

Layout

Layout should be more responsive for mobile screens as well as desktop, and laptop screens. So it needs an update for it's layout.

Buttons

Buttons can have a more stylish approach instead of default HTML buttons. The users should be able to identify the differences between different types of buttons that are doing different kinds of work.

Checkboxes and radio inputs

We can use custom inputs Instead of using the default HTML input elements( you can interact with these elements in the prototype ).

Color palette

I have a very minimal but modern-looking color palette for the design.

---

You can see the design by clicking here Also see the prototype of the design by clicking here

[sanderfrenken]

Hi Luke, the idea of this project is it being a tool, not a website that I use to attract user attention. As such, I also think simplicity is key in its maintenance.

I don't find it very useful to make this tool responsive for mobile. Game development in general isn't done on a mobile device, and downloading the large sprite sheets to your mobile device won't be very helpful.

I do like your design, so if you can keep the simplicity alike, and for instance keep the dependency tree equal, I would value your contributions a lot.

[Luke-Fernando]

Hi sanderfrenken, I totally agree with you. I will make sure to keep everything simple as it is and comment on all the important UI changes. In fact I'm using pure CSS so the dependencies won't change much except some icon packs. Everything else will stay the same such as site functions. Thank you for your response.

[jrconway3]

I think the main usage here would be designing characters for fun more than anything. I do agree that its probably not very useful on mobile, but if it can be done easily without completely rewriting the code it would be a good addition.

Responsive design usually is done through CSS, however, sometimes you need to carefully design the markup around the idea that it will be responsive. That's where the biggest issues come into play.

That being said, improvements to make it easier to use on Desktop would absolutely be a welcome addition. So if you can accomplish that without too much complexity that would be a huge boon.