Компания «Технологии ОФС»

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

1С-Битрикс 1С-Битрикс
Адаптивный дизайн Адаптивный
дизайн
HTML5 анимация HTML-5 анимация
Иконографика Иконографика

Проектирование

На этапе формирования ТЗ мы выяснили основные задачи, стоящие перед сайтом:

01
Показать, что компания максимально ориентирована на клиента и его потребности.
02
Познакомить посетителей с каталогом продукции.

01. Структура

По итогам консультаций с клиентом была сформирована следующая структура сайта:

Концепции

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

01
Композиция в первой концепции основана на принципах симметрии, испльзованы фирменные фотографии
и инфографика.
scroll
02
В данном варианте сделан акцент на эффектной анимации блоков при подгрузке контента.
03
В третьей концепции динамика контенту придана при помощи асимметричной верстки.
scroll

Дизайн

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

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

Модульная сетка

Для того, чтобы объединить три разные по композиции концепции, была использована гибкая 12-колоночная сетка.

12 колонок
100 px
32 px
- 1 колонка
верстка со смещением контента
140 px
56 px

Главная страница

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

01
Функциональные элементы
адаптированы для мобильных
устройств
02
Разработаны акцентные иконки
в блоке преимуществ

UI-KIT

Типографика
h0 h1 h2
Цветовая палитра
Aa
Gilroy
Aa
Gilroy
Aa
Gilroy
#07302D
#465C5B
#038073
#03BE93
#0078BE
#D9D9D9

Внутренние страницы

Информационные страницы тщательно проработаны с учетом UI Kit.

Решения

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

03
H2 заголовок + краткое описание
02
Обработанное тематическое фото
01
Подложка-градиент

При клике на карточку решения осуществляется переход на развёрнутое описание.

Иконографика

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

Особенности реализации

Сайт разработан на базе CMS «1С-Битрикс: Управление сайтом» редакция «Стандарт», которая позволяет клиенту легко редактировать контент.