General Design Principles
Layout & Visual Structure
Use grid systems to logically group interface elements, ensuring consistent alignment so complex interfaces appear visually simple.
- Use consistent grid systems and spacing standards
- Group related elements in close proximity
- Help users quickly understand the content structure
Clear Visual Hierarchy
Interfaces should have clear primary and secondary levels, allowing users to see the most important information at a glance.
- Emphasize focus through font size, weight, and color contrast
- Define clear style differences for titles, subtitles, and body text
- Ensure a hundred clear pages are better than one cluttered page
Consistency & Standards
Interface design should follow uniform standards to make users feel familiar and reliable across different pages and components.
- Establish a design system or style guide
- Ensure elements with the same function are visually and interactively consistent
- Reduce the cost of user learning
Readability & Typography
Text content should be easy to read and scan, using clear and distinguishable typography.
- Limit font varieties to 2-3 types
- Ensure body text is at least 16px with sufficient line height
- Control line length to 40-75 characters per line
Intuitive Interaction & Feedback
After a user performs an action, the system should provide clear, timely feedback to inform the user of the current state.
- Design distinct hover and active states for interactive elements
- Provide loading prompts and status changes
- Follow the "form follows function" principle
User Control & Error Tolerance
Enable users to always feel in control of the interface and flow, providing undo and confirmation mechanisms.
- Provide clear cancel/back paths
- Pop up confirmation dialogs for destructive operations
- Prevention of errors is better than correction after the fact
Accessibility & Inclusivity
Design should cater to the widest possible range of users, including different abilities, devices, and environments.
- Ensure high-contrast color palettes (at least 4.5:1)
- Support keyboard navigation and screen readers
- Pre-set light/dark modes and high-contrast modes
Responsive & Flexible Design
Modern websites need to maintain a good experience across different screen sizes and devices.
- Use fluid layouts and flexible grids
- Adjust typography based on common breakpoints
- Ensure important elements are easy to operate even on small screens
Progressive Disclosure & Simplicity
Avoid overwhelming users by presenting all options at once; use step-by-step guidance and progressive disclosure.
- Break long processes into multiple steps
- Provide progress indicators
- Default to only showing critical information
Focus on User Goals
All design decisions should focus on helping users complete tasks more efficiently.
- Focus on essential, necessary functionality
- Remove any unnecessary burden
- Good design is as little design as possible—less is more