Giới Thiệu Thiết Kế Website



A. Thiết Kế Website Là Gì?


Thiết kế website là thiết kế web của nhà thiết kế web để tạo website thích hợp cho người sử dụng, người sử dụng là các khách hàng, họ có thể là cá nhân, tổ chức, doanh nghiệp, trường học, chính phủ, ... và để chỉ ra quá trình thiết kế một website bao gồm các kỹ thuật thiết kế, các kỹ năng thiết kế, được hỗ trợ bởi các phần mềm thiết kế, các phần mềm hỗ trợ thiết kế, các công cụ kiểm tra. Thiết kế website bao gồm các nghề như đồ họa website; thiết kế giao diện gồm có giao diện người dùng như giao diện người dùng máy tính, giao diện người dùng máy tính bảng, giao diện người dùng điện thoại di động, trải nghiệm người dùng, giao diện đồ họa người dùng; tối ưu hóa công cụ tìm kiếm ... thông qua sử dụng phần chồng chéo kỹ thuật website trong phạm vi phát triển web rộng hơn. Khi một website được hoàn thành nó sẽ đạt các tiêu chí như tại định nghĩa website.


B. Các Yêu cầu Cơ Bản Để Thiết Kế Website


1. Các công cụ và công nghệ

Thiết kế website sử dụng các công cụ như Visual Studio, Photoshop, ... các công cụ hỗ trợ như Office, NotePad, ... tùy thuộc vào phần nào của quá trình thiết kế đang diễn ra mà công cụ được sử dụng thích hợp, các công cụ này được cập nhật theo thời gian bởi các tiêu chuẩn và phiên bản phần mềm mới hơn.

Các công nghệ tiên tiến nhất được sử dụng để tạo website bao gồm các tiêu chuẩn W3C như HTML và CSS, có thể sử dụng để viết bằng tay hoặc được tạo bởi phần mềm chỉnh sửa WYSIWYG, công nghệ .NET như ASP.NET để thiết kế website dựa trên nền tảng khung làm việc .Net Framework. Các công cụ website khác có thể sử dụng bao gồm công cụ đánh dấu Validator và các công cụ kiểm tra khác để đảm bảo khả năng sử dụng và truy cập của website trên web.

2. Các kỹ năng và kỹ thuật


a. Thiết kế marketing và truyền thông

Thiết kế tiếp thị và truyền thông trên website để xác định những gì làm cho thị trường mục tiêu, cũng như các khách hàng. Đây có thể là một nhóm tuổi hoặc một chuỗi văn hóa đặc biệt, nhờ đó thiết kế có được ưu thích của thị trường và nắm bắt được xu hướng khách hàng.

Thiết kế website cũng được hiểu theo thể loại, ví dụ: các cân nhắc về thiết kế website doanh nghiệp tới doanh nghiệp (b2b) có thể khác nhiều so với website nhắm mục tiêu khách hàng (b2c) như website bất động sản hoặc bán lẻ. Việc cân nhắc cẩn thận được thực hiện để đảm bảo thiết kế tổng thể hoặc tính thẩm mỹ không xung đột với độ chính xác của nội dung hoặc tính dễ điều hướng, danh tiếng của chủ sở hữu hoặc doanh nghiệp mà website đại diện cũng được xem xét cân nhắc để có các mô tả thích hợp.

b. Thiết kế trải nghiệm người dùng và tương tác người dùng

Hiểu biết của người dùng về nội dung của website thường phụ thuộc vào sự hiểu biết của người dùng về cách website hoạt động, đây là một phần của thiết kế trải nghiệm người dùng.

Trải nghiệm người dùng có liên quan đến bố cục, chỉ dẫn rõ ràng và nhãn đề trên website để người dùng hiểu rõ cách họ có thể tương tác trên website, và điều này cũng có thể phụ thuộc vào thiết kế tương tác người dùng, thậm chí là tương tác người - máy. Nếu người dùng thấy được tính hữu ích của website, họ có nhiều khả năng tiếp tục sử dụng nó.

Người dùng có kỹ năng và thông thạo với việc sử dụng website có thể tìm thấy giao diện website thân thiện hơn, nhưng ít trực quan hơn hoặc ít thân thiện với người dùng hơn. Tuy nhiên, người dùng có ít kinh nghiệm thì ít có khả năng thấy lợi thế hoặc tính hữu ích của giao diện website ít trực quan hơn. Điều này chính là cơ sở để thúc đẩy thiết kế trải nghiệm người dùng phổ biến hơn và dễ truy cập để phù hợp với nhiều người dùng nhất có thể bất kể kỹ năng của người dùng.

Trên các trang có thể sử dụng các nhúng sẵn có như AdThis, comment của Facebook hay Google, ... để tạo giao tiếp người dùng. Điều này cho phép tiết kiệm thời gian và chi phí cũng như yêu cầu về mã lập trình nâng cao.

c. Bố cục

Bố cục là cách sắp xếp và bày đặt nội dung trên site, trên một website sẽ có các thành phần chính như header, footer, menu, nội dung chính. Header luôn luôn ở đầu trang và chứa logo ở góc trên cùng bên trái; footer luôn luôn ở cuối trang chứa thông tin liên hệ; menu, thanh điều hướng nằm kế cạnh nội dung bên trái hoặc phải, menu chính nằm trên nội dung; các nội dung quan trọng nhất nằm ở chính giữa.

Có 3 cách định kích cỡ bố cục cho site:

Bố cục cố định

Website có chiều rộng cố định thường có cùng chiều rộng đặt để khớp trên cửa sổ trình duyệt phổ biến, ở độ phân giải màn hình phổ biến, trên kích thước màn hình phổ biến. Hầu hết các trang được căn giữa cho các mối quan tâm về thẩm mỹ trên màn hình cỡ lớn hơn. Chiều rộng pixel của trang được coi là quan trọng để căn chỉnh, định cỡ các đối tượng trong thiết kế bố cục.

Bố cục tương đối

Đây là kiểu bố cục linh hoạt hơn, website được thiết kế với chiều rộng không cố định, kích thước của các khối trong bố cục có thể thay đổi cho phù hợp với cửa sổ trình duyệt, kích thước màn hình.

Bố cục đáp ứng

Một cách tiếp cận mới hơn trong thiết kế bố cục, dựa trên CSS3 và mức độ sâu hơn của khai báo cho mỗi thiết bị trong định kiểu của website thông qua việc sử dụng CSS @media nâng cao.

d. Đồ họa

Đồ họa là hình ảnh hoặc thiết kế trực quan trên bề mặt, nó là đại diện hình ảnh của nội dung dữ liệu. Đồ họa có thể được tạo bằng các phần mềm như Adobe Photoshop, với các sử lý đơn giản thì sử dụng MS Paint.

Thiết kế đồ họa bắt đầu với những điều cơ bản là màu sắc, minh họa, thao tác hình ảnh, sau đó phát triển các kỹ năng thông qua phát triển và thực hiện thực tiễn trước khi chọn một cách thiết kế tập trung hơn, cách tiếp cận truyền thống các vấn đề như thiết kế layout, thiết kế xuất bản, thiết kế nghệ thuật, những giá trị tốt hơn có thể xem thêm đồ họa website.

Hình ảnh sử dụng cho website thường có phần mở rộng là .jpg, .png, .gif, .bmp

e. Chất lượng mã

Được coi là thực hành tốt để phù hợp với tiêu chuẩn, và được thực hiện thông qua một bản mô tả mã xác định những gì các yếu tố đang làm. Hiểu về từng dòng mã và các biến, mọi thứ được kết hợp lại với nhau để chương trình làm việc, đảm bảo chương trình làm việc hợp cách, có độ mạnh để hoạt động trên môi trường có nhiều ngôn ngữ lập trình khác nhau.

Tiêu chuẩn liên quan đến bố cục cho website để có khả năng đọc, các phần tử mã được đóng một cách phù hợp cũng như được đánh giá cao bởi các công cụ tìm kiếm. Điều này bao gồm bố cục cho mã có tổ chức hơn nhờ sắp xếp thẻ, đảm bảo các id, thuộc tính, loại được xác định đúng. Xác nhận thông qua phần mềm W3C Validator để kiểm tra website phù hợp với các tiêu chuẩn web, chắc chắn tất cả các trang web được kiểm tra trước khi xuất bản.

3. Nghề nghiệp

Có hai giá trị liên quan đến tạo website là thiết kế website và phát triển web, tuy chúng có những mức độ nặng nhẹ, quan trọng, áp dụng khác nhau nhưng gắn kết chặt chẽ với nhau trên một website.

Nhân viên thiết kế website sẽ đảm trách các khía cạnh bố cục, màu sắc, phông chữ, kích cỡ, hình ảnh, ... của website, nhân viên có kiến thức làm việc về các ngôn ngữ đánh dấu như HTML và CSS, mức độ hiểu biết giữa các nhân viên là khác nhau. Trưởng nhóm sẽ cần đến các kỹ năng cần thiết để thiết kế lập trình web đầy đủ.

Các nghề nghiệp khác là một phần hoặc liên quan đến việc tạo website bao gồm:
  1. Thiết kế đồ họa để tạo trực quan cho site như logo, các thanh, các nút, ...
  2. Viết SEO nghiên cứu và đề cử các từ khóa đúng để phù hợp với từng site cụ thể và làm website dễ tiếp cận và tìm thấy hơn trên các công cụ tìm kiếm.
  3. Thiết kế trải nghiệm người dùng liên quan đến các khía cạnh của người sử dụng được tập trung vào các cân nhắc thiết kế bao gồm kiến trúc thông tin, thiết kế căn giữa người dùng, kiểm tra người dùng, thiết kế tương tác, thiết kế trực quan cơ hội.
  4. Chuyên gia tiếp thị marketing giúp duy trì hiện diện của website thông qua các giải pháp chiến lược cho các khách mục tiêu đến site, bằng cách sử dụng các kỹ thuật xúc tiến và marketing trên internet.
  5. Viết bài internet tạo bài viết chuẩn SEO để thu hút khách mục tiêu của site.

4. Địa điểm

Thiết kế website được thực hiện tại các địa điểm thông qua văn phòng thiết kế web hoặc được thực hiện trên cloud.

a. Văn phòng

Văn phòng thiết kế web có các máy tính để bàn, máy tính xách tay cài đặt sẵn các công cụ thiết kế website, nhân viên thiết kế website làm việc tại văn phòng sẽ sử dụng các máy tính có cài đặt sẵn các công cụ để thiết kế website chuyên nghiệp.

b. Cloud

Thiết kế website trên cloud được thực hiện thông qua các phần mềm thiết kế website trực tuyến, thường được dùng để thiết kế các website tĩnh hoặc miễn phí.


C. Tạo Website


Có hai cách website được tạo ra: tĩnh và động

1. Website tĩnh

Thiết kế website tĩnh tạo ra tệp duy nhất được lưu trữ có phần mở rộng là .html hoặc .htm cho mỗi trang của website. Trên trang chỉ sử dụng các đoạn mã HTML, hình ảnh, CSS, ... trong thiết kế website tĩnh không sử dụng hệ cơ sở dữ liệu MS SQL.

Ưu điểm:
- Trang nhẹ hơn, tải nhanh hơn
- Đơn giản hơn để lưu trữ
- Yêu cầu quản trị máy chủ ít hơn và ít để lộ lỗ hổng bảo mật

Do các trang được tạo từng lần theo cách thủ công khi thiết kế, website tĩnh có nhược điểm:
- Khó thay đổi giao diện một cách đồng bộ
- Không có khả năng tương tác web

Trong thiết kế website tĩnh, Đồng Thế mở rộng đến khả năng một số website được thiết kế dựa trên nền mã nguồn mở của hệ quản trị nội dung đang được ưa chuộng và thịnh hành như Drupal, Joomla, Wordpress, ... chúng có ưu điểm dành cho những người không nhất thiết phải biết lập trình mã mà vẫn có thể tạo được website.

2. Website động

Thiết kế website động là thiết kế chính và việc thiết kế được thực hiện bằng cách sử dụng ngôn ngữ lập trình ASP.NET (C#) để tạo trang, các trang có phần mở rộng là .aspx. Website động sử dụng hệ cơ sở dữ liệu MS SQL để cung cấp thông tin cho các trang.

Trong quá trình thiết kế, các trang động thường được giả lập hoặc wireframe sử dụng các trang tĩnh. Các kỹ năng cần thiết để thiết kế các trang động là rộng hơn nhiều so với các trang tĩnh, liên quan đến phía máy chủ, viết mã cơ sở dữ liệu cũng như thiết kế giao diện phía máy khách.

Ưu điểm:
- Khả năng quản lý dữ liệu website tốt
- Khả năng tương tác trên hệ thống web
- Dễ dàng cập nhật nội dung bằng công cụ quản trị site
- Cho phép xây dựng các ứng dụng chức năng

Thiết kế trang chủ

Thiết kế trang chủ là điểm nhấn cho sự thành công của website, nó là trang quan trọng nhất trên một website.

Banner xoay hoặc Slide trượt là yếu tố thiết kế phổ biến trên trang chủ, thường được sử dụng để giới thiệu nội dung nổi bật hoặc gần đây và được đặt phía dưới menu chính, khu vực chính của trang chủ sẽ là nơi để trưng bày các sản phẩm đặc trưng nhất.

Tuy nhiên không thể không kể đến các trang nội dung nơi khách viếng thăm sẽ tới, sẽ có những cân nhắc quyết định hành động liên hệ mua hay không sau khi khách đã đọc qua các trang nội dung của website.


D. Tham Khảo


- W3C
- AWDP