Портфолио для архитекторов, фотографов и дизайнеров
Архитекторы, фотографы и дизайнеры — самая требовательная аудитория, какая может быть у сайта, потому что они оценивают саму страницу раньше, чем доходят до работ. Сбитая сетка или ленивая типографическая шкала для них не деталь, а первое, что они видят.
Вторая половина задачи — вес. Это единственная отрасль, где контент почти целиком состоит из изображений максимального качества, какое клиент может дать, и где медленная галерея разрушает впечатление, которое дизайн только что произвёл.
Я делал портфолио архитектурного бюро по логике печати — работы поданы нумерованным индексом с рисунками, следующими за курсором, и одной навигацией, читаемой на светлой и тёмной половинах через mix-blend-mode, — и портфолио фотографа на WordPress с упором на анимацию, интерактивными галереями и параллаксом.
Что здесь устроено иначе
Типографика и есть дизайн
При таком минимуме декора всё держат типографическая шкала, длина строки и отступы. На крупных кеглях межбуквенные расстояния и места переносов — это решения, а не значения по умолчанию.
Индекс, а не сетка превьюшек
Бюро перечисляют работы как реестр: с номером, назначением, площадью и годом. Сетка квадратиков превращает корпус работ в обои.
Вес изображений решает, выживет ли дизайн
Отдавайте картинки в том размере, в котором они показываются, включайте ленивую загрузку ниже первого экрана и задавайте явные размеры, чтобы ничего не прыгало. Подтормаживающая галерея обнуляет всё мастерство выше.
Сдержанность вместо эффектов
Страница должна оставаться тихой, пока посетитель сам о чём-то не попросит. Превью при наведении и переходы на скролле работают здесь именно потому, что всё остальное неподвижно.
Что входит в работу
- Типографическая система с настоящей шкалой, рассчитанной на крупные кегли, а не увеличенной из основного текста
- Работы поданы индексом с контекстом: назначение, год, роль, место
- Взаимодействия при наведении и на скролле написаны руками, без библиотеки, которая делает это приблизительно
- Обработка изображений: правильные размеры, современные форматы, ленивая загрузка, явные габариты
- Модель контента для проектов, чтобы новые работы добавлялись без разработчика
- Производительность проверена на среднем телефоне, а не только на ноутбуке дизайнера
Ошибки, которые встречаю чаще всего
Изображения залиты в полном разрешении «потому что качество важно» и отдаются шириной 600 пикселей
Шаблонное портфолио, которое эта аудитория опознаёт секунды за две
Работы показаны без контекста: ни задачи, ни объекта, ни года, ни роли
Вступительная анимация между посетителем и работами
Весь текст одного кегля, поэтому иерархии нет вообще
Владелец не может добавить проект без разработчика
Услуги для этой отрасли
UI/UX дизайн
Индивидуальные дизайн-решения для любого проекта. Создание с опорой на 8 лет профессионального опыта. Доступны консультация, прототипирование и дизайн, готовый к разработке. Узнайте больше внутри.
Разработка на WordPress
Профессиональная разработка блога под ваш бренд — быстрый, адаптивный и SEO-оптимизированный для роста.
Разработка на Next.js
Next.js и React для сайтов, которые не просто что-то говорят, а что-то делают: кабинеты, дашборды, живые данные и интерфейсы уровня приложения.
Есть проект в этой сфере?
Давайте обсудим
Расскажите, что должен делать сайт. Честный диапазон получите в тот же день.
Обсудить проект
Вопросы
Нет. Современные форматы в том размере, в котором картинка показывается, выглядят идентично и весят долю от исходного. Качество портит как раз браузер, ужимающий файл в 4000 пикселей в слот на 600.
Да — ради этого и делается модель контента вместо свёрстанных руками страниц. Добавление проекта должно быть заполнением полей, а не заказом работы.
Только там, где она что-то делает. В этой отрасли сдержанность читается как уверенность: превью при наведении или лента со снап-точками своё место оправдывают, вступительная заставка — нет.
От $600 за компактное одностраничное портфолио. Полноценный сайт с индексом проектов, страницами кейсов и авторским интерактивом — обычно $1 200–2 800 в зависимости от того, сколько анимации делается вручную.