Кейс · Процесс дизайна сайта
От брифа до
передачи.
Все этапы одного корпоративного сайта в том порядке, в котором идёт работа: бриф, карта сайта, вайрфреймы, визуальный дизайн, макеты для десктопа, планшета и мобильных, кит компонентов и передача разработчикам. Проект — Northpeak Capital, фирма private equity. Её прототип — настоящий адаптивный HTML, который можно открыть.
Для кого эта страница?
До любого макета: кто приходит, что ему нужно найти и что сделать дальше. Каждое следующее решение проверяется по этим трём карточкам.
Три читателя, одна страница
- Основатели, выбирающие долгосрочного партнёра
- Инвесторы, проверяющие историю и отчёты
- Топ-кандидаты и советники
Доверие за десять секунд
- Сформулировать инвестиционный тезис на первом экране
- Доказать масштаб четырьмя твёрдыми цифрами
- Дать слово основателям, а не только фирме
Три пути с первого экрана
- Наш подход (основатели)
- Смотреть портфель (все)
- Вход для инвесторов (в навигации, всегда виден)
Шесть страниц, один понятный путь
Карта сайта согласуется до дизайна, поэтому главной нужно только представить каждую страницу, а не заменить её. Ниже — порядок секций главной: каждый блок отвечает на вопрос, который поднял предыдущий.
- НавигацияПять страниц + вход для инвесторов
- HeroТезис одной фразой, два пути
- Ключевые цифры€2.4bn · 31 · 7.2 yrs · 2009
- ПодходТри столпа, пронумерованные I–III
- ПортфолиоПять компаний таблицей, ссылка на все 31
- Цитата основателяДоказательство голосом клиента
- МатериалыТри последних материала
- ПодвалОфисы, ссылки, регуляторная информация
Сначала структура, потом стиль
Серые блоки для раскладки, настоящие заголовки для иерархии. Клиент утверждает структуру здесь, пока изменения дёшевы. Переключитесь на «Финал», чтобы увидеть ту же страницу после визуального дизайна: раскладка остаётся, меняется только стиль.
Прокрутите внутри каждого кадра
Десктоп · 12 колонок · макс. ширина 1280
Мобильный · 390 · одна колонка
Тихие деньги, тёплый свет
Одна страница правил, утверждённая до полного макета: журнальная антиква для убеждённости, простой гротеск для фактов, тёмно-синий и слоновая кость для спокойствия, латунь — только там, куда должен упасть взгляд.
Направление первого экрана
Тёмная фотография на 55% под тёмно-синим градиентом, чтобы белый шрифт держал контраст AA при любом кадрировании.
104 / 104Newsreader 300
60 / 63Заголовок секции
28 / 34Founders stay in the room
16 / 26Inter 400 для каждого факта, цифры и абзаца.
11 · +18%Private equity · Mid-market
Четыре ширины, одна иерархия
Спроектировано в 1440, проверено в 1024 и 768, доведено в 390. Порядок чтения не меняется никогда; меняются колонки, кегль и навигация. Каждое изменение записано для разработчика.
Финальный макет для десктопа
Финальный мобильный макет
| Элемент | Десктоп ≥1101 | Планшет 701–1100 | Мобильный ≤700 |
|---|---|---|---|
| Навигация | 5 ссылок + вход | Ссылки ≤900 → меню | Логотип + меню, 72 h |
| Заголовок первого экрана | 104 / 104 | 80 → 68 | 54 |
| Кнопки первого экрана | Рядом | Рядом | Друг под другом, во всю ширину |
| Ключевые цифры | 4 колонки | 4 → 2 колонки | 2 колонки |
| Подход | Деление 5 / 7 | Деление → друг под другом ≤900 | Друг под другом |
| Таблица портфеля | 4 колонки | 4 колонки | Только компания + год |
| Материалы | 3 карточки | 3 → 2 + 1 | 1 в ряд |
| Боковое поле | 64 | 40 | 22 |
Сделано один раз — используется везде
Страница собрана из девяти компонентов с их состояниями. Внутренние страницы (портфель, команда, материалы) используют тот же кит, поэтому дешевле и в дизайне, и в разработке.
Founders stay in the room
Founders stay at the centre of every decision.
“They asked about our customers before our margins.”
Ingrid Solberg · CEO, Halvard SystemsНичего не нужно угадывать
Разметка, измеренная по собранному прототипу, дизайн-токены в коде, файл, организованный по страницам, экспортированные материалы и QA на реальных устройствах после сборки. Нажмите на разметку, чтобы увеличить.
- Дизайн-файл · страницы
- 00 Обложка и измененияv1.4
- 01 Карта сайта и сценарии6 страниц
- 02 ВайрфреймыD + M
- 03 Стайл-тайл1
- 04 Десктоп 14406 кадров
- 05 Планшет 7686 кадров
- 06 Мобильный 3906 кадров
- 07 Компоненты9 + состояния
- 08 Прототипкликабельный
- 09 Передача разработчикамспецификации
/* northpeak-tokens.css · excerpt */
:root {
--np-navy: #0E1A2B;
--np-ivory: #F4EFE6;
--np-brass: #B08D57;
--np-display: 300 104px/1 Newsreader; /* 80 · 54 */
--np-h2: 300 60px/1.05 Newsreader; /* 50 · 40 */
--np-body: 400 16px/1.6 Inter;
--np-max: 1280px;
--np-gutter: 64px; /* 40 · 22 */
--np-section: 140px; /* 110 · 80 */
--np-button-h: 48px;
}
Что получает разработчик
- Спецификации для каждого кадра, доступные в файле
- Токены: цвет, шрифт, отступы, раскладка — в CSS
- Таблица брейкпоинтов со всеми изменениями
- Материалы: первый экран 2880 px WebP + JPG, логотип SVG, набор фавиконок
- Состояния: наведение, фокус (2 px латунь), активное, пустое
- QA собранного сайта во всех четырёх ширинах
Ваш сайт — через те же шесть шагов.
От брифа до передачи примерно за пять рабочих дней для корпоративной главной и её шаблонов. Figma, Webflow, WordPress или HTML вручную.