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

Improving the UI / UX of Flowbite. It looks just like Tailwind css website but worse. #972

Open
Gitstar-OC opened this issue Sep 27, 2024 · 4 comments

Comments

@Gitstar-OC
Copy link

Is your feature request related to a problem? Please describe.

Whenever I visit the website for components, I see some good looking components surrounded by too much text that is not useful and links along with 3 scrool bars with huge navbar filled with various icons and links, not proper loading of images.

Describe the solution you'd like

I would like to work on various improvements and features in the below order

1. Improving the navbar.

  • Firstly what I see most of the time is banner, which can be disabled via a cross icon so the navbar looks good at top.
  • There are various navbar for various pages in flowbite. But what I see is same page 2 times Pro Version and Pricing & Faq which a new person would not care if he has not seen the components, which he cannot see because there is no component page link in the navbar There should be one.
  • I believe one link to github is enough in the navbar and for the link for youtube can be added in the footer, and the social media icons can be shown when someone hovers over the github in navbar.
  • I don't know the use of the sign in section, what it does but is there any need to login ? I don't know the longer term goals of flowbite. So I cannot comment if the sign in button is not good there.
  • Making the navbar a bit transparent might help in UI too.
  • The placement can be rearranged like all the icon to one corner side, logo to one corner side, and the other things in between or to each side like the one shadcn have.

2. Improving the code block component.

I recently searched for a decent footer component and before I get to see the component properly and tell if I like it or not I get to see the code and then I have to search, for what component this code is, a little confusing isn't it ?

  • The design can be improved in various forms, like adding a preview or see code button which will show the code when the developer want to see. Saving rendering time if they are loaded from server.
  • Removing the edit on github for each block or component in a component as they point toward same thing. This can be done by adding an edit link above the table of contents.
  • Removing the RTL / LTR and Change theme of component because the RTL or LTR is not making any change in the code block so no use, the developer has to do it and for the theme, there is already change theme icon so the developer can go there and check this theme.
  • After adding the preview code button, when the developer clicks on preview we should not show the html and copy text as they are taking additional place making the component ugly, what we should do instead is just add a copy icon above the preview component and remove the html text as it can be used as it is in any framework. Saving space and improving design.
  • The code block should be written in a way that there should be no horizontal overflow or if there is we can make a custom scroller matching with the accent color of flowbite that can be used here, and for the table of content along with the sidebar. It would improve the design drastically

3. Modifications for the docs / components / get started page.

  • The content is more to the left of the page which will be improved if added margin left and right and given some space.
  • The table of contents could be shifted towards the right and as flowbite is marketing the book teach me design there is a more better way to do that we can add a scroller just for the table of contents and the book teach me design will be always there for more details on this visit https://fumadocs.vercel.app/docs/ui/markdown and see the table of contents and the book can be shown like the edit on github button which is always there and a scroller for the table of contents. Similarly above the book there can be a edit this page on github option.

4. Editing the homepage ( a little bit )

  • The youtube video could be shown the get started page not on the homepage instead the top work and component should be shown, visit https://nextui.org/ , look at their homepage no developer would like to do a crash course right away but at first we should intrigue the developer to get started.
  • Gradient color should be added for better look of the website along with minor animation that will not increase the loading time.

5. The images are not loading properly in the /figma page. It can be fixed using the component.

Should I work on this issues, I have described it in this issue because some top repositories are not maintained very well and I don't know my work will be added if I pull requests

Describe alternatives you've considered
N / A

Additional context

Add any other context or screenshots about the feature request here.

Screenshot 2024-09-27 154015

Screenshot 2024-09-27 154118

Screenshot 2024-09-27 154028

Screenshot 2024-09-27 154104

@Gitstar-OC
Copy link
Author

Any reply ??

@Gitstar-OC
Copy link
Author

Should I work on improving the design ?

@Gitstar-OC
Copy link
Author

Is this a active repository ??

@jbwl
Copy link

jbwl commented Oct 22, 2024

Is this a active repository

"an"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants