This document provides text-based wireframes for the key screens of the IdeaScore application. These wireframes serve as a guide for implementation and will evolve as the project progresses.
+--------------------------------------------------------------+
| char.build [User: email] |
| [Home] [IdeaScore] [OtherApp] [Logout] |
+--------------------------------------------------------------+
| |
| # IdeaScore Dashboard |
| |
| [+ Add New Idea] [Filter ▼] [Sort By: Ratio ▼] |
| |
| ## Top Ideas by Ratio |
| +----------------------------------------------------------+
| | Title | Effort | Payoff | Ratio | Tags |
| |--------------|--------|--------|-------|----------------|
| | Idea 1 | 3 | 9 | 3.0 | #tag1 #tag2 |
| | Idea 2 | 2 | 5 | 2.5 | #tag3 |
| | Idea 3 | 4 | 8 | 2.0 | #tag1 #tag4 |
| +----------------------------------------------------------+
| |
| ## Recently Added |
| +----------------------------------------------------------+
| | Title | Date Added | Effort | Payoff | Ratio |
| |--------------|-------------|--------|--------|----------|
| | New Idea 1 | Today | 5 | 7 | 1.4 |
| | New Idea 2 | Yesterday | 8 | 9 | 1.1 |
| +----------------------------------------------------------+
| |
| ## Quick Stats |
| +---------------+ +---------------+ +---------------+ |
| | Total Ideas | | Avg. Effort | | Avg. Payoff | |
| | 12 | | 4.7 | | 6.3 | |
| +---------------+ +---------------+ +---------------+ |
| |
+--------------------------------------------------------------+
| © 2025 char.build | Built with Val Town |
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| char.build [User: email] |
| [Home] [IdeaScore] [OtherApp] [Logout] |
+--------------------------------------------------------------+
| |
| # Add New Idea [Back to List]|
| |
| +----------------------------------------------------------+
| | Title * |
| | [ ] |
| | |
| | Description |
| | [ ] |
| | [ ] |
| | [ ] |
| | |
| | Effort Score (1-10) * |
| | Low [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] High |
| | |
| | Payoff Score (1-10) * |
| | Low [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] High |
| | |
| | Tags (Optional) |
| | [ ] [+ Add Tag] |
| | |
| | [Cancel] [Save Idea] |
| +----------------------------------------------------------+
| |
+--------------------------------------------------------------+
| © 2025 char.build | Built with Val Town |
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| char.build [User: email] |
| [Home] [IdeaScore] [OtherApp] [Logout] |
+--------------------------------------------------------------+
| |
| # My Ideas |
| |
| [+ Add New Idea] |
| |
| [All Ideas ▼] [Filter ▼] [Sort By: Ratio ▼] |
| |
| +----------------------------------------------------------+
| | Title ↑↓ | Date ↑↓ | Effort ↑↓ | Payoff ↑↓ | Ratio ↑↓|
| |--------------|-----------|-----------|-----------|---------|
| | Project A | 03/15/25 | 3 | 9 | 3.0 |
| |--------------|-----------|-----------|-----------|---------|
| | Description: This is a brief description of Project A |
| | Tags: #work #coding #priority |
| | [Edit] [Delete] |
| | |
| |--------------|-----------|-----------|-----------|---------|
| | Project B | 03/12/25 | 5 | 8 | 1.6 |
| |--------------|-----------|-----------|-----------|---------|
| | Description: This is a brief description of Project B |
| | Tags: #personal #hobby |
| | [Edit] [Delete] |
| | |
| |--------------|-----------|-----------|-----------|---------|
| | Project C | 03/10/25 | 7 | 6 | 0.9 |
| |--------------|-----------|-----------|-----------|---------|
| | Description: This is a brief description of Project C |
| | Tags: #work #research |
| | [Edit] [Delete] |
| | |
| +----------------------------------------------------------+
| |
| [< Previous] Page 1 of 3 [Next >] |
| |
+--------------------------------------------------------------+
| © 2025 char.build | Built with Val Town |
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| char.build [User: email] |
| [Home] [IdeaScore] [OtherApp] [Logout] |
+--------------------------------------------------------------+
| |
| # Project A [Back to List]|
| Added: March 15, 2025 |
| |
| +----------------------------------------------------------+
| | |
| | Description: |
| | This is a detailed description of Project A. It contains |
| | more information about what the idea entails and why |
| | it's important. |
| | |
| | Tags: #work #coding #priority |
| | |
| | Score Summary: |
| | +----------------------------------------------+ |
| | | | |
| | | Effort: ■■■□□□□□□□ 3/10 | |
| | | | |
| | | Payoff: ■■■■■■■■■□ 9/10 | |
| | | | |
| | | Ratio: 3.0 | |
| | | | |
| | +----------------------------------------------+ |
| | |
| | [Edit] [Delete] |
| +----------------------------------------------------------+
| |
+--------------------------------------------------------------+
| © 2025 char.build | Built with Val Town |
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| char.build [User: email] |
| [Home] [IdeaScore] [OtherApp] [Logout] |
+--------------------------------------------------------------+
| |
| # Idea Visualizations [Back to List]|
| |
| [Chart Type: Bubble ▼] [Filter ▼] [Export ▼] |
| |
| +----------------------------------------------------------+
| | |
| | HIGH PAYOFF |
| | ^ |
| | | |
| | | ● Project A |
| | | ● |
| | | ● ● |
| | | |
| | | ● |
| | | |
| | | ● |
| | LOW EFFORT <---------------|---------------> HIGH EFFORT |
| | | |
| | | |
| | | ● |
| | | ● |
| | | |
| | | |
| | LOW PAYOFF |
| | |
| | Hover over a bubble to see details. Size represents |
| | recency of idea creation. |
| +----------------------------------------------------------+
| |
+--------------------------------------------------------------+
| © 2025 char.build | Built with Val Town |
+--------------------------------------------------------------+
+--------------------------------------------------------------+
| char.build [User: email] |
| [Home] [IdeaScore] [OtherApp] [Logout] |
+--------------------------------------------------------------+
| |
| # Edit Idea: Project A [Back to List]|
| |
| +----------------------------------------------------------+
| | Title * |
| | [Project A ] |
| | |
| | Description |
| | [This is a detailed description of Project A. It ] |
| | [contains more information about what the idea entails ] |
| | [and why it's important. ] |
| | |
| | Effort Score (1-10) * |
| | Low [1] [2] [3*] [4] [5] [6] [7] [8] [9] [10] High |
| | |
| | Payoff Score (1-10) * |
| | Low [1] [2] [3] [4] [5] [6] [7] [8] [9*] [10] High |
| | |
| | Tags |
| | [#work #coding #priority ] [+ Add Tag] |
| | |
| | [Cancel] [Save Changes] |
| +----------------------------------------------------------+
| |
+--------------------------------------------------------------+
| © 2025 char.build | Built with Val Town |
+--------------------------------------------------------------+
+-----------------------------+
| char.build [≡ Menu] |
+-----------------------------+
| |
| # IdeaScore Dashboard |
| |
| [+ Add New Idea] |
| |
| [Filter ▼] [Sort: Ratio ▼] |
| |
| ## Top Ideas by Ratio |
| +-------------------------+ |
| | Project A | |
| | Effort: 3 Payoff: 9 | |
| | Ratio: 3.0 | |
| | #work #coding | |
| +-------------------------+ |
| |
| +-------------------------+ |
| | Project B | |
| | Effort: 2 Payoff: 5 | |
| | Ratio: 2.5 | |
| | #personal | |
| +-------------------------+ |
| |
| ## Quick Stats |
| +-------------------------+ |
| | Ideas: 12 Avg Ratio: 1.8| |
| +-------------------------+ |
| |
| [View All Ideas] |
| |
+-----------------------------+
| © 2025 char.build |
+-----------------------------+
-
Responsive Design
- All views should adapt to different screen sizes
- Mobile views will stack elements vertically
- Tables will collapse into cards on small screens
-
Color Scheme
- Use the char.build color palette for consistency
- Use color coding for ratio values (high=green, medium=yellow, low=red)
- Ensure sufficient contrast for accessibility
-
Interactive Elements
- All tables should support column sorting
- Filters should be applied instantly
- Form submissions should show loading states
- Provide clear feedback for all user actions
-
Accessibility
- Include proper ARIA labels
- Ensure keyboard navigation works
- Maintain proper heading hierarchy
- Test with screen readers
These wireframes represent initial designs and will be refined during implementation based on feedback and testing.