Dự án website Sci Beauty do Thiết Kế Web DC thực hiện cho học viện đào tạo nghề spa, phun xăm, nối mi và nail tại Hà Nội và TP.HCM, năm 2023: một website xếp khóa học theo chuyên ngành và cấp độ.
Thông tin dự án
Bảng dưới tổng hợp thông tin của dự án, lấy từ trang chủ, trang liên hệ và chân trang của website. Thời gian thực hiện ghi theo khoảng năm. Mọi dòng đều đối chiếu được trên website. Dự án thuộc nhóm thiết kế website spa và làm đẹp trong mảng thiết kế website của Thiết Kế Web DC.
| Hạng mục | Nội dung |
| Khách hàng | Học viện Thẩm mỹ Quốc tế SCI, pháp nhân Công ty TNHH Học viện Y khoa Thẩm mỹ Quốc tế SCI |
| Lĩnh vực | Đào tạo nghề spa, phun xăm, nối mi, nail, trang điểm và quản lý spa |
| Cơ sở đào tạo | Hà Nội và TP.HCM |
| Thời gian | 2023 |
| Nền tảng | WordPress, theme Hello Elementor, Elementor Pro, ElementsKit |
| Đơn vị thực hiện | Thiết Kế Web DC |
| Website | scibeauty.edu.vn |
Điểm nổi bật của dự án
Dự án có năm điểm đáng chú ý, và cả năm nằm ở cách Thiết Kế Web DC tổ chức khóa học và đăng ký chứ không ở hiệu ứng. Mỗi điểm kiểm lại được trực tiếp trên scibeauty.edu.vn, và phần sau của bài ghi chi tiết từng điểm. Thứ tự đi từ khóa học tới giao diện.
1. Sáu chuyên ngành, 17 thẻ khóa học ngay trên trang chủ.
2. Menu khóa học nhiều cấp gom khóa theo chuyên ngành.
3. Form đăng ký học thử bốn ô: họ tên, email, số điện thoại, chuyên ngành.
4. Chữ trắng trên nền xanh navy đạt tương phản 14,83:1, vượt chuẩn WCAG AA.
5. Bốn video học viên kể lại hành trình mở tiệm.
Bối cảnh của dự án
Học viện Thẩm mỹ Quốc tế SCI đào tạo nghề spa, phun xăm, nối mi, nail, trang điểm và quản lý spa, nên Thiết Kế Web DC làm website theo mô hình giới thiệu khóa học kèm đăng ký học thử. Người xem đang chọn một nghề để học và cần biết nghề nào, cấp độ nào.
Chuyên ngành và cơ sở của học viện
DC đưa sáu chuyên ngành lên trang chủ thành các tab, mỗi tab mở ra các thẻ khóa học. Chuyên ngành spa và phun xăm có bốn khóa, nối mi có ba khóa, nail có bốn khóa, còn trang điểm và quản lý spa mỗi nơi một khóa trên trang chủ. Học viện có hai cơ sở, Hà Nội tại Kim Mã và TP.HCM tại đường 3 tháng 2, quận 10, và website ghi đã giúp hơn 10.000 học viên.
Định hướng thiết kế
Thiết Kế Web DC xác định bốn mục tiêu cho website: để người xem chọn được chuyên ngành ngay trang chủ, so sánh được các cấp độ trong cùng chuyên ngành, tin vào chất lượng đào tạo và đăng ký học thử mà không phải suy nghĩ nhiều. Từng mục tiêu được DC thể hiện cụ thể ở các mục Trải nghiệm và Thiết kế giao diện.
Trải nghiệm người dùng
Thiết Kế Web DC sắp xếp website để người xem đi từ chọn nghề tới chọn cấp độ rồi tới đăng ký, không qua nhiều bước. Phần này chỉ ghi đường đi của người xem, còn màu, chữ và thẻ khóa học nằm ở mục Thiết kế giao diện. Phần dưới gồm người xem, sơ đồ và luồng đăng ký.
Người xem website
Website phục vụ hai nhóm người xem. Hai nhóm này DC xác định từ nội dung website, chưa có số liệu hành vi thật. Nhóm thứ nhất là người chưa biết nên học nghề nào, họ cần thấy các chuyên ngành đặt cạnh nhau. Nhóm thứ hai là người đã chọn nghề, họ cần so sánh các cấp độ và xem lịch khai giảng. Cả hai nhóm đều cần một nơi để đăng ký học thử.
Sơ đồ trang
DC chia website thành các nhóm trang theo cách người học tìm hiểu một học viện.
- Giới thiệu: bốn trang con gồm lịch sử hình thành, triết lý đào tạo, đội ngũ giảng viên và chính sách hỗ trợ học viên.
- Khóa học: bốn nhóm gồm spa chăm sóc da, phun xăm thẩm mỹ, nối mi và nail, mỗi khóa có trang riêng.
- Thư viện: thư viện ảnh và thư viện video.
- Lịch khai giảng, Tin tức và Liên hệ: ba trang đứng riêng trên menu.
- Đăng ký học thử: nút riêng ở cuối menu.
Luồng người dùng
Người chưa chọn nghề đi từ slider vào khối khóa học nổi bật, bấm tab chuyên ngành để xem các thẻ khóa, rồi bấm "Xem chi tiết". Người đã chọn nghề đi thẳng từ menu Khóa học vào đúng trang khóa. Cả hai luồng kết thúc ở form đăng ký học thử hoặc nút "Đăng ký" ở lịch khai giảng.
Thiết kế giao diện
Thiết Kế Web DC dựng giao diện trên theme Hello Elementor, dùng nền xanh navy cho các khối chính, vàng cam cho nút và nhãn ưu đãi, phông Roboto cho toàn trang. Màu và chữ do DC đo trên giao diện đang chạy. Phần này ghi phông chữ, bố cục trang chủ, thanh menu và thành phần giao diện.
Phông chữ
DC dùng một phông Roboto cho toàn trang, thay đổi độ đậm và cỡ chữ để tạo thứ bậc. Tiêu đề trên slider cỡ 30 px, tiêu đề khối 22 đến 25 px, tên khóa học trên thẻ 18 px độ đậm 600, đoạn nội dung 15 đến 16 px. Nút "Đăng ký ngay" dùng chữ 15 px, nền vàng cam và bo góc 5 px.
Bố cục trang chủ
DC thiết kế slider đầu trang với tiêu đề học viện thẩm mỹ tiêu chuẩn quốc tế. Dưới slider, trang chủ xếp theo thứ tự một người đi từ chọn nghề tới đăng ký:
1. Khóa học thẩm mỹ nổi bật: sáu tab chuyên ngành, mỗi tab hiện các thẻ khóa học.
2. Học thẩm mỹ cùng học viện: năm điểm gồm giáo trình, đội ngũ giảng viên, chứng chỉ, cơ sở vật chất và hợp tác đào tạo quốc tế.
3. Cam kết của chúng tôi: bốn cam kết của học viện.
4. Học viên thành công: bốn video học viên.
5. Lịch khai giảng: bốn lớp, mỗi lớp có hai cơ sở và nút "Đăng ký".
6. Thư viện ảnh, Tin tức và Đối tác đào tạo.
7. Đăng ký học thử miễn phí và chân trang: form, hotline, hai cơ sở và thông tin pháp lý.
Thanh menu
DC đặt menu ở đầu trang và cho menu cố định khi cuộn. Menu Khóa học mở ra nhiều cấp, nhóm theo bốn chuyên ngành và liệt kê từng khóa. Các mục Giới thiệu, Thư viện, Lịch khai giảng, Tin tức, Liên hệ đứng cạnh, cuối menu là nút Đăng ký học thử.
Thành phần giao diện
DC chọn xanh navy làm nền chính vì màu này gợi sự nghiêm túc của một cơ sở đào tạo, và dùng vàng cam cho chỗ cần bấm. Các thành phần giao diện lặp lại đều dùng màu trong bảng sau.
| Mã màu | Dùng cho |
| #0b2653 | Nền các khối chính và thẻ khóa học |
| #2c4b92 | Các khối phụ cùng tông navy |
| #e49d3b | Nút "Đăng ký ngay", nhãn giảm giá |
| #f3f3f3 | Nền các khối xen kẽ |
| #8b8b8b | Chữ phụ và viền |
| #ffffff | Chữ trên nền xanh và nền trang |
Theo chuẩn WCAG 2.1, DC tính tỷ lệ tương phản của các cặp màu chính. Chữ trắng trên nền navy `#0b2653` đạt 14,83:1, trên nền `#2c4b92` đạt 8,31:1, và cặp vàng cam với navy đạt 6,48:1, đều vượt mức 4,5:1 của chuẩn AA.
Thẻ khóa học dùng nền navy, tên khóa in hoa, các nội dung chính, nhãn giảm giá và nút "Xem chi tiết".
Công nghệ và kỹ thuật
Thiết Kế Web DC dựng website trên WordPress với theme Hello Elementor và Elementor Pro. Cách dựng này thuộc hướng thiết kế website bằng WordPress. Các mục dưới đây lần lượt ghi giao diện, phần chạy phía sau, kỹ thuật nền và quản trị, chỉ nêu cái đọc được từ mã trang.
Front-end: Hello Elementor và ElementsKit dựng trang đào tạo
DC dựng phần người xem thấy bằng theme Hello Elementor và Elementor Pro 3.25.7. Hello Elementor là theme nhẹ để Elementor quyết định giao diện, ElementsKit cung cấp menu nhiều cấp, menu cố định và ô tìm kiếm, còn Unlimited Elements for Elementor bản premium bổ sung các thành phần mà bộ mặc định chưa có.
Back-end: WordPress và form đăng ký học thử
Thiết Kế Web DC dựng phần chạy phía sau trên WordPress 6.7, ghi trong thẻ generator của trang, quản lý khóa học, bài viết và menu. Form đăng ký học thử là biểu mẫu của Elementor Pro, nhận họ tên, email, số điện thoại và chuyên ngành.
Kỹ thuật nền
Website chạy qua kết nối HTTPS và khai báo khung nhìn theo chiều rộng thiết bị. Plugin Rank Math SEO tạo sơ đồ trang XML, khai báo trong robots.txt, đồng thời thêm dữ liệu có cấu trúc JSON-LD cho website, trang và bài viết.
Quản trị website
Học viện quản trị nội dung trong WordPress: tạo khóa học, đăng tin, sửa menu và chỉnh khối bằng Elementor. Đường dẫn đăng nhập mặc định `/wp-login.php` không mở được và robots.txt chặn thư mục `/wp-admin/`.
Kết quả
Phần Kết quả gồm số đo trang chủ và các tính năng chạy được. Thiết Kế Web DC chỉ ghi cái thấy rõ trong mã trang chủ hoặc trên menu, và đối chiếu từng mục trên website đang chạy. Người đọc có thể tự kiểm lại mọi dòng trên scibeauty.edu.vn.
Số đo website sau khi dựng
Trang chủ được DC đo bằng PageSpeed Insights hai lần, kết quả hai lần trùng nhau. Số trong bảng là bản máy tính.
| Chỉ số | Kết quả đo |
| Điểm SEO | 100/100 |
| Thời gian hiển thị nội dung chính (LCP) | 1,1 giây |
| Độ ổn định bố cục (CLS) | 0,305 |
LCP nằm trong mức "tốt" dưới 2,5 giây của Google, còn CLS cao hơn ngưỡng 0,1.
Tính năng chạy được
Bảng sau liệt kê tính năng chạy trên trang chủ, mỗi dòng đều kiểm lại được.
| Tính năng | Cách hoạt động |
| Menu khóa học nhiều cấp | Mở ra theo chuyên ngành, liệt kê từng khóa |
| Menu cố định | Thanh menu bám theo người xem khi cuộn trang |
| Tab chuyên ngành | Bấm tab để đổi nhóm thẻ khóa học |
| Form đăng ký học thử | Bốn ô: họ tên, email, số điện thoại, chuyên ngành |
| Ô tìm kiếm | Do ElementsKit tạo |
| Video học viên | Bốn video, bấm để phát |
Bản mô tả dựa trên giao diện máy tính. Bố cục và tốc độ trên điện thoại chưa được kiểm nên bài không nhận định về bản di động.
Website Sci Beauty cho thấy cách xếp nhiều chuyên ngành và cấp độ vào một cấu trúc rõ ràng, nơi người xem chọn nghề rồi đăng ký ngay trên cùng trang.
Cơ sở đào tạo thẩm mỹ có thể xem thêm các dự án khác và bảng báo giá thiết kế website trọn gói trước khi chọn gói. Cần trao đổi trực tiếp, mời anh chị liên hệ Thiết Kế Web DC
