Наличие #портфолио онлайн — #маст-хэв для дизайнеров, копирайтеров, иллюстраторов и других специалистов творческой сферы.
Это одновременно визитная карточка, #резюме и наглядная демонстрация ваших навыков — и именно сюда в первую очередь заглянет клиент или потенциальный работодатель.
Хороший сайт #портфолио в полной мере раскрывает грани вашего таланта, но остается профессиональным, функциональным и удобным в навигации.
Создать такой сайт под силу даже новичку — главное, иметь под рукой нужные инструменты.
В этой статье Я расскажу, как создать сайт с нуля, выбрать шаблон для портфолио, использовать актуальные #тренды веб дизайна и привлечь посетителей, готовых оценить ваши труды по достоинству.
Как создать портфолио онлайн:
- Посмотрите примеры для вдохновения
- Выберите шаблон для портфолио
- Сделайте акцент на лучших проектах
- Используйте изображения с высоким разрешением
- Добавьте нужные разделы
- Улучшите #UX
- Поработайте над #SEO
- Настройте мобильную версию сайта
- Попросите честную обратную связь
- Опубликуйте сайт и продвигайте его
1. Посмотрите примеры для вдохновения
Перед тем, как создать свой сайт с нуля, ознакомьтесь с примерами успешных портфолио онлайн .
Оттуда вы сможете позаимствовать удачные идеи: например, структуру страницы, графические элементы или контент-блоки.
Особенно полезно изучить сайты людей, которые работают в той же сфере, что и вы.
Познакомившись с примерами, подумайте о концепции собственного портфолио. Каким вы хотите видеть свой сайт — строгим и профессиональным, или ярким и провокационным?
Планируете придерживаться минимализма, или поразить посетителя обилием деталей?
Напишете длинное вступление или позволите проектам сказать всё за вас?
Тщательно обдумайте шрифты, цветовую палитру и структуру сайта, чтобы создать в голове картинку будущего онлайн-портфолио.
Если нужна помощь, изучите тренды веб дизайна , популярные в 2021 году.
2. Выберите шаблон для портфолио
Определившись с концепцией, продумайте до мельчайших деталей структуру вашего портфолио.
Вы хотите поместить информацию в один лендинг, или создать многостраничный сайт?
Выбрать аккуратную сетку в стиле инстаграм-ленты или ассиметричный макет, позволяющий сделать акцент на определенных изображениях? Найдите тот шаблон, что больше всего подходит для ваших задач, и настройте его под себя: выберите фон и количество страниц, добавьте фото, видео и текст и подключите необходимые приложения.
3. Сделайте акцент на лучших проектах
Самая важная часть сайта-портфолио — ваши проекты.
Качественная визуальная и текстовая подача кейсов поможет посетителям всего за пару минут оценить ваши навыки и опыт.
Я рекомендую разместить раздел с работами в верхней части лендинга или создать для них отдельную страницу.
Важный совет, который часто упускают из виду — не помещайте в портфолио все выполненные проекты.
Оставьте только те, которыми действительно гордитесь — таким образом общий уровень качества работ будет значительно выше, и портфолио произведет большее впечатление на клиентов и работодателей.
Обновляйте сайт время от времени и добавляйте в портфолио новые проекты — это покажет клиентам и работодателям, что вы востребованы и обладаете большим опытом.
При выборе структуры сайта отдайте предпочтение той, которую легко обновлять: например, ровная сетка в стиле инстаграма позволяет добавлять неограниченное количество новых работ без необходимости менять какие-либо элементы на странице.
Добавляйте подписи к работам: например, описание проекта, стоявшие перед вами задачи, достигнутые результаты и другую интересную информацию.
Так посетитель сайта получит больше контекста и сможет проанализировать портфолио более внимательно.
4. Используйте изображения с высоким разрешением
Использовать качественные изображения в портфолио важно не только для фотографов , но и для дизайнеров, копирайтеров, архитекторов и маркетологов.
Галерея с фотографиями, иллюстрациями и макетами высокого разрешения выглядит эффектно, привлекает внимание и показывает ваш профессионализм.
5. Интегрируйте нужные разделы
Теперь, когда вы знаете, как будут выглядеть ваши работы, настало время позаботиться обо всём остальном.
Подумайте, какие разделы помогут вам еще больше впечатлить посетителей: например, подробный рассказ о себе, положительные отзывы клиентов или главная страница с необычными визуальными эффектами.
Вот несколько самых популярных вариантов, на которые стоит обратить внимание:
Главная страница В среднем у сайта есть всего несколько секунд, чтобы привлечь внимание клиента — поэтому главная страница должна быть лаконичной, захватывающей и визуально притягательной.
Поместите на обложку сайта самую необходимую информацию: яркий слоган, ваше имя и род деятельности.
Не нужно подробно рассказывать о себе — это можно сделать в отдельном разделе.
И конечно, не забудьте об удобном меню, которое облегчит навигацию посетителя по другим страницам.
Страница «О себе» Если текст на главной странице должен быть коротким и информативным, то страница «О себе» — место, где вы можете дать себе волю.
Расскажите о вашем бэкграунде и опыте, поделитесь ценностями и философией, продемонстрируйте навыки и достижения — в общем, укажите все, что считаете интересным и релевантным.
Хорошей идей будет указать текущую занятость и дать ссылку на PDF-файл с резюме.
Проявите немного индивидуальности с помощью копирайтов, иллюстраций, гифок и любых других элементов, которые подходят вашему стилю.
Посмотрите, как дизайнер Джикун Тао сделала свое онлайн-портфолио более живым с помощью провокационной типографики и забавных мультипликационных глаз.
Контактная информация Впечатлить посетителя — только полдела; теперь нужно убедить его связаться с вами.
Сделайте это максимально простой задачей: добавьте раздел с контактами и укажите электронную почту, телефон и ссылки на социальные сети.
Всё это может быть отдельной страницей, частью вашего меню или даже плавающим элементом на боковой части экрана.
Не забудьте продублировать всю информацию в футере — так посетитель точно не упустит ваши контакты из виду.
Отзывы клиентов Позитивные, аутентичные отзывы клиентов вызывают у посетителя доверие и подчеркивают ваш профессионализм.
Поэтому добавить на свой сайт хотя бы несколько — это всегда хорошая идея.
Даже простой список клиентов и компаний, с которыми вы работали, будет красноречивым показателем вашего опыта.
Если о вас писали в специализированных изданиях, добавьте ссылки на статьи: это бесплатный и эффективный пиар.
Специальные эффекты Сделать портфолио еще более впечатляющим помогут специальные эффекты — параллакс, плавающие элементы, анимация и всплывающие окна.
Это не только делает облик сайта более профессиональным, и помогает вам управлять вниманием читателя, выделяя те или иные разделы.
Добавьте динамики в сайт портфолио.
6. Улучшите UX
Простыми словами UX — это анализ всевозможных действий, которые пользователь может совершить на странице.
Исходя из этой информации, необходимо сделать сайт максимально простым и удобным для навигации.
Начните со списка страниц, которые собираетесь создать.
Затем определите, какие элементы вам понадобятся на каждой странице: например, заголовок, описание, заглавная картинка, плюс дополнительные видео или изображения.
Такой список поможет вам понять, в каком порядке отображать элементы на странице, и выбрать подходящую структуру.
Определившись со структурой, можно перейти к логистике.
Куда пользователь попадает при нажатии на ссылку — на другую страницу или в раздел ниже?
Что лучше — меню в верхней части страницы или меню-гамбургер, которая будет раскрываться на полный экран при нажатии?
Как пользователь поймет, на какой странице находится? Хороший 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 и добавить вашу локацию в раздел «Контакты».
Прочитав мою следующую статью по SEO оптимизации вы значительно сможете упростить процесс оптимизации сайта.
Я составил в статье для вас удобный путеводитель, который поможет подобрать ключевые слова и вывести сайт в результаты поиска Google и других сервисов.
Хотите узнать о SEO еще больше?
8. Настройте мобильную версию сайта
Более 55% от общего количества просмотров сайтов во всем мире происходит с мобильных телефонов. Поэтому ваше портфолио должно идеально отображаться не только на компьютере, но и в смартфоне. Вот основные правила, которых нужно придерживаться:
- Экран смартфона гораздо меньше: сократите количество отображаемых элементов на странице и оставьте только самые важные.
- Убедитесь, что шрифт и цветовая схема корректно отображаются и удобно считываются в небольшом разрешении. Например, некоторые витиеватые шрифты в маленьком кегле могут слиться в неразборчивую массу.
- Добавьте строку поиска, чтобы облегчить пользователю навигацию по сайту.
Хорошая новость: сайты на платформе Wix уже оптимизированы под мобильную версию — включая адаптивную галерею для демонстрации проектов.
9. Попросите честную обратную связь
Всем известно: когда работаешь над чем-то слишком долго, перестаёшь замечать недостатки.
Поэтому всегда важно показать сайт друзьям и попросить честно высказать свое мнение.
Достаточно ли информации в портфолио? Хорошо ли выглядит главная страница?
Удобно ли перемещаться по разделам?
Соберите отзывы и с их помощью доведите сайт до совершенства.
10. Опубликуйте сайт и продвигайте его
После публикации сайта обязательно расскажите о нём во всех соцсетях — от #ВК и твиттера до #LinkedIn и #Pinterest.
Это поможет привлечь первых посетителей, улучшит индексацию поисковыми системами и обеспечит вас обратной связью.
Если вы ещё не добавили значки соцсетей на сайт, самое время это сделать.
И помните: хороший сайт портфолио — тот, который постоянно совершенствуется.
Добавляйте новый контент и свежие проекты, экспериментируйте с функциями, улучшайте UX и внедряйте свежие тренды веб дизайна, чтобы ваш сайт оставался актуальным и современным.
Хотите узнать ещё больше о том, как создать успешное портфолио?
Следите за выходом моих новых статей, в них Я буду дозировано но подробно, давать вам советы и пытаться как можно больше вкладывать своего опыта и примеров.