Концепт · крок 4

Три напрями верстки

Один бренд, три композиції. Палітра, типографіка та іконки взяті з DESIGN.md і однакові в усіх трьох напрямах. Відрізняється лише верстка: щільність, ритм, розкладка картки. Рішення: це не «обери один», а три щільності однієї мови - кожна за своїм контекстом (нижче).

Однакова палітра

#1C1C1C
#FFFFFF
#FF5A00
#D9D9D9
#F2F0ED

Однакова типографіка

ДисплейStackOswald
ТекстСпокійно, зрозуміло, по суті.Inter
Цифри24 г · 18 ₴ · 4.8IBM Plex Mono

Іконки - Solar Bold (inline SVG), акцент - лише Signal Orange на дії. Ці токени незмінні; нижче змінюється тільки композиція. Це доводить, що це мова, а не сторінка.

Напрям 1

Спокійна вітрина

Мало щільності, багато повітря, один великий товар і проста відповідь спереду. Верстка каже «не поспішай». A1 · спокій замість тискуA5 · проста відповідь спереду

Обери протеїн спокійно

Спершу проста відповідь: для чого це і що всередині. Глибина - нижче, коли захочеш.

  • Склад
  • Походження
  • Сертифікат
Підібрати за ціллю
ПопулярнеStack Сироватковий протеїн, шоколад
Stack · Україна
Сироватковий протеїн, шоколад, 900 г

Базовий протеїн для росту й відновлення м'язів. Простий склад, 24 г білка на порцію.

В наявності
1 090 ₴925 ₴−15%
28 ₴ / порція+9 ₴ бонус
Напрям 2

Щільна вітрина

Більше товарів в око, компактні картки, моно-факти й ціна тренера попереду. Верстка для того, хто знає, що шукає. A4 · атлетичний темпA2 · довіра моно-фактами

Знайдено: 84 товари Протеїн Ізолят В наявності Сортування: Популярні ▾
Stack Гейнер
Stack
Гейнер, шоколад, 2000 г
50 г білка32 ₴/порція
Немає в наявності
1 180 ₴
Повідомимо, коли з'явиться
новинка
Напрям 3

Гід із ведмедем

Тепліший регістр: маскот веде, ціль обирається спершу, показуємо один зрозумілий набір. Верстка для того, кому «нема кого спитати». A3 · характер і теплотаA5 · одна зрозуміла дія

Маскот Stack

Не знаєш, з чого почати?

Обери ціль - покажу спокійний, зрозумілий набір. Одна дія за раз, без зайвих термінів.

Набір маси Схуднення Відновлення Енергія Імунітет Витривалість

Рішення (2026-07-19): беремо всі три як регістри однієї мови, за контекстом. Щільна вітрина - для лістингу й каталогу; Спокійна вітрина - для фокусу на товарі (картка товару, сторінка товару, hero); Гід із ведмедем - для онбордингу, вибору цілі та порожніх станів. Одна картка, три щільності - «смотря где и на какой странице». Далі (крок 5) з цієї системи будуємо стенд concept.html і вмикаємо Concept у роадмеп; колір на реальні екрани лягає на кроці 6 (копії у design/), сірі вайрфрейми лишаються сірими.