УРОК #3
Подготовка контента
Напишите все тексты, которые будут на вашей странице
Для того, чтобы правильно написать тексты для блоков вашей страницы, поставьте себя на место вашего будущего пользователя. Подумайте о том, он любит, какие у него есть желания. Какие потребности он хочет закрыть вашим продуктом или услугой? Представьте, что бы он хотел бы прочитать на вашем лендинге? Что увидеть?

Выбирайте любой стиль: игривый, доброжелательный, строгий. Не важно, что вы выберете, главное — чтобы он подходил пользователю сайта.

При написании текстов старайтесь делить каждый блок на подразделы (так вам будет проще ориентироваться в них).

Для каждого блока (при необходимости) выделяйте:
  • Заголовок;
  • Подзаголовок;
  • Текстовое описание;
  • Кнопка (и какой будет текст на ней).
Для блоков с преимуществами старайтесь писать примерно одинаковое количество текста, чтобы блоки визуально выглядели одного размера.

Также заранее подготовьте все ссылки на социальные сети, чтобы не искать их потом.
Если вы даете ссылку для связи в Telegram, но не на канал или бота, а на контакт, то надо делать ссылку такого вида:
https://t-do.ru/
И после слеша написать ник.
Например так: https://t-do.ru/intraframe
Ник (Username)задается в настройках аккаунта Telegram.

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

Примеры продающих заголовков:
  • Подарите семье самый лучший праздник!
  • Хотите сесть на шпагат уже через 2 месяца?
  • Получите новую специальность и начните зарабатывать от 50000 рублей!

Подзаголовок
В подзаголовке пишите основные преимущества вашей услуги. Чем она так хороша и полезна?

Примеры подзаголовков:
  • Вам не нужно будет никуда ехать — мы сделаем все за вас
  • Вам не потребуется никаких знаний и навыков

Технические Требования (ТТ) для написания текстов для «ширинга» страницы:
  • Заголовок — до 95 символов;
  • Описание — до 297 символов.
Проверить количество символов можно тут: http://simvoli.net/
Размеры экранов
Ширина мониторов под разные устройства:
  • 540 — мобильный телефон
  • 728 — планшет
  • 1366 — компьютер (старые экраны)
  • 1920 — компьютер Full HD (современные экраны)
Высота в случае разработки сайтов не важна, ведь блоки располагаются не во всю высоту экрана.
Пример размера фонового изображения (Ширина X Высота): 1920х1080px

Логотип
Формат .ai обрабатывается в программе Adobe Illustrator.
Онлайн-конвертер для обработки файлов .ai: https://convertio.co/ru/ai-png/

Подбор картинок
  • Google (обязательно выставляем лицензию на использование)
  • Яндекс
  • Unsplash.com
Сервис для сжатия изображений: http://tinypng.com/
Для того, чтобы вставить вашу картинку в экран телефона или компьютера введите в поиске слово «mockup» (также подходит для упаковок товаров, обложек журналов, конвертов и тд.)

Подбор основого цвета
Неплохие подборки готовых палитр: https://color.romanuke.com/
Профессиональный сервис Paletton: https://paletton.com/

Иконки
Сервис по поиску и скачиванию иконок: https://www.flaticon.com
Ищите иконки на английском, например: phone, question, help, star.
Иконки скачиваете размера 128x128px или 64x64px и в формате .png

Фавикон
Нам нужно подготовить 2 иконки:
  • 152x152px (.png) — скачиваем этот или чуть больший размер в сервисе https://www.flaticon.com
  • 16x16 (.ico) — скачиваем иконку этого размера в формате .png и потом генерируем в этом сервисе в нужный формат http://www.xiconeditor.com/

Картинка для шера
ТТ для картинки: 1200x630px
Для прохождения курса владение Adobe Photoshop не необходимо. Можете скачать программу, если вам позволяют технические возможности компьютера и есть большое желание :)
Домашнее задание
Тексты
Напишите тексты для всех блоков вашей страницы. Опишите все заголовки и кнопки.
Добавьте раздел «Тексты» в вашем документе Google Docs (где уже готова ваша структура) и отправьте в чат преподавателю.


Изображения
Соберите все изображения для страницы:
  • Логотип (если есть);
  • Изображения для всех блоков, которые у вас есть (например: главный экран, команда, о нас, изображения продукта…);
  • Подберите основной цвет (или цвета) и сохраните код в вашем текстовом файлике;
  • Иконки (для блоков преимущества, дополнительные преимущества);
  • Фавикон (2 формата);
  • Изображение для шера (найдите любое подходящее по смыслу вашей страницы или используйте изображение с главного экрана).

Проверка домашних заданий недоступна в тестовом доступе. Для приобретения полного курса пишите нам на почту info@formula-project.ru, для вас действует специальное предложение.

По любым вопросам можете писать нам на почту: info@formula-project.ru
Made on
Tilda