Nội dung chính
Thiết kế trang web
Google ClassroomTừ đầu chương đến giờ, bạn đã học cách lập trình trang web. Tuy nhiên, bạn chưa được hướng dẫn cách thiết kế để có một trang web đẹp. Dĩ nhiên, trang web đẹp hay không phụ thuộc vào tiêu chuẩn của mỗi người. Tuy nhiên, trong bài đọc này, chúng tôi sẽ giới thiệu cho bạn một số mẹo và lời khuyên để thiết kế trang web sao cho tốt nhất!
Bên cạnh việc thiết kế được một trang web có giao diện đẹp, chắc hẳn bạn cũng muốn trang web của mình trông thật khác biệt so với những trang web khác nhằm thu hút người dùng.
Việc thiết kế sao cho trang web vừa đẹp vừa độc đáo là một nhiệm vụ rất khó khăn. Trang web của bạn có thể trở nên độc nhất vô nhị nếu bạn chèn sọc vằn đen trắng lên mọi thứ và sử dụng phông chữ có mật độ điểm ảnh là 64. Nhưng liệu bạn có nên làm vậy không? Câu trả lời hẳn là không nên.
Lựa chọn phông chữ phù hợp
Ở chế độ mặc định, các trình duyệt hiển thị trang web với nhóm phông chữ chung Serif để tạo được cảm giác trang trọng. Bạn có thể thay đổi sang nhóm phông chữ chung Sans-serif hoặc một nhóm phông chữ phổ biến trên máy tính như Garamond hay Helvetica.
Để giúp trang web của bạn trông độc đáo hơn, bạn cũng có thể sử dụng phông chữ tùy chỉnh của riêng trang web. Ví dụ, Khan Academy sử dụng phông chữ Lato thuộc nhóm phông chữ chung Sans-serif:
Sử dụng phông chữ của trang web thực chất là yêu cầu trình duyệt của người dùng tải tệp phông chữ về máy tính để trang web có thể tham chiếu đến tập tin phông chữ đó bằng CSS. Vì đây là phần trình duyệt cần tải thêm nên bạn không nên sử dụng quá nhiều phông chữ, đồng thời không thêm phông chữ nào mà bạn không có ý định sử dụng. Bạn có thể tham khảo các phông chữ của trang web miễn phí tại Google Web Fonts và xem trang web ví dụ trên Khan Academy có sử dụng hai phông chữ từ nguồn đó.
Dù lấy phông chữ từ nguồn nào, bạn cũng cần đề phòng trường hợp quá tải phông chữ. Nhìn chung, bạn không nên sử dụng nhiều hơn hai hoặc ba nhóm phông chữ trên một trang web và các phông chữ nên phù hợp với nhau. Bạn có thể truy cập Fontpair để xem ví dụ về các phông chữ thuộc Google Web Fonts phù hợp với nhau.
Lựa chọn màu sắc phù hợp
Khi thiết kế trang web, bạn cần lập một bảng màu bao gồm các màu sắc tương thích với nhau và có thể được sử dụng để tô những phần khác nhau thuộc trang web của bạn. Những màu sắc trong bảng màu có thể được chọn dựa trên biểu tượng công ty, chủ đề trang web hoặc chỉ đơn giản là những màu phù hợp khi đặt cạnh nhau.
Trong trường hợp bạn cần trợ giúp khi lập bảng màu và đã chọn sẵn một số màu làm cơ sở, bạn có thể sử dụng Paletton, một công cụ giúp bạn trực quan hóa nhiều kiểu phối màu khác nhau như phối màu đơn sắc, phối ba màu, phối màu liền kề và phối màu theo hình chữ nhật.
Nếu đang bắt đầu từ con số 0, bạn có thể tham khảo các bài viết trên COLOURLovers, một cộng đồng dành cho những người yêu màu sắc và muốn đóng góp các ý tưởng về màu sắc, bảng màu và họa tiết. Dưới đây là bảng màu có tên gọi Giant Goldfish:
Khi đã chọn được bảng màu, bạn sẽ phải chuyển sang phần việc khó hơn, đó là chọn màu cho từng phần trên trang web. Các tiêu đề, đường liên kết, văn bản và nền của trang web nên có màu gì? Đây chính là lúc Paletton phát huy tác dụng. Công cụ này có thể cho bạn xem trước phiên bản trang web đã áp dụng bảng màu, ví dụ như:
Trước khi dịch bảng màu đã chọn thành quy tắc CSS, hãy cân nhắc một số vấn đề sau:
- Nếu bạn thay đổi định dạng của đường liên kết quá nhiều so với mặc định, người dùng có thể sẽ không nhận ra đó là đường liên kết nữa.
- Màu sắc của văn bản và nền cần tương phản vừa đủ sao cho người dùng không gặp khó khăn khi đọc. Bạn có thể kiểm tra màu sắc bằng trình kiểm tra màu tương phản.
- Đối với những người bị mù màu, một số tập hợp màu sắc sẽ không đủ tương phản để họ có thể nhận diện được văn bản, vì vậy hãy kiểm tra màu sắc bạn sử dụng bằng trình mô phỏng mù màu.
Nếu bạn không chắc chắn về cách sử dụng bảng màu, hãy hỏi ý kiến của bạn bè với các câu hỏi như: Họ có đọc được mọi thứ trên trang web không? Họ có nhận ra đâu là phần tử có thể bấm vào không? Có màu sắc nào gây khó chịu không? Họ yêu thích màu sắc nào trên trang web?
Sử dụng khoảng trắng phù hợp
Theo nhận định của một nhà thiết kế làm việc tại Google, bí quyết làm nên thiết kế trang web thành công chính là khoảng trắng!
Thuật ngữ "khoảng trắng" dùng để chỉ bất kỳ khoảng không gian trống nào nằm giữa các phần tử. Trong CSS, khoảng trắng đến từ những thuộc tính như "padding", "margin" và "line-height".
Khoảng trắng có ảnh hưởng lớn đến trang web, giúp cho trang web có giao diện đẹp và dễ đọc hơn. Ý thức được tầm quan trọng của khoảng trắng, những nhà thiết kế web đôi khi phải dành hàng giờ để căn chỉnh khoảng trắng sao cho chính xác.
Sau đây là ví dụ so sánh phần giới thiệu của khóa học được thiết kế có và không có khoảng trắng:
Thật khó để đặt ra quy tắc cố định mà chỉ có thể chú ý về vấn đề khoảng trắng này khi thiết kế trang web. Hãy cân nhắc khoảng cách giữa hai phần tử. Nếu một phần tử có nền hoặc đường viền thì hãy cân nhắc khoảng cách giữa vùng đệm và đường viền. Khi tạo các đoạn văn bản và danh sách, hãy cân nhắc liệu văn bản có dễ đọc hơn khi tăng chiều cao dòng chữ hay không.
Bắt đầu từ mẫu thiết kế và bộ khung sẵn có của trang web
Sau khi đọc những hướng dẫn trên, bạn có thể cảm thấy áp lực, đặc biệt là khi bạn coi bản thân là người không giỏi thiết kế đồ họa. Nhưng đừng lo lắng, bạn không cần phải là chuyên gia thiết kế để tạo nên một trang web có giao diện đẹp. Thay vào đó, bạn có thể bắt đầu với một mẫu thiết kế hoặc bộ khung trang web sẵn có. Hãy tận dụng thành quả của những người đi trước, từ đó học hỏi và phát triển trang web của riêng mình.
Một mẫu thiết kế thường có giao diện tương tự như trang web hoàn chỉnh và chứa nội dung giả lập với mã nguồn được lập trình sẵn bằng HTML và CSS. Bạn có thể tham khảo các mẫu thiết kế trang web tại W3Schools hoặc tìm kiếm "mẫu thiết kế trang web miễn phí" trên mạng. Sau khi tải về mẫu thiết kế, bạn có thể thay nội dung của mình vào và chỉnh sửa các quy tắc CSS theo nhu cầu.
Bộ khung CSS là một tập hợp các quy tắc CSS và bạn có thể xây dựng trang web của mình dựa vào bộ khung đó. Có rất nhiều bộ khung CSS giúp bạn dễ dàng thiết kế một trang web có giao diện bắt mắt như Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat, v.v. Bạn có thể tham khảo các ví dụ từ Twitter Bootstrap và ZURB foundation ngay trên Khan Academy.
Sau khi đã tải về một bộ khung CSS, bạn có thể nghiên cứu phần tài liệu tham khảo để tìm ví dụ, xem các mẫu thiết kế, qua đó xác định được tên lớp CSS nào có thể giúp bạn định dạng trang web như mong muốn.
Khi bạn sử dụng mẫu thiết kế và bộ khung sẵn có, trang web thành phẩm của bạn có thể mang giao diện y hệt một trang web khác, từ đó giảm độ thu hút đối với người dùng. Để tránh trường hợp này xảy ra, hãy bổ sung logo của riêng bạn cũng như thay đổi các phần tử quan trọng như nhóm phông chữ hay màu nền trang web để làm nổi bật cá tính.
Tham gia cuộc thảo luận?
Chưa có bài đăng nào.