Web designer là gì? Nghề thiết kế web khác lập trình viên ra sao

Web designer là người thiết kế cấu trúc, bố cục và giao diện website cho máy tính lẫn điện thoại. Bài so sánh web designer với UI/UX designer, front-end developer, graphic designer; đi qua quy trình một dự án mẫu từ sitemap, wireframe tới bản 1280 và 390 px; đếm kỹ năng trong tin tuyển dụng trên ColorME ngày 03/11/2026 và gợi ý portfolio 3 dự án.

Web designer là gì? Web designer (người thiết kế web) là người quyết định một trang web trông ra sao và dẫn người xem đi đâu: sắp xếp nội dung thành các trang, vẽ bố cục, chọn chữ, màu, ảnh cho cả máy tính lẫn điện thoại, rồi bàn giao cho lập trình viên hoặc tự dựng trang trên các nền tảng như Webflow, WordPress, Framer. Khác với lập trình viên front-end, việc chính của web designer là thiết kế trải nghiệm và giao diện, không phải viết code cho trang chạy.

Muốn thử bước đầu tiên của nghề ngay bây giờ, mở công cụ Vẽ wireframe của ColorME và kéo vài khối vào khung máy tính bảng hay điện thoại. Bài này đi qua công việc hằng ngày của web designer, so sánh với UI/UX designer, front-end developer và graphic designer, một dự án mẫu từ sơ đồ trang tới bản 1280 px và 390 px, kỹ năng mà các tin tuyển dụng thật đang hỏi, và cách bắt đầu.

Một trang chủ, hai màn hình: việc chính của web designer. Trang mẫu ColorME dựng bằng HTML/CSS cho thương hiệu giả định "Sương Sớm". Ảnh trong trang: 拾壹 / Unsplash.

Web designer làm gì mỗi ngày?

Một ngày làm việc của web designer thường xoay quanh vài nhóm việc lặp lại, dù làm ở agency, ở phòng marketing hay làm tự do:

• Đọc brief và hỏi lại. Trang làm cho ai, người xem cần làm gì (đặt hàng, để lại email, gọi điện), nội dung nào đã có, nội dung nào còn thiếu.
• Sắp xếp nội dung. Chia nội dung thành các trang, quyết định menu, thứ tự các khối trên trang chủ. Đây là phần ít người thấy nhưng quyết định trang có dễ dùng hay không.
• Phác wireframe. Vẽ bố cục bằng khối xám để thống nhất với khách hoặc nhóm trước khi tốn công làm màu, chữ, ảnh.
• Thiết kế giao diện. Chọn kiểu chữ, bảng màu, cách cắt ảnh, khoảng cách, kiểu nút; dựng các thành phần dùng lại được như thẻ sản phẩm, form, chân trang.
• Làm bản co giãn. Mỗi trang thường có ít nhất hai bản: máy tính và điện thoại. Menu gọn lại, cột xếp chồng, nút to hơn để bấm bằng ngón tay.
• Bàn giao hoặc tự dựng. Chuẩn bị file cho developer, trả lời câu hỏi về khoảng cách, trạng thái nút; hoặc tự dựng trang trên một nền tảng không cần viết nhiều code.
• Soát lại sau khi lên trang. Mở trang thật trên điện thoại, so với bản thiết kế, ghi lỗi lệch giao diện để sửa.

Ngoài ra còn những việc nhỏ ít ai kể: xuất ảnh đúng kích thước cho web, làm banner đầu trang cho chiến dịch mới, sửa một landing page có sẵn. Ở công ty nhỏ, web designer thường kiêm luôn phần đồ hoạ cho website và mạng xã hội.

Web designer khác UI/UX designer, front-end developer và graphic designer thế nào?

Bốn nghề này hay bị gọi chung là "làm web" vì cùng chạm vào một trang web, nhưng mỗi người trả lời một câu hỏi khác nhau.

Bốn vai trò cạnh nhau. Ranh giới thay đổi theo công ty: ở nhóm nhỏ một người có thể làm hai, ba cột. Bảng do ColorME tổng hợp.

Vài điểm hay bị nhầm:

• Web designer và UI/UX designer chồng lên nhau nhiều nhất. Khác biệt nằm ở loại sản phẩm: web designer thường làm trang để đọc và chuyển đổi (giới thiệu, bán hàng, landing page), UI/UX designer thường làm sản phẩm để dùng đi dùng lại (app, phần mềm) và đi sâu hơn vào nghiên cứu người dùng. Đọc thêm: UI/UX là gì và UI designer là gì.
• Web designer và lập trình viên. Lập trình viên front-end biến bản thiết kế thành code chạy được; lập trình viên back-end lo dữ liệu, đơn hàng, tài khoản. Web designer không cần làm những việc đó, nhưng cần hiểu đủ để thiết kế ra thứ dựng được. Mức code cụ thể đã có ở bài Designer có cần biết code không, kèm lộ trình 4 tuần.
• Web designer và graphic designer. Graphic designer có thể làm ảnh cho website, nhưng không quyết định cấu trúc trang. Nhiều người đi từ thiết kế đồ hoạ sang web vì đã có nền về bố cục, màu và chữ.

Quy trình một dự án web: từ brief đến lúc trang chạy

Mỗi nhóm gọi tên các bước một kiểu, nhưng thứ tự thường như sau. Mỗi bước có một sản phẩm bàn giao rõ ràng, và đó cũng là thứ nên có trong portfolio.

Quy trình một dự án web và sản phẩm bàn giao ở mỗi bước. ColorME tóm tắt; tên bước thay đổi theo từng nhóm.

1. Brief: một trang ghi mục tiêu, người xem, hành động chính và nội dung có sẵn.
2. Sơ đồ trang (sitemap): danh sách các trang và cách chúng nối với nhau.
3. Wireframe: bố cục từng trang bằng khối xám, chưa có màu.
4. Giao diện: bản thiết kế hoàn chỉnh (còn gọi là mockup) cùng một trang quy định chữ, màu, nút.
5. Co giãn: bản cho điện thoại, máy tính bảng và máy tính, với các breakpoint (điểm ngắt) rõ ràng.
6. Bàn giao hoặc tự dựng: file cho developer, hoặc trang dựng xong trên một nền tảng.
7. Ra mắt và kiểm tra: soát trên máy thật, sửa lệch giao diện.
8. Lặp lại: chỉnh trang theo số liệu và phản hồi sau khi ra mắt.

Ví dụ: sơ đồ trang và wireframe cho một tiệm trà giả định

Để thấy các bước trên ra hình gì, ColorME dựng một dự án mẫu cho "Sương Sớm", một tiệm trà shan tuyết giả định. Sơ đồ trang có 6 trang và menu 4 mục; wireframe trang chủ có 6 khối theo thứ tự: menu, phần đầu trang với tiêu đề và hai nút, ba điểm nổi bật, ba thẻ gợi ý, dải câu chuyện, ô đăng ký nhận thư.

Hai bản bàn giao đầu tiên: sơ đồ trang (trái) và wireframe trang chủ đánh số theo từng khối (phải). ColorME dựng cho thương hiệu giả định.

Wireframe có thể vẽ trong Figma, trên giấy, hoặc ngay trên trình duyệt. Công cụ Vẽ wireframe của ColorME có sẵn mẫu "Landing page" và ba khung Điện thoại, Máy tính bảng, Máy tính; khung máy tính bảng hiện kích thước 834 × 1112. Câu trả lời trong phần hỏi đáp của trang công cụ: "Có, miễn phí, không cần đăng nhập." Về lưu bản vẽ, trang ghi: "Bản vẽ tự lưu trong trình duyệt trên máy bạn, mở lại trang là thấy." Ảnh dưới chụp khi chưa đăng nhập, chỉ chọn mẫu và đổi khung; phần kéo thả khối, tải PNG, SVG chưa được thử trong bài này.

Mẫu "Landing page" trong công cụ Vẽ wireframe, khung Máy tính bảng 834 × 1112, chưa đăng nhập. Ảnh chụp màn hình ngày 03/11/2026.

Từ wireframe ra giao diện thật ở 1280 px và 390 px

Bước tiếp theo là biến các khối xám thành giao diện có chữ, màu, ảnh. Trang mẫu Sương Sớm dùng một kiểu chữ có chân cho tiêu đề, một kiểu chữ không chân cho nội dung, nền kem, một màu xanh rêu đậm cho nút và dải câu chuyện, một màu cam đất làm điểm nhấn nhỏ. Trang được dựng bằng HTML/CSS rồi chụp ở hai khung: 1280 px cho máy tính và 390 px cho điện thoại.

Bản máy tính 1280 px, từ đầu tới chân trang. Mỗi khối khớp với số thứ tự trong wireframe ở trên. Ảnh trong trang: 拾壹, Eric Prouzet, Fumiaki Hayashi, Nguyen Huong / Unsplash.

Ở bản điện thoại, nội dung giữ nguyên nhưng cách xếp đổi hẳn. Đây là những quyết định web designer phải ghi rõ khi bàn giao, vì developer không tự đoán được:

• Menu bốn mục gọn vào một nút ba gạch; nút "Đặt trà về nhà" ẩn khỏi thanh trên cùng.
• Ảnh lớn chuyển lên trước tiêu đề; tiêu đề nhỏ lại từ 68 px xuống 42 px.
• Ba điểm nổi bật và ba thẻ gợi ý xếp thành một cột.
• Các nút kéo dài hết chiều ngang, cao 50 px để dễ bấm bằng ngón tay.

Bản điện thoại 390 px, ba vị trí cuộn trên cùng một trang. Trang mẫu ColorME dựng bằng HTML/CSS.

Nếu trang bạn làm là một trang bán hàng hay đăng ký đơn lẻ, phần lớn quy trình trên vẫn giữ nguyên; bài Landing page là gì đi sâu vào cấu trúc của loại trang đó.

Tự dựng trang: Webflow, WordPress, Framer khác nhau ở đâu?

Không phải web designer nào cũng bàn giao cho developer. Ở công ty nhỏ hay khi làm tự do, web designer thường tự dựng trang trên một nền tảng. Ba cái tên hay gặp, theo cách chính các nền tảng tự giới thiệu trên trang của họ (đọc ngày 03/11/2026; sổ tay theme WordPress ở developer.wordpress.org):

Bài này không so sánh gói dịch vụ hay chi phí của ba nền tảng; nếu cần, hãy đọc trang gói dịch vụ của từng nơi tại thời điểm bạn chọn. Dù dùng nền tảng nào, bản thiết kế trong Figma vẫn là bước đi trước: dựng trang nhanh hơn nhiều khi bố cục, chữ, màu đã được quyết định. Nếu cần bàn giao cho developer, chế độ Dev Mode của Figma được giới thiệu là giúp "developers transfer design into code" (theo trang Dev Mode của Figma).

Kỹ năng và công cụ web designer cần có

Nhìn từ công việc ở trên, có thể chia kỹ năng thành ba nhóm:

• Nền thiết kế: bố cục và lưới, typography, màu, cách chọn và cắt ảnh, khoảng cách đều đặn.
• Tư duy trang web: sắp xếp nội dung, đặt nút ở đâu để người xem làm việc cần làm, thiết kế co giãn cho nhiều màn hình, viết chữ trên nút và tiêu đề sao cho rõ.
• Công cụ và bàn giao: Figma (khung, auto layout, component, prototype), một nền tảng dựng trang, đọc hiểu HTML và CSS, xuất ảnh cho web, ghi chú bàn giao rõ ràng.

Tin tuyển dụng thật đang hỏi gì (03/11/2026)

Ngày 03/11/2026, các tin trên trang việc làm của ColorME được đọc lại để đếm. Chỉ đếm tên vị trí và kỹ năng, không ghi tên công ty, không lấy số liệu thu nhập:

• Trong 147 tin (sau khi bỏ tin trùng giữa các nhóm), không tin nào có tên vị trí đúng là "Web designer". Hai tin có chữ "website" trong tên, đều là "Tư vấn thiết kế website", việc vừa trao đổi với khách vừa lên ý tưởng bố cục, màu sắc cho website.
• Trong 65 tin nhóm Đồ hoạ toàn thời gian đọc đầy đủ mô tả, 19 tin có nhắc tới website hoặc landing page: phần lớn là làm ảnh, banner cho website; 7 tin giao hẳn việc thiết kế giao diện web hoặc landing page.
• Gộp 7 tin đó với 3 tin UI/UX có thiết kế cho web và 2 tin tư vấn thiết kế website, được 12 tin có việc thiết kế giao diện web. Kỹ năng các tin này nêu được đếm ở biểu đồ dưới.

Bố cục, màu sắc, typography (9/12), Figma (8/12) và Illustrator (8/12) đứng đầu; HTML/CSS chỉ xuất hiện 1 lần, ghi là "lợi thế"; không tin nào nhắc WordPress, Webflow hay Framer. Đếm từ các tin trên colorme.vn/job ngày 03/11/2026 (Thứ Ba).

Đọc số liệu này thế nào: ở thị trường mà các tin trên đại diện, việc thiết kế web thường nằm bên trong các vị trí "Graphic designer", "Designer" hay "UI/UX designer", hiếm khi đứng riêng thành một chức danh. Người tuyển hỏi nền thiết kế và Figma nhiều hơn hỏi code. Đây là một lần đếm trên một trang việc làm vào một ngày, không phải khảo sát cả thị trường; hãy coi nó như một lát cắt để biết nên chuẩn bị gì trước.

Web designer làm việc ở đâu?

• Agency thiết kế, agency marketing: làm nhiều website và landing page cho nhiều khách, nhịp nhanh, học được nhiều ngành.
• Phòng marketing của một doanh nghiệp: lo website và landing page của chính công ty, thường kiêm banner, ảnh mạng xã hội, email.
• Công ty phần mềm, công ty có sản phẩm số: làm trang giới thiệu sản phẩm, trang đăng ký, hay chuyển dần sang UI/UX.
• Công ty dịch vụ làm website: các vị trí như "tư vấn thiết kế website" kết hợp gặp khách, lên ý tưởng và phối hợp với bộ phận kỹ thuật.
• Làm tự do: nhận trọn một trang cho quán, studio, cửa hàng nhỏ; khi đó biết tự dựng trên một nền tảng gần như bắt buộc.

Bắt đầu từ đâu: portfolio 3 trang web cho 3 thương hiệu giả định

Người tuyển muốn thấy bạn đi hết quy trình, không chỉ một ảnh đẹp. Cách nhanh để có bằng chứng là tự đặt ra 3 dự án cho 3 thương hiệu giả định, mỗi dự án luyện một kiểu trang khác nhau:

Với mỗi dự án, viết một đoạn ngắn: bài toán, bạn đã quyết định gì và vì sao, rồi đặt hình theo đúng thứ tự quy trình. Nếu có thể, dựng ít nhất một dự án thành trang chạy thật (bằng một nền tảng hoặc HTML/CSS cơ bản) để người xem bấm thử trên điện thoại. Lộ trình học HTML và CSS cho việc này đã có ở bài Designer có cần biết code không.

Nếu muốn học có người hướng dẫn từ wireframe, Figma tới bàn giao, tham khảo khoá học Thiết kế UI/UX của ColorME; phần lớn kỹ năng ở đó dùng thẳng được cho thiết kế web.

Câu hỏi thường gặp về nghề thiết kế web

Web designer là gì?

Web designer là người thiết kế cấu trúc, bố cục và giao diện của website cho cả máy tính lẫn điện thoại: từ sơ đồ trang, wireframe tới bản thiết kế hoàn chỉnh, rồi bàn giao cho lập trình viên hoặc tự dựng trang trên một nền tảng.

Web designer khác lập trình viên web ra sao?

Web designer quyết định trang trông thế nào và dẫn người xem đi đâu; lập trình viên viết code để trang chạy đúng, nhanh và xử lý dữ liệu. Hai bên làm cùng một sản phẩm nhưng bàn giao hai thứ khác nhau: bản thiết kế và code.

Web designer và UI/UX designer có giống nhau không?

Chồng lên nhau nhiều nhưng không giống hẳn. Web designer thường làm website giới thiệu, bán hàng và landing page; UI/UX designer thường làm ứng dụng, phần mềm dùng nhiều lần và đi sâu hơn vào nghiên cứu người dùng.

Web designer có cần biết code không?

Nên đọc hiểu HTML và CSS để thiết kế ra thứ dựng được; nếu tự dựng trang thì cần viết được ở mức cơ bản. Trong 12 tin tuyển dụng có việc thiết kế web trên colorme.vn/job ngày 03/11/2026, HTML/CSS chỉ được nhắc một lần, ghi là lợi thế.

Graphic designer chuyển sang thiết kế web được không?

Được, và khá phổ biến vì đã có nền về bố cục, màu và chữ. Phần cần học thêm là sắp xếp nội dung thành trang, wireframe, thiết kế co giãn cho điện thoại, Figma và cách bàn giao cho developer.

Học thiết kế web nên bắt đầu từ đâu?

Bắt đầu bằng việc phác wireframe cho một trang quen thuộc, học Figma đủ để dựng giao diện có bản máy tính và điện thoại, rồi làm 3 dự án cho 3 thương hiệu giả định để có portfolio đi hết quy trình.