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

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

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

Итак, процесс разработки лендинга включает 3 больших этапа

  1. Этапы до дизайна
  2. Дизайн
  3. Этапы после дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. Дизайн

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

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

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

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

Нарезка

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

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

  1. Дополнительно прописываем, обозначаем все анимации, всплывашки и т.д. Либо даём ссылки на какие-то уже реализованные анимации.
  2. Весь контент, который скрыт в дизайне. Например, при нажатии на кнопку “подробнее” предполагается, что в поп-апе будет открываться подробная информация о продукте, то этот текст нужно предоставить верстальщику, указать где что взять.
  3. Функциональность. Если предполагается, что сайт будет на движке, мы прописываем для верстальщика, какой контент будет меняться. Например, возможность добавлять фотографии, текст, что-то удалять/менять и т.д.

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

  • Макет в фигме
  • Нарезку
  • ТЗ
  • Мы в студии ещё дополнительно устно это всё с верстальщиком проговариваем.
Процесс разработки дизайна лендинга. Чтобы верстальщик тебя на руках носил

1. Вёрстка

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

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

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

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

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

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

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

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

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

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

44
2 комментария

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

2
Ответить

Согласен, что-то с заголовком я намудрил действительно)))

Ответить