- ОДО "Рубикон" специализируется на производстве рукавов высокого давления, промышленных рукавов и труб различного назначения, комплексных поставках обору-дования для производства рвд и гидравлических комплектующих таких как трубы и трубные соединения, адаптеры, фитинги, брс, пластиковая и текстильная защита для рукавов.
СМОТРЕТЬ САЙТ >>
ЗАДАЧА ПРОЕКТА
Разработать сайт, цель которого предоставить максимально четкую и полезную информацию об оборудовании, специфики работы компании. Сделать удобный каталог продукции с отображением сложной информации.
ДИЗАЙН-ЗАДАЧА
Разработать дизайн для desktop и responsive. Задать строгий визуальный стиль с позиционированием на доверие и надежность компании. Сделать максимально удобным к восприятию сложный технический контент.
1
Информационная
Архитектура
Архитектура
•Установочная встреча
•ТЗ в качестве дизайн-брифа
•Разработка информационной архитектуры
•Создание wireframes
•ТЗ в качестве дизайн-брифа
•Разработка информационной архитектуры
•Создание wireframes
2
Визуальный
Дизайн
Дизайн
•Создание визуального концепта
•Утверждение и внесение правок
•Разработка визуального дизайна для desktop
•Разработка визуального дизайна для mobile
•Утверждение и внесение правок
•Разработка визуального дизайна для desktop
•Разработка визуального дизайна для mobile
3
Сопровождение
Разработки
Разработки
•Подготовка файлов к передаче в разработку
•Разработка состояний элементов
•Создание небольшого UI Kit
•Сопровождение и контроль разработки
•Разработка состояний элементов
•Создание небольшого UI Kit
•Сопровождение и контроль разработки
Смотреть полную версию проекта на Behance
01 ЭТАП
•Установочная встреча
•ТЗ в качестве дизайн-брифа
•Разработка информационной архитектуры
•Создание wireframes
•ТЗ в качестве дизайн-брифа
•Разработка информационной архитектуры
•Создание wireframes
- ИНФОРМАЦИОННАЯ АРХИТЕКТУРАПосле составления детальных сценариев пользователей была разработана архитектура сайта — SiteMap, а также определена и проработана глобальная навигация.
- ?На базе архитектуры началась разработка низко детализированных Wireframes, которые покрывают основной функционал и сценарии сайта, проработана система карточного каталога фильтра товаров.
02 ЭТАП
•Создание визуального концепта
•Утверждение и внесение правок
•Разработка визуального дизайна для desktop
•Разработка визуального дизайна для mobile
•Утверждение и внесение правок
•Разработка визуального дизайна для desktop
•Разработка визуального дизайна для mobile
Визуальный Дизайн
Пройдя несколько итераций утверждения и улучшения Wireframes, началась работа над разработкой визуального концепта главной страницы. Параллельно велась работа над созданием responcive.
В основу визуального стиля лег основной синий цвет, который используется в логотипе компании, далее в пару к нему был подобран красный цвет такой же тональности.
В дизайн карточек, иконок, кнопок и т.д. был вложен радиус, то есть все объекты имеют округлые формы. Данный ход появился отталкиваясь от основной продукции, которой занимается компания Rudicon: рукава высокого давления (в основе продукта лежат трубы, круги).
В основу визуального стиля лег основной синий цвет, который используется в логотипе компании, далее в пару к нему был подобран красный цвет такой же тональности.
В дизайн карточек, иконок, кнопок и т.д. был вложен радиус, то есть все объекты имеют округлые формы. Данный ход появился отталкиваясь от основной продукции, которой занимается компания Rudicon: рукава высокого давления (в основе продукта лежат трубы, круги).
ЗАДАЧА ВИЗУАЛЬНОГО СТИЛЯ:
показать серьёзность и профессионализм компании, давно работающую на рынке РБ, но и донести лояльность к клиентам.
показать серьёзность и профессионализм компании, давно работающую на рынке РБ, но и донести лояльность к клиентам.
Оповещения
и поп-апы
и поп-апы
Были созданы ряд pop-ups, карточки со скидками и с оповещениями различного рода. Далее они были адаптированы под responcive.
Разработка
•Подготовка файлов к передаче в разработку
•Разработка состояний элементов
•Создание небольшого UI Kit
•Сопровождение и контроль разработки
•Разработка состояний элементов
•Создание небольшого UI Kit
•Сопровождение и контроль разработки
После утверждения всех экранов, внесения правок и проверки и отработки всех основных сценариев пользователей, началась работа над проработкой все возможных состояний элементов интерфейса, созданием небольшого UI Kit.
Завершив работу над фазой визуального дизайна, осуществилась подготовка и передача файлов команде разработчиков. Далее, по мере разработки продукта, осуществлялся дизайн-контроль команды разработчиков на соответствие переданным макетам.
Также по необходимости дорабатывались небольшие моменты в интерфейсе, которые сложно было учесть на фазе визуального дизайна.
Завершив работу над фазой визуального дизайна, осуществилась подготовка и передача файлов команде разработчиков. Далее, по мере разработки продукта, осуществлялся дизайн-контроль команды разработчиков на соответствие переданным макетам.
Также по необходимости дорабатывались небольшие моменты в интерфейсе, которые сложно было учесть на фазе визуального дизайна.
