Дизайн сайта от брифа до готовых макетов

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

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

Что дизайнер спрашивает на старте

Бриф это не бумажка. Вопросы в нем определяют, попадет ли первая версия в цель.

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

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

Последний вопрос определяет весь график. Дизайн, сделанный под настоящий текст, ему подходит. Дизайн, сделанный под заглушку, это картинка, и когда придет настоящий текст, он в нее не поместится, а это переделка, а не правка.

Прототип и зачем он до картинки

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

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

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

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

Первый экран и главная

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

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

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

• Что вы делаете, простыми словами. Не слоган.
• Для кого или где. Сузить лучше, чем расширить.
• Одна причина читать дальше. Цена, срок, гарантия.
• Действие. Кнопка, до которой не надо листать.
• Способ связаться. Телефон или мессенджер, на виду.

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

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

Внутренние страницы и типовые шаблоны

Сколько уникальных макетов на самом деле нужно

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

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

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

Пустая корзина, ошибка, благодарность за заявку

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

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

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

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

Адаптив под смартфон

Основная часть трафика мобильная, а мобильную версию по-прежнему регулярно рисуют последней или не рисуют вовсе.

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

• Что убирается на маленьком экране. Декоративное, второстепенное.
• Что поднимается вверх. Контакт, цена, основное действие.
• Как ведет себя меню. И сколько в нем пунктов.
• Как выглядят таблицы и длинные списки. Напрямую они переносятся редко.
• Насколько крупные области нажатия. Палец это не курсор.

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

Сколько длится дизайн

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

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

Что передают в верстку

Макеты сами по себе не являются результатом. Разработчику передают набор.

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

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

Эту часть работы мы ведем внутри разработки корпоративных сайтов как единый процесс, потому что дизайн, купленный у одного поставщика и сверстанный другим, часто требует недели на сверку до начала верстки.

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

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

Как принимать макеты и сколько правок закладывать

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

Первый круг про структуру и содержание. Не пропущено ли что-то, верен ли порядок, туда ли поставлен акцент. Второй про детали. Формулировки, отступы, конкретные цвета.

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

• Соберите все замечания в одно сообщение. Пронумерованные, по страницам.
• Говорите, в чем проблема, а не как чинить. Дизайнер решит лучше.
• Определите, чье слово окончательное. До приемки, а не во время.
• Посмотрите с телефона. Не только на своем мониторе.
• Разделите обязательное и вкусовое. Их обрабатывают по-разному.

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

Что делать с фотографиями

Фотографии определяют впечатление сильнее раскладки, и думают о них обычно в последнюю очередь.

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

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

Ошибки, из-за которых дизайн переделывают дважды

Четыре повторяются постоянно.

Рисовали под текст-заглушку, настоящий текст пришел потом. Длина у него всегда другая, и раскладка, построенная вокруг заглушки, под него не подходит.

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

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

Изменили структуру после утверждения дизайна. Добавленный раздел, которого не было в прототипе, означает переделку шаблона, в который он попадает, а часто и соседних.

Сколько это стоит

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

Сайт компании на подготовленном шаблоне с вашим содержимым и фирменным стилем стоит от $1 000 до $2 000. Сайт с полностью индивидуальным дизайном по нескольким шаблонам стоит от $2 000 до $3 000.

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

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

Выводы

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

Значение имеет число шаблонов, а не число страниц, и сокращение количества по-настоящему уникальных это самый дешевый способ укоротить этап, не ухудшив сайт.

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