Как сделать портфолио онлайн
Создать портфолио онлайн — маст-хэв для дизайнеров, копирайтеров, иллюстраторов и других специалистов творческой сферы. Это одновременно визитная карточка, резюме и наглядная демонстрация ваших навыков — и именно сюда в первую очередь заглянет клиент или потенциальный работодатель. Хороший сайт портфолио в полной мере раскрывает грани вашего таланта, но остается профессиональным, функциональным и удобным в навигации. Создать такой сайт под силу даже новичку — главное, иметь под рукой нужные инструменты. В этой статье мы расскажем, как сделать портфолио с нуля, выбрать нужный шаблон, использовать актуальные тренды веб дизайна и привлечь посетителей, готовых оценить ваши труды по достоинству.
Как создать портфолио онлайн:
Посмотрите примеры для вдохновения
Выберите шаблон для портфолио
Сделайте акцент на лучших проектах
Используйте изображения с высоким разрешением
Добавьте нужные разделы
Улучшите UX
Поработайте над SEO
Настройте мобильную версию сайта
Попросите честную обратную связь
Опубликуйте сайт и продвигайте его
1. Посмотрите примеры для вдохновения
Перед тем, как создать портфолио онлайн, ознакомьтесь с примерами успешными успешными примерами. Оттуда вы сможете позаимствовать удачные идеи: например, структуру страницы, графические элементы или контент-блоки. Особенно полезно изучить сайты людей, которые работают в той же сфере, что и вы.
Познакомившись с примерами, подумайте о концепции собственного портфолио. Каким вы хотите видеть свой сайт — строгим и профессиональным, или ярким и провокационным? Планируете придерживаться минимализма, или поразить посетителя обилием деталей? Напишете длинное вступление или позволите проектам сказать всё за вас?
Тщательно обдумайте шрифты, цветовую палитру и структуру сайта, чтобы создать в голове картинку будущего онлайн-портфолио. Если нужна помощь, изучите тренды веб дизайна, популярные в 2021 году.
2. Выберите шаблон для портфолио
Определившись с концепцией, продумайте до мельчайших деталей структуру вашего портфолио. Вы хотите поместить информацию в один лендинг, или создать многостраничный сайт? Выбрать аккуратную сетку в стиле инстаграм-ленты или ассиметричный макет, позволяющий сделать акцент на определенных изображениях? Wix существенно облегчает этот этап, предлагая широкий выбор шаблонов для портфолио. Найдите тот, что больше всего подходит для ваших задач, и настройте его под себя: выберите фон и количество страниц, добавьте фото, видео и текст и подключите необходимые приложения.
3. Сделайте акцент на лучших проектах
Самая важная часть сайта-портфолио — ваши проекты. Качественная визуальная и текстовая подача кейсов поможет посетителям всего за пару минут оценить ваши навыки и опыт. Мы рекомендуем разместить раздел с работами в верхней части лендинга или создать для них отдельную страницу. Важный совет, который часто упускают из виду — не помещайте в портфолио все выполненные проекты. Оставьте только те, которыми действительно гордитесь — таким образом общий уровень качества работ будет значительно выше, и портфолио произведет большее впечатление на клиентов и работодателей.
Обновляйте сайт время от времени и добавляйте в портфолио новые проекты — это покажет клиентам и работодателям, что вы востребованы и обладаете большим опытом. При выборе структуры сайта отдайте предпочтение той, которую легко обновлять: например, ровная сетка в стиле инстаграма позволяет добавлять неограниченное количество новых работ без необходимости менять какие-либо элементы на странице.
Добавляйте подписи к работам: например, описание проекта, стоявшие перед вами задачи, достигнутые результаты и другую интересную информацию. Так посетитель сайта получит больше контекста и сможет проанализировать портфолио более внимательно.
4. Используйте изображения с высоким разрешением
Использовать качественные изображения в портфолио важно не только для фотографов, но и для дизайнеров, копирайтеров, архитекторов и маркетологов. Галерея с фотографиями, иллюстрациями и макетами высокого разрешения выглядит эффектно, привлекает внимание и показывает ваш профессионализм. Wix Pro Gallery — это приложение для демонстрации работ, которое предлагает широкий выбор настраиваемых шаблонов, эффектов и функций
5. Интегрируйте нужные разделы
Теперь, когда вы знаете, как будут выглядеть ваши работы, настало время позаботиться обо всём остальном. Подумайте, какие разделы помогут вам еще больше впечатлить посетителей: например, подробный рассказ о себе, положительные отзывы клиентов или главная страница с необычными визуальными эффектами. Вот несколько самых популярных вариантов, на которые стоит обратить внимание:
Главная страница В среднем у сайта есть всего несколько секунд, чтобы привлечь внимание клиента — поэтому главная страница должна быть лаконичной, захватывающей и визуально притягательной. Поместите на обложку сайта самую необходимую информацию: яркий слоган, ваше имя и род деятельности. Не нужно подробно рассказывать о себе — это можно сделать в отдельном разделе. И конечно, не забудьте об удобном меню, которое облегчит навигацию посетителя по другим страницам.
Страница «О себе» Если текст на главной странице должен быть коротким и информативным, то страница «О себе» — место, где вы можете дать себе волю. Расскажите о вашем бэкграунде и опыте, поделитесь ценностями и философией, продемонстрируйте навыки и достижения — в общем, укажите все, что считаете интересным и релевантным. Хорошей идей будет указать текущую занятость и дать ссылку на PDF-файл с резюме. Проявите немного индивидуальности с помощью копирайтов, иллюстраций, гифок и любых других элементов, которые подходят вашему стилю. Посмотрите, как дизайнер Джикун Тао сделала свое онлайн-портфолио более живым с помощью провокационной типографики и забавных мультипликационных глаз.
Контактная информация Впечатлить посетителя — только полдела; теперь нужно убедить его связаться с вами. Сделайте это максимально простой задачей: добавьте раздел с контактами и укажите электронную почту, телефон и ссылки на социальные сети. Всё это может быть отдельной страницей, частью вашего меню или даже плавающим элементом на боковой части экрана. Не забудьте продублировать всю информацию в футере — так посетитель точно не упустит ваши контакты из виду.
Отзывы клиентов Позитивные, аутентичные отзывы клиентов вызывают у посетителя доверие и подчеркивают ваш профессионализм. Поэтому добавить на свой сайт хотя бы несколько — это всегда хорошая идея. Даже простой список клиентов и компаний, с которыми вы работали, будет красноречивым показателем вашего опыта. Если о вас писали в специализированных изданиях, добавьте ссылки на статьи: это бесплатный и эффективный пиар.
Специальные эффекты
Сделать онлайн портфолио еще более впечатляющим помогут специальные эффекты — параллакс, плавающие элементы, анимация и всплывающие окна. Это не только делает облик сайта более профессиональным, и помогает вам управлять вниманием читателя, выделяя те или иные разделы. Добавить динамики в сайт портфолио можно с помощью Velo от Wix. Это открытая масштабируемая платформа разработки, которая позволяет вам интегрировать в сайт строчки кода и воплощать в жизнь самые смелые дизайн-идеи.
6. Улучшите UX
Простыми словами UX — это анализ всевозможных действий, которые пользователь может совершить на странице. Исходя из этой информации, необходимо сделать сайт максимально простым и удобным для навигации. Начните со списка страниц, которые собираетесь создать. Затем определите, какие элементы вам понадобятся на каждой странице: например, заголовок, описание, заглавная картинка, плюс дополнительные видео или изображения. Такой список поможет вам понять, в каком порядке отображать элементы на странице, и выбрать подходящую структуру.
Определившись со структурой, можно перейти к логистике. Куда пользователь попадает при нажатии на ссылку — на другую страницу или в раздел ниже? Что лучше — меню в верхней части страницы или меню-гамбургер, которая будет раскрываться на полный экран при нажатии? Как пользователь поймет, на какой странице находится? Хороший UX предугадывает каждое действие пользователя и предлагает простое и прямолинейное решение. Нужна помощь? Посмотрите 10 лучших примеров UX-портфолио с полезными советами.
7. Поработайте над SEO
Даже в самом хорошем портфолио нет никакого смысла, если никто не сможет его увидеть. Поэтому важно оптимизировать сайт, чтобы поднять его в поисковых запросах Google и сделать более доступным для потенциальных клиентов и работодателей. SEO (Search Engine Optimization, поисковая оптимизация) — это непрерывный процесс, состоящий из комплекса различных действий. Вот некоторые из них:
Публикуйте уникальные, свежие и полезные тексты. Так вы получите возможность делиться своими идеями с читателями, а Google увидит, что ваш сайт активен и постоянно обновляется.
Найдите правильные ключевые слова. Это фразы, по которым пользователи чаще всего находят в Google сайты вроде вашего. Ключевым словом может быть «независимый веб дизайнер» или «архитектор спб». После того, как вы нашли нужные ключевые слова, органично внедрите их в тексты на сайте.
Добавьте alt-текст ко всем изображениям. Поисковики «не видят» картинки и фотографии на сайте — поэтому альтернативный текст помогает Google, Yandex и другим системам распознать, что именно на них изображено. Добавьте короткое и понятное описание в качестве alt-текста к каждому изображению — это улучшит индексацию сайта.
Заполните метаданные и мета-теги — то есть, основные сведения о странице. Они обычно включают в себя заголовок (Title) и краткое описание (Description).
Добавьте заголовки H1, H2, H3 и так далее. Включите в них ключевые слова — так поисковым работам будет проще сканировать контент на сайте, что обеспечит лучшее ранжирование в результатах выдачи.
Если ваша работа завязана на конкретном месте, сделайте упор на локальную оптимизацию. Это тактика, при которой ваш сайт в первую очередь отображается в поисковых запросах из конкретной страны, города или региона. Например если у вас своя тату-студия в Киеве, важно оптимизировать сайт в первую очередь для этого города и окрестностей — например, добавить слово «Киев» в SEO-заголовок и описание. Вот, как это может выглядеть: Тату-студия Киев | Website.com Кроме этого, не забудьте зарегистрировать сайт на Google My Business и добавить вашу локацию в раздел «Контакты».
Пользователям WIx могут значительно упростить процесс оптимизации сайта с помощью Wix SEO мастер. Это удобный путеводитель, который поможет подобрать ключевые слова и вывести сайт в результаты поиска Google и других сервисов. Хотите узнать о SEO еще больше? Почитайте наш подробный гайд по SEO-оптимизации.
8. Настройте мобильную версию сайта
Более 55% от общего количества просмотров сайтов во всем мире происходит с мобильных телефонов. Поэтому ваше портфолио должно идеально отображаться не только на компьютере, но и в смартфоне. Вот основные правила, которых нужно придерживаться:
Экран смартфона гораздо меньше: сократите количество отображаемых элементов на странице и оставьте только самые важные.
Убедитесь, что шрифт и цветовая схема корректно отображаются и удобно считываются в небольшом разрешении. Например, некоторые витиеватые шрифты в маленьком кегле могут слиться в неразборчивую массу.
Добавьте строку поиска, чтобы облегчить пользователю навигацию по сайту.
Хорошая новость: сайты на платформе Wix уже оптимизированы под мобильную версию — включая адаптивную галерею для демонстрации проектов.
9. Попросите честную обратную связь
Всем известно: когда работаешь над чем-то слишком долго, перестаёшь замечать недостатки. Поэтому всегда важно показать сайт друзьям и попросить честно высказать свое мнение. Достаточно ли информации в портфолио? Хорошо ли выглядит главная страница? Удобно ли перемещаться по разделам? Соберите отзывы и с их помощью доведите сайт до совершенства.
10. Опубликуйте сайт и продвигайте его
После публикации сайта обязательно расскажите о нём во всех соцсетях — от ВК и твиттера до LinkedIn и Pinterest. Это поможет привлечь первых посетителей, улучшит индексацию поисковыми системами и обеспечит вас обратной связью. Если вы ещё не добавили значки соцсетей на сайт, самое время это сделать.
И помните: хороший сайт портфолио — тот, который постоянно совершенствуется. Добавляйте новый контент и свежие проекты, экспериментируйте с функциями, улучшайте UX и внедряйте свежие тренды веб дизайна, чтобы ваш сайт оставался актуальным и современным.
Хотите узнать ещё больше о том, как сделать портфолио онлайн? Посмотрите наш недавний вебинар «Как оформить портфолио и выделиться среди конкурентов».
Сергей Букринский
контент-менеджер Wix
