Создаем сайт на Craftum: пошаговое руководство

Пошаговое руководство по созданию сайта на Craftum

Для многих пользователей процесс создания сайта кажется чем-то сложным и даже невозможным. А когда речь заходит о разработке своего собственного ресурса, то сразу возникают вопросы: «К кому обращаться?», «Сколько это будет стоить» и «Через сколько я получу желаемый результат?». 

В современных реалиях ответить на эти вопросы можно самостоятельно, ведь создать сайт своими руками – вполне посильная задача каждому. Для этого не нужно быть программистом или дизайнером, достаточно разобраться в базовых понятиях и освоить конструктор сайтов.

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

Шаг 1: Определяемся с типом сайта

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

Лендинг

Лендинг – это одностраничный сайт, который чаще всего предусматривает продающую структуру. Его основная цель – завлечь пользователя и побудить его выполнить целевое действие. Например, вы предоставляете услуги юриста – в таком случае целевым действием может быть запись на консультацию.

Для кого подойдет такой тип сайта? Практически для каждого – репетиторам, кондитерам, дизайнерам и даже крупным компаниям, которые хотят презентовать один или несколько товаров.

Лендинг чаще всего используется в следующих случаях:

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

Вот один из примеров одностраничного сайта:

Image30

Посмотреть больше примеров хороших лендингов вы можете в библиотеке шаблонов Craftum

Многостраничный сайт

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

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

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

Image18

Интернет-магазин

Интернет-магазин содержит похожую структуру сайта с множеством страниц, но только в него добавляется еще одна страница «Каталог», на которой пользователь может ознакомиться со всем ассортиментом товаров и приобрести что-то нужное.

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

Посмотрите на пример интернет-магазина для продажи техники: 

Image28

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

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

Шаг 2: Проводим анализ целевой аудитории

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

Кто же такая целевая аудитория? Это группа людей, которая с наибольшей вероятностью приобретет товар или услугу конкретной компании. Учитывайте такие показатели ЦА как: 

  • пол;
  • возраст;
  • семейное положение;
  • место проживания;
  • уровень дохода;
  • интересы, желания, потребности;
  • боли и страхи, которые возникают при выборе продукта или услуги. 

На основе таких данных составляется прототип сайта, который позволяет закрыть все «проблемы» пользователя. Подробнее о нем мы поговорим немного позднее, а сейчас давайте проведем еще один небольшой анализ. 

Шаг 3: Анализируем конкурентов

Вы уже знаете, что и кому вы продаете, и теперь осталось узнать ответ на вопрос «Почему именно мы?». На этом этапе покупатель заинтересован в вашем предложении и хочет, чтобы его убедили купить именно ваш продукт, показали ему все бонусы и продали идею, что именно с вашим товаром его жизнь станет лучше.

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

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

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

После того как вы настроились на анализ сайтов, отправляйтесь в Google и Яндекс, вводите нужную вам нишу и месторасположение. Например, «Купить стол для школьника в Москве». Уделяйте особенное внимание первым 4-м и последним 3-м сайтам в поисковой выдаче, в Яндексе они с пометкой «реклама». Такие сайты всегда на виду, а это значит, что пользователи с большой вероятностью на них заходят и изучают там контент. Ваша задача проанализировать такие сайты и понять как сделать свой ресурс еще лучше, чтобы пользователи были наиболее заинтересованы в ваших услугах или товарах. 

Таким образом у вас должна получиться таблица с примерно следующим содержимым: 

Image31

После того как вы составите подобную таблицу, вместе с анализом целевой аудитории у вас сложится крепкая пирамида, в основе который лежат ответы на самые важные вопросы: «Почему мы?», «Кому мы продаем?» и «Из чего должен состоять будущий сайт?». Например, у компании конкурента услуга клининга стоит 3000 рублей, а время ее выполнения – 5 часов. В ответ на это можно написать на сайте, что наш клининг дешевле и быстрее всех – всего за 2500 рублей и 3 часа. Аналогичным образом мы можем добавлять новые блоки, которых нет у конкурентов, например, у другой компании нет описания этапов работ, а у вас есть – так пользователи будут понимать как происходит процесс определенной услуги.

Шаг 4: Создаем прототип

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

Вот как это может выглядеть: 

Image29

Подобный прототип чаще всего создается в специальных программах, например, Axure или Figma, но может быть нарисован и от руки. Чтобы его правильно составить, для начала нужно определиться со структурой сайта – для этого вы можете использовать анализ конкурентов. Посмотрите из чего состоят их сайты – выберите для этого 3-5 конкурентов. На основе этого можно сделать выборку и понять, о чем стоит рассказывать, а о чем нет. 

Другой вариант – посмотреть готовые шаблоны от Craftum, в которых уже продумана структура. Ее вы можете взять за основу и при необходимости изменить под свои задачи, опираясь на анализ конкурентов. 

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

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

Шаг 5: Находим референсы

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

Найти референсы вы можете на следующих площадках:

Для примера давайте зайдем на Pinterest и посмотрим, что там есть:

1. Открываем официальную страницу и в поиске вводим тематику нашего сайта. Например, «Строительство домов сайт». 

Image34

2. В результате перед нами отображается множество различных макетов, которые можно использовать для вдохновения и выбора определенного стиля. 

Image33

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

Шаг 6: Дизайн и верстка

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

Собрать сайт в Craftum можно тремя путями: 

    • Готовые шаблоны. В конструкторе есть собственная библиотека шаблонов, состоящая из 150 различных макетов сайтов для разных ниш. Достаточно подобрать нужный шаблон и изменить его под себя – наполнить текстовым контентом и вставить свои картинки. 
  • Использование стандартных блоков. Это отдельные составляющие сайта, например, обложка, блок для отзывов или о компании – их можно добавлять один за другим, в результате чего получается полноценный сайт. В Craftum насчитывается более 170 различных блоков. 
  • Конструирование сайта с помощью дизайн-блоков. Этот инструмент позволяет создавать уникальный дизайн. Элементы в дизайн-блоке можно перемещать как угодно, а их дизайн зависит только от вас. 

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

Еще одна особенность Craftum в том, что создать сайт можно бесплатно. Для каждого пользователя предоставляется 10-дневный пробный период без каких-либо ограничений. И только после этого вам потребуется заплатить от 85 рублей за один месяц. 

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

Более подробно ознакомиться с тарифными планами вы можете на главной странице Craftum в разделе «Тарифы».

Регистрация

Перед тем, как начать создание своего первого сайта, давайте зарегистрируемся в конструкторе. Для этого выполним несколько простых шагов: 

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

Image36

2. Заполняем необходимые поля и нажимаем «Создать сайт».

Image35

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

Выбор шаблона

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

Для примера давайте представим, что у нас есть небольшой автосервис в центре города Новосибирска и нужно сделать для него сайт. Ранее мы прошли все шаги и теперь необходимо выбрать шаблон и переделать его под себя. В Craftum есть подходящий шаблон, который находится в разделе «Авто». Откроем его и нажмем на кнопку «Выбрать», которая находится под нужным нам шаблоном:

Image38

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

Image7

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

Редактирование шаблона

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

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

Итак, приступим: 

1. Первым делом поменяем все текстовое содержимое блока. Сделать это несложно – достаточно кликнуть по тексту, стереть его и вставить свой контент. 

Image39

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

Image26

3. Следующим шагом удаляем старую фотографию и на ее место вставляем свою. Если под рукой у вас нет картинки, то вы можете подобрать подходящую с помощью сервиса Unsplash. В завершении нажимаем «Использовать в блоке».

Image6

4. Таким образом у нас получается следующий первый экран: 

Image2

5. Для примера давайте немного изменим заголовок и поменяем цвет кнопки. Для редактирования шрифта кликаем двойным щелчком мыши по заголовку, в результате чего отображается небольшое меню. В нем сделаем шрифт San Francisco Pro и добавим к нему жирность. Также немного уменьшим сам текст до 62px и пропишем заголовок капсом. 

Image15

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

7. Чтобы изменить цвет кнопки, нужно открыть настройки блока и во вкладке «Дизайн» перейти в блок «Форма» – в нем нажать на шестеренку, расположенную напротив кнопки. В результате откроется окно редактирования кнопки – в нем мы поменяем цвет кнопки, например, на черный. 

Image4

8. Таким образом у нас получается новый первый экран, который отличается от шаблона. 

Image41

9. Теперь давайте перейдем к настройке формы – ее поля уже отлично подходят для нашего сервиса, но пока что она не работает. Нужно сделать так, чтобы все заявки уходили на почту или сохранялись в таблицу – для этого переходим в настройки блока и открываем вкладку «Форма». Там в разделе «Отправка данных с формы» указываем свою почту. Если вы хотите, чтобы информация отправлялась в таблицу, необходимо нажать на кнопку «Sign in with Google» – после этого потребуется авторизоваться через Google и настроить отправку данных в таблицу.

Image16

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

1. Открываем настройки шапки. 

Image1

2. В разделе «Контент» прописываем номер телефона и изменяем логотип. Если у вас нет своего логотипа, то можно просто написать название компании. 

Image24

3. Теперь переходим к навигации по сайту – для этого перемещаемся во вкладку «Меню» и изменяем содержимое. Чтобы по клику на раздел открывался нужный блок, необходимо в настройках этого раздела указать тип ссылки «Якорная ссылка» и в «Блок» выбрать необходимый блок. Например, если мы хотим, чтобы нас переводило в раздел «О нас», то указываем Блок advantages04, который уже есть в шаблоне. Аналогичным образом прорабатываются остальные кнопки навигации.  

Image12

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

Image27

Вот теперь настройка первого экрана завершена. Аналогичным образом вы можете отредактировать остальные блоки шаблона. 

Если вам понадобится какой-то дополнительный блок, то нажмите на «Плюс», который появляется при наведении между блоков.

Image25

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

Image20

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

Image21

Дизайн-блок

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

Для примера давайте создадим новый блок, который будет рассказывать о нашей компании: 

1. Открываем библиотеку блоков и в нижнем левом углу выбираем «Дизайн-блок».

Image23

2. Таким образом перед нами отображается новый блок. Давайте очистим все его содержимое – для этого выделяем все объекты и нажимаем на клавишу «Delete».

Image9

3. Также уберем фоновое изображение – для этого открываем настройки блока и в разделе «Фон» нажимаем на крестик. 

Image22

4. Для удобства также рекомендуем включить сетку через кнопку в верхнем правом углу. Это поможет вам ориентироваться в блоке и выстраивать элементы ровно. 

Image32

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

Image13

6. Теперь немного отредактируем заголовок – сделаем шрифт точно такой же, как на первом экране. А размер установим в 44 пикселя. В последующем во всех блоках будем придерживаться таких же настроек. Чтобы так сделать, кликаем по тексту и открываем меню слева, затем проводим все манипуляции. 

Image19

7. Аналогичным образом добавляем текстовое описание – в нем расскажем о своей компании. Расположим его ниже заголовка, а размер установим в 18 пикселей. 

Image40

8. Осталось добавить фотографию компании – разместим ее в правой части. Занимать она будет оставшиеся 6 колонок. Для этого снова кликаем по плюсику и выбираем «Фотография».

 

Image14

9. Чтобы увеличить размер добавленного объекта, просто потяните за его ползунки. 

10. Для добавления собственной фотографии выбираем объект и открываем меню слева. В поле «Изображение» вставляем нужную картинку. 

Image3

11. Работа над блоком «О нас» практически завершена, осталось сделать его немного меньше и отредактировать мобильную версию. 

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

Image10

13. Изменить высоту блока можно также и в настройках. 

14. Теперь давайте перейдем к завершающему этапу – адаптации. Для настройки мобильной версии в верхней части экрана есть специальное меню. 

Image5

15. Здесь нам потребуется немного уменьшить шрифт и изображение. Также текст сделаем по центру. 

Image8

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

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

Публикация сайта

Когда весь дизайн сайта будет завершен, его нужно опубликовать. Для этого в Craftum есть специальная кнопка в верхнем правом углу. После нажатия на нее отобразится всплывающее окно, где нужно указать название сайта, которое будет отображаться во вкладке браузера. Например, Автосервис StarSpike. Затем нужно будет снова нажать «Опубликовать». 

Image17

Поздравляем! Вы создали свой первый сайт – можете его открыть и посмотреть, что получилось. 

Image11

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

Оплатив ежегодный тарифный план в конструкторе Craftum, можно получить бесплатный домен в зонах .ru или .рф. Кроме того, на платных тарифах открываются дополнительные возможности: настройки SEO, интеграции с различными сервисами и даже онлайн-оплата, благодаря которой можно запустить интернет-магазин.

В результате вы получаете полноценный сайт, способный продвигать бизнес в интернете и привлекать новых клиентов. Как оказалось, сделать это не так сложно – достаточно определиться с типом сайта и собрать его в конструкторе, основываясь на знаниях о вашей целевой аудитории и конкурентах. Желаем успехов!