Интернет-магазин
ГЕСТ ПОЛ
ГЕСТ-ПОЛ
Сайт, который выполняет сразу две функции - показывает каталог напольных покрытий и рассказывает об услугах монтажа.
Целевая аудитория
Основные клиенты ГЕСТ ПОЛа - люди, делающие ремонт со среднем и выше достатком, которые недавно приобрели недвижимость (квартиру, дом), а также предприниматели, открывающие новые точки своего бизнеса.
Главная задача
Необходимо было создать сайт, который будет гармонично рассказывать как об слугах, так и предлагать товары. Для интернет магазина было важно создать удобный каталог, а для услуг - показать портфолио и рассказать о команде.
Карта сайта
Каталог товаров
Каталогу было уделено большое внимание. Для интернет-магазина очень важно, чтобы покупателю было легко и удобно найти нужный товар с любой страницы сайта. Тщательно проработав иерархию, постарались избавиться от большой вложенности каталога, но и не перегружать один экран всевозможными категориями.
Цветовая палитра
Так как это небольшой семейный бизнес, сайт был выполнен в более мягком и дружелюбном стиле, отражающий индивидуальный подход и заботу о клиенте. Цветовая палитра сочетает тёплые природные тона, вызывая ассоциации с деревом, камнем и зеленью — материалами, связанными с интерьером и напольными покрытиями.
Тёплый терракотовый оттенок добавляет ощущение уюта, зелёный — подчёркивает естественность и гармонию, мягкий бежевый фон делает композицию светлой и чистой, а глубокий серый обеспечивает контраст и читаемость.
Тёплый терракотовый оттенок добавляет ощущение уюта, зелёный — подчёркивает естественность и гармонию, мягкий бежевый фон делает композицию светлой и чистой, а глубокий серый обеспечивает контраст и читаемость.
#D56846 — тёплый терракотовый акцент
Цвет ассоциируется с деревом, керамикой, тёплыми породами напольных покрытий (дуб, бук, орех).
Подсознательно вызывает ощущение домашнего уюта, тепла и “живого материала”, что хорошо подходит.
В дизайне используется для акцентов, кнопок “Купить”, “Подробнее”.
Подсознательно вызывает ощущение домашнего уюта, тепла и “живого материала”, что хорошо подходит.
В дизайне используется для акцентов, кнопок “Купить”, “Подробнее”.
#F5F1EB — светлый фон (молочно-бежевый)
Тёплый нейтральный фон. Имитация цвета светлого дерева, паркета или стены в интерьере.
Используется как фон карточек и не отвлекает внимание.
Используется как фон карточек и не отвлекает внимание.
#497759 — глубокий зелёный
Напоминает цвет листвы и натуральных покрытий, подчёркивает экологичность — важный аргумент при выборе напольных решений.
В паре с терракотовым создаёт ощущение баланса, поддерживая общую гармонию палитры.
Используется как второстепенный акцент.
В паре с терракотовым создаёт ощущение баланса, поддерживая общую гармонию палитры.
Используется как второстепенный акцент.
#2E2E2E — глубокий серый
Не абсолютно чёрный, поэтому сохраняет мягкость и не перегружает интерфейс.
Используется для текста, иконок, навигации, контрастных элементов.
В сочетании с тёплым фоном создаёт чёткую, но комфортную читаемость.
Используется для текста, иконок, навигации, контрастных элементов.
В сочетании с тёплым фоном создаёт чёткую, но комфортную читаемость.
Шрифтовая пара
Пара Oswald + Open Sans — это классическое сочетание контрастных шрифтов:
- Oswald — геометричный, узкий гротеск с индустриальным характером.
- Open Sans — нейтральный, открытый и хорошо читаемый гуманистический шрифт.
P — 16px / Open Sans / LH 1.55
Основной текст — лёгкий, комфортный для чтения.
Open Sans хорошо подходит для описаний товаров, технических характеристик и инструкций.
Open Sans хорошо подходит для описаний товаров, технических характеристик и инструкций.
H3 — 30px / Open Sans / LH 1.25
Переход от акцентных заголовков к информационному контенту.
Open Sans в этом размере выглядит спокойнее и дружелюбнее, снижая визуальную напряжённость после жёстких форм Oswald.
Используется для подзаголовков карточек, подписей к изображениям, мини-заголовков внутри контента.
Open Sans в этом размере выглядит спокойнее и дружелюбнее, снижая визуальную напряжённость после жёстких форм Oswald.
Используется для подзаголовков карточек, подписей к изображениям, мини-заголовков внутри контента.
H2 — 69px / Oswald / LH 1.1
Подзаголовки второго уровня — сохраняют визуальный характер H1.
Поддерживают структуру и узнаваемость бренда, формируют визуальную иерархию.
Применяются для разделов, блоков преимуществ, названий категорий.
Поддерживают структуру и узнаваемость бренда, формируют визуальную иерархию.
Применяются для разделов, блоков преимуществ, названий категорий.
H1 — 139px / Oswald / LH 0.9
Очень крупный, плотный заголовок, визуально “держит” композицию.
Маленький межстрочный интервал (0.9) делает заголовок компактным и монументальным.
Используется для главного экрана, баннера, ключевых заголовков категорий.
Маленький межстрочный интервал (0.9) делает заголовок компактным и монументальным.
Используется для главного экрана, баннера, ключевых заголовков категорий.