Кейс по созданию сайта-портфолио для
частного мастера по элитному ремонту

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

Миссия проекта

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

Как было раньше

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

Решение

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

Проектирование

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

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

Сбор семантического ядра дал возможность продумать структуру ресурса.

Прототипирование

Когда с проектированием было покончено, а структура сайта была согласована с заказчиком, мы приступили к разработке прототипов каждой страницы. Особое внимание было уделено, естественно, портфолио. Соответствующий раздел получил несколько иное наименование — «Кейсы».  

Дизайн

Сайт имеет отзывчивый дизайн, адаптированный под браузеры шириной:

  •         720 пикселей;
  •         360 пикселей.

Персональный сайт специалиста по элитному ремонту выдержан в стиле минимализм. Используются красивые и эффектные визуальные образы, дизайн дополняется стильными анимациями. Это изюминка настоящего проекта, о ней мы расскажем в «Деталях».

Результат

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

Структура личного сайта получилась лаконичной — мы сконцентрировались на самом важном. В итоге получилось 3 основных раздела:

  •         Главная страница,
  •         Кейсы с подразделами, в каждом из которых представлен отдельный проект,
  •         Партнеры/Отзывы — здесь содержатся важнейшие факторы RTB и репутационный контент.

Система управления реализована на CMS Umbraco, содержит базовый набор функций и элементы, необходимые для администрирования ресурса.

При создании сайта-портфолио была учтена необходимость его дельнейшего SEO-продвижения. Ресурс подготовлен для заполнения метаданных — каждая страница содержит основные метатеги: Title, Description, Keywords. Их редактирование производится через CMS.

Адреса страниц формируются автоматически по принципу ЧПУ, что тоже важно для продвижения. Сгенерированный url можно переопределить в CMS в свойстве «Альтернативный URL» в табе «Навигация».

На сайт добавлены такие важные для поисковых алгоритмов файлы, как robot.txt и sitemap.

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

Детали

Сайт-портфолио наполнен привлекательными фото- и видеоматериалами. Чтобы потенциальные заказчики могли оценить мастерство и навыки специалиста. Дополнительно привлекает внимание в контенту следующее решение:

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

Эта анимация создает ощущение динамики. К тому же, это стильный и актуальный элемент.

Кому и как поможет этот кейс

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