Home

>

Prompts Database

>

Art & Design
Generate Wireframes
avatar
Buffy Summers
Share
Leave a comment
612 days ago

Prompt type:

Design website, UI/UX Design

Category:

Art & Design, UI/UX Design

Media type:

Use with AI:

ChatGPT from OpenAI
View Full Output

Example output

Certainly! Here's a user flow and wireframe for a Fitness Tracking Mobile App:

1. Onboarding Screens:

  • Welcome screen with app logo and brief introduction
  • Introduction to key features with illustrations or animations
  • Call-to-action button to start sign-up process

2. Sign-Up/Login Page:

  • Sign-up form (Name, Email, Password)
  • Login form (Email, Password)
  • Option for social media login (Google, Facebook)
  • Links for forgot password and sign-up

3. Home Dashboard:

  • Personalized dashboard showing daily/weekly/monthly stats
  • Quick access buttons for tracking activities (e.g., Run, Walk, Cycle)
  • Overview of recent achievements or milestones
  • Inspirational quotes or tips for motivation

4. Activity Tracking:

  • Tracking screen with options for selecting activity type
  • Start/stop button for tracking activity duration
  • Real-time tracking of distance, duration, pace, and calories burned
  • Option to pause/resume activity tracking
  • Map view showing route (if applicable)

5. Workout Plans:

  • List of available workout plans categorized by goals (e.g., Weight Loss, Muscle Building, Endurance)
  • Detailed description of each plan including duration, intensity, and target areas
  • Option to start a selected workout plan with built-in timer and instructions
  • Progress tracking for ongoing workout plans

6. Nutrition Tracking:

  • Food diary for logging meals, snacks, and water intake
  • Database of food items with nutritional information (calories, macros)
  • Barcode scanner for quick food item input
  • Calorie counter with daily goal tracking

7. Progress Tracking:

  • Graphical representation of fitness progress over time (weight, body measurements, activity levels)
  • Before-and-after photo comparison feature
  • Achievement badges or rewards for reaching milestones
  • Insights or recommendations based on progress data

8. Community/Challenges:

  • Community feed showcasing user achievements, workouts, and challenges
  • Join or create challenges with friends or other app users
  • Leaderboard displaying rankings based on challenge performance
  • Option to like, comment, or share posts within the community

9. Settings:

  • User profile settings (Name, Gender, Age, Weight, Height)
  • Notification preferences for reminders and achievements
  • Units preference (imperial or metric)
  • Privacy settings for sharing progress or activity data

10. Support/Help:

  • FAQ section addressing common app usage queries
  • Contact form for customer support inquiries
  • Option for live chat support
  • Tutorial videos or guides for app features

11. Logout:

  • Confirmation message for successful logout
  • Option to return to the login screen or exit the app

This wireframe aims to provide users with a comprehensive fitness tracking experience, incorporating features for activity tracking, workout planning, nutrition tracking, progress monitoring, and community engagement. The layout prioritizes simplicity, clarity, and ease of navigation to encourage regular usage and promote overall fitness goals.

Description or instructions

Wireframing helps to define and plan the user interface structure. With the help of the following ChatGPT prompt, you can streamline your wireframing process and create effective designs faster.

Prompt

As a highly experienced UI/UX designer who has collaborated with major brands, your task is to generate a wireframe for the [user flow] on a [type of website/app]. This should include detailed layout designs for each page involved in the user flow, including placement of all buttons, images, and text fields. Ensure the design is user-friendly, intuitive, and aligns with the overall brand aesthetic. The wireframe should facilitate a seamless user experience, encouraging engagement and ensuring user satisfaction. Consider the latest design trends and leverage your extensive experience to make strategic design choices.