Юзабіліті сайту

TOP – 50 сторінок 404 відомих компаній

14 May, 2018


Кожна сторінка в мережі інтернет має свою власну унікальну адресу за допомогою якої на неї можна потрапити. Якщо ж сторінка була видалена, перенесена абов адресі допущена помилка, тоді користувач буде перенаправлений на 404-ту сторінку. 404-та помилка означає, що сервер не зміг знайти жодних даних за запитом клієнта, тобто сайт не має, що повернути на зроблений запит.

Дуже важливо правильно продумати 404 сторінку і налаштувати , адже вона може стати останньою, яку побачить користувач на вашому сайті. Для цього можна використовувати декілька тактик:

  • Для інтернет-магазинів чудово підходить ідея оформлення 404-ї сторінки в своєму фірмовому стилі із показомя на ній різних товарних пропозицій. Таким чином користувач зможе або легко повернутись на необхідну сторінку, або перейти на товар якого він ще не бачив.
  • Для любителів креативу теж є цікавий варіант. Можна оформити сторінку помилки в цікавому стилі: жарт, провокація, крутий дизайн, міні ігри, тощо.
  • Для решти випадків слід просто оформити цю сторінку в корпоративному стилі та дати можливість користувачу продовжити свою подорож по вашому ресурсу.

Що ж, з теорією завершено, а зараз прогляньмо 50 крутих ідей для оформлення 404-ї сторінки.

Зміст

1. Blizzard Entertainment

2. JACK DANIEL

3.Tproger

4. Github

5. Geekbrains

6. Adidas

7. Emailcenter

8. Marvel

9. Crello

10. Sketch

11. Red Bull

12. Cayenne

13. Aviasales

14. LEGO

15. Studiofables

16. ITcluster

17. Pixar

18. 20th Century Fox

19. Planeta Kino

20. Startup Depot

21. MentorMate

22. Specialized

23. 9GAG

24. Orangecoat

25. Teehan+Lax

26. Hakim.se

27. CSS-tricks

28. The New Yorker

29. Dribbble

30. SumatoSoft

31. Skipio

32. CoolFarm

33. Squarespace

34. DustyMiller.ca

35. Mameilleurecuite

36. Agens

37. Rachel the great

38. Fork cms

39. Incore

40. Daniel Karcher

41. Figma

42. Repair pal

43. Romainbrasier

44. Batman 3D

45. Telltale

46. IMDb

47. Netpeak

48. Elativeagency

49. FOX

50. The Software House

Висновок

1. Blizzard Entertainment

Blizard

Першим учасником нашого ТОПу стала відома американська компанія Blizzard Entertainment. Blizzard займаються розробкою ігор та розробили такі відомі продукти як: World of Warcraft, StarCraft, Heroes of the Storm, Diablo, Overwatch. 404-та сторінка виглядає як розбитий екран, що показує зламаний веб-сайт.

2. JACK DANIELS

JACK DANIELS

Всесвітньо відомий алкогольний бренд, теж попрацював над оформленням сторінки 404. Користувач має змогу побачити порожню дорогу та напис ”Схоже, ти заблукав, друже”. Сторінка виконана в корпоративному стилі, а завдяки навігації можна легко повернутись до необхідної сторінки.

3.Tproger

Tproger

Прекрасний приклад оформлення 404-ї сторінки в жартівливому стилі від редакції видання Tproger (проект про розробку та все, що з нею пов’язано). Окрім статусу помилки, користувач може подивитись веселе відео, що точно підніме настрій після невдалого пошуку.

4. Github

Github

Прекрасний приклад використання корпоративного стилю для оформлення 404 сторінки. Для цього Github взяли свій логотип (кота-восьминога) та стилізували його під “Зоряні війни”.

5. Geekbrains

Geekbrains

Geekbrains це відомий російський портал присвячений онлайн освіті. У випадку якщо користувач потрапить на 404-ту сторінку його чекатиме одне з 3-х тематичних відео в якості оформлення цієї помилки. Також є можливість залишити повідомлення про помилку або повернутись на головну сторінку.

6. Adidas

Adidas

Компанія Adidas вирішила не відходити від свого корпоративного стилю при оформленні сторінки помилки. Ми бачимо чудовий приклад мінімалізму у веб-дизайні, а також текст, що мотивує нас не здаватись.

7. Emailcenter

Мабуть, одна з найвідоміших 404-х сторінок, яка принесла великий трафік та популярність компанії Emailcenter. Виконана в жартівливому стилі, вона пропонує звільнити когось з команди розробників в знак покарання. Або ж користувач може пробачити програмістів та повернутись до користування сайтом.

8. Marvel

Marvel

Marvel, відоме американське видавництво коміксів, показує чудовий приклад оформлення 404-ї помилки. Сама сторінка присутня в декількох варіантах, кожен з яких виконано в стилі певного коміксу цього видання. Окрім красивого дизайну, Marvel продумали ще й зручну навігацію, яка допоможе відновити роботу з сайтом.

9. Crello

Crello
Сервіс для онлайн редагування зображень Crello має красиве оформлення 404-ї сторінки в гумористичному стилі. Викрадення сторінки голубами – чи не найоригінальніше пояснення виникнення помилки.

10. Sketch


Компанія Sketch вирішила оформити свою 404-ту сторінку в корпоративному стилі. Гарний приклад дотримання фірмового стилю та простоти в навігації.

11. Red Bull

Red Bull


Відомий виробник енергетичних напоїв Red Bull цілком вірний своєму стилю. У випадку помилки користувач потрапляєна сторінку з ефектним відео та написом: “Гм, це спантеличує. Куди поділась сторінка?!”

12. Cayenne

Cayenne

Італійська дизайн-студія Cayenne придумала цікавий варіант сторінки 404. Вона створена в стилі діалогу користувача і модератора, де останній пропонує відвідувачу варіанти вирішення його проблеми.

13. Aviasales

aviasales

Сервіс для пошуку авіаквитків Aviasales вирішив оформити сторінку 404 в корпоративному стилі. Додатковою “родзинкою” цього є те, що через певний час по сторінці починають пересуватись маленькі зображення літаків.

14. LEGO

Lego

Один з найвідоміших виробників дитячих іграшок у світі – компанія LEGO теж вирішила дотриматись в оформленні 404-ї сторінки свого фірмового, трішки жартівливого стилю.

15. Studiofables

Studiofables

Французька дизайн-студія Studiofables вирішила підійти до питання дизайну 404-ї сторінки з властивим їй колоритом. Користувачу пропонують заспокоїтись, подивитись відео про трьох поросят та згодом перейти на головну сторінку ресурсу.

16. ITcluster

ITcluster

Львівський IT-Cluster також вирішив проявити творчий підхід. У випадку помилки відвідувача чекає оригінальна сторінка 404 та кнопка для повернення на головну.

17. Pixar

Pixar

Мультиплікаційна студія Pixar вирішила дотриматись свого стандартного стилю в дизайні 404-ї сторінки. У випадку помилки гостю сайту запропонують не плакати, та пояснять, що це всього лише 404-та помилка.

18. 20th Century Fox

20th Century Fox

Кінокомпанія 20th Century Fox добряче попрацювала над своєю 404-ю сторінкою. Користувачу, випадковим чином, показується один з варіантів оформлення, кожен з яких включає відео та унікальний текст.

19. Planeta Kino

Planeta Kino

Мережа кінотеатрів “Планета Кіно” вирішила, крім дотримання свого стилю, використати відому фразу з “Аполлона-13”. До того ж тут є зручна кнопка для повернення на головну.

20. Startup Depot

Startup Depot

Львівський бізнес-інкубатор Startup Depot – перший у нашому списку, хто використав для оформлення 404-ї сторінки мем з Вінсентом Вегою (стрічка “Кримінальне чтиво”). Цей момент з фільму користується широкою популярністю для пояснення відсутності розуміння якихось речей, тому його використання є напрочуд вдалим.

21. MentorMate

MentorMate

Компанія MentorMate вирішила вдатись до простого та перевіреного прийому. Обіграти код помилки “404” у вигляді якоїсь красивої картинки. В цьому випадку це чашка кави та цифри в колірній стилістиці сайту.

22. Specialized

Specialized

Specialized займається продажем велосипедів та необхідного спорядження, тому такийвигляд 404 сторінки підходить їм якнайкраще.

23. 9GAG

9GAG

Як вже згадувалось, СтартапДепо, не єдині хто вирішили використати мем з Вінсентом Вегою. Той же момент з фільму на своїй сторінці використала інтернет-платформа 9GAG. Враховуючи кількість гумористичного контенту в межах сервісу, це рішення можна вважати ідеальним.

24. Orangecoat

Orangecoat

Справді оригінальне рішення в оформленні 404-ї сторінки придумали в дизайнерській компанії Orangecoat. Коли користувач потрапляє на 404-ту сторінку він бачить діаграму, яка покроково дає відповіді на більшість поширених запитань.

25. Teehan+Lax

Teehan+Lax

Якщо ви потрапите на 404-ту сторінку сайту креативного агентства Teehan+Lax вам буде показано один з декількох варіантів 404 помилки. В кожному з них використовується нове тло та напис ”Щось пішло не так. Дуже, дуже, дуже не так”.

26. Hakim.se

Hakim.se

Сторінка 404 на сайті Hakim.se від шведського дизайнера та розробника з іменем Hakim El Hattab точно припаде до смаку всім фанатам творчості Говарда Філіпа Лавкрафта. Одразу після переходу, на користувача починають витріщатись з десяток страхітливих очей і йому пропонують повернутись на головну сторінку сайту.

27. CSS-tricks

CSS-tricks

На порталі CSS-tricks сторінка 404-ї помилки оформлена в мінімалістичному, тематичному стилі. Коли користувач потрапляє на цю сторінку, він бачить білий фон, та розрив, за яким видно код web-сторінки. Єдиним недоліком цієї ідеї є не можливість продовжити роботу з сайтом.

28. The New Yorker

The New Yorker

The New Yorker – це відоме американське щотижневе видання яке публікується з 1925 року. 404-та сторінка оформлена в корпоративному стилі та має зручну навігацію.

29. Dribbble

Dribbble

Dribbble – це відома спільнота дизайнерів, яка теж красиво оформила свою 404-ту сторінку. В цьому випадку гостю сайту пояснюється, що матеріалів які він шукає не існує, а на фоні зображено колоритну світлину.

30. SumatoSoft

SumatoSoft

Компанія Sumatosoft вирішила з фантазією та гумором підійти до оформлення 404-ї помилки. Літаюча тарілка, що викрадає корівку – що може бути кращою ілюстрацією на сторінці 404?

31. Skipio

Skipio

Команда сервісу для розсилок Skipio змогла створити гарний дизайн для своєї 404-ї сторінки. На ній зображений мандрівник, який заблукав і не зміг знайти те, що шукав. Проте він може озирнутись та віднайти інші “скарби” цього сервісу, про що нас і інформує текст.

32. CoolFarm

CoolFarm

Біотехнологічна компанія CoolFarm знайшла прекрасне рішення для своєї 404-ї сторінки. Коли відвідувач потрапляє на сторінку помилки, він може зіграти в безсмертну класику – Space Invaders. Прекрасна ідея для того щоб утримати користувача на сайті.

33. Squarespace

Squarespace

404-та сторінка на сайті платформи Squarespace реалізована просто та зі смаком. Ми бачимо затемнене фото командного центру, текст та велику кнопку для повернення на головну сторінку сайту.

34. DustyMiller.ca

DustyMiller.ca

Чудовий приклад, який демонструє, що не лише великим компаніям слід задумуватись про оформлення 404-ї сторінки. Цей учасник нашого ТОПу – це сайт-портфоліо розробника Дастіна Міллера (Dustin Miller). Сторінка оформлена в характерному для сайту стилі та має цікавий вигляд.

35. Mameilleurecuite

Mameilleurecuite

Цей учасник нашого ТОПу теж вирішив потішити своїх користувачів оригінальною 404-ю сторінкою. У випадку помилкового запиту відвідувач матиме змогу зіграти в гру Pac-Man в стилістиці сайту.

36. Agens

Agens

Рекламна компанія Agens також попрацювала над креативним оформленням сторінки 404. Гостя сайту зустріне напис “схоже, що ти загубився в космосі” та зображення астронавта на астероїді.

37. Rachel the great

Rachel the great

Хороший приклад оформлення 404 сторінки від Rachel Nabors. Rachel the Great – це серія авторських коміксів, тому такий дизайн ідеально підходить.

38. Fork cms

Fork cms

Дизайн офіційного сайту Fork cms виконаний в морській тематиці, тож компанія вирішила не зраджувати своєму стилю. На 404-й сторінці користувача чекатиме Нептун, та напис “Ця сторінка зникла в морі”

39. Incore
Incore

Маркетингове агентство Incore теж вирішило підійти до оформлення своєї 404 сторінки зі стилем та гумором. На ній відвідувача зустріне зображення хижих птахів та запитання “Привіт, мій друже. Нас шукаєш? Справді?” та кнопка з текстом “Ні, дякую. Повернемось назад до Incore”.

40. Daniel Karcher

Daniel Karcher

Один з найоригінальніших учасників нашого ТОПу, сайт www.danielkarcher.com. Окрім того, що сам ресурс виконаний у вельми цікавому стилі, так ще й 404-та сторінка з дійсно цікавою ідеєю. З її допомогою користувач зможе провести коротку подорож по метрополітену та поспостерігати за діями дівчини фотографа. Сама сторінка написана за допомогою технології Flash.

41. Figma

Figma

404-та сторінка інструменту для прототипування Figma має цікаву реалізацію та ідею. За допомогою точок зображений на скріншоті вище можна змінювати обриси напису 404. Цей стиль гарно підкреслює призначення сервісу.

42. Repair pal

Repair pal

А ось який дизайн для своєї 404 сторінки обрала команда з RepairPal. Красива картинка та зручний інтерфейс для форми зворотного зв’язку – це гарний спосіб оформити сторінку помилки.

43. Romainbrasier

Romainbrasier

Ще один цікавий приклад оформлення 404 сторінки на сайті-портфоліо веб розробника. Коли користувач потрапляє на сторінку помилки він може зіграти в аналог знаменитої гри Lemmings. Гарний приклад як можна продемонструвати свій хист розробника та потішити відвідувачів.

44. Batman 3D

Batman 3D

Гарний приклад тематичного оформлення 404-ї помилки від сайту Batman 3D. Не змогли знайти потрібну сторінку? Мабуть, її викрав Джокер.

45. Telltale

Telltale

Студія по розробці ігор Talltale широко відома завдяки своїм продуктам. Якщо потрапити на її 404-ту сторінку, можна побачити наступне зображення. Це оформлення гарно вписується в мультиплікаційний стиль продуктів компанії.

46. IMDb

IMDb

IMDb – це найбільший у світі портал та база знань присвячений кінематографу. 404-та сторінка цього сайту виконана просто ідеально. Мінімалізм в поєднанні з влучністю. Кожного разу коли користувач потрапляє сюди, він бачить видозмінену цитату з культових фільмів. Для прикладу на скріншоті вище цитата з “Володаря перснів” яка стверджує: ”Запам’ятай назавжди, Фродо, сторінка завжди пробує повернутись до свого повелителя. Вона хоче бути знайденою”

47. Netpeak

Netpeak

Хорошим прикладом оформлення 404-ї сторінки в корпоративному стилі може слугувати робота компанії Netpeak. Окрім повідомлення про помилку, можна скористатись зручною навігацією для продовження роботи з сайтом.

48. Elativeagency

Elativeagency

Креативне агентство Elativeagency розробило свою 404 сторінку в гумористичному стилі. Жартівливе та миле зображення допоможе відвідувачу не хвилюватись через незнайдені матеріали.

49. FOX

FOX

Якщо ви колись потрапите на 404-ту сторінку сайту телекомпанії FOX на вас чекатиме цікава пропозиція. На ній зображені детективи, які пропонують вам віднайти зниклу сторінку.

50. The Software House

The Software House

Останнім учасником нашого топу стала компанія The Software House. Просте та стильне оформлення в традиціях корпоративного дизайну – це гарна практика для компаній розробників.

Висновок

В межах статті Ви мали змогу ознайомитися з 50-ма прикладами хорошого оформлення 404 сторінок. Частина з учасників ТОПу суворо дотримувались свого корпоративного стилю та робили класичні сторінки про помилку. Інші, в свою чергу, не боялись ризикувати, жартувати та експериментувати зі стилем.
Сподіваємось, що ця стаття стала Вам у пригоді та була цікавою. Якщо Ви досі не створили власної 404-ї сторінки, тоді рекомендуємо по швидше цим зайнятись. Залежно від типу сайту, аудиторії та власних бажань, можна обрати різні варіанти оформлення. А при потребі ви завжди можете надихнутись учасниками нашого ТОПу. Залишайтесь з нами, попереду ще багато цікавого!