July 18, 2020

Кейсы

Маша

  1. Созвон/Бриф
  2. Аналитика
  3. Структура + прототип
  4. Решения в дизайне: цвет, шрифт, изображения, элементы, стиль
  5. Дизайн
  6. Верстка
  7. Настройка
  8. Передача + инструкция

Первый этап. Созвон

Пожелания Марии по стилистике:

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

Я предложила следующую структуру:
1. Обложка
2. Обо мне: образование + опыт + кнопка, ведущая на прямой эфир
3. Блоки с услугами
4. Видео
5. Отзывы
6. Каналы для связи
7. Кейсы. Карточка с названием кейсы, которая ведет на пост в инстаграме
8. Что такое коучинг и кому подходит

Материалы от Марии:
- ее фотографии
- текст для блоков
- отзывы
- ссылки для видео, постов, каналов связи
- стикеры от иллюстратора
- доступ к аккаунту Тильды (был уже создан)

Второй этап. Анализ конкурентов, целевой аудитории и продукта

Я прописала статью с подробным анализом + предложила свои идеи для преимуществ и различных фишек для сайта.
https://teletype.in/@cute.greb/BRZkZxrav

Третий этап. Структура + прототип.

Я предложила следующий вариант структуры и прототипа:

Квадрат с линиями - изображение
Синий цвет - кнопка/кликабельное изображение
Светло-серый квадрат - элемент дизайн в виде цветной фигуры

После обсуждения мы решили:

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

Четвертый этап. Решения в дизайне.

Шрифт.
С Марией мы уже работали на чек-листом, где был выбрана пара шрифтов:
- Lora - для заголовков; ассоциация со шрифтом - мягкость, изящность (стиль Марии в одежде -> личный бренд), последовательность (за счет засечек)
- Open Sans - для общего текста; ассоциация - структурность и ясность.

Цвета.
- мягкий зеленый -> креативность, принятие, экологичное(=этичное) отношение, спокойствие, возобновление, безопасность
- пастельный синий -> структурность, управление процессом, вдохновение и очищение
Остальные были выбраны для фон и текста

Элементы:
Мария предоставила иллюстрации, которые я использовала в блоке "вам ко мне, если..."
Каждое изображение послужило ассоциацией с темой текстового блока (боле, страхов и желаний)

Прямоугольники, рамки, стрелки, точки, косые линии (слэш) - все это добавляет ощущения бумаги и зарисовок к конспекту. Становится немного похожим на записи в блокноте /дневнике (структурность, доверие, просыпается интерес к "записям" )

Тень под некоторыми элементами - добавляет объем и убирает загруженность элементов, "висит в воздухе" - ощущение легкости и спокойствия

Пятый этап. Дизайн

Дизайн создавался в Фигме. Отправляли заказчику дизайн в виде ленты png на согласования. Были внесены несколько правок и добавлена кнопка на первый экран для перехода на блок с тренингом (запустились продажи)

Шестой этап. Верстка

  • адаптация под разные разрешения
  • анимация для кнопок
  • анимация появления блоков, текстов и изображений

Седьмой этап. Настройка

  • создание фавикона
  • вставка ссылок в кнопки и плитки (инстаграм)
  • настройка навигации
  • подключение пикселя