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 công ty thiết kế website để tạo website chạy trên World Wide Web phù hợp cho khách hàng (khách hàng có thể là cá nhân, tổ chức, doanh nghiệp, cộng đồng, chính phủ, tổ chức phi lợi nhuận, ...), quá trình thiết kế web sử dụng các công cụ thiết kế, các công nghệ thiết kế cùng với các kỹ thuật thiết kế, các kỹ năng thiết kế và cần thêm các nghề như đồ họa website, thiết kế giao diện người dùng, thiết kế trải nghiệm người dùng, tác giả, SEO, tiếp thị internet, ... dựa trên phần chồng chéo kỹ thuật website trong phạm vi phát triển web rộng hơn.


B. Các Yêu Cầu 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 để thiết kế 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 W3C 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ỹ thuật và kỹ năng

a. Bố cục

Bố cục là cách sắp xếp và bày đặt nội dung trên website, trên một website sẽ có các phần cơ bản như header, footer, menu chính, nội dung. 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 chính nằm trên nội dung, side navigation nằm kế cạnh nội dung bên trái hoặc phải; 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 website:

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.

b. Typography

Typography không đơn giản chỉ là một phông chữ đẹp mà nó còn là tính thẩm mỹ khi nhìn trực quan vào bất kỳ từ ngữ nào. Từ cách bố trí từ ngữ cho đến khoảng cách, kích cỡ, căn lề, độ dài dòng chữ, khoảng cách giữa các dòng và tất cả để tạo lên một thiết kế Typography tuyệt đẹp, truyền đạt.

c. Đồ 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.

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

d. 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.

g. Thiết kế cấu trúc và điều hướng

Website được sắp xếp tốt hay không là dựa vào thiết kế cấu trúc, cấu trúc các URL thân thiện thông qua sử dụng các từ trong URL. Tạo cấu trúc thư mục đơn giản, tên thư mục chỉ định loại nội dung thư mục.

Thiết kế điều hướng để người sử dụng dễ tìm thấy nội dung mong muốn, được hỗ trợ bởi trang sơ đồ và tệp sơ đồ. Có biện pháp tốt cho thiết kế điều hướng là sử dụng cấu trúc phân tầng trôi chẩy một cách tự nhiên và sử dụng các văn bản để điều hướng. Trang 404 hữu ích sẽ chỉ dẫn người dùng khi người dùng truy nhập vào các trang không tồn tại trên website.

e. 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.

3. Địa điểm

Công ty thiết kế website hoạt động tại các địa điểm thực hiện công việc thông qua văn phòng thiết kế web hoặ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ế web cho khách hàng.

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í.

4. Chi phí

a. Chi phí cố định

Các khoản đầu tư cần thiết để hoạt động như mua sắm máy tính, thiết bị văn phòng, bản quyền phần mềm công cụ, kết nối internet, ...

b. Chí phí biến đổi

Các khoản chi phí dùng cho khách hàng, bạn hàng thiết kế website. Các khoản chi phí biến đổi sẽ phụ thuộc vào mức độ nhu cầu của thị trường đối với dịch vụ website của công ty.

5. Tài trợ

Những ủng hộ từ bạn bè, người hâm mộ sẽ tạo quan hệ và khả năng chứa mục tiêu người dùng cho website.

6. Nghề nghiệp

Có hai nhân lực liên quan đến tạo website là nhân viên thiết kế website và nhân viên phát triển web, tuy đảm trách các phần công việc theo những mức độ nặng nhẹ, quan trọng khác nhau nhưng họ sẽ kết hợp chặt chẽ với nhau trên một website, nhân viên thiết kế website là chính và nhân viên phát triển web là phụ.

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ư HTML và CSS, mức độ hiểu biết giữa các nhân viên là khác nhau, khả năng cấp cao sẽ cần đến các trình độ 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 công việc tạo website bao gồm:
  1. Thiết kế đồ họa để tạo trực quan cho website như logo, các thanh, các nút, ...
  2. 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 người dùng, thiết kế trực quan cơ hội.
  3. Tác giả internet tạo nội dung bằng văn bản của trang dựa trên nội dung khách hàng cung cấp để thu hút khách xem mục tiêu cho website.
  4. Nhân viên SEO nghiên cứu và đề cử các từ khóa đúng để phù hợp với từng trang cụ thể, 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.
  5. 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 hàng mục tiêu, bằng cách sử dụng các kỹ thuật tiếp thị, xúc tiến trên internet.

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, công ty 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 viết ngôn ngữ lập trình 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.


D. Tham Khảo


1. Các tiêu chuẩn thiết kế web của W3C
- W3C consortium for web standards

2. Các cộng đồng thiết kế web trên thế giới
- Association of Web Design Professionals
- Behance
- Dribbble