Wireframe, Mockup là gì? Hướng dẫn phân biệt và sử dụng

Wireframe, Mockup là gì? Hướng dẫn phân biệt và sử dụng

Để có thể xây dựng một ứng dụng hoàn chỉnh đến tay người dùng, người thiết kế cần phải biết và phân biệt được Wireframe, Mockup là gì. Nếu có thể phân biệt được 2 thuật ngữ này thì bạn mới có thể tiến hành xây dựng ứng dụng được.

Để tìm hiểu thêm thông tin về Wireframe và Mockup, cũng như cách sử dụng của hai khái niệm này. Mời bạn khám phá thêm nhiều điều hấp dẫn ở bài viết sau đây cùng Casinovn138.com nhé!

Wireframe là gì?

Một quá trình tạo ra ứng dụng gồm có 4 bước, tương ứng với 4 khái niệm cơ bản là Sketch, Wireframe, Mockup và Prototype.

Wireframe tương đương với bước 2, thể hiện rõ cấu trúc của giao diện phần mềm sau khi đã trải qua bước 1.

Để thiết kế được một giao diện website hay web apps, bạn cần phải đảm bảo các yếu tố sau đây:

  • Header: Phải có các thông tin như Name, Owner và Status
  • Body: Các phần dữ liệu mà bạn muốn miêu tả
  • Footer: Chứa các thông tin cơ bản như Created By, Created On, Modified By, và Modified On.

Khi thiết kế Wireframe, quan trọng nhất là phân bổ bố cục và nhóm thông tin cần thiết sao cho rõ ràng và hợp lý. Vì nó chính xác là bộ khung của UI (trải nghiệm người dùng).

Wireframe là gì?
Wireframe là gì?

Chia sẻ đến bạn: Top 5 phần mềm lọc Verify Email tốt nhất hiện nay

Mockup là gì?

Mockup là bước được thực hiện sau Wireframe. Có nhiều người lại lầm tưởng Wireframe và Mockup là một. Nhưng không hẳn vậy. Xét về độ chi tiết thì Mockup hơn gấp nhiều lần so với Wireframe nhé. Ở giai đoạn 3 này, sẽ được thiết kế chi tiết cả về màu sắc, font chữ, kích thước, hình ảnh, kích cỡ, phân luồng,…

Nếu Wireframe chỉ chi tiết về bố cục thì Mockup sẽ thể hiện ở những bố cục được bày trí nội dung và hình ảnh như thế nào tại vị trí đó, tỉ mỉ đến từng dấu chấm, phẩy.

Mockup là gì?
Mockup là gì?

Phân biệt giữa Wireframe và Mockup

Sau khi tìm hiểu rõ về khái niệm của từng loại thì chắc hẳn các bạn cũng đã có thẻ phân biệt được 2 thuật ngữ này rồi đúng không nào. Nói một cách dễ hiểu, thì Wireframe và Mockup giống nhau như một, nhưng Mockup chi tiết thông tin hơn Wireframe nhiều.

Phân biệt giữa Wireframe và Mockup
Phân biệt giữa Wireframe và Mockup

Hướng dẫn sử dụng

Bạn có thể tìm hiểu về native code qua bài viết: https://casinovn138.com/native-code/.

Chia sẻ đến bạn bài viết: Buddle.io | Đánh giá tính năng, trải nghiệm, so sánh

Wireframe

Bước 1: Lấy cảm hứng

Hãy đi tìm nguồn cảm hứng từ các trang web chứa mẫu Wireframe do các nhà sáng tạo chuyên nghiệp chia sẻ. Từ đó, bạn có thể định hình về mẫu Wireframe mình định làm và có chứa các nội dung gì.

Bước 2: Thiết kế quy trình

Xây dựng cho bản thân một quy trình làm việc hoàn chỉnh trước khi thật sự bắt tay vào làm một Wireframe. Vì khi có quy trình, chúng ta sẽ thực hiện nó theo một cách bài bản và chi tiết nhất để không bị bỏ sót bất kỳ một giai đoạn nào.

Bước 3: Lựa chọn công cụ

Các bạn có thể lựa chọn các công cụ thiết kế Wireframe chuyên nghiệp sau đây:

  • Balsamiq
Balsamiq
Balsamiq
  • Omnigraffle
Omnigraffle
Omnigraffle
  • Flairbuilder
Flairbuilder
Flairbuilder

Mockup

Chúng tôi sẽ hướng dẫn các bạn thực hiện tạo Mockup trên công cụ Photoshop.

Bước 1: Sau khi tải Mockup có sẵn về và mở lên, bạn sẽ thấy một layer trên cùng đề rằng Your logo here. Layer này đã được chuyển thành Smart Object để bạn thay logo hoặc hình mà bạn muốn vào layer này. Để sử dụng bạn hãy nhấn đúp vào layer đó.

Mockup b1
Mockup b1

Bước 2: Lúc này sẽ có một file mới hiện ra với hình ảnh logo đã được sử dụng. Bạn hãy thay thế bằng hình ảnh hoặc logo của mình bằng cách chọn File chọn Place Embedded…

Mockup b2
Mockup b2

Bước 3: Chọn ảnh của bạn và chọn Place.

Mockup b3
Mockup b3

Bước 4: Bấm vào con mắt bỏ chọn hiển thị logo gốc để file đó chỉ còn hiển thị layer ảnh của bạn thôi, sau đó nhấn Ctrl + S (Cmd + S đối với macOS) để lưu.

Mockup b4
Mockup b4

Chuyên mục Tổng hợp của nhà cái Casino VN138 vừa giúp bạn giải quyết câu hỏi Wireframe, Mockup là gì. Qua đó, hướng dẫn cho các bạn các bước chi tiết để có thể sử dụng 2 loại công cụ này một cách đơn giản và hiệu quả nhất. Nếu có bất kỳ thắc mắc nào, vui lòng Liên hệ Casino VN138 để được giải đáp nhé!

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Đăng ký ngay!