Вебинар, 03.08 в 19:00 free
Учим создавать сайт, который увеличит продажи в 5 раз

Как создать сайт для фотографа

Обсудить
Как создать сайт для фотографа

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

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

Этап 1: Собираем референсы

Референсы – это вспомогательные изображения, которые позволяют дизайнерам находить вдохновение, узнавать о новых «фишках» и трендах. Наверняка вы и сами к ним обращались, когда нужно было сделать серию креативных снимков. Если да, то этот этап будет для вас крайне простым.

Референсы для веб-дизайнера – это макеты страниц сайта, на основе которых можно определиться с цветовой схемой, структурой, типом сайта, типографикой и дизайнерскими «фишками». Обычно достаточно 3-5 референсов: больше брать нет никакого смысла, так вы только сильнее себя запутаете.

Популярные сервисы для вдохновения:

  • Behance
  • Dribbble
  • Pinterest
  • MadeOnTilda
  • Awwwards

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

  1. Открываем главную страницу и начинаем поиск с запроса «Сайт для фотографа». В результате перед нами отображается огромное количество различных проектов. Для примера откроем один из них.Поиск референсов на Behance
  2. Здесь мы видим полноценный макет, в котором дизайнер рассказывает об этапах работы, цветовой схеме и типографике, а в конце показывает итоговый результат.Пример сайта для фотографа

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

Этап 2: Анализируем конкурентов

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

Найти сайты похожей тематики совсем просто – достаточно ввести запрос в предпочтительном для вас поисковике. Это может быть «Фотограф Красноярск».

Как найти сайт конкурентов

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

Этап 3: Создаем сайт для фотографа

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

В этом руководстве мы рассмотрим разработку сайта на примере Craftum – сервиса, позволяющего конструировать различные типы сайтов как на основе шаблонов, так и вручную с помощью особой опции «Дизайн-блок». За основу возьмем шаблон, специально разработанный для фотографов – «Услуги фотографа».

Давайте приступим:

  1. Первым делом зарегистрируемся на сервисе – для этого переходим на официальную страницу конструктора и жмем «Попробовать бесплатно».Регистрация в конструкторе Craftum
  2. Заполняем контактные данные и кликаем по кнопке «Создать сайт».Конструктор Craftum регистрация
  3. Мы попадаем в личный кабинет, откуда для нас открывается доступ ко всем функциям конструктора. Переходим в раздел «Услуги» и находим шаблон «Услуги фотографа». Для удобства можете воспользоваться поиском с помощью комбинации клавиш «CTRL+F».Как создать сайт для фотографа в конструкторе Craftum
  4. После этого перед нами отобразится шаблонный макет, в котором мы можем изменять текстовую часть, картинки, добавлять и удалять блоки, настраивать формы отправки заявок и многое другое. Первое, с чего начинает веб-дизайнер, – это главный экран, где находится вся основная информация, способная заинтересовать пользователя. Давайте начнем с шапки – верхней части экрана, в которой расположены логотип, меню, телефон и кнопка «Заказать звонок». Для редактирования наводим курсор на данный блок и жмем «Настроить».Настройка шаблона в конструкторе Craftum
  5. В разделе «Контент» прописываем свой номер телефона и убираем все из строки «Наименование контакта» – вы можете прописать что-то свое, но принято записывать номер телефона без каких-либо обозначений. Также изменяем название логотипа. Если у вас есть свой логотип в виде изображения, то его также можно добавить – для этого необходимо выбрать тип «Изображение» и загрузить исходную картинку.Как в Craftum изменить логотип
  6. Параметры меню можно оставить такими же, а вот кнопку «Заказать звонок» придется настроить. Давайте сделаем так, чтобы при клике на нее всплывала форма, где пользователь мог бы оставить свои данные для обратного звонка. Для этого в блоке «Кнопка» укажем «Тип ссылки» -> «Всплывающее окно», а в «Блок» выберем «Добавить новый блок». Настройка кнопки в конструкторе Craftum
  7. В результате перед нами отобразится новый блок с формой, которую также нужно настроить – нажимаем для этого на соответствующую кнопку.Настройка формы в конструкторе Craftum
  8. Переходим в раздел «Контент» и изменяем заголовок на «Заказать звонок» и подзаголовок на «Оставьте заявку, и мы с вами свяжемся в ближайшее время». Это лишь пример, вы же можете добавить свое описание.Настройка формы Craftum
  9. Следующим шагом раскрываем блок «Форма» и оставляем там только два поля – «Имя» и «Телефон». В качестве названия кнопки прописываем «Заказать звонок», ведь основная суть нашей формы – заказ обратной связи.Как изменить текст кнопки в форме заявки Craftum
  10. Последним действием настраиваем отправку данных с формы. Переходим для этого в необходимый раздел и в блоке «Отправка данных с формы» прописываем свою почту. Настройка отправки данных с формы в конструкторе Craftum
  11. Теперь, после того как пользователь кликнет по кнопке «Заказать звонок» и введет свои данные, вы получите заявку на указанную почту.
  12. Возвращаемся на первый экран и продолжаем его корректировать – изменим заголовок и подзаголовок. В заголовке можно рассказать, как вас зовут, а в описании раскрыть ваши качества. Например, «Привет, меня зовут Илья – я люблю фотографировать», «Занимаюсь фотографиями более 5 лет, снимаю в стиле поп-арт».Оффер для фотографа на сайте
  13. При необходимости можно изменить размер шрифта, его цвет, начертание и прочее – для этого следует выделить весь текст и применить необходимую опцию. Как изменить размер текста в конструкторе Craftum
  14. Теперь давайте поменяем фоновое изображение – туда лучше всего поставить свою фотографию. Альтернативным вариантом может быть картинка из Unsplash либо бесплатное изображение из галереи сервиса Craftum. Все это можно сделать через кнопку «Фоновое изображение» в нижнем левом углу.Как изменить фоновое изображение в Craftum
  15. Загружаем свою фотографию либо выбираем понравившуюся из каталога и жмем «Использовать в блоке».Как поменять фон блока в конструкторе Craftum
  16. Осталось подредактировать кнопки – давайте сделаем так, чтобы они были другого цвета и приводили нас в нужное место. Для этого перейдем в настройки блока и откроем подраздел «Контент», там раскроем пункт «Кнопка#1» и в «Тип ссылки» выберем «Якорная ссылка», а в «Блок» укажем «Блок about04». Аналогичным образом редактируем вторую кнопку, но в качестве блока указываем «Блок services08».Как сделать якорную ссылку на кнопку в конструкторе Craftum
  17. Изменить дизайн кнопок и прочего мы можем в разделе «Дизайн». Помимо кнопок там также можно настроить цвет заголовка, отступы и прочее. Как изменить дизайн кнопки в конструкторе Craftum
  18. В итоге получаем вот такой первый экран:Пример первого экрана для сайта фотографа
  19. В таком же стиле следует проработать другие блоки. После того как макет будет полностью готов, необходимо его опубликовать. Сделать это можно с помощью кнопки в верхнем правом углу.Как опубликовать сайт в конструкторе Craftum
  20. Получить доступ к сайту можно через кнопку «Отправить страницу» либо через специальную кнопку в верхнем правом углу.Как открыть созданный сайт в конструкторе Craftum

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

Если вы собираетесь раскручивать сайт и «собирать» с него клиентов, то безоговорочно потребуется нормальное доменное имя. Получить такой домен можно за дополнительную плату в личном кабинете сервиса. При оплате тарифного плана за год предоставляется бесплатный домен в зонах .ru, .рф, .host, .website, .space, .site, .online, .fun.

Комментарии

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