Этапы разработки дизайна сайта: как идёт работа

Работа начинается с разговора, где выясняется одно: зачем человек попадёт на страницу и что он должен сделать. Заявка, звонок, заказ, подписка, просто понимание, чем вы отличаетесь. От ответа зависит вся дальнейшая раскладка, потому что страница под заявку и страница под доверие устроены по-разному.

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

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

Если у вас уже есть техническое задание, этап проходит быстрее. Если нет, ничего страшного: часть задания как раз и рождается из этого разговора, а формализовать его можно после.

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

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

Здесь же решается, сколько страниц нужно. Иногда одной хватает, и тогда речь про лендинг под ключ. Иногда нужен раздел услуг, блог и каталог, и это уже другая структура с навигацией и перелинковкой.

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

Макет, нарисованный под условный текст, почти всегда разваливается при наполнении. Заголовок, который в макете занимал одну строку, в жизни занимает три. Список из четырёх пунктов оказывается списком из одиннадцати. Карточка, рассчитанная на короткое описание, получает абзац.

Поэтому настоящие тексты собираются до отрисовки или параллельно с ней. Не обязательно финальные, но по объёму и смыслу близкие к тому, что будет. Тогда дизайнер видит реальную длину и раскладывает под неё, а не под красивую пустоту.

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

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

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

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

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

На этом этапе полезно смотреть не на макет целиком, а на один экран в реальном размере. Красивая раскладка в уменьшенном виде и та же раскладка на телефоне производят разное впечатление, и второе важнее.

У любого элемента, с которым можно взаимодействовать, есть состояния: обычное, при наведении, при нажатии, при фокусе с клавиатуры, неактивное. Если нарисовано только обычное, остальные придумает верстальщик, и они получатся такими, какими получатся.

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

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

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

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

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

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

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

Разработчику отдаётся не только картинка. Нужны размеры и отступы, поведение блоков при сужении экрана, состояния элементов, шрифты в файлах, картинки в нужных форматах и размерах. Всё, что не отдано явно, будет додумано, и не обязательно так, как вы себе представляли.

Отдельно описывается поведение на промежуточных ширинах. Макет обычно рисуют для широкого экрана и для телефона, а между ними лежит планшет и узкое окно на ноутбуке. Там раскладка чаще всего и ломается, потому что про эти размеры никто не договорился.

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

Если сайт делается на конструкторе, этот этап выглядит иначе: часть решений за вас уже принял шаблон, и дизайн подстраивается под его возможности, а не наоборот.

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

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

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

Лечится это скучно: правилами наполнения и регулярным присмотром. Часть студий закрывает такое поддержкой сайта, но и своими силами можно, если договориться, кто и по каким правилам добавляет новые блоки.

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

Найдите на странице главное действие. Оно должно быть одно и должно быть заметным без поиска. Если кнопок несколько и они равнозначны, посетитель не выбирает ни одну.

Проверьте, что происходит после отправки формы. Если ничего не происходит или появляется невнятная надпись, чинить надо это, а не палитру. Заявка, которая не подтверждена, воспринимается как пропавшая.

Соберите то, что у вас уже есть: логотип в исходниках, фотографии, тексты. Этот список честнее любого брифа показывает, с чего начнётся работа. Если хотите обсудить конкретно ваш случай, посмотрите дизайн сайта или напишите нам, разберём и скажем прямо, если задача решается без нового дизайна.