Trang web của bạn sẽ trông như thế nào? Phần này sẽ đề cập về việc lên kế hoạch cho những gì bạn phải làm trước khi bắt tay vào viết code, ví dụ như "Trang web của bạn có những thông tin gì?", "Bạn muốn font chữ và màu sắc chủ đạo cho trang web là gì?" hay "Trang web của bạn dùng để làm gì?".

Lên kế hoạch

Trước khi bạn làm bất cứ điều gì, bạn cần phải có ý tưởng. Trang web của bạn có thể làm gì? Một trang web có thể làm mọi thứ, nhưng bạn nên bắt đầu từ những thứ căn bản nhất. Chúng ta sẽ bắt đầu trang web căn bản với heading (tiêu đề), một tấm hình, và một vài đoạn văn bản. 

Để bắt đầu, chúng ta cần trả lời những câu hỏi sau: 

  1. Trang web của bạn nói về chủ đề gì? Bạn thích chó, New York hay Pacman?
  2. Trang web của bạn bao gồm những thông tin gì? Viết tiêu đề, một vài đoạn văn bản và tìm một tấm hình mà bạn muốn để lên trang web của bạn. 
  3. Trang web của bạn sẽ trông như thế nào, một cách tổng quát nhất. Màu nền là màu gì? Phông chữ như thế nào là phù hợp? Trịnh trọng, mang tính chất hoạt hình vui nhộn, to và rõ ràng, hay tinh tế. 

Chú ý: Những trang web phức tạp thì cần một kế hoạch chi tiết hơn bao  gồm cách tổ chức màu sắc khác nhau, phông chữ, khoảng cách giữa các mục, cách viết phù hợp, v.v... Những chi tiết này được ghi lại trong design guide (hướng dẫn thiết kế) hoặc brand book (sổ tay thương hiệu). Bạn có thể xem ví dụ sau đây: Firefox OS Guidelines.

Phác thảo trang web

Tiếp theo, dùng bút và giấy phác thảo căn ?bản trang web của bạn. Cho một trang web đơn giản, bạn không cần phải đòi hỏi quá cao ở bản phác thảo nhưng bạn nên tập thói quen luôn phác thảo trước khi làm một trang web. Nên nhớ, bạn không cần phải là Van Gogh! 

Chú ý: Trên thực tế, ở những trang web phức tạp, đội thiết kế thường bắt đầu với những bản nháp phác thảo trên giấy, sau đó mới xây dựng những mô hình kỹ thuật số sử dụng trình thiết kế đồ hoạ và công nghệ web

Những đội Web luôn bao gồm một thợ thiết kế đồ hoạ một thợ thiết kế user-experience (UX) . Thợ thiết kế đồ hoạ, tất nhiên, sẽ phối ngẫu các hiệu ứng hình ảnh của trang web. Thợ thiết kế UX có một vài loại mô hình trừu tượng dẫn dắt cách mà người dùng trải nghiệm và tương tác với trang web.

Chọn tài nguyên của bạn

 

Đây là thời điểm tốt để gom những nội dung mà bạn đã đã chuẩn bị vào trang web

 

Chữ

Bạn vẫn nên có những đoạn văn và tiêu đề chuẩn bị từ trước. Giữ chúng ngay cạnh bạn

Màu nền

Để chọn một màu, hãy vào Color Picker và tìm một màu bạn thích. Khi nhấp chuột lên một màu, bạn sẽ thấy một mã sáu ký tự thế này #660066. Nó được gọi mà một mã hex(adecimal), và nó đại diện cho màu của bạn. Giờ hãy ghi lại đoạn mã đó vào đâu đó an toàn.

Hình ảnh

Để chọn một ảnh, hãy vào Google Images và tìm thứ gì phù hợp

  1. Khi tìm thấy ảnh mà bạn muốn, click lên nó.
  2. Chọn nút View image .
  3. Ở trang kế, chuột phải lên ảnh (Cmd + click trên máy Mac), chọn Save Image As..., và chọn một nơi an toàn để lưu ảnh của bạn. Hoặc thay vì làm thế, hãy lưu lại địa chỉ web từ thanh địa chỉ của trình duyệt để dùng sau này.

Chú ý: Hầu hết các ảnh trên Mạng, kể cả ở Google Images, đều có bản quyền. Nếu tránh phải vi phạm bản quyền, bạn có thể dùng bộ lọc giấy phép của Google. Chỉ cần 1) bấm vào Search tools, rồi chọn 2) Usage rights:

Chú ý 2: Từ ngày 15 tháng 2 năm 2018, Google đã gỡ bỏ nút View Image. Giải pháp thay thế cho việc này là dùng Bing Images (Duckduckgo/ Yahoo đều trả kết quả tới Bing). Ngoài ra có thể dùng Baidu hoặc Yandex.

Phông chữ

Để chọn một phông:

  1. Hãy vào Google Fonts và cuộn danh sách xuống đến khi bạn thấy cái mình thích. Bạn cũng có thể sử dụng bảng điều chỉnh bên phải để lọc kết quả.
  2. Click biểu tượng "cộng" (thêm vào) bên cạnh phông chữ mà bạn muốn.
  3. Click nút  "* Family Selected" trong bảng ở dưới cùng trang ("*" Phụ thuộc vào bao nhiêu phông chữ mà bạn đã chọn).
  4. Trong cửa sổ bật lên, bạn có thể thấy và copy dòng code của Google cho bạn để lưu lại sử dụng sau

Document Tags and Contributors

Những người đóng góp cho trang này: daonhut, thanhNamDuong, PurpleLover, summerpupil, LuongNgocHien, trannguyenhb, Thokaka92
Cập nhật lần cuối bởi: daonhut,