publiclab / infragram

A minimal core of the Infragram.org project in JavaScript
https://infragram.org/sandbox/
GNU General Public License v2.0
44 stars 166 forks source link

Proposal for the "Popup Modal Guide for Infragram" šŸ¤ šŸš€ #384

Open simransia opened 2 years ago

simransia commented 2 years ago

I have earlier created a proposal in which I have discuss few ideas about the UI design of Infragram. and also about it's responsiveness.

Now, I want to share few ideas about the 'Popup Modal Guide For Infragram' which will guide the user about various features and functions of Infragram. Below is the image explaining about the design:

Desktop - 16 (1)



You can look at the gif below for watching the video and for analysing how the modal will look like in both Desktop and Mobile screen:



















**After researching a lot about all of the features and functions of Infragram, I have created this guide for users which is as below. I have tried explaining about everything in detail**.



You could yourself play this prototype by using this link: Popup modal guide for users

After opening this link you have to hover on the top of the screen then these options will appear on the navbar as shown below. Then you have to click on the fit to screen option for viewing properly.

Screenshot (161)

You can also make it a full screen by clicking on the last option available on the top-right corner. Then you have to click on the "Take a Tour" button for moving forward the presentation. After that you have to click on the "next" buttons present on the popup to move forward.

Thank You So Much ā¤ļø Please share your reviews in the comments below!

simransia commented 2 years ago

Hello @TildaDares @jywarren @cesswairimu . Kindly review my mockup designs for the popup modal guide for the infragram users.

Most importantly please visit this link https://www.figma.com/proto/NKGSrf2EPgg6wRq1OajGFm/Infragram-UI?node-id=214%3A9&scaling=scale-down&page-id=0%3A1&starting-point-node-id=214%3A9 for watching all the popups explaining about all the features of Infragram.

I have not attached them here because they are huge in numbers. They are also unable to read in the gif which I have uploaded above. So you could only read all of them by visiting the mentioned link and playing the prototype yourself by pressing the next buttons according to your convenience.

Thanks a lot šŸ˜‡