Thiết kế web cho người mới bắt đầu Cheat Sheet - núm vú

Theo Lisa Lopuck

Thiết kế web có thể đòi hỏi về mặt kỹ thuật, nhưng không đánh giá thấp tầm quan trọng của các khía cạnh thị giác. Các trang web của bạn trông như thế nào - cho dù bạn đang trình bày thông tin thuần túy hay bổ sung các công cụ điều hướng - có ảnh hưởng lớn đến thời gian khách truy cập ở lại trên các trang web của bạn. Vì vậy, nó trả tiền để chú ý đến các yếu tố thiết kế để đạt được hương vị đồ họa tốt.

Mẹo thiết kế web cơ bản

Khi thiết kế các trang web, bạn cần phải suy nghĩ trực quan. Một trang web được thiết kế với sự cân bằng tốt về đồ hoạ và văn bản làm bạn hài lòng, thu hút sự chú ý của người xem, và giữ nó. Thiết kế web tốt phụ thuộc vào nghệ sĩ - trong trường hợp này, bạn - theo các nguyên tắc thiết kế nhất định:

• Thiết kế giao diện trang web phù hợp với 800 x 600 pixel đầu tiên để nội dung quan trọng có thể nhìn thấy khi trang đầu tiên tải. Mặc dù hầu hết các màn hình hiện đại đều lớn hơn nhiều, nhiều người duyệt Internet thông qua máy tính xách tay và các thiết bị.

• Đạt được sự bố trí cân bằng bằng cách thiết kế không quá ba điểm: Sử dụng chiến lược "lớn, trung bình, nhỏ".

• Tránh sử dụng phông chữ nhỏ hơn 10 điểm (tùy thuộc vào phông chữ).

• Sử dụng phông chữ hệ thống máy tính tiêu chuẩn cho tất cả các văn bản HTML, hoặc chắc chắn để nhúng một phông chữ đặc biệt bằng CSS hoặc công nghệ khác.

Hình dưới đây đặt các nguyên tắc này vào thực tiễn:

Các mẹo Thiết kế Web cho Đồ họa

Đồ họa là một phần rất lớn của thiết kế web. Việc biết và sử dụng các tiêu chuẩn và định dạng cho các loại đồ hoạ web khác nhau có thể có nghĩa là sự khác biệt giữa một trang web thu hút sự chú ý và một trong những trình duyệt lướt qua. Sử dụng các mẹo này để đảm bảo rằng các phần tử trực quan của bạn bị bắt giữ trực quan:

• Tạo tất cả các đồ hoạ web với độ phân giải 72 dpi, độ phân giải hiển thị chuẩn của web.

• Để có được hiệu suất tải xuống tốt nhất, hãy lưu đồ hoạ có kết hợp văn bản, đồ họa bằng phẳng và ảnh, chẳng hạn như tệp được hiển thị dưới đây dưới dạng các tệp GIF bảng màu thích ứng sử dụng ít màu nhất có thể.

  Lưu tất cả hình ảnh thuần túy như các tệp JPEG. (Các tệp PNG hoạt động tốt nhưng thường lớn hơn trong kích thước tệp)

• Luôn hiển thị đồ họa chống aliased sử dụng độ trong suốt màu đơn (như GIF) trên màu nền chính xác; nếu không, bạn sẽ thấy một quầng sáng không hay xung quanh.

• Để đạt được sự chuyển đổi mềm mại từ hình ảnh sang nền trong suốt, hãy sử dụng định dạng PNG. Định dạng PNG hỗ trợ độ trong suốt kênh alpha.

  

Các mẹo thiết kế web để trình bày thông tin

Khi bạn thiết kế các trang web, hãy nghĩ đến đồ hoạ ngay cả khi tất cả những gì bạn đưa ra đều là thông tin thuần túy.Thiết kế trang web tốt có nghĩa là bạn cung cấp thông tin bằng cách tổ chức nó một cách hợp lý và làm cho nó trở nên hấp dẫn. Sử dụng các mẹo dưới đây để giữ cho mắt trình duyệt trên trang thông tin của bạn:

• Đối với các trang web lớn, ưu tiên và điều hướng nhóm vào một nhóm chính, thứ cấp và thứ ba, mỗi nhóm có không quá 5 đến 7 lựa chọn hàng đầu.

• Lý tưởng để xây dựng trang web của bạn với không quá ba cấp độ: Ý tưởng chính, chủ đề và phụ đề.

• Chọn một tập các ký hiệu tiêu chuẩn cho bản đồ trang web. Sử dụng hộp để đại diện cho các trang, hình trụ biểu trưng cho các cơ sở dữ liệu, và sau đó kết nối tất cả mọi thứ cùng với đường kẻ và các mũi tên.

• Tạo wireframes cho mỗi bố cục trang duy nhất trong trang web của bạn để chi tiết thiết kế tương tác và hiển thị nội dung. Điều quan trọng là họ không truyền đạt bất cứ điều gì có thể được misconstrued như là một cái nhìn trực quan thiết kế. Họ nên ở lại tốt đẹp và nhàm chán. Wireframes chỉ hoạt động như là một sơ đồ xem bố cục và tương tác trang của bạn, giống như trình bày ở đây:

  

Các mẹo Thiết kế Web cho Công cụ Điều hướng

Trong thiết kế web, hãy xem xét các hình ảnh khi bạn đưa công cụ điều hướng đưa khách truy cập từ trang đến trang. Khi thiết kế công cụ chuyển hướng trang web, bạn cần phải làm cho chúng hấp dẫn cũng như chức năng. Những mẹo này có thể giúp bạn làm điều đó:

• Phân biệt thiết kế trực quan của các phần tử không thể nhấp và có thể nhấp. Ví dụ: không sử dụng cùng một hình ảnh như một nút trên một trang và một tiêu đề trên một trang khác. Hoặc, đừng nhấn mạnh các tiêu đề và tô màu chúng như liên kết nếu chúng chỉ là các tiêu đề.

  Sử dụng thiết kế trực quan và phản hồi để tăng cường tương tác và khả năng sử dụng. Ví dụ: bạn có thể thay đổi màu, kích thước hoặc hình của mặt hàng khi di chuột qua. (Hình dưới đây cho thấy thay đổi màu sẽ như thế nào.)

• Luôn luôn đặt điều hướng ở cùng vị trí trên trang và không thay đổi hình dạng của nó.

• Luôn gắn nhãn biểu tượng. Bản thân minh họa không phải lúc nào cũng rõ ràng về chức năng của họ.