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 ...