Created a Mock Up Design for Infragram.org

[muskan2901]

Hello Everyone! I have redesigned the existing user interface of the Infragram, to make it more fascinating and comfortable for users. I have enhance existing functions and add new functions in various parts. All components of this interface will be built-in using Bootstrap 4.

1. Designed the home page of Infragram.

Homepage is extremely necessary for us because it serves as the first impression to potential users.

Here are the features I have added and enhanced.

• Added full-screen mode. It can be exited by clicking on the same icon again.
• Moved Q&A section to Help in the navbar.
• Linked the Infragram's tool page with a button on the homepage.
• Made a collage of five images. It will change one after another.
• Created "Why Infragram?" and "How to use?" sections to give an overview of what infragram is all about and will help get started.
• Added language selector button along with socials of Public Lab in the footer.
• kindly have a look at the pictorial representation.

Re-design of infragram tool.

• Users can upload images via Drag & Drop, Browse from the device, and can also use Infragram's webcam.
• They can save, download and share images easily just by clicking on their respective icons.
• On clicking the tool buttons, their functions will expand and will appear on the left of the screen. It can be closed by clicking on the same tool button again.
• It will support fullscreen mode.
• Please also check out the pictorial representation of the above points as below:

Mockup design for mobile devices.

• In the navbar, links are replaced with hamburger icon for small devices.
• To center our box we use the align-items property to align our item on the cross axis, which in this case is the block axis running vertically. We use justify-content to align the item on the main axis, which in this case is the inline axis running horizontally.
• Rest features will work the same as mentioned above.
• Please also check out the pictorial representation of the above points below:

[welcome[bot]]

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!

[muskan2901]

Hi @TildaDares @jywarren. Please review my mockup design for Infragram. I am also working on the window pop-up. It is almost done and will be presenting it soon. I will be proposing it on the site of the Public Laboratory for Outreachy. looking forward for feedback and suggestions.

[TildaDares]

Hi @muskan2901, you can post it on the public lab site and we’ll review it there. Thanks!!