Сторінка 404 – найкращі практики та натхнення для дизайну
Якщо ви ще не знайомі з цим терміном, сторінка помилки 404 – це сторінка, завдання якої полягає в сповіщенні користувача про те, що посилання, до якого вони намагалися отримати доступ, пошкоджене або не існує. Зайве говорити, що отримання результату сторінки помилки 404 дратує кожного користувача, який стикається з нею.
Щоб зробити це явище трохи стерпнішим для користувачів, багато дизайнерів веб-сторінок взяли на себе завдання налаштувати свою сторінку помилки 404 так, щоб вона виглядала більш «веселішою» та унікальною. Зазвичай вони роблять це, додаючи гумор, дотепність і дизайн, який містить творчу оригінальність на своїй сторінці.
Якщо ви також плануєте розробити власну сторінку 404 таким чином, то перегляд деяких прикладів уже створених на замовлення сторінок 404 може послужити вам гарним натхненням. Тому ми вирішили поділитися списком дотепних і унікальних прикладів сторінок помилок 404, які можуть допомогти вам під час створення.
Як має виглядати сторінка помилки 404
Спочатку ми згадаємо деякі характеристики, які, на нашу думку, повинна мати спеціальна сторінка помилки 404. Деякі з цих стратегій фактично застосовували багато впливових веб-сайтів.
1 Він має відповідати загальному стилю вашого веб-сайту
Якщо ви запитаєте нас, це має бути простою проблемою. Існує так багато тем WordPress, які спеціально створені, щоб відповідати атмосфері певного типу бізнесу або характеру послуг чи продукту, який рекламує сайт. Тому цілком природно, що ви повинні налаштувати дизайн сторінки 404 відповідно до шаблону веб-сайту та загальної теми веб-сайту. Наприклад, якщо ви є веб-сайтом ресторану, який спеціалізується на вишуканих стравах, було б добре включити зображення вишуканої на вигляд страви, а також її назву на сторінку помилки 404. Таким чином, ваші відвідувачі принаймні не забудуть, що ви подаєте смачну їжу, незважаючи на незручності, з якими вони зіткнулися в даний момент. Завдяки багатьом безкоштовним веб-сайтам і численним ресурсам із векторними ілюстраціямиви можете покращити зовнішній вигляд сторінки помилки 404 відповідно до ваших потреб.
2 Він повинен містити певну форму вибачень
Спливаюча сторінка з помилкою 404 не тільки дратує, це також те, чого не повинно було статися. Ось чому завжди доцільно включити певне вибачення на свою сторінку помилки, де ви певним чином підкреслюєте, що ви справді шкодуєте про проблеми користувача.
3 Сторінка помилки 404 повинна містити панель пошуку
Це також може бути хорошою практикою. Якщо ви додасте рядок пошуку на свою сторінку помилки 404, це може змусити користувачів залишатися на вашому веб-сайті, щоб продовжувати досліджувати.
4 Спробуйте додати посилання
Як і рядок пошуку, корисне посилання може принести більше користі, ніж шкоди. Це може бути будь-яке посилання, яке ви вважаєте важливим, наприклад, ваш блог, сторінка контактів або навіть ваша домашня сторінка. Крім того, додати посилання в WordPress дуже просто.
5 Зробіть це гумором
Раніше ми вже згадували про гумор. Будь то дотепний, принизливий чи просто дивний, використання гумору в подібних ситуаціях дійсно може значно підняти настрій або підняти настрій відвідувача. Хто знає, ваш розслаблений і комедійний підхід може призвести до того, що у них складеться більш позитивне враження про ваш бренд загалом.
Коротше кажучи, якщо у вас є гарна ідея для дотепного рядка, який можна було б розмістити на вашій сторінці помилки 404, не соромтеся додавати її, оскільки гуморестичне ставлення вітається багатьма. І навіть якщо вашим відвідувачам це не смішно, завжди краще тримати речі легковажними, ніж поводитися з машиною.
Ви також можете встановити переспрямування на сторінку помилки 404. Наприклад, якщо сталася помилка, ваша сторінка може бути просто перенаправлена на вашу домашню сторінку. Однак це не найкраще рішення, тому що якщо з вашою домашньою сторінкою щось не так, ви повертаєтесь на круги своя.
Але перш ніж зануритися в найкращі приклади, які ми підготували, знайдіть час, щоб освіжити пам’ять про створення сторінки 404 у WordPress:
Наш вибір сторінок із помилкою 404
Тепер, коли ви знаєте, які елементи можуть створити гарну сторінку помилки 404, ми також надамо вам кілька прикладів сторінок помилки 404, які привернули нашу увагу своїм почуттям гумору та загальним впливом їхнього дизайну.
Сподіваємось, те, як виглядає ця сторінка помилки 404, не відображає вашої реакції, коли виникне ця проблема. Компанія Pixar вирішила додати персонажа на ім’я Печаль із популярної картини 2015 року «Навиворіт» із повідомленням, яке радить вам не сприймати подібні речі занадто особисто. Ми не можемо погодитися.
Після запуску нового бренду та дизайну Mailchimp також змінив вигляд своєї сторінки помилок. Веб-сайт, який спеціалізується на послугах розсилки електронною поштою, вирішив включити нетрадиційне зображення осла, голова якого глибоко занурена в нору, вказуючи на те, що він обшукав кожну щілину сайту та просто не знайшов жодної сторінки. Ну, очевидно, що осел справді зробив усе можливе, щоб знайти цю сторінку для вас, тому справді немає сенсу надто розчаровуватися з цього приводу.
Цей веб-сайт професійної фотографії спеціалізується на зйомці портретів новонароджених дітей, весіль та інших сімейних подій. Тож цілком доречно, що вони вирішили включити зображення заплямованого малюка, який влаштовує істерику, на своїй сторінці 404. Незважаючи на те, що на зображенні видно, що дитина з’їла тістечко, текст непомітно натякає на те, що сторінку, яку ви шукали, також було з’їдено. Але як можна злитися на дитину, що плаче? Це було просто цікаво, і випадково поглинула вашу сторінку!
У дизайні 404 сторінок від Blizzard Entertainment є родзинка. Крім розбитого вікна та спотвореного меню (до речі, яке все ще працює), є повідомлення, яке звинувачує користувача в помилці. Вони були дещо сміливими у своєму підході, тому що це, безперечно, зміна від звичайних вибачувальних повідомлень, які зазвичай з’являються на сторінках помилок. Однак він все ще унікальний і освіжаючий, тому принаймні деяких людей він потішить таким несподіваним поворотом столів.
Побачити повну поразку антагоніста Angry Birds на екрані офіційного веб-сайту цієї гри лише через те, що сторінку неможливо знайти , справді справляє втішний вплив на людину, яка її переглядає. Зрештою, це не що інше, як Погана Хрюша, яка може бути пов’язана з вашим нещастям.
Flywheel – це компанія, що спеціалізується на допомозі розробникам і дизайнерам створювати веб-сайти WordPress. Їхня сторінка 404 спрощена за своєю природою, але складається з кількох привабливих елементів веб-дизайну. Є "це справді відстій!" повідомлення, яке насправді є хитрим каламбуром, враховуючи, що цифра нуль насправді є анімованою чорною дірою, яка засмоктала те, що виглядає як ноутбук із розбитою сторінкою.
Кожен хороший UX-дизайнер усвідомлює, що хоча ви спершу зосереджуєтеся на вирішенні найбільших проблем користувача, вам також потрібно пристосуватися, коли вони виходять за межі сценарію. Ось чому скромні люди з carwow створили чудову сторінку 404, на якій представлено гру про перегони автомобілів, коли сторінки не завантажуються, як планувалося.
Британський гумор часто характеризується тим, що не сприймає себе надто серйозно. Самі власники компанії є британцями, тому в цій ситуації вони фактично беруть удар на себе. Вони зробили це, намалювавши двох шикарних персонажів, які глибоко занурені в розмову про непрацюючу сторінку. При цьому вони дають поради користувачеві, що йому робити далі, використовуючи британські фрази, які в цьому контексті звучать відверто комічно.
Особисто ми втратили це, коли вони назвали сторінку «Чотириста четверте повідомлення про помилку» і коли вони прокоментували, що «їхній веб-дворецький виправить їхню помилку пустою рукою».
Slack — це платформа для співпраці, яка допомагає підприємствам і компаніям працювати разом і рухатися вперед. Але якщо ви потрапите на їхню сторінку 404, вважайте себе справді втраченим. На їхній сторінці помилок є гарна анімація, яка також рухається, якщо перетягнути вказівник миші по екрану. Незважаючи на те, що це візуально привабливо, це приклад сторінки, яка взагалі не відповідає вмісту веб-сайту, але все одно добре виконує свою роботу.
Надихайтеся та будьте готові до експериментів
Окрім ретельно створених 404 прикладів сторінок, які використовують відомі бренди, є багато інших чудових шаблонів, до яких ви можете звернутися. Розроблені досвідченими майстрами з увагою до кожної деталі, це наші улюблені.
Розроблений Оленою Зайцевою, цей шаблон є чудовим прикладом інтерактивного, нетипового макета сторінки з помилкою 404. Мінімальний, але ефектний, він поєднує в собі білий і жовтий кольори з анімованими текстами. Слова з назвою веб-сайту розбиваються на «404». Одночасно внизу сторінки з’являється ваше головне повідомлення разом із кнопкою повернення. Це рішення чудово підходить для розважливих веб-сайтів і творчих ніш.
Хоча на перший погляд ця сторінка 404 може здатися простою, це хороший приклад того, як простота може бути ефективною. З домінуючим синім кольором і розумною 3D-ілюстрацією він показує, що оригінальні, нетрадиційні 404 сторінки можуть справді змінити ситуацію. Якщо ви хочете, щоб ваша онлайн-презентація виділялася, це може бути правильним варіантом.
Сторінки помилок 404 здебільшого викликають у нас відчуття, ніби ми загубилися в космосі. Базуючись на цій метафорі, цей приклад сторінки 404 є потужним способом перенаправлення відвідувачів веб-сайту на домашню сторінку. Чудова графіка та плоскі елементи є головною увагою цього шаблону. У випадку, якщо вам потрібна сторінка 404, яка є невеликим витвором мистецтва і може ідеально працювати для будь-якого креативного веб-сайту, не зволікайте, спробуйте цей макет.
Розроблений Керолайн Лі, цей сміливий макет на 404 сторінки чудово підходить для тих, хто віддає перевагу багатоколірному стилю ретро. Атмосфера цього шаблону нагадує нам новаторські відеоігри та стару добру епоху телебачення. Поєднання яскравих кольорів, таких як рожевий, жовтий, синій і зелений, і різних розмірів форм підійде для будь-якої дизайнерської чи ігрової студії.
Якщо є одне слово, яке може описати цей макет, це буде жовтий! Натхненний естетикою американського поп-арту, цей екземпляр 404 поєднує два відтінки жовтого, культові крапки та смуги. ЯКЩО ви хочете привнести трохи мистецтва в таку сторінку, це правильний шлях.
Простота іноді може запропонувати так багато. Цей шаблон є найкращим доказом. Ліворуч зображено гітариста з гітарою з обірваною струною. Сильний символізм цієї ілюстрації ідеально вписується в контекст сторінки помилки 404. З іншого боку є просте повідомлення з кнопкою «Назад».
Дивитися на вже існуючі сторінки помилок 404 може бути весело, але створити одну може бути зовсім іншою історією. Щоб працювати, потрібні кмітливість, креативність і трохи відкритості. Тим не менш, ми сподіваємося, що деякі з наших пропозицій принаймні допоможуть вам отримати хорошу перевагу.