Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Kids
Webdesign

Thiết kế Web cho Trẻ em: Khái niệm Cơ bản về Thiết kế

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Images
Web Design for Kids: Typography

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Chào mừng đến với bài học thứ tám trong loạt bài Thiết kế Web cho Trẻ em của chúng tôi, "khái niệm cơ bản về thiết kế"!

Trong suốt loạt bài này chúng ta đã tập trung vào việc mang một thiết kế đi vào cuộc sống, nhưng chúng ta vẫn chưa nói về các quyết định lựa chọn thiết kế đó. Trong bài hướng dẫn này chúng tôi sẽ hướng dẫn bạn một số khái niệm thiết kế cơ bản, đó là một phần quan trọng tạo nên một trang web tốt.

Đừng quên hỏi bất kỳ câu hỏi nào trong phần bình luận ở dưới cùng của trang này!

Người dùng

Một thứ khác mà chúng ta đã nói rất nhiều về nó cho đến nay là người dùng (hoặc khách truy cập). Mọi quyết định mà chúng ta thực hiện trong thiết kế web và mọi khái niệm thiết kế mà chúng ta đề cập đến trong hướng dẫn này, tất cả có cùng một mục tiêu: để làm cho các trang web càng dễ sử dụng và dễ hiểu càng tốt.

Người dùng có hài lòng?

Thiết kế chủ yếu xoay quanh việc giải quyết các vấn đề. Nếu những người dùng thấy khó sử dụng trang web của chúng ta thì họ sẽ dễ dàng bỏ đi. Công việc của chúng ta là loại bảo bất kỳ khó khăn nào cho họ, làm cho trang web dễ dàng để đọc và cung cấp cho họ một trải nghiệm tổng thể thật sự thú vị. Các quyết định của chúng ta liên quan đến những thứ như nội dung, tổ chức, bố cục, không gian trống, đồ họa, màu sắc và typography (kỹ thuật trình bày văn bản).

Nội dung

Nội dung là phần quan trọng nhất của thiết kế web. Vấn đề không phải là trang web của chúng ta trông đẹp thế nào mà chúng ta không có nội dung mà người dùng muốn đọc. Một điều chúng ta có thể tự hỏi chính mình khi muốn xây dựng một trang web là "Mọi người cần điều này chứ?", và nếu như vậy, "thông tin gì là cần thiết?".

Có thể tạm thời thêm càng nhiều nội dung có thể trên một trang web. Làm gọn gàng và thu hẹp xuống độ rộng nội dung sẽ thực sự giúp người dùng tiếp nhận được thông tin hơn, bởi vì những gì quan trọng sẽ không bị lạc hướng trên trang.

Quản lý nội dung và Bố cục

Một khi chúng ta có sẵn nội dung thì chúng ta cần tổ chức nó theo các mục, hoặc các nhóm có liên quan, vì thế mà người dùng có thể tìm thấy mọi thứ mà không gặp vấn đề gì.

Trang web tốt nhất sẽ trải đều một cách tự nhiên và đảm bảo người dùng không phải nghĩ quá nhiều về vị trí của các thứ.

Trang web Tuts+ Town không có nhiều nội dung, vì vậy chúng ta có thể canh giữa mọi thứ và nhấn mạnh các tấm hình đáng yêu của chúng ta. Tuy nhiên, nếu chúng ta có nhiều văn bản hơn trên trang, thì bố cục cụ thể này có thể không hoạt động tốt.

Trực quan

Để đảm bảo trang web của chúng ta dễ dàng điều hướng và gây hứng thú đối với người dùng chúng ta cần nghĩ về cái nhìn và cảm nhận của nó. Đây là nơi dành cho các tấm hình, thứ bậc (làm rõ các thứ quan trọng thế nào so với những thứ khác), kỹ thuật trình bày văn bản, và màu sắc.

Đồ hoạ và Hình ảnh

Ở thời điểm hiện tại chúng ta biết tất cả về việc sử dụng các hình ảnh trên trang web. Chúng ta đã thêm bốn tấm hình vào trang Tuts+ Town của chúng ta và tìm hiểu qua các kiểu hình ảnh khác nhau để sử dụng trên web trong bài hướng dẫn trước.

Khi nào và nơi đâu để sử dụng những hình ảnh và đồ họa cũng là điều quan trọng phải suy nghĩ. Tất cả các hình ảnh được thêm vào trang web Tuts+ Town của chúng ta có ý nghĩa khi đặt bên cạnh với nội dung. Ví dụ: trang web của chúng ta là về Tuts + Town, vì vậy chúng ta có một hình ảnh gọn gàng ở đầu của một tòa nhà quan trọng trong thành phố của chúng ta. Ba hình ảnh theo sau liên quan đến các nhóm kinh doanh bên cạnh chúng: khách sạn, nhà hàng và cửa hàng mua sắm nói chung.

Chúng ta sử dụng những hình ảnh này để cung cấp cho người dùng một cảm giác tốt hơn về cảm nhận đối với thị trấn, cũng như khu mua sắm sẽ giống như trong các tòa nhà đẹp đẽ của chúng ta. Điều quan trọng là chúng ta không làm phân tâm người dùng bằng một hình ảnh không có liên quan gì đến nội dung.

Các biểu tượng

Các biểu tượng là những đối tượng đồ hoạ nhỏ được sử dụng để trình bày một thứ gì đó.

Một biểu tượng tốt là dễ hiểu và có thể làm cho việc tìm kiếm các thông tin quan trọng trên một trang web nhanh hơn rất nhiều.

Dưới đây là một số ví dụ về các biểu tượng đặc biệt hữu ích:

Bạn có biết các biểu tượng này có ý nghĩa thật sự là gì?

Có rất nhiều thứ mà chúng ta có thể giao tiếp mà không cần sử dụng văn bản mà sử dụng các biểu tượng thay thế cho văn bản trong tình huống hợp lý sẽ cho chúng ta có một trang web gọn gàng hơn, dễ dàng hơn để sử dụng.

Hệ thống phân cấp

Hệ thống phân cấp xoay quanh việc lựa chọn những gì nổi bật và chỉ ra mối quan hệ giữa các thông tin. Hệ thống phân cấp của các bộ phận của một trang web có thể được hiển thị thông qua một số lựa chọn phong cách khác nhau, chẳng hạn như: màu sắc, kích cỡ, sử dụng không gian trống, và định vị trí. Tất cả các lựa chọn này sẽ giúp nói cho người dùng biết những gì là thật sự quan trọng, những gì không phải là quan trọng và những thông tin nào liên quan.

Hệ thống phân cấp không chỉ được hiển thị bởi kích thước của văn bản và hình ảnh của chúng ta, mà còn bởi khoảng cách của chúng so với những cái khác. Nội dung tương tự nên được nhóm gần với nhau và cách khoảng với nội dung không liên quan.

Hình ảnh này của Tuts+ Town đã được thiết kế để đảm bảo rằng các quả bóng hướng sự chú ý của người xem trước tiên, theo sau là những đám mây. Mọi thứ khác trong các hình ảnh đã được làm cho ít rõ ràng hơn để đảm bảo rằng quả bóng và những đám mây nổi bật hơn.

Hình ảnh ở trên cho thấy một sự thay đổi trong việc chúng ta tập trung vào điều gì trước tiên. Bạn có nhận thấy là lần này bạn nhìn thấy những đám mây đầu tiên, sau đó là quả bóng không?

Rất nhiều thứ đang xảy ra trong tấm hình này và chúng ta hơi bối rối khi lần đầu tiên nhìn vào. Không có sự thay đổi màu sắc, không có tổ chức, và không có khoảng trống để nói cho chúng ta cái gì là quan trọng, tạo cho nó một chút khó khăn để theo dõi.

Khoảng trắng

Khoảng trắng là không gian trống trên một trang; mặc dù nó không nghĩa là trắng! Đó là những điểm nơi mà không có văn bản và không có hình ảnh. Nơi mà chúng ta chọn để có không giang trống này là thật sự quan trọng bởi vì nó xác định những phần nào của một trang web nổi bật và cách mà chúng ta có thể đọc tốt nội dung.

Hình ảnh trên là một ví dụ về một trang web mà không sử dụng khoảng trắng tốt. Có nhiều nội dung và hình ảnh và không đủ không gian giữa tất cả chúng để hiển thị cho chúng ta thông tin nào là quang trọng nhất.

Vì vậy, hãy xem liệu chúng ta có thể làm cho nó gọn gàng hơn không!

Tốt hơn nhiều rồi. Chúng ta loại bỏ một số nội dung không có nghĩa và tạo một sự phân cấp với nhiều khoảng trắng và tổ chức tốt hơn, làm cho nó dễ dàng hơn để đọc.

Khoảng trắng Tuts+ Town

Khoảng trắng mà chúng ta sử dụng trong trang Tuts+ Town của chúng ta thì thật sự là màu vàng.

Chúng ta có các điểm không gian trống ở bên phải và trái của trang, cũng như giữa các tấm hình.  Không gian này giúp chúng ta làm nổi bật nội dung của chúng ta trong khi vẫn đảm bảo không có nhiều thứ ngổn ngang.

Hãy nhớ! Điều quan trọng là nghĩ về những gì không có cũng như có ở trên trang web, và đó là nơi mà khoảng trắng bắt đầu có tác dụng.

Kỹ thuật trình bày văn bản và Màu sắc

Kỹ thuật trình bày văn bản và màu sắc là rất quan trọng đối với thiết kế web mà chúng sẽ có các bài hướng dẫn về chúng sau bài này, vì vậy chúng ta sẽ chỉ tìm hiểu nhanh về chúng ở đây.

Kỹ thuật trình bày (Typography) là một phần của kiểu lựa chọn và sắp xếp theo một cách mà làm cho nó càng lôi cuốn và càng dễ đọc nhất có thể. Vì trang web Tuts+ Town của chúng ta không có nhiều văn bản, nên thực sự đã có rất nhiều suy nghĩ khi bắt đầu lựa chọn phông chữ và bố trí của nó.

Chọn màu sắc cũng là một phần thực sự mạnh mẽ của thiết kế. Màu sắc có ý nghĩa và có thể giúp cung cấp cho người dùng những cảm giác nhất định về nhãn hiệu hoặc trang web. Màu sắc của Tuts+ Town giúp tạo ra một sự vui vẻ và cảm giác được chào đón cho thành phố của chúng ta.

Nhưng một lần nữa, chúng ta sẽ nói thêm nhiều về những điều này sớm thôi!

Tổng kết

Trong hướng dẫn này, chúng ta đã đề cập đến một số khái niệm thiết kế thực sự quan trọng. Sau khi chúng ta đã có nội dung, chúng ta cần trình bày nội dung này cho người dùng của chúng ta theo những cách dễ nhất, có trật tự nhất có thể.

Thiết kế chủ yếu xoay quanh việc tạo ra những thứ dễ dàng và thú vị cho mọi người. Chúng ta đã đạt được điều này với trang web Tuts+ Town của chúng ta thông qua bố cục, hình ảnh, màu sắc và khoảng trắng.

Tiếp theo chúng ta sẽ thảo luận về typography, nghệ thuật lựa chọn và sắp xếp văn bản; một trong những phần thú vị và vui nhộn nhất của thiết kế.

Hẹn gặp bạn trong thị trấn!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.