Proposal for designing new interface using Bootstrap 4 for Infragram [Outreachy2022]

[simransia]

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 :

Note: I have labled most of the components of the mockup designs which I have created and I have also explained about their functionalities, so that it could be easily understood by everybody. You all could easily read about them in the images below. Also the whole UI design containing all the section together is also attached at the end of this proposal.😊

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! 👈

[welcome]

Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄
If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can make a gif too!

[simransia]

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:

1. While I was going through the links present in the Infragram's page then I found out a feedback given by a person about Infragram. Then I thought about creating a feedback section in the Infragram's page itself.
2. I have also created a section in mockup design provided above, which is displaying few important features of Infragram. In my opinion, displaying these features to the users in a concise and efficient manner will help the users to get to know Infragram better.
   So I want to know whether it is ok to add these sections on infragram's page or the page should only contain the image editing section.

Eagerly waiting for your reply 😊

[jywarren]

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!

[jywarren]

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:

[simransia]

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:

1. Yes we can make "Image editing section" edge-to-edge horizontally. We could use "container-fluid class" in order to do that.

2. Bootstrap provides a great help in making the web pages highly responsive, we can use its powerful grid system to build layouts of all shapes and sizes. We will divide our image editing section into 3 rows. First row will be divided into two columns. On small devices these columns will break into two different lines, depending on the classes we have used for columns. For example: If we use col-md class then our columns will break at the screen size equal to or greater than 720px.

3. We could try making the drag and drop section using the flex-box classes. We could use justify-content-center and align-items-center classes in the parent element for aligning the drag and drop section to center both vertically and horizontally. We could also use nested flex-boxes for aligning the children of drag and drop section as well.

4. We could use relative length units for font sizes in order to make our fonts responsive on small devices too.
   For example: "rem"-for making the font-size relative to font-size of the root element
   "vw"-for making the font-size relative to 1% of the width of the viewport*
   "vh"-for making the font-size relative to 1% of the height of the viewport*

• Please, also have a look at the pictorial representation of the above points as below:

5. I like the idea of having a floating save icon which when getting clicked will open the three options.
   We could also save valuable space by removing the save, export and download buttons with their respective icons. I have
   explained about it in the picture below.

• Pictorial representation explaining more about the responsiveness of infragram on mobile devices:

6. We could implement the mapknitter webpage's ideas as well, specially the tables at the bottom which is showing more content.

👉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!