infragram icon indicating copy to clipboard operation
infragram copied to clipboard

Created a Mock Up Design for Infragram.org

Open muskan2901 opened this issue 3 years ago • 3 comments

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.

Blank diagram

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:

labelled diagram (1)

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:

mobile view

muskan2901 avatar Apr 17 '22 19:04 muskan2901

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!

welcome[bot] avatar Apr 17 '22 19:04 welcome[bot]

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.

muskan2901 avatar Apr 17 '22 20:04 muskan2901

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

TildaDares avatar Apr 18 '22 08:04 TildaDares