Дизайн вебстраницы лендинга «Умный дом»
Предложенная заказчиком для исполнения тема предполагала создание дизайна страницы landing page длинной в 6 экранов, включая разработку прототипов десктопного и мобильного решения вебсайта. Работа была сделана в программе Figma.
Разработка сценария, дизайнерское решение
Сценарий взаимодействия посетителя с сайтом выстроен следующим образом…
-
slide_1 Привлекаем внимание
-
slide_2 Объясняем суть
-
slide_3 Определяем преимущества
-
slide_4 Снимаем возражения
-
slide_5 Предлагаем решение
-
slide_6 Направляем и информируем
Навигация от слайда к слайду решена традиционно с помощью якорных ссылок и предполагает последовательное движение по шагам сверху вниз. При этом каждый шаг (отдельный экран) по возможности содержит элемент активного действия пользователя = кнопку для открытия модального окна консультации, что и является в данном случае целью заказчиков сайта – вызвать посетителя на прямое взаимодействие через создание диалога - общения по всем интересующим посетителя сайта вопросам, связанным с системой умного дома… и закрепления результата посещения сайта.
Иллюстрация 2. Демонстрация всплывающего окна чата – целевого элемента. Дизайн вебстраницы лендинга «Умный дом».
Композиция каждого экрана создана так, чтобы каждый слайд выглядел визуально и информационно законченным отдельным блоком, преследующим свои рекламные и информационные цели…
Тексты подобраны и обработаны разработчиком в соответствии со структурой, пользовательским сценарием. Что касается графической части то здесь по возможности используется векторная графика, которая легко переводится в код и не нагружает сайт. Там же, где это невозможно, используются специальные форматы передачи изображений.
Для создания основного персонализированного образа и общего эмоционального фона проекта предполагается использование анимированного 3D-объекта на странице (некоего робота, с которым можно общаться и просить его выполнить некоторые простые действия... т.е. через игровой момент передать возможности демонстрируемого в рамках сайта товара/услуги). В рамках данного проекта этот образ представлен в общих чертах, дабы проиллюстрировать его поведение в анимации и общий функционал …
Таким образом, посетителю предоставляется возможность сразу же «поиграть» с этим «умным домом». Опять же, от этого и весь визуально-эмоциональный образ сайта, как продукта некоего недалекого будущего, в котором посетителю предлагают оказаться…
Иллюстрация 3. Полный вид дизайна лендинга с разбивкой на слайды. Дизайн вебстраницы лендинга «Умный дом».
Немного о технической части реализации
Сама структура файлов в Figma разработана с учетом максимального удобства при дальнейшей реализации (понятно сгруппирована и обозначена для верстальщика) так, чтобы вызывать минимум вопросов при реализации в виде кода HTML. Отдельно созданный мастер-файл содержит код микроразметки и метатеги, предлагаемые в рамках данного проекта.
Этой же цели служат использование технологий автолокаут, позиционирования элементов дизайна сайта внутри фреймов, создания вариативных мастер-компонентов, смарт-анимации, демонстрирующих изменение внешнего вида компонентов при изменении их взаимодействия в прототипе… а также использование сетки, типографики, цветовых стилей…
Здесь выложено в ознакомительных целях, для демонстрации возможностей дизайнера в плане создания подобных проектов
Просмотров:
