Дизайн страниц компании Самори

Дизайн страниц компании Самори

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

Презентация страницы БЕТОН на мониторе

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

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

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

Четыре экрана в одной подборке

Второе изображение представляет последовательность из четырех самостоятельных горизонтальных композиций. Верхний экран посвящен Самори, следующие подписаны АСФАЛЬТ, ИНЕРТНЫЕ МАТЕРИАЛЫ и БЕТОННЫЕ СМЕСИ. Вертикальная сборка служит способом презентации разных страниц. Она не является изображением мобильной версии и не подтверждает адаптацию интерфейса под узкий экран.

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

Экран АСФАЛЬТ использует фотографию производственной установки. Вертикальные металлические конструкции занимают центральную и правую части, а заголовок и желтая кнопка вынесены влево. Светлая рамка связывает эти зоны, но не скрывает выразительный силуэт установки. Теплые оттенки неба соседствуют с темными деталями оборудования, поэтому белый текст и цветная кнопка заметно отделяются от фона.

На экране ИНЕРТНЫЕ МАТЕРИАЛЫ главным объектом становится фронтальный погрузчик. Его ковш и колеса занимают значительную часть нижней половины композиции. Длинный заголовок расположен вверху и сохраняет крупный размер. Белый контур и желтый элемент действия повторяют прием соседней страницы, хотя фотография и пропорции объекта уже другие. Это позволяет сравнить, как одна схема оформления используется для направлений с разными по длине названиями и разными сюжетами.

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

Сравнение композиций

На вводном экране название бренда занимает центр пейзажа, а тематические страницы строятся вокруг конкретного объекта и заголовка в верхней части. Особенно заметна разница между вытянутой по вертикали установкой на экране АСФАЛЬТ и широким силуэтом автобетоносмесителя на экране БЕТОННЫЕ СМЕСИ. При общей схеме оформления фотографии по-разному распределяют плотные и свободные участки, оставляя место для текста.

Границы разбора

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

Другой проект в портфолио

Создание сайта для поставщика дизельного топлива Кромлекс Ойл