10 HTML Templates For 404 Error Page

Lỗi 404 (404 error) là một trong các thông báo lỗi rất phổ biến, nhằm thông tin cho người dùng khi một địa chỉ Web không được tìm thấy. Ngày nay hầu hết các trang web đều tùy chỉnh lại trang báo lỗi 404 này để tránh trường hợp khiến người dùng khó chịu chỉ với một thông báo lỗi mặc định như thế này

Ý tưởng về 404 xuất phát từ một căn phòng được đánh số 404 – đó là nơi đặt các máy chủ đầu tiên của web tại CERN.

Chắc chắn là chúng ta đã đi một chặng đường dài kể từ đó. Các nhà thiết kế web đã và đang thêm màu sắc vào world wide web theo cả nghĩa bóng và nghĩa đen. Giờ đây, chúng ta đang sống trong một thế giới mà 404 trang được tạo ra để trở nên sáng tạo và thú vị. Các trang này thậm chí đôi khi hoạt động như một linh vật cho trang web chính của bạn và hướng lưu lượng truy cập đến nó.

Bải viết này xin chia sẻ cho các webmaster 10 mẫu thiết kế trang báo lỗi 404 với nhiều phong cách và màu sắc khác nhau

  1. Flipping Book

Khái niệm ở đây cộng hưởng với tên của trang web là FlippingBook. Trang lỗi 404 này kể cho bạn câu chuyện về một cặp vợ chồng bị mất một trang từ cuốn sách trong một gia đình hỗn loạn. Sự tương phản màu xanh và trắng đơn giản với một vài biến thể màu sắc tinh tế dường như không quá nặng nề.

2. Behance.net

Việc thiết kế một trang lỗi lấy cảm hứng từ một trong những chương trình truyền hình nổi tiếng và được yêu thích nhất trong thời gian gần đây đã là một việc làm khó.

Đối với bất kỳ người hâm mộ thứ lạ nào, trang này sẽ đưa họ trở lại trạng thái ‘lộn ngược’ và khiến họ cảm thấy như họ thuộc về một cộng đồng khá phổ biến. Và mọi người đều thích ‘thuộc về’ một nơi nào đó.

3. CSS- Tricks

Trang lỗi này là một trong những mục yêu thích của tôi. Bạn có thể thấy không có từ nào như 404, lỗi, không tìm thấy, v.v. Thực tế là không có văn bản nào theo nghĩa thông thường.

Tuy nhiên, không một người nào sử dụng một trang web như các thủ thuật CSS lại không hiểu được ý nghĩa của trang này. Đây là một trang lỗi rất cụ thể về miền và gợi nhớ đến những gì mà trang web viết tắt, đó là ngôn ngữ tạo kiểu web CSS.

4. Kwarter

Trang lỗi đầu tiên bắt đầu với việc khiến bạn cảm thấy có lỗi khi truy cập vào một liên kết hỏng bằng cách hỏi bạn bằng các chữ cái in đậm – ARE YOU HAPPY NOW? Nhưng ngay lập tức chuyển hướng bằng cách nhận lỗi về mình, hiển nhiên từ cụm từ – Our bad

5. Magnt

Trang này với sự trợ giúp của Sơ đồ Venn giải thích khái niệm 404, sau đó tiếp tục giải thích sơ đồ Venn là gì cho những người không yêu thích toán học. Việc sử dụng quá nhiều văn bản trên trang này được bù đắp bởi thông tin phong phú được cung cấp.

6. Marvel

Tôi biết bạn đang nghĩ đến Avengers, nhưng Marvel này là một ứng dụng web và thiết bị di động nhé.

Với hình ảnh động dễ thương, quyến rũ và văn bản đơn giản, marvel đã tạo ra một trang lỗi tuyệt vời cho trang web của họ.

7. Blue Fountain Media

Khách truy cập trang web này có hai lựa chọn. Anh ta có thể quay lại hoặc chọn chơi một phiên bản của trò chơi huyền thoại Pacman. Trò chơi được định hình một cách thích hợp trong con số 404.

8. EmailCenterUk.com

EmailCenterUK đã thực sự đổi mới với trang lỗi 404 của họ. Ngay sau khi bạn truy cập trang web của họ, bạn có thể điều hướng đến các phần khác của trang web hoặc, nín thở, bạn hầu như có thể sa thải một thành viên của nhóm phát triển. Rõ ràng là một trò đùa đang diễn ra, đây là một cách tuyệt vời để khuyến khích sự tương tác của người dùng trên trang web của họ. Có một thông báo giúp bạn quay lại trang chủ nếu bạn đang có tâm trạng tha thứ 😀

9. Amazon

Trang 404 này sẽ không đầy đủ nếu không có hình ảnh một chú chó đáng yêu.
Bạn có thể Điều hướng trở lại trang chủ, tìm kiếm nội dung nào đó trên trang web.

À quên đề cập đến, bạn có thể gặp tất cả những chú chó của Amazon. Lại là một phương pháp tương tác người dùng tuyệt vời.

10. Medium

Làm sao chúng ta có thể bỏ lại trang web yêu thích hàng ngày đọc tài liệu của mình nhỉ? Medium sử dụng phông chữ đậm để nhấn mạnh 404, cho phép bạn tìm kiếm lựa chọn các bài báo khác mà bạn muốn đọc.