Footprint app

Design Theme

‍

• Theme: Dark theme for a sleek and modern look, reducing eye strain in low-light environments.

• Icon/Button Color: Use a single color for icons and buttons, such as a vibrant teal (#1ABC9C) to stand out against the dark background.

• Button Shape: Rounded corners with a radius of 8dp for a friendly and approachable feel.

‍

Home Screen

‍

• Google Map Integration:

    • The main feature of the home screen is a Google Map that displays the user’s registered travel locations.

    • Photo Thumbnails as Pins: Each registered location will have a pin with a photo thumbnail. This thumbnail will be a small circular image representing the location.

    • Pin Interaction: Tapping on a pin will open a travel detail page.

‍

Travel Detail Page

‍

• Photos and Memo Display:

    • This page will show all the photos uploaded for that specific travel location.

    • A short memo (up to 5 lines) will be displayed below the photos.

• Navigation:

    • A back button at the top left corner to return to the home screen.

‍

Add Travel Page

‍

• Upload Functionality:

    • Users can upload multiple photos or videos from their device.

    • A simple “+” button will allow users to add media files.

• Notes Section:

    • A text area for writing notes, limited to 5 lines.

• Save Button:

    • A rounded button at the bottom of the screen to save the travel entry. This button will be in the same teal color as other buttons.

‍

Bottom Navigation Bar

‍

• Home Icon:

    • Located on the left, it returns the user to the home screen with the map.

• Add Post+ Icon:

    • Centered in the navigation bar, it opens the add travel page.

• Profile Icon:

    • Located on the right, it navigates to the profile screen.

‍

Profile Screen

‍

• Post Count Functionality:

    • Displays the total number of posts the user has uploaded.

    • This can be shown as a simple text element, e.g., “Total Posts: X”.

• User Information:

    • Optionally, display basic user information like username or profile picture.

• Navigation:

    • A back button to return to the home screen.

‍

Additional Features

• Responsive Layouts:

    • Ensure the app is responsive and works well on different screen sizes.

• Form Validation:

    • Validate inputs on the add travel page to ensure all required fields are filled.

• Error Handling:

    • Provide user feedback for any errors, such as failed uploads or missing information.

• Loading Indicators:

    • Show loading indicators when fetching data or uploading media to enhance user experience.

‍

This plan outlines the core features and design elements needed to create a functional and user-friendly travel diary app with a dark theme.