3 заметки с тегом

иллюстрации

Рассказываем о продукте на странице интернет-магазина

Задача

На сайте компании есть формальная страница продукта, где его можно купить, но на ней мало рассказывается о самом продукте.

Страница неплохо работает для тех, кто уже хорошо знает продукт — им нужно его купить в очередной раз. Но она плохо работает для тех, кто зашёл глянуть на продукт в первый раз — здесь нет рассказа о нём.

А так как продукту есть чем похвастаться, то мы решили вытащить все преимущества наружу, сдобрить иллюстрациями, что должно повысить конверсию страницы.

Старая версия страницы продукта — неполное описание возможностей, невнятная подача в виде таблицы

Решение

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

Потом мы сравнили продукт с конкурентами и выяснилось, что по совокупности характеристик он не имеет прямых конкурентов — это было приятно.

Далее я начал макетировать каждый вариант в Figma — это сэкономило нам время и деньги на вёрстке реальной страницы и позволило взглянуть на проект «в живую».

Макеты в Figma сэкономили время и деньги на вёрстке, а также позволили «пощупать» результат

Вариант 1. Всего и побольше

Сперва мы сделали список характеристик и картинки веб-интерфейса — получилось плохо: характеристики смотрелись скучно, а картинки веб-интерфейса непонятно.

Вариант 2. Играем в шахматы

Потом мы решили расположить текст рядом с картинками в шахматном порядке — получилось лучше, но мы обнаружили, что у нас не хватает иллюстраций.

Если с иллюстрированием поддерживаемых протоколов всё понятно — набросал их логотипы на белый фон и готово, то как показать на картинке технические характеристики железа и блок с особенностями было неясно.

В итоге мы пришли к простому, но эффективному решению — показать «мясо». В пунктах про технические характеристики железа мы это самое железо показали, а чтобы не было скучно — сдобрили картинки подписями.

С блоком особенностей было сложнее — там перечень прямых конкурентных преимуществ, которые помогут покупателю реализовать любую задумку. Как это нарисовать? Решение пришло не сразу, хотя и оказалось простым — показать фотографию реального щита с оборудованием, что мы и сделали. Получилось хорошо, атмосферно.

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

Блоки Протоколы, Интерфейсы, Особенности и Архив

Вариант 3. Оптимизируем

Получилось хорошо, но длинно — решили сократить.

Можно было просто выкинуть часть блоков, но не для того мы это так усиленно пытались вытащить наружу. Поэтому мы блоки объединили и чуть сократили описание — так нам удалось сократить в объеме, но сохранить весь сок страницы.

Вариант 4. Реальность

Когда мы вышли на финишную прямую и осталось только сверстать макет, то оказалось, что из-за технических ограничений используемой сайтом платформы, так сверстать нельзя. Точнее можно, но оно будет криво адаптироваться под мобильные устройства — там где текст находился справа от картинки, он уезжал под неё и мы получали хаотичное чередование: текст — картинка — картинка — текст.

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

Поэтому мы пошли на компромисс — разместить текст слева от картинок. При такой вёрстке на мобильных устройствах картинки уезжают под текст и становится хорошо.

Структура итогового варианта страницы
Мобильная версия страницы

Заключение

В итоге получилось хорошо — мы подробно рассказали о продукте, вытащили все его преимущества наружу. Это должно положительно сказаться на заинтересованности нашим продуктом потенциальными покупателями. А так ли это — покажут метрики, которые мы собираем.

Иллюстратор и редактор: Саша Дегтярев
Советы и тестирование: команда компании Wiren Board

Посмотреть страницу на сайте компании
Скачать копию страницы png / zip, 2440кб

 31   11 мес   adobe illustrator   figma   веб-дизайн   иллюстрации   лендинг   текст

Статья о веб-интерфейсе контроллеров Wiren Board

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

В статье я показал как выглядит одна из частей встроенного ПО — веб-интерфейс. В ней я впервые применил новые для нас подходы — анимация изображений и создание виртуальной копии веб-интерфейса.

Задача

Написать статью о веб-интерфейсе контроллера Wiren Board для потенциальных покупателей.

Процесс

Первым порывом было набросать снимки экранов, расставить заголовки и разбавить немного текстом. Но в процессе выяснилось, что некоторые вещи скриншотами не показать.

Например, функции и назначение виджета — элемента текстовой панели. Основная и единственная функция виджета — группировка каналов разных устройств в одной карточке.

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

Анимация, в которой показана суть виджета

Сперва я сверстал классический вариант — длинная портянка из картинок, заголовков и текста. Но получилось громоздко, поэтому мы решили свернуть часть похожих картинок в галереи. Так у статьи появилась четкая структура и поиск нужной информации стал легче.

Но такое решение преподнесло сюрприз — скрипт галереи на сайте слева от картинки размещает подпись к ней, что отъедает добрую половину доступной ширины экрана и масштабирует картинки в два раза. Это привело к тому, что текст на картинках стал нечитаем и это меня не устроило.

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

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

Структура статьи, первый вариант — длинная портянка из картинок и второй — часть изображений свернуто в галерею
Рабочий стол в Figma: компоненты, экраны веб-интерфейса, кадры анимации и визуализация внешнего вида статьи
Кадры анимации
Виртуальные экраны веб-интерфейса
Компоненты веб-интерфейса

Верстка и публикация

Итак, формат статьи определен, иллюстрации сделаны, текст написан. На компьютере выглядит хорошо, а вот на мобильном устройстве галерея разъехалась:

  • текст стал гигантским,
  • картинку не видно,
  • буллеты внизу галереи сбились в кучу,
  • отступы стали неправильными,
  • листать галерею на мобильном устройстве неудобно.

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

Галерея на мобильном устройстве смотрится плохо
В мобильной версии мы развернули галерею — стало лучше

Итог

Это был интересный и неоднозначный проект, но результат получился хорошим. Спасибо команде Wiren Board за ценные замечания и возможность написать для них статью. Надеюсь она принесет пользу.

Текст и иллюстрации: Александр Дегтярев
Копия статьи: png / zip, 1579кб
Публикация: Читать статью на сайте Wiren Board

 41   2021   figma   html   анимации   иллюстрации   публикации   текст

Наглядно показал разницу между конфигурациями

Мы выпустили контроллер с удвоенным количеством памяти и потребовалось сделать две картинки: на сайт для опции и в инстаграм.

Для сайта

На сайте, при покупке контроллера, покупатель может выбрать опцию «1 ГБ» оперативной памяти. Каждая опция сопровождается иллюстрацией.

Но как иллюстрировать то, что нельзя пощупать? Можно было сфотографировать сами чипы памяти, но они отличаются одной циферкой и это как-то скучно. Тогда я обратился к пользе от увеличения памяти — много свободного места. Варианты родились сами собой.

Галерея вариантов, можно полистать
Финальный результат на сайте

Для Инстаграм

Теперь нужно было рассказать об опции в нашем инстаграм. Основную картинку сделала СММ менеджер, а мне дали скриншот консоли контроллера и сказали сделать было-стало.

Не стал изобретать велосипед, а просто поставил картинки одну под другой и подписал.

Иллюстрация для Инстаграм

Иллюстратор: Александр Дегтярев

 14   2021   adobe illustrator   gimp   smm   иллюстрации