Найти тему
Декретные истории

Создаем одностраничный сайт

Сегодня рассмотрим один из способов заработка для мамы в декрете: создание одностраничных сайтов!

Потребуется лишь компьютер или ноутбук
Потребуется лишь компьютер или ноутбук

Что такое одностраничный сайт?

Одностраничный сайт (Landing page, лендинг, одностраничник, целевая или посадочная страница) - это интернет-страница направленная на побуждение пользователя совершить какое-либо одно действие: подписаться на рассылку, оставить заявку, купить продукт, оставить номер телефона для связи, зарегистрироваться на мастер-класс, тренинг, вебинар.

Что такое многостраничный сайт?

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

Почему создание сайтов так востребовано?

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

Этапы создания сайтов:

  • Определение задачи сайта
  • Исследование
  • Структура и прототип
  • Содержание сайта: тексты и фотографии
  • Техническая сборка сайта
  • Публикация сайта в сети

Определение задачи сайта

Для чего он создается?

  • Для регистрации на вебинар
  • Для покупки онлайн-курса
  • Для продажи одного товара
  • Для информации о компании
  • Для выдачи видеоурока

Чтобы решить задачу заказчика, нужно решить задачу его клиента.

Изучите портрет целевой аудитории (ЦА)

  • Поймите, какие задачи стоят перед ЦА
  • Какие у них могут возникнуть вопросы
  • Исследование
  • Сайты конкурентов
  • Кросс категории

Где искать?

Яндекс, Google Социальные сети

Ничего не появляется из ниоткуда.

Любое творчество опирается на то, что было создано когда-то ранее. Не существует ничего абсолютно оригинального. Любая новая и даже уникальная идея представляет собой лишь комбинацию предыдущего. Коллекционируйте идеи, обдумывайте их еще раз, выражайте по-новому в поисках собственного пути. Бездумно копировать сайты нельзя! Это нарушение авторского права.

Структура и прототип

Структура сайта строится исходя из задачи сайта.

Неизменные блоки: Шапка сайта и подвал

Шапка сайта – это титульная верхняя часть дизайн-макета веб-страницы. Первый экран: меню, дескриптор (заголовок), описание, кнопка, иллюстрация (фотография).

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

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

Варианты создания прототипа:

  • Нарисовать на листочке
  • balsamiq. com/download

Содержание сайта

  • Тексты и фотографии
  • Тексты
  • Интервью у заказчика

Подготовьте тексты в редакторе

Фотографии

Нет фотографий - нет сайта

Нельзя просто так взять нужную картинку в поисковике и использовать ее, указав источник. Это нарушение авторского права, которое может стать основанием для судебного иска. Все картинки кому-то принадлежат.

Где брать фотографии?

Бесплатные стоки :

  • pixabay. com ru
  • freeimages. com
  • freestocks. org
  • startupstockphotos. com
  • streetwill. co
  • stocksnap. io

* free stock photo + искомая тема фото

Например, "free stock photo paris"

Платные стоки

  • shutterstock. com
  • 500px. com

Также фото можно покупать можно через агентов. От 75 рублей за иллюстрацию, фотографию.

Цыганская свадьба

Что это и как избежать ее в своих работах?

Чем проще, тем лучше.

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

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

Используйте палитру для выбора цвета //tilda. cc/colors/

Вырабатывайте вкус и вдохновляйтесь

  • dribbble. com
  • behance. net
  • tilda. cc/ru/inspire

Один блок – одна задача. Страница разбивается на смысловые секции, каждая из которых отвечает на один вопрос.

Визуальная иерархия.

Более важные элементы должны быть заметнее. Чем крупнее текст, тем главнее.

Теория близости

Объекты, расположенные близко друг к другу, воспринимаются связано. Применение теория близости.

Частые ошибки возникают при работе с текстом.

Главное правило: расстояние между связанными объектами должно быть меньше, чем между не связанными

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