Frontend UI/UX Design Ideas

[hoichoidev]

`# IMAGE RESIZER

---

• Upload Image:

  Original Image Size: XX KB

• [Upload and Convert]

---

Resized Images:

New Image 1

• Aspect Ratio: 16:9

• Resolution: 1920x1080

• Format: WebP

• Size: XX KB (Reduced by XX%)

  [Download]

---

New Image 2

• Aspect Ratio: 4:3

• Resolution: 1024x768

• Format: AVIF

• Size: XX KB (Reduced by XX%)

  [Download]

---

... (More resized images) ...

---

[Footer: About] | [Contact] | [Terms]

`

Description:

Header: Contains the title of the website.
Upload Image Button: Allows users to select and upload an image.
Image Preview: Displays a preview of the uploaded image.
Original Image Size: Displays the size of the original uploaded image in KB.
Upload and Convert Button: Starts the conversion process.
New Image Sections: Each section displays:
The aspect ratio of the resized image.
The resolution of the resized image.
The format (WebP or AVIF).
The size of the resized image in KB and the reduction in size compared to the original image in percentage.
A download button to download the resized image.
Footer: Contains links to other pages or information like About, Contact, Terms, etc.
This is a basic wireframe and can be further refined and detailed based on specific requirements and design preferences.

#9

[RaunakMandal]

Are you looking to do it via the Express itself or use any framework?

[alokemajumder]

Hi @RaunakMandal no such choices . It can be anything that serves the purpose.

[RaunakMandal]

I was thinking to go ahead with NextJS. Let me know if I can start.

[hoichoidev]

sure, please go ahead . adding you as collaborator .

[sayakongit]

Hi @hoichoidev, would plain old HTML CSS work? I have already started working on it after I asked to assign the issue to me

[hoichoidev]

Hi @sayakongit ,

Can you and @RaunakMandal collaborate on it . I am adding you in the project. It would be great if you two can share the scope here after the initial discussion .

Thanks

[RaunakMandal]

Hi @sayakongit I have not started on it yet. We can have a discussion on it if you want.

[sayakongit]

Hi @sayakongit I have not started on it yet. We can have a discussion on it if you want.

Hi @RaunakMandal I would love to. Let's connect and find an approach to how we should proceed and collaborate.

[tamalCodes]

Hi, I went through the details and would love to contribute to the Frontend of it. Let me know if I can help in any way.

[hoichoidev]

Hi Tamal. please feel free to contribute. Including the issues.

[dharmi04]

I have a UI/UX idea like it could be as follows:

1. Header: center the header at the top of the page. It may contain the title of your website, for example, "Image Resizer Pro."

2. Color Palette: using a color palette tool like Huemint. You can choose a color scheme that suits your website's design.

3. Upload Image Button: This button should be prominently displayed, allowing users to select and upload an image. You can style it with your chosen color scheme and add an icon (like a cloud upload symbol) to make it visually appealing and intuitive.

4. Image Preview: Below the upload button, you can have an area where the uploaded image is displayed as a preview. Ensure it resizes to fit the designated space. Add an "X" button to remove the image if the user changes their mind.

5. Original Image Size: Next to the image preview, display the size of the original uploaded image

6. Upload and Convert Button: Below the image preview, have a button labeled "Upload and Convert." When clicked, this initiates the image conversion process.

7. New Image Sections: Once the image is uploaded and converted, you can create separate sections for the resized image details. For each section:

   • Aspect Ratio: Display the aspect ratio of the resized image, e.g., 16:9.
   • Resolution: Show the resolution of the resized image in pixels (e.g., 800x600).
   • Format: Indicate the image format, such as "WebP" or "AVIF."
   • Size: Display the size of the resized image in KB.
   • Reduction Percentage: Calculate and display the reduction in size compared to the original image in percentage (e.g., -45%).
   • Download Button: Provide a download button that allows users to save the resized image to their device. You can use a cloud download icon for this button.

8. Footer: At the bottom of the page, you can include a footer with links to other pages or information, such as "About," "Contact," "Terms of Use," and "Privacy Policy." You can use smaller, subtle text for the footer links.

[tamalCodes]

That sounds great 🚀

[hoichoidev]

This is neat. Please collaborate and go ahead .

Thanks