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

Visual overhaul #20

Open
RustoMCSpit opened this issue Apr 27, 2024 · 22 comments
Open

Visual overhaul #20

RustoMCSpit opened this issue Apr 27, 2024 · 22 comments
Assignees
Labels
enhancement New feature or request

Comments

@RustoMCSpit
Copy link

No description provided.

@RustoMCSpit
Copy link
Author

@RustoMCSpit
Copy link
Author

fonts have been added via PR

@kmturley
Copy link
Member

Thanks for the suggestion. Will look into it as an enhancement.
I would need to make sure the fonts/colors looks good across all pages etc.
And check the font license.

Currently I am using Google Fonts Roboto. I agree this is not the ideal choice for open-source:
https://github.com/studiorack/studiorack-site/blob/main/components/layout.tsx#L21

@kmturley kmturley self-assigned this Apr 28, 2024
@kmturley kmturley added the enhancement New feature or request label Apr 28, 2024
@RustoMCSpit
Copy link
Author

fonts have been added via PR

thoughts on these fonts? im not sure of their legal status btw

@RustoMCSpit
Copy link
Author

RustoMCSpit commented Aug 25, 2024

image

image

image

this is just a quick bucket fill job with a random-ish color palette, hence why the text is so messed up. im thinking that this websites current color scheme is awful and that it needs to be changed, and on top of that it also needs a light mode. the padding on the top of the boxes is too big, and there is no padding currently at the bottom. i also still believe the fonts need an overhaul

@RustoMCSpit
Copy link
Author

the color palette i added is just an example to lay out different zones more clearly

@RustoMCSpit
Copy link
Author

RustoMCSpit commented Aug 25, 2024

image

versus

image

the padding on the top of the boxes is too big, and there is no padding currently at the bottom

top one has a nicer shape, i shouldve made the top even smaller tbh

@RustoMCSpit
Copy link
Author

also these would look nicer

image

@RustoMCSpit
Copy link
Author

RustoMCSpit commented Aug 25, 2024

the images on display also need to have some sort of standardisation, it should be a logo honestly. after clicking on it there should then be a set of images of the gui

@RustoMCSpit
Copy link
Author

image

@RustoMCSpit
Copy link
Author

adding a transparent white grunge effect too?
image

@RustoMCSpit
Copy link
Author

RustoMCSpit commented Aug 25, 2024

potential future things: new download logo, resized download button size (might rework it all so that the horizontal and vertical distance to the edge is equal), might round off edges differently, slightly re-adjust placement of tag icon, cut a bit off the top of the button, better / different type of grunge / vintage texture (and better applied) (possibly leather?)

image

image

image

@RustoMCSpit RustoMCSpit changed the title better font and better color palette visual overhaul Aug 25, 2024
@kmturley
Copy link
Member

Hey
Thanks for the suggestions:

  • Fonts: I would like to find an open-source font to replace Google Fonts
  • Images: Not all plugins have logos, screenshot of the plugin UI is the most common approach which is why I used the same.
  • Styling: Your ideas are good, but different color scheme appeal to different people.

I am not going to do a full design overhaul right now, would prefer to spend my limited time on features.
However I like the idea of being more flexible with styling/colors/fonts.

I propose we could turn this feature request into Custom themes
Allow creation of custom themes, with different fonts and colors and a way to switch theme.
What do you think?

@RustoMCSpit
Copy link
Author

RustoMCSpit commented Aug 26, 2024

Fonts: I would like to find an open-source font to replace Google Fonts

https://www.fontshare.com/fonts/red-hat-display

Images: Not all plugins have logos, screenshot of the plugin UI is the most common approach which is why I used the same.

if a plugin doesnt have a logo we can default to this i guess

Styling: Your ideas are good, but different color scheme appeal to different people.

the color schemes are examples for now

Custom themes
Allow creation of custom themes, with different fonts and colors and a way to switch theme.
What do you think?

so have a settings page where you input hex codes for different ui elements or use a preset which auto-fills hex codes? that fixes color scheme issues but it doesnt fix layout issues, such as the plugin box. this would split this issue into two issues, layout and color scheme. layouts could also be customised (e.g. vlc player) or their elements (e.g. apple ios letting you change app icons / widgets) but thatd be a nightmare.

@kmturley
Copy link
Member

kmturley commented Aug 27, 2024

The majority of users would not likely want to fiddle around with hex codes. I think a theme switcher with built -in themselves and a way for users to submit new themes or install custom themes

@RustoMCSpit
Copy link
Author

okay but how do they submit new themes without hex code inputs?

@RustoMCSpit
Copy link
Author

also can we do a quick color scheme shift of the website as it would take ten minutes and then work on more complex solutions

@kmturley
Copy link
Member

No because all the branding uses the color scheme. I order to support themes and you can customize how you like.

@RustoMCSpit
Copy link
Author

No because all the branding uses the color scheme. I order to support themes and you can customize how you like.

can the top banner at least be made the color of the boxes?

@RustoMCSpit
Copy link
Author

potential future things: new download logo, resized download button size (might rework it all so that the horizontal and vertical distance to the edge is equal), might round off edges differently, slightly re-adjust placement of tag icon, cut a bit off the top of the button, better / different type of grunge / vintage texture (and better applied) (possibly leather?)

image

image

image

also what about this?

@RustoMCSpit
Copy link
Author

i think we need a visual overhaul tag for everything related to visuals

e.g. #29

@kmturley kmturley changed the title visual overhaul Visual overhaul Sep 11, 2024
@kmturley kmturley added this to the Improved user experience milestone Sep 11, 2024
@RustoMCSpit
Copy link
Author

theming for colour blindness too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Development

No branches or pull requests

2 participants