Element Sizes: width, height, padding, margin, borders, border-radius, box-shadow
Element States: hover, active, disabled
Images/Icons:
Supported Browsers & Devices
All necessary browsers are supported (e.g., Chrome, Firefox, Safari, Edge, IE).
All necessary devices are supported (e.g., desktop, tablet, mobile).
Responsive Design
All necessary breakpoints are implemented (e.g., 320px, 768px, 1024px, 1440px).
Layout doesn’t break or overflow on resize
Text doesn’t overflow or get cut off.
Images/Icons are responsive.
No horizontal scrolling on mobile
Mobile menu and navigation work correctly
Form Validation Rules
Required fields are clearly indicated (e.g., asterisk * or label)
Client-side validation is implemented (e.g., HTML5 validation or JavaScript)
Error messages are clear, specific, and user-friendly (e.g., “Email is required”)
Fields with errors are focused or highlighted for quick correction
Real-time validation is provided (optional, but improves UX)
Form does not submit with invalid or incomplete data
Loading State: When we submit a form, the submit button should be in a loading state and disabled from multiple submissions until HTTP request is completed.
Valudation Rules:
Input fields: required, min length, max length, pattern, etc.
Dates: the FROM date should be less than the TO date
Email: format is correct (e.g., example@domain.com), use input type="email"
Phone number: format is correct (e.g., +1234567890), use input type="tel"
Password: format is correct (e.g., at least 8 characters, 1 uppercase letter, 1 lowercase letter, 1 number, 1 special character), use input type="password"