Дизайн вебстраницы лендинга «Умный дом»

Предложенная заказчиком для исполнения тема предполагала создание дизайна страницы landing page длинной в 6 экранов, включая разработку прототипов десктопного и мобильного решения вебсайта. Работа была сделана в программе Figma.

Разработка сценария, дизайнерское решение

Сценарий взаимодействия посетителя с сайтом выстроен следующим образом…

  • slide_1 Привлекаем внимание

  • slide_2 Объясняем суть

  • slide_3 Определяем преимущества

  • slide_4 Снимаем возражения

  • slide_5 Предлагаем решение

  • slide_6 Направляем и информируем

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

Иллюстрация 2. Демонстрация всплывающего окна чата – целевого элемента. Дизайн вебстраницы лендинга «Умный дом».

Иллюстрация 2. Демонстрация всплывающего окна чата – целевого элемента. Дизайн вебстраницы лендинга «Умный дом».

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

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

Для создания основного персонализированного образа и общего эмоционального фона проекта предполагается использование анимированного 3D-объекта на странице (некоего робота, с которым можно общаться и просить его выполнить некоторые простые действия... т.е. через игровой момент передать возможности демонстрируемого в рамках сайта товара/услуги). В рамках данного проекта этот образ представлен в общих чертах, дабы проиллюстрировать его поведение в анимации и общий функционал …

Таким образом, посетителю предоставляется возможность сразу же «поиграть» с этим «умным домом». Опять же, от этого и весь визуально-эмоциональный образ сайта, как продукта некоего недалекого будущего, в котором посетителю предлагают оказаться…

Иллюстрация 3. Полный вид дизайна лендинга с разбивкой на слайды. Дизайн вебстраницы лендинга «Умный дом».

Иллюстрация 3. Полный вид дизайна лендинга с разбивкой на слайды. Дизайн вебстраницы лендинга «Умный дом».

Немного о технической части реализации

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

Этой же цели служат использование технологий автолокаут, позиционирования элементов дизайна сайта внутри фреймов, создания вариативных мастер-компонентов, смарт-анимации, демонстрирующих изменение внешнего вида компонентов при изменении их взаимодействия в прототипе… а также использование сетки, типографики, цветовых стилей…

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

 

Просмотров: 162