Как создать сайт-портфолио, который приносит заказы

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

Начните с того, кто смотрит

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

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

Что включить

Работы

Выбирайте меньше, но лучших проектов. Уберите всё, что вы не хотели бы делать снова. Ставьте самую сильную и релевантную работу первой; многие посетители не прокручивают дальше первого ряда.

Для дизайнеров и разработчиков лучшие проекты становятся кейсами. Полезная структура:

1. Задача — одно-два предложения о ситуации и о том, кого она затронула.
2. Ваша роль — что вы сделали и что сделали другие. Будьте точны; преувеличения легко заметить на собеседовании.
3. Процесс — несколько ключевых решений с эскизами, вайрфреймами или фрагментами кода.
4. Результат — что было выпущено и какой итог вы можете честно назвать. Если нельзя показать цифры, опишите изменение качественно.

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

Обо мне и контакты

Раздел «Обо мне» должен сказать, кто вы, чем занимаетесь, для кого работаете и где находитесь или работаете ли удалённо. Настоящее фото помогает. Путь связи должен быть очевиден с каждой страницы: короткая форма, адрес email или ссылка на запись звонка. Если вы принимаете записи, скажите как.

Дополнительные страницы

• Услуги и расценки — полезно фрилансерам, если хотите отсеять неподходящие заявки.
• Резюме или CV — полезно соискателям; часто делают PDF для скачивания и версию на странице.
• Тексты или заметки — стоит, только если вы будете их обновлять. Заброшенный блог давней давности вредит больше, чем его отсутствие.
• Отзывы — только настоящие, с разрешения.

Решения и компромиссы

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

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

Как вы будете обновлять. Будьте честны с собой. Если вы добавляете работы каждый месяц, нужен простой способ это делать: простая админ-страница, CMS или конструктор, в котором вам удобно править. Если обновляете два раза в год, можно редактировать сайт напрямую.

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

Первый промпт для ИИ-конструктора

Хороший промпт называет аудиторию, страницы, работы и стиль:

Сделай сайт-портфолио для Лены Пак, продуктового дизайнера, которая ищет старшие штатные роли в SaaS-компаниях. Страницы: «Главная» с коротким вступлением и сеткой из 5 кейсов; шаблон страницы кейса с разделами «Задача», «Моя роль», «Процесс» (с галереей изображений) и «Результат»; «Обо мне» с фото, короткой биографией и загрузкой резюме; «Контакты» с простой формой (имя, email, сообщение), которая сохраняет данные в базе и показывает благодарность. Стиль: спокойный и минималистичный, много белого пространства, один акцентный цвет, крупный читаемый текст. Хорошо работает на телефонах. Используй чётко размеченные заглушки проектов, которые я смогу заменить по одной.

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

Больше о приёмах написания промптов: как писать промпты для ИИ-конструкторов приложений.

Этапы создания

1. Выберите аудиторию и проекты до того, как открывать любой инструмент.
2. Напишите тексты для каждого кейса в документе: задача, роль, процесс, результат.
3. Подготовьте изображения — обрежьте, уменьшите и сожмите их. Назовите файлы понятно.
4. Создайте или выберите стартовый макет. Просмотр шаблонов портфолио — быстрый способ увидеть, какой стиль подходит вашей работе.
5. Сначала сделайте главную и один кейс, доведите их до ума, затем повторите тот же шаблон.
6. Добавьте «Обо мне» и контакты. Протестируйте форму связи от начала до конца.
7. Проверьте на телефоне. Портфолио часто ломаются на маленьких экранах: тесные сетки, огромные картинки, мелкие подписи.
8. Добавьте основы SEO и картинку для превью, чтобы ссылки выглядели хорошо, когда вы их отправляете.
9. Опубликуйте сайт и подключите домен. См. как подключить свой домен.
10. Попросите двух людей из вашей целевой аудитории посмотреть сайт тридцать секунд и сказать, чем вы занимаетесь. Если не смогут, исправьте главную.

Частые ошибки

• Показывать всё. Слабые проекты размывают сильные. Отбирайте.
• Картинки без контекста. Для работы в дизайне и разработке скриншот без задачи и вашей роли почти ничего не говорит руководителю найма.
• Медленные, тяжёлые страницы. Несжатые полноразмерные изображения делают сайт неработоспособным на мобильном интернете.
• Изощрённая навигация. Необычные меню и эффекты при прокрутке могут быть интересными, но не если посетители не могут найти ваши работы или email.
• Скрытые контакты. Ставьте ссылку на контакты в шапке и подвале каждой страницы.
• Использование клиентских работ, которые вам не разрешено показывать. Проверьте договоры и соглашения о неразглашении; при необходимости обезличьте проект или опишите его.
• Никогда не обновлять. Устаревшие работы и «последний проект» из давнего прошлого посылают неверный сигнал.

Расходы

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

Когда лучше готовый продукт

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

Как это сделать в Mythex

Mythex может создать портфолио по описанию, похожему на промпт выше. Вы видите его в живом предпросмотре с рамкой телефона, уточняете вёрстку и тексты в чате и публикуете на адрес yourname.mythex.app. Если нужна форма связи, которая сохраняет заявки, Mythex добавит базу данных; для галерей изображений он может использовать файловое хранилище проекта, чтобы картинки не были вшиты в код. На Pro можно купить домен в Mythex или подключить уже имеющийся, а код экспортировать или синхронизировать с GitHub, если позже захотите разместить сайт в другом месте.

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

Вопросы