тильда что такое типограф

Вёрстка статьи в Тильде: разбор ошибок

Наталия Шергина, редактор и коммерческий писатель, специально для блога Нетологии поделилась своим опытом о том, как заверстать статью в Тильде и на что обратить внимание.

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

Тильда — это платформа для создания сайтов, интернет-магазинов и портфолио. Также она подходит для вёрстки статей и лендингов. Её главный плюс — простота использования. Тильда работает как конструктор: вы собираете страницу, используя блоки из библиотеки. Знать программирование не надо, работать с ней может каждый. Из минусов — вы ограничены стандартными блоками, а так называемый «Нулевой блок», который можно сделать самому, требует сноровки.

Сколько стоит

Бесплатно: 1 сайт, 50 страниц, 50MB места на сервере. На этом тарифе доступны не все блоки и нельзя подключить свой домен.

750 руб./месяц — тариф Personal: 1 сайт, 500 страниц, 1GB места на сервере. Доступ ко всем блокам и возможность подключить свой домен.

1250 руб./месяц — тариф Business: 5 сайтов в 500 страниц для каждого и 1GB места на сервере.

Для моей статьи хватило функций бесплатного тарифа.

С чего начать: шаблон или пустая страница

Страница выбора шаблона

Мне казалось, что проще взять готовый шаблон (например, лонгрид) и адаптировать его под свою статью. На деле же получилась ерунда. Моя статья про кемпинг в Калифорнии по содержанию и оформлению не то же самое, что лонгрид о бритпопе, который я пыталась переделать. Это тот случай, когда проще начать с пустого шаблона и добавлять свои блоки.

Шаблон лонгрида, который я планировала переделать под свою статью

Адаптировать шаблоны из библиотеки проще, если вы работаете над чем-то более конкретным, что просто статья. Например, у Тильды неплохие шаблоны для создания фотоотчета, блога фотографа, страницы-визитки для юриста и персонального гида.

Блоки и модули

Как учит Митя Моровов на курсе по копирайтингу, у каждого модуля статьи должен быть свой блок и стиль. Модуль — это элемент логического разделения страницы, а блок — физический блок в Тильде.

Есть соблазн налепить разные модули в один блок, что я и сделала в первый раз.

Блок TL02 «заголовок: 64»

Теоретически можно использовать этот блок не только для заголовка, но и добавить пару абзацев текста в раздел «описание». Но в этом случае нарушается модульность статьи, не говоря уже о вёрстке. Неправильный выбор блоков для заголовка и текста также негативно сказывается на индексации поисковиками — Гугл этого не любит.

Неправильно: использовать блок «заголовок» для чего-то кроме заголовка

Лучше: три модуля (заголовок, лид, фотография) — три блока

Что еще почитать по теме:

Расстояние между элементами

Мало определиться с блоками, нужно ещё правильно задать расстояния между ними и между их элементами: заголовками, подзаголовками, текстом, фотографиями и подписями к ним. Здесь не обойтись без правила внутреннего и внешнего и концепции «воздуха» (белого пространства).

Правило внутреннего и внешнего

Дизайнер Антон Жиянов пишет: «Универсальное правило внутреннего и внешнего в типографике: внутреннее ≤ внешнее.

Внутреннее — расстояние между буквами, внешнее — между словами.

Внутреннее — между словами, внешнее — между строками.

Внутреннее — между строками, внешнее — между абзацами или поля вокруг текста».

Согласно этому правилу, расстояние между блоками не может быть меньше расстояния между заголовком и абзацем, которые находятся внутри одного модуля. Но мой первый черновик был именно таким. Почитала советы Антона Жиянова, исправила:

Плохо: расстояние между двумя блоками меньше, чем расстояние между элементами внутри одного блока (между заголовком и текстом). Правило «внутреннего и внешнего» не соблюдено.

Лучше: «внутреннее», то есть расстояние между заголовком и текстом, меньше «внешнего», то есть расстояние между двумя блоками.

Вертикальное расстояние между блоками задаётся в настройках блока.

Лучше сразу определиться, сколько строк будет между смысловыми блоками. Мне проще придерживаться нулевого отступа снизу и задавать только верхний. Можно делать наоборот. Главное помнить, что при отступе и сверху и снизу, например, по 1.5 строки, суммарное расстояние между блоками будет равно трём.

Воздух (белое пространство)

Ещё одно ключевое правило типографики: между смысловыми блоками веб-страницы, а также слева и справа от контента, должно быть достаточно незаполненного пространства, или воздуха.

Read – WordPress theme. Много «воздуха», глазу приятно, ничто не отвлекает от чтения

Сайт сети магазинов «Техник». Мало незаполненного пространства, недостаточно «воздуха» вокруг контента.

В тильде 12-колоночная вёрстка. Отступа слева и справа от контента статьи задаются в настройках блока.

Если заполнить контентом все 12 колонок, текст будет тяжело читаться. Оптимально отступить хотя бы 1 колонку слева.

Плохо: нет отступов слева и справа, текст растянут на 12 колонок.

Лучше: отступ слева — 1 колонка, ширина текста — 8 колонок, ширина фактоида — 2 колонки. Остаётся одна колонка для отступа справа.

Что почитать по теме:

Шрифты

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

В Тильде шрифты задаются в настройках всего сайта, а не отдельной страницы.

Если предложенных Тильдой шрифтов вам недостаточно, можно подключить Google Fonts. Вот инструкция.

Моей ошибкой при выборе шрифтов и начертаний был недостаточный контраст между размером заголовка и текста. Для пары заголовок-описание сочетание размера 52px и 42px не создаёт контраста. Пара 62px и 32px смотрится лучше.

Плохо: слабый контраст.

При размере заголовка в 32px и размере основного текста в 20px заголовок не выделяется за счет контраста, а скорее сливается с текстом. Пара 42px и 20px работает лучше.

Плохо: заголовок 32px, текст 20px.

Лучше: заголовок 42px, текст 20px.

Я не знаю, по какой форме высчитывать размер кегля, а скорее делаю это «по-дилетантски» — на глаз. Проверяя наши работы на курсе, Дмитрий Моровов дал вот этот вариант: пара 12–14pt — плохая. 12–16pt — уместная. 12–18pt — хорошая. (Pt — от немецкого «Punkt» — это единица измерения кегля шрифта).

Если игнорировать принцип контраста, статья выглядит как скучная простыня. Глазу трудно зацепиться за элементы в тексте, теряется внимание, а значит страдает и качество чтения.

Что почитать по теме:

Фактоиды

Специального блока под фактоид нет, но можно адаптировать блок «CL05 Текст и сноска» в разделе «Колонки».

Шаблон, который подходит для фактоида или ссылки на полях.

В моём случае не удалось подтянуть фактоид еще на одну строку. Пришлось оставить так.

Мелкие косяки

Футер, прилипший к предыдущему блоку

Футер — это тоже блок, которому нужны отступы сверху и снизу. Проверьте, настроен ли нижний отступ у предыдущего блока, чтобы футер не казался «приклеенным» и сжатым.

Плохо: не задан нижний отступ у текстового блока. Футер прилип.

Лучше: задан нижний отступ в 120px.

Поддомен Тильды

По умолчанию поддомен моей статьи вот этот — http://project201667.tilda.ws. Не понятно, о чем страница и куда ведёт ссылка. Поддомен можно изменить в настройках сайта в разделе «Главное». Здесь же подключается ваш персональный домен.

Выравнивание всего текста по центру

Большинство дизайнеров и верстальщиков сходятся во мнении, что такой текст невозможно читать. Центрирование текста портит не только читаемость, но и вид всей страницы.

Выравнивание по центру.

Выравнивание по левому краю.

Что почитать по теме:

Слишком тонкое начертание

Не злоупотребляйте тонким начертанием. Если текст объёмный, воспринимать «сверхтонкий» шрифт тяжело. Более того, на скриншотах такое начертание отображается плохо (как на скриншоте ниже). Настроить размер и насыщенность можно в настройках сайта (не страницы!) в разделе «Шрифты и цвета».

Что еще пригодится

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Источник

Как правильно убрать висящие предлоги везде, где только можно?

May 12 · 4 min read

Тизер: не прибегая к Tab, пробелам и отбиванием новой строки. Где волшебная кнопка в Word и InDesign, куда жать в Tilda и Figma, и как во всем этом может помочь сайт Лебедева.

Висящие предлоги в Tilda.

В Тильде есть встроенный типограф. Вы просто выделяете текст, который нужно отредактировать, нажимаете на иконку, и все предлоги присоединяются к слову за предлогом, выглядит он вот так.

Когда вы выделяете какой-либо текст, этот значок появляется, вы можете выделить текст, кликнуть на этот значок, и висящие предлоги исчезнут, дефис превратится в тире, а “ ” в « ».

Вот этот на б ор символов: #nbsp; между предлогом и словом говорит о том, что предлог должен перейти на следующую строку вместе со смысловым словом.

Однако, Тильда иногда все равно пропускает предлоги, это может получиться по разным причинам, но я обязательно проверяю текст после типографа.

Что делать, если пропущен предлог, и он получается висящим? По сути типограф просто делает правильную разметку текста и показывает в коде, что тут между этой буквой и этой буквой пробел, но на разных строках они стоять не должны. Поэтому, никто не запрещает скопировать #nbsp; и вставить в нужном месте самостоятельно. Эффект будет таким же.

Почему не подходит перенос предлогов с помощью многократного нажатия пробела, Tab или переноса на новую строку с Enter?

Потому что длина строки изменяется от ширины экрана при адаптивном дизайне, и все многочисленные пробелы (Tilda, правда не дает ставить 100500 пробелов подряд) или отбитие новой строки Enter сотворят монструозную конструкцию из текста, как только ширина абзаца станет отличаться от той, в которой вы делали все исправления. На картинке ниже показано, как “карета превращается в тыкву”, если не использовать типограф, а делать так, как печатают документы все новоиспеченные секретари в Word =)

Типограф от Лебедева и висящие предлоги в Figma и Sketch.

Лебедев на своем сайте уже давно сделал типограф, и он молодец — и типограф и Лебедев =) ссылка: https://www.artlebedev.ru/typograf/

Заливаете текст, жмете кнопку и текст с разметкой ваш. Copy-Paste…

Может быть кстати, если вы сами делаете дизайн сайта в Figma или Sketch и ни сном ни духом про плагины.

Единственное — нужно немного настроить типограф, чтобы непечатуемые символы не были видны в вашем дизайне. Для этого вам нужно зайти в настройки типографа.

В настройкам нужно поменять пункты и обязательно нажать “сохранить”, потом перейти на окно типографа и опять оттипографить текст.

После этого предлоги будут связаны с последующими словами, но при этом непечатуемые символы не будут видны. Копируем текст и вставляем в нашу Figma или Sketch.

А что если после всего этого все равно не все предлоги привязались?

Такое случается, я не могу объяснить, почему, но такое бывает. это решается так же просто, как в случае с копированием #nbsp;

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

Висящие предлоги в Indesign

Плавно переходим на печать.

Собственно, все правила типографики перекочевали из печати в интернет, поэтому все эти проблемы давно решаются в программах для печати.

Помимо висячих предлогов необходимо привязывать союзы к следующему за ними слову, а частицы — к предыдущему. Нельзя отрывать единицы измерений от их значений, разрывать пробелом некоторые сокращения.

Как сделать в индизайне магию написано вот тут, статья не новая, но сейчас все работает точно так же, а я лучше все равно не напишу, поэтому просто прочитайте =)

Источник

Чем хорош сайт на Тильде? И почему не надо лезть в дорогостоящие решения

Не часто приходится замечать решения предложенные на платформе Tilda, а зря. Почему так? Что такое вообще Tilda и для кого она?

Сразу отметим, что данный материал ни в коем случае не является рекламным, а представляет из себя анализ Тильды, как решение для бизнеса.

По факту в более чем 50% случаев от всех задач бизнеса в медиа пространстве, ваш сайт не нуждается в том, чтобы он был разработан кодом. Не обязательно ставить такие условия где необходимо будет привлекать верстальщика или программиста. В таких проектах обычно нуждается средний или крупный бизнес, так как к тому времени у компании сформировалось представление и сложные многоуровневые задачи, которые решаются только таким же сложными решениями.

Tilda в свою очередь тоже не является панацеей и не возведена в абсолютное значение, можно пользоваться другими решениями похожими на Тильду.

Что чаще всего приходится слышать про Тильду?

Во-вторых, скорее всего меня могут закидать тухлыми помидорами, но серьезная компания не будет стараться «выгрызать» серьезный сайт за условные 20.000 рублей. Тут 2 пути: или компания не такая серьезная, или же у директора нет понимания, что такое сайт и для чего он нужен.

2. «Не, Тильда не подойдет, у нее слишком урезанный функционал…»
Да, вы правы, Тильда имеет большое количество ограничений, но как правило если вы обращаетесь к профессионалам то выбор данного решения будет не случайным.

Отсюда вы сразу сможете понять профессионализм человека с которым обсуждаете будущий сайт еще на этапе брифинга. И насторожиться в случае если вам не задали ни одного вопроса относящегося к вашим пожеланиям, но почему-то сразу назвали тильду.

Тогда скорее всего вы общаетесь с командой, которая работает только на этой платформе или же с непрофессионалом.

Теперь, когда мы прониклись всей серьезностью данного решения. Сформулируем реальную ситуацию и ряд задач с которыми пришлось столкнуться заказчикам.

Рассмотрим параллельно 2 ситуации, которые могут показаться разными, но по факту объединены одним и тем же.
1. Заказчик не имеет серьезного бюджета, но ему срочно необходим небольшой сайт для мероприятия, которое стартует уже в конце недели.
2. Заказчик имеет серьезный бюджет, но у него отсутствуют амбициозные задачи и в целом планы на будущий сайт. Сроки не превышают 14 дней, но для простоты понимания давайте приведем также к 7 дням.

Задача

По факту перед нами стоит задача, как сделать симпатичный MVP-проект, в срок не превышающий 7 дней.

«Да, давайте здесь не будем заострять внимание и формировать представление, что вся web-разработка такая же быстрая и не затратная. В данной ситуации разбираются частные случаи, чтобы показать, что даже казалось бы в безвыходной ситуации есть решение»

День 1. Подбор референсов и обсуждение проекта

Для экономии времени и ресурсов приступаем к аналитике, но акцентируем внимание только на самых важных моментах, а именно:

какова будет общая концепция продукта;

какие есть конкуренты и что они из себя представляют;

Что нравится целевой аудитории;

что из референсов может лучше всего подойти.

Конец дня ознаменовывается обсуждением выбранных решений с заказчиками. На каждый из этапов тратим примерно по 2 часа.

День 2. Прототипирование

День 3-4. Дизайн

На данном этапе делаем акцент, выделяя под него 2 суток. Так как он является самым основным в рамках работы на Тильде. Определяемся с 3 наиболее интересными и продуманными работами в данной нише, предварительно все это согласовав с заказчиками. Первый день занимает подбор и поиск будущих элементов сайта, а именно:

иные визуальные элементы, которые нельзя отнести к чему-то конкретному, но от этого они не становятся менее важными

Все должно быть объединено общей идей, сочетаться между собой, что также отсылает нас к проработке первичной логики по которой уже идет дальнейший отбор элементов. На чем первый день удачно заканчивается. Собрав бэкграунд элементов, вспоминаем о тех исходных работах, которые мы взяли, как ориентир. После чего объединяем удачные идеи этих сайтов с теми элементами, что мы нашли, находясь в свободном плавании на ресурсах для дизайнеров.

День 5. Верстка

День 6. Подключение домена

День 7. Видео инструкции и обучение заказчика

Для этого записываем видеоинструкции:

как добавлять контент;

Как редактировать текст и менять изображения;

Как пользоваться панелью администратора

Где они уже самостоятельно сможет все настроить, повторяя шаги из видео.

Вывод

самозанятые или у вас небольшой стартап, когда нет уверенности в бизнес-модели;

Экономия на более чем половине команды разработчиков, отсекая программиста и верстальщика. Используя при этом 2-3 пары рук квалифицированных специалистов, позволяет получить продукт за весьма скромный бюджет, досягаемый для многих, кто развивает свое дело.

Источник

Чем хорош сайт на Тильде? И почему не надо лезть в дорогостоящие решения

Публикация составлена совместно с командой Годунова.

2. «Не, Тильда не подойдет, у нее слишком урезанный функционал. »

Рассмотрим параллельно 2 ситуации, которые могут показаться разными, но по факту объединены одним и тем же.
1. Заказчик не имеет серьезного бюджет, но ему срочно необходим небольшой сайт для мероприятия, которое стартует уже в конце недели.
2. Заказчик имеет серьезный бюджет, но у него отсутствуют амбициозные задачи и в целом планы на будущий сайт. Сроки не превышают 14 дней, но для простоты понимания давайте приведем также к 7 дням.

Задача
По факту перед нами стоит задача, как сделать симпатичный MVP-проект, в срок не превышающий 7 дней.

День 1. Подбор референсов и обсуждение проекта
Для экономии времени и ресурсов приступаем к аналитике, но акцентируем внимание только на самых важных моментах, а именно:

Конец дня ознаменовывается обсуждением выбранных решений с заказчиками. На каждый из этапом тратим примерно по 2 часа.

День 3-4. Дизайн
На данном этапе делаем акцент, выделяя под него 2 суток. Так как он является самым основным в рамках работы на Тильде. Определяемся с 3 наиболее интересными и продуманными работами в данной нише, предварительно все это согласовав с заказчиками. Первый день занимает подбор и поиск будущих элементов сайта, а именно:

Источник