Прототипы услуги «Разработка интернет-магазина». Полностью переработаны под визуальный язык alto.codes: фирменный шрифт, тонкие 1px линии вместо плашек, низкий контраст, серая палитра, синий #0173FF только в активных элементах. Без курсивов, без Google Fonts, без градиентов.
Пользователь выбрал v1 (Quiet Authority). В этой серии — пять направлений, как сделать его ещё чище: убрать лишние элементы, сделать кнопку аккуратнее под мобильную, проработать анимации. Размер H1 и его «жирность» (font-weight 400) сохранены.
Чистая база. Eyebrow + H1 + лид + аккуратная inline-CTA. KPI и доп. ссылка убраны. H1 раскрывается строка за строкой через mask (overflow + translateY).
Одно слово в H1 меняется. «работает / зарабатывает / масштабируется / продаёт» — циклически, с blur-cross-fade. Layout не прыгает, лёгкий ритм.
Hairline под ключевым словом. Последнее слово «бизнес» получает 1.5px подчёркивание, которое рисуется слева направо через 700мс после H1.
Самая чистая. Без eyebrow вообще. Только H1 (mask reveal) + лид + одна кнопка-якорь, прижатая к низу первого экрана. Кнопка «всплывает» снизу через 800мс.
Тонкая бесконечная лента доверия. Под аккуратной CTA — hairline-полоса с пробегающими фактами (500+ · 12 лет · #9 · 24/7). На hover пауза.
Чистые принципы фирстиля. Референсы: Stripe, Vercel, MUJI, IDEO, Pentagram, Müller-Brockmann.
Минимум на экране. Eyebrow, H1, один абзац, одна кнопка. KPI как hairline-строка из трёх колонок. Уверенность через отсутствие шума. Референс: Stripe, Vercel, Linear.
Услуга как страница договора. Hairline-таблица: платформа, команда, срок, бюджет, SLA, интеграции. Деловой документ, не маркетинг. Референс: MUJI, корпоративные отчёты.
4 этапа как timeline. Вертикальная hairline-линия с точками, у каждого шага — название и срок. Текущий шаг — синяя пульсирующая точка. Референс: IDEO, дизайн-консалтинги.
Цитата клиента как hero. Большая реплика клиента наверху, имя/должность под ней, потом — H1 услуги. Социальное доказательство в первом плане. Текст печатается word-by-word.
Асимметричная Swiss-сетка. Hairline-линии делят экран на зоны: H1 внизу-слева, треугольник #9 наверху-справа, KPI в маленькой ячейке. Сетка рисуется на загрузке. Референс: Müller-Brockmann, Vignelli.
Шесть новых концепций, вдохновлённых топом дизайн-рейтинга Tagline: Red Collar, AIC, ONY, Embacy, Pinkman, Студия Лебедева, Sense, Charmer. Тот же фирстиль alto, но с другим визуальным жестом.
Один большой жест. Огромный H1 во всю высоту экрана как титр фильма, нижняя меточка и маленькая CTA. Никаких KPI, никаких списков. Текст появляется word-by-word. Референс: Red Collar.
Bento-сетка кейсов. Одна большая карточка-кейс и три маленькие в CSS Grid 2×3. Hover поднимает карточку. Доказательство через портфолио, а не через слова. Референс: AIC.
Раскрывающиеся этапы. 4 пункта услуги как hairline-аккордеон, первый открыт. На тап — раскрывается описание (max-height transition). Глубина без шума. Референс: ONY.
Гигантское «500+» во весь экран. Число как плакат, всё остальное под ним крошечное. Статус через масштаб одной цифры. Count-up 2.2 секунды. Референс: Embacy, Pinkman.
Услуга как строка реестра. Сверху артикул и дата (2014 → 2026), потом H1, состав работ в крест-сетке 2×2, маркер «АКТУАЛЬНО». Документальный тон, без маркетинга. Референс: Студия Лебедева, Sense.
Услуга как журнальная статья. H1, deck, текст с dropcap, sidebar с KPI справа, pull-statement. Полиграфическая плотность и ритм. Референс: Charmer, Red Collar.
#E8E9ED hairline вместо плашек, фонов и теней.#0173FF — только в primary CTA.