Поначалу я почти ничего не умел показывать. На моей странице были слова, ссылки и строки, идущие одна за другой. Ни сложных переходов, ни огромных фотографий, ни интерфейсов, которые откликаются на курсор. Интернет был моложе, соединение медленнее, и сайт чаще напоминал документ, чем отдельный мир.

Хуже ли был тогдашний дизайн, сказать не берусь. Условия были другие: другие устройства, другие ожидания. Люди ещё не привыкли, что одна страница может быть сразу витриной, инструментом и историей.

Сначала нужно было просто показать информацию

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

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

Когда сайты захотели выглядеть как журналы

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

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

Многие из тех идей потом вернулись в новой форме: в CSS-анимации, видео, интерактивных историях, сценах на WebGL. Где такое движение помогает, а где мешает, разобрано в статье «Анимации на сайте». Повторять всё старое не нужно, но желание, чтобы сайт производил впечатление, никуда не делось.

Потом у каждого в кармане появился экран

Смартфоны поменяли правила. Проектировать сайт только под широкий монитор стало нельзя. Сетку, размеры текста, изображения и взаимодействие пришлось подстраивать под разные экраны. Без адаптивного дизайна сайт просто перестал нормально работать. Что чаще всего ломается на маленьком экране, мы собрали в статье «Красивый сайт, с которого хочется уйти».

Изменилась и композиция. Что эффектно на большом экране, на маленьком может не сработать. Иногда блоки приходится переставлять, сокращать второстепенное, по-другому кадрировать изображения или заново придумывать меню. Дизайн всё больше стал похож на набор правил, а не на один застывший макет.

От отдельных страниц к целым системам

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

Одинаковыми их это не делает. Система задаёт основу и не мешает индивидуальности. Правила типографики, отступов и поведения элементов можно оставить общими, а композиции делать разными там, где этого требует содержание.

Когда я научился изображать невозможное

Сегодня дизайнер может соединить фотографию, 3D, сгенерированные изображения, программную анимацию и сложную типографику. Настоящий предмет оказывается в невозможной обстановке, интерфейс ведёт себя как сцена из фильма, а сайт меняет настроение по мере прокрутки. Инструменты стали мощнее, но и перепутать эффект с идеей стало легче.

Сделать необычную картинку теперь проще, чем придумать, зачем она нужна конкретному бренду. Можно засыпать экран блеском, свечением и мелкими подписями и получить технологичный образ, который ничего не объясняет. Можно всё вычистить до минимализма и потерять индивидуальность. Добавить деталей легко, выбрать нужные гораздо труднее.

Состязаться в эффектах современному веб-дизайну незачем. Он ищет равновесие между образом и смыслом, свободой и понятностью. Иногда сильнее всего работает огромный объект, почти выходящий за край экрана. Иногда одна фраза и много воздуха. А иногда тонкая анимация, которую замечаешь не сразу, хотя без неё сцена кажется застывшей.

Что останется, когда технологии снова изменятся?

Инструменты будут меняться и дальше. Появятся новые способы делать изображения, строить интерфейсы и работать с контентом. А человеку по-прежнему нужно будет понять, куда он попал, что ему предлагают и что делать дальше. Ему всё так же будут важны ритм, контраст, ясность и доверие, ощущение, что перед ним не случайный набор элементов.

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

Как выбрать формат для своей идеи

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

Что из этого следует

Прямой дороги от простого к красивому в истории веб-дизайна не было. Были новые возможности, ошибки, эксперименты и постоянные возвращения к одним и тем же вопросам: что мы хотим сказать, кому и как человек сможет это понять. Самые интересные проекты пользуются технологиями ради идеи, которую без них трудно было бы выразить.

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

— SOMO STUDIO