Designing a full Screen user-interface for infragram. ( Outreachy Applicant'22)

[sarxxt]

I am Sara, an outreachy applicant and this is my first time contributing to open source. In this issue tab I will share all the improvements that I think infragram UI lacks and how to enhance the UI design.

Front Page:

• I changed the color combination, in terms of focusing on visitors attention.
• I think logo text needs some adjustments so I rearranged texts to give it a better look.
• I think picture upload page should be separate from the editing page so I come up with this design. User can upload and drop file or use infragram web camera.
• On dropping and uploading picture, the new window will open.
• It will have a login and sign up option on the home page.
• On the Nav bar there are three options
1. Learn

Its execution is explained in the picture above.

2. Report an issue

It will take the user to Infrgram github repository

**3. Infragram **

Infrgram will have all these options so user can directly learn infragram from this page, so there will be no need to got to public lab page first

I designed this page as it will contain all the information about how to use infragram and about filtes and math expression etc. On clicking the options it will display all the relevant details about that topic.

4. FAQs
I think Q& A section is very wide that it is difficult to scroll through the website as Q&A section comes in between. The FAQs in the Nav bar can directly take the user to this section. I think there should be a search option as it will be a lot easier for the user to filter through questions. I would also like to add the filter between " answered and answered" question but I haven’t add it in the design. There is an expand option on the right side of question, it will show the answer and the likes and replies will be written under the answer .

Ask question section will right below the Q/A section

Editing window:

This window will open once user upload an image or open webcam.

On clicking convert icon:

A small side window will expand and it will show functionalities the icon provide

1) Convert/ Analyze

I think the convert tool should be more specific on what the user should enter as input as it is a little confusing. While using infragram I was inputting digits in the start so I think users can also make the same mistake. For that I designed it this way, where user can get a menu of expression to choose expression and can also write their own expressions. Furthermore, we can add details of expressions little description but since I m not an expert in this so I left that portion empty. The image is attached below. The preset option will also be in the convert menu as it is also the part of conversion, but there will be no write your own expression option in it.

1) Colorize

I find colorize option a little intimidating as well, so I changed its style a little to make it more simple and easy to user.

2) Overlay

The current overlay tool is not well organized as the slide bar is very far so its confusing wether the slide bar is associated with overlay or not. I tried to give it a little simple yet understandable look.

[sarxxt]

@jywarren @TildaDares I will really appreciate if you check my proposal.

[sarxxt]

@TildaDares can you change the label to proposal ?

[TildaDares]

Hi @sarxxt, we're currently accepting proposals on publiclab.org. It's a lot easier to review proposals when they're all in one place. The call for proposals issue gives detailed info about how to write a proposal.