Tài liệu Các thành phần cơ bản của website là một tài liệu hướng dẫn về các thành phần và yếu tố quan trọng trong việc thiết kế website. Tài liệu này cung cấp cho người đọc kiến thức để hiểu rõ về cấu trúc và thành phần của một website, giúp người dùng có thể thiết kế trang web chuyên nghiệp và hiệu quả hơn.
CÁC THÀNH PHẦN CƠ BẢN TRÊN GIAO DIỆN WEBSITE I Thông tin Website Định nghĩa Website trang web đại diện cho nhóm trang web quản lý tập trung, chứa văn bản, hình ảnh tất loại tệp đa phương tiện trình bày cho người dùng Internet truy cập cách dễ dàng Website thường nằm tên miền tên miền phụ world wide web hệ thống internet Mỗi website tập tin HTML XHTML truy cập dùng giao thức HTTP or HTTPS Các loại website phổ biến Dưới 10 loại website phổ biến bạn thấy web Mặc dù có số chồng chéo danh mục khác nhau, nhìn chung loại trang web có mục tiêu định cần đạt tập hợp thực tiễn tốt riêng Website Thương mại điện tử Website Kinh doanh Website Giải trí Website Portfolio Website Media Website Brochure Website Phi lợi nhuận Website Giáo dục Website Infopreneur Website Cá nhân Những yếu tố cần có Website Tên miền (có thể xem “địa chỉ”, dấu hiệu nhận biết để người dùng dùng truy cập vào website bạn) Hosting (có thể xem máy chủ, “mảnh đất” chứa nhà website bạn Source code (là tệp tin html, xhtml… code/cms) Website tĩnh, website động Trang web tĩnh hiểu loại trang mà người quản trị tùy ý thay đổi nội dung hình ảnh mà phải cần kiến thức HTML Website tĩnh viết hoàn toàn dựa tảng HTML CSS thêm hiệu ứng từ Javascript muốn Trong trường hợp muốn chỉnh sửa chi tiết hay giao diện website tĩnh, người chủ sở hữu website cần phải yêu cầu nhà cung cấp dịch vụ lập trình viên hỗ trợ Trang web tĩnh mang lại số bất tiện người dùng phải thông qua nhiều khâu để có kết chỉnh sửa mong muốn Trang web động loại trang viết kèm theo công cụ quản trị để người quản trị web dễ dàng thay đổi số chi tiết website mà họ mong muốn Đây gọi CMS (Hệ thống quản trị sở liệu) Khi thiết kế website động, lập trình viên cố gắng để cho phép trang web mà bạn sử dụng thay đổi nội dung mà bạn mong muốn Tất nhiên, việc chỉnh sửa nằm phạm vi giao diện, module, nội dung… Những chỉnh sửa, thêm bớt tính hay yêu cầu cao cấp hơn, bạn cần phải yêu cầu lập trình viên hay dịch vụ thiết kế web hỗ trợ 5 Mục đích Website Các loại trang web khác có mục đích khác tùy thuộc vào đối tượng mục tiêu xây dựng website gì? Khi xây dựng website đơn vị cá nhân thường có số mục đích sau: Mục đích website thơng tin/thơng tin thực tế Mục đích website giải trí Mục đích website thương mại điện tử Mục đích trang web kinh doanh dựa dịch vụ Mục đích trang web truyền thông xã hội … Thành phần gồm: Header (phần đầu website) o Logo o Menu điều hướng o Home link o Hộp tìm kiếm (Search box) o Giỏ hàng o Site ID Slider Content area – Nội dung website Sidebar – phần bên phải trái website Footer (phần cuối website) Lời kêu gọi hành động – Call To Action (CTA) II Nội dung thành phần Website Header (phần đầu website) Phần website thường header ngồi số website có thiết kế đặc biệt Header thường có thành phần điều hướng website, giúp người dùng dễ dàng tới nội dung mong muốn Ở bên header thường có chứa thành phần gồm Logo, Site ID, Home link, Menu định hướng, Giỏ hàng, Hộp tìm kiếm (Search box) a Logo Logo thể giá trị doanh nghiệp mà bạn xây dựng Vị trí đặt màu sắc logo tâm điểm để tạo nên website đẹp Khi chọn cách hiển thị logo nhận diện thương hiệu Bạn nên cân đối màu logo màu phần chưa logo Từ có nhìn ấn tượng bật cho website bạn b Menu điều hướng Điều hướng menu yếu tố logic tạo nên tính linh hoạt trang Web Vùng cần thiết kế cách thân thiện rõ ràng Từ giúp người dùng nhanh chóng đến trang họ mong muốn Ví dụ: menu điều hướng thường gồm link: Trang chủ, Giới thiệu, Sản phẩm, Tin tức, Liên hệ… c Home link Home link đường dẫn liên kết đến trang chủ Click vào link hình nhanh chóng chuyển đến trang chủ website Danh mục thực theo hai cách sau: Gắn trực tiếp vào logo website Được thêm vào đoạn text mà bạn dễ nhìn thấy “trang chủ” “Home” Ví dụ phần header trang shopee d Hộp tìm kiếm (Search box) Hộp tìm kiếm (Search box) giúp người dùng tìm kiếm thơng tin mong muốn nhanh chóng Đây chức cần thiết thiết kế website Tạo điều kiện thuận lợi để khách hàng tự tìm kiếm nội dung hay sản phẩm mong muốn e Giỏ hàng Mục giỏ hàng phần thiếu website thương mại điện tử, bán hàng trực tuyến Bạn thường thấy biểu tượng giỏ hàng đặt góc bên phải trang web Khách hàng nắm số lượng sản phẩm chọn tổng tiền Giỏ hàng thống kê chi tiết sản phẩm họ mua chuyển qua toán khách hàng mua sản phẩm f Site ID Site ID tên website hay gọi cách khác định dạng web Site Id nên đặt góc trái giao diện web, thường thấy đoạn slogan ngắn website hình logo Slider Thành phần website thứ hai slider, thường đặt phía sau phần header Thường bao gồm hình ảnh, sản phẩm bật doanh nghiệp Cùng nút điều hướng để giúp người dùng di chuyển đến trang bạn mong muốn Slider cần thiết kế đẹp hình ảnh người dùng nhìn thấy Slider sản phẩm hot, ưu đãi, dịch vụ bật doanh nghiệp 3 Content area – Nội dung website Nội dung website giá trị cốt lõi mà bạn muốn chia sẻ Phần nên trình bày dễ nhìn, đọng nội dung thơng tin Điều giữ chân khách hàng bạn lại website lâu Phần nội dung website thường có thành phần sau: Tiêu đề website (Page Title): đặt đầu phần nội dung Tiêu đề in đậm với phông chữ to nhằm thu hút người dùng mang đến vấn đề khiến khách hàng phải tìm hiểu Điều hướng đường dẫn (breadcrumb navigation) giúp người dùng biết đâu website Từ di chuyển đến mục website cách nhanh chóng Phần đặt đầu nội dung trang Ví dụ: Tin tức → Thể thao … Phần nội dung chính: phần chứa thơng tin gì, thường website có phần quản trị website hay cịn gọi CMS để bạn nhập nội dung Paging navigation (điều hướng phân trang): website chứa nhiều nội dung trang trình bày danh sách sản phẩm, hay danh sách viết, phân trang việc nhằm giảm tải cho website load nhanh hơn, ngồi cịn giúp người dùng cuồn chuột nhiều Điều hướng phân trang thường đặt đầu, cuối đầu cuối phần nội dung trang Thanh thông tin: thường đặt đầu hay cuối phần nội dung trang, thông tin thường gồm thông tin ngày đăng bài, tên tác giả, số lượt xem viết… Thanh chia sẻ mạng xã hội: gồm nút chia sẻ trang web sang mạng xã hội khác Facebook, Google, Twitter… Sidebar – phần bên phải trái website Các cột dọc hẹp bên cạnh nội dung website Sidebar chứa banner quảng cáo, danh mục, kêu gọi hành động tìm kiếm Sidebar thành phần hỗ trợ với website bạn Những năm gần đây, xu hướng thiết kế website bỏ hoàn toàn sidebar Chỉ sử dụng cột để có chiều rộng đầy đủ để hiển thị nội dung – xu hướng facebook Chúng ta thường bắt gặp dạng chia cột phổ biến: chia cột, cột… Scan column thường chiếm không nhiều chiều rộng, chứa thành phần dưới: Menu điều hướng Box tìm kiếm nâng cao Sản phẩm viết bật Thông tin liên hệ Banner quảng cáo Banner Một số trường hợp nhầm lẫn header banner Banner Header hoàn toàn khác Từ banner dùng việc quảng cáo ví dụ quảng cáo sản phẩm, quảng cáo kiện, ưu đãi, dịch vụ,… Thơng thường danh mục website Banner dạng hình ảnh thiết kế để hấp dẫn ý khách hàng Vị trí phổ biến banner thường đặt trang (trên phần header) hay khu vực scan column Bên cạnh đó, banner cịn thấy dạng video clip youtube chẳng hạn Banner Footer (phần cuối website) Footer nằm chân website Hiển thị thành phần thông tin quyền website, menu, link liên kết, thông tin liên hệ,… Lời kêu gọi hành động – Call To Action (CTA) Đây thành phần phụ website lại quan trọng Đó yêu cầu điều hướng bạn để người dùng đến trang bạn muốn Lời kêu gọi nên đơn giản nhẹ nhàng theo sản phẩm khu vực bạn (ngôn ngữ vùng miền) Call to action III Các tính website Khơng phải đảm bảo mặt giao diện mà website tốt cần phải có đủ tính để thu hút người dùng Website thiết kế với giao diện tùy biến menu rõ ràng Khách truy cập website đến từ nhiều quốc gia phương tiện truy cập khác Nếu thiết kế web bạn có tính tùy biến, tự động điều chỉnh cho thích hợp với thiết bị sử dụng Ví dụ, với thiết bị smartphone, máy tính bảng (tablets), laptop máy tính để bàn PC, đa số trang web tự động điều chỉnh kích thước giao diện thành cột để khách truy cập đọc dễ dàng Sau truy cập vào website, khách hàng dễ dàng tìm tab, đường link nút bấm để đến trang họ cần Song song với việc có thiết kế tùy biến, trang web nên có bố cục rõ ràng để tự động điều chỉnh hướng nhìn khách hàng vào sản phẩm, nút mua hàng giỏ hàng Amazon E-bay ví dụ dụ điển hình cách thiết kế Các trang họ tự điều chỉnh kích thước nút tốn giỏ hàng làm bật, giúp khách hàng lần truy cập nhìn thấy chúng dễ dàng Các yếu tố SEO Tối ưu hóa cơng cụ tìm kiếm yếu tố cần thiết để đảm bảo trang web bạn thu hút đối tượng truy cập Bài viết đặc sắc kết hợp với từ khóa xác giúp bạn tăng cao lượng truy cập Những công ty chuyên thiết kế website cung cấp dịch vụ nội dung từ khóa quan tâm Bạn sử dụng dịch vụ để trình marketing đạt hiệu cao Tương tác với khách hàng Đa số người truy cập vào website bạn họ quan tâm đến sản phẩm tính mà trang web cung cấp Và hiển nhiên họ có thắc mắc, yêu cầu đơn giản bạn nên chuẩn bị sẵn sàng để đáp ứng trả lời Các mục thơng tin dành cho khách hàng, e-book miễn phí giải thích sản phẩm, cơng cụ hỗ trợ trực tuyến, video trực tuyến, khóa đào tạo online, tin … phần cần thiết nhằm giúp khách hàng hiểu doanh nghiệp bạn Bạn thiết lập diễn đàn dành riêng cho khách hàng danh sách địa email họ để gửi thông tin khuyến mãi, phiếu giảm giá, hàng mẫu … cho họ Tích hợp phương tiện truyền thơng mạng xã hội Ngày nay, phương tiện truyền thông xã hội tích hợp vào website ngày nhiều bạn nên khai thác tính để đem lại hiệu cao cho việc kinh doanh Nó thúc đẩy q trình SEO, cải thiện khả thị nội dung sản phẩm, tăng lượng truy cập đồng thời làm tăng thứ hạng tìm kiếm cho trang web bạn Ví dụ: like share comment Facebook, share Google +, Twitter… Bảo mật thơng tin khách hàng Có website an toàn đáng tin cậy điều cần thiết bạn rao bán sản phẩm đơn thúc đẩy webiste Các hình thức mã hóa SSL, VeriSign, Trust E, Entrust, GeoTrust,…