Project 2 : Water Intake Design

yogeshtakeo commented 1 year ago

Task: Design Wireframe of a Mobile App for Daily Water Intake Tracking using Figma

Objective: Use Figma to design a wireframe for a mobile app that allows users to track their daily water intake.

Task Overview

Set up a Figma account or use an existing one.
Create a new Figma project for designing the mobile app wireframe.
Design the wireframe for the mobile app screens, including the main tracking screen, settings, and progress overview.
Pay attention to user interface (UI) elements, layout, and interactions.

Task Details

Project Setup:
- Set up a Figma account or log in to your existing account.
- Create a new Figma project specifically for designing the mobile app wireframe.
- Familiarize yourself with the Figma interface and tools.
Design Main Tracking Screen:
- Design the main screen of the mobile app where users can track their daily water intake.
- Include UI elements such as a progress bar, water intake counter, and a button to add or subtract water intake.
- Pay attention to the layout, typography, and colors to create an appealing and intuitive design.
Design Settings Screen:
- Design a settings screen where users can customize their water intake goals or modify other app preferences.
- Include UI elements such as input fields, sliders, and checkboxes to enable customization.
- Ensure the settings screen follows a logical flow and is visually consistent with the main tracking screen.
Design Progress Overview Screen:
- Design a screen that provides users with an overview of their water intake progress.
- Include visual representations such as charts or graphs to display daily, weekly, or monthly water intake data.
- Consider incorporating motivational elements or achievements to encourage users to reach their hydration goals.
Refine and Polish:
- Review the wireframe design and make necessary refinements to improve clarity, usability, and visual appeal.
- Ensure consistency in UI elements, typography, colors, and spacing throughout the wireframe.
- Pay attention to responsive design principles to ensure the wireframe is adaptable for different screen sizes.

Task Submission

Export or share the Figma project as a link or provide screenshots of the wireframe screens.
Include a brief description of the design choices and rationale behind your wireframe.
Optionally, provide additional notes or annotations to explain specific interactions or functionality.
Share the Figma project link, screenshots, and description with your instructor.