Создание сайта для компании по производству натуральной продукции "Алтайхит"

О проекте

Сайт «Алтайхит» представлен дизайном, который объединяет пейзажную фотографию, крупные изображения упаковки и спокойную каталожную сетку. Белые поверхности, тёмные природные фоны и бирюзовые акценты задают общий язык оформления. В подборке показаны короткий и развёрнутый варианты главной страницы, страница каталога и презентация первого экрана на мониторе.

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

Пейзажный первый экран и лаконичная шапка

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

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

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

Категории в мозаике фотографий и цветных плиток

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

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

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

Новинки и единый формат товарных карточек

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

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

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

Каталог с боковой навигацией

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

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

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

Информационные блоки и завершение страницы

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

Раздел отзывов оформлен светло-серым фоном и белой центральной карточкой. Над текстом показаны круглый портрет и крупный знак кавычек, по краям — стрелки. Ниже расположен декоративный фрагмент с хвойной веткой и шишками. Блог продолжает страницу парой широких фотографий с заголовками, анонсами и датами. Его текстовая структура отличается от товарной: вместо цены и покупки здесь предусмотрено чтение материала.

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