Project : Water Intake Design

[yogeshtakeo]

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

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

[Youngbikalp]

Name: Bikalp Timalsina Project : Water Intake Design Figma Project Link: https://www.figma.com/file/C4FTcS7b0Iw26zFdcWD9I4/Untitled?type=design&node-id=7%3A11586&mode=design&t=4mOUOlcoEPLXkLhL-1

Description: My design choice was to make the app's color scheme bluish, as it symbolizes water. This app is called DrinkUp and is designed for individuals to track their daily water intake. You can set your daily water intake goal by clicking the green + button. This action will take you to a screen where you can customize your goal. Feel free to edit your goal as needed. Once you've set your goal by tapping the green + button, your daily target will be updated on the home page. If you wish to remove your goal, simply click the red x button. On the home page, a water droplet icon displays your current percentage of water intake. There are also green + and red x buttons available. Clicking the green + button will take you to a screen where you can record the amount of water you've consumed. Every time you update your water intake, both your daily goal and water percentage will adjust accordingly. If you need to correct any mistakes while recording, you can also click the red x button to subtract your water intake.

[shantibasnet]

Shanti Basnet Water Intake Design URL: https://www.figma.com/file/7IE0zWqK7MkvWSW6ir5l1R/Water-Intake?type=design&node-id=0-1&mode=design&t=JxByhAlalqjAGXLv-0

About the App:

This wireframe for Hydrate App incorporates a blue theme, symbolizing water, and employs a clean, minimalistic design for a user-friendly experience. User can easily set goals, track their daily water intake and view their progress on the dashboard and and receive daily motivational quotes and healthy tips to stay motivated.

[mbasnet123456]

Name- Manoj Basnet Task- Water Intake Design Url-https://github.com/mbasnet123456/Water-Intake-Design.git

[raj-maharjan99]

Raj kumar maharjan Link : https://www.figma.com/file/9d4AJyHBb0zHldOPBgq5dR/Water-Intake-Design?type=design&node-id=0-1&mode=design&t=3rsw8rbBHaXzMmPl-0

[Narayanadhikari9]

Name: Narayan Adhikari Project 2: Water Intake Design Figma Url: https://www.figma.com/file/hxmFeOXMfCtWPoEtINhk2c/Untitled?type=design&node-id=17-5&mode=design&t=yStWZt4rLqRxIlHI-0

Description: My water intake Apps is to tell people to drink enough water to keep every part of their body working properly. It helps your body stay healthier every day by drinking more water. I even say how much glass of water you can take according to your body weight. Also, depends on the temperature, like how much workout you did, eat food, or whenever your mouth feels dry. so, just wanted to say to keep yourself hydrated by drinking plenty of water every day.

[Madhv98]

Name: Madhav Dhital Task: Water Intake Design FigmaURL: https://www.figma.com/file/MrHNMLMefI1Jg1CqQrS9qR/Water-intake?type=design&node-id=0%3A1&mode=design&t=prV2mI5KMC1Dy51N-1

About the APP: The first page of the Hydrate App serves as an introduction to users, providing an overview of the app's purpose and functionality.On the second page, users can easily customize their daily water intake goals. This includes the ability to add or delete entries with a user-friendly interface. The page also features a metric switch for displaying water measurements in milliliters (ml) or ounces (oz). Additionally, a navigation bar at the bottom allows users to seamlessly move between the home, reminder, and history sections. The third page is dedicated to a reminder log, showcasing scheduled hydration reminders. Completed reminders are marked with a tick icon that turns green when fulfilled. Users can view a chronological list of reminders with different time logs. The final page presents a graphical representation of the user's hydration history for the week. This graph details daily water consumption, providing a visual overview of hydration patterns. The section also includes statistical information such as monthly and weekly averages to help users track their overall water consumption trends.