В каком приложении сделать гайд
Привет! В этой публикации наглядно разберём, как создать PDF документ не имея каких-то особых для этого навыков.
PDF документом может быть мини книга, отчёт или гайд, которые будут служить лид-магнитом, то есть, вы будете отдавать PDF бесплатно, за подписку, либо вы можете его продавать.
Впрочем, неважно для каких целей вы будете использовать свой PDF, главное, что мы с вами пройдём пошагово по всем техническим моментам и создадим привлекательный PDF файл.
Работать будем в сервисе Canva. Думаю, что многим знаком этот замечательный сервис, но возможно вы не знали, что в нём можно создавать PDF документы, в том числе. Поехали разбираться!
Как создать PDF онлайн
По центру откроется чистый лист, а слева готовые шаблоны, которые вы можете использовать для обложки своего PDF документа.
Жмёте на выбранный шаблон, и он ложится на чистый лист документа. Здесь можно его редактировать. Щёлкаем два раза на текст, удаляем и вставляем свой. Текст редактируется слева вверху. Подбираем размер, шрифт, цвет, и т. д.
Так же, кликнув по краю шаблона, можно заменить цвет.
Чтобы отменить последнее действие, если сделали что-то неправильно, используем горячие клавиши Ctrl + Z
Чтобы разместить текст в нужном месте, жмём один раз на текст и перемещаем мышью, либо стрелками на клавиатуре. Система сама выставляет разметку, чтобы можно было точно разместить элемент дизайна.
Так же вы можете удалить любой элемент дизайна, выделив его кликом мыши и нажав Delete на клавиатуре или на корзину в правом верхнем углу.
Затем подгоняем размер потянув мышью за угловые маркеры, и выставляем в нужном месте.
Для страниц с текстом, я использую подготовленный в фотошопе шаблон. Если не сильны в фотошопе, то можно просто подобрать цвет страницы и размещать на ней текст.
В шаблоне появляется текстовое поле, которое можно настроить точно таким же образом, как мы настраивали текст в обложке. Выбираем размер шрифта, размещение текста по краю, а затем вставляем свой текст.
Подгоняем маркерами текстовое поле по размеру. Удаляем лишний текст или наоборот — добавляем. Можно выделить участок текста и сделать из него список. Если необходимо, добавляем заголовок страницы вверху.
Теперь картинка находится под текстом.
Да! Если у вас не получается создать PDF документ за один подход, не переживайте, система сохраняет незаконченную работу и вы можете вернуться к ней в любое время.
Чек-лист, пошаговое руководство или мини-книга - отличный вариант лид-магнита.
Для их создания не нужно дорогостоящее оборудование, освоение сложных навыков, специальное помещение и видео съемки при полном параде.
Вы можете создать их за пару дней, сидя дома с пучком на голове.
* Примечание: Лид-магнит - это подарок, который вы отдаете потенциальному клиенту в обмен на его контактные данные.
Есть только одно "но".
В наше время информационного перегруза материал, который вы подаете, должен быть не только интересным и полезным.
Важно его красиво и грамотно упаковать. Правильное оформление напрямую влияет, захочет ли ваш потенциальный клиент:
• скачать лид-магнит
• прочитать его до конца
• продолжить сотрудничество с вами
Как оформить чек-лист, гайд или мини-книгу, если их цель - привлечение клиентов? В этом посте вы найдете 7 рекомендаций, которые увеличат продающую способность вашего лид-магнита.
Показывать буду на примере готовых шаблонов для оформления чек-листов. Потому как их я создавала с соблюдением всех правил и канонов.
Встречают по обложке.
Обложка отвечает за то самое первое впечатление, которое нельзя произвести дважды. Именно она будет красоваться на ваших баннерах в соцсетях и на сайте, изо всех сил стараясь привлечь внимание потенциальных клиентов. Две важнейшие составляющие "успешной" обложки - это правильная картинка и заголовок.
1. Понятный и емкий заголовок
Заголовок - это первое, на что реагирует клиент и решает, надо оно ему или нет. Поэтому заголовок должен быть заметным, содержательным и простым для понимания.
Тандем из основного заголовка и проясняющего его подзаголовка - прием, который используется во многих бестселлерах. Причин тому две:
- Два предложения вмещают больше информации, чем одно.
- Два коротких предложения наш мозг понимает намного быстрее, чем одно длинное.
Поэтому все обложки в своих шаблонах я оформляю по этому принципу.
Подсказка! Разделить название на заголовок и подзаголовок можно двумя способами.
Вариант 1. Вы можете поделить название своего лид-магнита на заголовок и подзаголовок в буквальном смысле. Т.е. оно будет состоять из двух законченных предложений. Пример:
Дизайн, который продает за вас
Как правильно оформить чек-лист, гайд или мини-книгу
Вариант 2. Вы можете оставить название длинным, но визуально поделить его на две части. Так оно будет намного легче читаться. Например, название этой статьи могло бы выглядеть так:
Как оформить чек-лист, гайд или мини-книгу,
чтобы они сами приводили клиентов
2. Изображение обложки
В шаблонах, которые я создаю, поменять изображения можно в пару кликов. Это очень полезная функция, так как она дарит полную свободу для творчества.
Правильно подобранная картинка способна заменить тысячу слов.
Посмотрите, как один и тот же шаблон выглядит с разными фотографиями. Даже без заголовка вы уже можете предположить, на какую тему будет содержание.
Для оформления обложки вы можете использовать собственные фотографии или взятые с легальных фотостоков. Использовать картинки с Яндекс, Гугл или Пинтерест я настоятельно не советую, так как вы можете ненароком нарушить чьи-то авторские права и нажить неприятности.
Подсказка! Если вам сложно подобрать фотографии для своего гайда или чек-листа, можете использовать "универсальные" изображения. К ним относятся: чашка чая/кофе, красивая канцелярия, части тела (например руки), изображения природы. Последний вариант - это выручалка на все случаи:
- для бизнес темы отлично подойдут фотографии леса, гор, зеленых листьев, камней
- для женской: красивые цветы, море, пляж, небо
- для детской тематики: солнце, радуга, облака, полевые цветы, лужайка
3. Вступительная часть
Оформляете ли вы чек-лист, пошаговое руководство или мини-книгу - этот формат подразумевает краткость. Именно таким должно быть вступление перед основным содержанием: лаконичным, емким и интересным. Вступление должно мотивировать читателя к дальнейшему чтению - это его главный критерий.
Что здесь будет уместно?
Вы можете кратко представиться, в двух словах рассказать, чем занимаетесь, почему решили создать этот документ, как им лучше пользоваться, что ждет вашего читателя на следующих страницах. Ещё один хороший вариант - начать с увлекательной истории в тему.
- Это примеры того, как визуально оформлены подобные страницы в моих шаблонах для чек-листов ↓↓↓
![Как правильно оформить чек-лист, гайд или мини-книгу]()
4. Перечень шагов или пунктов
Вот мы и добрались до основной части - содержания.
Если вы ещё не определились с ним, настоятельно рекомендую вам изучить пост "12 примеров чек-листов, которые приведут вам клиентов". Там вы наверняка найдете для себя вдохновляющую идею.
Главное требование к содержанию подобных продуктов - никакой воды. Здесь всё должно быть кратко, сжато и по сути.
![Как правильно оформить чек-лист, гайд или мини-книгу]()
Что касается дизайна, тут тоже важна четкая структура. Оставляйте побольше воздуха между блоками. Пусть глаза легко скользят от одного пункта к другому. В дизайне это называется "дорожкой внимания".
Будьте аккуратнее с яркими цветами. Вам может казаться, что сделав названия шагов огненно-красными, вы помогаете читателю увидеть структуру. На деле - создаете визуальный шум. Глаз начинает метаться от одного яркого пятна к другому и прощай внимание.Если вы хотите выделить заголовок, используйте менее раздражающие приемы:
- другой шрифт
- более крупный размер символов
- заглавные буквы
- курсив
5. То, что должно быть всегда на виду
Если вы хотите, чтобы ваш лид-магнит работал на ваше имя и приводил клиентов, информация о вас должна быть всегда на виду. Разместите на обложке и в конце каждой страницы свои основные данные. К ним относятся:
- ваши Имя Фамилия или название проекта
- сайт или ключевой профиль в соцсетях
![Как правильно оформить чек-лист, гайд или мини-книгу]()
Более подробные контакты можно и нужно расположить в заключительном разделе с предложением дальнейшего сотрудничества. Про него мы поговорим в следующей части.
6. Приглашение к сотрудничеству
Возможность встраивать ненавязчивые продажи - ещё одна причина, почему я люблю чек-листы и подобные материалы. Если человеку интересно дальнейшее сотрудничество с вами, он прочитает продающий блок. Нет - спокойно закроет.
Что здесь обязательно должно быть?
- Ваша фотография и/или картинка относящаяся к вашему продукту.
- Все контакты, которые вы готовы предоставить: сайт, соцсети, мессенджеры, телефон, почта. Если вы раздаете материал в формате PDF, дополнительное удобство здесь в том, что все ссылки можно сделать активными.
- Предложение вашей платной услуги или продукта.
- Четкая и простая инструкция, что нужно человеку сделать, если он готов воспользоваться вашим предложением.
![Как правильно оформить чек-лист, гайд или мини-книгу]()
Важный момент! Не стоит в этом разделе вываливать на клиента весь спектр своих услуг. Лучше сделать одно понятное предложение.
Если одним предложением никак не обойтись, не нужно пытаться их втиснуть на одну страницу. Сделайте несколько полноценных, красиво оформленных разворотов.
7. Правильное имя файла
Случалось ли вам находить на своем компьютере файлы со странными названиями? Или безуспешно искать нужный файл, который сохранился под непонятно каким именем?
Когда вы переводите лид-магнит в формат PDF, важно этот файл правильно назвать, чтобы люди, которые скачают его на свой компьютер, могли легко его найти. Или, случайно обнаружив ваш документ, вспомнить, о чем он и от кого.
Например так: названиелидмагнита_вашеимя_вашсайт.pdf
И не нужно бояться длинных названий. Нужно бояться непонятных.
Как оформить красиво, быстро и без Photoshop?
Очень просто - в онлайн-редакторе Canva. Вы можете сделать это самостоятельно.
Хотите еще проще? Используйте готовые шаблоны, которые я оформила специально для вас ↓↓↓
![Как правильно оформить чек-лист, гайд или мини-книгу]()
- красивая обложка
- страницы для вступительной части
- страницы для самого гайда или чек-листа
- страницы для рассказа о себе и своих услугах
Во всех шаблонах вы можете поменять изображения, цвета и шрифты, передвинуть или удалить любой из элементов. После покупки вы получите видео инструкцию, которая поможет вам быстро во всем разобраться, даже если до этого вы никогда не пользовались редактором Canva.
Не так давно закончился очередной спринт, и у меня появилось немного времени сделать для своих пользователей не самую нужную, но в то же время интересную фичу — интерактивный гайд по работе с нашим приложением.
В интернетах очень много готовых решений — все они безусловно могут подойти для этой задачи, но мы посмотрим как это сделать самостоятельно.
Архитектура
Архитектура данного компонента довольно проста.
У нас есть важный элемент в DOM-дереве, о котором мы хотим что-то рассказать пользователю, например, кнопка.
![image]()
Для решения этой задачи нам поможет @angular/cdk. В своей прошлой статье я уже хвалил @angular/material которая зависит от CDK, для меня она по-прежнему остается примером качественно исполненных компонентов, созданных с использованием всех возможностей фреймворка.
Такие компоненты как меню, диалоговые окна, тултипы из библиотеки @angular/material сделаны с помощью компонента из CDK — Overlay.
Простой интерфейс этого компонента позволяет быстро создать слой поверх нашего приложения, который будет самостоятельно подстраиваться под изменения размера экрана и скроллинг. Как вы уже поняли, с помощью этого компонента решить нашу задачу становиться очень просто.
Для начала установим библиотеки
После установки не забудьте добавить стили в style.css
Теперь создадим новый модуль в нашем проекте:
И сразу же cгенерируем шаблон для директивы:
Данная директива будет выполнять роль триггера для нашего будущего гайда, будет слушать нажатия на элемент и подсвечивать его на странице.
Тут мы обращаемся к сервису который был так же сгенерирован при создании библиотеки, всю основную работу будет делать он.Для начала объявим в сервисе новое свойство
Как мы уже видели эти значения нам будет присылать директива, в массиве первый элемент это описание, а второй — DOM-элемент который мы описываем (такое решение я выбрал для простоты примера).
Обновим конструктор сервиса, добавив подписку на обновления от EventEmitter, функция attach будет получать обновления и создавать слои.Для создания слоя нам понадобиться Overlay, Injector и NgZone.
Следующие действия можно разделить на несколько этапов:
- Закрыть текущий оверлей (если он есть)
- Создать PositionStrategy
- Создать OverlayRef
- Создать PortalInjector
- Прикрепить компонент к слою
Существует несколько готовых стратегий:
- FlexibleConnectedPositionStrategy
- GlobalPositionStrategy
FlexibleConnectedPositionStrategy — будет следить за конкретным элементом и в зависимости от конфигурации будет липнуть к нему при изменении размера браузера или скролле, явный пример использования выпадающие списки, меню.
GlobalPositionStrategy — как и говорится в названии, создается глобально, ему не нужен какой-либо элемент для работы, явный пример использования — модальные окна.
Добавим метод создания стратегии плавающего окна вокруг исследуемого элемента
Добавим метод создания OverlayRef
И добавим метод привязки нашего компонента к слою:
Про все что приведено в листингах уже рассказал, кроме DataRef.DataRef — это простой класс который мы добавляем в инжектор для компонентов, фактически для передачи данных для отрисовки — например описание.
Так же, в нем я решил рисовать еще один слой для затемнения и выделения элемента. В этом случае мы уже будем использовать глобальную стратегию создания слоя.
ShadowOverlayComponent — рисует компонент, и в инжекторе получает тот же токен, только с элементом, вокруг которого нужно сделать акцент.Как я это реализовал, можно посмотреть в исходниках на github, отдельно на этом внимание акцентировать не хочется.
Только скажу, что там я рисую canvas на весь экран, рисую фигуру вокруг элемента, и заливаю контекст методом fill('evenodd');
Итого
Самое крутое, это то что @angular/cdk/overlay позволяет нам рисовать сколько угодно слоев. Они будут адаптивными и гибкими. Нам не нужно заботиться о том что изменится размер экрана, или элементы сместятся по каким то естественным причинам, overlay — подумает об этом за нас.
Мы поняли как работать со слоями, мы поняли что задача сделать пошаговый гайд — не такая и сложная.
Вы можете доработать библиотеку, добавив возможность перехода между элементами, выхода из режима просмотра и ряд других угловых случаев.
![Как писать гайды]()
Гайд – это инструкция, руководство, эдакий план действий. В нем описывается порядок действий для достижения конкретного результата. Соответственно, он должен быть максимально понятен и полезен рецепиенту.
В этой статье я рассмотрю, по каким принципам нужно составлять гайд и каких требований придерживаться.
Требования к гайду
Чтобы гайд был максимально полезным для читателей, он должен соответствовать определенным требованиям. Не все они обязательны, но будет неплохо, если вы будете их придерживаться.
- Четкий алгоритм. Вообще, гайды можно использовать не везде. Лучше всего они подойдут там, где процесс идет по каким-либо этапам. В идеале должен получиться пошаговый «рецепт». Каждый шаг, конечно же, включает только одно простое действие.
- Описание конкретного результата. Нужно точно представлять или хотя бы понимать, чего именно хочет достичь человек после прочтения вашего гайда. Основываясь на этих знаниях, вы даете точное направление «развитию сюжета».
- Строго по факту. Фраза «без воды» никогда не была столь актуальной… Люди хотят решить свою проблему, и им не всегда нужны какие-либо философские рассуждения или углубления в прилегающую сферу. Просто путь из точки А в точку Б, грубо говоря. В крайнем случае можете дать ссылку на другой источник, где подробнее описываются детали какого-либо этапа.
- Соответствие уровню знаний читателя. Когда вы садитесь писать материал, то четко представляете, для кого именно он предназначен. Важен четкий образ: это может быть чайник, который решил освоить что-то новое, профи, пожилой человек, школьник и так далее. Отсюда следует, что чем меньше уровень осведомленности аудитории в затрагиваемой сфере, тем подробнее инструкции. А ежели вы не знаете, кому пишете, и делаете это просто для галочки, то просто тратите свое время и время читателей.
- Наличие иллюстраций. Будет не лишним, если весь процесс будет сопровождаться изображениями. Ежели это какая-то инструкция по компьютерам, то это скриншоты. Рецепт? Тогда фотографию процесса приготовления. Где-то может понадобиться видео, где-то и текст вообще ни к чему. Но если используете чужие картинки, не забывайте про авторские права.
Тут ведь еще важно не переборщить, не начать перечислять каждую мелочь или очевидные детали, дабы материал казался объемнее (или по другим причинам). Вставлять картинки ради забавы или красоты в гайдах не стоит. Вряд ли читателю понадобится какой-то мем или фото забавного котика.
Отличия гайда от обзора
Обзор – это рассмотрение самого продукта, его характеристик и каких-то качеств. А гайд – это инструкция по использованию с четко обозначенными действиями. Для описания сути обзора больше подходит слово «Что», а для гайда – «Как».
Как правильно написать гайд
При написании инструкции нужно придерживаться нескольких принципов. С их помощью вы сделаете материал максимально полезным и поймете, кому он вообще нужен.
Определение аудитории
Если вы пишете гайд для крупного ресурса, ориентируйтесь на его «стратегию». Посмотрите, какие материалы на нем публикуются и какие темы затрагиваются, как другие авторы объясняют пользователям те или иные детали. Отталкивайтесь от этого.
Другой вариант – спросите у читателей или клиентов. Будучи экспертом, вы с легкостью сможете определить их уровень знаний. Кстати, таким способом можно еще и определить, в каком стиле лучше излагать мысли.
В случае с продуктом неплохо будет почитать комментарии, опросить менеджеров по продажам или сотрудников техподдержки. У последних постоянно копятся актуальные вопросы, ведь люди обращаются к ним за уточнением деталей.
Оптимальный объем
Его нет. Но есть теория, что чем короче гайд, тем лучше. На вкус и цвет… Главное, чтобы из материала (будь это хоть одно предложение или лонгрид) человек узнал, как действовать.
Личный опыт
В идеале при написании гайда автор должен разбираться в затрагиваемой теме. Описывая собственный опыт, можно понять сложность или простоту некоторых этапов, определить, какие ошибки часто допускаются людьми. Частая практика, если человек пишет текст под руководством эксперта в рассматриваемой области. Или когда эксперт пишет сам – готовая инструкция проверяется хорошим редактором на наличие ошибок.
Структура и оформление
Четкая последовательность действий, никаких неожиданностей и резких поворотов. Придерживайтесь пошагового принципа и старайтесь не уходить от него.
Типичной структуры по написанию гайда не существует, все зависит от темы, осведомленности читателей и прочих факторов. Но если проанализировать множество материалов, общая структура все же вырисовывается. И она такова:
- Краткое описание.
- Когда нужно использовать инструкцию.
- Описание работы по шагам.
Помните про обозначение шагов. Обозначайте разделы разными заголовками. Не делайте слишком длинные абзацы – оптимальный размер составляет от 3 до 7 строк.
Хотите что-то сравнить? Вставьте таблицу. Привязывайте к каким-то элементам полезные ссылки. Используйте списки, если идет перечисление, и не забывайте оформлять их маркерами или номерами.
Объяснения
Если вы в гайде что-то запрещаете, обоснуйте, дайте причины и разъяснения. Пользователь должен понять, по какой именно причине указанное действие недопустимо. Такое вполне можно отобразить в виде картинки, перечеркнутой красной линией или обозначенной словом «Неправильно».
Тест-драйв
После того как гайд будет написан, пройдитесь по шагам и посмотрите на результат. Будет неплохо, если вы попросите других людей пройти всю описанную в инструкции процедуру. Если результат, которого они достигнут, соответствует тому, что вы представляете в голове и описываете, значит, гайд хорош.
Проверка
Если у вас нет редактора, проверять текст придется самостоятельно. Рекомендуется после написания отойти на некоторое время от текста, отвлечься, и на «свежую голову» перечитать материал. Полезно еще читать вслух – так вы поймете, не осталось ли спорных моментов.
Заключение
Как подтвердить полезность гайда? Если прочитавший его человек достиг нужного результата с помощью указанной последовательности. И сделал он это при одном прочтении, не открывая другие источники и не ища значений незнакомых ему терминов. Основной принцип гайда – простота.
Читайте также:
