Khái niệm, thuật ngữ
Cơ bản
- Responsive Design: Thiết kế website tương thích với mọi thiết bị (desktop, tablet, mobile).
- Adaptive Design: Thiết kế giao diện dựa trên một số kích thước màn hình cố định.
- Static Website: Website tĩnh, nội dung không thay đổi theo tương tác người dùng.
- Dynamic Website: Website động, nội dung thay đổi dựa trên dữ liệu hoặc tương tác của người dùng.
- Typography: Nghệ thuật và kỹ thuật sử dụng font chữ trong thiết kế.
- White Space (Negative Space): Khoảng trắng xung quanh các yếu tố thiết kế để tăng sự thoải mái cho người xem.
- Color Scheme: Phối màu cho giao diện.
- Grid System: Hệ thống lưới giúp sắp xếp nội dung trên trang.
- Accessibility (A11Y): Khả năng tiếp cận của website với mọi người, bao gồm người khuyết tật.
- Information Architecture (IA): Cấu trúc thông tin trên website để dễ dàng tìm kiếm.
- Wireframe: Bản phác thảo bố cục giao diện, thường không có chi tiết đồ họa.
- Mockup: Phiên bản giao diện hoàn chỉnh với đầy đủ hình ảnh và màu sắc, nhưng chưa hoạt động.
- Prototype: Mô hình giao diện có thể tương tác để kiểm tra trải nghiệm người dùng.
UX (User Experience)
- User Persona: Hồ sơ của người dùng mục tiêu.
- User Journey: Hành trình trải nghiệm của người dùng từ lúc bắt đầu đến khi đạt được mục tiêu.
- Call to Action (CTA): Các nút hoặc liên kết khuyến khích người dùng hành động (đăng ký, mua hàng, v.v.).
- Micro-interactions: Những hiệu ứng nhỏ giúp cải thiện trải nghiệm, như hiệu ứng hover, loading.
- Usability: Mức độ dễ sử dụng của website.
- A/B Testing: Thử nghiệm hai phiên bản của giao diện để tìm ra phương án tốt nhất.
- Conversion Rate Optimization (CRO): Tối ưu hóa tỷ lệ chuyển đổi (từ khách truy cập thành khách hàng).
- Emotional Design: Thiết kế tạo cảm xúc cho người dùng.
UI (User Interface)
- Visual Hierarchy: Trình tự thị giác, hướng dẫn người dùng qua các yếu tố quan trọng.
- UI Patterns: Các mẫu thiết kế UI thường gặp (thanh điều hướng, breadcrumb, form, v.v.).
- Material Design: Hệ thống thiết kế của Google, dựa trên ánh sáng, bóng đổ và chuyển động.
- Flat Design: Phong cách thiết kế phẳng, tối giản.
- Skeuomorphism: Thiết kế mô phỏng các vật thể thật.
- Dark Mode/Light Mode: Chế độ giao diện tối và sáng.
- Gestalt Principles: Các nguyên tắc thị giác trong thiết kế (gần gũi, tương đồng, liên tục, v.v.).
Công nghệ
- HTML/CSS/JavaScript: Ngôn ngữ cơ bản để xây dựng giao diện website.
- CSS Frameworks: Các thư viện giúp tối ưu hóa CSS (Bootstrap, Tailwind CSS, v.v.).
- Design Tools: Công cụ thiết kế như Figma, Adobe XD, Sketch.
- CMS (Content Management System): Hệ quản trị nội dung (WordPress, Joomla, v.v.).
- Version Control: Công cụ quản lý phiên bản thiết kế (Git, GitHub).
SEO & hiệu năng
- Page Speed: Tốc độ tải trang, ảnh hưởng đến SEO và UX.
- Mobile-first Design: Thiết kế ưu tiên cho thiết bị di động.
- Web Accessibility Standards (WCAG): Tiêu chuẩn về khả năng tiếp cận của website.
- Core Web Vitals: Bộ chỉ số hiệu năng web (LCP, FID, CLS).
Đơn vị đo
| Đơn vị | Mô tả | Phân loại |
|---|---|---|
| px | Pixel, đơn vị cố định trên màn hình | Tuyệt đối |
| pt | Point, 1pt = 1/72 inch, dùng trong in ấn | Tuyệt đối |
| pc | Pica, 1pc = 12pt | Tuyệt đối |
| cm | Centimeter, dùng trong in ấn | Tuyệt đối |
| mm | Millimeter, dùng trong in ấn | Tuyệt đối |
| in | Inch, 1in = 2.54cm | Tuyệt đối |
| % | Phần trăm so với phần tử cha | Tương đối |
| em | Dựa trên font-size của phần tử cha | Tương đối |
| rem | Dựa trên font-size của thẻ <html> | Tương đối |
| vw | Viewport Width, 1vw = 1% chiều rộng màn hình | Tương đối |
| vh | Viewport Height, 1vh = 1% chiều cao màn hình | Tương đối |
| vmin | Dựa trên kích thước nhỏ nhất của viewport | Tương đối |
| vmax | Dựa trên kích thước lớn nhất của viewport | Tương đối |
| fr | Fraction, chia tỷ lệ không gian trong CSS Grid | Linh hoạt |
| ch | Độ rộng của chữ số “0” trong font chữ hiện tại | Linh hoạt |
| ex | Độ cao của chữ “x” trong font chữ hiện tại | Linh hoạt |
Các nguyên tắc và lý thuyết thiết kế
- Hick’s Law: Thời gian ra quyết định tăng khi có nhiều lựa chọn.
- Fitts’s Law: Thời gian thực hiện một thao tác tỷ lệ thuận với khoảng cách và kích thước mục tiêu.
- Pareto Principle (80/20 Rule): 80% kết quả đến từ 20% yếu tố.
- Rule of Thirds: Nguyên tắc 1/3 trong thiết kế bố cục.
- Golden Ratio: Tỷ lệ vàng trong thiết kế.
- Accordion: Thành phần hiển thị nội dung theo dạng thu gọn/mở rộng.
- Tooltip Text: Văn bản ngắn xuất hiện khi người dùng di chuột vào biểu tượng hoặc nút.
- Tagline: Dòng mô tả ngắn về thương hiệu hoặc sản phẩm.
- Caption: Mô tả ngắn cho hình ảnh hoặc video.
- Alt Attributes
Thẻ thay thế cho hình ảnh, giúp cải thiện SEO và hỗ trợ người khiếm thị. - Breadcrumbs: Đường dẫn chỉ ra vị trí hiện tại của người dùng trong cấu trúc trang
Giao diện website
Các thành phần website
Trang kết quả tìm kiếm – Search results Page
- Hộp tìm kiếm – Search box: Hộp tìm kiếm là nơi người dùng nhập nội dung để tìm kiếm.
- Đặt hộp tìm kiếm ở đầu trang và thiết kế đồng bộ với các hộp tìm kiếm khác trên website hoặc sản phẩm.
- Bao gồm nút nhấn để thực hiện tìm kiếm.
- Sử dụng văn bản gợi ý (placeholder) để hướng dẫn người dùng nhập nội dung tìm kiếm phù hợp.
- Hiển thị kết quả tìm kiếm – Visualisation of results: Hiển thị các mục liên quan đến nội dung tìm kiếm:
- Cung cấp thông tin chi tiết để giúp người dùng hiểu rõ hơn về kết quả, ví dụ: tiêu đề trang, mô tả, và hình ảnh minh họa (thumbnail).
- Hiển thị tổng số kết quả tìm kiếm được.
- Bao gồm phân trang (pagination) cho danh sách kết quả dài (hơn 50 kết quả).
- Nếu không có kết quả, hướng dẫn người dùng cách tìm kiếm khác hoặc gợi ý lối đi khác.
- Tiến trình tìm kiếm – Search progress[Tùy chọn]: Khi tìm kiếm không tức thì, hiển thị chỉ báo tải (loading indicator) để thông báo trạng thái truy vấn.
- Gợi ý tìm kiếm – Suggested search items[Tùy chọn]: Đề xuất các từ khóa để người dùng không cần nhập nội dung, ví dụ: xu hướng hiện tại, phổ biến nhất, gần đây, hoặc sửa lỗi chính tả.
- Danh mục và bộ lọc – Categories and/or filters[Tùy chọn]: Cung cấp công cụ lọc hoặc phân loại để giúp người dùng thu hẹp phạm vi tìm kiếm.
- Sắp xếp kết quả tìm kiếm (Ordering of search results) (Tùy chọn)
- Cho phép người dùng sắp xếp kết quả, ví dụ: giá tốt nhất, phù hợp nhất, hoặc mới nhất trước.
- Làm nổi bật từ khóa (Highlighting keywords) [Tùy chọn]: Tô sáng các từ khóa trong nội dung kết quả hiển thị để người dùng dễ dàng nhận diện.
Trang 404 – 404 Page
- Logo: Bao gồm logo đầy đủ hoặc chỉ biểu tượng nhận diện thương hiệu.
- Tiêu đề – Title: Làm rõ rằng người dùng đang ở trang 404 (ví dụ: “Trang không tồn tại”, “Oops! Không tìm thấy trang này”).
- Mô tả – Description: Giải thích lý do người dùng truy cập vào trang này (ví dụ: “Trang bạn tìm kiếm không tồn tại hoặc đã bị di chuyển.”).
- Liên kết đến các trang khác – Links to other pages
- Liên kết trở về trang chủ.
- Liên kết để người dùng có thể liên hệ.
- Gợi ý một số trang phổ biến khác (ví dụ: “Sản phẩm hot”, “Blog mới nhất”, “Khuyến mãi”).
- Thanh tìm kiếm – Search bar: Tích hợp thanh tìm kiếm để người dùng dễ dàng tìm thông tin họ cần.
- Hình minh họa, họa tiết, hoặc điểm nhấn hình ảnh[Tùy chọn]: Sử dụng để tăng tính thẩm mỹ và thể hiện cá tính thương hiệu (ví dụ: hình vui nhộn, phong cách riêng của thương hiệu).
- Cá nhân hóa trang[Tùy chọn]: Tạo cơ hội để giới thiệu thương hiệu của bạn qua ngôn ngữ, hình ảnh hoặc màu sắc đặc trưng.
Trang đăng nhập – Login Page Checklist
- Logo: Hiển thị logo đầy đủ hoặc một biểu tượng đại diện.
- Tiêu đề – Title: Thông báo cho người dùng rằng đây là trang đăng nhập.
- Tài khoản – Username: Sử dụng một định danh duy nhất cho người dùng. Cân nhắc cho phép đăng nhập bằng nhiều định danh như tên người dùng, email, hoặc số điện thoại.
- Mật khẩu – Password: Một mã bảo mật riêng tư để truy cập tài khoản.
- Cung cấp tùy chọn hiển thị mật khẩu.
- Liên kết đặt lại mật khẩu – Link to Reset Password: Dành cho người dùng quên mã bảo mật của họ và cần thay đổi.
- Đặt liên kết này gần trường nhập mật khẩu.
- Liên kết đăng ký – Link to Sign Up: Dành cho người dùng chưa có tài khoản nhưng tình cờ truy cập vào trang này.
- Đăng nhập qua bên thứ ba – Login via Third Party[Tùy chọn]: Biến các trường nhập liệu thành thao tác một chạm bằng cách cho phép kết nối qua các bên thứ ba như Google, Apple, Facebook, hoặc Twitter.
- Lời chứng thực – Testimonial[Tùy chọn]: Tăng cường sự tin tưởng vào thương hiệu và sản phẩm.
- Bài viết Blog – Blog Post[Tùy chọn]: Cơ hội giới thiệu nội dung phù hợp với người dùng.
- Tính năng mới (New Feature)[Tùy chọn]: Tạo sự hứng thú về tính năng mới ngay trước khi người dùng đăng nhập để trải nghiệm.
Trang Đăng Ký – Sign Up Page
- Logo: Hiển thị logo đầy đủ hoặc biểu tượng của thương hiệu.
- Tiêu đề – Title: Thông báo cho người dùng đây là trang tạo tài khoản.
- Mô tả – Description: Mô tả các tính năng cơ bản của việc tạo tài khoản. Đặt kỳ vọng về những gì người dùng có thể đạt được.
- Tài khoản – Account Identification: Cung cấp một định danh duy nhất cho người dùng đăng nhập. Khuyến nghị sử dụng địa chỉ email để vừa là định danh vừa là cách liên lạc với người dùng.
- Tạo mật khẩu – Setting a Password: Người dùng cần nhập mật khẩu bảo mật để truy cập tài khoản trong tương lai.
- Thanh đo độ mạnh của mật khẩu (Password Strength Indicator).
- Hiển thị các yêu cầu của mật khẩu (độ dài, ký tự đặc biệt).
- Cho phép người dùng nhìn thấy mật khẩu khi nhập.
- Liên kết đến trang đăng nhập – Link to Login: Trường hợp người dùng đã có tài khoản nhưng vô tình truy cập vào trang này.
- Tùy chọn đăng ký qua bên thứ ba – Sign Up via Third Party: Cho phép người dùng đăng ký nhanh bằng Facebook hoặc Google.
- Số lượng khách hàng hiện tại – Current Active Customer Count[Tùy chọn]: Hiển thị số người đang sử dụng sản phẩm để tạo cảm giác “FOMO” (sợ bị bỏ lỡ).
- Lời chứng thực hoặc bằng chứng xã hội – Testimonial or Social Proof[Tùy chọn]: Tăng cường niềm tin vào thương hiệu và sản phẩm.
- Bài viết blog – Blog Post[Tùy chọn]: Cơ hội giới thiệu nội dung nổi bật để thuyết phục những khách hàng còn lưỡng lự.
- Các gói thanh toán và thời gian dùng thử – Billing Plans and Trial Period[Tùy chọn]: Nếu có thanh toán:Định rõ thời gian dùng thử và khi nào người dùng sẽ bị tính phí.
Trang Tuyển dụng – Careers
- Câu chuyện công ty: Chia sẻ về sự khởi đầu của doanh nghiệp và hành trình đã trải qua. Không chỉ chia sẻ “cái gì” (what), mà còn phải nói rõ “tại sao” (why) và động lực đứng sau sự thành lập công ty.
- Thông tin cập nhật: Đảm bảo toàn bộ nội dung luôn được cập nhật, đặc biệt là các số liệu định lượng như:
- Số lượng nhân viên.
- Số văn phòng hoạt động.
- Thời gian hoạt động.
- Lợi ích cho nhân viên
- Nêu rõ các phúc lợi và giá trị dành cho nhân viên tiềm năng.
- Đảm bảo những lợi ích này mang lại giá trị thực tế, không phải là những ưu đãi sáo rỗng.
- Các nhóm và bộ phận
- Liệt kê các nhóm nhân sự hoặc lĩnh vực mà công ty đang có.
- Điều chỉnh mức độ chi tiết dựa trên quy mô đội ngũ:
- Nếu quy mô nhỏ (khoảng 10 người), có thể giới thiệu hồ sơ chi tiết và cung cấp liên kết.
- Với đội ngũ lớn (200+ người), thông tin có thể được tổng hợp đơn giản hơn.
- Vị trí tuyển dụng
- Danh sách tất cả các vai trò hiện đang tuyển dụng.
- Phân chia các vị trí theo từng phòng ban để dễ dàng theo dõi.
- Địa điểm làm việc
- Hiển thị vị trí các văn phòng của công ty.
- Nếu có làm việc từ xa, hãy nêu rõ.
- Lời chứng thực từ nhân viên (tùy chọn)
- Chia sẻ câu chuyện từ các nhân viên hiện tại, nêu bật lý do họ yêu thích công việc tại công ty.
- Mô tả rõ ràng những gì ứng viên có thể mong đợi khi gia nhập.
Trang comming soon – Comming soon page
Thành phần
- Logo hoặc tên thương hiệu [Bắt buộc]: Giúp nhận diện thương hiệu ngay lập tức. Đặt ở vị trí nổi bật (thường ở đầu trang hoặc trung tâm).
- Tiêu đề hoặc thông điệp chính (Headline) [Bắt buộc]: Truyền tải thông điệp rõ ràng, hấp dẫn, ví dụ: “Sắp ra mắt!” hoặc “Website của chúng tôi đang được xây dựng”.
- Thời gian ra mắt [Bắt buộc]: Đồng hồ đếm ngược hoặc ngày cụ thể giúp tạo cảm giác gấp rút và mong chờ.
- Thông tin liên hệ cơ bản [Bắt buộc]: Email hoặc liên kết mạng xã hội để người dùng dễ dàng liên lạc.
- Call-to-Action (CTA) [Bắt buộc]: Ví dụ: “Đăng ký nhận thông báo” hoặc “Theo dõi chúng tôi”. Bao gồm form nhập email hoặc nút liên kết.
- Giới thiệu ngắn gọn về dự án/sản phẩm/dịch vụ [Khuyến nghị]: Cung cấp thông tin cơ bản để khơi gợi sự quan tâm.
- Hình ảnh minh họa hoặc video [Khuyến nghị]: Thiết kế hình ảnh đẹp mắt, thể hiện phong cách thương hiệu, hoặc video ngắn để tăng tương tác.
- Mạng xã hội [Khuyến nghị]: Biểu tượng liên kết đến các nền tảng như Facebook, Instagram, Twitter để tăng khả năng kết nối.
- Khả năng chia sẻ [Khuyến nghị]: Nút chia sẻ giúp tăng nhận diện thương hiệu thông qua mạng xã hội.
- Câu chuyện đằng sau dự án [Tùy chọn]: Cung cấp thông tin chi tiết về sứ mệnh, đội ngũ, hoặc ý tưởng để tăng tính kết nối cảm xúc.
- Nội dung động [Tùy chọn]: Hiệu ứng chuyển động hoặc hình ảnh động nhẹ nhàng để tạo sinh động.
- Quà tặng hoặc ưu đãi sớm [Tùy chọn]: Ví dụ: Giảm giá khi đặt trước hoặc quà tặng cho người đăng ký đầu tiên để tăng động lực tham gia.
Các lưu ý khi thiết kế Trang comming soon – Comming soon page
- Sử dụng ngôn ngữ tích cực, kích thích sự tò mò.
- Gắn liên kết mạng xã hội và xây dựng cộng đồng từ sớm
- Không đặt quá nhiều thông tin hoặc yêu cầu.
Hero section
Hero section
Navigation bar – Thanh điều hướng
CTA – Call to Action – Kêu cọi hành động
Grid System – Hệ thống lưới
Card – Thẻ nội dung
Modal / Popup – Cửa sổ bật lên
Tham khảo
https://dribbble.com/shots/24458112-Hero-UI-Animation
https://www.justinmind.com/ui-design/carousel
https://microbladingdmvlyna.com/