Оформление портфолио студии

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

Дигибу спросил, почему разработчики выбирают тот или иной способ оформления проектов в портфолио.

Карл ПлаудеКарл Плауде
Арт-директор дизайн-студии «Scada», г. Рига, Латвия
Пример оформления работы в портфолио

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

В текущей версии портфолио мы решили не придерживаться чётких и строгих правил публикации работ. У нас есть как просто скриншоты с ссылками, так и более подробные рассказы с полноэкранными и динамическими элементами. Каждую работу оформляет непосредственно сам автор работы сразу после принятия её заказчиком. Здесь хорошо работает правило «куй железо пока горячо» — когда дизайнер ещё не вышел из проекта, он держит в голове интересные мелочи и особенности работы, о которых может рассказать в процессе. После подготовки всё проходит ревизию арт-директора, вносятся требующиеся корректировки, после чего материал отдаётся редактору и публикуется на сайте.

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

Владимир ЗавертайловВладимир Завертайлов
Генеральный директор студии «Сибирикс», г. Барнаул
Пример оформления работы в портфолио и в блоге

Для будущего заказчика важны как минимум две вещи:

  • Что он получит в итоге работы с вами (уровень работ).
  • Как он это получит (уровень процессов, насколько комфортно ему будет с вами работать).

Для решения первой задачи у нас есть традиционное портфолио: самые свежие и лучшие работы вверху, полная галерея загружается сама, если полистать вниз. Жмёте на картинку — получаете профиль проекта с полноэкранными скриншотами страниц. Там же — его небольшое резюме и ссылка на готовый, работающий продукт. Чтобы стало совсем удобно, со страницы любого проекта можно перейти к следующему по нажатию на ←+Ctrl или Ctrl+→.

Обычно для самых интересных проектов мы готовим кейсы-описания, которые и идут в блог. Здесь можно найти проект с похожими на ваши бизнес-задачами, посмотреть, как они решались, можно сказать, проследить жизнь проекта с самого рождения. Мы считаем, что это очень круто и правильно — давать заказчику полную информацию о рабочих процессах.

Клиентам нравится. В последнее время они даже чаще ссылаются не на портфолио, а именно на блог, когда в беседе с менеджером упоминают какой-то проект. «Вот я у вас блоге читал один кейс — мне очень понравилась реализация фильтров, мне нужно что-то подобное».

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

Виталий ДенисенковВиталий Денисенков
Директор Студии Борового, г. Минск, Беларусь
Пример оформления работы в портфолио

Оформление портфолио — важная часть работы Студии. Фактически, завершением любого знакового проекта (крупный заказчик, проект со сложным функционалом, инновационные решения) является именно размещение работы в портфолио.

Хорошая подача работ в портфолио решает 3 задачи:

  • Привлечение новых клиентов. Если задача решена хорошо, то практически со стопроцентной вероятностью студия получит запросы от компаний этой или смежных отраслей.
  • Визуализация и описание студийных подходов к разработке. Для студии важно получать именно «своих» клиентов и подробное описание реализованных проектов будет привлекать заказчиков, которым близки ваши процессы и решения.
  • Демонстрация потенциальным сотрудникам сложности и важности решаемых задач, что является одним из важных элементов в выборе работодателя.

Мы придерживаемся правила, что сложные и/или инновационные проекты подаются в портфолио подробно, для наглядного представления сложности решённой задачи, процесса поиска решений, некоторых творческих и архитектурных находок. Для этого работает арт-директор в связке с журналистом или копирайтером.

Отличный пример такой подачи — кейс разработки нового сайта Белорусской железной дороги. Мы отлично понимаем, что обычному посетителю сайта будет неинтересно «многобукав», но я уверен, что те немногие клиенты, которым необходимо решение подобной по объёму задачи, внимательно прочитают данный материал. Они и есть целевая аудитория больших и подробных кейсов.

Для подачи хороших «отраслевых» работ мы используем сокращённый вариант подачи: описание задачи, скриншоты основных макетов (как правило, это главная (титульная) страница проекта и макеты 2-3 уникальных страниц каталога продукции) с краткими комментариями. Пример такой подачи — описание разработки нового сайта Лидского пива. Из-за известности бренда в Беларуси просмотры данной работы практически соответствуют интересу к проекту Белорусской железной дороги, несмотря на то, что проекты по своей сложности и масштабности разнятся на порядок.

Описание процесса разработки также позволяет в дальнейшем аргументировано отвечать на вопрос «Почему так дорого? ». Это наглядно показывает всю глубину и объём работ на уникальных проектах.

Евгений ЯкушевЕвгений Якушев
Управляющий партнёр и креативный директор брендингового агентства «ЦЭТИС», г. Москва
Пример оформления работы в портфолио

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

Сегодня можно выделить четыре типа подачи работ:

  1. Наше портфолио для наших потенциальных клиентов.
  2. Наше портфолио для наших же коллег-дизайнеров, чтобы они посмотрели как круто мы умеем.
  3. Наше портфолио специально для маркетологов.
  4. Нам на всё плевать, у нас шоурил.

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

Потому, в части презентации бренд-проектов, мы стремимся рассказать и показать как разработанные нами объекты решают поставленные задачи, какой несут в себе смысл, зачем и почему. Заметьте, мы не говорим о том, как они красивы с точки зрения дизайна, он в нашем случае скорее вторичен и несёт прикладной характер.

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

Подготовка работы к публикации для нас сложный процесс, в среднем на создание одной визуализации у нас уходит до двух недель. На сегодняшний день в очереди висит более 50-ти выполненных и не опубликованных проектов. Это связано с тем, что в процесс публикации работы вовлечены множество подразделений:

  1. Сначала мы анализируем, что было сделано по проекту, и накидываем от руки (ужасно не красиво) то, что важно показать для нас с точки зрения продаж наших услуг.
  2. Далее арт-директор допиливает этот план, консультируется с архитектором проекта, с дизайнерами, которые были вовлечены в разработку и формирует задачу для дизайнеров-визуализаторов.
  3. После чего начинается длительный техдизайн-процесс.
  4. Затем вступает копирайтер, который описывает информационную составляющую проекта.
  5. Наконец, технический отдел верстальщиков публикует проект на сайте.
  6. И в завершении переводчики локализуют работу для зарубежного рынка.

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

Алексей ЕрмиловАлексей Ермилов
Арт-директор и партнёр креативного агентства «ИКРА», г. Москва
Пример оформления работы в портфолио

Давайте посмотрим на то, что такое сайт студии. Это такой же корпоративный сайт, только продаёт он не недвижимость и не производство промышленного утеплителя. Он продаёт такие же сайты. Тут-то и возникает первый вопрос, как сделать так, что бы сайт продавал сайты. И когда начинаешь формулировать ответ, то приходит понимание, что продаются не сайты, а решение бизнес-задач клиента, повышение продаж и имидж. В зависимости от того, с какой задачей пришёл клиент и оформляется работа в портфолио.

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

Формат «скриншот + описание» у нас был изначально и ничего в нём не было особенного. Но через какое-то время мы поняли, что в этом формате мы можем очень удобно показать пользовательский сценарий и то, как посетитель ведёт себя на сайте, попутно показав фишки проекта.

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

Ещё мы публикуем процессы для проектов. Это также один из важнейших моментов работы. Часть процессов пока что теряется в недрах файловых систем Макинтошей, но мы всегда стараемся сохранить ключевые точки процесса разработки.

Дизайн — очень тонкая и субъективная штука. Зачастую человек оторван от процесса и не понимает, почему было принято то или иное решение, а также может судить что «да это легкотня, я бы сам так сделал». Очень хорошо это иллюстрирует одна из наших работ — фирменный стиль «Электропроекта». Тут кажется, что всё настолько просто, а особым эстетам логотип может показаться и вовсе неподходящим. Но это поистине ошибочное мнение человека, который не знает компанию, не знает, чем она занимается, и на знает сути проекта. А теперь взгляните на процесс и посчитайте, сколько бизнес-задач решает данный фирменный стиль и насколько точно он соответствует компании.

Портфолио для студии это не красота. Портфолио — это инструмент продажи, и если к нему относиться как к вторичному продукту, то и продажи будут вторичны. А чтобы дать понять клиенту, что платит он за «процесс», а получает «результат», надо показать ему и то, и другое в интересной форме.

Владислав СтерлинВладислав Стерлин
Менеджер проектов веб-студии «Nutnet», г. Ижевск
Пример оформления работы в портфолио

За три года работы вместе с компанией развивалось и наше портфолио. От нескольких скриншотов мы перешли к подробному описанию проектов, в которое входит:

  • представление клиента;
  • постановка задачи;
  • ключевые моменты проектирования;
  • представление результата;
  • список работ;
  • стоимость;
  • список участников.

Помимо итоговой картинки, нам важно показать, какой объём работ выполнен по проекту и почему один сайт стоит столько, а другой — столько.

Как мне кажется, на данный момент нам удалось найти оптимальный баланс между визуальной и содержательной стороной представления работ. Много картинок (скриншотов) плюс краткое описание ключевых моментов.

Есть даже одна инновация. Мы первыми в регионе начали указывать стоимость конкретного проекта. Незаметный шаг для индустрии в целом и огромный для региона.

Интересный момент связан с представлением участников, работавших над проектом. Понимая, что твоим именем будет подписан проект, ребята начали серьёзнее относиться к своей работе. Плюс это некая гарантия клиенту, что студия не набор мёртвых душ и не одиночка-стахановец. Для средних и больших компаний это важный параметр.

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

Алексей ШишкинАлексей Шишкин
Генеральный директор креативного агентства «Redsoft», г. Москва
Пример оформления работы в портфолио

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

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

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

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

Оформлением каждой работы занимается наш арт-директор. Мы считаем, что наш веб-сайт и, в частности, портфолио — это важнейший элемент нашего бизнеса. Поэтому и доверить эту задачу можем только лучшему нашему специалисту.

Мы перепробовали много вариантов исполнения портфолио, и только тот, который реализован нами, в максимальной степени удовлетворяет всем целям. Предоставляя клиенту исчерпывающую информацию по каждому проекту, мы показываем, что нам нечего скрывать, любую работу мы выполняем качественно.