<aside> ©️ IT: Từ A tới Á cho người ngoài ngành by @Rose Trinh
</aside>
Difference Between Wireframe, Mock-Up, and Prototype? - Webuters
UI Design là quá trình tạo ra giao diện người dùng (User Interface) cho ứng dụng hoặc trang web, và nó là một phần không thể thiếu trong quá trình phát triển phần mềm. Mục tiêu của UI Design là tạo ra giao diện thân thiện, hấp dẫn và dễ sử dụng, nhằm cải thiện trải nghiệm người dùng cuối.
Trong UI Design, có một số khái niệm cơ bản:
Sketch: Đây là bước đầu tiên trong quá trình thiết kế, nơi các ý tưởng ban đầu được vẽ ra để thể hiện cấu trúc tổng quan của giao diện. Giống như những bản vẽ tay sơ bộ mà bạn vẽ trên một tờ giấy trắng.
Wireframe: Là một bản thiết kế cơ bản, chỉ tập trung vào cấu trúc và bố cục tổng quan của giao diện mà không quá chi tiết về hình ảnh hoặc nội dung. Wireframe cung cấp một cái nhìn tổng quan về cấu trúc và bố trí của các thành phần mà không cần phải quá chi tiết.
Mockup: Là phiên bản tĩnh hoặc động của giao diện, chứa các yếu tố thiết kế như màu sắc, font chữ và vị trí của các phần tử giao diện. Mockup được sử dụng để đánh giá và phản hồi từ khách hàng hoặc đồng đội.
Prototype: Là bản sao tương tác của giao diện, cho phép người dùng thử nghiệm và tương tác với giao diện theo cách thực tế trước khi triển khai. Prototype thường bao gồm các tính năng tương tác như click và hover để hiển thị cách mà giao diện sẽ hoạt động.
<aside> 💭 Một số tools mình từng dùng cho UI Design:
// Đi qua một số công ty thì mình thấy Figma chắc là tool UI phổ biến nhất hiện nay. Từ hồi đầu năm 2024 thì Figma bắt đầu charge Dev Mode, hơi đau ví (thay cho cty 😄*) nhưng chấp nhận thôi → [Dev mode pricing - Figma Community Forum](https://forum.figma.com/t/dev-mode-pricing/61271#:~:text=Figma Dev mode is charged,to buy an editor seat.)*
// Hồi đầu học là mình học Adobe XD, sau bỏ vì Adobe chuyển qua charge phí… và giờ thì RIP! bye bye Adobe XD. Cho những ai muốn biết thêm thì đọc → **Has Adobe XD been discontinued? )**
// Axure RP thì Ad không dùng trong công việc (và cũng chưa thấy xung quanh có bạn nào dùng), Ad từng có cơ hội sử dụng khi học khóa BA và được giới thiệu về công cụ này. Thấy cũng không khác Figma lắm. Theo lời đồn của các chuyên gia trong ngành, Axure mạnh hơn Figma ở mảng prototyping. Tuy nhiên, Ad chưa đạt tới mức độ để trải nghiệm được sự khác biệt đó.
// Thêm một công cụ khác được giới thiệu bởi giáo viên trong khoá học BA. Ad không mấy ấn tượng với tool này. Thấy những cái Balsamiq làm được thì… về cơ bản dùng draw.io thôi cũng làm được.
// Whimsical thì Ad chưa từng xài để tự làm UI design bao giờ, tuy nhiên trong dự án hiện tại của Ad (Ad làm PM) thì bạn BA có dùng tool này vừa để vẽ wireframe, vừa viết Spec. Whimsical cũng dạng infinite board nên khá là tiện khi liên kết các màn hình, trạng thái liên quan bằng các mũi tên, dễ theo dõi luồng màn hình.
</aside>
<aside> 📥 Mọi feedback xin gửi về: https://www.linkedin.com/in/rose-trinh/
</aside>
<aside> 📥 FB Blog: https://www.facebook.com/ikomtoblog
</aside>