РУНО — Мудборд & UX/UI гайд · Вязаная одежда · 2026
Мудборд & UX/UI гайд · Вязаная одежда · Ru 2026

РУНО
тёплое ремесло

Исследовательский борд для интернет-магазина вязаной одежды. Эстетика тактильной «тихой роскоши» и farmcore-сторителлинга, построенная на трендах 2026 года и победителях awwwards на Tilda.

v.1 · МУДБОРД
CORMORANT · ONEST · JBMONO
6 ЦВЕТОВ · 7 КНОПОК · 9 АНИМАЦИЙ
СДЕЛАНО ВРУЧНУЮ ·МЕРИНОС 100% ·SLOW FASHION ·тёплое ремесло ·ПОД ЗАКАЗ ·RU 2026 · СДЕЛАНО ВРУЧНУЮ ·МЕРИНОС 100% ·SLOW FASHION ·тёплое ремесло ·ПОД ЗАКАЗ ·RU 2026 ·
01 — Концепция

Тактильность
как стратегия

Вязаная вещь в 2026 — это не «стрейч», а эмоция, память и смысл. Сайт должен передавать ощущение нити пальцами через экран: фактура, тепло цвета, неспешный ритм и честность ремесла. Это и есть точка отличия от безликих маркетплейсов.

Кому

Осознанный покупатель 25–45, которому важны материал, происхождение и долговечность вещи, а не скорость распродажи. Ценит ручную работу и «тихую роскошь».

Тон

Тёплый, спокойный, уверенный. Между деревенской честностью (farmcore) и ателье. Никакого крика и баннерной суеты — только материал и забота.

Запоминается

Живая антиква в заголовках + ощутимая вязаная текстура фона + один тёплый глиняный акцент. Сайт «пахнет шерстью», а не SaaS-шаблоном.

«В мире, тоскующем по медленному ритму, трикотаж становится эмоциональной бронёй — и сайт должен дать это почувствовать.»

03 — Цвет

Палитра
«суровая шерсть»

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

Суровая
шерсть
#F4EEE4
Фон, воздух, 60% площади
Овсяный
#E5D9C5
Карточки, секции, поля
Глина
#B86B4B
Главный акцент · CTA «В корзину»
Шалфей
#8A9A7B
Вторичный акцент · «в наличии», эко
Бордо
#6E2A35
Эмоция · sale · избранное
Кора
#2E2419
Текст, контраст (теплее чёрного)
Правило соотношения

60 / 25 / 10 / 5

60% — суровая шерсть (фон). 25% — овсяный/кора (поверхности и текст). 10% — глина (акценты и действия). 5% — шалфей + бордо (точечные сигналы). Так палитра звучит спокойно, а CTA всегда «выстреливает».

Wool 60%
Bark 25%
Clay 10%
Sage+Wine 5%
Контраст & доступность

Чёткие пары

Текст — только кора по шерсти/овсяному (AA+). Глина и бордо — для крупного текста и плашек; на них всегда лён/шерсть. Шалфей — фон под тёмный текст.

Кора на шерсти Лён на глине Шерсть на коре Лён на бордо
04 — Типографика

Три голоса

Антиква для эмоции и характера, гротеск для интерфейса и текста, моноширинный для «ремесленных» технических подписей (состав, партия, размерная сетка). Все три — с полной кириллицей.

DISPLAY · CYR
Аа Бб
Cormorant · АБВГ абвг 0123 ?!&
↳ Заголовки, hero, цены300–700 + Italic—50…−10 letter-spacing

Высококонтрастная антиква с воздухом и «модной» осанкой. Несёт эмоцию бренда. Italic — для акцентных слов («тёплое»). Альтернатива: Playfair Display.

UI / TEXT · CYR
Аа Бб
Onest · АБВГ абвг 0123 ?!&
↳ Текст, навигация, кнопки300–800чистый, нейтральный

Современный гротеск, спроектированный под кириллические интерфейсы и экраны. Отлично читается в мелких размерах. Альтернатива: Manrope.

MONO · CYR
Аа 01
JetBrains Mono · СОСТАВ · ПАРТИЯ №

«Спецификационный» голос: состав (100% меринос), уход, размер, артикул, kicker'ы. Добавляет честность и ощущение лейбла, вшитого в вещь.

МАСШТАБ · TYPE SCALE
H1 · 96/0.88Кардиган
H2 · 56/1.0Новая коллекция
H3 · 26/1.1Уход за изделием
Body · 17/1.6Меринос мягкой крутки, тёплый и не колется.
Caption · 12/1.4АРТ. RN-2026-07 · ПОД ЗАКАЗ
Правила пары

Контраст вместо хаоса: антиква крупно и с тесным трекингом, гротеск мелко и спокойно. Не более двух начертаний на экран. Курсив Cormorant — только для 1–2 акцентных слов. Mono — исключительно UPPERCASE, <14px, с трекингом .1–.2em. Числа в ценах — антиква (характер), числа в спецификациях — mono (точность).

05 — UX / Структура

Путь
покупателя

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

01

Главная

Hero с антиквой и видео-фактурой, бегущая строка ценностей, 2–3 капсулы коллекций.

02

Каталог

Крупная сетка 2–3 в ряд, фильтры «материал/тепло/уход», свотчи пряжи прямо на карточке.

03

Карточка

Зум-фактура, 360°, состав и уход, «как сидит», срок «под заказ», история нити.

04

Корзина

Лёгкая боковая шторка, апселл «в комплект» (шапка к свитеру), честная доставка.

05

Оформление

Один экран, гость без регистрации, оплата в 2 тапа, «сделано вручную — 14 дней».

Живой макет · карточка товара
под заказ · 14 дней
Кардиган «Руно»
МЕРИНОС 100% · РУЧНАЯ ВЯЗКА · АРТ. RN-07
Цвет пряжи
Размер
12 400 ₽
Принципы интерфейса

Материал — герой

Фото крупно, фактура на зуме, видео-петля как нить ложится. Текст обслуживает изображение, а не наоборот.

Честность снимает барьер

Состав, страна шерсти, время изготовления, реальная посадка и уход — открыто. Это главный драйвер доверия в slow fashion.

Один акцент действия

Глиняный/бордовый CTA — единственный яркий элемент на экране. Всё остальное спокойно. Глаз всегда знает, куда нажать.

06 — Компоненты

Нетипичные
кнопки

Семь живых паттернов. Наводите курсор — все состояния рабочие. Каждая метафора отсылает к ремеслу: нить, окрашивание, бирка, рукотворность.

01 · Магнитная круглая
Притягивается к курсору (JS), плавно заливается глиной. Главный CTA на странице товара и в hero.
02 · Нить (провязка)
Подчёркивание «провязывается» слева направо. Текстовые ссылки, «подробнее», навигация.
03 · Окрашивание
Бордо «впитывается» снизу вверх, как краска в пряжу. Вторичный CTA в карточке.
04 · Бирка-ярлык
Форма вшивного ярлыка (clip-path с вырезом и «пробивкой»). Метки, фильтры, теги.
05 · Рукотворная обводка
Двойная «дрожащая» рамка слегка проворачивается — ощущение ручной линии. Уникальные офферы.
06 · Текст-вайп
Заливка текста цветом при наведении. Инлайн-действия, аккордеоны «уход / состав».
07 · Утилитарные · размер & пряжа
Размер (есть / выбран / нет в наличии)
Свотч пряжи (кольцо = выбран)
Состояния обязательны: hover, выбран, недоступен. Свотч — это «пощупать цвет нити» до заказа.
07 — Движение

Анимации &
микровзаимодействия

Сдержанно и со смыслом: один срежиссированный page-load со stagger + точечные «ремесленные» отклики. Easing один на весь сайт: cubic-bezier(.2,.7,.2,1), 0.4–0.9s. Уважение к prefers-reduced-motion.

Распускающаяся петля
Прелоадер: пунктир «бежит» по форме петли — будто распускается/вяжется нить.
Подъём карточки
Hover: товар всплывает и чуть наклоняется, мягкая тёплая тень. (наведите на блок)
Окрашивание
Цвет «расплывается» из точки — переход секций, смена цвета пряжи.
Стежок-прогресс
Полоса загрузки/чекаута «провязывается» лицевой гладью.
Левитация
Бесконечное мягкое покачивание у иконок/ярлыков — «живой», нецифровой ритм.
Навести →
Провязка ссылки
Подчёркивание прорастает слева. Базовый отклик всех текстовых ссылок.
Срежиссированный вход

Page-load со stagger

Hero собирается по очереди: kicker → заголовок (по строкам, маской снизу) → подзаголовок → CTA, с задержкой 80–120ms между элементами. Это и есть «вау-момент», вместо десятка разрозненных эффектов. Весь скролл-контент проявляется через IntersectionObserver (см. как появляются блоки этого мудборда).

Ещё в наборе

Магнитный CTA Зум фактуры на hover Бегущая строка ценностей Кастомный курсор-клубок Reveal по скроллу Параллакс фактуры Sticky-смена цвета шапки Шторка корзины

Запрет: бесконечные авто-карусели, резкие bounce, более 2 одновременных движений в зоне внимания.

08 — Арт-дирекшн

Фото &
атмосфера

Съёмка под тактильность: дневной мягкий свет, естественные тени, макро-фактура нити, тёплый фон под суровую шерсть. Никакого глянца и «студийного» пересвета.

Макро нити

Резкость на ворсе, мягкое боке. 1–2 кадра на карточку.

Цвет-блок

Однотонный кадр-пауза между товарами, под акцент.

На теле, в движении

«Как сидит»: естественные позы, дневной свет, дом/природа.

Процесс

Руки, спицы, клубки — сторителлинг ремесла, доверие.

Графика и детали

Вязаный SVG-паттерн (лицевая гладь) как фоновая текстура и разделители. Тонкое зерно поверх всего для «несовершенной», тёплой бумажности. Иконки — линейные, 1.5px, со скруглением, под рукотворный характер. Углы карточек мягкие (14px), тени тёплые и низкие (никаких синих/резких).

Итог
Сайт, который
пахнет шерстью,
а не шаблоном.
РУНО · МУДБОРД v.1
CORMORANT · ONEST · JETBRAINS MONO
#F4EEE4 · #E5D9C5 · #B86B4B · #8A9A7B · #6E2A35 · #2E2419
РУНО

Исследование на базе awwwards (Tilda), ru-трендов веб-дизайна 2026 и трендбуков по трикотажу SS/AW 2026. Шрифты — Google Fonts (OFL), полная кириллица. Все кнопки и анимации в документе — рабочие.