Пожелания заказчика: сайт должен быть легким, не перегружать сознание пользователя, одностраничник. Цель – познакомить пользователей с возможностями продукта Pina и дать возможность осуществить правильный выбор из линейки продуктов.

Как шла работа:

Было принято решение, что дизайн будет основываться на ассоциативном ряде к Pina: море, солнце и пляжные коктейли. Песочные и морской цвета сайта также появятся в административной панели сайта. Игривость в стиле и цветах должна компенсировать серьезность темы, создавая ощущение простоты использования.

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

Требования по содержанию сайта от Заказчика: скриншоты продукта, описание функциональных возможностей, тарифная сетка, возможность купить и возможность попробовать демо версию. Для бесплатной версии продукта – возможность ее скачать.

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

Логотип.

Был разработан логотип PinaCart, выполненный в стилистике сайта, а также варианты его цветового решения.

Финальная версия логотипа:

Сайт.

Главный смысловой блок сайта состоит из скриншотов продукта, его описания и возможности совершить покупку или попробовать онлайн-демо сайта.

Скриншоты меняют свой размер в зависимости от ширины экрана.

Вторым смысловым блоком сайта идет описание возможностей и преимуществ, которые пользователь получит при использование Pina.

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

Графические иконки помогли расставить акценты. Для сайт была специально разработана серия иконок.

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

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

Под слайдером расположен блок с сключевыми преимуществами системы Pina. Пользователь может получить подробную информацию и принять решение о покупке.

Следующий  блок – это тарифная сетка.

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

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

В конечном итоге у нас получился вот такой одностраничный сайт продукта Pina.

В заключение остается лишь добавить, что естественно существует разница между западным и отечественным рынком IT-продуктов, она хорошо видна и дизайне. Есть общемировые тренды дизайна, например, минимализм и лаконичность. Они применяются практически повсеместно, часто используется и российскими веб-дизайнерами.  На западе есть тенденция с кукольному, мультяшному дизайну. В России пока мало подобных примеров, особенно, если речь идет о крупных и серьезных продуктах и компаниях. Здесь отдается предпочтение более официальному стилю, без доли “веселья”.

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

Перейти на сайт