IT for Dummies: Phân biệt Wireframe, Mockup và Prototype

Thực hiện dự án IT cũng giống như việc xây dựng một công trình, cần phải có các bản vẽ, thiết kế khác nhau để thống nhất yêu cầu của khách hàng và quy trình làm việc của đội dự án. Trong IT, tuỳ vào từng giai đoạn khác nhau của dự án, các bản vẽ này được gọi là Wireframe, Mockup và Prototype.

#ITforDummies là chuỗi bài viết dành cho những người “nhập môn” IT, cung cấp kiến thức cho độc giả không chuyên về quy trình và công việc của các dự án công nghệ. Nhấp vào đây để đọc các bài viết về series này.

Wireframe

Wireframe là bản vẽ thô miêu tả cơ bản vị trí và chức năng cơ bản nhất của các thành tố trên màn hình. Bản vẽ này không bao gồm màu sắc, hình ảnh, chỉ gồm các khung, hộp thể hiện giao diện và luồng ứng dụng. Tuy không có các yếu tố thu hút về thị giác, nhưng Wireframe cho thấy là công cụ giúp đội dự án làm rõ hơn yêu cầu của khách hàng hàng, cũng như brainstorm ý tưởng trước khi bắt tay vào thực hiện dự án.  

Wireframe có thể được vẽ từ giấy, bút, bảng trắng hay các công cụ như Figma, Mockflow, Slides hay Excel…

wireframe-mockup-prototype

Mockup 

Cấp độ tiếp theo của bản vẽ là Mockup. Sang đến Mockup, các thành tố của bản vẽ được thêm màu sắc, đồ hoạ, tuy vẫn còn ở mức cơ bản. Nhưng Mockup cho khách hàng cái nhìn trực quan về sản phẩm, bởi các yếu tố về màu sắc. Logo, thiết kế giúp bản vẽ có thêm dấu ấn bản sắc thương hiệu.

Các công cụ thường được sử dụng để vẽ Mockup là Figma, Adobe XD, InVision, Mockflow…

wireframe-mockup-prototype

Prototype

Khác với hai bản vẽ trên, Prototype có khả năng tương tác, nghĩa là có thể click vào một button, có thể hiển thị dữ liệu (giả) hay chuyển đổi giữa các screen. Tuy nhiên, không thể sử dụng Prototype được do hoàn toàn không có code back-end và front-end. Việc xây dựng Prototype cũng tốn nhiều thời gian và công sức, nên Prototype thường nằm ở giai đoạn cuối cùng của thiết kế và là cầu nối từ bản vẽ đến với sản phẩm thật. 

Prototype có thể được xây dựng từ AxureRP, Figma, Adobe XD, InVision, Mockflow…

wireframe-mockup-prototype

wireframe-mockup-prototype

Cùng đóng chức năng là bản thiết kế sản phẩm, nhưng Wireframe, Mockup và Prototype vẫn là những thuật ngữ còn gây nhiều nhầm lẫn với dân “ngoại đạo”. Mong rằng bài viết trên đã giúp bạn hiểu rõ thêm khái nhiệm về ba thiết kế này, và đừng quên theo dõi series dành cho non-IT mang tên #ITforDummies trên Techie nhé!

Khám phá thêm
“Chúng ta đang sống trong thế giới VUCA” – Câu nói này đã diễn tả đúng tình trạng thế giới...
Trong bài viết này, Techie sẽ giới thiệu đến bạn bản chất của tính năng constraints và auto-layout figma, cũng...
Temu, một ứng dụng mua sắm Trung Quốc, đang gây chấn động trên internet với những sản phẩm rất rẻ....
Mối quan hệ tình yêu luôn là một chủ đề hấp dẫn và phức tạp. Cũng dễ hiểu khi nhiều...
Theo một “nguồn tin mật” cho hay, Ghibli chính thức công bố trailer phần tiếp theo của tựa phim Vùng...
Cảm biến sinh học (Biosensor) đã đánh dấu một thành tựu quan trọng trong cuộc chiến chống đại dịch COVID-19 khi...
Thuật toán Dijkstra là một công cụ quan trọng trong lý thuyết đồ thị và tối ưu hóa. Với khả...
Thời gian gần đây, công nghệ AI đang trở thành chủ đề được nhân loại đặc biệt quan tâm. Trên...