Персональный сайт-портфолио

Брендинг

21 День

Отзывчивый вебсайт

Недавно, откликаясь на вакансии через популярную платформу, в одном из диалогов HR задал мне простой, но важный вопрос:

«Где можно посмотреть ваши реальные проекты, а не просто картинки на Dribbble?»

В этот момент меня осенило: пришло время заняться личным брендом. Не просто выложить работы, а создать пространство, которое расскажет за меня - кто я, чем занимаюсь и как мыслю как дизайнер.

🧠 Что я хотел сделать

Я не стремился сделать ещё один шаблонный сайт по типу «вот работы, вот контакты». Мне хотелось чего-то большего: сайта, который говорит, показывает и чувствует, как я сам.

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

🛠 Как всё начиналось

Я начал с составления плана:

Этот план стал основой всего процесса. Он помог разложить проект на этапы, задать приоритеты и сохранить фокус на важном.

🤔 Пользовательская задача (JTBD)

В основе всего - понимание, для кого я делаю сайт. Помог метод Jobs To Be Done: он фокусирует не на функциях, а на мотивации пользователя.

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

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

❤️ Карта эмпатии

Я создал Карту эмпатии, чтобы понять, что чувствует человек, попадая на мой сайт.

Это помогло избежать «слепых зон» и отточить всё: от ритма подачи до микрокопирайтинга.

🔍 Анализ конкурентов

Далее я посмотрел, как делают другие - не чтобы повторить, а чтобы понять, что работает, а что нет.

Из анализа я извлёк три ключевых вывода:

Кто моя аудитория.

Что точно должно быть на сайте.

Какой эффект я хочу вызвать у посетителя.

👤 Портрет пользователя

Чтобы точнее работать с содержанием и интерфейсом, я создал User Persona - условный образ основного посетителя: HR-специалист.

📖 История задач

Я сформулировал 5 сценариев, в которых сайт должен помогать:

«Когда я открываю портфолио, я хочу понять, кто передо мной и в чём его сильные стороны»

→ Решение: блок «Обо мне» + «Мои навыки».

«Хочу увидеть не просто картинки, а мышление»

→ Решение: структура кейсов - от задачи до результата.

«Нужно быстро понять, стоит ли звать на интервью»

→ Решение: лаконичный блок с метриками и опытом.

«Хочу сразу связаться»

→ Решение: контактный блок + pop-up.

«Смотрю с телефона - хочу, чтобы было удобно»

→ Решение: адаптивный дизайн и чёткая иерархия.

🧩 Пользовательские истории

«Как рекрутёр, я хочу оценить опыт и кейсы, чтобы принять решение рекомендовать кандидата»

«Как дизайнер, хочу вдохновиться, увидеть подход, сравнить мышление»

Эти истории помогли настроиться на нужную волну - и не усложнять то, что должно быть простым.

🗺 Карта клиентского пути

Я собрал всё в Customer Journey Map, чтобы увидеть путь глазами посетителя.

🧪 Сценарий использования

Роль: Рекрутёр.

Цель: Понять, кто я, и как со мной связаться.

Основной сценарий:

Зашёл на сайт.
Пролистал «Обо мне».
Посмотрел пару кейсов.
Перешёл в контакты.
Написал.

Что может пойти не так:

Сайт медленно грузится → уходит

Непонятная структура → не находит кейсы → закрывает

Контакты спрятаны → откладывает → забывает

🔄 Пользовательский поток

User Flow показал, где можно упростить, а где - добавить якоря внимания.

🗂 Карта истории

📝 Сбор требований

🎯 Цели:

Показать, кто я, что делаю и как мыслю.

Сделать общение максимально лёгким.

Быстро объяснить, почему я подхожу.

👥 Аудитория:

Работодатель

Заказчик

🔧 Ключевые функции:

Hero-блок

Кейсы

Обо мне

Навыки

Контакты

404

Адаптивность

🧭 Карта сайта

✏️ Визуализация интерфейса

Скетч:

Wireframe:

Прототип:

🧪 Тестирование

Провёл живое тестирование с реальным пользователем. Получил обратную связь, и внёс некоторые корректировки.

💻 Написание кода

Я решил не использовать фреймворки. Писал код на чистом HTML, CSS, JS - это дало мне полный контроль.

🏁 Заключение

Этот проект стал для меня не просто созданием сайта, а настоящим приключением - опытом роста, самопознания и развития навыков.

Его итог вы видите прямо здесь, ведь сам этот сайт - и есть результат проделанной работы :)

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

Спасибо, что уделили время на прочтение 🙌

«Творите так, будто никто не оценивает. Улучшайте так, будто это увидят все»

📚 Использованные ресурсы

Сделано с 💙