Процесс разработки дизайна гораздо шире, чем просто дизайн. В него входят ещё несколько подготовительных и дополнительных этапов, которые ты обязательно должен учитывать в работе.
Если ты фрилансер, ты можешь делать всё сам или делегировать какие-то задачи. Главное строить работу поэтапно. В этом случае и тебе будет комфортно работать, и результат будет отличный.
В этой статье мы описываем процесс разработки дизайна на примере лендинга. При создании корпоративных сайтов или интернет-магазинов немного другая последовательность и больше этапов. Но принцип один и тот же, поэтому начинаем с малого. Кроме того в какой-то другой студии сам процесс, и этапность могут выглядеть совершенно иначе. Поэтому мы здесь и в нашем телеграм-канале делимся конкретно нашими рабочими схемами и процессами, как у нас в студии это происходит.
Итак, процесс разработки лендинга включает 3 больших этапа
- Этапы до дизайна
- Дизайн
- Этапы после дизайна
Рассмотрим каждый из них.
Представим, что к нам пришёл заказчик и мы уже провели переговоры, заключили с ним договор и начали работать. Поэтому переходим сразу к делу - к первому этапу.
1. Анализ проекта
На этом этапе мы изучаем и анализируем информацию по проекту. Это бриф, ТЗ, презентации, сообщения, запись разговора и любые другие материалы, предоставленные заказчиком. Этим занимается, как правило, проект-менеджер и маркетолог.
Проект-менеджер получает и обрабатывает первичную информацию от заказчика. Он в буквальном смысле раскладывает всё по папочкам и передаёт маркетологу.
Маркетолог изучает всю информацию по проекту, сам продукт, сферу в целом, анализирует конкурентов и целевую аудиторию. Мы не будем здесь подробно останавливаться на методах. Если в двух словах, это просмотр различных форумов, соц.сетей, отзывов, посещение и анализ сайтов конкурентов. По времени данный этап занимает 1-2 дня.
2. Идея проекта
После аналитического этапа создаём идею проекта. Один и тот же товар или услуга по сути всегда примерно одинаковые. И перед маркетологами всегда встаёт вопрос «А чем мы будем отличаться от конкурентов?» Хорошо, когда есть какое-то весомое преимущество. А в том случае, когда выделиться особо нечем, приходится тщательно поработать над созданием уникального предложения или всем известного УТП. Задача не из лёгких в наше время, когда все велосипеды уже изобрели, поэтому нам ближе понятие «идея проекта». Мы не придумываем никаких мнимых отличий, мы просто ищем интересные и новые формы презентации продукта. Например, один и тот же курс по веб-дизайну можно представить как игру, проект или стажировку.
3. Разработка структуры
После аналитики и проработки идеи маркетолог совместно с копирайтером переходят к разработке структуры лендинга. Это содержание и порядок блоков. Прописывается название блока, его задача и основные тезисы или примерный текст. Дальше идёт согласование структуры с проект-менеджером, пока не с заказчиком, после чего проект переходит на следующий этап.
4. Написание текста
Это самый простой этап до дизайна. И, если мы хорошо поработали на первых двух: качественно изучили продукт, проанализировали конкурентов, выявили потребности целевой аудитории и разработали правильную логичную структуру, то написать текст не составит большого труда и не займёт больше одного дня.
После согласования структуры и текста внутри студии, мы отправляем текстовый прототип заказчику. Уделяем этому моменту особое внимание - всегда тщательно подготавливаем сопроводительное письмо и видео-презентацию, в которой рассказываем весь ход наших мыслей и работы. Так мы минимизируем количество правок, закрываем возможные возражения заказчика и ускоряем процесс согласования.
В общем, после согласования текстового прототипа мы, наконец, переходим к дизайну.
Без всякого сомнения, дизайн - это самый объёмный этап в разработке лендинга. Он включает в себя не просто процесс разработки красивой картинки, а состоит из нескольких самостоятельных этапов:
1. Обсуждение проекта внутри команды
Сначала маркетолог и копирайтер передают весь контент по проекту: бриф, ТЗ, материалы от заказчика, текстовый прототип - дизайнеру. Но не просто молча пересылают, а мы всей командой садимся и обстоятельно обсуждаем все важные моменты, на которые стоит обратить внимание дизайнеру. Важно, чтобы все одинаково понимали цели проекта.
2. Следующий этап - подготовительный
Тут все лишние персонажи удаляются, и дизайнер остаётся один на один с проектом. Но начинает он не с дизайна, а с углубленного изучения информации. Несмотря на то, что мы уже обсудили все важные детали проекта, дизайнер анализирует информацию со своей точки зрения - выделяет для себя моменты, на которые будет опираться при поиске идей в дизайне, референсев, конкурентов и т.д.
Например, в брифе особое внимание уделяет пунктам с референсами и пожеланиями заказчика по стилю и дизайну, какие сайты нравятся, какие, наоборот, не нравятся, определяет, какие фишки не будут противоречить теме и принципам дизайна.
На этом этапе дизайнер также определяет, каких материалов ему не хватает для проекта: логотипа, фото и т.д. И что ему необходимо уже сейчас, чтобы приступить к дизайну, а что может подождать. Но важно это всё сразу запланировать, запросить у заказчика и при необходимости составить дополнительные вопросы.
3. Анализ конкурентов
Уже в процессе изучения контента по проекту у дизайнера естественным образом начинает формироваться идея дизайна, которая продолжает развиваться и на следующем этапе - при анализе конкурентов. Если маркетолог анализирует конкурентов с точки зрения закрытия потребностей на сайте, то дизайнер смотрит на визуал. Важно смотреть не только те сайты, которые указал заказчик, а искать и другие сайты в той поисковой выдаче, в которой наш сайт будет с ними конкурировать.
На что смотреть у конкурентов?
Это могут быть любые интересные идеи, которые мы, например, можем видоизменить, докрутить и круто реализовать. И в таком исполнении это не будет считаться плагиатом. Также смотрим на цвета, характерные для данной темы, типографику, интересные элементы и т.д.
Не стоит пренебрегать этим этапом. Даже опытные дизайнеры всегда могут найти прикольные и рабочие фишечки на сайтах конкурентов.
Помимо конкурентов, дизайнер просматривает просто любые сайты, не обязательно по этой теме, на предмет вдохновения и реализации уже готовой идеи дизайна. Сохраняет это всё в отдельную папку, чтобы в любой момент можно было туда заглянуть.
4. Дизайн 1-3 блока
После того, как мы основательно подготовились, изучили всю информацию и просмотрели сайты конкурентов, переходим к дизайну. Лично мы в нашей студии делаем сначала дизайн первых трёх блоков в 2-ух разных стилистических решениях, согласовываем с заказчиком и только потом переходим к дизайну всего сайта.
По времени - на этот этап у нас уходит 1-2 дня.
5. Дизайн
После согласования с заказчиком дизайн-концепта и внесения возможных правок, приступаем к дизайну всех блоков. Вообще этап один из самых простых. Когда у тебя уже есть готовая дизайн-концепция в виде первых трёх блоков, сделать дизайн всего сайта не составляет труда. Причём времени это занимает примерно столько же, сколько и дизайн первых блоков.
6. Адаптивы. ТЗ. Передача проекта в вёрстку.
Итак, у нас есть десктопная версия макета, и она уже согласована с заказчиком. На этом работа дизайнера не заканчивается. Далее он отрисовывает всё, что “скрывается” в дизайне. Например, поп-апы, подготавливает все фотографии и изображения для слайдеров, всплывающие подсказки, выдвигающиеся меню, вид кликабельных элементов - в нормальном состоянии, при наведении, клике и т.д. Всё это рисует дизайнер, чтобы верстальщик не сидел и не додумывал, как это должно работать.
Дальше переходим к адаптивам и мобильной версии. Начинаем с мобильной версии, её делаем обязательно, так как на смартфоне должно выглядеть всё чётко. А дальше уже по необходимости, исходя из тз и сложности макета, делаем нужные адаптивы, например, под ноутбук или планшет.
Нарезка
После того, как подготовили все адаптивы, приступаем к нарезке десктопной версии- сохраняем макет по элементам, фонам, иконкам в свг, джпг или пнг формате. Главное, чтобы в сохранённых элементах был порядок. Нужно разложить всё по отдельным папкам: фоны, иконки, элементы, фавикон, шрифты. В отдельные папки нарезаем мобильную, адаптивы.
ТЗ для верстальщика
- Дополнительно прописываем, обозначаем все анимации, всплывашки и т.д. Либо даём ссылки на какие-то уже реализованные анимации.
- Весь контент, который скрыт в дизайне. Например, при нажатии на кнопку “подробнее” предполагается, что в поп-апе будет открываться подробная информация о продукте, то этот текст нужно предоставить верстальщику, указать где что взять.
- Функциональность. Если предполагается, что сайт будет на движке, мы прописываем для верстальщика, какой контент будет меняться. Например, возможность добавлять фотографии, текст, что-то удалять/менять и т.д.
В итоге передаём верстальщику:
- Макет в фигме
- Нарезку
- ТЗ
- Мы в студии ещё дополнительно устно это всё с верстальщиком проговариваем.
1. Вёрстка
На ней мы не будем долго останавливаться. Это территория верстальщика)
2. Проверка макета после вёрстки
После вёрстки макет возвращается к дизайнеру на проверку. Проверяем все версии на всех устройствах, всё ли на своих местах, всё ли работает и корректно отображается и функционирует. Если что-то не так, составляем список правок, отправляем верстальщику и дальше всё по тому же алгоритму.
3. Перенос на движок. Согласование и передача заказчику
Затем сайт проходит финальную проверку у проект-менеджера и переносится на движок.
Дорабатываем админку, заполняем контентом. Ещё раз всё проверяем и отправляем на согласование заказчику. Ну и если ты сделаешь всё так, как мы тут рассказали, заказчик скажет, какой ты молодец и всё согласует.
Затем переносим сайт на хостинг. Подключаем аналитику, метрику, оптимизируем контент, чтобы увеличить скорость загрузки. Также готовим подробную инструкцию по работе с админкой.
Передаём готовый сайт, инструкцию, логины и пароли заказчику.
Ну и ждём, когда он вернётся за следующим проектом)
Подпишись на наш телеграм-канал, где мы рассказываем про коммерческий дизайн и показываем работу студии изнутри: как работаем и общаемся с заказчикми, как ищем заказы, как разрабатываем дизайн, как решаем нестандартные задачи в разработке. И каждый четверг мы проводим стримы на актуальные темы для дизайнеров, зовём интересных гостей и отвечаем на вопросы.
