УРОК #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 (где уже готова ваша структура) и отправьте в чат преподавателю.
Важно! Не забудьте открыть доступ для комментирования вашим текстам. Для этого нажмите на кнопку "Настройки доступа" в правом верхнем углу. Далее выберите "Разрешить доступ всем, у кого есть ссылка" и отметьте режим доступа "Комментатор": http://prntscr.com/tox3hq


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

Отправлять изображения преподавателю не надо, он их посмотрит уже скоро на вашем рабочем лендинге:)
Но подготовьте изображения заранее, чтобы не тратить время во время разработки страницы!


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