Cách Vẽ Mockup Bằng Excel: Hướng Dẫn Chi Tiết Từ A Đến Z

Giới thiệu chung về mockup và vai trò của Excel trong thiết kế

Mockup (mô hình mẫu) là một bản mô phỏng trực quan của sản phẩm cuối cùng, giúp các nhà thiết kế, nhà phát triển và khách hàng hình dung được giao diện, bố cục và chức năng trước khi thực hiện lập trình hoặc sản xuất. Thông thường, các công cụ chuyên dụng như Adobe XD, Sketch, Figma hay Axure được sử dụng để tạo mockup. Tuy nhiên, không phải lúc nào chúng ta cũng có điều kiện hoặc thời gian để học và cài đặt những phần mềm này. Excel, một công cụ văn phòng quen thuộc, lại có khả năng mạnh mẽ trong việc tạo ra các mockup đơn giản nhưng hiệu quả, đặc biệt là cho các dự án nội bộ, báo cáo, hay thiết kế giao diện phần mềm nội bộ.

Bài viết này sẽ hướng dẫn chi tiết cách vẽ mockup bằng Excel, từ việc chuẩn bị môi trường làm việc, thiết kế bố cục cơ bản, sử dụng các công cụ vẽ hình, định dạng ô, chèn hình ảnh, tới việc tạo các tương tác cơ bản và xuất bản mockup ra các định dạng khác nhau. Hy vọng qua bài viết, bạn sẽ nắm bắt được quy trình làm việc và áp dụng ngay vào dự án thực tế.

1. Chuẩn bị môi trường làm việc trong Excel

1.1. Lựa chọn phiên bản Excel phù hợp

• Excel 2026/2026/365: Các phiên bản này hỗ trợ đầy đủ các tính năng vẽ hình, định dạng ô và chèn đồ họa. Excel 365 còn có tính năng tự động lưu và cộng tác trực tuyến.
• Excel cho Mac: Giao diện hơi khác, nhưng các công cụ vẽ và định dạng vẫn tương tự.
• Google Sheets: Nếu bạn không có Excel, Google Sheets cũng có thể dùng để tạo mockup cơ bản, nhưng khả năng vẽ hình và định dạng không mạnh bằng Excel.

1.2. Thiết lập trang tính cho mockup

1. Mở một workbook mới và đổi tên sheet thành “Mockup”.
2. Ẩn lưới (gridlines): Vào tab View → Gridlines bỏ tick để không hiển thị các đường viền ô, giúp giao diện sạch sẽ.
3. Ẩn tiêu đề dòng và cột (Row & Column Headers): Tab View → Headings bỏ tick.
4. Thiết lập kích thước ô: Để tạo ra một “canvas” linh hoạt, chúng ta sẽ điều chỉnh chiều rộng và chiều cao các ô.
5. Chọn toàn bộ sheet (click vào góc trái trên cùng).
6. Kéo chiều rộng cột (ví dụ 2.14) và chiều cao hàng (ví dụ 15) sao cho mỗi ô gần giống một pixel. Bạn có thể thử nghiệm để tìm tỉ lệ phù hợp với màn hình của mình.
7. Đặt vùng làm việc: Giả sử bạn muốn mockup cho một trang web có độ rộng 1200px, tính số ô cần: 1200 / 2.14 ≈ 560 cột. Bạn không cần tạo hết, chỉ tạo khoảng 100-150 cột để làm việc và cuộn khi cần.

1.3. Tạo “layers” (lớp) trong Excel

Excel không có khái niệm layer như Photoshop, nhưng chúng ta có thể mô phỏng bằng cách:

• Sử dụng các sheet khác nhau cho các phần: ví dụ Sheet “Background”, “UI Elements”, “Annotations”.
• Sắp xếp thứ tự các đối tượng: Khi vẽ hình, bạn có thể right-click → Bring to Front / Send to Back để điều chỉnh thứ tự hiển thị.
• Nhóm (Group) các đối tượng: Chọn nhiều hình → Ctrl + G để nhóm, giúp di chuyển đồng thời.

2. Thiết kế bố cục cơ bản

Có thể bạn quan tâm: Cách Vẽ Miệng Gió Cong Đẹp Và Chuẩn Kỹ Thuật: Hướng Dẫn Từ Cơ Bản Đến Nâng Cao

2.1. Xác định grid layout (lưới bố cục)

Bố cục grid giúp duy trì tính nhất quán và dễ dàng căn chỉnh các thành phần. Các bước thực hiện:

1. Chia màn hình thành các cột: Ví dụ, một layout 12-col (cột) thường dùng cho web responsive. Đánh dấu các cột chính bằng cách tô màu nền ô.
2. Tạo margins và gutters:
3. Margin: Khoảng cách giữa nội dung và cạnh màn hình, thường là 20-30px.
4. Gutter: Khoảng cách giữa các cột, thường 20px.
5. Công thức tính số ô cho mỗi cột:
6. Nếu mỗi ô = 2.14px, một cột 100px ≈ 47 ô. Bạn có thể tạo một bảng tính nhanh để chuyển đổi.

2.2. Vẽ các khu vực chính (Header, Navigation, Content, Footer)

2.2.1. Header

• Chèn hình chữ nhật: Tab Insert → Shapes → Rectangle.
• Kéo để tạo hình chữ nhật ở dòng 1-5, cột 1-100 (hoặc tùy kích thước).
• Định dạng: Đổi màu nền (Fill) thành màu chủ đề (ví dụ #003366), thay đổi Border thành “No Line” nếu không muốn viền.
• Thêm logo: Insert → Pictures → From File, chọn logo, sau đó Resize và Align vào phía trái.
• Thêm menu: Dùng Text Box cho từng mục menu, căn giữa và đặt màu chữ trắng.

2.2.2. Navigation Bar (Thanh điều hướng)

• Nếu navigation nằm dưới header, tạo một hình chữ nhật mới, chiều cao 40-50px.
• Thêm các Hyperlink (đúng cách là Text Box) cho các mục như “Home”, “Products”, “About”, “Contact”. Định dạng font, kích thước, màu sắc.

2.2.3. Content Area (Vùng nội dung)

• Tạo một khu vực lớn chiếm phần còn lại của trang.
• Chia thành các cột phụ: Ví dụ, một layout 2-col: thanh bên trái (sidebar) 250px và phần nội dung chính 950px.
• Dùng Shapes → Rectangle để vẽ sidebar và .

2.2.4. Footer

• Tương tự Header, tạo một hình chữ nhật ở cuối trang, chiều cao 60-80px.
• Thêm các thông tin như “© 2026 Công ty ABC”. Có thể chèn các icon mạng xã hội bằng Insert → Icons.

2.3. Định dạng văn bản và kiểu chữ

• Font: Chọn font phù hợp (Arial, Roboto, Open Sans). Bạn có thể tải font tùy chỉnh và cài đặt vào Windows, sau đó Excel sẽ nhận diện.
• Kích thước: Header 24pt, menu 14pt, nội dung 12pt, footer 10pt – tùy thuộc vào thiết kế.
• Căn chỉnh: Sử dụng Alignment trong tab Home để căn giữa, căn lề trái, hoặc căn đều (Justify).

3. Sử dụng công cụ vẽ hình trong Excel

3.1. Các loại shape cơ bản

Shape	Mô tả	Khi nào dùng
Rectangle	Hình chữ nhật	Khung, nút, thanh
Rounded Rectangle	Hình chữ nhật bo góc	Nút hiện đại
Ellipse	Hình tròn, oval	Avatar, biểu tượng
Line	Đường thẳng	Đường kẻ, phân chia
Arrow	Mũi tên	Chỉ hướng, hướng dẫn
Callout	Bảng chú thích	Ghi chú, tooltip

3.2. Cách vẽ và chỉnh sửa shape

1. Chèn shape: Insert → Shapes → Chọn hình.
2. Kéo thả để tạo kích thước mong muốn.
3. Định vị chính xác: Khi shape được chọn, trong tab Format, bạn có thể nhập Height và Width (đơn vị là cm hoặc inches). Để chuyển sang pixel, tính tỉ lệ: 1 cm ≈ 37.8px.
4. Sao chép nhanh: Ctrl + Drag để tạo bản sao, giữ Shift để giữ tỉ lệ.
5. Nhóm: Chọn nhiều shape → Ctrl + G. Để tách nhóm, Ctrl + Shift + G.
6. Đặt tên cho shape: Khi shape được chọn, trong Selection Pane (Home → Find & Select → Selection Pane), đổi tên để quản lý dễ dàng (ví dụ “BtnLogin”).

3.3. Tạo các UI component phổ biến

Có thể bạn quan tâm: Cách Vẽ Miệng Cười Mĩm Đầy Đặn Và Sinh Động: Hướng Dẫn Từng Bước Cho Người Mới Bắt Đầu

3.3.1. Nút (Button)

• Rounded Rectangle: Đặt radius 5-8pt.
• Fill Color: Màu chủ đề (ví dụ #007BFF).
• Text Box: Thêm “Login”, căn giữa, màu trắng, font bold.
• Hover effect (giả lập): Tạo một shape khác cùng kích thước, màu sáng hơn, đặt ở layer trên, ẩn (Visibility) và sẽ hiển thị khi người dùng “hover” trong bản mockup (có thể dùng comment để giải thích).

3.3.2. Form Input

• Rectangle: Đặt border màu xám #CCCCCC, độ dày 1pt.
• Placeholder text: Text Box “Enter your email”, màu #777777, italic.
• Icon: Insert → Icons → Search, thu nhỏ và đặt vào bên trái.

3.3.3. Card (Thẻ)

• Rounded Rectangle: Đặt shadow bằng cách Format Shape → Shadow (soft edges).
• Image: Insert → Pictures, cắt và đặt trên đầu thẻ.
• Title & Description: Text Boxes dưới hình ảnh, căn lề trái.

4. Chèn và xử lý hình ảnh trong mockup

4.1. Nguồn ảnh

• Icon: Font Awesome, Material Icons (download PNG hoặc SVG).
• Ảnh thực tế: Unsplash, Pexels, Pixabay (miễn phí bản quyền).
• Logo: Từ file .ai, .png, .svg (đảm bảo độ trong suốt).

4.2. Cách chèn ảnh

1. Insert → Pictures → This Device (hoặc Online Pictures).
2. Resize: Kéo góc, giữ Shift để duy trì tỉ lệ.
3. Crop: Khi ảnh cần cắt, Picture Format → Crop.
4. Wrap Text: Đặt Wrap Text → Behind Text để ảnh nằm dưới các shape/text.

4.3. Tối ưu kích thước file

• Sử dụng Compress Pictures (Picture Format → Compress Pictures) để giảm dung lượng.
• Chọn Web (150 ppi) nếu mockup chỉ dùng cho trình duyệt.

5. Tạo tương tác cơ bản trong mockup Excel

Mặc dù Excel không phải là công cụ prototype interactive, nhưng chúng ta có thể mô phỏng một số tương tác đơn giản:

5.1. Hyperlink đến sheet khác

• Chọn Text Box hoặc Shape, click chuột phải → Link → Place in This Document, chọn sheet “Login”, “DetailPage”…
• Khi người xem click vào, Excel sẽ chuyển sang sheet tương ứng, mô phỏng chuyển trang.

5.2. Sử dụng macro (VBA) để mô phỏng hành vi

Có thể bạn quan tâm: Cách Vẽ Miệng Bằng Chì: Kỹ Thuật Từ Cơ Bản Đến Nâng Cao Cho Người Mới Bắt Đầu

Nếu bạn muốn tạo hiệu ứng “click” thay đổi màu, hiển thị thông báo:

Sub BtnLogin_Click() MsgBox "Bạn đã nhấn nút Login!", vbInformation, "Mockup Interaction"
End Sub

• Gán macro cho shape: Click chuột phải shape → Assign Macro → Chọn BtnLogin_Click.

5.3. Toggle visibility (ẩn/hiện)

Bạn có thể tạo 2 shape (một màu bình thường, một màu hover) và dùng macro để chuyển đổi hiển thị:

Sub ToggleHover() With Sheet1.Shapes("BtnHover") .Visible = Not .Visible End With
End Sub

Sau đó, gán macro cho sự kiện MouseOver không có sẵn trong Excel, nhưng bạn có thể dùng Form Control Button để giả lập.

6. Đánh giá và chỉnh sửa mockup

6.1. Kiểm tra tính nhất quán

• Alignment: Sử dụng Align → Align Center/Top/Bottom để căn chỉnh.
• Spacing: Dùng Ruler (View → Ruler) để đo khoảng cách.
• Color palette: Đảm bảo sử dụng cùng một palette (Primary, Secondary, Accent). Tạo Custom Colors trong Fill Color.

6.2. Nhận phản hồi

• Comment: Chèn comment vào từng thành phần (Review → New Comment) để thu thập ý kiến.
• Share: Nếu dùng Excel 365, chia sẻ file qua OneDrive, cho phép người khác comment trực tiếp.

6.3. Phiên bản và lưu trữ

Có thể bạn quan tâm: Cách Vẽ Miệng Anime Boy Đúng Chuẩn: Hướng Dẫn Từng Bước Cho Người Mới Bắt Đầu

• Save As → Excel Workbook (.xlsx) cho chỉnh sửa.
• Export → Create PDF/XPS Document để xuất bản cuối cùng.
• Save As → PNG: Chọn File → Save As → PNG (chỉ có trong Excel 2026 trở lên) để xuất từng sheet dưới dạng hình ảnh, thuận tiện cho việc đưa vào tài liệu hoặc PowerPoint.

7. Các mẹo và thủ thuật nâng cao

7.1. Tạo grid tự động bằng công thức

Bạn có thể dùng công thức để tạo đường kẻ tự động:

• Trong cột A, nhập =REPT("-",10) để tạo đường ngang.
• Kéo xuống để tạo nhiều hàng, sau đó Copy → Paste Special → Values để cố định.

7.2. Sử dụng Conditional Formatting cho mockup

• Highlight active state: Chọn ô chứa nút, vào Conditional Formatting → New Rule → Use a formula. Ví dụ: =($B$2="Active") → Định dạng nền màu xanh.
• Khi thay đổi giá trị trong ô B2, màu nút sẽ tự động thay đổi, mô phỏng trạng thái active/inactive.

7.3. Tạo bộ icon library trong một sheet riêng

• Tạo sheet “Icons”, chèn tất cả icon cần dùng, đặt tên cho mỗi shape.
• Khi cần dùng, Copy → Paste vào sheet mockup, giúp tiết kiệm thời gian.

7.4. Sử dụng Data Validation để tạo dropdown menus

• Chọn ô nơi muốn dropdown, Data → Data Validation → List, nhập các mục như “Option 1, Option 2”.
• Khi người xem chọn, bạn có thể dùng macro để thay đổi nội dung hiển thị của các shape (đổi text, màu).

8. Xuất bản mockup sang các định dạng khác

8.1. Xuất ra PDF

• File → Export → Create PDF/XPS Document.
• Chọn Options → Entire Workbook hoặc Selected Sheets, đảm bảo Fit to page để không bị cắt.

8.2. Xuất ra PNG/JPEG

• File → Save As → PNG (chỉ lưu sheet hiện tại). Nếu muốn toàn bộ mockup nhiều sheet, lặp lại.
• Đối với chất lượng cao, mở PNG trong Photoshop hoặc GIMP, chỉnh lại DPI (300) nếu cần.

8.3. Nhúng vào PowerPoint hoặc Word

• Copy → Paste Special → Picture (Enhanced Metafile) để giữ độ sắc nét.
• Hoặc Insert → Object → Create from File → Chọn file Excel, tích “Link” để cập nhật tự động khi mockup thay đổi.

9. Các trường hợp sử dụng thực tế

9.1. Mockup cho dashboard nội bộ

• Sử dụng Excel vì dữ liệu đã có trong bảng tính, bạn có thể trực tiếp liên kết biểu đồ, bảng pivot vào mockup.
• Tạo các shape “Chart Container”, chèn PivotChart vào, giữ layout đồng nhất.

9.2. Mockup cho ứng dụng di động

• Thiết lập kích thước sheet theo tỷ lệ màn hình (375x667pt cho iPhone 6/7/8).
• Sử dụng Rounded Rectangle cho các nút, Circle cho avatar.
• Đặt Guidelines (đường kẻ) để căn chỉnh các thành phần.

9.3. Mockup cho email template

• Tạo một sheet với chiều rộng 600px (≈ 280 cột) – kích thước chuẩn email.
• Sử dụng Table để tạo cấu trúc, sau đó chuyển sang HTML bằng cách Copy → Paste Special → HTML (có một số add‑in hỗ trợ).

10. Lưu ý cuối cùng và kết luận

• Giữ tính nhất quán: Đừng thay đổi màu, font, khoảng cách một cách ngẫu nhiên.
• Sử dụng layer ảo: Các sheet phụ trợ giúp quản lý dễ dàng và tránh “đụng độ” giữa các thành phần.
• Kiểm tra trên các thiết bị: Khi xuất ra PNG hoặc PDF, mở trên các thiết bị khác nhau để chắc chắn không bị cắt hoặc lệch.
• Đừng quên sao lưu: Đặt file vào OneDrive hoặc Google Drive để tránh mất mát.

Với những hướng dẫn chi tiết trên, bạn đã nắm vững quy trình vẽ mockup bằng Excel từ việc chuẩn bị môi trường, thiết kế bố cục, tạo các thành phần UI, chèn hình ảnh, mô phỏng tương tác, đến việc xuất bản và chia sẻ. Dù Excel không phải là công cụ chuyên nghiệp nhất cho thiết kế UI/UX, nhưng với sự sáng tạo và kiến thức đúng cách, nó hoàn toàn đủ sức đáp ứng nhu cầu nhanh chóng của các dự án nội bộ, báo cáo, hoặc khi bạn cần một bản mô phỏng nhanh mà không muốn rời khỏi môi trường làm việc văn phòng. Hãy bắt đầu thử nghiệm và tạo ra những mockup ấn tượng ngay hôm nay!