Кожна сторінка в мережі інтернет має свою власну унікальну адресу за допомогою якої на неї можна потрапити. Якщо ж сторінка була видалена, перенесена абов адресі допущена помилка, тоді користувач буде перенаправлений на 404-ту сторінку. 404-та помилка означає, що сервер не зміг знайти жодних даних за запитом клієнта, тобто сайт не має, що повернути на зроблений запит.
Дуже важливо правильно продумати 404 сторінку і налаштувати , адже вона може стати останньою, яку побачить користувач на вашому сайті. Для цього можна використовувати декілька тактик:
- Для інтернет-магазинів чудово підходить ідея оформлення 404-ї сторінки в своєму фірмовому стилі із показомя на ній різних товарних пропозицій. Таким чином користувач зможе або легко повернутись на необхідну сторінку, або перейти на товар якого він ще не бачив.
- Для любителів креативу теж є цікавий варіант. Можна оформити сторінку помилки в цікавому стилі: жарт, провокація, крутий дизайн, міні ігри, тощо.
- Для решти випадків слід просто оформити цю сторінку в корпоративному стилі та дати можливість користувачу продовжити свою подорож по вашому ресурсу.
Що ж, з теорією завершено, а зараз прогляньмо 50 крутих ідей для оформлення 404-ї сторінки.
1. Blizzard Entertainment
Першим учасником нашого ТОПу стала відома американська компанія Blizzard Entertainment. Blizzard займаються розробкою ігор та розробили такі відомі продукти як: World of Warcraft, StarCraft, Heroes of the Storm, Diablo, Overwatch. 404-та сторінка виглядає як розбитий екран, що показує зламаний веб-сайт.
2. JACK DANIELS
Всесвітньо відомий алкогольний бренд, теж попрацював над оформленням сторінки 404. Користувач має змогу побачити порожню дорогу та напис ”Схоже, ти заблукав, друже”. Сторінка виконана в корпоративному стилі, а завдяки навігації можна легко повернутись до необхідної сторінки.
3.Tproger
Прекрасний приклад оформлення 404-ї сторінки в жартівливому стилі від редакції видання Tproger (проект про розробку та все, що з нею пов’язано). Окрім статусу помилки, користувач може подивитись веселе відео, що точно підніме настрій після невдалого пошуку.
4. Github
Прекрасний приклад використання корпоративного стилю для оформлення 404 сторінки. Для цього Github взяли свій логотип (кота-восьминога) та стилізували його під “Зоряні війни”.
5. Geekbrains
Geekbrains це відомий російський портал присвячений онлайн освіті. У випадку якщо користувач потрапить на 404-ту сторінку його чекатиме одне з 3-х тематичних відео в якості оформлення цієї помилки. Також є можливість залишити повідомлення про помилку або повернутись на головну сторінку.
6. Adidas
Компанія Adidas вирішила не відходити від свого корпоративного стилю при оформленні сторінки помилки. Ми бачимо чудовий приклад мінімалізму у веб-дизайні, а також текст, що мотивує нас не здаватись.
7. Emailcenter
Мабуть, одна з найвідоміших 404-х сторінок, яка принесла великий трафік та популярність компанії Emailcenter. Виконана в жартівливому стилі, вона пропонує звільнити когось з команди розробників в знак покарання. Або ж користувач може пробачити програмістів та повернутись до користування сайтом.
8. Marvel
Marvel, відоме американське видавництво коміксів, показує чудовий приклад оформлення 404-ї помилки. Сама сторінка присутня в декількох варіантах, кожен з яких виконано в стилі певного коміксу цього видання. Окрім красивого дизайну, Marvel продумали ще й зручну навігацію, яка допоможе відновити роботу з сайтом.
9. Crello
Сервіс для онлайн редагування зображень Crello має красиве оформлення 404-ї сторінки в гумористичному стилі. Викрадення сторінки голубами – чи не найоригінальніше пояснення виникнення помилки.
10. Sketch
Компанія Sketch вирішила оформити свою 404-ту сторінку в корпоративному стилі. Гарний приклад дотримання фірмового стилю та простоти в навігації.
11. Red Bull
Відомий виробник енергетичних напоїв Red Bull цілком вірний своєму стилю. У випадку помилки користувач потрапляєна сторінку з ефектним відео та написом: “Гм, це спантеличує. Куди поділась сторінка?!”
12. Cayenne
Італійська дизайн-студія Cayenne придумала цікавий варіант сторінки 404. Вона створена в стилі діалогу користувача і модератора, де останній пропонує відвідувачу варіанти вирішення його проблеми.
13. Aviasales
Сервіс для пошуку авіаквитків Aviasales вирішив оформити сторінку 404 в корпоративному стилі. Додатковою “родзинкою” цього є те, що через певний час по сторінці починають пересуватись маленькі зображення літаків.
14. LEGO
Один з найвідоміших виробників дитячих іграшок у світі – компанія LEGO теж вирішила дотриматись в оформленні 404-ї сторінки свого фірмового, трішки жартівливого стилю.
15. Studiofables
Французька дизайн-студія Studiofables вирішила підійти до питання дизайну 404-ї сторінки з властивим їй колоритом. Користувачу пропонують заспокоїтись, подивитись відео про трьох поросят та згодом перейти на головну сторінку ресурсу.
16. ITcluster
Львівський IT-Cluster також вирішив проявити творчий підхід. У випадку помилки відвідувача чекає оригінальна сторінка 404 та кнопка для повернення на головну.
17. Pixar
Мультиплікаційна студія Pixar вирішила дотриматись свого стандартного стилю в дизайні 404-ї сторінки. У випадку помилки гостю сайту запропонують не плакати, та пояснять, що це всього лише 404-та помилка.
18. 20th Century Fox
Кінокомпанія 20th Century Fox добряче попрацювала над своєю 404-ю сторінкою. Користувачу, випадковим чином, показується один з варіантів оформлення, кожен з яких включає відео та унікальний текст.
19. Planeta Kino
Мережа кінотеатрів “Планета Кіно” вирішила, крім дотримання свого стилю, використати відому фразу з “Аполлона-13”. До того ж тут є зручна кнопка для повернення на головну.
20. Startup Depot
Львівський бізнес-інкубатор Startup Depot – перший у нашому списку, хто використав для оформлення 404-ї сторінки мем з Вінсентом Вегою (стрічка “Кримінальне чтиво”). Цей момент з фільму користується широкою популярністю для пояснення відсутності розуміння якихось речей, тому його використання є напрочуд вдалим.
21. MentorMate
Компанія MentorMate вирішила вдатись до простого та перевіреного прийому. Обіграти код помилки “404” у вигляді якоїсь красивої картинки. В цьому випадку це чашка кави та цифри в колірній стилістиці сайту.
22. Specialized
Specialized займається продажем велосипедів та необхідного спорядження, тому такийвигляд 404 сторінки підходить їм якнайкраще.
23. 9GAG
Як вже згадувалось, СтартапДепо, не єдині хто вирішили використати мем з Вінсентом Вегою. Той же момент з фільму на своїй сторінці використала інтернет-платформа 9GAG. Враховуючи кількість гумористичного контенту в межах сервісу, це рішення можна вважати ідеальним.
24. Orangecoat
Справді оригінальне рішення в оформленні 404-ї сторінки придумали в дизайнерській компанії Orangecoat. Коли користувач потрапляє на 404-ту сторінку він бачить діаграму, яка покроково дає відповіді на більшість поширених запитань.
25. Teehan+Lax
Якщо ви потрапите на 404-ту сторінку сайту креативного агентства Teehan+Lax вам буде показано один з декількох варіантів 404 помилки. В кожному з них використовується нове тло та напис ”Щось пішло не так. Дуже, дуже, дуже не так”.
26. Hakim.se
Сторінка 404 на сайті Hakim.se від шведського дизайнера та розробника з іменем Hakim El Hattab точно припаде до смаку всім фанатам творчості Говарда Філіпа Лавкрафта. Одразу після переходу, на користувача починають витріщатись з десяток страхітливих очей і йому пропонують повернутись на головну сторінку сайту.
27. CSS-tricks
На порталі CSS-tricks сторінка 404-ї помилки оформлена в мінімалістичному, тематичному стилі. Коли користувач потрапляє на цю сторінку, він бачить білий фон, та розрив, за яким видно код web-сторінки. Єдиним недоліком цієї ідеї є не можливість продовжити роботу з сайтом.
28. The New Yorker
The New Yorker – це відоме американське щотижневе видання яке публікується з 1925 року. 404-та сторінка оформлена в корпоративному стилі та має зручну навігацію.
29. Dribbble
Dribbble – це відома спільнота дизайнерів, яка теж красиво оформила свою 404-ту сторінку. В цьому випадку гостю сайту пояснюється, що матеріалів які він шукає не існує, а на фоні зображено колоритну світлину.
30. SumatoSoft
Компанія Sumatosoft вирішила з фантазією та гумором підійти до оформлення 404-ї помилки. Літаюча тарілка, що викрадає корівку – що може бути кращою ілюстрацією на сторінці 404?
31. Skipio
Команда сервісу для розсилок Skipio змогла створити гарний дизайн для своєї 404-ї сторінки. На ній зображений мандрівник, який заблукав і не зміг знайти те, що шукав. Проте він може озирнутись та віднайти інші “скарби” цього сервісу, про що нас і інформує текст.
32. CoolFarm
Біотехнологічна компанія CoolFarm знайшла прекрасне рішення для своєї 404-ї сторінки. Коли відвідувач потрапляє на сторінку помилки, він може зіграти в безсмертну класику – Space Invaders. Прекрасна ідея для того щоб утримати користувача на сайті.
33. Squarespace
404-та сторінка на сайті платформи Squarespace реалізована просто та зі смаком. Ми бачимо затемнене фото командного центру, текст та велику кнопку для повернення на головну сторінку сайту.
34. DustyMiller.ca
Чудовий приклад, який демонструє, що не лише великим компаніям слід задумуватись про оформлення 404-ї сторінки. Цей учасник нашого ТОПу – це сайт-портфоліо розробника Дастіна Міллера (Dustin Miller). Сторінка оформлена в характерному для сайту стилі та має цікавий вигляд.
35. Mameilleurecuite
Цей учасник нашого ТОПу теж вирішив потішити своїх користувачів оригінальною 404-ю сторінкою. У випадку помилкового запиту відвідувач матиме змогу зіграти в гру Pac-Man в стилістиці сайту.
36. Agens
Рекламна компанія Agens також попрацювала над креативним оформленням сторінки 404. Гостя сайту зустріне напис “схоже, що ти загубився в космосі” та зображення астронавта на астероїді.
37. Rachel the great
Хороший приклад оформлення 404 сторінки від Rachel Nabors. Rachel the Great – це серія авторських коміксів, тому такий дизайн ідеально підходить.
38. Fork cms
Дизайн офіційного сайту Fork cms виконаний в морській тематиці, тож компанія вирішила не зраджувати своєму стилю. На 404-й сторінці користувача чекатиме Нептун, та напис “Ця сторінка зникла в морі”
39. Incore
Маркетингове агентство Incore теж вирішило підійти до оформлення своєї 404 сторінки зі стилем та гумором. На ній відвідувача зустріне зображення хижих птахів та запитання “Привіт, мій друже. Нас шукаєш? Справді?” та кнопка з текстом “Ні, дякую. Повернемось назад до Incore”.
40. Daniel Karcher
Один з найоригінальніших учасників нашого ТОПу, сайт www.danielkarcher.com. Окрім того, що сам ресурс виконаний у вельми цікавому стилі, так ще й 404-та сторінка з дійсно цікавою ідеєю. З її допомогою користувач зможе провести коротку подорож по метрополітену та поспостерігати за діями дівчини фотографа. Сама сторінка написана за допомогою технології Flash.
41. Figma
404-та сторінка інструменту для прототипування Figma має цікаву реалізацію та ідею. За допомогою точок зображений на скріншоті вище можна змінювати обриси напису 404. Цей стиль гарно підкреслює призначення сервісу.
42. Repair pal
А ось який дизайн для своєї 404 сторінки обрала команда з RepairPal. Красива картинка та зручний інтерфейс для форми зворотного зв’язку – це гарний спосіб оформити сторінку помилки.
43. Romainbrasier
Ще один цікавий приклад оформлення 404 сторінки на сайті-портфоліо веб розробника. Коли користувач потрапляє на сторінку помилки він може зіграти в аналог знаменитої гри Lemmings. Гарний приклад як можна продемонструвати свій хист розробника та потішити відвідувачів.
44. Batman 3D
Гарний приклад тематичного оформлення 404-ї помилки від сайту Batman 3D. Не змогли знайти потрібну сторінку? Мабуть, її викрав Джокер.
45. Telltale
Студія по розробці ігор Talltale широко відома завдяки своїм продуктам. Якщо потрапити на її 404-ту сторінку, можна побачити наступне зображення. Це оформлення гарно вписується в мультиплікаційний стиль продуктів компанії.
46. IMDb
IMDb – це найбільший у світі портал та база знань присвячений кінематографу. 404-та сторінка цього сайту виконана просто ідеально. Мінімалізм в поєднанні з влучністю. Кожного разу коли користувач потрапляє сюди, він бачить видозмінену цитату з культових фільмів. Для прикладу на скріншоті вище цитата з “Володаря перснів” яка стверджує: ”Запам’ятай назавжди, Фродо, сторінка завжди пробує повернутись до свого повелителя. Вона хоче бути знайденою”
47. Netpeak
Хорошим прикладом оформлення 404-ї сторінки в корпоративному стилі може слугувати робота компанії Netpeak. Окрім повідомлення про помилку, можна скористатись зручною навігацією для продовження роботи з сайтом.
48. Elativeagency
Креативне агентство Elativeagency розробило свою 404 сторінку в гумористичному стилі. Жартівливе та миле зображення допоможе відвідувачу не хвилюватись через незнайдені матеріали.
49. FOX
Якщо ви колись потрапите на 404-ту сторінку сайту телекомпанії FOX на вас чекатиме цікава пропозиція. На ній зображені детективи, які пропонують вам віднайти зниклу сторінку.
50. The Software House
Останнім учасником нашого топу стала компанія The Software House. Просте та стильне оформлення в традиціях корпоративного дизайну – це гарна практика для компаній розробників.
Висновок
В межах статті Ви мали змогу ознайомитися з 50-ма прикладами хорошого оформлення 404 сторінок. Частина з учасників ТОПу суворо дотримувались свого корпоративного стилю та робили класичні сторінки про помилку. Інші, в свою чергу, не боялись ризикувати, жартувати та експериментувати зі стилем.
Сподіваємось, що ця стаття стала Вам у пригоді та була цікавою. Якщо Ви досі не створили власної 404-ї сторінки, тоді рекомендуємо по швидше цим зайнятись. Залежно від типу сайту, аудиторії та власних бажань, можна обрати різні варіанти оформлення. А при потребі ви завжди можете надихнутись учасниками нашого ТОПу. Залишайтесь з нами, попереду ще багато цікавого!
Sign up with Google