Дизайн страниц интернет-зоомагазина Котэ

О проекте

Котэ: дизайн страниц интернет-зоомагазина

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

Первый экран: знакомство через образ питомцев

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

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

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

Поиск и категории в одной композиции

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

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

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

Развёрнутая страница и товарный блок

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

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

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

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

Окно входа как отдельное состояние

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

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

Презентация и границы кейса

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

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