Дизайн страниц сайта ОСКАС

О проекте

Дизайн страниц сайта ОСКАС

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

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

Первый экран и общая навигация

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

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

Каталог и страница камеры

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

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

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

Новости: крупная публикация и сетка карточек

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

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

Представления отзывов

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

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

Формы обращения и контакты

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

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

Единое оформление разных разделов

Макеты объединяет постоянная роль цвета. Фиолетовый используется для меню, кнопок, подчеркиваний, заголовка таблицы и крупных форм. Белый остается основным фоном для фотографий и текста, а темный подвал завершает длинные страницы. Изображения оборудования получают больше места на первых экранах и уменьшаются в каталожных карточках и подборках. Текстовые разделы, в свою очередь, различаются по устройству: новости собраны в сетку, отзывы в список, технические данные в таблицу.

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