Что такое веб-дизайн и чем он отличается от графического

Веб-дизайн — это не «нарисовать красивую картинку», а спроектировать систему, которая выживет на 320 пикселях и на 4K, на медленном 3G и в скринридере.

«Дизайн — это не то, как это выглядит. Дизайн — это как это работает». — Стив Джобс

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

Главное отличие: в вебе вы не контролируете холст. Пользователь сам выбирает ширину окна, размер шрифта в настройках, тёмную тему, скорость интернета и устройство ввода. Хороший веб-дизайн закладывает эту неопределённость в проект с самого начала.

Среда диктует правила

Браузер — это не Photoshop. Текст переносится сам. Картинки грузятся не мгновенно. Кнопку нажимают пальцем шириной 9 мм. Сайт открывают с поломанным интернетом в метро. Эти ограничения — не помехи, а входные данные проекта.

Ниже — три кита, на которых стоит вся профессия:

Адаптивность — один макет работает на любом экране.
Доступность (a11y) — сайтом могут пользоваться люди с нарушениями зрения, моторики, слуха.
Производительность — страница грузится быстро даже на слабом канале.

Схематично роль веб-дизайнера в пайплайне выглядит так:

  ИССЛЕДОВАНИЕ        ДИЗАЙН            КОД             ПРОДАКШН
  ----------         ---------         ---------       ----------
  кто юзер?     ->  вайрфрейм    ->   вёрстка    ->   живой сайт
  что задача?        макет в Figma     CSS/HTML        аналитика
  контент?           прототип          компоненты      итерации
                        ^___________________|
                         фидбэк и правки

Разбор глубже: дизайн как набор ограничений

Опытные веб-дизайнеры любят повторять: «дизайн — это не свобода, а работа с ограничениями». В графике ограничения известны заранее: формат А3, CMYK, 300 dpi. В вебе ограничения переменные и заранее неизвестны. Ширина окна — от 320px до 4000px и больше. Размер шрифта пользователь может увеличить в настройках для слабого зрения, и ваш макет обязан это пережить. Тема может быть светлой или тёмной. Интернет — от гигабита до edge-соединения в подземке. Устройство ввода — мышь, палец, стилус, клавиатура, голос. Хороший дизайнер не пытается «зафиксировать» эти параметры, а строит систему, устойчивую к любой их комбинации.

Из этого следует важный практический вывод: веб-дизайн нельзя оценивать по одному скриншоту. Макет, который идеально выглядит на 1440px, может полностью разваливаться на 375px. Поэтому профессиональная оценка работы всегда многомерна: как ведёт себя на трёх ширинах, читается ли скринридером, что происходит при медленной загрузке, удобно ли пальцу. Эти вопросы и отделяют веб-дизайнера от человека, который «умеет в Фигме рисовать красиво».

Ещё одно отличие — веб-дизайн неотделим от технологии. Дизайнер, который не понимает, как работают grid, медиазапросы и каскад, рисует то, что невозможно или дорого собрать. Именно поэтому профессия живёт на стыке: лучший веб-дизайнер думает категориями компонентов, состояний и токенов, а не «слоёв в Photoshop». Он проектирует не картинку конкретной страницы, а правила, по которым из контента собирается любая страница.

Стоит закрепить и мысль о прогрессивном улучшении. Зрелый веб-дизайн строят слоями: сначала базовый слой, который работает у всех (осмысленный контент, читаемый текст, рабочие ссылки даже без сложного CSS и JS), а сверху — улучшения для тех, у кого современный браузер и быстрый канал. Если красивая анимация не загрузилась — пользователь всё равно получает содержание. Это противоположно хрупкому подходу «всё или ничего», где одна не подгрузившаяся деталь рушит страницу целиком. Прогрессивное улучшение — это уважение к разнообразию условий, в которых живёт ваш сайт: оно делает его устойчивым к плохой сети, старому железу и отключённым возможностям.

Как делают ПЛОХО

Рисуют пиксель-в-пиксель красивый макет шириной ровно 1440px, отдают разработчику и удивляются, почему на телефоне всё разъехалось. Думают категориями «страница как картинка», а не «система, которая адаптируется».

Как делают ХОРОШО

Сразу проектируют в трёх состояниях (мобайл, планшет, десктоп), думают о крайних случаях (длинное имя, пустой список, ошибка загрузки) и говорят с разработчиком на одном языке: отступы кратны сетке, цвета — токены, шрифты — масштаб.

Чек-лист

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

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