Как делать красивые статьи на Тильде
В статье рассказываем основные приемы, как работать с текстом на Тильде. Эти правила помогут красиво и быстро верстать статьи и выработать стиль издания или блога. Правила верстки универсальны и пригодятся всем, кто работает с текстом и типографикой — сайт на tilda
Содержание
1. Текст должен легко читаться
2. Типографика: делаем текст визуально интересным
3. Как найти свой стиль подачи контента
4. Не перестараться с версткой
5. Визуальный контент: добавляем фотографии, видео и иллюстрации
6. Обложка статьи, или как произвести первое впечатление на читателя
7. Навигация: пусть в статье будет удобно ориентироваться
8. Чеклист по верстке статьи
1. Текст должен легко читаться
Главная цель верстки статьи — читателю должно быть комфортно и удобно читать. Поэтому основной текст на сайте должен быть оформлен максимально просто.
Используйте ширину текста 8 колонок, а не 10 или 12. В кириллице для комфортного восприятия в строке должно помещаться от 55 до 70 символов. Если строки длинные, то, пока читатель переводит глаза от конца предыдущей строки к началу следующей, он может потерять строку или смысл текста.
Лонгрид «Мечты об Арктике»
В европейской культуре принято читать текст слева направо и поэтому выравнивать текст также лучше по левому краю, так его удобнее читать. Равнение по середине уместно только в узких колонках или когда очень мало текста — например, так можно выделить ключевую фразу.
Делим текст на абзацы
Для удобного чтения текст лучше всего располагать посередине страницы на уровне глаз. При ширине текста 8 колонок можно сделать отступ 2 колонки от левого края.
Разделяйте текст на смысловые абзацы и используйте отбивку между ними, чтобы человек не потерялся в полотне слов. Не бойтесь делать побольше вертикальные отступы между главами статьи, дайте тексту дышать.
Баухауз: когда стул — предмет искусства. Лонгрид
Немного математики: отступ между заголовком и относящимся к нему текстом должен быть равен расстоянию между абзацами или быть в полтора раза больше. Отступ над заголовком должен быть в раза 2 больше, чем под ним. Так заголовок не прилипнет к предыдущей главе и будет относиться к последующему тексту.
Выбираем шрифты, которые не отвлекают от содержания текста
Выбор шрифтов с засечками или без зависит исключительно от тематики и стилистики сайта.
Акцидентные шрифты не подходят для набора основного текста, потому что они сложны для восприятия, но их можно использовать для заголовков.
Лучше выбрать нейтральные текстовые шрифты, которые не будут отвлекать читателя от содержания. Хорошо читаются шрифты без засечек PT Sans, Arial, Futura, Open Sans. Из шрифтов с засечками в сплошном тексте хорошо считываются PT Serif, Times New Roman, Baltika или Charter.
Подробнее о выборе шрифтов для статьи
На Тильде в настройках сайта вы можете выбрать сочетание шрифтов из нескольких готовых вариантов, либо выбрать шрифт вручную или загрузить свой.
Оптимальная насыщенность шрифта для основного текста — это normal (нормальный). Light (тонкий), super light (очень тонкий) или bold (жирный) не стоит использовать — текст будет плохо читаться.
Если в статье много текста, используйте размер шрифта 18 или 20 px. А если много изображений и текст используется минимально, можно выбрать шрифт покрупнее — 22 или 24 px.
Используем возможности Тильды
В Тильде есть инструмент — типограф, который автоматически заменит все неправильные кавычки и тире, уберет лишние пробелы, а также поставит неразрывные пробелы, чтобы в тексте не было «висячих» предлогов.
Когда в тексте неправильные кавычки и тире, текст выглядит неаккуратно и замусорено. Например, у дефиса «-» и тире «—» в русском языке разные значения. Дефис — знак орфографический, а тире — пунктуационный.
Французские кавычки «елочки» — другая важная часть русской типографики, им отдается предпочтение. »Английские двойные» кавычки используются в английских текстах, но в русских им не место — это все равно, что писать латиницей русские слова.
Типограф используется во время режима редактирования текста. Как будет выглядеть окончательный вариант текста с применением типографа можно увидеть в режиме предпросмотра страницы и в опубликованном виде
2. Типографика: делаем текст визуально интересным
Порядок в тексте: заголовок, подзаголовок и лид
Чтобы информация лучше воспринималась, текст разбивают на смысловые части. Заголовки, подзаголовки и разделение на абзацы — все это делает текст более читабельным. Используйте один стиль заголовков, подзаголовков и основного текста в статье — чем чище и последовательней типографика, тем лучше читается текст.
Самыми крупными должны быть заголовки. Не бойтесь использовать большой размер шрифта, от 52 пикселей и больше. Контраст в типографике смотрится красиво и интересно, а читателю проще ориентироваться в статье. Еще к заголовкам можно применить другой шрифт, контрастный по отношению к шрифту основного текста.
Журнал «Тогда». Симфония гудков
Лид после обложки кратко описывает содержание статьи. Он вовлекает читателя, помогает ему понять, о чем речь в статье. В лиде используется чуть более крупный размер шрифта, чем у основного текста. Если размер шрифта основного текста 20 px, смело задавайте в лиде размер не менее 30 px. Можно сверстать немного крупнее первый абзац после заголовка — использовать его как лид для каждой главы.
Баухауз: когда стул — предмет искусства. Лонгрид
Еще один способ обособить какую-либо часть текста — поработать над его тоном, непрозрачностью. Например, сделать лид или подзаголовок серым. Это выделит их среди окружающего текста.
Теперь, когда мы упорядочили текст заголовками и подзаголовками, добавим контрастных элементов типографики — чтобы статью не просто прочитали, а чтобы она запомнилась и произвела впечатление.
Такие элементы обычно — ключевые фразы, цитаты или прямая речь. Их можно выделить с помощью насыщенности, цвета, размера шрифта или использовать другой шрифт. Эти элементы можно сделать на контрастном фоне на весь экран, либо как карточку.
Лонгрид «Мечты об Арктике»
Сделайте цитаты более живыми — добавьте фотографии спикеров.
РИА Новости. Летят журавли
Чтобы список смотрелся аккуратно, используйте блок с нумерацией.
Баухауз: когда стул — предмет искусства. Лонгрид
Важные слова и фразы в основном тексте можно выделить с помощью жирного начертания или курсива. Тут важно не переборщить — лучше не выделять больше 10 слов и использовать один вариант выделения в статье, иначе текст будет тяжело воспринимать.
Да! И не забывайте про отступы. Они хорошо разделяют смысловые блоки в тексте, чтобы они не прилипали друг к другу.
3. Как найти свой стиль подачи контента
Ответ один — экспериментировать. Основной текст должен быть максимально простым и легко читаемым, в остальном — можно пробовать.
Эксперименты с типографикой
Не бойтесь контрастов. Используйте крупные заголовки, цитаты и ключевые тексты. Большой размер текста подходит для коротких предложений и фраз. Если слов много, а текст хочется выделить, сделайте цветной фон или поместите на подложку.
В одном блоке можно комбинировать два разных вида типографики. Если в заголовке есть цифра, попробуйте сделать ее крупным шрифтом, а сам текст — шрифтом поменьше с насыщенностью light.
#madeontilda Лаборатория Wonderful
Но старайтесь использовать разные виды типографики так, чтоб на одном экране их было не более 3 видов (например, заголовок, подзаголовок и основной текст), иначе верстка будет выглядеть перегруженной.
Графические элементы
Интересно смотрятся графические элементы в верстке — геометрические фигуры, линии, иконки. Ими можно оформить списки, цитаты, ключевые фразы, и еще использовать как разделители смысловых блоков статьи.
Изображения и фон
Можно поэкспериментировать с оформлением галерей в статье и расположением фотографий относительно текста. В разделах «Изображение» и «Галерея» библиотеки Тильды вы найдете много разных комбинаций изображений.
Блог FY:R. С чистого листа
Интересное решение — сменить цвета фона между разделами или главами — плавно или контрастно. В Тильде это блоки DV11 и DV11A в категории «Разделитель».
Теории и практики. От товара к товарищу
Нулевой блок — пространство для экспериментов в верстке
Сверстать интересно получится в темплейтах и готовых блоках Тильды. Но чтобы создать что-то уникальное, попробуйте нулевой блок (Zero Block). Возможностей — много и разных — например, составить композицию с наложением текста на фотографию, сделать из статьи инфографику, создать необычную комбинацию типографики или авторскую обложку для статьи, композицию из изображений и текста.
Блог FY:R. Торжество внутреннего мира
Вдохновляемся и делаем
Крутые примеры всегда вдохновляют, перед работой над материалом полезно поискать референсы и посмотреть, как верстают в мире. На Тильде мы отобрали 35 красивых лонгридов — можете начать с них, а дальше следуйте за вдохновением.
4. Не перестараться с версткой
Узнав столько нового, легко увлечься. Если нашпиговать статью стилями типографики — читатель запутается и упустит смысл текста.
Поэтому не советуем использовать больше двух гарнитур в одной статье — их еще называют шрифтовой парой. Не применяйте больше двух видов насыщенности шрифта, чтобы не перегружать верстку. Одного жирного шрифта для заголовка и нормального шрифта для основного текста вполне достаточно.
Колонки и отступы
Одна ширина колонок в тексте нужна, чтобы текст выглядел аккуратно и не имел волнообразных краев. Чаще всего используют 8 колонок для основного текста и 10 колонок для ключевых фраз. Но, скажем, использовать еще и 12 колонок для заголовков — уже слишком. Ширину заголовка лучше тоже сделать либо 8 колонок, либо 10.
Чтобы сохранить единый стиль в верстке статьи, придерживайтесь одинаковой величины отступов. В Тильде можно копировать один или несколько блоков подряд, чтобы не выставлять заново настройки. У вас сохранятся размер шрифта, насыщенность и отступы — это сэкономит время на верстку.
5. Визуальный контент: добавляем фотографии, видео и иллюстрации
Визуальная информация воспринимается легче, чем текст. Пора добавить в нашу статью визуальный контент: фотографии, иллюстрации, видео, графику.
Хорошее изображение для статьи должно обладать: сбалансированной резкостью, контрастностью, яркостью и цветностью. Если качество плохое, лучше вообще не использовать картинку.
Магадан — культурный город. Лонгрид «Ледник»
Оптимальным мы называем изображение, которое качественно выглядит (с хорошим разрешением) и быстро загружается при прокрутке страницы.
Полноэкранное изображение — ширина 1680 px
Изображение на ширину 12 колонок — 1160 px
Изображение на 10 колонок — 960 px
Изображение на 8 колонок — 760 px
Изображение шириной 6 колонок — 560 px
Где искать подходящие изображения
В идеале создавать визуальный контент самостоятельно — можно заказывать у фотографа или иллюстратора. Уникальные изображения смотрятся профессионально, а еще они есть только у вас.
Если такой возможности нет, можно поискать бесплатные изображения с лицензией Creative Commons на стоках (Unsplash, Everypixel), в Google или на Flickr. Фотографии на Flickr интересны тем, что их выкладывают пользователи, и можно найти много интересных снимков, но нужно не забывать следить за лицензией и использовать только те фотографии, которые отмечены лицензией Creative Commons.
unsplash.com
Если не удается найти подходящие изображения на бесплатных ресурсах, есть много платных фотостоков, например Depositphotos или Shutterstock. Выбирая изображения, постарайтесь избегать клише и стереотипных фотографий.
1
Фотографии и изображения могут иллюстрировать текст — например, делать объяснение сложных терминов наглядным.
2
Сложные моменты в тексте можно объяснить через инфографику. Она может быть дополнением к тексту или самодостаточным элементом статьи. Инфографику можно оформить как иллюстрацию, а можно использовать готовые блоки Тильды.
В разделе «Этапы» можно найти много вариантов блоков для объяснения какой-либо последовательности действий. А в настройках «Контент» есть широкий выбор иконок разной тематики, и можно загрузить свои
Не забывайте подписывать изображения. Это поможет сориентироваться читателю, который бегло просматривает статью (увы, таких много, и с этим нужно считаться).
3
Иллюстрациями можно разбавлять однородный текст, чтобы читатель не заскучал. Например, вы можете оформить картинкой начало каждой главы, визуально разделяя главы. Для такого случая подойдут и крупные иллюстрации, и небольшие иконки.
Tilda Publishing. Доверие в дизайне
4
Располагайте изображения в тексте равномерно, чередуйте их, чтобы композиция блоков страницы была гармоничной.
Первое, что видит читатель статьи — это обложка. Если она неудачная, возможно, дальше смотреть он не станет. Обложка должна зацепить и вызвать желание читать текст дальше. На обложке обычно располагаются название статьи, описание и изображение.
Размер заголовка и высота обложки
Часто на обложку ставят полноэкранное изображение. Тогда заголовок должен хорошо читаться и быть контрастным по отношению к фону. Если фоновое изображение неоднотонное и спорит с текстом, попробуйте наложить на фон фильтр. Чаще всего для фотографий вполне достаточно фильтра черного цвета.
Журнал Oh, my Moscow! Небесное кружево
Если статья входит в серию или это внутренняя страница проекта, можно сделать высоту обложки 50 или 75%. Так акцентируется внимание на иерархии страниц.
Наложить фильтр можно в настройках блока. Можно подобрать разную степень прозрачности для верха и низа обложки, а также использовать разные цвета
Заголовок на обложке
Подбирая изображение для обложки, следите, чтобы заголовок не располагался на значимой части фотографии, попробуйте изменить размер шрифта, выключку текста или выравнивание/кадрирование фотографии.
Еще один хороший вариант для обложки — комбинация текста слева и иллюстрации справа (или наоборот). При этом выключка текста должна быть по левому краю.
Журнал «Тогда». Основы черчения
Можно обойтись без картинки
Интересным оформлением обложки статьи может стать просто заголовок и описание без изображения. Только сделайте заголовок покрупнее — вместо фото внимание здесь привлечет яркая и интересная типографика. На фоне может быть легкий градиент, яркий цвет или просто белый.
Tilda Education. 20 лекций TED для дизайнеров
Есть куча способов красиво оформить обложку статьи. Придумывайте и творите. Главное — меньше информации и заголовок, который хорошо читается и не спорит с изображением.
7. Навигация: пусть в статье будет удобно ориентироваться
Если статья длинная, создайте навигацию, чтобы читатель мог сориентироваться.
Например, можно сделать содержание со списком глав в начале статьи и проставить на них якорные ссылки. Блок с якорной ссылкой на Тильде находится в категории «Другое» под номером Т173.
В статье можно использовать навигацию с точками, она фиксируется во время скролла — это помогает передвигаться внутри страницы между главами. Это блок МЕ604 в категории «Меню».
culture-city.com/music-xx. Навигация с точками
Переходы внутри сайта
Не оставляйте «тупик» в конце статьи, дайте посетителю возможность перейти на другую страницу сайта или вернуться на прошлую, иначе он может просто уйти. Можно использовать плитку с ссылками на статьи похожей тематики или предложить вернуться на главную страницу с помощью кнопки.
Если статья длинная, можно добавить кнопку «Наверх». В библиотеке Тильды блок с кнопкой «Наверх» находится в разделе «Форма и кнопка» под номером BF702.
Истории Лифт Space
В конце статьи поставьте кнопки «Поделиться» в соцсетях, чтобы люди могли расшарить понравившуюся статью и привлечь других людей к вам на сайт. Такой блок можно выбрать из нескольких вариантов в категории «Соц.сети».
Чеклист по верстке статьи
Чтобы быстро проверить готовность материала к публикации.
1
Убедитесь, что основной текст хорошо читается. Верстка должна быть максимально простой.
2
Проверьте отступы в статье. Критерии: отступы везде одинаковы, между текстом достаточно воздуха, нет прилипших друг к другу смысловых блоков.
3
Примените типограф ко всем блокам текста в статье. Он заменит неправильные кавычки и тире, а также перенесет «висячие» предлоги на новую строку.
4
Соблюдайте визуальную иерархию. Не забудьте оформить лид под обложкой, поделите статью на главы и подглавы.
5
Выделяйте важные смысловые блоки с помощью типографики и верстки: ключевые фразы, цитаты и прямую речь. Это сосредоточит внимание пользователя на важных мыслях в статье и разобьет полотно основного текста.
6
Сделайте верстку интересной: не бойтесь применять контрасты в типографике, используйте графические элементы и красивые изображения.
7
Постарайтесь, чтобы эксперименты не привели к хаосу. Следите за количеством стилей в типографике, дизайн не должен преобладать над удобочитаемостью информации.
8
Продумайте дизайн обложки. Самое главное — чтобы текст хорошо читался и не спорил с изображением.
9
Создайте навигацию по статье. Если она длинная, добавьте якорные ссылки. Не оставляйте тупик в конце страницы — добавьте плитку с ссылками на другие статьи по теме.
