We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

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 đạon 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ì? Font 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ạc chi tiết hơn bao  gồm các màu sắc sử dụng khác nhau, font 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 (quyển sách 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 căn bản, bạn không cần phải đòi hỏi 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! 

Note: Trong 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 để ném 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 the Color Picker và tìm một màu bạn thích. Khi clich 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. Ghi lại đoạn mã đó vào đâu đấy an toàn ngay bây giờ.

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 (Ctrl + 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.

Note: Hầu hết các ảnh trên Mạng, kể cả ở Google Images, đều có bản quyền. To reduce your likelihood of violating copyright, you can use Google's license filter. Just 1) click on Search tools, then on 2) Usage rights:

Phông chữ

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

  1. Hãy vào Google Fonts 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 voà 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: summerpupil, LuongNgocHien, trannguyenhb, Thokaka92
Cập nhật lần cuối bởi: summerpupil,