MinhTrang
CTV Nữ
Thử nghiệm và tạo ra những sai lầm là một phần quan trọng trong học tập. Mỗi năm trong công việc của tôi là một giảng viên đại học, tôi thấy các sinh viên tạo ra cùng một loại sai lầm trong công việc thiết kế web của họ. Hy vọng rằng bằng cách xác định những vấn đề ở đây, chúng ta có thể học cách tránh chúng tốt hơn.
1. Thiếu tầm nhìn tổng thể
Mỗi trang web tồn tại vì một lý do, cho dù đó là truyền đạt thông tin, cung cấp giải trí, bán một sản phẩm hoặc dịch vụ hay cho phép người dùng thực hiện một nhiệm vụ. Tất cả các phần tử trên trang cần phải hoạt động để phục vụ cho mục đích này.
Nhìn qua thiết kế của bạn: chức năng của mỗi phần tử phải rõ ràng, và bất cứ thứ gì không hỗ trợ mục đích này cần được loại bỏ. Những thứ có thể nhấp được cần phải giống như chúng có thể nhấp được - cho dù đó là thông qua các cút click được gạch chân hay tạo kiểu hoặc một hệ thống hình ảnh khác, chính là phải nhất quán.
Bạn nên chủ ý tạo ra một hệ thống phân cấp thị giác rõ ràng, do đó người dùng có thể dễ dàng quét trang và chọn ra thông tin quan trọng hoặc các chức năng. Các giai điệu và kiểu dáng của trang của bạn nên phản ánh mục đích của trang web, nhưng nội dung mới là phần quan trọng nhất của thiết kế. Nếu trang web của bạn ở đó để quảng bá kỹ năng của bạn như là một nhà thiết kế web, có lẽ chúng ta không cần phải nghe về niềm đam mê của bạn cho việc thu thập tem? Hãy suy nghĩ về lý do tại sao người dùng đã đến trang web và bạn muốn họ làm gì khi họ đến đó. Cẩn thận xem xét cách bạn tổ chức thông tin và chức năng - ví dụ: không cần thiết phải phá vỡ một trang thành nhiều trang nếu nó hoạt động tốt hơn như một trang duy nhất.
2. Thất bại vì chạy theo xu hướng
Thật thú vị khi theo kịp xu hướng, nhưng điều quan trọng hơn là phải tuân thủ nguyên tắc thiết kế cốt lõi. Ví dụ, áp phích Olympic cổ điển từ giữa thế kỷ 20 vẫn còn tuyệt vời ngày hôm nay, trong khi nhiều trang web 'Web 2.0' của skeuomorphic đầu những năm 2000, với bevel của họ và kính hiệu ứng, đã nhìn rõ sự lỗi thời.
Chìa khóa là gắn với các nguyên tắc của kiểu chữ, hình ảnh và cách bố trí, chứ không phải là sử dụng vô nghĩa các biểu tượng vô nghĩa hoặc các hiệu ứng CSS và Photoshop theo cảm tính. Đôi khi cần ít hơn và chỉ vì bạn có thể tạo ra một hình ảnh động jarel hoặc hiệu ứng cuộn song song, điều đó không có nghĩa là bạn nên làm.
Không ai được sinh ra với gu thẩm mĩ tuyệt đối tốt (tôi chắc chắn sẽ không yêu cầu để có nó!) Và thẩm mĩ, tất nhiên, là ý kiến chủ quan. Nhưng bằng cách phơi bày ra những thứ được thiết kế tốt, chúng tôi chắc chắn có thể đạt được một sự đánh giá cao về thiết kế tốt hơn xấu, và hy vọng nhìn thấy những sai lầm trong công việc của chúng ta dễ dàng hơn.
3. Xử lí văn bản kém
Sinh viên thường làm văn bản quá nhỏ. Kích thước phông chữ HTML mặc định xuất phát từ thời điểm trang web phải tính đến người dùng máy tính để bàn với màn hình phân giải 800x600, nhưng trong kỷ nguyên của thiết bị di động và màn hình độ phân giải cao, chúng tôi có thể nghĩ lớn hơn. Các nhà thiết kế như Jeffrey Zeldman đã chỉ ra rằng kích thước phông chữ lớn có thể làm việc tốt cho văn bản đoạn văn.
Đừng quên kiểm tra cách trang web của bạn xem xét một loạt các văn bản và sử dụng các truy vấn media CSS để điều chỉnh nếu cần. Tiêu đề nên được lớn hơn đáng kể so với đoạn văn bản. Cũng đảm bảo rằng bạn cung cấp đủ không gian dọc giữa các dòng văn bản. Trong kiểu chữ, khoảng cách này được gọi là 'khoảng cách giữa các dòng', và trong CSS được điều khiển bởi 'line-height'. Giá trị mặc định đặt các đường thẳng gần nhau, điều này có thể có nghĩa là người đọc sẽ mất đi vị trí đang theo dõi của họ, khi mắt họ di chuyển xuống trang. Hãy thử sử dụng giá trị lớn hơn 50% so với kích thước phông chữ của bạn, ví dụ: 36px cho văn bản 24px.
Đảm bảo rằng bạn để lại khoảng trống 'khoảng trắng' xung quanh văn bản - điều này chỉ có nghĩa là không gian trống trên trang giúp phân biệt các phần tử và dẫn mắt xung quanh trang. Đảm bảo rằng bạn giới hạn chiều rộng của các cột văn bản để bạn không có quá nhiều từ cho một dòng - điều này cũng giúp đảm bảo người đọc không bị mất vị trí khi mắt chuyển từ cuối dòng đến đầu của dòng tiếp theo. Nói chung, trung bình khoảng 10 từ cho một dòng là hoạt động tốt nhất.
Hạn chế hai hoặc ba phông chữ và tránh sử dụng hình ảnh như các dịch vụ văn bản như Google Fonts và Typekit cho phép truy cập vào một loạt phông chữ web. Đảm bảo rằng có đủ độ tương phản giữa màu văn bản và màu nền - thường văn bản tối trên nền sáng là tốt nhất. Văn bản sáng trên nền tối cũng có thể hoạt động, nhưng có thể được xem là nam tính, lạnh hoặc không mời gọi. Các công cụ trực tuyến như Adobe Kuler có thể giúp bạn chọn một lược đồ màu trang nhã. Tránh các hình nền nền tương phản cao có thể làm lẫn lộn hình chữ.
4. Các lỗi về photography
Sai lầm phổ biến nhất ở đây có vẻ là các sinh viên chọn kích thước ảnh quá nhỏ trên trang, có nghĩa là làm chúng mất đi vai trò của mình. Hình ảnh có chiều rộng của trình duyệt hoàn chỉnh (ví dụ như trên Treehouse) mang lại cảm giác "bóng bẩy" hiệu quả hơn, giống như một tạp chí in. Đồng thời đảm bảo rằng nhiếp ảnh bạn chọn truyền đạt thông điệp mà trang web của bạn đang cố truyền đạt và bạn có quyền hợp pháp sử dụng nó. Các trang web chụp ảnh stock cung cấp lựa chọn hình ảnh tuyệt vời, nhưng hãy chắc chắn tránh xa những bức ảnh quá phổ thông' bạn sẽ tìm thấy ở đó. Nếu bạn đang sử dụng nhiếp ảnh của riêng mình, hãy chắc chắn rằng bạn điều chỉnh màu sắc và độ tương phản để đảm bảo nó trông rất đậm và không bị rửa trôi, nhưng vẫn trông tự nhiên.
5. Bỏ lại những điều chưa hoàn thành hoặc bị lỗi
Một nhà thiết kế chuyên nghiệp sẽ không bao giờ cố ý để lại một cái gì đó chưa hoàn thành hoặc bị hỏng trên một trang web công cộng. Các cơ quan thiết kế lớn hơn có thể có nhóm chuyên gia đảm bảo chất lượng (Quality Assurance) để phát hiện ra những sai lầm, nhưng khi bắt đầu, điều này phụ thuộc vào bạn. Gọi một người bạn để giúp đọc bằng chứng và kiểm tra thiết kế của bạn. Đáng ngạc nhiên là cặp mắt thứ hai có thể nhìn thấy được!
Tìm kiếm liên kết đến các trang không tồn tại, 'hình ảnh bị hỏng', bố cục thiếu ổn định, các kiểu không xuất hiện và lỗi chính tả. Chú ý đến chi tiết là chìa khóa. Nếu bạn đã cố gắng để thực hiện một cái gì đó, nhưng bạn không thể làm cho nó làm việc, đưa nó ra! Nếu bạn có lỗi rõ ràng trên trang của mình, mọi người sẽ chỉ nhìn thấy lỗi và bỏ lỡ thông điệp của bạn.
Và dĩ nhiên, đừng tạo ra lỗi đơn giản như để lại tiêu đề trang như 'Tài liệu Không Tên' hoặc để lại văn bản giữ chỗ trên trang! Nhưng không ai trong chúng ta làm điều đó, đúng không ?!
1. Thiếu tầm nhìn tổng thể
Mỗi trang web tồn tại vì một lý do, cho dù đó là truyền đạt thông tin, cung cấp giải trí, bán một sản phẩm hoặc dịch vụ hay cho phép người dùng thực hiện một nhiệm vụ. Tất cả các phần tử trên trang cần phải hoạt động để phục vụ cho mục đích này.
Nhìn qua thiết kế của bạn: chức năng của mỗi phần tử phải rõ ràng, và bất cứ thứ gì không hỗ trợ mục đích này cần được loại bỏ. Những thứ có thể nhấp được cần phải giống như chúng có thể nhấp được - cho dù đó là thông qua các cút click được gạch chân hay tạo kiểu hoặc một hệ thống hình ảnh khác, chính là phải nhất quán.
Bạn nên chủ ý tạo ra một hệ thống phân cấp thị giác rõ ràng, do đó người dùng có thể dễ dàng quét trang và chọn ra thông tin quan trọng hoặc các chức năng. Các giai điệu và kiểu dáng của trang của bạn nên phản ánh mục đích của trang web, nhưng nội dung mới là phần quan trọng nhất của thiết kế. Nếu trang web của bạn ở đó để quảng bá kỹ năng của bạn như là một nhà thiết kế web, có lẽ chúng ta không cần phải nghe về niềm đam mê của bạn cho việc thu thập tem? Hãy suy nghĩ về lý do tại sao người dùng đã đến trang web và bạn muốn họ làm gì khi họ đến đó. Cẩn thận xem xét cách bạn tổ chức thông tin và chức năng - ví dụ: không cần thiết phải phá vỡ một trang thành nhiều trang nếu nó hoạt động tốt hơn như một trang duy nhất.
2. Thất bại vì chạy theo xu hướng
Thật thú vị khi theo kịp xu hướng, nhưng điều quan trọng hơn là phải tuân thủ nguyên tắc thiết kế cốt lõi. Ví dụ, áp phích Olympic cổ điển từ giữa thế kỷ 20 vẫn còn tuyệt vời ngày hôm nay, trong khi nhiều trang web 'Web 2.0' của skeuomorphic đầu những năm 2000, với bevel của họ và kính hiệu ứng, đã nhìn rõ sự lỗi thời.
Chìa khóa là gắn với các nguyên tắc của kiểu chữ, hình ảnh và cách bố trí, chứ không phải là sử dụng vô nghĩa các biểu tượng vô nghĩa hoặc các hiệu ứng CSS và Photoshop theo cảm tính. Đôi khi cần ít hơn và chỉ vì bạn có thể tạo ra một hình ảnh động jarel hoặc hiệu ứng cuộn song song, điều đó không có nghĩa là bạn nên làm.
Không ai được sinh ra với gu thẩm mĩ tuyệt đối tốt (tôi chắc chắn sẽ không yêu cầu để có nó!) Và thẩm mĩ, tất nhiên, là ý kiến chủ quan. Nhưng bằng cách phơi bày ra những thứ được thiết kế tốt, chúng tôi chắc chắn có thể đạt được một sự đánh giá cao về thiết kế tốt hơn xấu, và hy vọng nhìn thấy những sai lầm trong công việc của chúng ta dễ dàng hơn.
3. Xử lí văn bản kém
Đừng quên kiểm tra cách trang web của bạn xem xét một loạt các văn bản và sử dụng các truy vấn media CSS để điều chỉnh nếu cần. Tiêu đề nên được lớn hơn đáng kể so với đoạn văn bản. Cũng đảm bảo rằng bạn cung cấp đủ không gian dọc giữa các dòng văn bản. Trong kiểu chữ, khoảng cách này được gọi là 'khoảng cách giữa các dòng', và trong CSS được điều khiển bởi 'line-height'. Giá trị mặc định đặt các đường thẳng gần nhau, điều này có thể có nghĩa là người đọc sẽ mất đi vị trí đang theo dõi của họ, khi mắt họ di chuyển xuống trang. Hãy thử sử dụng giá trị lớn hơn 50% so với kích thước phông chữ của bạn, ví dụ: 36px cho văn bản 24px.
Đảm bảo rằng bạn để lại khoảng trống 'khoảng trắng' xung quanh văn bản - điều này chỉ có nghĩa là không gian trống trên trang giúp phân biệt các phần tử và dẫn mắt xung quanh trang. Đảm bảo rằng bạn giới hạn chiều rộng của các cột văn bản để bạn không có quá nhiều từ cho một dòng - điều này cũng giúp đảm bảo người đọc không bị mất vị trí khi mắt chuyển từ cuối dòng đến đầu của dòng tiếp theo. Nói chung, trung bình khoảng 10 từ cho một dòng là hoạt động tốt nhất.
Hạn chế hai hoặc ba phông chữ và tránh sử dụng hình ảnh như các dịch vụ văn bản như Google Fonts và Typekit cho phép truy cập vào một loạt phông chữ web. Đảm bảo rằng có đủ độ tương phản giữa màu văn bản và màu nền - thường văn bản tối trên nền sáng là tốt nhất. Văn bản sáng trên nền tối cũng có thể hoạt động, nhưng có thể được xem là nam tính, lạnh hoặc không mời gọi. Các công cụ trực tuyến như Adobe Kuler có thể giúp bạn chọn một lược đồ màu trang nhã. Tránh các hình nền nền tương phản cao có thể làm lẫn lộn hình chữ.
4. Các lỗi về photography
5. Bỏ lại những điều chưa hoàn thành hoặc bị lỗi
Một nhà thiết kế chuyên nghiệp sẽ không bao giờ cố ý để lại một cái gì đó chưa hoàn thành hoặc bị hỏng trên một trang web công cộng. Các cơ quan thiết kế lớn hơn có thể có nhóm chuyên gia đảm bảo chất lượng (Quality Assurance) để phát hiện ra những sai lầm, nhưng khi bắt đầu, điều này phụ thuộc vào bạn. Gọi một người bạn để giúp đọc bằng chứng và kiểm tra thiết kế của bạn. Đáng ngạc nhiên là cặp mắt thứ hai có thể nhìn thấy được!
Tìm kiếm liên kết đến các trang không tồn tại, 'hình ảnh bị hỏng', bố cục thiếu ổn định, các kiểu không xuất hiện và lỗi chính tả. Chú ý đến chi tiết là chìa khóa. Nếu bạn đã cố gắng để thực hiện một cái gì đó, nhưng bạn không thể làm cho nó làm việc, đưa nó ra! Nếu bạn có lỗi rõ ràng trên trang của mình, mọi người sẽ chỉ nhìn thấy lỗi và bỏ lỡ thông điệp của bạn.
Và dĩ nhiên, đừng tạo ra lỗi đơn giản như để lại tiêu đề trang như 'Tài liệu Không Tên' hoặc để lại văn bản giữ chỗ trên trang! Nhưng không ai trong chúng ta làm điều đó, đúng không ?!
