Khi không có Designer, "kim chỉ nam" tốt nhất của bạn là các Design System (Hệ thống thiết kế) đã được kiểm chứng bởi hàng triệu người dùng.
Dưới đây là 5 hệ thống bạn nên nghiên cứu để tìm kiếm quy chuẩn cho dự án của mình.
1. Stripe (Tiêu chuẩn vàng cho SaaS)
Stripe nổi tiếng với sự thanh lịch, sạch sẽ và các hiệu ứng chuyển đổi cực kỳ tinh tế.
- Ứng dụng: Nếu bạn đang làm Landing page bán hàng, dashboard tài chính hoặc landing page giới thiệu sản phẩm công nghệ cao.
- Đặc điểm: Shadow cực mịn, typography thoáng đãng, dùng các dải màu gradient nhẹ nhàng.
2. Linear (Dark Mode & Công cụ chuyên nghiệp)
Linear đã tạo nên một trào lưu thiết kế mới: The Linear Look.
- Ứng dụng: Các công cụ dành cho developer, quản lý dự án (Project Management), Dark Mode.
- Đặc điểm: Border siêu mỏng, tập trung vào phím tắt (Keyboard-first), các chi tiết "glow" (phát sáng) tinh tế trên nền tối.
3. Shopify Polaris (Thương mại điện tử & Admin)
Polaris thực tế và tập trung vào hiệu quả công việc.
- Ứng dụng: Các trang quản trị (Admin), ERP, ứng dụng thương mại điện tử.
- Đặc điểm: Typography cực kỳ dễ đọc, phân cấp thông tin (Information Architecture) cực tốt, các quy tắc về viết nội dung (Content Design) rất chuẩn.
4. GitHub & Vercel (Developer Experience)
Cấu trúc UI cực kỳ chắc chắn và tối giản.
- Ứng dụng: Công cụ kỹ thuật, dashboard hạ tầng.
- Đặc điểm: Dùng bảng màu trung tính (Xám/Trắng/Đen) là chính, chú trọng vào dữ liệu và tốc độ tương tác.
5. Ant Design vs Material Design
- Ant Design (Alibaba): Định hướng cho ứng dụng doanh nghiệp có dữ liệu khổng lồ. Rất nhiều component phức tạp như Tree Select, Cascader.
- Material Design 3 (Google): Thân thiện, bo tròn, màu sắc sống động (Material You). Tốt cho ứng dụng người tiêu dùng (B2C) trên Android/Web.
Cách "soi" một Design System để học hỏi:
- Mở trang Typography: Xem họ dùng font-size bao nhiêu cho Body, Heading.
- Mở trang Button: Có bao nhiêu states? (Hover, Active, Focused). Khoảng cách (Padding) bên trong nút là bao nhiêu?
- Mở trang Form: Label nằm ở đâu? Thông báo lỗi trông như thế nào?
- Mở trang Spacing: Họ dùng hệ thống 4px hay 8px?
Kết luận
Đừng cố gắng tự tạo ra một quy chuẩn mới. Hãy chọn một "hình mẫu" gần nhất với sản phẩm của bạn và tuân thủ các quy tắc của họ. Việc này giúp ứng dụng của bạn không chỉ đẹp mà còn đạt chuẩn UX quốc tế ngay từ ngày đầu tiên.