Подборка дизайнов магазина

Варианты магазина пиломатериалов

Функции те же, что в референсе, ничего нового покупателю осваивать не нужно. Блок плиток с группами каталога есть на главной во всех вариантах, меняется всё вокруг него. Логотип и меню при прокрутке остаются наверху, как в референсе. Кнопка «Каталог» раскрывает прайс-лист с ценами и сдвигает страницу вниз, ничего не перекрывая. Внизу каждой страницы есть панель: там можно менять компоновку и 11 палитр, выбранный цвет сохраняется при переходе.

Каталог слева

Самый привычный вид строительного магазина.

  • Логотип слева, поиск в центре шапки, как на большинстве сайтов.
  • Группы каталога на главной показаны большими плитками, кнопка «Каталог» раскрывает прайс-лист всех подгрупп с ценой от. Страница при этом сдвигается вниз, ничего не перекрывается.
  • В левой колонке часто покупаемые материалы с ценой от, акции и блог.
  • В каталоге слева фильтры, на страницах групп и подгрупп над ними дерево разделов.
Открыть «Каталог слева»
Главная страница, вариант Каталог слева
Главная на телефоне, вариант Каталог слева

Группы сверху

Каталог первым делом: сразу под меню, без прокрутки.

  • Плитки групп стоят выше баннера.
  • Шапка цветная, меню светлое.
  • Баннер и две карточки акций идут ниже плиток.
  • Правой колонки нет, плитки занимают всю ширину.
Открыть «Группы сверху»
Главная страница, вариант Группы сверху
Главная на телефоне, вариант Группы сверху

Поиск на баннере

Главное на первом экране: поиск и группы каталога.

  • Логотип и меню в одной строке, контакты в полосе над ними.
  • Срез дерева на всю ширину, на нём заголовок и большой поиск.
  • Плитки групп заходят на баннер снизу.
  • В каталоге фильтры идут в ряд над товарами, в строке 5 товаров.
Открыть «Поиск на баннере»
Главная страница, вариант Поиск на баннере
Главная на телефоне, вариант Поиск на баннере

Телефон на виду

Для тех, кто привык позвонить и спросить.

  • Справа заметная карточка: телефон, заказ звонка, мессенджеры, график и адрес.
  • Шапка простая: логотип, широкий поиск, корзина.
  • Плитки групп сразу под заголовком, баннер ниже и невысокий.
  • В каталоге плитки подгрупп стоят рядом с фильтрами.
Открыть «Телефон на виду»
Главная страница, вариант Телефон на виду
Главная на телефоне, вариант Телефон на виду

Как в референсе

Текущая основа для сравнения, с тем же переключателем палитр.

  • Порядок блоков и шапка как у референса.
Открыть «Как в референсе»
Главная страница, вариант Как в референсе
Главная на телефоне, вариант Как в референсе
Прошлые варианты, от которых отказались

Компоновки, где не было обязательных плиток

Разделы

Весь ассортимент виден на главной, без лишних нажатий.

  • Шапка цветная, меню светлое: сразу видно, что это другой сайт.
  • В плитке каждой группы сразу перечислены её подгруппы с числом товаров.
  • Рядом с баннером две карточки акций, правой колонки больше нет.
  • На странице группы подгруппы идут кнопками в ряд, товары видны раньше.
Открыть «Разделы»
Главная страница, вариант Разделы
Главная на телефоне, вариант Разделы

С фото

Самый наглядный: группу узнают по фотографии дерева.

  • Телефон в верхней цветной полосе, кнопка «Каталог» рядом с поиском.
  • Баннер со срезом дерева на всю ширину экрана.
  • Большие плитки групп с обычным фото материала.
  • Фильтры в ряд над товарами, благодаря этому в строке 5 товаров вместо 4.
Открыть «С фото»
Главная страница, вариант С фото
Главная на телефоне, вариант С фото

Копия референса в разных цветах и «Прораб»

Прораб: вариант с моими улучшениями

Тот же скелет и цвета «Хвои и дуба», без анимации. Добавлено только то, что ускоряет покупку.

  • Каталог как прайс-лист: таблица с ценой за штуку и за куб, штук в кубе, количество и кнопка в одну строку. Можно переключить на карточки.
  • Быстрый заказ на главной: материал, размер, штуки или кубы, второе считается само.
  • Популярные размеры под поиском: 50×150 в один клик.
  • Блок «Что вы строите»: каркас, кровля, пол, баня, фасад, терраса и что для них нужно.
  • Калькулятор сразу на главной, сумма корзины в шапке, телефон в меню.
  • На телефоне внизу постоянно видны кнопки «Позвонить» и «Корзина».
Открыть «Прораб»
Главная страница варианта Прораб
Главная варианта Прораб на телефоне

Хвоя и дуб

Зелёный с коричневым из того варианта, где вам понравился срез дерева. Цвета смягчены, тёмный фон заменён тёплым светлым.

Цвета из нашего первого варианта «Лес»

Открыть «Хвоя и дуб»
Главная страница, палитра Хвоя и дуб
Главная на телефоне, палитра Хвоя и дуб

Мох и охра

Тёмный мох и рыжеватая охра. Самый контрастный и строгий из четырёх.

Палитра №4800, цвет кнопок немного затемнён для читаемости

Открыть «Мох и охра»
Главная страница, палитра Мох и охра
Главная на телефоне, палитра Мох и охра

Шалфей и глина

Самый пастельный: приглушённый серо-зелёный и глина.

Палитра №4797

Открыть «Шалфей и глина»
Главная страница, палитра Шалфей и глина
Главная на телефоне, палитра Шалфей и глина

Орех и крем

Только тёплые коричневые тона, без зелёного, как само дерево.

Палитра №4767

Открыть «Орех и крем»
Главная страница, палитра Орех и крем
Главная на телефоне, палитра Орех и крем

Олива и мёд

Тёмная олива с мёдом. Самая «лесная» из новых, спокойная и плотная.

Палитра №4750

Открыть «Олива и мёд»
Главная страница, палитра Олива и мёд
Главная на телефоне, палитра Олива и мёд

Зелень и янтарь

Зелень ярче остальных и тёплый янтарь. Самая заметная, но и наименее пастельная.

Палитра №4816

Открыть «Зелень и янтарь»
Главная страница, палитра Зелень и янтарь
Главная на телефоне, палитра Зелень и янтарь

Кирпич и горчица

Тёмный кирпич и горчица. Зелени нет, ощущение старой столярной мастерской.

Палитра №4776

Открыть «Кирпич и горчица»
Главная страница, палитра Кирпич и горчица
Главная на телефоне, палитра Кирпич и горчица

Кофе и лён

Кофейный верх и светлый льняной баннер. Мягкая, почти без контрастов.

Палитра №4778

Открыть «Кофе и лён»
Главная страница, палитра Кофе и лён
Главная на телефоне, палитра Кофе и лён

Вишня и песок

Вишнёвое дерево и песочный баннер. Тёплая и немного благородная.

Палитра №4755

Открыть «Вишня и песок»
Главная страница, палитра Вишня и песок
Главная на телефоне, палитра Вишня и песок

Сосна и лён

Самая светлая: баннер цвета сосновой доски, тёмно-коричневое меню.

Палитра №4811

Открыть «Сосна и лён»
Главная страница, палитра Сосна и лён
Главная на телефоне, палитра Сосна и лён

Песок и графит

Графитовое меню и песочный баннер. Самая строгая из тёплых.

Палитра №4790

Открыть «Песок и графит»
Главная страница, палитра Песок и графит
Главная на телефоне, палитра Песок и графит

Ваши фавориты

Витрина

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

Открыть Витрину
Главная страница варианта Витрина
Витрина на телефоне

Что улучшено

  • Одна карточка на вид товара и выбор размера в ней вместо десятков одинаковых карточек.
  • Реклама ушла из боковой колонки, контенту стало просторнее.
  • Заголовки антиквой делают сайт солиднее.
Каталог варианта Витрина

Дёготь

Чёрная обожжённая доска на весь экран и светлая панель заказа. Самый взрослый и сдержанный вариант, цвет дают только доска и текст.

Открыть Дёготь
Главная страница варианта Дёготь
Дёготь на телефоне

Что изменилось в конструктиве

  • Материал, размер и количество выбираются сразу, сумма считается на ходу.
  • Если количество неизвестно, ссылка из панели ведёт к расчёту по площади.
  • Стена образцов идёт сразу под первым экраном.
Каталог варианта Дёготь

Массив

Самый смелый вариант. На тёмном фоне дерево выглядит богаче. Под первым экраном стена образцов: при наведении образец раскрывается, а нажатие ведёт в раздел.

Открыть Массив
Главная страница варианта Массив
Массив на телефоне

Что улучшено

  • Сайт легко отличить от других продавцов пиломатериалов.
  • Стена образцов заменяет список разделов.
  • Логотип остался по центру шапки, как на сайте-образце.
Каталог варианта Массив

Раунд 9: на основе фаворитов, сложнее и удобнее

Сложный магазин с всплывающими окнами и анимацией. Доски не летают и ничего не собирается: движение подчёркивает содержимое и отвечает на действия покупателя.

Что появилось в обоих вариантахЗачем это покупателю
Сечение и длина отдельно в карточкеВместо длинного списка из 40 размеров: выбрал 50×150, нажал 6 м, цена обновилась
Панель заказа в одну строкуМатериал, сечение, длина, штуки и сумма на главной, без захода в каталог
Таблица размеров с ценами на странице товараВсе сечения и цены видны сразу, переход на другой размер в один клик
Фильтры над каталогом, плитка и списокТоварам просторнее, выбранные фильтры видны и снимаются по одному
Каталог в шапке с фотоНаведение на раздел сразу показывает материал и цену
Корзина сбоку с подбором машиныОткрывается по значку корзины и показывает сумму, массу и подходящую машину
Быстрый просмотрОкно с размером, количеством и суммой, не нужно уходить из каталога
Уведомления и подсказкиСообщение у корзины после добавления, пояснения терминов, подсказка над каждой ценой в таблице размеров
Заказ звонка и подсказка про калькуляторЗаявка на звонок в отдельном окне, карточка калькулятора всплывает на главной через 12 секунд один раз
АнимацияПоявление первого экрана, блоки при прокрутке, плавный счёт суммы. В Кромке смена снимков, в Ярусе бегущая строка цен
Вкладки «Что нужно для вашей работы»Терраса, баня, каркас, фасад: список материалов для тех, кто не знает названий

Что бы выбрал я

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

Кромка

Тёмная и точная. Снимки дерева плавно сменяются за большим заголовком, под ним заказ в одну строку, сразу затем стена образцов.

Открыть Кромка
Главная страница варианта Кромка
Кромка на телефоне

Откуда что взято

  • Цвета и стена образцов из Массива.
  • Антиква и заказ с первого экрана из Дёгтя.
  • Понятная раскладка разделов из Витрины.
Каталог варианта Кромка
Страница товара в варианте КромкаБыстрый просмотр в варианте Кромка

Ярус

Светлая и собранная. Белое поле, большая антиква, два снимка внахлёст, бегущая строка цен, разделы разного размера и тёмная полоса с заказом и образцами.

Открыть Ярус
Главная страница варианта Ярус
Ярус на телефоне

Откуда что взято

  • Белый фон, антиква и мозаика разделов из Витрины.
  • Дегтярная полоса и быстрый заказ из Дёгтя.
  • Стена образцов из Массива.
Каталог варианта Ярус
Страница товара в варианте ЯрусБыстрый просмотр в варианте Ярус

Раунд 8: дерево вместо пейзажей

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

ВариантГлавная идеяЦвет и материалЧем платим
УказательПервый экран и есть каталог: список материалов с ценами, снимок меняется при наведенииЦвет термодерева и костьНет большого баннера: акции видны только в своём разделе
СурикКаталог всегда открыт слева, как у образца, рядом крупный заголовокКрасный цвет финских деревянных домов, чёрный, серыйКрасный должен сочетаться с вашим логотипом
ДёготьБыстрый заказ на первом экране, ниже стена образцовОбожжённая доска, берёзовая панель, антикваПанель заказа удобнее тому, кто уже знает размер

Что я советовал в этом раунде

Взял бы Дёготь: у него самый сильный первый экран, есть стена образцов, которая вам понравилась, и покупатель видит сумму ещё до каталога. Сурик ближе всего к образцу, это самый осторожный выбор для ниши. Перед запуском снимок первого экрана надо заменить: обожжённой и красной крашеной доски нет в нашем условном каталоге.

Указатель

Вместо баннера сразу все двенадцать материалов с ценой от. Наведите на строку, и большой снимок справа сменится вместе с подписью.

Открыть Указатель
Главная страница варианта Указатель
Указатель на телефоне

Что изменилось в конструктиве

  • Главная начинается с каталога, а не с рекламы.
  • На телефоне строки становятся полосами с фото.
  • Сумма корзины видна в шапке.
Каталог варианта Указатель

Сурик

Жёсткий узкий заголовок на красном крашеном фасаде. Такой красный традиционен для деревянных домов Финляндии и Швеции, поэтому северная тема есть, а пейзажа нет.

Открыть Сурик
Главная страница варианта Сурик
Сурик на телефоне

Что изменилось в конструктиве

  • Каталог с ценами постоянно открыт слева, как у образца.
  • Разделы показаны мозаикой разного размера: главный материал крупнее.
  • На телефоне левая колонка скрывается, каталог открывается кнопкой.
Каталог варианта Сурик

Из прошлых раундов

Метса, Витрина и Массив остаются на виду. В Метсе убран снимок леса и озера.

Метса

Тёмная кора и латунь из Массива на понятной раскладке Витрины. Первым экраном идёт снимок дерева, сразу под ним стена образцов.

Открыть Метса
Главная страница варианта Метса
Метса на телефоне

Что здесь нового

  • Заголовки антиквой на тёмном фоне, как в Витрине, только теплее.
  • Крупные вертикальные фото в карточках товаров.
  • Калькулятор вынесен в отдельный блок со снимком штабеля досок и не теряется среди товаров.
Каталог варианта Метса
Скрытые варианты: Суоми, Ельник, Торец, Сортамент, Смета

Раунд 7: Витрина, стена образцов и лесная тема

Во всех четырёх вариантах есть стена образцов из Массива: полоса раскрывается при наведении и показывает название, цену и число размеров. На телефоне полосы идут списком. За тональностью я заглянул на сайты финских компаний Koskisen, Metsä Wood и UPM Timber: у них спокойный текст, крупное дерево и лес на фото, мало украшений.

ВариантГлавная идеяЛесная темаЧем платим
МетсаРаскладка Витрины в цветах МассиваТёмная кора и латуньТёмный сайт может показаться дорогим для обычной доски
СуомиСветлый северный стиль, много воздухаОзеро на рассвете, еловый зелёный, рассказ о северном лесеСамый спокойный: меньше напора, длиннее прокрутка
ЕльникГлубокий хвойный лес и логотип по центруЕловый лес на первом экране, янтарь как смолаСильное настроение, но на снимке леса не видно товара
ТорецЛесопилка и выбор размера с первого экранаШтабель брёвен, дёготь и смола, сечение доски на карточкеСамый производственный, меньше подходит для отделки

Что я советовал в этом раунде

Брал бы Метсу: Витрина даёт раскладку, Массив даёт цвета и образцы. Запасным вариантом была Суоми.

Суоми

Светлый северный вариант: белый фон, тонкий шрифт, еловый зелёный и одна спокойная фраза над большим снимком озера.

Открыть Суоми
Главная страница варианта Суоми
Суоми на телефоне

Что здесь нового

  • Отдельный блок о том, почему ценят северный лес, с местом для вашего региона и поставщика.
  • Вместо рекламных плашек спокойные блоки вроде «баня, терраса, фасад».
  • Вагонка показана светлыми рейками в скандинавском духе.
Каталог варианта Суоми

Ельник

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

Открыть Ельник
Главная страница варианта Ельник
Ельник на телефоне

Что здесь нового

  • Стена образцов в два ряда: все двенадцать материалов видно сразу.
  • Разделы каталога идут сразу под поиском.
  • Хвойная палитра сохраняется в каталоге и в подвале.
Каталог варианта Ельник

Торец

Лесопилка вместо пейзажа. Светлый опилочный фон, узкие заголовки и кнопки популярных сечений на первом экране.

Открыть Торец
Главная страница варианта Торец
Торец на телефоне

Что здесь нового

  • Кнопка размера сразу открывает каталог с товарами этого сечения.
  • При наведении на фото карточки появляется сечение доски в едином масштабе, длина и штук в кубе.
  • При смене размера сечение на карточке тоже меняется.
Каталог варианта Торец

Раунд 6: четыре улучшенных варианта

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

Что я советовал в этом раунде

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

Сортамент

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

Открыть Сортамент
Главная страница варианта Сортамент
Сортамент на телефоне

Что улучшено

  • Цены переключаются за штуку и за кубометр, сразу видно, что выгоднее.
  • Корзина в шапке показывает сумму и объём заказа.
  • Каталог стал прайс-листом: покупка прямо из строки.
Каталог варианта Сортамент

Смета

Первый экран спрашивает, что вы строите. Укажите размеры террасы или стен, и сайт предложит материал и сумму. Правая колонка сайта-образца стала живой сметой.

Открыть Смету
Главная страница варианта Смета
Смета на телефоне

Что улучшено

  • Весь материал для задачи добавляется в заказ одной кнопкой.
  • Смета всегда видна: сумма, объём и примерная масса.
  • Сайт подсказывает подходящую машину и показывает её загрузку.
Каталог варианта Смета

Предыдущие раунды

Всё, что мы уже пробовали, в порядке появления. Раунды 1–3 перенесены с холстов как статичные страницы: смотреть и переходить можно, но калькуляторы и фильтры в них не считают. Раунды 4 и 5 работают полностью.

Раунд 1. Первые направления

Ваша оценка: слишком современно для ниши. Здесь только главные страницы, каталогов в этом раунде не было.

Раунд 2. Ближе к традиции

Ваша оценка: выглядит устаревшим.

Раунд 3. Первые фото дерева

На холсте у вас не загрузились фото, поэтому вы видели этот раунд без них. Здесь они на месте.

Раунды 4 и 5. Рабочие магазины

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