Лендинг для заказа умной колонки из будущего
Анализ, разработка концепции, написание текстов совместно с Chatgpt, создание изображений в соответствии с разработанной концепцией совместно с MidJourney, создание баннеров для иллюстрации инноваций в Adobe Photoshop, проектирование интерфейсов
Лендинг для заказа умной колонки из будущего
Анализ, разработка концепции, написание текстов совместно с Chatgpt, создание изображений в соответствии с разработанной концепцией совместно с MidJourney, создание баннеров для иллюстрации инноваций в Adobe Photoshop, проектирование интерфейсов
Задача
Придумать умную колонку с голосовым помощником из будущего. Оснастить ее функциями, прописать характеристики. Спроектировать лендинг для заказа такой колонки, представив три модели в разных ценовых категориях.
Что сделано
Проведен анализ современных аналогов умной колонки, придуманы инновационные функции, изучены технологии, с помощью которых они могли бы быть воплощены с помощью ChatGPT. Сгенерированы изображения всех моделей колонки при помощи MidJourney.
Разработана структура лендинга. Решено было предоставить пользователю легкий следующий шаг в виде записи на тест-драйв колонки, чтобы получить контактные данные потенциальных покупателей и дать им бесплатную пользу для увеличения доверия и лояльности. Также был выделен отдельный блок для инноваций, который помогает объяснить новые термины и продемонстрировать функции с помощью иллюстраций и анимации, созданных в Adobe Photoshop.
Создан макет страницы и UI-kit.
Проект был выполнен мной как тестовое задание.
Для умной колонки из будущего идеально подходит сочетание белого и синего. Синий цвет подчеркивает передовой и инновационный характер продукта, а белый — его простоту и удобство использования.
Использование прямоугольников в качестве основной формы придает интерфейсу колонки ощущение уверенности и надежности, что вызывает доверие у пользователей.
Оставила много воздуха для того, чтобы акцентировать внимание на самом продукте. При этом все элементы структурированы, размещены по сетке. На всех экранах соблюдается визуальная иерархия, взгляд пользователя направлен по зигзагообразому маршруту. Снова подчеркиваем технологичность, при этом простоту использования.
Самые крупные и детализированные изображения на странице — фото самой колонки, сгенерированные мной совместно с midjourney. И композиция, и выбор цвета и форм работают на то, чтобы создать на них дополнительный акцент.
Кнопка «Сравнение характеристик».
Изображения.
Композиция.
Формы.
Цветовая схема.
Также были созданы иллюстрации и анимация для инновационных фичей колонки в Adobe Photoshop, чтобы облегчить понимание новых терминов.
При этом я также уделяла внимание деталям, скругляя углы там, где это возможно, чтобы зарифмовать формы элементов с формой самой колонки.
Черный был выбран как максимально контрастный фоновому белому для того, чтобы усилить акценты и сделать текст более читаемым. Для удобства пользователей контрастность черного снижена, выбран цвет #333333, чтобы глаза меньше напрягались.
Описание решений
То есть, технические характеристики интересны только для сравнения моделей, поэтому должны быть показаны одновременно. Опять же, под спойлер я их занесла тоже потому, что они для выбора не первостепенны, первостепенны инновации, которым выделен отдельный блок.
Выделила отдельным пунктом, потому что решение не самое распространенное: сделать кнопку на всю ширину контентной части через 3 карточки.
Не самое распространенное, но самое логичное в данном случае, потому что пользователи не выбирают между моей колонкой и другой, она вне конкуренции из-за перечисленных выше инновационных функций, поэтому сравнение происходит только между разными моделями колонки.
ГАЛЕРЕЯ ПРОЕКТА
Главный экран
Главный элемент в визуальной иерархии — изображение колонки. Вывела теги с функциями, которые являются еще и преимуществами и отличают колонку от конкурентов.
В качестве конверсионного элемента на главный экран добавлена кнопка с переходом на промо-видео товара с демонстрацией его работы.
Иллюстрации для инноваций
Изображения были созданы путем коллажирования, улучшены с помощью ретуширования, цвето- и светокоррекции, а также создана анимация. Работа осуществлена в Adobe Photoshop
Элементы UI
UI-kit собран из компонентов, внутри вариантов настроена анимация при наведении
СТРАНИЦА ЦЕЛИКОМ
