Задача
Дизайн-студию оценивают по её сайту раньше, чем откроют портфолио. Шаблон со стоковыми фотографиями говорит, что студия покупает свой вид на стороне, а это ровно противоположно тому, что она продаёт.
Вторая половина задачи обычная. Сайт должен показать работы, назвать, чем студия занимается, донести, что о ней говорят клиенты, и собрать бриф — всё на одной странице.
Что сделали
Имя во весь экран и своя графика
Первый экран — имя студии во всю ширину, буква за буквой, одним синим по светлому фону. Под ним два блока: список того, чем студия занимается, и рисованный портрет, который задаёт визуальный язык всей страницы.
Ни одна картинка не куплена. Портреты, сцена в студии, магазин и разворот печати нарисованы в одной палитре и с одной толщиной линии, поэтому страница читается как работа.
Три проекта вместо стены превью
В витрине три кейса, каждый на своей карточке во всю ширину: линейка джемов, айдентика магазина и ежегодник на некрашеной бумаге. Плашка называет тип работы, крупное слово — предмет, а две-три строки объясняют, в чём было ограничение.
Трёх достаточно. Студия, которая показывает тридцать проектов, просит посетителя разбираться самому, а студия с тремя уже выбрала.
Отзывы рисованными портретами
Слова клиентов идут каруселью: один отзыв открыт, под ним имя и должность. Ниже те же люди стоят рядом наклонёнными карточками-портретами, нарисованными в том же стиле, что и всё остальное.
На сайте портфолио рядом с цитатой обычно ставят стоковое фото, которому никто не верит. Рисованный портрет ничего такого не заявляет и оставляет отзывы внутри общего визуального языка страницы.
Услуги обычными словами и форма брифа
Услуги собраны нумерованным списком, а не сеткой иконок: упаковка, айдентика, арт-дирекшн, ритейл, издания. В каждой строке написано, что студия отдаёт на выходе, — именно это клиент и покупает.
Заканчивается страница брифом. Форма просит прислать даже черновой и обещает ответ в течение двух рабочих дней, а если задача не для студии, там подскажут, для кого она.
Техническая часть
Страница написана руками, а перед публикацией её проверяют скрипты: контраст, ошибки в консоли, анимации. Вот эти проверки и цифры, которые они дают.
Скорость
Скорость 98 на десктопе
Lighthouse замеряет десктопную версию на 98 по скорости загрузки: самый крупный элемент появляется меньше чем за секунду.
Вся страница — 730 КБ
Всё, что есть на странице, — графика, шрифты, код — весит около 730 килобайт в 27 запросах.
Логотипы нарисованы вектором
Шесть логотипов компаний на странице собраны в SVG, а не выгружены картинками.
Ничего не прыгает при загрузке
Замеренный сдвиг вёрстки на мобильном — 0,001, это практически ноль по этой метрике.
Доступность
Доступность 94 на обоих замерах
Проверка доступности даёт 94 и на мобильном, и на десктопе: порядок заголовков, описания картинок, подписи кнопок и полей.
Контраст проверяется скриптом
Скрипт замеряет каждую пару «текст на фоне» по уровню контраста WCAG AA и прогоняет все семь фирменных палитр, на которые сайт можно переключить.
Надёжность
Проверка консоли и анимаций
Перед публикацией скрипт открывает собранную страницу в браузере, собирает ошибки консоли и неудачные запросы и проверяет, что анимации появления действительно срабатывают.
HTTPS без пути назад
Незащищённый адрес переадресуется на HTTPS, сервер отдаёт заголовок HSTS с preload, и браузер перестаёт пробовать небезопасный вариант.
Поиск
Сто баллов за SEO и практики
Lighthouse ставит странице 100 по SEO и 100 за лучшие практики — и на мобильном, и на десктопе, ни один пункт в этих разделах не проваливается.
Мобильная версия
Проверено на экране телефона
На ширине 390 пикселей страница ровно 390 пикселей: горизонтальной прокрутки нет.
Мобильная версия
Что получилось
- Работы, услуги и отзывы на одной странице, оттуда же уходит бриф.
- Вся графика нарисована под сайт, со стоков не взято ничего.
- Новый проект добавляется одной карточкой, вёрстку трогать не нужно.
Сайт теперь проводит первую встречу сам. Клиент видит, как студия думает, читает три проекта с их ограничениями, слышит тех, кто с ней работал, и отправляет бриф с этой же страницы.
