take the reference of this and make one for my project Create a PROFESSIONAL UX WIREFRAME BOARD for a WEB APPLICATION named "FLOWMART". IMPORTANT: Use ONLY BLACK, WHITE and LIGHT GRAY. DO NOT use green, blue, purple or any colors. DO NOT create a final UI. This must look like a LOW-FIDELITY WIREFRAME. Take inspiration from a modern SaaS dashboard wireframe presentation. The layout should be similar to professional UX case studies where all screens are displayed together on one large A1 landscape board. ================================================== CANVAS • A1 Landscape • White background • Thin black outlines • Light gray placeholders • Equal spacing • Grid alignment • Number every screen (01, 02, 03...) • Connect screens using arrows • Separate Public Module, Buyer Module and Admin Module • Use monochrome wireframe style only ================================================== GENERAL STYLE • Outline buttons only • Outline input fields • Placeholder image boxes with X inside • Empty charts using bars and circles • Tables with placeholder rows • Sidebar navigation • Top navigation • Cards • Search bars • Dropdowns • Checkboxes • Radio buttons • Upload boxes • Icons as simple outlines only NO COLORS. ================================================== VERY IMPORTANT DO NOT use dummy people names. Never write John Joe David Emma Michael Sarah Player Owner Admin Name Instead use Buyer Name Buyer Email Workflow Name Category Order ID Transaction ID Profile Picture Workflow Thumbnail Never generate fake profile data. ================================================== TOP TITLE FLOWMART Automation Workflow Marketplace Complete Wireframe (All Screens & User Flow) ================================================== SECTION 1 PUBLIC MODULE SCREEN 01 Landing Page Include Logo Navigation Browse Workflows Categories About Contact Login Sign Up Hero Section Large Heading Search Automation Workflows Search Bar Hero Illustration Placeholder Featured Workflow Cards Category Cards Why FlowMart How It Works Testimonials FAQ Footer Primary Button Browse Workflows -------------------------------------------------- SCREEN 02 Browse Workflows Search Bar Category Filter Price Filter Platform Filter Difficulty Filter Workflow Cards Each card Workflow Thumbnail Workflow Name Short Description Supported Apps Price Rating View Details Button -------------------------------------------------- SCREEN 03 Workflow Details Large Workflow Image Workflow Name Price Description Features Supported Apps Supported Platform Difficulty Version Documentation Preview Images Related Workflows Buy Now Button -------------------------------------------------- SCREEN 04 Login Email Password Remember Me Forgot Password Login Button Register Link -------------------------------------------------- SCREEN 05 Register Full Name Email Password Confirm Password Register Button -------------------------------------------------- SCREEN 06 Forgot Password Email Send Reset Link ================================================== SECTION 2 BUYER MODULE SCREEN 07 Buyer Dashboard Left Sidebar Dashboard Marketplace My Purchases Profile Logout Dashboard Cards Purchased Workflows Downloads Recent Purchases Recommended Workflows -------------------------------------------------- SCREEN 08 Marketplace Search Filters Workflow Grid Wishlist Icon Purchased Badge View Details -------------------------------------------------- SCREEN 09 My Purchases Table Workflow Thumbnail Workflow Name Purchase Date Price Download Documentation -------------------------------------------------- SCREEN 10 Buyer Profile Profile Picture Personal Information Change Password Purchase History Logout -------------------------------------------------- SCREEN 11 Checkout Workflow Summary Workflow Thumbnail Workflow Name Price Coupon Payment Methods UPI Card Net Banking Wallet Order Total Pay Now Button -------------------------------------------------- SCREEN 12 Payment Success Success Icon Payment Successful Order ID Workflow Purchased Transaction ID Amount Paid Buttons Download Workflow Go To My Purchases Continue Shopping ================================================== SECTION 3 ADMIN MODULE SCREEN 13 Admin Login Email Password Login -------------------------------------------------- SCREEN 14 Admin Dashboard Sidebar Dashboard Manage Workflows Orders Buyers Analytics Settings Dashboard Cards Total Workflows Total Buyers Revenue Orders Recent Orders Sales Chart Placeholder Top Selling Workflows -------------------------------------------------- SCREEN 15 Manage Workflows Search Category Filter Status Filter Table Workflow Thumbnail Workflow Name Category Price Downloads Status Edit Delete Top Button + Add Workflow -------------------------------------------------- SCREEN 16 Add/Edit Workflow Workflow Name Category Price Difficulty Supported Platforms Checkboxes n8n Make Zapier Power Automate Supported Apps Tag Input Short Description Detailed Description Thumbnail Upload Banner Upload Workflow Upload Documentation Upload Tags Version Status Draft Published Buttons Cancel Preview Save Draft Publish Workflow -------------------------------------------------- SCREEN 17 Orders Management Search Orders Status Filter Date Filter Orders Table Order ID Buyer Name Workflow Name Amount Payment Status Purchase Date View Details -------------------------------------------------- SCREEN 18 Buyers Management Search Buyers Buyer Table Profile Picture Buyer Name Buyer Email Purchased Workflows Total Spent Join Date Status View Profile -------------------------------------------------- SCREEN 19 Analytics Revenue Chart Placeholder Downloads Chart Placeholder Orders Chart Placeholder Top Selling Workflows Category Distribution ================================================== BOTTOM OF BOARD FLOW SUMMARY Public Flow Landing Page ↓ Browse Workflows ↓ Workflow Details ↓ Login / Register ↓ Checkout ↓ Payment Success ↓ My Purchases Admin Flow Admin Login ↓ Dashboard ↓ Manage Workflows ↓ Add/Edit Workflow ↓ Publish Workflow ↓ Marketplace Dashboard ↓ Orders Management Dashboard ↓ Buyers Management Dashboard ↓ Analytics ================================================== FINAL REQUIREMENTS The output must look like a professional UX wireframe presentation board. It should resemble a Figma UX case study. Use ONLY black, white and gray. No realistic UI. No colors. No gradients. No shadows. No sample user names. Only generic labels. Consistent spacing. Equal screen sizes. Professional alignment. Navigation arrows between screens. Minimal wireframe style.
Sign in to leave a comment
No tasks generated yet.
Tasks will appear here as requirements are defined.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No user flows yet.
The User Flow Agent will generate per-persona navigation diagrams after SRD updates.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No user flows yet.
The User Flow Agent will generate per-persona navigation diagrams after SRD updates.
No comments yet. Be the first!