Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Интернет-агентство. Лидер в сфере веб-разработок Пермского края
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
26
Битрикс24

Битрикс24

www.bitrix24.ru

16
Отследить-посылку

Отследить-посылку

B2B-сервис трекинга посылок

14
myPreza

myPreza

mypreza.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

10
YAGLA

YAGLA

yagla.ru

10
Reader

Reader

Интернет-журнал о современных технологиях.

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Функциональная красота vs. красивая функциональность

332 3 В избранное Сохранено
Авторизуйтесь
Вход с паролем
ООО «БИТТЕХНИКА» — предприятие по производству оборудования для скважин. География поставок охватывает всю Россию (от Калининграда до Камчатки) и расширяется благодаря новым партнерам из зарубежья.

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

b_57cd866c7cf42.jpg

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

Цели проекта. Ветер перемен

В 2015 году интернет-агентство «Амадо» получило приглашение принять участие в тендере на разработку нового сайта ООО «БИТТЕХНИКА», пермского предприятия по производству оборудования для скважин.

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

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

Этапы работы. Начнём с конца!

b_57cd869c89304.jpg

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

В этот раз стандартная этапность была полностью перекроена по причине двух объективных факторов:

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

2. Специфика продукции (буровое оборудование) такова, что клиентура ООО «БИТТЕХНИКА» представляет собой достаточно узкий круг постоянных покупателей. Все связи уже налажены, потоки сформированы. Соответственно, изучение целевой аудитории не потребовалось.

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

Дизайн. Функциональная красота vs. красивая функциональность

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

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

b_57cd86f1797f7.jpg

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

Как «дорого-богато» изобразить то, что используется глубоко под землёй? Главной деталью нового интерфейса стала... деталь.

b_57cd8709282de.jpg

Креативный разум дизайнера разместил крупным планом фрезу, динамично вращающуюся в ярком свете прожекторов. Для создания этого эффекта была проведена фотосессия, отсняли порядка 200 фотографий реальной фрезы производства ООО «БИТТЕХНИКА», из которых затем собрали видеоряд.

b_57cd8720f04e7.jpg

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

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

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

b_57cd877479645.jpg

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

b_57cd8787e4535.jpg

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

b_57cd87a402d47.jpg

Всего было отрисовано 42 макета страниц.

b_57cd87bd7b5ef.jpg

Обратная связь

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

b_57cd87d537c1e.jpg

«Руководство компании «БИТТЕХНИКА» выражает благодарность компании «Амадо» за успешную реализацию проекта по запуску корпоративного веб-сайта. Сайт, расположенный по адресу www.bittehnika.ru, максимально соответствует нашим ожиданиям: отличается полнотой информации о компании и ее продукции, удобной навигацией, современным запоминающимся дизайном, выгодно выделяющим компанию на фоне конкурентов. Особенно хочется отметить реализацию важнейшей части сайта — каталога, который позволяет наиболее полно и наглядно представить продукцию нашим клиентам». Генеральный директор О.В. Тихонов.

Итоги проекта

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

b_57cd87f6e0f15.jpg

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

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

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

0
Первые Новые Популярные
Thomas Blood
Сколько слов... а...изображения в веб сохранить не как. Блоки к единой высоте привести. Каталог не открывается. (А всё пардон открылся надо не на фото жать а именно на название изделия... ¯\_(ツ)_/¯) Вообще контент нормально оформить?
Мобильной версии нет.
Вообщем дальше главной лучше не ходить. Она вроде норм. Мне в глаза сильно бросается анимация бура.
PS только моё мнение, не более
Ответить
Михаил Шитиков
Вы бы заменили вот эту пошлость http://bittehnika.ru/en/images/logo.gif
А то картинка реально глаза режет :(
Ответить
Andrei Belokopytov
Далековато у вас Астрахань уехала.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать