<>Ngôn ngữ thiết kế hoặc hệ thống thiết kế không chỉ là hướng dẫn về phong cách giao diện người dùng mà còn là cách nhóm làm việc và các giá trị & nguyên tắc của nhóm.
Đầu tiên tôi kiểm tra:
1. Tool chúng tôi hiện đang sử dụng,
2. Đặt tên sử dụng trên các folder, file, layer, thậm chí cả hệ thống tên cho các symbol trong sketch và style.
3. Tài liệu viết ra mọi thứ, mọi quy tắc, v.v. nên điều này sẽ thực sự hữu ích khi bạn có bất kỳ thắc mắc nào, chỉ cần vào tệp và kiểm tra lại,
4. style guide.
Bạn cần setup khu vực làm việc trước khi bắt đầu thiết kế, giả sử bạn là một nhân viên pha chế, trước khi phục vụ, bạn cần chuẩn bị các loại chai, máy pha cà phê, nguyên liệu pha chế cocktail, v.v. để khi bạn mở quầy bar, mọi thứ đã sẵn sàng và được thiết lập tốt, thì ở đây mọi thứ cũng diễn ra theo cách tương tự.
/Tools (Công cụ)
– Không quan trọng là bạn dùng công cụ nào, nhưng quan trọng là bạn phải chuẩn hóa chúng trong quy trình.
– Tôi hay dùng Figma để thiết kế, Google Workspace để viết tài liệu và trello để thiết lập quy trình.
/Folders & Naming (Thư mục và đặt tên)
– Thật phiền phức khi phải mất nửa giờ để tìm kiếm một tập tin nào đó hoặc phiên bản mới nhất. Hãy sắp xếp chính xác các thư mục của bạn bằng tên và cú pháp mà mọi người đều biết.
– Quy tắc đặt tên:
+ Đầu tiên là số thứ tự
+ Tiếp theo là sử dụng dấu gạch nối (-) hoặc dấu gạch dưới (_) nhưng không được dùng cả hai.
+ Không bao giờ dùng khoảng trắng.
– Ví dụ: 01_assets_icon
/Tài liệu
– Cung cấp cho họ ý tưởng chung về giao diện cùng với chức năng ở cùng một nơi. Ghi chép mọi thứ, từ tên thư mục, tên tệp, quy trình thiết kế, công cụ nào để sử dụng trong khi thiết kế và cộng tác. Hiện tại, tôi sử dụng Google Docs. Mọi thành viên trong nhóm đều có thể dễ dàng truy cập, ngoài ra họ còn có thể bình luận trực tuyến, rất hữu ích cho việc phản hồi.
/Style guide
– Figma Plugins
– Đăt tên cho artboards và layers
– Tạo các page
– Thiết lập Grid system
– Thiết lập font
- Setup Plugin
1 số plugin hay dùng:
– Typescales
– Tokens Studio for Figma
– story.to.design
– Propstar
– Design System Organizer
– Gist - Đăt tên cho artboards và layers
Tương tự như folder - Đặt tên token
Ví dụ: color/blue/dark/700″. Trong đó, “color” là thư mục, “blue” là màu, “dark” là mức độ sáng và “700” là giá trị độ sáng - Thiết lập grid system
– Thiết lập hệ thống lưới sẽ khiến việc bố trí và định vị trở nên rất dễ dàng. Lưới cho phép bạn thiết kế chính xác, đảm bảo rằng bạn đang sử dụng kích thước và định vị nhất quán cho dù bạn đang thiết kế cho web, ứng dụng di động hay symbol.
– Hệ thống lưới 8pt. Sử dụng 8pt để định cỡ và giãn cách các thành phần trên một trang. Điều này có nghĩa là bất kỳ chiều cao hoặc chiều rộng, margin hoặc padding nào được xác định sẽ là gia số 8. (ví dụ 8, 16, 24, 32 ..)
– Point là gì? Point (pt) là phép đo không gian phụ thuộc vào độ phân giải màn hình. Giải thích đơn giản nhất là ở độ phân giải “1x” (hoặc @1x), 1pt = 1px. Ở độ phân giải “2x” (@2x), 1pt = 4px vì độ phân giải tăng gấp đôi trên cả trục X và Y khiến nó rộng 2px và cao 2px. Ở độ phân giải “3x” (@3x), 1pt = 9px (3px x 3px), v.v.
Và vì sao lại 8pt?
– Đối với Nhà thiết kế: Hiệu quả, ít phải đưa ra quyết định hơn trong khi vẫn duy trì nhịp điệu chất lượng giữa các yếu tố của bạn.
– Đối với Nhóm: Một hệ thống giao tiếp dễ dàng giữa nhà thiết kế và nhà phát triển (không cần phải bận tâm đến pixel). Nhà phát triển có thể dễ dàng ước lượng bằng mắt một gia số 8 điểm thay vì phải đo mỗi lần.
– Đối với Người dùng: Tính thẩm mỹ nhất quán với thương hiệu mà họ tin tưởng. Không có độ lệch nửa pixel mờ trên thiết bị ưa thích của họ. - Thiết lập font
– Sau khi đã chọn được một kiểu chữ đẹp và làm cho văn bản của bạn dễ đọc hơn. Bây giờ bạn có thể tự hỏi nên sử dụng kích thước nào. Vâng, tỷ lệ mô-đun là cách tốt nhất để xác định kích thước kiểu chữ và thậm chí là tỷ lệ của toàn bộ bố cục. Đầu tiên, bạn chọn tỷ lệ, sau đó chọn kích thước cơ sở của văn bản, ví dụ: 16pt. Sau đó, bạn nhân để có được các số tuần tự: 16pt, 24pt, 32pt, 40pt, 48pt, 56pt, 64pt …
