VIDEMIND
Web Design Портфолио дизайнера

Сайт студии: как показывать проекты, а не себя

Разбираем типологию сайтов творческих студий: сетка проектов, подача изображений, работа с описаниями и то, почему сложная анимация чаще мешает.

Абстрактная графика VIDEMIND: сетка клеток: часть залита цветом, в некоторых круг или диагональ
VIDEMIND
Содержание · 10
  1. Главная задача — показать работы
  2. Сетка проектов
  3. Изображения
  4. Тексты
  5. Анимация
  6. Что на самом деле смотрят на сайте бюро
  7. Тяжесть, которую сайты бюро себе позволяют
  8. Что ищет на сайте потенциальный заказчик
  9. Что писать у каждого проекта
  10. Что в итоге

Разбираем типологию сайтов творческих студий: сетка проектов, подача изображений, работа с описаниями и то, почему сложная анимация чаще мешает.

Главная задача — показать работы

Сайт студии существует, чтобы потенциальный заказчик увидел проекты и понял уровень. Всё, что мешает этому — заставки, длинные анимации входа, сложная навигация, — работает против.

Хороший сайт студии открывается сразу проектами и позволяет за минуту составить впечатление.

Сетка проектов

Три подхода: равномерная сетка, асимметричная раскладка и полноэкранная прокрутка. Первый нейтрален и работает всегда, второй даёт характер, третий подходит только при очень сильных изображениях.

Три способа показать проекты

Равномерная сеткаАсимметричнаяПолный экран
Скорость просмотраВысокаяСредняяНизкая
ХарактерНейтральныйВыраженныйКинематографичный
Требования к фотоСредниеВысокиеМаксимальные
Кому подходитБольшое портфолиоСредние студииМалое портфолио

Изображения

В творческом портфолио изображения — почти весь контент, поэтому их подготовка важнее вёрстки. Единая обработка, одинаковая цветокоррекция и последовательные ракурсы делают разные проекты частями одного тела работ.

Разнобой в обработке читается как непоследовательность автора, даже если проекты хорошие.

Проекты, обработанные в едином ключе: портфолио читается как одно целое
Проекты, обработанные в едином ключе: портфолио читается как одно целоеVIDEMIND

Тексты

Описание проекта должно сообщать факты: место, площадь, год, задача, что было сделано. Абстрактные рассуждения о «диалоге пространства и света» не сообщают ничего и читаются как заполнение.

Полезный минимум: два абзаца текста и блок фактов — год, площадь, роль студии, команда.

Абстрактная графика VIDEMIND: условный план: помещения прямоугольниками, одно выделено цветом
VIDEMIND

Анимация

В сайтах студий анимация чаще вредит: она увеличивает время до контента, конфликтует с прокруткой и раздражает при повторных визитах.

Рабочий минимум — мягкое появление изображений, плавные переходы между страницами и подчёркивания ссылок. Всё остальное имеет смысл только тогда, когда анимация сама является демонстрацией компетенции студии.

Сайт студии показывает проекты, а не студию. Раздел «о нас» открывают после того, как работы убедили, — и почти никогда до.

Что на самом деле смотрят на сайте бюро

У сайта архитектурного бюро три типа посетителей, и им нужно разное. Потенциальный заказчик проверяет масштаб и типологию: делали ли похожее, какого размера. Будущий сотрудник смотрит процесс и состав команды. Коллега или издание ищет пригодные материалы и контакты. Сайт, построенный только вокруг красивых кадров, отвечает лишь первому, и то наполовину.

Отсюда практическое требование к проекту в портфолио: не только съёмка, но и вводные — площадь, сроки, задача, ограничения. Именно они позволяют заказчику узнать в чужом проекте свой.

Абстрактная графика VIDEMIND: схематичный макет экрана: тёмная шапка, строки-плашки и боковая колонка
VIDEMIND

Тяжесть, которую сайты бюро себе позволяют

Архитектурные сайты — рекордсмены по весу страницы: полноэкранные съёмки, часто без сжатия и без адаптивных размеров. На мобильном соединении это десятки секунд до первого кадра, а именно с телефона приходит большая часть первого просмотра.

Разумный минимум: адаптивные размеры под слот, современный формат, ленивая загрузка всего ниже первого экрана и обязательное соотношение сторон у контейнера, чтобы вёрстка не прыгала. Ни одно из этих решений не влияет на то, как выглядит проект, — только на то, дождутся ли его.

Абстрактная графика VIDEMIND: условный план: помещения прямоугольниками, одно выделено цветом — к разделу «Тяжесть, которую сайты бюро себе позволяют»
VIDEMIND

Что ищет на сайте потенциальный заказчик

Портфолио бюро смотрят три разные группы, и им нужно разное. Частный заказчик ищет похожий на свой объект и ответ на вопрос «сколько это стоит». Застройщик или город смотрит опыт нужного масштаба и подтверждение, что бюро проходило согласования. Будущий сотрудник читает состав команды и то, как описаны проекты.

Сайты бюро обычно отвечают только первой группе, да и той наполовину: проекты показаны, а масштаб, сроки и стадия — нет. Между тем именно эти сведения превращают просмотр в письмо. Указывать точную стоимость необязательно и часто нельзя, но площадь, год, стадия («концепция», «рабочая документация», «реализовано») и роль бюро в проекте — сведения нейтральные, и их отсутствие читается как уклончивость.

Что писать у каждого проекта

  • Площадь и год: без них снимок ничего не говорит о масштабе.
  • Стадия: концепция, проект, реализация — разные вещи, и путать их нечестно.
  • Роль бюро: полный цикл, только концепция, авторский надзор, работа в консорциуме.
  • Кто ещё участвовал: конструкторы, инженеры, ландшафт — заказчик читает это как признак взрослой работы.
  • Одно ограничение задачи и как оно решено — короткая строка, которая отличает портфолио от галереи.
Абстрактная графика VIDEMIND: условный план: помещения прямоугольниками, одно выделено цветом — к разделу «Что писать у каждого проекта»
VIDEMIND

Что в итоге

Сайт студии — инструмент показа работ, а не демонстрация владения анимацией.

Откройтесь сразу проектами, обработайте изображения в едином ключе, напишите фактические описания и вынесите контакты на видное место.

Коротко

Что показывать в проекте, кроме съёмки?
Вводные: площадь, сроки, задачу и ограничения. Именно по ним заказчик узнаёт в чужом проекте свой; одни красивые кадры этого не дают.
Почему сайты бюро медленные?
Полноэкранные съёмки без адаптивных размеров и сжатия. На мобильном соединении это десятки секунд до первого кадра — а с телефона приходит большая часть первого просмотра.
Продолжить тему · Портфолио дизайнера

Обложки проектов

Сетка одинаковых прямоугольников усыпляет. Разбираем приёмы разнообразия обложек, которые не превращают главную страницу в хаос.Дальше

Нашли ошибку или неточность в атрибуции? Напишите нам

Обсуждение

Загружаем…

Только имя и мысль. Ссылки, разметку, код и номера телефонов журнал не публикует — учётных записей на сайте нет, и оставлять здесь ссылку бессмысленно.

0 / 1500