Портфоліо для архітекторів, фотографів і дизайнерів
Архітектори, фотографи та дизайнери — найвимогливіша аудиторія, яка може бути в сайту, бо вони оцінюють саму сторінку раніше, ніж доходять до робіт. Збита сітка чи лінива типографічна шкала для них не деталь, а перше, що вони бачать.
Друга половина задачі — вага. Це єдина галузь, де контент майже цілком складається із зображень максимальної якості, яку клієнт може дати, і де повільна галерея руйнує враження, яке дизайн щойно справив.
Я робив портфоліо архітектурного бюро за логікою друку — роботи подані нумерованим індексом із малюнками, що слідують за курсором, і однією навігацією, читабельною на світлій і темній половинах через mix-blend-mode, — і портфоліо фотографа на WordPress з наголосом на анімацію, інтерактивними галереями та паралаксом.
Що тут влаштовано інакше
Типографіка і є дизайном
За такого мінімуму декору все тримають типографічна шкала, довжина рядка та відступи. На великих кеглях міжлітерні відстані й місця перенесень — це рішення, а не значення за замовчуванням.
Індекс, а не сітка прев'ю
Бюро перелічують роботи як реєстр: із номером, призначенням, площею та роком. Сітка квадратиків перетворює корпус робіт на шпалери.
Вага зображень вирішує, чи виживе дизайн
Віддавайте картинки в тому розмірі, у якому вони показуються, вмикайте ліниве завантаження нижче першого екрана й задавайте явні розміри, щоб нічого не стрибало. Галерея, що підгальмовує, обнуляє всю майстерність вище.
Стриманість замість ефектів
Сторінка має лишатися тихою, доки відвідувач сам про щось не попросить. Прев'ю при наведенні та переходи на скролі працюють тут саме тому, що все інше нерухоме.
Що входить у роботу
- Типографічна система зі справжньою шкалою, розрахованою на великі кеглі, а не збільшеною з основного тексту
- Роботи подані індексом із контекстом: призначення, рік, роль, місце
- Взаємодії при наведенні та на скролі написані руками, без бібліотеки, яка робить це приблизно
- Обробка зображень: правильні розміри, сучасні формати, ліниве завантаження, явні габарити
- Модель контенту для проєктів, щоб нові роботи додавалися без розробника
- Продуктивність перевірена на середньому телефоні, а не лише на ноутбуці дизайнера
Помилки, які трапляються найчастіше
Зображення залиті в повній роздільності «бо якість важлива» й віддаються завширшки 600 пікселів
Шаблонне портфоліо, яке ця аудиторія впізнає секунди за дві
Роботи показані без контексту: ні задачі, ні об'єкта, ні року, ні ролі
Вступна анімація між відвідувачем і роботами
Весь текст одного кегля, тому ієрархії немає взагалі
Власник не може додати проєкт без розробника
Послуги для цієї галузі
UI/UX дизайн
Індивідуальні дизайн-рішення для будь-якого проєкту. Створення з опорою на 8 років професійного досвіду. Доступні консультація, прототипування та дизайн, готовий до розробки. Дізнайтеся більше всередині.
Розробка на WordPress
Професійна розробка блогу під ваш бренд — швидкий, адаптивний і SEO-оптимізований для зростання.
Розробка на Next.js
Next.js і React для сайтів, які не просто щось кажуть, а щось роблять: кабінети, дашборди, живі дані та інтерфейси рівня застосунку.
Є проєкт у цій сфері?
Давайте обговоримо
Розкажіть, що має робити сайт. Чесний діапазон отримаєте того ж дня.
Обговорити проєкт
Питання
Ні. Сучасні формати в тому розмірі, у якому картинка показується, виглядають ідентично й важать частку від вихідного. Якість псує якраз браузер, що втискає файл у 4000 пікселів у слот на 600.
Так — заради цього й робиться модель контенту замість зверстаних руками сторінок. Додавання проєкту має бути заповненням полів, а не замовленням роботи.
Лише там, де вона щось робить. У цій галузі стриманість читається як упевненість: прев'ю при наведенні чи стрічка зі снап-точками своє місце виправдовують, вступна заставка — ні.
Від $600 за компактне односторінкове портфоліо. Повноцінний сайт з індексом проєктів, сторінками кейсів і авторським інтерактивом — зазвичай $1 200–2 800 залежно від того, скільки анімації робиться вручну.