Thiết kế dành cho Lập trình viên
Lập trình viên thường bỏ qua thiết kế. Nhà thiết kế thường bỏ qua mã nguồn. Khoảng cách này làm giảm chất lượng sản phẩm.
Tôi sống ở giữa hai thế giới đó. Tôi yêu CSS sạch sẽ và nghệ thuật chữ (typography) đẹp mắt. Góc nhìn kép này giúp tôi xây dựng các sản phẩm tốt hơn.
Vấn đề của sự chia tách này:
- Các nhà thiết kế tạo ra các bản mockup bị lỗi trên màn hình di động.
- Các lập trình viên lược bỏ các chi tiết hình ảnh để tiết kiệm thời gian.
- Sản phẩm cuối cùng mất đi linh hồn.
Tôi sử dụng các hệ thống thiết kế (design systems) để khắc phục điều này. Tôi coi các hệ thống thiết kế như những bản hợp đồng.
Tôi không dùng "màu xanh" hay "16 pixel". Tôi dùng các token.
- Màu sắc trở thành "primary-500".
- Khoảng cách trở thành "space-4".
Khi một nhà thiết kế thay đổi một token trong Figma, lập trình viên chỉ cần cập nhật một biến duy nhất trong CSS. Toàn bộ sản phẩm sẽ giữ được sự nhất quán. Điều này giúp loại bỏ các công việc thủ công và sai sót.
Tôi thiết kế trong những ràng buộc. Tôi không giả vờ như chúng không tồn tại. Tôi thảo luận với các kỹ sư về sự đánh đổi (trade-offs). Tôi đề xuất các cách để duy trì trải nghiệm người dùng tốt mà không làm cho mã nguồn trở nên quá khó viết. Thiết kế trở thành một sự hợp tác thay vì chỉ là một bước bàn giao.
Nhận diện thương hiệu không chỉ dừng lại ở phần nhìn. Nó bắt đầu từ cá tính.
- Thương hiệu đó táo bạo hay tĩnh lặng?
- Nó vui tươi hay nghiêm túc?
Những từ ngữ này dẫn dắt mọi lựa chọn. Chúng quyết định phông chữ, hình ảnh và giọng điệu. Phần hình ảnh chỉ là sự chuyển hóa cá tính đó thành các pixel.
Dù bạn đang xây dựng một bảng điều khiển (dashboard) hay một thương hiệu, quy trình của bạn mới là điều quan trọng. Một ảnh chụp màn hình chỉ là bề nổi. Mọi người cần thấy được bối cảnh và logic đằng sau công việc của bạn.
Thiết kế không bao giờ là kết thúc. Tôi ra mắt, quan sát và tinh chỉnh.
Một thiết kế tốt được đưa vào sử dụng ngay hôm nay sẽ tốt hơn một thiết kế hoàn hảo nhưng không bao giờ được ra mắt. Hãy sử dụng phản hồi thực tế để cải thiện từng bước nhỏ một.
Nguồn: https://dev.to/visionapi/designing-for-developers-how-i-bridge-code-and-creativity-2kgf