Bài viết này đi chuyên sâu kỹ thuật, các chuyên môn mà người học thiết kế web cần nắm, cũng như các thành phần cần có để thiết kế web chuẩn.
Giao diện là môt khâu quan trọng trong thiết kế web
Website được hiển thị trên màn hình cho mọi người xem và phục vụ mục đích xem thông tin của người truy cập. Vì là xem, hầu hết chỉ là xem web, do vậy thiết kế web luôn cần đến tính bố cục và thẩm mỹ để thu hút được người xem và cũng là để người sử dụng thấy tiện lợi, thoải mái.
Làm sao có giao diện có tính thẩm mỹ và bố cục tốt
Nếu bạn tìm được những người có khả năng thiết kế đồ họa, thiết kế giao diện bằng công cụ đồ họa, bạn có thể thuê họ.
Có rất nhiều website trên thể giới để những người có khả năng thiết kế giao diện trưng bày và bán giao diện của họ. Ví dụ như dribbble.com, themeforest.net... bạn có thể tìm tới đó để tham khảo và mua lại giao diện.
Làm sao để chuyển giao diện đồ họa trở thành trang web
Có một điều đặc biệt trong thế giới thiết kế web, là giao diện về chức năng khá giống ốp lưng điện thoại, có thể gắn vào nhiều hệ thống khác nhau. Tất nhiên thì để chúng ráp được vào với nhau cũng cần bổ sung một vài khớp nối cần thiết.
Vật liệu để tạo nên giao diện web cơ bản chính là:
html
css
javascript
Sau khi tìm hiểu cơ bản, dân tình thường sử dụng framework bootstrap để nhanh chóng và tiện lợi trong việc làm web. Trên đây là những thứ cơ bản nhất để bạn làm giao diện trong thiết kế web, và tiếp sau theo đó học cách ghép nối giữa giao diện và bộ máy web.
Có cách nào nhanh hơn không
Có, kết hợp với các template cung cấp hoặc bán kèm theo trong các opensource như wordpress, bạn chỉ cần kéo thả các vùng layout, chọn giao diện, màu sắc. Dù vậy vẫn cần chút ít kiến thức về html, css, js để chỉnh sửa lại cho phù hợp.
Cấu trúc và các vấn đề cần lưu tâm khi thiết kế web
XiroWeb liệt kê những đầu dòng liệt kê các vấn đề có liên quan để đảm bảo website hoạt động đạt hiệu suất, tốt độ, SEO...
- Các trang page và chức năng có thể có
- Thành phần chung
- Logo + favicon
- Menu và vùng header
- Footer chân trang
- Cart module - Cart Widget
- Button động (Zalo, Call, Chat...)
- Trang chủ
- Slide trang chủ
- Module ( widget) tin tức
- Mới nhất
- Cũ nhất
- Xem nhiều nhất
- Cùng danh mục
- Lựa chọn theo yêu cầu riêng
- Dịch vụ chính
- Module - Widget sản phẩm
- Module - Widget danh sách khách hàng
- Module - Widget đội ngũ nhân viên
- Các vùng thông tin khác
- Trang danh mục tin
- Trang chi tiết từng bài viết
- Trang danh mục sản phẩm
- Trang chi tiết sản phẩm
- Trang giỏ hàng + Thanh toán
- Trang liên hệ
- Trang giới thiệu
- Thành phần chung
- Giao diện
- Layout (mỗi trang một layout)
- Responsive (mỗi trang và thành phần đều phải có thành phần tương ứng)
- Giao diện Mobile
- Giao diện Tablet
- Giao diện Desktop và màn hình rộng
- Hệ thống bên dưới (không yêu cầu, bổ sung khi cần thiết)
- Cấu hình SEO on page
- Mỗi cấu hình tương ứng với từng trang và từng chi tiết trang như liệt kê bên trên
- SSL
- Cấu hình đường dẫn thân thiện (slug / alias)
- Cache
- Cấu hình SEO on page
- Tối ưu chuyên nghiệp
- Open graph
- Insert code js for ads
- Analytics
- Webmaster
- Tag code analytics
- APM
- Sitemap xml
- snippet schema.org
- Tính năng phụ trợ
- Like & share
- Comment
- Các tính năng sâu bên trong từng thành phần (rất nhiều, nên không liệt kê ở đây)
- Các tính năng cao cấp
- Tài khoản, đăng ký, đăng nhập, xác thực, login, login with facebook, login with google
- Phân chia hệ thống làm việc, phân quyền
- Các chức năng riêng cho từng hệ thống, cho từng user
- Thiết kế mở rộng UI/UX
- Landing page
Học thiết kế web cũng lưu tâm
Tùy theo khả năng, việc thiết kế web có thể sử dụng các open souce php như wordpress, joomla, drupal, opencart, magento...
Các opensource các ngôn ngữ khác như KeystoneJs, Ghost, Strapi, Django...
Hoặc tự xây dựng hệ thống từ các framework như Laravel, Zend, Angular, React...
Dù bạn có học thiết kế web với hệ thống nào đi nữa, thì các vấn đề triển khai trên cũng sẽ xuất hiện và buộc bạn phải lưu ý. Nếu được vậy, việc thiết kế web về tổng thể sẽ chuẩn hơn nhiều.
Tác giả bài viết:
Nguyễn Tiến Dũng
Business vector created by pikisuperstar - www.freepik.com
Dustin Dũng có 15 năm kinh nghiệm làm việc với PHP, SQL, Đã thực hiện qua các dự án với Joomla!, Wordpress, Opencart, PrestaShop, Magento. Với Joomla!, Dustin Dũng có hơn 15 năm kinh nghiệm, từ Mambo, rồi Joomla 1.0 và bây giờ là Joomla! 5