Как сделать хорошее онлайн-портфолио

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

Как сделать онлайн-портфолио: три главные задачи

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

Задача 1. Определить цель онлайн-портфолио 

Цель портфолио очевидна — показать себя работодателю и продемонстрировать опыт. Однако есть нюансы. Надо понимать, кто именно посмотрит портфолио, и какие выводы на основании него сделает. Поэтому вначале задаются следующие вопросы:

• Кому я буду показывать своё портфолио?
• Какой тип работы я хочу в будущем делать? 
• Что самое важное надо показать в моей работе?

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

А в портфолио разработчика отражаются вещи, важные тому, кто хочет сайт или приложение. Это что? Скорость работы, визуальная составляющая, функции, которые вы можете реализовать. Ему надо увидеть реализованные проекты — рабочие сайты и приложения. Ему важна и деловая часть – ценник, порядок работ. 

Если в портфолио должны попадать разные проекты, которые потенциально интересны разной аудитории (как с фотографиями), то придумайте, как их структурировать, и отделите разделы друг от друга. 

Задача 2. Отобрать свои лучшие работы и проекты

В портфолио не надо складывать все проекты, тексты, фотографии, сайты, которые вы когда-то делали. Соберите лучшие работы, например, такие:

• Которые «выстрелили» у клиента: принесли много денег, у которых было много просмотров, скачиваний и так далее.
• Которые очень хвалил заказчик.
• Которые принесли уникальные результаты.

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

Задача 3. Создать веб-страницу с портфолио 

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

---

Кстати, работать в Bubble мы учим на курсе веб-разработки.

---

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

Проверяйте скорость загрузки
Убедитесь, что страница не грузится бесконечно долго. Есть данные, что оптимальная скорость загрузки страницы — 2,8 секунды.

Верстайте портфолио в едином стиле
Чтобы всё в нём — от фавикона (что такое фавикон) до подвала — было в одном стиле и не конфликтовало между собой.

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

Как сделать портфолио, которое понравится — чтобы вы тоже понравились 

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

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

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

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

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

Где посмотреть примеры?  Поизучайте разделы с портфолио на Behance или Dribble. Ещё, например, есть раздел с собранными портфолио у Tilda  и есть раздел темплейтов портфолио у Webflow. 

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

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

Обеспечьте удобный контакт 
Контактные данные помещают в шапке или в подвале. Ещё контактам, соцсетям и способам связаться с вами можно посвятить целый блок. Можно сделать отдельную кнопку «Связаться со мной». Идеально дать возможность посмотреть на вас ещё до контакта — например, через соцсеть. И ещё советуем оставить способ связи, при котором отправитель увидит уведомление о доставке — чтобы это не было игрой в одни ворота, и человек на этом конце провода понимал, что его сообщение ушло. Так что мессенджер — отличный канал связи.

Что включать в портфолио ноукодера

Добавим к сказанному выше специфики для ноукодеров — что неплохо бы отразить в портфолио ноукодера. 

Раздел о себе. Представьтесь и в одном предложении опишите, кто вы и что делаете. Эта часть должна открыть портфолио. 

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

Раздел с проектами. Сюда помещайте все реализованные проекты — собранные приложения, лендинги, сайты. 

Раздел с отзывами. Тут можно разместить отзывы клиентов, если они уже есть. 

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

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

---

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