-
Notifications
You must be signed in to change notification settings - Fork 166
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
Proposal for designing new interface using Bootstrap 4 for Infragram [Outreachy2022] #319
Comments
Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄 |
Hello @TildaDares @jywarren. I am really excited to know your views about this mockup design which I have created for Infragram. I would like to know if this design is meeting the expectations or not, and if not then which areas/sections needs improvement. I want to add two more things:
Eagerly waiting for your reply 😊 |
Hi @simransia this is really lovely and I like your process and labeling and presentation a lot! I have plenty of feedback and want to be sure you know I like a lot of what you're proposing, so my questions are just to try out different ideas. One is that i see your "Image Editing" layout still kind of looks like it's not full screen, like it is on this example site: https://www.photopea.com/ (although i admit photopea is a bit crowded 😅) So i wonder if we could make it truly edge-to-edge. Another thought i had was that I wonder how this works on a small screen like a phone. That's a huge challenge so don't worry, i expect we'll have to work on it a lot to develop a good approach, so you don't have to have a final answer or anything, i just would love to know how you approach the question. You could even say that you don't think it's possible, or that the mobile version of the site would lack some features! I like moving the "save" down to the bottom. But on a small screen, we might be losing "valuable" space this way. What if we had a floating button at the bottom, either center or to the right, with a "save" icon, which, when you click it, opens the three options as you show? Or even opens them in a centered popup on the screen? OK that's a lot of ideas! You don't have to respond to each, i'm just digging into the different possibilities! Thanks for some great mockups and ideas! |
Ah, one more, about the front page! Take a look at https://mapknitter.org/ - that page has a "showcase map" plus a 3-column guide to the "idea of the site" and then at the bottom it shows tables with more content (they take a while to load). We could do something similar on Infragram -- make a really long front page: |
Hello @jywarren sir ! I am really happy to know that you liked my presentation and thankyou very much for providing a valuable feedback. I have tried answering all of your questions with the best of my knowledge in as detail as possible. They are as follows:
👉I would also like to add a welcome modal which will guide the user about each buttons and sections of the website. I will soon create another mockup design for that and will update you after completing that. 😊 I hope you will find my answers well explained and applicable. I will be happy to make any further changes and modifications as per need. Thankyou! |
Hello Everyone ! 👋
As Infragram has to be redesigned using bootstrap 4, I have created a mockup designs for it's user interface. I have divided the whole UI interface into 3 parts in order to describe each part more clearly :
Section (I) : UI design for the Navbar and Image Editing section:
Bootstrap 4 provides various templates for making responsive navigation bars. The header which is shown in the below mockup design could be easily created using that.
The whole image editing section will be inside the Container class of bootstrap 4. And then we will divide this section into rows and columns using bootstrap's Grid system for designing further.
Section (II) : UI design for displaying infragram's important features:
I would like to add a "features" section on the infragram's page below the image editing section.
Each feature has a "learn more" button attached to it, by clicking on which, users could navigate to other pages for reading more.
Section (III) : UI design for displaying testimonials and footer section:
I would also like to display the feedback of infragram's user using the Carousel Component of Bootstrap 4. These slides could be easily animated using various bootstrap classes present inside the carousel component.
Footer section will contain the infragran's logo and links to other social profiles.
Mockup of whole User Interface of Infragram: (Without any Labeling 🤗)
👉Any suggestions about enhancing the desing, making any quality changes or ideas about what could be done in a more better way, would be highly appreciated. I will like to know your views about this design so that it can further improve and become more user friendly! 👈
The text was updated successfully, but these errors were encountered: