Sketch, Wireframe, Mockup, Prototype là gì và ví dụ?
Bài viết giải thích và phân biệt bốn thuật ngữ quan trọng trong thiết kế UI/UX và phát triển phần mềm: Sketch (phác thảo nhanh ý tưởng trên giấy hoặc bảng), Wireframe (khung xương cơ bản mô tả luồng ứng dụng), Mockup (bổ sung yếu tố thiết kế như màu sắc, font chữ vào wireframe), và Prototype (bản mẫu có thể tương tác). Tác giả cung cấp ví dụ cụ thể và công cụ phù hợp cho từng giai đoạn thiết kế.
Giới thiệu
Sketch, Wireframe, Mockup, Prototype là những thuật ngữ thường gặp khi thiết kế UI/UX hoặc phát triển phần mềm. Bài viết sẽ giúp bạn hiểu và phân biệt được 4 thuật ngữ trên nhé
Sketch là gì
Là quá trình phác thảo nhanh ý tưởng lên giấy hoặc bảng. Lúc này bạn đang brainstorm ý tưởng nên vẽ tay sẽ nhanh nhất.
Nhưng hình bên dưới, mình và thằng bạn sketch ý tưởng cho tính năng learning path dùng UI giống branch của Github.
Sketch ý tưởng trên giấy
Thường ở giai đoạn này chúng ta mới có ý tưởng chung chung cho các tính năng thôi, nên vẽ ra ngay cho khỏi quên. Với những ý tưởng mới, sketch bằng tay là cách hiệu quả nhất để các thành viên trong team thảo luận, đóng góp ý kiến, cái nào chưa được là dùng tay gạch ngay luôn.
Wireframe là gì?
Có thể coi là khung xương (skeleton) của web/app. Nó là một giao diện đơn giản, tuy nhiên nó mô tả được cơ bản luồng ứng dụng của bạn: Click vào một button thì điều gì xảy ra, các screens liên quan với nhau thế nào?
Như bên dưới là wireframe màn hình Xem hoá đơn của ứng dụng hoá đơn điện tử.
https://imgur.com/a/VD71iV9
Xem hoá đơn
Tool mình hay dùng để wireframe là Balsamiq
Mockup là gì?
Ở giai đoạn này, bạn bắt đầu thêm các yếu tố design vào wireframe như màu, font, hình ảnh, logo, vv
Bên dưới là mockup của ứng dụng kết nối phụ huynh với bên tổ chức hoạt động cho thiếu nhi. Cái app này team mình làm để thi Game UIT Hackathon.
Mockup ứng dụng
Tool mình hay dùng : Sketch
Prototype là gì?
Prototype là một mockup nhưng có thêm phần UX. Có nghĩa là ta có thể click vào một button, có thể chuyển screens, có thể show dữ liệu giả, vv.
Đa số các tool prototype giờ đều hỗ trợ mạnh mẽ như import từ file PSD, Sketch sau đó cho phép export ra web hoặc share prototype trực tiếp cho người khác. Khi share người khác có thể click, tương tác với prototype của bạn luôn.
Ví dụ prototype này, bạn mình dùng XD.
https://www.youtube.com/watch?v=NMMOuwcotoY
Tool mình hay dùng là: XD, Invisionapp
Kết
Hy vọng với các định nghĩa và ví dụ trên đã giúp bạn phân biệt được các thuật ngữ Sketch, Wireframe, Mockup, Prototype là gì cũng như các giai đoạn thiết kế UI/UX. Mọi ý kiến phản hồi, đóng góp mọi người để ở phần comment nhé.
Related Posts
Discover more content you might enjoy
Game Theory trong thời đại AI: Khi máy móc tham gia vào "trò chơi"
Bài viết phân tích sự giao thoa giữa lý thuyết trò chơi (Game Theory) và trí tuệ nhân tạo, giải thích cách AI đang thay đổi các nguyên lý cân bằng Nash và chiến lược tối ưu. Tác giả đưa ra các ví dụ thực tế về ứng dụng trong kinh doanh, giao thông và an ninh mạng.
Bài này không phải AI viết
Suy ngẫm chân thành về giá trị của việc viết thủ công trong kỷ nguyên AI. Dù AI có thể tạo nội dung hiệu quả, bài viết này là lời khẳng định về sự kết nối cá nhân và giá trị độc đáo mà con người mang lại cho văn bản của mình.
Dự đoán về Vibe Coding: Cách AI sẽ biến đổi việc tạo ra phần mềm
Bài viết phân tích cách 'vibe coding' - phương pháp lập trình dựa trên mô tả ý định thay vì viết code trực tiếp - sẽ dân chủ hóa việc phát triển phần mềm. Tác giả dự đoán về sự chuyển đổi từ giao diện dòng lệnh sang thiết kế trực quan, sự xuất hiện của phần mềm tự cải thiện, và tác động đến cấu trúc tổ chức công ty cũng như các thị trường ngách chưa được khai thác.
Dùng AI để hỗ trợ đầu tư crypto
Bài viết chia sẻ 7 mẹo thực tế để sử dụng AI (như Claude.ai và ChatGPT) hỗ trợ hiểu rõ whitepaper và tài liệu kỹ thuật của các dự án blockchain. Từ việc yêu cầu tóm tắt đơn giản, giải thích như cho trẻ em, đặt câu hỏi làm rõ, sử dụng ví dụ, tạo tình huống giả định, chuyển đổi thuật ngữ, đến so sánh nhiều nguồn tài liệu - giúp nhà đầu tư đưa ra quyết định đầu tư crypto sáng suốt hơn.
Sinh viên có nên khởi nghiệp?
Bài viết phân tích những lợi thế và bất lợi khi sinh viên khởi nghiệp dựa trên bài 'A Student's Guide to Startups' của Paul Graham. Tác giả chỉ ra năm lợi thế của sinh viên khi khởi nghiệp: sức khỏe dồi dào, không áp lực tài chính, không vướng bận gia đình, dễ tìm đồng sáng lập từ trường học, và sự ngây thơ giúp dám thử thách. Đồng thời, bài viết cũng cảnh báo về bất lợi khi sinh viên khởi nghiệp như thiếu khả năng giải quyết bài toán thực tế và thiếu kiến thức đa ngành.
Day 24 - Profitable MVP in 30 Days - Launch day và một vài số liệu
Bài viết ngày 24 của thử thách xây dựng MVP có lợi nhuận, tác giả chia sẻ về việc quyết định ra mắt ứng dụng ReadingPointer trên Product Hunt mà không đợi Chrome Web Store duyệt phiên bản mới. Bài viết phân tích các số liệu ban đầu từ Google Analytics sau 18 giờ ra mắt, bao gồm lượng người dùng mới, thời gian sử dụng trung bình và hành vi tương tác với các nút chức năng của ứng dụng.