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

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

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

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, 2000 г.

Внешний вид

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

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

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

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

Aeroflot, 1996

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

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

Ответ на вопрос о мотивации кроется в стоимости интернета. Посмотрим, сколько бы стоил час подключения в 2022 с тарифами 1998 г.

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

cityline, 1998 г.

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

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

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

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

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

  Скрины ресурсов того времени: Утконос (2003), 220 Вольт (2004), Холодильник (2003).

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

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

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

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

narod.yandex, 2000 г.

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

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

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

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

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

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

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

В это время появляются Ulmart и citilink

Внешний вид:

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

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

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

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

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

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

Внешний вид:

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

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

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

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

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

Ozon в 2014

Яндекс.Маркет в 2014 году. Нашли корзину?

Внешний вид:

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

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

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

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

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

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

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

Конструктор для интернет-магазинов Мерчиум, 2017 г.

Конструктор для лендингов Borstch, 2017 г.

Внешний вид:

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

2020-2021 Пандемия

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

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

levelvan, 2020 г.

Внешний вид:

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

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

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

Dprofile

Craftum

Внешний вид:

• Встречается надпись «работа приостановлена».
• Цены на некоторые продукты заставляют глаза удивлённо округлиться.

Цены на бумагу на Wildberries в марте 2022

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

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

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

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

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

Ранее мы объясняли, как работает ChatGPT.