UX/UI дизайн интернет магазина

Разработан красивый и «чистый» дизайн, который полностью соответствует позиционированию и визуальному концепту сайта интернет-магазина. Создали удобную структуру, чтоб с любого места на сайте можно было перейти на нужную страницу.

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

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

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

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

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

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

В блоке карточки товара мы создали несколько основных действий:
1. Подали всю самую важную информацию о продукте и добавили видеообзор
2. Дали информацию о стоимости и способах доставки, дополнительных услугf[ и информацию о кэшбеке

Тщательно проработан процесс оформления заказа:
На 1 этапе мы даем возможность пользователю оставить контакты без заполнение всех форм (быстрый заказ)
На 2 этапе мы закрепляем список покупок справа, давая возможность четко видеть товары и их стоимость в процессе оформления, если пользователь что-то забудет
На 3 этапе, после отправки формы, мы еще раз дублируем информацию о заказе, чтобы пользователь мог перепроверить данные и выписать номер заказа

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

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

В связи с большим объёмом работы, было решено отдельно создать страницу с реализованными проектами, чтобы будущие клиенты могли оценить качество и эффективность работы Lika комфорт.

Кейс: Разработка крупного маркетплейса Shopping.ua

Клиент

Наш клиент — украинский маркетплейс. SHOPPING.UA — это онлайн-площадка, где собраны только украинские бренды одежды, обуви и аксессуаров.

Задачи

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

Используемые технологии

Front-end: React.js
Back-end: PHP Framework Laravel

Решения

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

Кейс разработка маркетплейса

Поскольку маркетплейс подразумевает продажу большого количества товаров, была разработана структура сайта, согласно правилам и требованиям UX. Основной каталог был сегментирован на 3 основных сегмента: Женщинам, Мужчинам и Детям, что позволяет быстро и легко находить нужный товар. Также для каждого сегмента была разработана стандартная структура каталога по типам одежды, обуви и аксессуаров. Благодаря такой разбивке сайт не кажется «сложным» и даже самый неопытный пользователь не запутается при выборе товара.

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

Кейс разработка маркетплейса

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

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

Кейс разработка маркетплейса
Также на главной странице размещены быстрые переходы к брендам, представленным на сайте, новинкам, распродаже, актуальным категориям товаров. Отдельный блок выделен под акции.

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

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

Кейс разработка маркетплейса

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

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

Кейс разработка маркетплейса

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

Кейс разработка маркетплейса

Бэкенд сайта реализован на PHP-фреймворке Laravel. Это позволило создать сайт с нуля и реализовать все идеи заказчика на должном уровне.

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

Разработка сайта для Total Control

Клиент

Наш клиент — крупный холдинг на рынке нефтепродуктов, транспортной телематики и спутниковой навигации в Украине Торговый Дом «СКФ». Компания работает на рынке с 2010 года и входит в пятерку лидеров отрасли. Имеет партнеров около 100 компаний во всех регионах Украины. Систему Total Control используют в своей повседневной работе более 1000 компаний.

Цель

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

Задачи

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

Используемые технологии

Front-end: React.js

Back-end: Framework Laravel

Решения

Первым делом мы провели маркетинговое исследование, изучили рынок, ЦА и конкурентов. Нашим дизайнером был разработан уникальный логотип в утвержденной стилистике. За основу взяли 2 цвета: синий и оранжевый. Эти же цвета используются в дизайне сайта.

Кейс разработка сайта

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

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

Далее идет блок с преимуществами компании, и ниже интерактивный блок с категориями товаров, который ведет в каталог сайта. В каждой категории добавлена анимация при наведении.

Контент на страницах загружается быстро, благодаря внедрению при Front-end разработке библиотеки React. Особенно это полезно при плохом соединении интернета и на медленных устройствах.

Кейс разработка сайта

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

Кейс разработка сайта

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

Кейс разработка сайта

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

Кейс разработка сайта

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

Кейс разработка сайта

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

Кейс разработка сайта

Бэкенд сайта реализован на PHP-фреймворке Laravel. Это позволило создать сайт с нуля и реализовать все идеи заказчика на должном уровне.

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

Разработка сайта для интернет-магазина климатической техники Лика Комфорт

Клиент

К нам обратилась компания Лика-Комфорт, которая работает на украинском рынке систем вентиляции, кондиционирования и энергосбережения от ведущих мировых производителей. На рынке представлена с 2004 года.

Цели

Создать сайт интернет-магазин для компании, занимающейся продажей и монтажом климатической техники.

Задачи

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

 

Используемые технологии

Front-end: React.js

Back-end: Framework Laravel

 

Решения

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

Лика Комфорт

 

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

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

Разработка интернет-магазина

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

Далее на главной странице размещены товарные блоки с новинками, акционными товарами. Эти блоки помогают клиенту определиться с покупкой и завлекают в каталог магазина.

Разработка интернет-магазина

 

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

Разработка интернет-магазина

 

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

Разработка интернет-магазина

Далее рассмотрим карточку товара, она достаточно функциональна и удобна, позволяет сосредоточить и акцентировать внимание пользователя на главном. Есть возможность покупки в 1 клик без регистрации аккаунта, добавления к заказу дополнительных услуг, добавления товара в Избранное и в Сравнение. Отзывы о товаре и оценку могут оставлять только зарегистрированные пользователи с подтвержденной покупкой данного товара. На странице ярко выделена кнопка «Купить», крупным текстом добавлена цена и сумма кешбека для стимулирования пользователя к приобретению товара. Интерфейс карточки позволяет переключиться сразу на характеристики, описание товара, отзывы без скроллинга страницы.

Разработка интернет-магазина

Информация на карточке товара дает исчерпывающие ответы на все вопросы покупателя.

Разработка интернет-магазина

 

Для повышения юзабилити и конверсии сайта был внедрен функционал по подбору оборудования в режиме онлайн. Всего 3 шага и пользователю открывается ассортимент подходящего оборудования исходя из его потребностей.

Разработка интернет-магазина

Бэкенд сайта реализован на PHP-фреймворке Laravel. Это позволило создать сайт с нуля и реализовать все идеи заказчика на должном уровне.

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

Разработка интернет- магазина “Desko”

Клиент

Наш клиент — группа компаний «Деско» — крупнейший дистрибьютор на рынке Украины. Начиная с 2000 года компания поставляет на украинский рынок профессиональную продукцию ведущих мировых производителей для парикмахерских салонов, косметологических и маникюрных кабинетов.

Цели

Разработка яркого, но в тот же момент минималистичного сайта для интернет-магазина “Desko”. Создание удобной формы заказа и проектирование интересной навигации.

Решение

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

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

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

Проработка индивидуальной страницы 404 с анимационными эффектами.

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

кейс мобильная версия сайта

Этапы выполнения проекта:

  1. Формирование структуры сайта.
  2. Подбор готового решения.
  3. Программирование и дизайн отдельных элементов
  4. Сбор информации и наполнение сайта контентом
  5. Подключение сторонних сервисов
  6. Проверка работоспособности всех элементов и навигации

Разработка LMS для обучения онлайн

Цель

Создание системы управления обучением (LMS) для администрирования учебных онлайн-курсов для компании дистрибьютора профессиональной косметики для волос и парикмахерского оборудования. Разработка функциональной платформы с удобным интерфейсом и лаконичным дизайном.

Программную платформу LMS систему необходимо разработать в рамках сайта компании, как отдельный раздел «Обучение».

Решение

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

Была создана система фильтрации по курсам и видеолекциям для удобства поиска.

Кейс разработка системы LMS

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

Кейс разработка системы LMS

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

Кейс разработка системы LMS

Там же в личном кабинете есть возможность онлайн просматривать видеоуроки или загружать их на свое устройство.

Кейс разработка системы LMS

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

Отдельно нами была также разработана адаптивная мобильная версия.

Кейс разработка системы LMS

Создание корпоративного сайта СБ «Статус»

Клиент

К нам обратилась известная компания, которая предоставляет охранные услуги в городе Киев и Киевской области, СБ «Статус». Имеет опыт в охранном бизнесе более 28 лет.

Цели

Разработка корпоративного сайта СБ «Статус» с элементами захвата клиентов. Создание удобной панели администрирования для добавления контента и обновления информации о новостях и акциях.

Решения

Создание корпоративного сайта с лаконичным дизайном. Добавление формы онлайн-расчета стоимости услуг (в виде калькулятора) и кабинета плательщика за услуги онлайн.

Сайт выполнен в светлых цветах, которые гармонируют с логотипом СБ «Статус». Навигация по сайту разработана таким образом, чтобы клиент мог быстро найти интересующие его услуги. Страницы разбиты по типу предоставляемых услуг.

Кейс разработка сайта

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

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

Кейс разработка сайта

В режиме онлайн пользователь сможет посчитать итоговую стоимость услуг охраны при помощи интерактивного калькулятора. Справа от калькулятора – форма обратного звонка.

Кейс разработка сайта

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

Кейс разработка сайта

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

Кейс разработка сайта

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

Кейс разработка сайта

Этапы реализации проекта:

  1. Разработка прототипа сайта, основных страниц навигации.
  2. Разработка дизайна сайта, прорисовка отдельных страниц и элементов.
  3. Верстка сайта. Создание адаптивной верстки сайта, анимации на главной и внутренних страницах.
  4. Подключение платежных сервисов для оплаты услуг онлайн.
  5. Проверка работоспособности всех элементов сайта и сдача проекта.

Разработка сайта для интернет-магазина Stall

Цели

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

Решения

Мы использовали популярный тренд в веб-дизайне 2020 — неоморфизм. Для кнопок было разработано три состояния, чтобы при нажатии они реалистично опускались.

На сайте используются преимущественно два цвета – фирменные цвета Stall — зеленый и фиолетовый. Фон нейтрально-белый, что позволяет сосредоточиться на товарах.

Главная страница — это лицо интернет-магазина. Чтобы заинтересовать пользователя с первого взгляда, нужно показать самое важное и лучшее, что есть в ассортименте. Поэтому мы выделили такие блоки как «WOW товары», «Рекомендованные товары», «Видеообзоры», «Покупают прямо сейчас» и др.

кейс разработка интернет магазина

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

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

кейс разработка сайта иконки

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

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

кейс мобильная версия интернет магазина

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

кейс мобильная версия сайта веб дизайн

Этапы выполнения проекта:

  1. Постановка целей и задач сайта
  2. Создание, проработка технического задания (ТЗ) на разработку сайта
  3. Формирование структуры сайта
  4. Создание прототипа сайта
  5. Создание макета дизайна сайта
  6. Верстка и программирование сайта
  7. Сбор информации и наполнение сайта контентом
  8. Подключение сторонних сервисов
  9. Проверка работоспособности всех элементов и навигации
  10. Сдача готового проекта клиенту

Разработка сайта для Броварского завода пластмасс

Создание лаконичного корпоративного сайта с элементами интернет-магазина для ОАО «Броварской завод пластмасс».

Цели и задачи

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

Решения

Сайт разработан в корпоративной стилистике компании. На главной странице мультимедийные элементы стилизованы под продукцию компании (трубы). С увеличения удобства пользования ресурсом и получением контактных данных для последующей обработки отделом продаж, были добавлены точки захвата: «Заказать обратный звонок», «Заказать в один клик». Настроена удобная навигация между видами продукции.

Карточки товара разработаны с учетом специфики целевой аудитории – сайт предназначался одновременно для покупателей крупного и мелкого опта. На каждой странице товара располагается развернутое описание продукции, техническая документация и прайс-лист. Предусмотрена кнопка покупки в один клик.

На главной странице расположены графические элементы, по стилистике повторяющие строгие формы логотипа.

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

Учитывая специфику организационно-правовой формы компании – Открытое акционерное общество, был предусмотрен раздел для регулярного обновления информации о компании. Чтобы упростить Клиенту наполнение сайта, была создана страница с возможностью добавления документации в PDF-формате через административную панель.

Этапы выполнения проекта:

  1. Разработка прототипа, проработка навигации между страницами.
  2. Создание индивидуального дизайна сайта в корпоративной стилистике.
  3. Адаптивная верстка сайта.
  4. Наполнение сайта контентом, проверка работоспособности всех элементов и навигации.

Создание интернет магазина дизайнерских украшений «SAMOKISH»

Цели

Создание лаконичного и стильного интернет магазина дизайнерских украшений  «SАМOKISH». Разработка сайта с элементами посадочной страницы, простой формой заказа и проектирования удобной навигации.

Решения

Главной дизайнерской идеей сайта является минималистичный стиль.

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

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

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

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

Было создано блок для актуальных новостей о магазине. Удобные навигации дают возможность сразу перейти в блог на сайте или публикацию в социальной сети Instagram. Фишкой социальной сети Instagram является то, что обновленные новости со страницы автоматически публикуются на сайте магазина.

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

В карточке товара есть возможность просмотра путем предыдущий \ следующий товар. Простой кабинет заказа дает возможность для удобного оформления покупки. Увеличение в один клик, позволяет пользователям сайта более подробно осмотреть товар.

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

Этапы выполнения проекта:

  1. Формирование структуры сайта.
  2. Подбор готового решения.
  3. Программирование и дизайн отдельных элементов
  4. Сбор информации и наполнение сайта контентом
  5. Подключение сторонних сервисов
  6. Проверка работоспособности всех элементов и навигации

Разработка лендинга для студии маникюра

Цели

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

Решения

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

Исходя из задач мы подобрали для клиента подходящее готовое шаблонное решение, адаптировали дизайн под фирменный стиль салона. Использовали корпоративный зеленый цвет в разных оттенках, и дополнили пастельным персиковым. Данная цветовая гамма удачно подходит для восприятия женской целевой аудиторией. Заранее были продуманы все разделы меню, юзабилити, удобная навигация. Оптимальной платформой для выполнения задачи стала CMS WordPress.

разработка лендинга кейс

В проекте мы реализовали анимацию 1-го экрана, также блоков «О нас», «Наши услуги» и «Наши работы».

Разработка лендинга кейс

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

Кейс разработка лендинга

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

разработка лендинга

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

Разработка интернет-магазина «Delicates gastro boutique»

Цели

Создания удобного сайта для быстрого заказа товаров и простой панели администрирования– одни из основных требований заказчика.

Решения

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

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

В футере сайта при наведении курсора можно выбрать популярные продукты и перейти к покупке товаров.

Для удобного просмотра продуктов были добавлены кнопки впередназад.

Этапы выполнения проекта:

  1. Создание прототипа для сайтов.
  2. Разработка индивидуального дизайна в корпоративном стиле. Адаптация дизайна для каждого ресурса.
  3. Адаптивная верстка сайтов.
  4. Базовое наполнение контентом, проверка работоспособности всех элементов ресурса.
  5. Сдача проекта.

Разработка корпоративного сайта для компании «Well Security»

Цели

Разработка современного корпоративного сайта компании «Well Security». Показать перечень продуктов и услуг компании.

Решения

Был создан сайт с подробным описанием услуг и готовых решений для бизнеса. Основные элементы сайта усиливаются анимационными эффектами при наведении мыши.

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

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

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

Подача возможностей системы в интересной, доступной форме.

Этапы реализации проекта:

  1. Разработка прототипа сайта, основных страниц навигации.
  2. Разработка дизайна сайта, прорисовка отдельных страниц и элементов.
  3. Верстка сайта. Создание адаптивной верстки сайта, анимации на главной и внутренних страницах.
  4. Подключение платежных сервисов для оплаты услуг онлайн.
  5. Проверка работоспособности всех элементов сайта и сдача проекта.

Разработка сайтов для ООО «НОВА СТАЛЬ»

Разработка двух сайтов для ООО «НОВА СТАЛЬ» — корпоративный сайт и сайт по продаже профнастила и металлочерепицы.

Цели и задачи

Создание двух сайтов в одной корпоративной стилистике, но разной направленности. Полноценный корпоративный сайт для B2B сегмента – сотрудничества с дилерами оцинкованной стали в рулонах по Украине и сайт с элементами интернет-магазина для B2C сегмента по продаже профнастила и металлочерепицы конечным потребителем.

Решение

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

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

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

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

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

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

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

Этапы выполнения проекта:

  1. Создание прототипа для сайтов.
  2. Разработка индивидуального дизайна в корпоративном стиле. Адаптация дизайна для каждого ресурса.
  3. Адаптивная верстка сайтов.
  4. Базовое наполнение контентом, проверка работоспособности всех элементов ресурса.
  5. Сдача проекта.

Создание небольшого интернет-магазина

Цели

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

Решения

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

Исходя из задач мы подобрали для клиента подходящее готовое шаблонное решение, адаптировали под специфику бизнеса. Заранее были продуманы все разделы меню, юзабилити, удобная навигация. Оптимальной платформой для выполнения задачи стала CMS WordPress. Стоит отметить, что данное решение актуально только для небольших и средних магазинов.

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

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

Нашим дизайнером были разработаны иконки с преимуществами в соответствии с общей цветовой гаммой и фирменным стилем.

разработка сайта иконки

Достаточно информативной и лаконичной является карточка товара, ярко выделена кнопка «Додати у кошик», также большое значение для повышения продаж и лояльности клиентов к магазину имеет блок «Схожі товари» и возможность устанавливать размер скидки на продукты.

Интуитивно понятен и удобен процесс покупки товара на сайте.

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

Мы подобрали и добавили на сайт такие важные блоки и модули, как «Останні колекції», «Нові надходження», «Топ продажів», «Переглянуті товари». Они помогают привлекать и удерживать покупателей, тем самым стимулируя продажи.

Этапы выполнения проекта:

  1. Постановка целей и задач сайта
  2. Подбор готового решения, корректировка шаблона с учетом фирменного стиля
  3. Подбор набора необходимых модулей
  4. Сбор информации и наполнение сайта контентом
  5. Проверка работоспособности всех элементов и навигации
  6. Сдача готового проекта клиенту

Разработка сайта для сервиса мониторинга цен конкурентов Uxprice

Цели

Создание информационного сайта с указанием основной информации о функционале системы Uxprice. Использование корпоративных цветов и создание удобной навигации.

Решения

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

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

Разработка анимационного блока для лучшей визуализации.

Основной текст с подробным описанием скрытый под спойлер, только при наведении курсора он ярко раскрывается для пользователя.

На сайте представлена полная информация о стоимости системы в доступной форме.

Этапы выполнения проекта:

  1. Формирование структуры сайта.
  2. Подбор готового решения.
  3. Программирование и дизайн отдельных элементов
  4. Сбор информации и наполнение сайта контентом
  5. Подключение сторонних сервисов
  6. Проверка работоспособности всех элементов и навигации

Разработка корпоративного сайта для компании ООО «ВЕКТОРТУЛ»

Цели

Создание лаконичного корпоративного сайта с элементами интернет-магазина для компании ООО»ВЕКТОРТУЛ»

Решения

Создание простого в навигации сайта с продающими элементами. Разработка дизайна в корпоративной стилистике компании.

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

Чтобы больше рассказать об компании с главной страницы мы сделали блок, где расписали про преимущества кампании оформив ее в интересной и читабельной форме.

Каталог товаров – анимированный. Для удобного выбора категорий товаров при наведении курсора раскрывается полная информация о производителе.

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

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

Этапы выполнения проекта:

  1. Разработка прототипа, проработка навигации между страницами.
  2. Создание индивидуального дизайна сайта в корпоративной стилистике.
  3. Адаптивная верстка сайта.
  4. Наполнение сайта контентом, проверка работоспособности всех элементов и навигации.

Персональный сайт Татьяны Яненко “Texture.live”

Цели

Разработка имиджевого презентационного сайта.

Решения

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

Увеличение фотографий в широком формате дает возможность детально пересмотреть авторские работы.

Шапка сайта остается неподвижной при переходе на другие страницы, таки образом можно быстро перейти в следующий раздел сайта.

Большие анимированные кнопки лаконично дополняют дизайн сайта.

Этапы выполнения проекта:

  1. Формирование структуры сайта.
  2. Подбор готового решения.
  3. Проверка работоспособности всех элементов и навигации.

Разработка лендинга для GPS маяка SControl

Цели

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

Решения

Для увеличения удобства пользования ресурсом были добавлены точки захвата в виде кнопок и форм: «Купить SControl», «Заказать консультацию» и т.д. Контактные данные передавались в отдел продаж для последующей обработки и подготовки оборудования.

Цветовая стилистика сайта выполнена в соответствии с корпоративным стилем компании.

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

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

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

Этапы выполнения проекта:

  1. Формирование структуры сайта.
  2. Подбор готового решения.
  3. Программирование и дизайн отдельных элементов
  4. Сбор информации и наполнение сайта контентом
  5. Подключение сторонних сервисов
  6. Проверка работоспособности всех элементов и навигации

Создание сайта для системы «MyWiFi»

Цель

Разработка информационного сайта с указанием направлений деятельности и основной информации о системе WiFi маркетинга MyWiFi. Использование корпоративных цветов и создание удобной навигации. Доступно сообщить пользователю об функциях и преимуществах системы.

 

Решения

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

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

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

Благодаря навигации вперед\назад можно пересмотреть кейсы компании, и с помощью одного клика перейти к остальным кейсам. Диалоговое окно в левом нижнем угле сопровождает пользователя на всех страницах сайта, для быстрой и удобной связи с оператором.

Форма заказа связана с CRM системой Битрикс 24. Благодаря этой системе все звонки, письма, чаты с клиентами на сайте и в соцсетях сохраняются в CRM. Также можно отправлять клиентам письма, sms и автоматизировать продажи.

Этапы выполнения проекта:

  1. Формирование структуры сайта.
  2. Подбор готового решения.
  3. Программирование и дизайн отдельных элементов
  4. Сбор информации и наполнение сайта контентом
  5. Подключение сторонних сервисов
  6. Проверка работоспособности всех элементов и навигации

Создание официального сайта для Гоголевского сельского совета

Цели

Создания информационного сайта с интерактивными элементами. Цветовая стилистика переплетается с гербом села Гоголев.

Решения

Создания читабельного текста для сайта об истории села и разработка движущего изображения с которым можно “поиграть”.

Категории документов (регуляторные акты, программы, протоколы, решения, публичная информация) предоставлены на сайте для ознакомления жителей и гостей села.

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

Бокова панель справа предназначена для удобного поиска новостей и быстрого перехода в интересующие раздели.

Этапы выполнения проекта:

  1. Разработка прототипа, проработка навигации между страницами.
  2. Создание индивидуального дизайна сайта в корпоративной стилистике.
  3. Адаптивная верстка сайта.
  4. Наполнение сайта контентом, проверка работоспособности всех элементов и навигации.

Сайт для ООО «Охрана и Технологии»

Создание корпоративного сайта для ООО «Охрана и Технологии». Разработка сайта с нуля – от прототипа и индивидуального дизайна до базового наполнения контентом.

Цели и задачи

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

Решения

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

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

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

На главную страницу вынесены отзывы клиентов – необходимый параметр выбора охранной компании.

Главное меню разбито на блоки по типу услуг (охрана квартир, охрана домов, физическая охрана). Это существенно упрощает навигацию пользователя по сайту и позволяет быстро найти необходимую услугу. Во время создания сайта предусматривалась разработка онлайн калькулятора стоимости услуг, который был успешно реализован на страницах с услугами охраны для физических лиц.

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

Этапы выполнения проекта:

  1. Создание структуры сайта и прототипа на основе приоритетных услуг компании.
  2. Разработка индивидуального дизайна сайта в корпоративной стилистике.
  3. Адаптивная верстка сайта.
  4. Наполнение страниц контентом, тестирование работоспособности ресурса.
  5. Сдача проекта.

Создание сайта сети фитнес-клубов «Малибу»

Цели

Создание сайта с простой навигацией для сети фитнес-клубов «Малибу»

Решения

В рамках проекта самым сложным этапом стала проработка структуры сайта. Желание заказчика –удобное и простое в навигации отображение информации обо всех тридцати фитнес-клубов из сети «Малибу».

В качестве решения было предложено трехуровневое верхнее меню. Главная категория – города. При переключении автоматически меняются внутренние подкатегории меню, в зависимости от выбранного города.

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

На главной странице добавлен видеоряд и несколько точек захвата пользователя (кнопки на главных слайдерах и на экране с видеорядом).

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

На внутренних страницах клуба расположен блок с фото сотрудников центра.

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

Этапы выполнения работ:

  1. Разработка прототипа сайта со сложной структурой, но простой для пользователя навигацией.
  2. Создание индивидуального дизайна сайта в стилистике логотипа сети фитнес-клубов «Малибу».
  3. Адаптивная верстка сайта, подключение форм обратной связи.
  4. Проверка работоспособности всех элементов сайта и сдача проекта.

Разработка Landing Page для 99 FRANKOV ADVERTISING

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

Цели и задачи

Показать преимущества компании, готовую продукцию и выгоды для клиента. Увеличение трафика и количества продаж через лендинг.

Решения

Разработка адаптивной посадочной страницы с ярким узнаваемым дизайном. Использование работ компании в качестве фона для оформления лендинга. SMM-маркетинг (Facebook, Google+, ВКонтакте). Запуск контекстной рекламы в Google AdWords.

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

Портфолио с выполненными работами представлено в нижнем экране с разбивкой на типы работ.

Этапы разработки проекта:

  1. Разработка прототипа посадочной страницы: адаптивная верстка лендинга, яркий дизайн.
  2. Адаптивная верстка лендинга с использованием технологий CSS 3, Javascript, HTML 5, PHP.
  3. Наполнение лендинга контентом, добавление видеоролика с производством на фон страницы.
  4. Рекламная кампания в Google AdWords. Создание таргетированных объявлений по ключевым запросам с целью привлечения на посадочную страницу целевой аудитории и увеличения продаж.
  5. Ведение групп в социальных сетях. Неформальное общение с целевой аудиторией через социальные сети позволяет настроить обратную связь и взаимодействие с Клиентом.

Одностраничный сайт Green Business Solutions

Создание одностраничного сайта на базе готового решения для группы компаний Green Business Solutions.

Цели и задачи

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

Решения

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

Этапы выполнения проекта:

  1. Формирование структуры сайта.
  2. Подбор готового решения.
  3. Сборка и наполнение сайта контентом,
  4. Проверка работоспособности всех элементов и навигации.

Разработка Langing Page для франшизы сети фитнес-клубов «Малибу»

Цели

Создание посадочной страницы с высокой конверсией для франшизы сети Фитнес-клубов «Малибу»

Решение

В рамках поставленных клиентом задач был разработан сайт в цветовой гамме, гармонирующей с логотипом сети фитнес-клубов «Малибу». Ярким цветом (красным) выделялись основные точки захвата клиента (кнопки и формы обратной связи).

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

Слайдеры между экранами дополнены Parallax-эффектом. Это не влияет на скорость загрузки сайта, но смотрится стильно и оригинально.

На одном из экранов расположена интерактивная карта локаций фитнес-клубов «Малибу». При наводке курсором пользователь видит количество клубов в той или иной области.

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

Этапы реализации проекта:

  1. Разработка прототипа посадочной страницы.
  2. Создание индивидуального дизайна Landing Page.
  3. Проработка конверсионных элементов и точек захвата клиентов.
  4. Верстка сайта. Адаптивная верстка с анимированными счетчиками и Parallax-эффектом на слайдерах.
  5. Проверка работоспособности ресурса и сдача проекта.

Landing Page для Lightbox.kiev.ua

Цели

Разработка лендинга с интересным, ярким дизайном и анимацией. Разработка посадочной страницы с простой и понятной формой заказа, анимированными эффектами и легким восприятием контента.

Решения

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

Интерактивный счетчик срока выполнения работ над формой обратного звонка автоматически подстраивается под текущую дату. Когда клиент заходит на сайт, в заголовок автоматически подставляется дата сдачи проекта (вывески).

Большая часть лендинга посвящена портфолио выполненных работ. На экране портфолио представлено визуальными блоками с информацией о каждом типе вывески по клику на изображение. Дополнительные работы в портфолио представлены в нижнем экране с разбивкой на типы работ.

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

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

Этапы разработки проекта:

  1. Разработка макета лендинга. На этом этапе дизайнер отрисовывает макет будущей посадочной страницы.
  2. Верстка. Адаптивная верстка с использованием анимации, интерактивного счетчика сроков выполнения работ позволила создать интересную и динамичную посадочную страницу.
  3. Наполнение посадочной страницы графическими и текстовыми элементами.
  4. Проверка работоспособности и запуск лендинга.