search

Innovateninjas / Paws-frontend

A fast responsive webapp that allows you to report injured stray animals to the nearest NGOs.
https://pawss.vercel.app
GNU General Public License v3.0
60 stars 99 forks source link

Improving the UI of NGO Register Page #254

Closed shubhammjha22 closed 4 months ago

shubhammjha22 commented 4 months ago

Is your feature request related to a problem? Please describe. The UI of the NGO register page has Poor layout form and a bad user Experience

image

Describe the solution you'd like I would like to enhance the layout and user experience of the NGO register page by implementing a more intuitive design and improving its overall look and feel

Please Assign this issue to me under GSSoc'24 so that i can work on it

shubhammjha22 commented 4 months ago

@codewarnab i want to work on this can you assign this issue to me under GSSoc'24.

PranavKeshav24 commented 4 months ago

@codewarnab I'd love to work on this issue, can you please assign this issue to me? I am a contributor for GSSOC' 24.

rishicds commented 4 months ago

Please describe on how you would improve @shubhammjha22 ,thank you.

shubhammjha22 commented 4 months ago

Hello @rishicds So my idea is to

-First, adjust the layout to fit within the viewport, eliminating the need for scrolling when accessing the form. Currently, users are required to scroll down to fill out the form

-Implementing a structured layout using grid or flexbox, example For instance, grouping related inputs such as NGO Name and Phone in the same row, and Email and Password in another, ensures a logical flow and easy completion for users. Additionally, separating the Address field into its own row improves clarity and readability.

-Here is the UI layout example - image

codewarnab commented 4 months ago

Hello @rishicds So my idea is to

-First, adjust the layout to fit within the viewport, eliminating the need for scrolling when accessing the form. Currently, users are required to scroll down to fill out the form

-Implementing a structured layout using grid or flexbox, example For instance, grouping related inputs such as NGO Name and Phone in the same row, and Email and Password in another, ensures a logical flow and easy completion for users. Additionally, separating the Address field into its own row improves clarity and readability.

-Here is the UI layout example - image

I'm not sure if this layout will look good on mobile or not. Could you please share the page link from where you took the screenshot so that we can give it a try? Thank You !

shubhammjha22 commented 4 months ago

Hello @rishicds So my idea is to -First, adjust the layout to fit within the viewport, eliminating the need for scrolling when accessing the form. Currently, users are required to scroll down to fill out the form -Implementing a structured layout using grid or flexbox, example For instance, grouping related inputs such as NGO Name and Phone in the same row, and Email and Password in another, ensures a logical flow and easy completion for users. Additionally, separating the Address field into its own row improves clarity and readability. -Here is the UI layout example - image

I'm not sure if this layout will look good on mobile or not. Could you please share the page link from where you took the screenshot so that we can give it a try? Thank You !

We can maintain the current layout on mobile screens by implementing responsive design techniques, such as using flex breakpoints. The layout example I provided was for larger screens like laptops and PCs.

codewarnab commented 4 months ago

Hello @rishicds So my idea is to -First, adjust the layout to fit within the viewport, eliminating the need for scrolling when accessing the form. Currently, users are required to scroll down to fill out the form -Implementing a structured layout using grid or flexbox, example For instance, grouping related inputs such as NGO Name and Phone in the same row, and Email and Password in another, ensures a logical flow and easy completion for users. Additionally, separating the Address field into its own row improves clarity and readability. -Here is the UI layout example - image

I'm not sure if this layout will look good on mobile or not. Could you please share the page link from where you took the screenshot so that we can give it a try? Thank You !

We can maintain the current layout on mobile screens by implementing responsive design techniques, such as using flex breakpoints. The layout example I provided was for larger screens like laptops and PCs.

seems fine you can start working on it make sure you maintain the current theme of the app

shubhammjha22 commented 4 months ago

@codewarnab i have created the PR , Kindly review it