Статьи

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

Squarespace

Эта статья была спонсирована Squarespace . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

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

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

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

Другими словами, вам нужен веб-сайт Squarespace. Squarespace предоставляет 14-дневную пробную версию, так что вы можете следовать этому руководству бесплатно. После пробной версии используйте код SITEPOINT при оформлении заказа, чтобы получить скидку 10% на ваш первый заказ.

Вот как это сделать.

Пример портфолио автора

Почему важно иметь красивый веб-сайт портфолио

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

  • Позвольте вам доказать клиентам, что вы можете сделать — вы можете поделиться своими уникальными навыками, подходами и опытом, а также самыми яркими примерами своей работы.
  • Улучшите ваш маркетинг — хороший сайт-портфолио Squarespace может помочь вам с поисковой оптимизацией (SEO) и другими методами маркетинга. Это получит ваш профиль перед более потенциальными клиентами.
  • Помочь вам достичь желаемого уровня — отличная работа требует более высокой платы. Когда вы можете показать ценность того, что вы делаете, клиенты с большей вероятностью будут платить лучшие ставки.
  • Поставьте вас впереди ваших конкурентов — большинство клиентов будут сравнивать несколько фрилансеров. Если ваш сайт Squarespace выглядит, чувствует и работает лучше, чем ваши конкуренты, это дает вам преимущество.
  • Предоставьте клиентам последовательный способ узнать о вас — в дополнение к вашей работе ваш веб-сайт расскажет клиентам о вашем подходе, опыте, услугах, контактных данных и некоторых других ключевых областях.
  • Выступите в качестве прекрасного места для людей, чтобы узнать больше информации — веб-сайт портфолио Squarespace хорошо работает в качестве онлайн-ресурса, на который вы можете направить клиентов. Когда вы подаете заявку на роль, вы можете ссылаться на свой сайт, чтобы они могли узнать больше.

Портфолио Лауры Богилл в Squarespace

Лаура Бохилл

Планирование вашего сайта-портфолио Squarespace

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

Какие страницы вы собираетесь включить в свой веб-сайт портфолио?

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

Страницы «Должен иметь» включают в себя:

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

Дополнительные страницы включают в себя:

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

Создайте простую «карту сайта», которая включает все страницы, которые вы хотите добавить на сайт.

Портфолио Макса Дворкина

Макс Дворкин

Какой тон, стиль и подход будет использовать ваш сайт?

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

Как вы представляете креативную индустрию, в которой вы находитесь?

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

Что нужно сказать своим потенциальным клиентам?

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

Самое главное, расскажите своим клиентам, как вы решаете их конкретную проблему. Клиенты хотят решения, поэтому убедитесь, что это то, что вы предоставляете. Сообщите им, как вы будете справляться с их «болевыми точками». Покажите им, какие преимущества дает вам наем.

Как дизайн и макет вашего сайта могут улучшить качество обслуживания клиентов?

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

Подумайте о своем «личном бренде» — создайте индивидуальность вокруг себя как независимого креатива. Заставьте клиентов радоваться работе с вами.

Какие активы и медиа вам понадобятся?

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

Как создать сайт-портфолио с помощью Squarespace

Когда дело доходит до создания вашего сайта, мы предполагаем, что вы знаете основы:

  • Создание учетной записи Squarespace.
  • Вход в Squarespace.
  • Добавление страниц на ваш сайт Squarespace.
  • Добавление контента на отдельные страницы.
  • Использование других частей веб-интерфейса Squarespace.

Если вы не уверены в какой-либо из этих областей, у Squarespace есть отличная онлайновая справочная система и всесторонняя поддержка клиентов , доступная 24/7.

Выберите правильный стиль для вашего веб-сайта портфолио

В меню Squarespace выберите « Дизайн»> «Шаблоны» .

Квадратные шаблоны

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

В меню дизайна вы также можете изменить логотип и заголовок, изменить шрифты, цвета, отступы, стили шрифта, поля и многое другое. Если у вас есть базовые знания каскадных таблиц стилей (CSS), вы можете легко изменить и другие отдельные элементы дизайна.

Настройки дизайна

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

Добавить страницы на ваш сайт Squarespace

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

Создание страницы

При создании каждой страницы вы сможете выбрать макет. Поиграйте с различными вариантами, пока не найдете вариант макета, который имеет смысл.

Добавить контент на ваши статические страницы

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

  • Используйте много пустого пространства, чтобы разбить страницу.
  • Используйте маркеры и нумерованные списки там, где это имеет смысл.
  • Хорошо используйте заголовки и абзацы, чтобы разбить текст.
  • Убедитесь, что на каждой странице есть только один «призыв к действию».
  • Убедитесь, что вся ваша навигация интуитивно понятна и проста в использовании.
  • Щадите жирным шрифтом и курсивом.
  • Поддерживайте посетителей вашего сайта, когда они взаимодействуют с вашим контентом.

Веб-интерфейс Squarespace позволяет легко добавлять контент.

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

Добавьте свои индивидуальные страницы портфолио

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

Создать портфолио блог

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

Создать портфолио записи в блоге

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

Организация позиций портфеля

Настроить аналитику и другие области

Создав все свое содержимое, вы можете добавить Google Analytics и любые другие функции через разделы «Аналитика» и «Настройки». Узнайте, как люди используют ваш сайт, свяжите его с вашими учетными записями в социальных сетях, подключите его к выделенному домену и многое другое.

Завершите окончательную проверку вашего веб-сайта портфолио

Вы почти закончили — время для окончательной проверки:

  • Все ли на сайте имеет смысл?
  • Продает ли он ваши навыки, таланты, опыт и знания как творческий человек?
  • Легко ли клиентам связаться?
  • Вы полностью корректировали и редактировали веб-сайт?
  • Легко ли ориентироваться и понимать сайт?
  • Хорошо ли это выглядит на мобильном устройстве?
  • Есть ли другие изменения, которые вам нужно сделать?

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

  • Сделайте так, чтобы ваши друзья, коллеги и клиенты просмотрели сайт вашего портфолио и дали вам честный отзыв.
  • Не бойтесь пробовать новый дизайн, если текущий не работает. Squarespace позволяет легко переключаться.
  • Напишите веб-сайт с точки зрения вашего клиента, скажите им, что им нужно знать, а не то, что вы хотите им сказать.
  • Если можешь, зайди в нишу. Продвигать себя как креатив легче, если вы сосредоточены на одной или двух конкретных отраслях или областях.
  • Просмотрите сайты вашего конкурента, чтобы увидеть, что работает, а что нет.
  • Потратьте время на ваши фотографии и изображения — они имеют большое значение для привлекательности вашего сайта.
  • Используйте «Призывы к действию», чтобы ваши клиенты могли что-то делать (например, «свяжитесь со мной»).
  • Просмотрите Squarespace Analytics, Google Search Console и Google Analytics, чтобы проверить работу вашего веб-сайта и настроить его при необходимости.

Удачи!

Squarespace позволяет легко создавать профессиональные, красивые сайты. У них дружелюбная поддержка клиентов, доступная 24×7, и бесплатная 14-дневная пробная версия. После пробной версии используйте код SITEPOINT при оформлении заказа, чтобы получить скидку 10% на ваш первый заказ.