Процесс разработки дизайна лендинга. Чтобы верстальщик тебя на руках носил

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

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

Рассмотрим каждый из них.

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

1. Анализ проекта

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

Проект-менеджер получает и обрабатывает первичную информацию от заказчика. Он в буквальном смысле раскладывает всё по папочкам и передаёт маркетологу.

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

2. Идея проекта

После аналитического этапа создаём идею проекта. Один и тот же товар или услуга по сути всегда примерно одинаковые. И перед маркетологами всегда встаёт вопрос «А чем мы будем отличаться от конкурентов?» Хорошо, когда есть какое-то весомое преимущество. А в том случае, когда выделиться особо нечем, приходится тщательно поработать над созданием уникального предложения или всем известного УТП. Задача не из лёгких в наше время, когда все велосипеды уже изобрели, поэтому нам ближе понятие «идея проекта». Мы не придумываем никаких мнимых отличий, мы просто ищем интересные и новые формы презентации продукта. Например, один и тот же курс по веб-дизайну можно представить как игру, проект или стажировку.

3. Разработка структуры

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

4. Написание текста

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

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

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

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

1. Обсуждение проекта внутри команды

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

2. Следующий этап - подготовительный

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

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

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

3. Анализ конкурентов

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

На что смотреть у конкурентов?

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

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

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

4. Дизайн 1-3 блока

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

По времени - на этот этап у нас уходит 1-2 дня.

5. Дизайн

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

6. Адаптивы. ТЗ. Передача проекта в вёрстку.

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

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

Нарезка

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

ТЗ для верстальщика

В итоге передаём верстальщику:

1. Вёрстка

На ней мы не будем долго останавливаться. Это территория верстальщика)

2. Проверка макета после вёрстки

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

3. Перенос на движок. Согласование и передача заказчику

Затем сайт проходит финальную проверку у проект-менеджера и переносится на движок.

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

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

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

Ну и ждём, когда он вернётся за следующим проектом)

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