Sketch, Wireframe, Mockup và Prototype


Sketch >> Wireframe >> Mockup >> Prototype

Sketch

Thường dùng để phác thảo nhanh ý tưởng, vẽ tay lên giấy hoặc lên bảng ...

Click để xem hình
 

Wireframe

Thể hiện được cấu trúc, bố cục, các thành phần, chỗ nào thì đặt cái gì trên giao diện

Ví dụ dưới đây là wireframe cho website của khách hàng

Click để xem hình
 

Mockup

Chi tiết hơn Wireframe, cấu trúc, màu sắc thậm chí là từ ngữ trên giao diện

Prototype

Bề ngoài thì tương tự mockup, tuy nhiên nó thể hiện được sự tương tác của các thành phần, liên kết giữa các màn hình. Ví dụ click vào nút này, link kia thì sẽ mở sang giao diện nào ...