Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-03-10

1 <p>Теги: дизайн, страница 404</p>

2 <p>Плюс грамотная страница ошибки "Page was not found" поможет не только удержать, но и расположить пользователя к вашей компании.</p>

3 <p>Старший UX/UI-дизайнер<a>https://sibdev.pro/</a>Артём Петухов поделился подборкой интересных страниц ошибки "404" и рассказал, почему с них стоит брать пример.</p>

4 <p>Артём Петухов, UX/UI-дизайнер Sibdev</p>

5 <p><em>"Кто хотя бы раз сталкивался с интернетом, знает, что означают эти цифры. Меня удивляет, насколько узнаваемым может быть простой набор чисел. В этом и заключается их главная магия".</em></p>

6 <h2>Положительная эмоция</h2>

7 <p>По моему мнению, страницы с ошибками должны вызывать положительную эмоцию у пользователя. А как этого достигнуть, это другой вопрос.</p>

8 <p>Кинопоиск использует кадры из известных фильмов. Это очень простое и современное решение. Мне, например, нравится кадр с Рональдом Уизли из фильма про Гарри Поттера. Заставляет улыбнуться, не правда ли? :)</p>

9 <p><a>https://www.kinopoisk.ru/404/</a></p>

10 <h2>Иллюстрации</h2>

11 <p>Очень часто на таких страницах, я называю их заглушками, можно встретить различные иллюстрации. На заглушке Dribbble можно выбрать любой цвет спектра и получить подборку популярных и сочных дизайнерских работ.</p>

12 <p><a>https://dribbble.com/404</a></p>

13 <h2>Помощь</h2>

14 <p>Конечно, не стоит забывать и про функциональность. Если вы действительно хотите вызвать положительную эмоцию у пользователя, помогите ему найти то, что он ищет.</p>

15 <p>Если у вас есть поиск по сайту, это тот самый момент, когда его стоит предложить пользователю напрямую. И приправьте это всё ссылками на главные разделы сайта для быстрого доступа, как это сделали в Apple.</p>

16 <p><a>https://www.apple.com/ru/404/</a></p>

17 <h2>Простота</h2>

18 <p>Старайтесь не нагружать пользователя лишней информацией. Чем проще, тем лучше. За самое лаконичное решение приз достается Google, впрочем, как всегда.</p>

19 <p><a>http://google.ru/404/</a></p>

20 <h2>Интерактив</h2>

21 <p>Позвольте пользователю стать частью вашего сайта. Интересные, креативные решения могут увлечь вашего пользователя настолько, что он вовсе забудет, что он искал 5 минут назад… Так, о чём это я… Ах да!</p>

22 <p>За возможность поиграться с вектором большое спасибо Figma.</p>

23 <p><a>https://www.figma.com/404/</a></p>

24 <h2>Классика</h2>

25 <p>В интернете существует уже тысячи крутых решений для страницы 404. Вот, например, классический вариант. Пользователям Windows обязательно понравится. По крайней мере, я точно оценил. #windows_живи</p>

26 <h2>Стилистика</h2>

27 <p>Но всё-таки не стоит забывать о вашем сайте, о его стилистике, его красной нити. Какими бы смелыми ваши идеи ни были, они должны вписываться в общую концепцию. Иначе пользователь просто вас не поймет.</p>

28 <p><a>https://sibdev.pro/404/</a></p>

29 <p>Данный материал подготовлен веб-студией<a>https://sibdev.pro/</a>- местом в сердце Сибири, где мы разрабатываем кастомные веб-сервисы и веб-приложения. Специализируемся на frontend, backend, верстке, дизайне интерфейсов, SPA.</p>