Шаг 1: Подбираем референсы
Ссылки — это вспомогательные изображения, своего рода образец, который можно использовать при разработке сайта. Выбор от трех до пяти ссылок поможет вам определить цветовую схему и структуру страниц вашего веб-сайта, черпать вдохновение из дизайнерских решений и даже придумать маркетинговый компонент.
Есть много разных сервисов по сбору референсов. Вот некоторые из них:
- Pinterest,
- Behance,
- Дриблинг.
Давайте посмотрим, как их использовать. Возьмем, к примеру, сервис Behance:
- Откройте главную страницу сайта и введите требуемый запрос. Скажем, «Сайт для учителя английского языка».
- Следовательно, мы включаемся в выбор по запросу. Возьмем для примера первый полученный результат.
- После выбора макета перед нами будет отображаться его полная версия. Обратите внимание на его цвета — синий и красный. Это хороший вариант использования, поскольку люди привыкли связывать английский язык с этими цветами. Обратите внимание и на другие элементы, особенно на USP (Уникальное торговое предложение) — это вся текстовая информация слева. Возьмите его за основу и попробуйте перефразировать или сделать что-нибудь подобное.
Точно так же просмотрите другие ссылки и посмотрите, что там используется. Попробуйте найти что-то общее и запишите это в тезисах.
Также обратите внимание, что указанный выше сайт предназначен не для учителя английского языка, а для онлайн-курсов, но здесь не о чем беспокоиться. Дело в том, чтобы найти интересные решения и посмотреть, что в них используется.
Также попробуйте проанализировать, почему эти блоки, тексты и другие элементы реализованы в макете. Такой подход поможет вам создать конкурентоспособный сайт и выделиться среди остальных.
Шаг 2: Создаем сайт для учителя своими руками
Как я уже говорил, вы можете бесплатно создать сайт с помощью конструктора без привлечения специалистов. Таких сервисов несколько, и большинство из них предлагает хорошие возможности для создания целевой страницы, сайта-визитки и многостраничного сайта. Некоторые из них даже позволяют создавать интернет-магазины, которые могут составить конкуренцию обычным сайтам.
В качестве платформы для сборки возьмем Craftum, сервис для создания веб-сайтов с 10-дневным пробным периодом. В нем мы сможем создавать страницы как на основе шаблонов, так и с помощью блока дизайна, что позволяет нам буквально собирать сайт на части. Мы не будем рассматривать функциональность блока дизайна в этом руководстве, однако подробно остановимся на создании веб-сайта на основе шаблона.
Давайте начнем:
- В первую очередь произведем быструю регистрацию: для этого переходим на официальную страницу производителя и выбираем «Создать сайт бесплатно».
- Заполните поля своей контактной информацией и нажмите «Создать сайт».
- В результате попадаем на страницу выбора модели. В разделе «Обучение» есть несколько подходящих шаблонов, но я хочу усложнить нашу задачу, чтобы лучше освоить интерфейс дизайнера. Возьмем модель «Бухгалтерские услуги» (раздел «Финансы и страхование»).
- После выбора шаблона мы приходим к окну для его редактирования. Здесь все очень просто — достаточно нажать на пункт и внести изменения. Начнем с верхней части сайта, шапки: переименуем логотип и напишем свой номер телефона.
- Следующим шагом будет изменение УТП, о котором мы говорили при анализе референса. Например, в заголовке можно написать «Здравствуйте, дорогие студенты». Под заголовком вы можете раскрыть информацию с помощью пункта «На этом сайте вы можете найти всю необходимую информацию о ваших занятиях: домашние задания, оценки и другой материал».
- Теперь давайте изменим шрифт: установите дополнительный текст на шрифт Open Sans, сделайте его обычным и установите размер около 18 пикселей. В заголовке делаем следующие настройки: Inter font, bold, размер 46px. Это необязательные шаги, но с их помощью мы немного улучшили читаемость текста и сосредоточились на фотографии.
- Теперь давайте изменим изображение, чтобы студенты могли сразу видеть, кто посещает сайт. Для этого нажмите на исходное изображение, после чего появится дополнительное окно, в котором нужно загрузить новое фото. Мы делаем это, затем обрезаем изображение до нужного размера и, наконец, нажимаем «Вставить изображение».
- Первый экран почти готов. Осталось изменить названия кнопок: сделаем это только для первой, со второй разберемся чуть позже. Например, назовите его «Просмотр ДЗ» — при нажатии на него откроется еще одна страница с заданиями для студентов.
- Теперь перейдем ко второй кнопке: в нашем примере это не обязательно, достаточно для доступа к дистанционному зондированию. Если вам нужно направить пользователя куда-то еще, вы можете настроить дополнительную кнопку для своих целей. Уберем его через окно «Настроить».
- В разделе «Кнопка №2» мы просто удаляем весь текст, после чего кнопка сразу исчезает.
- В этом же окне мы настраиваем отображаемую кнопку. Устанавливаем на него ссылку, которая ведет к задачам. Например, задания можно размещать на Google Диске. Для этого откройте раздел «Кнопка №1» и впишите нужный URL в подраздел «Адрес.
- На этом разработка первого экрана завершена. Посмотрим, как это будет выглядеть на мобильных устройствах: для этого нажмите на значок смартфона вверху экрана.
- Последующие блоки страницы обрабатываются таким же образом. Их содержание зависит от ваших целей. Если вы создаете сайт только для загрузки заданий, вы можете ограничиться одной страницей. Если сайт создан для предоставления ваших услуг, например репетиторства, вам непременно потребуется добавить несколько блоков: «Услуги», «Стоимость» и так далее. После того, как все действия выполнены, осталось опубликовать сайт — для этого в правом верхнем углу есть специальная кнопка.
- В появившемся окне измените имя страницы и установите адрес справа, затем нажмите «Опубликовать».
На этом создание веб-сайта для учителя завершено, но это еще не все. Давайте рассмотрим некоторые моменты, которые помогут вам в дальнейшем.
Последние штрихи!
Чтобы начать индексацию вашего сайта, добавьте его в поисковые системы. Это можно сделать прямо из панели управления uKit. Также вы можете проверить готовность сайта к раскрутке в специальном SEO-мастере. Также у нас есть рекламный модуль, в котором легко самостоятельно настраивать рекламные кампании и автоматические акции
Ключевые возможности uKit для создания эффективных сайтов учителей
Вы можете начать с тематического или универсального шаблона. Доступны многостраничные и одностраничные варианты. Удобочитаемое доменное имя предоставляется бесплатно, при желании вы можете приобрести домен второго уровня или связать существующий. Все настройки и изменения производятся в пару кликов, без опыта и специальных знаний Готовые шаблоны для образовательных сайтов Полное соответствие требованиям 273-ФЗ Простой и интуитивно понятный редактор Быстрое создание портфолио из готовых блоков Бесплатная версия HTTPS Мобильная поддержка Версия для слепых Полное отсутствие сторонней рекламы
Что ещё можно сделать в uKit
Наш конструктор сайтов подходит для любого специализированного бизнеса. В нем можно без специальных знаний и навыков создавать проекты разного типа, просто собирая из блоков или используя готовые тематические шаблоны
Одностраничный сайт
Сайт агентства недвижимости
Сайт стоматологической клиники
Сайт-портфолио для дизайнеров интерьера
Сайт строительной компании