Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng một buổi sáng thứ Hai trong một startup fintech ở Quận 1, TP.HCM. Cả nhóm product có đúng 90 phút để định hình lại màn hình thanh toán trước cuộc họp với nhà đầu tư. Một bạn designer mở Figma, loay hoay căn lưới, chọn font, kéo component… 40 phút trôi qua mà mới có một phương án. Bạn designer ngồi cạnh thì cầm bút và một xấp giấy A4, trong 40 phút đó đã phác ra 12 hướng bố cục khác nhau, dán lên tường, và cả nhóm đang khoanh tròn ba hướng đáng thử nhất.
Sự khác biệt nằm ở một kỹ năng nghe có vẻ "thô sơ" nhưng lại là nền tảng của mọi product designer giỏi: sketching — phác thảo ý tưởng bằng tay, thật nhanh, thật nhiều, trước khi chạm vào bất kỳ phần mềm nào.
Trong dàn bài khóa học này, bạn vừa đi qua giai đoạn ý tưởng (Crazy 8s, brainstorming ở Bài 7) và sắp bước vào wireframing low-fi đến mid-fi (Bài 9). Sketching chính là cây cầu giữa hai bờ đó. Nó là nơi ý tưởng trong đầu được "đổ" ra giấy ở dạng thô nhất, rẻ nhất, dễ vứt bỏ nhất. Bài học này không dạy bạn vẽ đẹp — nó dạy bạn vẽ nhanh và đúng mục đích, để tư duy thiết kế của bạn không bị mắc kẹt trong các chi tiết bóng bẩy quá sớm. Nắm vững sketching, bạn sẽ tiết kiệm hàng giờ đồng hồ ở mọi dự án và ra quyết định thiết kế tốt hơn rất nhiều.
Khái niệm cốt lõi
Sketching là gì — và không phải là gì
Sketching trong product design là hành động phác thảo bằng tay các ý tưởng về giao diện, luồng màn hình hoặc bố cục ở mức độ thô, nhanh, không trau chuốt. Nó dùng bút, giấy, bảng trắng — bất cứ thứ gì cho phép bạn ghi lại ý tưởng nhanh hơn tốc độ ý tưởng nảy ra trong đầu.
Quan trọng: sketching không phải là vẽ minh họa (illustration). Bạn không cần biết vẽ đẹp. Một sketch tốt có thể chỉ gồm các hình chữ nhật, đường gạch ngang thay cho chữ, vài ký hiệu quy ước. Mục tiêu là truyền đạt ý tưởng, không phải tạo ra tác phẩm.
Sketching cũng khác wireframe. Wireframe (Bài 9) đã có cấu trúc rõ ràng hơn, thường vẽ trên máy, có tỷ lệ tương đối chính xác. Sketch đứng trước wireframe — nó còn lộn xộn, còn nhiều phương án song song, còn chưa cam kết với bất cứ điều gì.
Bốn lý do tại sao phải phác thảo trước
1. Tốc độ (Speed). Bút nhanh hơn Figma — nhanh hơn rất nhiều. Vẽ một màn hình bằng tay mất 30–60 giây; dựng cùng màn hình đó trong Figma với component, auto-layout, spacing chuẩn có thể mất 15–30 phút. Khi bạn đang ở giai đoạn khám phá, tốc độ chính là tất cả: bạn muốn thử 20 ý tưởng, không phải đánh bóng 1 ý tưởng.
2. Cam kết thấp (Low commitment). Một tờ giấy phác thảo gần như không có "chi phí chìm" về mặt cảm xúc. Bạn vẽ xong, thấy dở, vò bỏ — không tiếc. Nhưng khi bạn đã bỏ 2 giờ dựng một màn hình đẹp trong Figma, não bạn sẽ vô thức bảo vệ nó ngay cả khi nó sai. Đây gọi là sunk cost fallacy (ngụy biện chi phí chìm). Sketch giúp bạn giữ được sự khách quan để loại bỏ ý tưởng yếu.
3. Khám phá (Exploration) — số lượng hơn độ hoàn thiện. Trong giai đoạn này, quantity beats polish. Mười sketch thô sẽ dẫn bạn đến giải pháp tốt nhanh hơn một bản đẹp. Bởi vì ý tưởng đầu tiên hiếm khi là ý tưởng hay nhất — nó thường chỉ là ý tưởng quen thuộc nhất. Vẽ nhiều buộc bạn vượt qua vùng an toàn để tìm hướng đột phá.
4. Giao tiếp (Communication). Sketch là ngôn ngữ chung của cả nhóm. Một sketch trên bảng trắng giúp designer, PM, kỹ sư và cả khách hàng cùng nhìn vào một thứ cụ thể để bàn luận. Nó hạ thấp rào cản: ai cũng có thể cầm bút chỉ vào, sửa, thêm. Một file Figma bóng bẩy ngược lại khiến mọi người ngại góp ý vì "trông đã xong rồi".
Nguyên tắc "đủ xấu để sửa"
Một insight quan trọng từ các designer kỳ cựu: sketch nên trông thô có chủ đích. Khi bản phác thảo trông còn dở, người xem hiểu rằng "đây mới là nháp, mình được phép phản biện". Đây gọi là fidelity (độ chi tiết) thấp tạo ra phản hồi thật. Độ chi tiết càng cao, phản hồi càng có xu hướng tập trung vào tiểu tiết (màu nút, font) thay vì vấn đề lớn (luồng này có hợp lý không, người dùng có hiểu không).
Tình huống thực tế
Tình huống 1 — Đội product của ví điện tử và "trận đấu Crazy 8s"
Một nhóm thiết kế tại một công ty ví điện tử ở Hà Nội (giả định, quy mô khoảng 30 người) cần thiết kế lại màn hình "chuyển tiền". Thay vì mỗi người mở máy tính, lead designer phát cho 5 thành viên mỗi người một tờ A4 gấp 8 ô và yêu cầu mỗi người vẽ 8 phương án trong 8 phút — đúng kỹ thuật Crazy 8s mà bạn học ở Bài 7, nhưng áp dụng bằng sketch thật trên giấy.
Kết quả: trong 8 phút, nhóm tạo ra 40 phương án màn hình. Khi dán hết lên tường, họ phát hiện hai ý tưởng không ai nghĩ tới ban đầu: gộp bước "chọn người nhận" và "nhập số tiền" vào một màn hình, và dùng danh bạ gần đây làm mặc định. Nếu mỗi người dựng Figma, may lắm cả nhóm có 5 phương án trong 1 giờ.
Bài học: Sketching biến số lượng thành lợi thế cạnh tranh trong giai đoạn ý tưởng. Giấy rẻ, ý tưởng đắt — và giấy giúp ý tưởng nảy nở.
Tình huống 2 — Designer freelance và buổi họp với khách hàng F&B
Một designer freelance ở Đà Nẵng nhận làm app đặt món cho một chuỗi cà phê địa phương có 8 chi nhánh. Trong buổi họp đầu, thay vì hứa "tuần sau em gửi mockup", anh ngồi cùng chủ quán và phác ngay 3 bố cục màn hình menu lên giấy ngay tại bàn. Chủ quán chỉ vào bản thứ hai và nói: "Cái này được, nhưng menu của bên anh có combo theo giờ, nên cần chỗ này nổi bật hơn."
Chỉ trong 20 phút, nhờ những nét vẽ tay thô, anh đã chốt được hướng đi và một yêu cầu quan trọng (combo theo giờ) mà nếu về nhà dựng mockup đẹp anh sẽ bỏ sót. Khách hàng cũng thoải mái góp ý vì bản vẽ "trông như đang cùng nhau nghĩ", không phải "sản phẩm đã hoàn thiện đem ra duyệt".
Bài học: Sketch tại chỗ là công cụ giao tiếp và xác nhận yêu cầu cực mạnh. Nó rút ngắn vòng lặp phản hồi từ vài ngày xuống vài phút.
Tình huống 3 — Cái giá của việc bỏ qua sketch
Một bạn junior designer kể lại bài học xương máu: được giao thiết kế trang onboarding cho một app học tiếng Anh. Háo hức, bạn mở Figma luôn, dồn 6 giờ liền dựng một bản high-fidelity tuyệt đẹp với illustration, animation gợi ý. Khi đem trình bày, PM hỏi một câu đơn giản: "Tại sao onboarding lại 5 bước? Người dùng của mình chỉ cần 2 bước là vào được bài học đầu tiên."
Toàn bộ 6 giờ phải làm lại từ đầu, vì cấu trúc luồng — thứ lẽ ra được kiểm tra bằng vài sketch 5 phút — đã sai từ gốc. Cái đẹp của bản Figma còn khiến bạn ấy khó chấp nhận phải bỏ đi.
Bài học: Đầu tư công sức vào fidelity cao trước khi xác thực ý tưởng bằng sketch là sai lầm tốn kém nhất của designer mới vào nghề. Sketch trước để kiểm tra "ý tưởng có đúng không", rồi mới làm đẹp để kiểm tra "thực thi có tốt không".
Hướng dẫn từng bước
Đây là quy trình sketch thực dụng bạn có thể áp dụng ngay cho bất kỳ bài toán giao diện nào.
Bước 1 — Chuẩn bị dụng cụ tối giản. Bạn chỉ cần: vài tờ A4 (hoặc giấy gấp 8 ô cho Crazy 8s), một bút bi hoặc bút lông kim cỡ trung. Mẹo: dùng bút khó tẩy — điều này nghe ngược đời nhưng nó buộc bạn không sa đà chỉnh sửa từng nét, mà phải vẽ tiếp phương án mới. Nếu thích số hóa, một chiếc iPad với Procreate hoặc Figma trên iPad cũng được, nhưng giấy vẫn nhanh và ít phân tâm nhất.
Bước 2 — Viết rõ bài toán lên đầu trang. Trước khi vẽ, ghi một câu: "Màn hình giúp người dùng làm gì?" Ví dụ: "Giúp người dùng chuyển tiền cho người quen trong dưới 3 thao tác." Câu này giữ cho mọi nét vẽ bám đúng mục tiêu.
Bước 3 — Học bộ ký hiệu quy ước. Để vẽ nhanh, hãy dùng một "bảng chữ cái" sketch chuẩn: hình chữ nhật có dấu X chéo = ảnh/hình; đường gạch ngang = dòng văn bản; hình chữ nhật bo góc = nút bấm; vòng tròn = avatar; hình chữ nhật với chữ nguệch ngoạc bên trong = ô nhập liệu; mũi tên = điều hướng giữa các màn hình. Khi cả nhóm dùng chung bộ ký hiệu, ai cũng đọc được sketch của nhau.
Bước 4 — Vẽ thật nhiều, đặt giới hạn thời gian. Áp dụng nguyên tắc số lượng: đặt đồng hồ 8 phút, vẽ 6–8 phương án, mỗi phương án không quá 60 giây. Đừng dừng lại sửa — hết ô này nhảy sang ô khác. Áp lực thời gian là bạn của bạn: nó tắt đi "bộ phê bình nội tâm" và mở ra sáng tạo.
Bước 5 — Dán lên, lùi lại, sàng lọc. Dán hết các sketch lên tường hoặc trải ra bàn. Lùi lại nhìn tổng thể. Đánh dấu (dán sticker, khoanh tròn) 2–3 phương án mạnh nhất hoặc các phần hay từ nhiều phương án khác nhau. Đây là lúc tư duy phản biện vào cuộc.
Bước 6 — Vẽ lại một bản tinh hơn (refine sketch). Lấy những phần hay nhất, kết hợp thành 1–2 sketch chi tiết hơn một chút — thêm chú thích, ghi rõ tương tác. Bản này chính là đầu vào cho bước wireframing low-fi mà bạn sẽ học ở Bài 9.
Bước 7 — Chụp lại và lưu trữ. Dùng điện thoại chụp tất cả sketch (kể cả những bản bị loại) và lưu vào kho dự án. Sketch bị loại hôm nay có thể là cảm hứng cho dự án sau.
Lỗi thường gặp & mẹo
Lỗi 1 — Cố vẽ đẹp. Đây là cái bẫy số một. Khi bạn tô bóng, căn thẳng từng đường, bạn đang lãng phí thời gian và vô tình tạo ra cam kết cảm xúc. Mẹo: tự nhắc "đủ xấu để sửa". Nếu sketch của bạn trông như sắp đem in, bạn đang làm quá kỹ.
Lỗi 2 — Chỉ vẽ một phương án. Vẽ một bản rồi dừng đồng nghĩa bạn bỏ lỡ toàn bộ giá trị của sketching. Mẹo: tự đặt luật "không được dừng trước khi có ít nhất 5 phương án khác biệt". Phương án thứ 5, thứ 6 thường mới là chỗ ý tưởng hay xuất hiện.
Lỗi 3 — Nhảy thẳng vào Figma. Cảm giác "mở phần mềm cho ra dáng làm việc" rất cám dỗ, nhất là với bạn mới. Mẹo: đặt luật cá nhân — không mở Figma cho đến khi đã có sketch được nhóm/khách hàng đồng thuận về hướng đi.
Lỗi 4 — Vẽ quá nhỏ, quá chi tiết bên trong. Sketch quá nhỏ khiến bạn không vẽ được luồng nhiều màn hình và khó đọc. Mẹo: mỗi màn hình nên to bằng lòng bàn tay trở lên; dành chi tiết cho bản refine ở bước sau.
Lỗi 5 — Sketch một mình rồi giấu đi. Sketch mạnh nhất khi được chia sẻ. Mẹo: luôn dán lên tường, mời người khác phản biện sớm. Giá trị giao tiếp của sketch chỉ phát huy khi có người cùng xem.
Mẹo nâng cao: Tập "vẽ luồng" (flow sketching), không chỉ vẽ màn hình lẻ. Đặt 3–4 màn hình cạnh nhau, nối bằng mũi tên thể hiện thao tác người dùng (bấm nút này → sang màn hình kia). Cách này giúp bạn phát hiện sớm các bước thừa hoặc lỗ hổng trong luồng — đúng tinh thần "kiểm tra cấu trúc trước khi làm đẹp".
Bài tập thực hành
Bài tập 1 — Crazy 8s cá nhân (15 phút). Chọn một màn hình quen thuộc: màn hình "giỏ hàng" của một app thương mại điện tử Việt Nam (Tiki, Shopee, hoặc một shop giả định). Gấp tờ A4 thành 8 ô. Đặt đồng hồ 8 phút, vẽ 8 phương án bố cục khác nhau, mỗi ô đúng 1 phút. Quy tắc: không được vẽ trùng ý tưởng, không được dừng để sửa.
Bài tập 2 — Sketch luồng 4 màn hình (20 phút). Lấy bài toán: "Người dùng đặt một ly cà phê qua app và thanh toán bằng ví điện tử." Phác thảo luồng 4 màn hình nối bằng mũi tên: chọn món → tùy chọn (size, đường, đá) → giỏ hàng → thanh toán. Dùng đúng bộ ký hiệu quy ước ở Bước 3. Sau khi vẽ, tự hỏi: có bước nào thừa không? Có thể gộp màn hình nào không?
Bài tập 3 — Sketch để giao tiếp (15 phút). Tìm một người bạn (hoặc đồng nghiệp không phải designer). Phác thảo nhanh ý tưởng một tính năng bất kỳ lên giấy trong khi giải thích bằng lời. Quan sát: họ có hiểu ngay không? Họ chỉ vào đâu để góp ý? Bài tập này rèn cho bạn khả năng "nghĩ ra giấy" trước mặt người khác — kỹ năng vô giá khi họp với khách hàng và team.
Sau cả ba bài, hãy chụp ảnh toàn bộ và tự đánh giá: bạn có vẽ đủ nhanh không? Có đủ số lượng không? Bản nào trông "đủ xấu để sửa" và bản nào bạn lỡ làm quá kỹ?
Tóm tắt
Sketching là kỹ năng nền tảng, dễ bị xem nhẹ nhưng tạo ra khác biệt lớn giữa một designer làm việc thông minh và một designer làm việc cực nhọc. Bốn lý do cốt lõi để luôn phác thảo trước: tốc độ (bút nhanh hơn Figma), cam kết thấp (dễ vứt bỏ, tránh sunk cost), khám phá (số lượng thắng độ hoàn thiện), và giao tiếp (ngôn ngữ chung của cả nhóm).
Hãy nhớ nguyên tắc "đủ xấu để sửa": fidelity thấp tạo ra phản hồi thật và sự khách quan. Quy trình thực dụng gồm: viết rõ bài toán, dùng bộ ký hiệu quy ước, vẽ thật nhiều dưới áp lực thời gian, sàng lọc trên tường, rồi refine 1–2 bản tốt nhất làm đầu vào cho wireframing.
Tránh năm cái bẫy lớn: cố vẽ đẹp, chỉ vẽ một phương án, nhảy thẳng vào Figma, vẽ quá nhỏ, và sketch một mình rồi giấu đi. Ba tình huống thực tế cho thấy: sketch giúp tạo 40 phương án trong 8 phút, chốt yêu cầu khách hàng trong 20 phút, và tránh lãng phí 6 giờ làm lại từ đầu.
Ở bài tiếp theo, bạn sẽ mang những sketch tốt nhất này lên một bậc — biến chúng thành wireframe từ low-fi đến mid-fi. Nhưng dù công cụ có hiện đại đến đâu, cây bút và tờ giấy vẫn sẽ luôn là nơi mọi ý tưởng tốt bắt đầu.