UI/UX Design: Error Pages, Empty States, Loading Placeholders, and Skeleton Screens Across the Application #17
Description
Description
Design a coherent set of error, empty, and loading states that keep the application usable and reassuring during failures or slow operations.
Requirements and context
- This is for UI/UX designers only, not frontend engineers.
- Needs designs for: 404/"not found" pages, generic error pages, "no data yet" states, and skeleton loaders for tables/cards/charts.
- Patterns must work consistently across both startup and investor experiences.
- Copy and visuals should be empathic and oriented toward recovery (guiding users to what they can do next).
- Must consider network or backend issues typical of blockchain interactions (e.g., transaction delays, node errors).
Suggested execution
- Create templates for error pages, with suggested illustration or iconography styles.
- Design empty state components for lists, dashboards, and detail pages, with contextual action hints (e.g., "Create your first offering").
- Provide skeleton loader designs for key structures (tables, charts, cards).
- Annotate recommended copy patterns for different error categories (user error vs system error vs permission issue).
- Ensure responsive behavior is considered so these states look good on mobile as well as desktop.
Test and commit
- Ensure error and empty states are helpful and guide users toward recovery actions.
- Validate that skeleton loaders match the final content structure and don't cause layout shifts.
- Include design notes on how to handle partial failures (e.g., some data loads, some doesn't).
Example commit message
docs(design): design error pages, empty states, and loading skeletons
Guidelines
- Complete set of error, empty, and loading state designs
- Consistent patterns across all application pages
- Timeframe: 96 hours