Кейсы
Маша
- Созвон/Бриф
- Аналитика
- Структура + прототип
- Решения в дизайне: цвет, шрифт, изображения, элементы, стиль
- Дизайн
- Верстка
- Настройка
- Передача + инструкция
Первый этап. Созвон
Пожелания Марии по стилистике:
- спокойно и лаконично
- мысли о принятии и поддержке
- структурность в дизайне
- использование графических элементов: буллеты, рамки, стрелочки
постепенная подача информации
Я предложила следующую структуру:
1. Обложка
2. Обо мне: образование + опыт + кнопка, ведущая на прямой эфир
3. Блоки с услугами
4. Видео
5. Отзывы
6. Каналы для связи
7. Кейсы. Карточка с названием кейсы, которая ведет на пост в инстаграме
8. Что такое коучинг и кому подходит
Материалы от Марии:
- ее фотографии
- текст для блоков
- отзывы
- ссылки для видео, постов, каналов связи
- стикеры от иллюстратора
- доступ к аккаунту Тильды (был уже создан)
Второй этап. Анализ конкурентов, целевой аудитории и продукта
Я прописала статью с подробным анализом + предложила свои идеи для преимуществ и различных фишек для сайта.
https://teletype.in/@cute.greb/BRZkZxrav
Третий этап. Структура + прототип.
Я предложила следующий вариант структуры и прототипа:
После обсуждения мы решили:
- поместить не только кейсы в блок, но и важные и продающие посты. Было решено разместить посты, которые могут закрыть возражения клиента.
- убрать блок о коучинге, так как на эту тему есть пост
- оформить каждую услугу отдельно и раскрывать ее на этой же странице
Прототип стал выглядеть так:
Четвертый этап. Решения в дизайне.
Шрифт.
С Марией мы уже работали на чек-листом, где был выбрана пара шрифтов:
- Lora - для заголовков; ассоциация со шрифтом - мягкость, изящность (стиль Марии в одежде -> личный бренд), последовательность (за счет засечек)
- Open Sans - для общего текста; ассоциация - структурность и ясность.
Цвета.
- мягкий зеленый -> креативность, принятие, экологичное(=этичное) отношение, спокойствие, возобновление, безопасность
- пастельный синий -> структурность, управление процессом, вдохновение и очищение
Остальные были выбраны для фон и текста
Элементы:
Мария предоставила иллюстрации, которые я использовала в блоке "вам ко мне, если..."
Каждое изображение послужило ассоциацией с темой текстового блока (боле, страхов и желаний)
Прямоугольники, рамки, стрелки, точки, косые линии (слэш) - все это добавляет ощущения бумаги и зарисовок к конспекту. Становится немного похожим на записи в блокноте /дневнике (структурность, доверие, просыпается интерес к "записям" )
Тень под некоторыми элементами - добавляет объем и убирает загруженность элементов, "висит в воздухе" - ощущение легкости и спокойствия
Пятый этап. Дизайн
Дизайн создавался в Фигме. Отправляли заказчику дизайн в виде ленты png на согласования. Были внесены несколько правок и добавлена кнопка на первый экран для перехода на блок с тренингом (запустились продажи)
Шестой этап. Верстка
- адаптация под разные разрешения
- анимация для кнопок
- анимация появления блоков, текстов и изображений
Седьмой этап. Настройка
- создание фавикона
- вставка ссылок в кнопки и плитки (инстаграм)
- настройка навигации
- подключение пикселя