Эволюция дизайна сайтов для бизнеса в Рунете: от тягот чистого HTML до лаконичности и простоты создания

«Есть многое, Горацио, на свете,
Что и не снилось юзерам Рунета в 23-м».

Для подтверждения этой цитаты Омара Хайяма мы решили вспомнить историю веб-разработки: от регистрации первого домена .ru 7 апреля 1994 года до нашего времени. О том, как развивались коммерческие сайты, вы узнаете в нашей статье.

Эволюция дизайна сайтов для бизнеса в Рунете: от тягот чистого HTML до лаконичности и простоты создания

1994–1999 Эпоха минимализма

Голый интернет

История создания сайтов Рунета начинается в середине 90-х. Это время dial-up модемов с максимальной скоростью работы 56 Кбит/с., а по факту — 13–30 Кбит/с. Они подключались к сети, только если домашний телефон был свободен, и издавали характерные звуки.

Звук модема

— Что у тебя телефон полдня занят?
— В интернете сидел

Диалог очевидцев

Интернет был настолько медленным, что появилось выражение «две девушки в час» о скорости загрузки эротических картинок. В таких условиях добавлять на страницы качественную графику не имело смысла.

Для облегчения загрузки первые ресурсы делали текстовыми на чистом HTML. Любое изменение контента на таких страницах требовало снова загружать их на сервер.

Браузеры того времени — не Яндекс и Google, а AltaVista, Апорт и Netscape. Онлайн-пользователи переписывались в ICQ, заходили в чаты Кулички и krovatka.ru, прочитать анекдоты на anekdot.ru и в онлайн-библиотеку Мошкова. Интернет использовался для общения и развлечения.

Первые бизнес-сайты

Постепенно происходит развитие сайтов для бизнеса. В 1995 г. начинает работу первый интернет-магазин по продаже дисков, который закрылся из-за нерентабельности. А ресурс по продаже книг symbol.ru (с 1997 г. books.ru) работает с августа 1996 г. по сей день.

В 1998 г. по принципу постоплаты начинает работать интернет-магазин «Озон».

Ozon.ru, 2000 г.
Ozon.ru, 2000 г.

Внешний вид

Как мы видим, ресурсы были лаконичными:

  • минимум картинок или их отсутствие;
  • однородная заливка.

А средства связи кажутся непривычными: в контактах указан номер ICQ или пейджер.

Появляется спрос на профессиональные веб-сайты для бизнеса. В 1996 г. начинает работу сайт Аэрофлота, сделанный на заказ американской студией Seanet.

Aeroflot.org, 1996
Aeroflot.org, 1996

Спрос рождает предложение, поэтому в конце 1996 г. Артемий Лебедев размещает портфолио веб-дизайнера на design.ru. Впоследствии он придумает название и дизайн ресурса, который поможет провайдеру Ситилайн мотивировать пользователей подключаться к интернету. Но зачем?

Стоимость интернета в 1990-х

Ответ на вопрос о мотивации кроется в стоимости интернета. Посмотрим, сколько бы стоил час подключения в 2022 с тарифами 1998 г.
1 час интернета Ситилайн стоил от 0,55 до 1$. На сайте сказано, что 1$=17,8р. Средняя зарплата в РФ в 1998 г. (Госкомстат) = 1051,5р. Она же в ноябре 2022 (Росстат)= 63.060р. При таком тарифе час интернета в конце 2022 г. стоил бы 1067,5р.

cityline.ru, 1998 г.
cityline.ru, 1998 г.

С такими тарифами нужна серьёзная причина для выхода в интернет. Для этого Ситилайн разместил на своём сайте русскоязычные блоги: ставший популярным «Вечерний Интернет» Антона Носика, а также «Страна Советов», «Сеновал» и «Паровозов-news».

Скрин «Вечернего Интернета». Дизайн и название — Артемий Лебедев.
Скрин «Вечернего Интернета». Дизайн и название — Артемий Лебедев.

Однако вскоре пользователям не понадобится мотивация, ведь интернет станет доступнее. С развитием технологий цена подключения уменьшится, а число пользователей вырастет.

2000–2008 Эпоха расцвета

Скорость распространения интернета увеличивается, появляются вышки 2G. В Рунете всё больше бизнес-сайтов.

Эволюция дизайна сайтов для бизнеса в Рунете: от тягот чистого HTML до лаконичности и простоты создания
Эволюция дизайна сайтов для бизнеса в Рунете: от тягот чистого HTML до лаконичности и простоты создания
Скрины ресурсов того времени: Утконос (2003), 220 Вольт (2004), Холодильник.ру (2003).
Скрины ресурсов того времени: Утконос (2003), 220 Вольт (2004), Холодильник.ру (2003).

Внешний вид веб-страниц начала 2000-х:

  • прайс в виде документа, который можно скачать с сайта;
  • опросы «Как вы попали на наш сайт?»;
  • некоторые цены в у. е.

В 2000-х начинается работа с административными панелями и базами данных. Разработчики создают готовые системы управления веб-контентом Web Content Management System (WCMS): Drupal, WordPress, Joomla. Они помогают создавать сайты без знания кода и хранят файлы, а также содержат его базу данных.

В 2000 г. появляется первый российский конструктор для создания сайтов «Яндекс.Народ». Он имеет 80 вариантов оформления, а также чаты для онлайн-общения и гостевые книги. Недостатки сервиса — обязательная реклама (с 2013 г., после продажи другой компании) и плохая техподдержка.

narod.yandex.ru, 2000 г.
narod.yandex.ru, 2000 г.

Появляется JavaScript и другие инструменты для реализации визуальных эффектов. Благодаря Flash становятся популярны анимированные сайты.

В продажу поступают ADSL-модемы, не использующие для подключения телефонную линию. Можно сидеть в интернете, при этом не занимать телефон.

В 2004-2005 годах стартует первый большой проект по редизайну сайта Билайн. Объявлен тендер, который выигрывает компания Usethics. Билайн одним из первых решается инвестировать в пользовательский опыт.

Это было в новинку, свежо для рынка и по времени совпало с ребрендингом — переходом от сине-белого логотипа к жёлто-чёрному. В рамках ребрендинга перерабатывался пользовательский опыт как самостоятельный объект.

Из интервью директора Usethics Александра Белышкина

В 2006-м появляются соцсети ВКонтакте и Одноклассники — ресурсы, заменившие чаты и форумы. Вместе с ними зарождается маркетинг в соцсетях (SMM), сначала в онлайн-проектах, а потом и для крупного бизнеса.

В 2007 г. был выпущен первый сенсорный смартфон iPhone 2G, который не продавался в России. Его можно было купить только за границей.

2008–2010 Эпоха кризиса

В 2008 г. в РФ массово строят вышки 3G. Мировой финансовый кризис 2008-2010 гг. — время, когда руководители ищут, как снизить затраты бизнеса. Высокая стоимость рекламы в СМИ и наружной рекламы вынуждают бизнес продвигаться в интернете.

Эволюция дизайна сайтов для бизнеса в Рунете: от тягот чистого HTML до лаконичности и простоты создания
В это время появляются Ulmart.ru и citilink.ru
В это время появляются Ulmart.ru и citilink.ru

Внешний вид:

  • из контактов только телефон, пока нет ссылок на соцсети;
  • простота визуала;
  • обилие информации, длинная первая страница.

2010–2014 Устранение цифрового неравенства

В начале 2010-х интернет — норма для большинства россиян. В 2012 г. мобильные операторы РФ строят сети 4G, а в 2014 г. Правительство приступило к программе устранения «цифрового неравенства». «Ростелеком» устанавливает точки доступа в интернет в деревнях и сёлах.

В 2014 г. также был построен «Северный оптический поток», в результате чего скорость интернета увеличилась до 20 раз, а цены снизились.

В 2010 году получают широкое распространение смартфоны. Постепенно растёт количество людей, выходящее в сеть с мобильного телефона. Появляется потребность в адаптации сайтов.

<p>Ozon.ru в 2010. Обратите внимание на раздел «Объявления» в правом верхнем углу.</p>

Ozon.ru в 2010. Обратите внимание на раздел «Объявления» в правом верхнем углу.

Внешний вид:

  • сайты скорее похожи на каталоги;
  • плитка из товаров на весь экран, похожая на значки рабочего стола. Позднее её заменит слайдер.

2014–2017 Снова кризис?

В 2016 г. объём рынка интернет-торговли в РФ вырос на 21% по сравнению с прошлым годом и составил 920 млрд рублей.

В это время актуальны:

  • клиентоориентированность (персональные предложения, исследования ЦА, составление портрета клиента);
  • многоканальность (покупки как онлайн, так и офлайн);
  • повышение безопасности денежных переводов в интернете.
Сайт компании Ozon, 2014 г.
Сайт компании Ozon, 2014 г.
Яндекс.Маркет в 2014 году. Нашли корзину?
Яндекс.Маркет в 2014 году. Нашли корзину?

Внешний вид:

  • появляется раздел отзывов и возможность проголосовать за товар или против;
  • на некоторых сайтах есть мобильная версия;
  • каталог производителей вынесен в нижнюю часть экрана.

2017–2020 Развитие конструкторов

К 2017 году конструкторы сайтов становятся повсеместным решением, поэтому создать веб-ресурс самостоятельно стало легко даже без опыта. Работа строится по SaaS модели, т.е. пользователь арендует веб-приложение и создаёт свой сайт, а разработчик следит за работоспособностью, техподдержкой и обновлениями программы. В услугу входит CMS, домен и хостинг.

Особенности конструкторов конца 2010-х:

  • Актуальные технологии — на смену HTML приходит HTML5, внедряется CSS3, а Flash используется всё реже.
  • Актуальный дизайн — макеты создают профессиональные дизайнеры.
  • Адаптивные макеты как ответ на актуальную статистику. Компания StatCounter зафиксировала, что в 2016 году мобильные устройства впервые опередили десктопы по популярности: люди чаще выходят в интернет с телефонов (51,3%), чем с компьютеров (48,7%).
  • Специализация на определённом типе сайтов (лендинг / интернет-магазин / блог).

Не обходится без недостатков:

  • Чаще всего в это время используются иностранные сервисы, функционал которых на всегда понятно переведён на русский.
  • Конструкторы не интегрируются с сервисами Яндекса (Я.Метрика, Я.Директ) и соцсетями (VK, Одноклассники).
  • Проблемы с оплатой (используется непопулярный в РФ PayPal).
Конструктор для интернет-магазинов Мерчиум, 2017 г.
Конструктор для интернет-магазинов Мерчиум, 2017 г.
Конструктор для лендингов Borstch, 2017 г.
Конструктор для лендингов Borstch, 2017 г.

Внешний вид:

  • Зарождение ставших привычными трендов: mobile first, крутая анимация и параллакс, продуманный UX.
  • На первом экране можно встретить оффер — пользователь сразу видит, что предлагает компания.
  • Появляются полезные материалы за подписку.
  • Визуально выделена шапка сайта (хедер).
  • Есть ссылки на соцсети.

2020-2021 Пандемия

Из-за коронавируса мероприятия и живые встречи отменяются. Бизнес несёт убытки. Для того чтобы избежать банкротства, в дистанционный формат переходят даже офлайн-события. Например, сервис арт-вечеринок Painty, на которых люди с бокалом вина собирались и рисовали картины, проводит онлайн-тимбилдинги для компаний, интенсивы в Zoom и «арт-вечеринки лицом к лицу».

А лекторий Level One проводит онлайн-вебинары и лекции вместо концертов и выставок.

levelvan.ru, 2020 г.
levelvan.ru, 2020 г.

Внешний вид:

  • Близкий к 2023 г. дизайн, конечный продукт эволюции сайтов для бизнеса.
  • Пункты меню без рамок.
  • Аккуратность.
  • Есть основная палитра и акцентный цвет.

2022 Уход иностранных компаний из России

Массово закрываются иностранные компании, некоторые сайты прекращают работу в России. Бизнес-сайты, сделанные на иностранных конструкторах, теряют большинство функций. Это приводит к импортозамещению и даёт шанс проявить себя отечественным компаниям. Например, появляется российская замена Awwwards и Behance для дизайнеров и их заказчиков — Dprofile, а отечественный конструктор Craftum помогает перенести сайт с иностранных аналогов и запустить его всего за 129 рублей в месяц.

Adidas.ru в настоящее время
Adidas.ru в настоящее время
Dprofile.ru
Dprofile.ru
Craftum.com
Craftum.com

Внешний вид:

  • Встречается надпись «работа приостановлена».
  • Цены на некоторые продукты заставляют глаза удивлённо округлиться.
Цены на бумагу на Wildberries.ru в марте 2022 г. Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fpikabu.ru%2Fstory%2Fna_wildberries_prodayut_bumagu_za_12_tyisyach_rubley_8940206&postId=626524" rel="nofollow noreferrer noopener" target="_blank">Pikabu</a>.
Цены на бумагу на Wildberries.ru в марте 2022 г. Источник: Pikabu.

2023 Современные сайты для бизнеса

Сегодня мы с вами посмотрели на то, как развивался дизайн российских сайтов — от простых текстовых страниц без графики до привычного нам в 2023 году вида. Оформление сайтов менялось с появлением новых технологий и распространенностью интернета.

Сейчас в дизайне веб-страниц привычны:

  • адаптивные версии сайтов;
  • исследование целевой аудитории до начала работы;
  • акцент на UX-дизайне.

Также в 2023 г. легко создать красивый сайт для бизнеса самостоятельно, например, в конструкторе сайтов Craftum. Ваш сайт можно будет легко менять, не мучаясь с кодом или перезаливкой на хостинг, множество шаблонов украсит внешний вид, а заботливая техподдержка и комьюнити в Телеграм помогут днем и ночью.

*компания Meta Platforms Inc. признана экстремистской организацией и запрещена в России, её продукты Instagram и Facebook (инстаграм и фейсбук) также запрещены на территории РФ.

6464
23 комментария

эх, модем, интернет по часам на карточках))
Но раньше активные элементы у сайтов были однозначно понятнее. Сейчас дизайн более монолитный становится, что иногда приводит хоть и к визуальной целостности, но в итоге теряется юзабильность. Важно не забывать это в гонке за дизайн

13
Ответить

Комментарий недоступен

9
Ответить

Спасибо за статью и обзор новых сервисов! Я прям слови ностальгию по 2007 😀

7
Ответить

Включил видео - прослезился…

6
Ответить

И не говори… где мои 17 лет хDD

Ответить

Спасибо за ретро-обзор! Вспомнился сериал “IT crowd”, где герои ждали, пока прогрузится фото женщины с сайта знакомств и комментировали: «хорошие волосы… неплохой лоб… красивые глаза… с носом наверняка что-то не так! Да нет, нормальный нос. Красивая женщина»

6
Ответить

Дандер Миффлин обогатился бы с такими ценами на бумагу))

3
Ответить