search

svsticky / constipated-koala

Management system for our study association
https://koala.svsticky.nl/
GNU General Public License v3.0
16 stars 4 forks source link

Koala redesign - discussion thread #909

Open Riscky opened 2 years ago

Riscky commented 2 years ago

There have been some discussions and work (eg @jasperro has a branch going) on redesigning Koala. I want to show my take on the redesign, based on Martijn's design (#624) and existing apps. Feel free to give feedback, I'm by no means a designer.

koala-design

jasperro commented 2 years ago

I've been working on a design here: https://www.figma.com/file/QJP5QTurRBY98imkB9O9hI/Sticky-Design, just trying some design ideas out.

Riscky commented 2 years ago

koala-activity

Sketch idea for the activity overview page cards

Riscky commented 2 years ago

I've been working on a design here: https://www.figma.com/file/QJP5QTurRBY98imkB9O9hI/Sticky-Design, just trying some design ideas out.

Nice to see your work! I really like the home page redesign, it is way more informative then the current and looks very nice

Siem2l commented 2 years ago

I've been working on a design here: https://www.figma.com/file/QJP5QTurRBY98imkB9O9hI/Sticky-Design, just trying some design ideas out.

Really like the design overall! One issue i'm currently having with the design are the navbar frames i really dislike the rounded shape for some reason. Furthurmore i'd request to test this design with multiple board colors. Currently we use #800816 (hehe), but this changes every year. Last year it was #FE7215 and the year before that #c53f78. This design should be compatible with the changing colors and I'm not sure if it is currently :)

jasperro commented 2 years ago

With some of the previous colors and less rounding: image

I must say the orange has some contrast issues, maybe use dark text on the color in that case?

Riscky commented 2 years ago

I must say the orange has some contrast issues, maybe use dark text on the color in that case?

Contrast issues are the main reason we don't use the board color in many places, only in top bars of applications (for example https://svsticky.nl and https://github.com/svsticky/magnificent-sloth) I don't think we changed anything on the website for the orange color however, maybe we just used a bit of a darker hue?

Riscky commented 2 years ago

activity-overview

Sketch for the activity overview page

jasperro commented 2 years ago

2021 I think this actually looks much better than the colored selection

Riscky commented 2 years ago

I think this actually looks much better than the colored selection

It does, I like it. Can you put a named divider between the internal pages and the external apps and see how that looks like?

jasperro commented 2 years ago

image

Riscky commented 2 years ago

activity-editor

Admin side activities page, as requested by @JustNireon

Riscky commented 2 years ago

@jasperro How is the progress on this? I'd love to start integrating some of your work

jasperro commented 2 years ago

@Riscky I've been trying to use https://viewcomponent.org/ to implement some reusable tailwind UI components that can be used throughout the application, but didn't really have too much success with that. Progress on that can be found in feature/storybook-viewcomponents and feature/viewcomponents-lookbook

While the redesign might make everything look better, it is probably not worth it to fully re-implement every (bootstrap) component in a custom ui library. Maybe it is just better to upgrade to a newer version of bootstrap with a better theme, or use something like materialize/semantic-ui/MWC etc. In debt/bootstrap-theming-improvements I looked into updating bootstrap and the boostrap theme, and it seems that, in combination with some custom css might be enough.

I don't really have anything concrete yet, I have mostly just been busy with study assignments, not with koala.

What do you think is the way forward?

Riscky commented 2 years ago

I wanted to use Tailwind in Koala because it makes doing small corrections in the layout a lot easier compared to component based frameworks. Transforming the whole frontend to Tailwind is a lot of work however, and the existing tooling to automate this task (tailwindo for example) just isn't very good.

The components look good, but I can imagine that it is a lot of work to get this polished (and in sync with master). The route you went with upgrading the bootstrap theme looks good too, and is more of an iterative step.

In the end I don't really care about which CSS framework we use, as long as it does the job. I imagine however you want to see your code in production, and small, iterative changes often gets you there faster.