Как красиво оформить текст на сайте: Как оформить текст на сайте

Как оформить текст на сайте

Сегодня мы разберем подробно вопрос о текстах на сайте и их оформлении: чем нужно руководствоваться при форматировании и оформлении текста на сайте, если хотите выгодно выделить проект из массы одинаковых и похожих друг на друга веб-сайтов?

Почти все сайты похожи между собой. Речь не только о дизайне, но и об оформлении контента. Тексты берут  в основном на биржах, где они заказываются по одному шаблону. Кто-то пишет материал самостоятельно, как я, но такое случается в редких случаях. В результате большинство текстов выглядят совсем однообразно и неинтересно.  Казалось бы,  это не мешает создателям проектов продвигать свои сайты, но важно помнить — качественное и правильное оформление текста очень повышает читабельность посетителями, а не роботами, а благодаря этому мы повышаем поведенческие факторы. Такой сайт быстро обрастет своей аудиторией.

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

Темы материала

Правило 1. Привлекательные заголовки и подзаголовки

Вы должны понимать, что без них не должна обходиться ни одна статья. «Подзаги» ( подзаголовки) выполняют функцию ориентира в тексте, и  улучшают «вертикальное считывание». Так называют процесс, когда пользователь может быстро пробежаться глазами по странице и понять о чем здесь собственно идет речь.

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

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

Правило 2. Одна мысль — один абзац

Забудьте о простынях текста – никому не интересно читать длинные полотна букв, сплошных строчек без просвета и иллюстраций. Обязательно разбивайте статью на небольшие абзацы. Давно известно, что в подобной форме любой материал намного легче воспринимается читателем.

Придерживаемся правила: «одна мысль — один абзац».  Фишка в том, что вы не должны спугнуть читателя. Ведь мелкие шрифты, монотонные сплошные формы, большие абзацы (а тем более сплошной текст без абзацев вообще) лишь отпугивают читателей.

Правило 3. Маркированные списки, перечни, нумерация

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

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

При SEO-оптимизации текста, вы можете включать ключевые слова в короткие списки, чтобы передать слову больший вес, чем в абзаце.

Правило 4. Обязательный визуальный контент

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

Правило 5. Используйте курсив и жирный шрифт

Разнообразные способы выделения текста позволяют автору заострить внимание на важных моментах, а иногда и придать необходимый эмоциональный окрас тексту. Использовать подобные выделения желательно как раз для привлечения и удержания внимания читателя, а не для «роботов», поисковой оптимизации.

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

Правило 6. Оптимизируйте тексты для SEO продвижения

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

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

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

Правило 7. Источник информации

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

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

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

10 правил красивого и правильного текста

Красивая ягода

Клубника с привлекательного ракурса

Этой?

Большой выбор клубники

Много ягод клубники в лотках

Или одной из этих?

Большинство людей выберет первый вариант. Это объясняется тем, что на этой картинке изображена одна красивая ягода, преимущества которой подчеркнуты удачным ракурсом. На самом деле, клубника в лотках не хуже первой, но из множества доступных вариантов выбрать один всегда сложно. Этот пример идеально накладывается на принципы оформления статей на сайте. Если контента много, то не значит, что его будут читать. Использование непривычных шрифтов и цветовых решений не гарантирует привлечения внимания. Поэтому важно знать, как правильно оформить текст на странице, иначе процессы создания контента и продвижения сайта не будут эффективными.

Уже хотите узнать, как сделать текст читаемым? Для этого нужно просто ознакомиться с нашими рекомендациями по типографике и правилам написания текстов.

10 базовых правил оформления контента на сайте

1. Правильно подобранный размер шрифта значительно улучшает восприятие материала. Пользователи могут, но точно не будут настраивать отображение с помощью браузера. Чтобы у посетителей не возникало желания перейти на более приятный ресурс, стоит выбрать размер шрифта на сайте в пределах 12—14.
2. Страница не должна быть полностью загружена. Чрезмерная плотность материалов утомляет и вызывает отторжение. Если нужно опубликовать большой материал, то стоит «поиграть» с расположением текста на странице. Используйте отступы, заголовки, короткие списки и другие методы, которые создают островки пустоты возле материала. Это поможет минимизировать возможное смущение от объемного контента. А еще глаза пользователя будут меньше утомляться.
3. Уже давно нужно отказаться от тотального подчеркивания слов и массированного использования гиперссылок в текстах. Современные пользователи очень скептически относятся к подобным визуальным акцентам. Правильное оформление текста не предусматривает частого использования различных вариантов выделения слов или предложений, так как это сильно раздражает и сбивает с мысли. Если нужно что-то обозначить, то можно красиво выделить текст с помощью курсива.
4. Чтобы визуально не было много текста на станице, контент нужно «разбавлять» изображениями. Сегодня пользователи плохо воспринимают материалы без визуального сопровождения. Важно подбирать релевантные и качественные картинки, которые помогут лучше разобраться в предложенном материале. Лучше использовать изображения одинакового размера. Обязательно должна присутствовать общая для всей страницы логика расположения графического контента.
5. Удачный заголовок — это важное условие успешности текстового материала. Для заголовка стоит выбрать размер кегля от 14 до 20. Для совсем коротких формулировок типа «Спорт — это сила» можно использовать и более крупный шрифт.
6. Заголовок никогда не завершается точкой, но восклицательный и вопросительный знак можно использовать.
7. Сконцентрировать внимание читателя на важном фрагменте текста можно с помощью курсива, полужирного начертания или верхнего регистра. В отдельных случаях допускается «игра» со стилями текста и шрифтами.

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

   Оптимальный размер строки варьируется в пределах от 50 до 75 символов

9. В типографике очень важная роль уделяется сочетанию цвета фона и шрифта. Есть цветовые решения, которые очень сложно воспринимаются человеческим глазом. К примеру, ярко-синий и черный практически сразу сливаются при чтении. Использование инверсии типа белый текст на черном фоне тоже не рекомендуется. Также нужно отказаться от слишком контрастных цветовых комбинаций.

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

10. Работа с типографикой нужна не только для красивого визуального оформления. Она должна проводиться для того, чтобы расставлять правильные акценты и упрощать восприятие. Не форматируйте ради форматирования, а помогайте пользователям.

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

Теги

Вам также будет интересно

Гайд по визуальному оформлению текста

Все говорят: добавляй в тексты списки, разбивай на абзацы, разбавляй картинками и прочее, прочее, прочее. Это хорошо, но советы слишком общие, поэтому я подготовил подробный гайд о том, как оформлять статьи, чтобы их удобно было читать.

Потому что неважно, насколько у вас крутой контент и насколько крутая у вас информация. От вас все равно уйдут, если текст будет плохо оформлен. Просто потому, что никто не станет вчитываться и не узнает, что у вас было что-то полезное.

Как оформлять текст

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

Занимаемся разработкой фирменного стиля: повышаем узнаваемость бренда. Подробнее

Оглавление

Оглавление нужно только в том случае, если материал получился длинным. Будет странно, если вы добавите его для текста на 2000 символов.

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

Оформлять оглавление нужно в виде ссылок на элементы страницы. Для этого каждому подзаголовку прописывается идентификатор, а в ссылке в оглавлении ставится якорь на него. Выглядит это так:

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

Если нажать на такую ссылку, экран пользователя переместится так, что выбранный элемент будет вверху экрана. По умолчанию нет никакой анимации – ее можно прописать через JavaScript.

Предложения и абзацы

Предложения в тексте должны быть разной длины – так у него будет ритм. Одно предложение короткое. Второе чуть подлиннее, но не слишком. А третье такое длинное, что помещается на несколько строк, а понять его могут только любители Толстого (шутка).

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

Абзацы, как и предложения, должны быть разной длины.

Нет каких-то точных цифр, вроде: предложения должны быть по 3–5 слов, а абзацы по 350 символов или 4–5 строк. Не задумывайтесь о таких вещах – сконцентрируйтесь лучше на смысле предложений и слов.

Нумерованные и маркированные списки

Списки используются, чтобы не перегружать предложения перечислениями. В списках можно:

• перечислить преимущества или свойства предмета,
• рассказать об этапах какого-нибудь процесса,
• в нескольких пунктах описать вывод из чего-либо.

Маркированные списки должны быть от 3 и более пунктов. Короткие списки выглядят нормально, только если в них несколько предложений. А вот нумерованные списки хорошо смотрятся уже от 2 пунктов.

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

Информация в списках легче воспринимается, а читают их охотнее. Даже если человек просто пробегается по тексту, есть большая вероятность, что он прочитает список.

Если пункты состоят из нескольких предложений, первое можно выделить жирным. Например, если вы составляете список рекомендаций с пояснениями:

• Мойте руки перед едой. Мыть руки нужно, чтобы…
• Не перебегайте дорогу на оживленных участках трассы. Иначе вас может сбить машина…
• Выделяйте первое предложение жирным. Так вы привлечете больше внимания, особенно, если пункт занимает несколько строк.

Кто-то говорит, что нельзя размещать списки близко друг к другу или к подзаголовкам, но я считаю, что это допустимо. А вот заканчивать ими текст не стоит, потому что создается ощущение недосказанности.

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

• собрать информацию,
• проанализировать ее,
• проверить факты,
• написать черновик и так далее.

В остальных случаях ставится точка.

Таблицы, графики и инфографика

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

Для рытья котлована А потребовалось 5 рабочих, которые вырыли его за 2 суток. Над котлованом Б трудилось вдвое больше рабочих, которые управились за такой же срок. Котлованы равны по объему (30 м

3), но роль сыграла разница в типе почвы и местности – каменистая для котлована Б и грунтовая для котлована А.

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

	Котлован А	Котлован Б
Рабочие	5	10
Срок	2 суток	2 суток
Объем котлована	30 м3	30 м3
Тип почвы	Грунтовая	Каменистая

(Не кидайтесь тапками, я не строитель).

Одного взгляда достаточно, чтобы понять, что тут к чему.

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

Врезки

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

Мы занимаемся контент-маркетингом с 2010 года. Создаем контент, который вызывает отклик у аудитории и приносит поисковый трафик. Подробнее

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

Изображения, аудио и видео

С помощью этих элементов можно добавить в текст наглядности. Проще один раз что-то показать, чем все время описывать. Например, Стивен Кинг рассказал о правиле № 1: «Показывайте, а не рассказывайте»:

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

Аудио и видео тоже положительно влияют на материал. Например, я добавил два файла в статью об аудиоредакторах, чтобы показать их в действии. Файлы можно загружать на свой сайт и воспроизводить при помощи HTML5 – для этого используйте тег «<audio>».

Видео можно вставлять с YouTube, Vimeo и других подобных хостингов. Хорошим тоном будет запускать видео с нужного момента, если оно большое, а вам нужно показать только отрывок.

Полезная информация уже с 0:00

Все три элемента желательно подписывать. К изображениям можно придумать шутку или просто дать пояснения. В подписи к аудио или видео должно быть написано, что увидит или услышит пользователь – исключение можно сделать, если содержание видео понятно из превью или вы описали его в тексте.

Не делайте эти элементы автовоспроизводимыми. Страница будет потреблять больше ресурсов, а пользователей это будет раздражать.

Подзаголовки

В классическом копирайтинге подзаголовки ставили ради подзаголовков. Порой они даже не описывали, что будет в следующей части текста. Так делать не стоит – вместо этого подзаголовки должны показывать читателю, что его ждет.

В этой статье подзаголовки смысловые, но вы можете добавлять интригу или какую-то важную мысль. Например, можно назвать заголовок «Как оформлять подзаголовки», а можно «X примеров оформления подзаголовков» или «Подзаголовки устарели – срочно перестаем их использовать».

Выделение текста

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

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

Маркер можно использовать для выделения того, что нужно запомнить (как в студенческие годы). Сейчас это почти не используется в интернете, я и сам использую этот инструмент очень редко.

Шрифт другого цвета нужен для выделения критической информации – правила техники безопасности, важные условия сотрудничества и так далее. Для этого можно использовать любой цвет кроме синего, потому что так обычно выглядят ссылки. По этой же причине нельзя подчеркивать текст.

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

Ссылки и акронимы

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

• Использовать анкоры – не вставляйте ссылку как текст, лучше прикрепите ее к какому-нибудь слову или предложению. И это слово должно давать пользователю понять, куда он попадет. Например: «Посмотрите наш вебинар по проверке текстов».
• Подчеркивать – сложно найти ссылку, если она не подчеркнута.
• Анимировать – при наведении мыши на ссылку, курсор должен меняться на руку с указательным пальцем (В CSS это делается так: cursor:pointer;). Это необходимый минимум, который прописан в браузерах по умолчанию, но вы можете прописать, чтобы подчеркивание исчезало при наведении.
• Прописывать атрибут title – в этом атрибуте прописывается текст, который всплывает при наведении на ссылку. В него можно добавить пояснение или что-нибудь забавное.

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

Недостаток акронимов и атрибута title в том, что для отображения его содержимого нужно навести курсор мыши на элемент. То есть на мобильных устройствах это работать не будет.

Спойлеры

Спойлеры – это элементы, за которыми можно скрыть текст. Их любят использовать на страницах F. A. Q. Выглядит это так:

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

Смайлики или эмодзи

Why so serious? 🙂 В статьях можно использовать смайлики, но нельзя ими злоупотреблять. Также они плохо подойдут тем, кто уже долго ведет блог, и ни разу не использовал смайлики – слишком резкое изменение.

Добавляйте такие элементы очень осторожно.

Посты из социальных сетей

Мы уже привыкли видеть в статьях скриншоты постов, но социальные сети дают возможность вставлять посты прямо на сайт – с ним можно будет взаимодействовать: оставлять комментарии, ставить лайки, репостить и так далее.

У такого метода есть свои плюсы: не нужно делать скриншоты, не нужно переживать о качестве текста и так далее. Но есть и минус – нужно подключать дополнительные скрипты на сайт, а это может замедлить загрузку. А еще с постами нельзя будет взаимодействовать, если их удалят или если «упадет» социальная сеть.

В принципе, если вы добавляете 1—2 поста на страницу, разница в скорости загрузки будет несущественной.

Разные страницы

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

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

Оформление посадочных страниц вообще устроено особым образом, поэтому ограничиваться советами из этой статьи не стоит.

12 примеров великолепных лендингов: черпаем вдохновение у профессионалов

Есть и правила по оформлению карточек, страниц с контактами, ошибкой 404 и так далее.

Дизайн

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

• Темный шрифт на светлом фоне. Не используйте черный или белый цвета, потому что они создают слишком большой контраст – от этого быстро устают глаза. Фон лучше делать однотонным – без узорчиков и прочего.
• Размер шрифта 14—18 пикселей, межстрочный интервал примерно 150 %.
• Для мониторов лучше подходит шрифт без засечек.

Это необходимый минимум по дизайну, но на самом деле рекомендаций гораздо больше.

Распространенные ошибки

Чаще всего текст вообще не оформляют. Но посмотрите, какие чудеса творит оформление:

Этот текст легко читать, потому что в нем есть выделения, подзаголовки и абзацы. А ведь написан он всего лишь одним предложением.

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

Кто-то забывает, что между элементами должно быть достаточно места:

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

А какие ошибки в оформлении встречали вы? Поделитесь ими в комментариях – самые интересные мы добавим в статью!

Правила оформления текста на сайте

Содержание:

Как правильно оформить текст на сайте

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

И наоборот, если чтение вызывает неприязнь вследствие постоянного напряжения зрения (мелкий шрифт, резкие цвета), это увеличивает шанс перехода посетителя на сайт, который будет для него более удобным. 

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

Правильное оформление статей на сайте

Для того чтобы Ваш сайт мог выделиться среди сотен тысяч других Вам придется изрядно потрудиться над его дизайном и контентом.

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

 

Чтобы избежать подобных ошибок, рекомендуем изучить основные правила оформления текста на сайте:

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

   Поэтому не стоит экспериментировать в этом плане. Правила оформления текста на сайте рекомендуют выбирать наиболее удобные для чтения размеры шрифтов (12–14). 

   
    
    

2. Пространство вокруг текста улучшает поведенческие факторы посетителей. В частности, глубина просмотра зависит от наличия пустого околотекстового пространства, которое расслабляет глаза читателя.

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

   Пускай по бокам будет меньше рекламы и больше приятного взгляду белого цвета. Также можно увеличить разрывы между абзацами для еще большего разбавления.
    

3. Выделение полужирным и курсивным начертанием, а также подчеркивание следует использовать только там, где оно действительно необходимо по смыслу. Структура текста для сайта должна быть максимально естественной.
   Эти методы выделения хорошо подойдут для акцентирования внимания на важных фразах и предложениях. 

   А вот выделять все ключевые слова жирным – пережиток прошлого. Это слишком бросается в глаза.

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

    

4. Изображения для разбавления текста играют очень важную роль в удобстве чтения. При этом нельзя забывать об их смысловой нагрузке, которая должна точно соответствовать тексту, окружающему картинку.
    
5. Контрастность текста зависит от выбранного фона страницы. Если не хотите использовать стандарт (черный текст, белый фон) можно оформить текст на сайте белым цветом на черном фоне. Это не нарушит правила оформления текста на сайте, но все же может отпугивать большинство посетителей. Такой вариант значительно проигрывает более привычным. 

    

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

6. Оптимальные размеры абзацев позволяют оформить текст на сайте таким образом, чтобы отображенная в них информация усваивалась наилучшим образом и создавалось впечатление легкости чтения. Лучше всего прописывать не более 5–7 строк. 

    

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

Еще несколько рекомендаций напоследок

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

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

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

Спасибо за прочтение этого материала! Не забудьте поделиться с теми, кто может нуждаться в нем!

 

Правильное оформление текстов и статей на сайте

Содержание статьи

В информационных проектах оформление контента важно, потому что если максимально облегчить пользователю чтение и усвоение информации, если сделать так, чтобы ему было интересно читать и не хотелось закрыть вкладку — если все это удастся, то это ключ к успеху, гарантия хороших поведенческих факторов (а их роль в ранжировании со временем будет только расти). Пользователю не интересно однообразие. Контент надо разнообразить, чтобы заострять пользователя на всё новых и новых «фишках» по мере его продвижения к концу статьи. Поэтому при выкладке текста на сайт требуется его как следует оформить.

Я не буду обсуждать здесь требования, которые должны быть выполнены еще копирайтерами и озвучены в моей редакционной политике (абзацы, списки и так далее). Речь только о финальном оформлении. И сразу же хочу отметить, что для информационных сайтов на WordPress (а именно по отношению к ним и наиболее актуальная данная статья) абсолютный мастхэв — это плагин Shortcodes Ultimate. Его суть в том, что вы можете моментально сгенерировать какой-нибудь код, который пригодится при оформлении текста. После установки плагина при редактировании поста появляется такая кнопка:

А при ее нажатии всплывает такое окно:

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

Заголовки

Нужно, чтобы даже пользователь мог различить h2 и h3. Если они красиво оформлены — отдельным шрифтом с засечками, с красивой подложкой и так далее — замечательно. Вот пример:

Мы здесь видим, что h2 имеет подложку и вообще красиво отличается от h3. А на этом сайте даже позаботились, чтобы и h4 от h3 можно было отличить:

Это сайты из топа по запросу [как вложить деньги чтобы получить прибыль]. Вот тоже простой, но хороший h3, который под многие тематики подойдет:

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

Списки

На этой же стадии можно позаботиться и об оформлении списков. Вот на такие списки приятно смотреть:

В идеале маркированные и нумерованные списки различаются друг от друга. Они должны выглядеть красиво, выделяться из текста. Каждый пункт списка заканчивается знаком «точка с запятой», кроме последнего пункта — он оканчивается точкой. С помощью Shortcodes Ultimate можно делать списки типа таких:

Выбор иконок там большой — можно найти тематические по отношению к тексту и использовать их.

Изображения

На стадии разработки дизайна мы думаем о том, какие рамки должны быть у изображений и как будут выглядеть подписи к ним. Вот пример, где об этом позаботились:

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

• Обтекание картинки — о том, как это делается, читаем на htmlbook;
• Подпись к картинке.

Ну и, конечно, надо подобрать эти самые картинки в соответствии с моей инструкцией. Обычно делаем одно изображение на 1500 символов текста. В Title картинки пишем, что изображено на ней, в alt и подписи — ее описание (альт и подпись могут быть идентичными).

Можно делать не просто изображения, а слайдеры. Пример их использования на киносайте:

Слайдеры можно делать с помощью плагина Meta Slider. Также изображения можно оформлять галереями или каруселью.

Содержание

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

Также пример стандарта оглавлений можете глянуть на Википедии. Есть и более интересные решения. Вот например раскрывающееся содержание на javascript:

Но в общем случае для информационного сайта на WordPress хватает функционала плагина Table of Contents. Его просто надо настроить как следует после установки, а дальше он автоматически будет формировать содержания для статей, нужно будет только вставить шорткод , и на его месте в статье появится содержание.

Логическое выделение текста

Общая рекомендация тут — не более 1 выделения жирным (используем только тег strong), курсивом (em) или цитатой (blockquote) на 2000 символов без пробелов. Подчеркивание для выделения текста НЕ используем. Логическое выделение не должно быть похоже на seo юрского периода, когда жирным выделяли ключевики. Выделяем предложение целиком, это должна быть какая-то важная мысль, но желательно без ключевого слова.

Видео

В статью надо обязательно добавлять видео. И, как ни странно, чем оно длиннее, тем лучше. В фильтрах Ютуба (используем в подавляющем большинстве случаев именно Youtube) выбираем следующие:

Если ничего не находится, опираемся на два требования — как можно более длинные видео и как можно более качественные. Заголовки к видео не нужны.

Цитаты

[su_pullquote]В Shortcodes Ultimate можно сделать и такую вот цитату с обтеканием[/su_pullquote]Цитата — это не обязательно цитирование кого-либо. Это может быть также особо важная выдержка из текста, как в журналах. Во многих из них, если вы замечали, выделяют ключевую мысль из текста и оформляют в рамку и крупный шрифт. Можно делать не только цитаты, но и, например, врезки. Некоторые вебмастера делают вместо цитаты, например, совет:

Цитата начинается с большой буквы и заканчивается точкой.

Все, что указано выше — обязательно надо использовать по возможности во всех статьях. Далее же идут дополнительные, необязательные пункты, которые просто как вариант.

Карты

Если в тексте есть какие-то навигационные указания — не стесняемся вставлять код Яндекс карт с помощью специального конструктора.

Вкладки

[su_tabs][su_tab title=»Первая вкладка»]Средствами Shortcodes Ultimate также можно делать такие вкладки[/su_tab]
[su_tab title=»Прочти еще тут»]Ссылки не работают[/su_tab]
[su_tab title=»Можешь тоже прочесть»]Но те, на которые кликают, работают)[/su_tab][/su_tabs]

Таблицы

Нужны не всегда и их сложно сделать, но в статьях, где идет сравнение, выбор лучшего варианта и так далее они нужны. И они дают реальный плюс. Отличные таблицы получаются за счет плагина TablePress, вот например:
[table id=1 /]
Как видите, тут даже сортировка есть.

Символы Юникод

В тексте можно использовать (если в тему и без чрезмерного усердия) символы Юникод — то есть примерно такие: ☣, ♕, ✪ и так далее. На http://unicode-table.com/ru/sets/ и http://copypastecharacter.com/all-characters их куча. Вообще высший пилотаж — с их помощью формировать сниппеты, повышая кликабельность. И лучше использовать те символы, которые отображаются в выдаче. Какие же из них отображаются?

[su_dropcap]G[/su_dropcap]oogle (это была буквица — еще один инструмент Shortcodes Ultimate) прикрыл свой инструмент rich snippets, поэтому единственный способ проверить, будет ли отображаться символ в выдаче — это скачать Screaming Frog SEO Spider, просканировать страницу и посмотреть в самом низу окна программы вкладку SERP Snippet. Её можно редактировать и вставлять Юникод символы — если они будут отображаться там, то скорее всего, их будет понимать Google, и, вероятно, Яндекс.

Спойлеры

[su_spoiler title=»Нажмите, чтобы прочесть» style=»fancy» icon=»plus-square-1″]Если есть контент, который пользователи могут и не хотеть прочесть, то скрывайте его в спойлер.[/su_spoiler]

Горизонтальные линии

Такими линиями мы разбиваем текст на разные логические блоки. Делается с помощью тега hr. Вот он:

---

А вот разделитель из шорткода:
[su_divider]

Разбиение на колонки

[su_row]
[su_column size=»1/2″]На том же htmlbook описано, как надо разбивать текст на колонки. Однако это уже если совсем больше нечего хотеть.[/su_column]
[su_column size=»1/2″]В принципе это опять-таки решается за счет Shortcodes Ultimate.[/su_column]
[/su_row]

Контекстные ссылки

Ну и, конечно, последние, но не по значению — это контекстные ссылки. Делайте перелинковку для людей! На этой позитивной ноте завершаю обзор.

Оформление текста и статьи для сайта онлайн

Покажу, как нужно правильно использовать красивое оформление текста статей и постов для сайтов онлайн.

Будет много полезных советов и идей с различными примерами.

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

Научу вас работать со шрифтами, абзацами и акцентами в тексте.

И напоследок обсудим, что делать с иллюстрациями к тексту. Как и где их нужно подбирать.

Дам несколько хороших идей по их использованию в записях.

Также будет много других правил по оформлению графических элементов текста.

Почему важно использовать правильное оформление текста

Потому что, несмотря на смысл текста, люди на него сначала смотрят, а только потом начинают читать.

Когда заходим на любой сайт, то сначала обращаем внимание на то, как он выглядит. Только после этого начинаем читать.

Если там что-то раздражает, то мы все равно закроем такой сайт. И даже самый полезный контент в этом деле нас не удержит.

Понятно, что только одно оформление текста не гарантирует, что контент будет прочитан. Нужно понимать, что оформление идет рука об руку со смыслом.

Можно написать классный текст и никак его не оформить. В таком случае, этот материал прочтут только преданные читатели.

А если текст оформлен классно, но со смыслом проблема, то можно потерять репутацию. Поэтому одно оформление вас точно не спасет.

Все идет в тандеме!

Одна сторона, это смысл, а другая — оформление. Когда все накладывается друг на друга, то получается хороший текст.

Есть еще и третья сторона!

Это SEO и SMM продвижение. Будет недостаточно просто опубликовать материал на сайте. Еще важно чтобы люди смогли легко найти этот контент в интернете.

Иначе толку не будет!

Как видите, сторон много. Однако здесь мы будем рассматривать именно оформление текста онлайн. Ниже можно увидеть текст для лэндинга.

Это не готовая верстка. Это просто оформленный текст в документе. Копирайтер сдает его в таком формате оформления.

А теперь представьте, что, если бы это написано сплошным полотном текста. В таком случае, такой контент не передаст читателю нужные эмоции.

4 главных стандарта любого текста

В основе оформления текстов лежат четыре стандарта.

• притягательный заголовок
• хорошее форматирование
• подзаголовки и яркий финал

Информативность

• полезные факты и инструкции
• минимум воды
• работать не за знаки, а на совесть

• аккуратность с акцентами
• схемы и иллюстрации
• осторожность с цветом и шрифтами

Решение поставленной задачи

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

Что такое удобный текст? Это значит, что его комфортно визуально воспринимать. Посмотрите на пример ниже.

Согласитесь, что такой текст не хочется читать. Его хочется быстрей закрыть.

Текст еще должен быть гармоничным.

Иногда люди немного увлекаются, стараясь сделать текст максимально удобным. В итоге, теряется гармония и получается такое безобразие.

Все написано курсивом и в разном цвете

Как видите, это уже не гармония.

Возможно, что это стало немного удобно, когда массив текста разбили на абзацы. Однако проще воспринимать контент не стало.

Более того, стало еще хуже!

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

Вот еще один плохой пример. Здесь на черном фоне очень много текста.

Да, черный фон с белым текстом имеет место быть. Потому что такие вставки хорошо разбавляют контент и привлекают внимание.

Но это работает, если основной фон белый, а шрифт темно-серый. Однако если весь сайт идет в данном формате, то такой текст читать очень трудно.

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

Теперь переходим к пошаговой инструкции. Она поможет вам сделать красивое и при этом правильное оформление текста в онлайн. Причем делать удобно и гармонично.

Эти советы можно использовать в статьях для сайтов и блогов. Также хорошо работает и для социальных сетей. Например, оформление постов в Инстаграм, ВК, Facebook или Телеграмм.

Для этого нужно пройти пять основных шагов. Ниже мы их рассмотрим более подробно.

Шаг 1. Облегчаем основной текст статьи на сайте и блоге

В этом шаге будем делать все, что сможет облегчить текст.

Подбираем подходящий шрифт

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

Для текстов в интернете используют шрифты без засечек. К примеру, Arial или Verdana.

Шрифт, который часто стоит в документах по умолчанию, это Times New Roman. Однако для интернета он не подходит!

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

В онлайн такие засечки раздражают!

В Times New Roman засечки выполнены в виде дополнительных палочек на буквах. Они как бы впечатывают букву в лист. Поэтому такой шрифт хорошо подходит в печати.

А в онлайн за счет этих засечек меняется толщина букв. Также сами засечки очень тонкие. В результате, глаза за монитором устают намного быстрее.

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

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

Не используем красную строку для электронных текстов

Красная строка — это когда делаем отбивку абзаца. Но это только хорошо для оффлайн. Для онлайн такое начертание не подходит.

Получается, что мало воздуха!

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

Поэтому в онлайн отбиваем новую строку отступом между абзацами, а не первой строки. То есть все строчки начинают в одном месте.

Как правильно отделять абзацы в тексте

Сами абзацы можно отделять по-разному. Например, разделять пустой строкой. То есть написали абзац, спустили на новую строку и еще раз спустили. В итоге, сделали отбивку одной строкой.

Пустая строка

Есть еще отделение интервалами.

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

Зачем отделять абзацы?

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

Что использовать — пустую строку или отступ интервалов?

Все зависит от того, куда пишите. Для начала нужно узнать, какая будет верстка у сайта.

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

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

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

Однако если пишем для сайта с определенной версткой, то может быть совсем иначе.

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

Поэтому рекомендую делать пустую строку.

Но все же нужно разговаривать с клиентом сайта. Потому что иногда актуально поставить именно отступ между абзацами.

Интервалы

Интервал — это отступ между строками. Если поставите полуторный интервал, то между всеми строчками будет одинаковый размер.

Но нам нужно, чтобы строки были вместе, а между абзацами был отступ. Отступ ставится перед абзацем.

Если абзацев и интервалов нет, то это плохо!

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

Без абзацев и интервалов

А вот еще плохой пример с полуторным интервалом.

Полуторный интервал

Здесь расстояние между строчками одинаково. Это тоже плохо потому что не отделяет абзацы друг от друга.

Причем полуторный интервал, это довольно много. Иногда люди не любят одинарный интервал и ставят 1.2 или 1.3.

Но это уже нюансы верстки страницы сайта. Главное, что вы должны отбить абзацы.

Если есть отступ перед абзацем, то это хорошо.

Есть отступ перед абзацем

Посмотрите, здесь есть небольшой отступ перед абзацем.

Его даже можно сделать немного больше. Видно, что эти строчки идут плотнее, а перед ними имеется небольшой промежуток.

А вот хороший пример. Здесь идет отбивка пустой строкой. Как видно, она визуально понятнее.

Отбивка пустой строкой

Здесь четко видны разные группы мысли. Такой текст удобно читать.

Почему текст нельзя выравнивать по ширине

Некоторые люди любят выравнивать текст по ширине. Кажется, что это красиво смотрится. Но так обычно делают в книгах.

Выравнивание текста по ширине и по левому краю

В печатном деле переносы используются.

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

В итоге, теряется мысль и быстро устают глаза.

Если мы делаем выравнивание по левому краю, то разница между словами будет везде одинаковой.

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

Не говорю, что нужно совсем избавляться от таких знаков. Просто в некоторых случаях есть свои исключения. Переносы, как раз к ним и относятся.

Используем небольшие абзацы

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

А так небольшие абзацы легче проглатываются. Многие классики писали большими абзацами. Но не забываем, что мы пишем в online. Поэтому тут абзац на весь экран воспринимается тяжело.

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

В итоге, ваша задача, заставить человека прочитать текст и сделать ему удобно. А небольшие абзацы чаще прочитываются. Всегда помните это правило при оформлении записей!

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

В итоге, пользователь постепенно начинает втягиваться в текст. А когда перед ним сразу пять огромных абзацев по 10 строк, то он подумает — читать их или нет.

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

Еще разумно чередовать большие и маленькие абзацы. Избегайте монотонности. На примере ниже абзацы монотонно одинаковые.

Большие и монотонные абзацы

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

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

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

Это будут слова-связки.

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

Облегчаем предложения в тексте статьи

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

Что значит облегчить предложение?

Если можно сложносочиненное предложение разбить на две части, то сделайте это. Такую разбивку можно сделать в 90% случаях.

Еще можете использовать деепричастные обороты. Но с причастными оборотами нужно быть аккуратнее. Их лучше не использовать. Если и использовать, то в малом количестве.

Я тут не призываю писать для имбецилов. Как некоторые говорят, что нужно писать очень просто и короткими предложениями.

Нет!

Длинные предложения тоже имеют право на существование. Но вы можете писать коротко. Или можно делать предложения подлиннее, добавляя какие-то нюансы.

А иногда можете писать длинные предложения.

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

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

И постарайтесь не использовать страдательный залог. Например, «газета была напечатана». Нужно говорить в активном залоге. Например, «мы печатаем газету».

Страдательный залог тяжело воспринимается. Даже в книгах его стараются мало использовать

.

Нужно облегчать предложения. Так читать намного проще и интереснее.

А еще это добавляет удивительную динамику в текст. Когда берем короткие слова и из них делаем предложения, то это иначе читается. Человек проявляет интерес и ему хочется читать дальше.

И хотя знаков препинания в тексте должно быть поменьше, но тем не менее. Это как раз тот нюанс, когда отдельные предложения добавляют динамику.

Ниже можно увидеть пример неправильного формата.

Это все одно предложение

Такой текст не подойдет!

Его трудно понять. Пока прочитаешь предложение до конца, забудешь, что было вначале.

Ниже можно увидеть правильный пример.

Тут видно, что предложения небольшие.

Для простоты еще можно использовать дополнительные знаки препинания. Например, тире. Оно добавляет воздух и продолжает мысль.

Еще можно использовать значки и символы для оформления текста постов. Например, хорошо работают стрелочки.

Стрелочки в тексте

Шаг 2. Правила оформления заголовков и подзаголовков к тексту

Здесь прорабатываем все заголовки и подзаголовки. Это тоже важная часть при оформлении текста. Ведь на них люди обращают большое внимание.

Как нужно оформлять заголовок первого уровня

У любого текста должен быть заголовок. Даже если это будет простое письмо. Если говорить про верстку, то это заголовки 1 — 6 уровня.

h2 (заголовок 1) — это главный и единственный заголовок текста. Всех остальных подзаголовков в тексте может быть несколько.

Из подзаголовков обычно встречаются второго и третьего уровня. Реже 4 — 6 уровней.

Заголовок первого уровня информирует о содержании текста. Стоит сказать, что заголовок — это не тема, а отражение темы.

Допустим, нужно написать про то, как провести отпуск на Кипре с ребенком.

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

Если это отзыв, то будет: «Как я отдыхал с детьми на Кипре».

Это также может быть инструкция. Тогда будет: «Как организовать отдых с ребенком на Кипре — Пошаговая инструкция».

В общем, одна тема может выйти в несколько разных текстов с разными заголовками и содержанием.

Заголовок вовлекает в чтение. Потому что он обычно цепляет какой-то важный момент в жизни читателя.

Если я путешествую, то мне будет интересно, как организовать отпуск с ребенком. А также что там хорошего на этом Кипре.

Я мог даже и не думать про Кипр. Но сам факт, что я путешествую и у меня есть ребенок, может побудить меня прочитать статью.

Хорошо сформированный заголовок в разы повышает прочитываемость. Если цепляется что-то в эмоциях человека, то такой элемент хорошо вовлекает в чтение.

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

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

Ниже можно увидеть размеры заголовков. Первый уровень должен быть всегда крупным. Это самая крупная часть текста.

На примере выше обратите внимание на разницу в размерах текста. Она существенная. Основной текст ниже 14 кегля делать нельзя. Иначе его невозможно прочитать.

Центральный заголовок при желании можно выделять жирным начертанием. Но все зависит от верстки сайта.

Оформляем подзаголовки более низкого уровня в тексте

Подзаголовки второго уровня чаще всего делают жирным. Если будут подзаголовки третьего уровня и выше, тогда работаем так.

Есть основной шрифт размером 16. Заголовок следующего уровня (третьего) будет над ним. Его нужно сделать на два размера больше. Делаем 20. Или можно сделать 18, но с жирным начертанием.

Следующий подзаголовок второго уровня должен быть еще больше.

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

Почему мы делаем разными размерами?

Тут дело не только в удобстве. Ниже в примере показан заголовок третьего уровня. Это кусок текста в середине.

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

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

Их нужно вставлять гармонично!

Вы не можете весь текст сделать крючками. Поэтому делаем какие-то основные мысли чтобы человек смог что-то выделить для себя. Он должен за что-то зацепиться и продолжить читать.

Даже если человек будет читать с середины текста — неважно! Главное, чтобы он читал. Если его зацепит середина, то он все-равно, вернется к началу материала.

Сколько должно быть подзаголовков в тексте статьи онлайн

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

Но как минимум, рекомендую делать один подзаголовок на каждые 800 — 1000 знаков текста с пробелами. Иначе будет слишком крупно.

В примере ниже тяжело читать статью.

Текст без подзаголовков

Тут не за что зацепиться!

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

А вот ниже правильный пример.

Текст с подзаголовками

По сути, это те же предложения. Мы их просто выделили, усилили и сделали из них подзаголовки. Как видите, текст сразу воспринимается иначе.

Точки в конце заголовков не ставим

Ниже примеры заголовков.

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

Подзаголовки можно получить из текста статьи или поста

Таким способом можно выделить важные мысли.

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

Пусть это будет подзаголовком.

Должны присутствовать опорные моменты

Важно, чтобы подзаголовки отражали опорные моменты статьи или основные мысли.

Если это продающий текст, то в подзаголовках должны присутствовать главные вопросы и возражения клиентов.

Заголовки для мастер-класса:

• Что будет на мастер-классе
• Кто автор
• Какие результаты вы получите
• Варианты оплаты
• Ваши вопросы
• Что делать дальше
• Формат участия.

В общем, тут идут названия основных возражений клиентов в продающем тексте.

Со статьями немного сложнее.

Тут нужно повозиться с заголовками. Хорошо если это будет пошаговая инструкция или советы. Тогда у каждого заголовка будет название совета.

Шаг 3. Используем связки и акценты при оформлении текста

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

Что такое слова связки и зачем они нужны в тексте

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

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

Это не значит, что мы в него наливаем воды по смыслу. Смысл здесь есть. Ниже можно увидеть примеры.

Примеры слов и фраз-связок

• и
• но
• также
• тогда как
• если
• то есть
• и знаете что?
• а именно
• а значит
• но это только начало
• поскольку
• потому что
• поэтому
• затем
• только
• разве что
• вдобавок
• несомненно
• вероятно
• наверное
• словом
• кстати
• действительно

• тем не менее
• в то же время
• поехали!
• несмотря на это
• несмотря на то, что
• благодаря этому
• благодаря тому, что
• вследствие этого
• вследствие того, что
• следовательно
• давайте начинать
• прежде всего
• и все
• после этого
• впрочем
• проще говоря
• зато
• кроме того
• например
• однако
• вопреки тому, что
• между прочим
• к счастью

Это те слова, которые главред советует убирать. Однако в SEO они должны использоваться. Потому что это показатель того, что говорит живой человек. Это делает речь живой.

Зачем нужны слова-связки?

Они помогают устранить провалы в логике. Вообще, тексты нужно читать вслух. Так можно услышать повторы и затем убрать ненужные слова.

К примеру, люди часто пишут много дополнительных слов. Например, «ваши тексты», «мои мысли» и так далее. Получается много мусорных местоимений.

А когда перечитываете текст, то видите, где можно убрать эти «ваши», «мои» и «свои», когда и так понятно, про чьи.

Когда читаете, то можете услышать, что текст на каком-то моменте стопорится. То есть не имеет перехода.

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

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

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

В примере ниже красным подчеркнуты слова-связки.

Используйте их в большом количестве. Это задает стиль и заставляет тексты читать.

Такой контент легко заходит!

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

Запомните!

Вода в тексте относится не к словам связкам, а к тому, какую информацию вы там даете. Насколько она соответствует теме. Насколько даете фактов.

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

Зачем использовать стили оформления текста: акцент шрифтом

В тексте тоже нужно использовать много акцентов.

Курсив нужен для создания интонации.

Например, — «А именно сейчас мы с вами обратим внимание.» Здесь слово «сейчас» выделяем курсивом. Это значит, что идет как бы ударение на это слово.

Жирное начертание необходимо для выделения чего-то важного. Это могут быть подзаголовки или какие-то мысли.

Или это может быть ключевая мысль. Нужно чтобы человек обратил внимание и прочитал все, что окружает эти несколько слов.

Жирным начертанием не злоупотребляем при оформлении шрифта текста. Максимум, несколько слов. А жирный курсив вообще, только для очень важных слов.

ЗАГЛАВНЫЕ БУКВЫ подойдут для точечного воздействия. Используются редко. В соцсетях их можно использовать в виде подзаголовков.

Ниже плохой пример.

Невидимый подзаголовок

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

Также неправильно, когда весь текст сделан курсивом.

Вообще, курсив читать сложно!

Это рукописный текст. А если добавить красивые завитушки для оформления текста, то такой пост будет еще сложнее читать.

Будет правильно, когда используете некоторые идеи, выделенным жирным.

Лучше выделить отдельное какое-то слово, которое несет нужную нагрузку, чем всю фразу. Это важно для эстетичного оформления текста.

Обратите внимание!

Тут еще один акцент сделан в виде заглавных букв. Это — «Никогда не возвращаются в офис.»

Его можно было сделать жирным. Но в данном примере жирного и так достаточно. Поэтому использовали другой акцент.

А почему нельзя использовать большие буквы в огромном количестве?

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

При работе с акцентами, главное, не перестараться!

Когда люди начинают работать с акцентами, то получается, как на примере ниже.

Много акцентов в тексте

Получается, что тут все важно!

Поэтому автор решил делать акцент чуть ли не в каждом предложении. Еще и текст по центру сделал, потому что это важно.

В итоге, получилось такое безобразие! Читать текст не хочется, потому что тут слишком много на что стоит обратить внимание.

Делаем акценты цветом в тексте поста

Основной цвет текста — темно-серый. А почему не черный?

Потому что черный на белом создает очень большую контрастность. В итоге, при чтении глаза быстрее устают. Поэтому шрифт должен быть достаточно темным, но не черным.

Однако ни в коем случае не делайте его светло-серым!

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

Почему?

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

Получится разноцветная петрушка.

Ниже на правильном примере есть основной цвет шрифта — темно-серый.

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

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

Как видим, тут еще используется дополнительный цвет для акцента. Этого достаточно!

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

А вот неправильный пример. Тут видно, что автор перестарался с оформлением текста.

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

Красивые линии и акценты версткой для оформления текста

Есть еще дополнительные акценты, которые рекомендую использовать в тексте. Главные мысли можно взять в красивые рамки для оформления текста. Или просто сделать на другом фоне.

Также можно отделять линиями.

На примере ниже есть фоновая затемненная картинка. Здесь есть небольшой кусок текста с подзаголовком. Весь текст идет белым цветом.

Еще можно отделять текст специальными линиями. Так тоже можно оформлять главную мысль.

Красивые линии для оформления текста

Цвет линий можно делать в тон подзаголовков. И не обязательно на всю ширину контента. Можно делать и короткие линии.

Вот еще один пример интересного оформления текста. Посмотрите, как красиво выполнено в рамке и на сером фоне.

Правильное оформление цитаты в тексте статьи — примеры

Цитаты тоже используем и акцентируем в тексте. Их должно быть видно. Они добавляют живости. Также используем их для убеждения.

Цитаты иллюстрирую и разбавляют текст.

Их можно оформлять в простой рамке. Еще можно делать горизонтальными и вертикальными полосками.

Оформление цитаты в тексте

А вот так можно оформить цитату в виде отзыва. Слева фото человека, а справа сам отзыв.

Отзыв

Обратите внимание в оформлении цитаты, если это отзыв.

Для каждого отзыва делаем свой уникальный заголовок. В тексте выделяем ключевую мысль и берем ее в заголовок.

Как собирать продающие отзывы

Эти советы помогут вам с легкостью собирать большое количество продающих отзывов от покупателей и клиентов.

Показываю на примерах, как можно из простых отзывов делать масштабную и бесплатную рекламную кампанию. И в итоге, получать намного больше заказов и продаж.

А вот неправильный пример. Не нужно оформлять цитаты курсивом. Потому что читать это довольно сложно.

Оформление текстов курсивом допускается только тогда, когда присутствует небольшая цитата в одну или две строчки.

Шаг 4. Правильное оформление списков, схем и таблиц в тексте

Рекомендую активно использовать схемы, списки и таблицы. Это очень полезно при графическом оформлении текста. Если к примеру, оформить в виде красивой блок-схемы, то сразу возникает другой эффект.

Такой элемент хорошо переключает внимание.

Правила оформления списков в тексте на сайте

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

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

Потому, что они:

• переключают внимание
• повышают читабельность
• визуально украшают текст
• акцентируют выгоды в продающих текстах.

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

Но есть нюанс!

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

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

Точки (маркеры) в списке — это буллиты. Они могут быть в виде точек, квадратов или галочек.

Ниже идет оформление буллитного списка без всяких заморочек. Маркеры идут в виде точек.

А вот список из продающего текста.

Маркированный список с плюсами и минусами

Это маркированный список, который несет эмоцию. Он показывает, что в левой части негатив, а в правой позитив.

Еще один интересный пример крутого оформления текста. Здесь идет список с иконками.

Тут показаны выгоды.

Обратите внимание, что первое слово выполнено большим жирным начертанием. Далее идет описание. Однако все это сделано не отдельно, а единым предложением. В конце ставится точка.

Вот пример списка.

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

Поэтому даже разными буллитами можно делать акценты и давать дополнительный смысл.

Также буллитами можно создавать эмоции. Если хорошо, то это может быть улыбающийся смайлик и наоборот. Также можно использовать пальцы вверх и вниз.

Вот еще пример оформления списком. Сверху идет основная идея буллита, а ниже описание.

Ниже нумерованный список, который оформили в колонках. Его тоже удобно читать.

Вот еще один пример. Здесь первые слова идут жирным, а дальше пояснение обычным шрифтом.

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

Вот еще интересный список, который оформлен в колоночном варианте оформления текста. Смотрится необычно и хорошо привлекает внимание.

Вот плохой пример списка с избытком.

Лишняя заливка тут не уместна.

Таблицы

Бывает так, что когда идет много списков, то это начинает напрягать.

Тогда некоторые списки нужно трансформировать в таблицы. Они тоже хороши для понимания. Показывают структуру и помогают с выбором.

В примере ниже ранее был список. Однако потом его оформили таблицей.

Оформлено красиво, понятно и структурно.

Еще один образец оформления статьи. Тут тоже списки.

Все эти списки, которые могли бы просто идти друг за другом, были собраны в таблицу. Добавили форматирование и цветовых акцентов.

В итоге, появился тот элемент, на который хочется обратить внимание.

Схемы и графики с примерами

Некоторые списки можно легко трансформировать в схемы и графики. Схемы показывают уровень профессионализма. Это большой плюс в оформлении статей.

Видно, что схема на примере заменяет сразу три списка подряд. Все компактно стало вокруг одного главного слова.

Также никто вам не запрещает преобразовать список в виде майнд карты. Сделать этом можно в различных программах и сервисах.

Вот еще один хороший шаблон для оформления текста.

Тут схема. В ней перечислены, какие задачи подходят, а какие нет.

А вот плохой пример, когда дизайнер старался сделать очень красиво.

Тут много курсива. Белый шрифт не очень хорошо сочетается. Также очень много жирного начертания. И к тому же все по центру.

В общем, дизайнер сделал так, как ему удобною.

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

Шаг 5. Берем иллюстрации и картинки для оформления текста

Изображения создают настроение и разбавляют текст. Также они облегчают восприятие и хорошо сочетаются с другими элементами контента.

Иллюстрации — это не просто фотография. Это может быть какая-то схема или зарисовки.

Где брать картинки?

Можно найти и купить на специальных фотостоках. Есть как платные, так и бесплатные.

Можно еще сделать самому.

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

Еще можно вытащить из поиска. Но тут нужно быть внимательным! Хоть это и открытые источники, не факт, что все картинки разрешены для использования.

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

Чем больше, тем лучше!

Если картинка распространена повсеместно, то скорее всего никаких проблем с этим изображением не будет.

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

Еще можно нарисовать от руки.

Некоторые люди рисуют иллюстрации сами. Также существуют специальные сервисы для рисования. Или можно заказать эту работу иллюстратору.

Еще можно делать скриншоты.

Бывают такие статьи, которые не требуют каких-либо иллюстраций. Например, материалы про то, как работать в том или ином сервисе. Понятно, что основная масса картинок — это скриншоты по работе с сайтом.

Еще можно использовать общественное достояние.

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

Например, картина Джоконда — это общественное достояние. Поэтому ее можно использовать для иллюстрации статьи.

Будьте аккуратнее с фильмами!

Говорят, если брать кадр и вносить в него изменение (например, подписи), то тогда можно использовать. Если с кадром ничего не делать, то использовать его нельзя.

Фотостоки

Составьте список любимых фотостоков. Есть как платные, так и бесплатные.

Бесплатные:

• pixabay.com
• stockvault.net
• freeimages.com

Платные:

• shutterstock.com/ru
• ru.depositphotos.com
• ru.dreamstime.com

Старайтесь подбирать не заезженные картинки

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

Раньше было модно использовать таких человечков.

Но сейчас это прошлый век и смотрится довольно банально. Люди давно устали от них. Поэтому воспринимать их не будут.

Вот слева хороший, а справа плохой пример.

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

Также работайте с ассоциациями. И хоть это не в тему, но когда работаешь, то видишь интересные варианты картинок.

Используйте подписи к картинкам

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

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

Сама картинка может не имеет никакого отношения к теме. Однако дополнительная подпись задает нужную мысль изображению.

Объединяйте иллюстрации общей идеей

Некоторые статьи вы можете объединять общей идеей. Можно основные идеи выносить в картинки. И всю публикацию делать такими картинками.

Это не весь текст подряд с картинкой за картинкой. Просто это сочетается все с основным текстом.

Сами картинки к теме никакого отношения не имеют. Но благодаря подписям они передают настроение.

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

Итак, мы рассмотрели основные правила оформления текста статьи и постов для сайтов и социальных сетей. Соблюдайте их чтобы вывести свой контент на высокий уровень.

10 правил оформления текста на сайте

Предлагаем вам запомнить 10 базовых рекомендаций по типографике и смело практиковать их. «Легко читать нельзя исправить» ― попробуйте поставить запятую в нужном месте. После слова «читать»? Но многие веб-дизайнеры упорно стремятся к тому, чтобы созданные ими сайты были невыносимы, поэтому:

Легко читать нельзя, исправить!

В этой статье вы найдете 10 профессиональных советов, как сделать текст легко читаемым и приятным для взгляда пользователя.

Какое яблоко вы хотите съесть?

Это?

Или одно из этих?

Скорее всего, первое. Оно яркое, сочное, с пахнущим свежестью зеленым листочком, и оно одно! Выбрать из килограмма яблок ― дело более трудное. В большинстве случаев вы просто возьмёте первое попавшееся. То же самое с вашим сайтом. Если сайт разноцветный ― это не означает, что он красивый. Если на нём много информации ― это не означает, что он полезный. Если вы используете необычный шрифт ― это не значит, что ваш сайт будут читать. Хорошие дизайнеры знают эти факты. Делать сайт самому, не владея навыками веб-дизайна, ― гиблое дело. Но разбираться в основах правильного оформления, уметь отличать плохое от хорошего всё же стоит.

Вы же хотите, чтобы тексты на вашем сайте читали?

Предлагаем вам запомнить 10 базовых рекомендаций по типографике и смело практиковать их.

10 советов, чтобы сайт созрел

1. Правильный размер шрифта повышает читабельность текста. Пользователи не хотят настраивать шрифт на вашем сайте самостоятельно. Позаботьтесь о них заранее. Слишком маленький шрифт их отпугнет, слишком большой напряжёт. Выбрав стандартные размеры (12,13,14 кегль), вы не ошибётесь.

2. Пространство сайта не должно быть заполнено на 100 %. Это только утомит читателя, он никогда не просмотрит такую страницу целиком. Оставляйте пустые пространства, играйте с отступами. Текст должен быть окружён пустотой. Это сотворит чудо: контент начнут читать. Происходит это потому, что пользователь сразу поймёт, где начало текста, а где конец. Читательский глаз не устанет, ваш сайт будет только радовать.

3. Подчёркивать каждое слово в тексте или ставить гиперссылки на большую часть слов ― это пережитки веб-дизайна прошлого века. Именно тогда онлайн-ресурсы любовались синеньким шрифтом и возможностью кликов по словам. Сегодня постоянное выделение бьёт по глазам, раздражает, вынуждает вашего читателя скорее перейти по ссылке, лишь бы избавиться от графического наваждения. Элементарное уважение к посетителям и правила эстетичного оформления рекомендуют: воспользуйтесь курсивом, если хотите выделить отдельное слово или фразу из текста.

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

5. Хороший заголовок – половина успеха статьи. Размер хорошего заголовка – дополнительная треть успеха. Самые популярные размеры заголовков находятся в диапазоне от 18 до 29 пикселей. Если название совсем короткое (одно-два слова), можно использовать более крупный кегль.

6. Точка в конце заголовка никогда не ставится; вопросительный и восклицательный знаки — могут.

7. Акцентируйте внимание на словах с помощью разных размеров шрифтов, стилей текста (капслок, курсивное и полужирное начертание). Хороший вариант – сочетать шрифты с засечками и без. Раньше все старались пользоваться шрифтами без засечек в заголовках, основной текст писать с засечками. Сегодня тенденция изменилась в сторону микса.

8. Размеры строк имеют значение. Ширина строки во весь экран понравится только фанатиками вашего сайта и его тематики, другой человек прекратит чтение. Слишком узкая колонка тоже не подойдет, так как глаза устанут прыгать от строчки к строчке. Самая приятная для человека строка содержит от 55 до 75 символов. Помимо размера, для восприятия важно расстояние между абзацами и строками.

9. Цветовые комбинации шрифтов и фона для восприятия играют важную роль. Выворотный текст (белый на черном фоне), как уже было доказано много раз, читается хуже. Но и от угольно-черных букв на слепяще белом фоне дизайнеры стараются сегодня уходить – чтобы глазам не было больно при просмотре. Черный шрифт заменяется ими на чуть более мягкий тон, белый фон стремится к молочному или иным оттенкам. В конце концов, какой бы палитрой вы не пользовались, правил несколько: если шрифт похож по цвету на фон, то читается он плохо. Играясь с другими цветами и оттенками, кроме черных и белых, помните: текст должен быть контрастен по отношению к фону.

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

Эти основные правила легко запомнить и применить. Присмотритесь к своему сайту – вдруг он нуждается в доработке?

10 уловок с типографикой, которые сделают ваш текст более читаемым

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

1. Всегда учитывайте меру.

Я слышал, как кто-то однажды сказал мне, что они занялись дизайном, чтобы избежать всех цифр, используемых в других областях. Угадай, что. Числа будут преследовать вас, даже когда вы что-то придумываете.Каким бы внимательным ни был ваш взгляд на мельчайшие детали, всегда лучше перестраховаться, чем сожалеть. Всегда помните о мере, когда складываете текст. Нет, вам не нужно искать линейку или рулетку. «Мера» — это термин, используемый для определения длины линии. Если каждая строка текста длиннее, чем обычно, читателям автоматически будет трудно обработать отправляемое сообщение. Хорошая мера обычно составляет от 40 до 80 символов в строке, включая пробелы. Если это всего лишь один столбец, то идеально подойдет 65 символов.Ищете формулу, которую можно использовать? Конечно, есть. Формула Роберта Брингхерста просит вас умножить размер шрифта на 30. Допустим, вы используете шрифт размером 20 пикселей. Умножьте его на 30, и ваша идеальная мера будет 600 пикселей. При размере шрифта 20 у вас все равно будет всего около 65 символов для строки размером 600 пикселей.

2. Мастер ведущего.

Вы знаете эти пробелы между каждой строкой текста? Это то, что вы называете ведущим. Интерлиньяж оказывает такое огромное влияние на удобочитаемость в том смысле, что некоторые читатели могут даже не пытаться прочитать блок текста, если интерлиньяж неправильный.Многие вещи работают вместе, чтобы получить правильное лидерство. Размер шрифта, начертание, регистр, толщина и интервал между словами — это лишь некоторые из многих факторов, которые влияют на количество пространства между строками. Как правило, идеальным вариантом будет установка интерлиньяжа на 25% больше размера шрифта. Допустим, вы используете шрифт размером 12 пунктов. Лучший интерлиньяж будет иметь размер примерно 15 или 16 пунктов.

3. Используйте висячие кавычки.

То, что ваше левое поле устанавливает крайнюю левую границу, не означает, что все должно быть выровнено с ней.В случае кавычек многие дизайнеры делают ошибку, выравнивая кавычки с левым полем. Когда вы это сделаете, текст, следующий за этой кавычкой, будет перемещен вправо, создавая впечатление, что поля перекошены. Это нарушает ритм читателя. Когда вы используете висящую кавычку, вы оставляете кавычки за пределами поля. В результате весь текст будет выровнен друг с другом. Теперь это определенно упрощает чтение любого блока текста.

4. Остерегайтесь вдов и сирот.

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

5. Сделайте акцент.

Всегда будет несколько ключевых моментов, которые вы хотите подчеркнуть выше всего. Это может быть слово, которое вы пытаетесь определить, или утверждение, которое, по вашему мнению, имеет наибольшее значение во всем абзаце. Это можно сделать, выделив слово, фразу или предложение курсивом (наиболее распространенная форма выделения). Вы также можете попробовать выделить слова жирным шрифтом или подчеркнуть их. Другие ставят акцент заглавными буквами. Некоторые также выделяют слова или используют буквы разного цвета.Хотя акцент — это хорошо, слишком много его нарушит читаемость вашего текста. Выберите одну форму акцента и придерживайтесь ее. Помещать слово, которое вы считаете важным, заглавными буквами, жирным шрифтом, курсивом и подчеркиванием — это излишне.

6. Используйте шкалы для отображения иерархии.

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

7. Держите тряпки в чистоте.

Тряпки — это неровная сторона абзаца, часто правая сторона. Конечно, тряпки появляются автоматически, если вы выровняете текст по левому краю.Использование выравнивания по ширине не сократит его, поскольку неровные промежутки между словами затрудняют чтение. Здесь важно убедиться, что тряпки по-прежнему выглядят организованными и чистыми, несмотря на то, что они не полностью выровнены. Как вы держите свои тряпки в чистоте? Убедитесь, что каждая строка не слишком длинная или короткая. Убедитесь, что эти концы расположены как можно ближе друг к другу. Для этого вам, возможно, придется вручную отрегулировать текстовый блок.

8. Легкость в контрасте.

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

9. Используйте пустое пространство в своих интересах.

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

10. Поддержите свой текст изображениями.

Конечно, вы не можете просто оставить свой текст в покое. Некоторая графическая поддержка будет иметь большое значение, особенно если вы хотите, чтобы ваши читатели действительно понимали, о чем вы говорите в своем тексте. Изображения помогут им представить, что вы объясняете. Это также может быть лучшим способом привнести эмоции в свой контент. Например, поговорите о чем-то душераздирающем, и вспомогательная фотография может вызвать у них слезы.Без сомнения, типографика играет огромную роль в укреплении вашего дизайна. Он несет основную идею вашего контента и, следовательно, имеет высокий приоритет, когда дело доходит до достижения конечных результатов. Нельзя просто забыть о типографике. Каким бы крутым и впечатляющим ни был ваш остальной дизайн, плохая типографика всегда испортит вам все. Вот почему, как дизайнеру, вы должны немного более серьезно относиться к типографике. Не смотрите на это как на «просто текст».Это также форма искусства, для эффективного осуществления которой требуется определенная наука. Расширьте свое творчество от графической стороны дизайна до его текстовой части. Как только вы научитесь это делать, вы сможете создавать целостные, последовательные проекты, которые эффективно передают любое сообщение. Начните с этих десяти советов и приемов. Попробуйте применять их по очереди. Прежде чем вы это узнаете, вы обнаружите, что уже освоили типографику и можете делать это автоматически и без проблем.

---

Товаров показано в этом сообщении:

Приступая к работе с надписью от руки?

Рабочие листы для бесплатных надписей

Загрузите эти рабочие листы и начните практиковаться с простых инструкций и упражнений по трассировке.

Скачать сейчас!

Мы создаем шрифты, графику и делаем красивые фотографии.

Посмотреть больше постов

25 примеров интересных и креативных структур в веб-дизайне

От нашего спонсора: Ищете интуитивно понятный инструмент управления проектами в стиле белой доски? Попробуйте Shortcut бесплатно.

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

химический

Креативный и простой дизайн, основанный на тексте и симпатичных социальных иконках.

Мистер Оба

Красивый макет, основанный на большом фоновом изображении и плавной навигации.

9 ниток

Выберите то, что вы хотите прочитать, и щелкните по нему… сайт сделает все, чтобы вы туда попали.

Воронье гнездо

Интересны и идея, и дизайн. Получите десять самых популярных твитов из тегов ad / design / tech и прочитайте их в горизонтальном слайдере.

миикс

Красивый макет, для навигации просто следуйте стрелкам.

Bluezoom

Приятная горизонтальная компоновка, демонстрирующая вещи по-другому и красиво.

Заливка Студия

Холодный контраст ярких цветов и детали низа для презентации работ студии.

Жизнь может быть лучше

Красивый красочный макет, довольно понятный. 😉

угловой

Довольно крутой одностраничный сайт.

Садовник и знаки

Действительно уникальная и красивая планировка. Цвета, типографика и детали идеально сочетаются.

Дэйв Доусон

Хороший и чистый макет с большой красочной типографикой, отличное сочетание.

Кайл Стид

Классный иллюстративный макет, также довольно понятный.

просто точка

Здесь то же самое, классный иллюстративный макет, также довольно понятный. 😉

emtwo

Красивый текстовый макет.Приятная цветовая гамма и типографика.

Nordkapp

Нет ничего лучше, чем фото вашей команды на вашем сайте, действительно круто.

Конструктор меховых изделий Javascript

Красивый одностраничный макет.

Адам Батлер

Хороший способ представиться. Также приятная планировка и цветовое решение. 😉

Это вещи

Красивые цвета и значки, хороший способ привлечь внимание без лишнего текста.

Nike лучший мир

Действительно красиво, красивое фоновое изображение и предложение на странице.

Марк Хоббс

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

Хорек

Красочный и креативный способ презентации компании.

ReprintMe

Разное и интересное. Конечно, привлечь внимание зрителя.

Vito Sans

Довольно креативный дизайн.На самом деле вы начинаете читать снизу, а затем поднимаетесь вверх.

Республика2

Красивый и креативный одностраничный дизайн с яркими цветами и красивой типографикой.

Ким — фильм

Просто и креативно. Цвета, тени и приятная типографика.

Источник:

Лучшие образцы
Награды CSS
Непревзойденный стиль

Назовем это современным веб-дизайном. Полноэкранная галерея с переворотом миниатюр

7 правил создания великолепного пользовательского интерфейса — Часть 2 (обновлено для 2020 г.) — Изучите дизайн пользовательского интерфейса

Это вторая часть из двух частей.Вы должны сначала прочитать первую часть.

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

Вот правила:

1. Свет исходит с неба (см. Часть 1)
2. Сначала черно-белое (см. Часть 1)
3. Удвойте пробелы (см. Часть 1)
4. Изучите методы наложения текста на изображения
5. Сделать текст всплывающим и отключаемым
6. Используйте только хорошие шрифты
7. Укради как художник

Правило 4. Изучите методы наложения текста на изображения

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

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

Метод 0: применить текст непосредственно к изображению

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

Доски для серфинга Otter. Модные и инстаграммы, но немного трудновато читаемые.

При использовании этого метода есть множество проблем и предостережений:

1. Изображение должно быть темным и не иметь больших контрастных краев
2. Текст должен быть белым. — смею вас найти контрпример, чистый и простой. Шутки в сторону. Только один.
3. Протестируйте его на для каждого размера экрана / окна , чтобы убедиться, что он читается

Есть все это? Большой.Теперь никогда не меняйте текст или изображение, и все должно быть в порядке.

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

Веб-сайт Aquatilis — безусловно, стоит посетить.

Метод 1. Наложение всего изображения

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

Вот модное изображение-заставка с темным наложением.

На веб-сайте Upstart есть черный фильтр с непрозрачностью 35%.

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

Этот метод также отлично подходит для эскизов или небольших изображений.

Миниатюры для благотворительной организации: водный сайт

И хотя черный оверлей является самым простым и универсальным, вы, безусловно, можете найти и цветные оверлеи.

Метод 2: Текст в поле

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

Современный концепт iPhone в Гонолулу от Мигеля Оливы Маркеса

Вы также можете добавить немного цвета, но, как всегда, будьте рассудительны.

Теперь в розовом. Автор: Марк Конлам

Метод 3. Размытие изображения

Удивительно хороший способ сделать наложенный текст разборчивым — это размыть часть нижележащего изображения.

Обильные наложения размытия в Snapguide. Обратите внимание, что размытые области также затемнены.

iOS 7 в последнее время действительно сделала размытие фона, хотя Vista также использовала это с большим эффектом.

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

Teehan + Lax

Я имею в виду, просто попробуйте , чтобы прочитать подзаголовок ниже.

Ради любви ко всему хорошему в этом мире, как были одобрены и ?

Метод 4: обесцвечивание пола

Затухание пола — это когда у вас есть изображение, которое слегка исчезает в сторону черного внизу, а затем поверх него написан белый текст. Это гениальный метод, и я понятия не имею, кто использовал его до Medium, но именно здесь я впервые заметил его.

Случайному наблюдателю кажется, что эти коллекции Medium отображаются путем наложения белого текста на изображение — но в ответ на это я говорю false! Очень тонкий градиент от середины (черный с непрозрачностью 0%) к низу (черный с непрозрачностью примерно 20%).

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

Также обратите внимание, что эскизы коллекции Medium используют небольшую текстовую тень для дальнейшего повышения разборчивости. Ребята молодцы!

Чистый эффект: Medium может накладывать практически любой текст на любое изображение и иметь читаемый результат.

Да, и еще один момент — почему изображение становится черным внизу ? Чтобы узнать ответ на этот вопрос, см. Правило 1 — свет всегда идет сверху.Чтобы наш глаз выглядел наиболее естественно, изображение должно быть немного темнее внизу, как и все остальное, что мы когда-либо видели.

Продвинутый ход: смешайте размытие с флейдом на полу… представляем The Floor Blur .

«Размытие пола» в SnapGuide. Смотри, мама, без накладки!

Бонусный метод: Scrim

Как в блоге Elastica каждый раз появляется читаемый заголовок поверх динамического изображения? Изображения:

• Не особенно темный
• Вид контраста

И все же трудно объяснить, почему текст такой разборчивый.Взгляните:

Ответ: холст .

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

Если мы уменьшим масштаб блога Elastica в браузере, мы сможем более четко увидеть, что происходит.

Вокруг заголовка «145 000 пользователей Salesforce выходят, чтобы отпраздновать…» есть рамка с градацией непрозрачности. Его легче заметить на сплошном синем фоне, чем на контрастных фотографиях над ним.

Это, вероятно, самый тонкий способ надежного наложения текста на изображения, и я нигде больше его не видел (но это довольно хитроумно). Однако отметьте это. Никогда не знаешь, когда это понадобится.

Правило 5. Сделайте текст всплывающим — и не всплывающим

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

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

• Размер (больше или меньше)
• Цвет (больший или меньший контраст; яркие цвета привлекают внимание)
• Плотность шрифта (жирнее или тоньше)
• Использование заглавных букв (строчные, прописные и заглавные буквы)
• Курсив
• Межбуквенный интервал (или — причудливый термин — предупреждение — отслеживание!)
• Поля (технически не является свойством самого текста, но может использоваться для привлечения внимания, поэтому входит в список)

Твердое использование цвета, заглавных букв и интервалов.Ребенком Джона Белла.

Есть несколько других вариантов, которые могут привлечь ваше внимание, но не используются и не рекомендуются особо:

• Подчеркнутый. Подчеркнутый сегодня означает ссылки, и не стоит пытаться заставить его означать что-то еще, если вы спросите меня
• Цвет фона текста. Не так часто, но на веб-сайте 37signals это было какое-то время как стиль ссылок, и IDEO анимирует его при наведении курсора
• Зачеркнутый. Отойди, мастер CSS 90-х, ты!

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

Up-pop и down-pop

Все способы стилизации текста можно разделить на две группы:

• Стили, которые увеличивают видимость текста . Большие, полужирные, заглавные и т. Д.
• Стили, которые уменьшают видимость текста . Маленький, менее контрастный, без полей и т. Д.

Мы будем называть эти стили «up-pop» и «down-pop» в честь любимого прилагательного дизайнеров. Мы не будем называть это «визуальным весом», потому что это скучно.

Название кейса с сайта hugeinc.com.

С заголовком «Материальный дизайн» происходит много ажиотажа. Оно большое; он высококонтрастный; это очень смело.

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

Теперь важная часть.

Заголовки страниц — это единственный элемент, который позволяет оформить все в актуальном стиле.

Для всего остального вам нужен подъем и опускание.

Если элемент сайта нуждается в выделении, примените ОБЕИХ стилей up-pop и down-pop, но чуть БОЛЬШЕ up-pop.Это предотвратит перегруженность объектов, но придаст разным элементам визуальный вес, который они должны иметь.

Баланс визуальных стилей

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

Эти числа на сайте Blu Homes привлекают внимание своим большим размером — но обратите внимание, что они одновременно преуменьшены очень легким шрифтом и менее контрастным цветом , чем темно-серый.

Маленькие метки под числами , однако, серые и маленькие, они также прописные и очень жирные.

Все дело в балансе.

Contentmagazine.com

Contents Magazine — хороший пример использования up / down-pop.

Заголовки статей в основном только не выделенные курсивом элементы страницы . В этом случае отсутствие курсива более эффективно привлекает внимание (особенно в сочетании с жирным шрифтом-жирностью)

Имя автора выделено полужирным шрифтом в подписи, что выделяет его из обычного «на»

.

Маленький, малоконтрастный «УЖЕ ВЫШЕЛ» текст не мешает — но с его прописными буквами, большим межбуквенным интервалом и большими полями вы можете увидеть его момент вы его ищете

Выбранные и зависшие стили

Стилизация выбранных элементов и эффекты наведения — еще один этап той же игры, но более сложный.

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

С чем это вам остается?

• Цвет текста
• Цвет фона
• Тени
• Подчеркивание
• Небольшие анимации — подъем, опускание и т. Д.

Один надежный вариант: попробуйте сделать белые элементы цветными или сделать цветные элементы белыми, но затемняя фон позади них.

Выбранный значок меняет цвет с белого на белый, но остается высококонтрастным по сравнению с его фоном.

Я оставляю вас с этим: стилизовать текст сложно.

Но каждый раз, когда я думал: «Может, этот текст просто не может выглядеть правильно?», Я ошибался. Мне просто нужно было поправиться. И чтобы поправиться, мне просто нужно было продолжать попытки.

Итак, я приношу вам небольшое утешение: если он не выглядит хорошо, не волнуйтесь — это могло бы быть, если бы вам было лучше. Но послушайте, давайте продолжим попытки и сделаем себя лучше.

Привет, PS: если вы хотите узнать больше о стилизации текста, ознакомьтесь с изучением дизайна пользовательского интерфейса. Я подробно рассказываю об этом.

Правило 6. Используйте только хорошие шрифты

Некоторые шрифты хороши. Используй их.

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

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

Кроме того, Я рекомендую только бесплатные шрифты. Почему? Это руководство для людей, которые учатся. По нулевой цене их более чем достаточно. Давай воспользуемся этим.

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

Категория «Пользователь» приложения Font Book хороша для запоминания того, что вы скачали.

В произвольном порядке:

1. Work Sans

Иногда вы разрабатываете что-то, для чего нужен современный чистый шрифт, но с juuuust немного fun . Work Sans идеально отвечает этим требованиям. Немного необычный; полностью недоиспользуется.

И какое-то время он будет недоиспользоваться. Вы не можете выделить курсив для этого шрифта в Google Fonts (хотя обычный стиль присутствует). Поэтому большинство дизайнеров избегают использовать его в качестве основного шрифта. (Я вам скажу, где взять курсив ниже)

Широкие буквы

Work Sans означают, что он работает даже с очень маленькими размерами — отличное свойство для любого шрифта мобильного приложения.

Получите это: Google Fonts (без курсива), Font Squirrel (включая курсив)

2. Робото

Невероятный, чистый, универсальный шрифт. Хотя это шрифт Android по умолчанию, он все еще недостаточно используется (и бесплатный!) Для iPhone и веб-приложений.

Beautiful, работает везде, весит гадзиллион .

Увидеть это в дикой природе : Google Maps

Получите на : Google Fonts

3. Метрополис

С тех пор, как web 2.0, такие шрифты, как Gotham и Proxima Nova, набрали , а их популярность взлетела на . И, как и многие тенденции дизайна, на это была причина — фантастические . Я имею в виду, что использование Proxima Nova будет похоже на обман в дизайне, это так приятно.

К сожалению, эти шрифты также очень дороги (ну, один вроде как бесплатный с Adobe Fonts), и Metropolis, вероятно, является единственной лучшей бесплатной альтернативой (но есть и другие).

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

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

Получите на : Font Squirrel

4. Source Sans Pro

Одна вещь, которая мне нравится в Source Sans, — это то, что он делает отличным выбором , когда вы испытываете искушение пойти с , и невероятно часто используемым Open Sans или Lato . Сопротивляйтесь желанию !

Source Sans имеет те же сильные стороны, что и Open Sans или Lato — нейтральный характер, просто немного человечности (а не холодные, резкие геометрические формы букв), и он отлично работает для пользовательских интерфейсов.

Для легкого сопряжения обратите внимание на его сестер: Source Serif и Source Code Pro.

Получите на : Google Fonts

5. IBM Plex Sans

После десятилетий использования Helvetica IBM наконец выпустила собственное семейство шрифтов, Plex .

Мне нравится Plex за то, что он немного необычный и техничный. Я так понимаю, это бренд IBM? Прикол, ребята.

Ах да, и Plex Sans прекрасно сочетается с Plex Serif и Plex Mono. Это все, что вам нужно.

Получите на : Google Fonts

6. Иконы с перьями

В то время как многие популярные наборы значков (кхм, Font Awesome ) имеют излишне закругленные и игристые формы, которые плохо сочетаются с чистым, простым дизайном, значки с перьями являются крайне недооцененным противоядием.

Создатель не упаковал его как иконочный шрифт (пока), но кто-то разместил на Github версию шрифта, которая прилично хорошо отслеживает исходный набор (и если вы используете только 10 или 20 иконок из набора, нет в любом случае имеет смысл загружать весь шрифт).

Получить на : набор SVG, частичный шрифт значка

---

Я оставлю вам несколько ресурсов:

• Красивые веб-шрифты Google. Это потрясающая демонстрация того, насколько хорошо могут выглядеть шрифты Google.Я возвращался к этой простой странице за вдохновением как минимум дюжину раз.
• FontSquirrel. Коллекция лучших шрифтов, доступных для коммерческого использования, причем совершенно бесплатно. Приятно, что кто-то собрал хорошую бесплатную подборку помимо Google Fonts.
• Adobe Fonts. Если вы используете Adobe Creative Cloud (то есть подписку на Photoshop или Illustrator и т. Д.), То у вас есть бесплатный доступ к тонне потрясающих шрифтов. Даже лучше, чем я рекомендовал выше: Proxima Nova, Adelle Sans, DIN, Freight Text и другие.

• Изучите дизайн пользовательского интерфейса . Ищете другие отличные шрифты? В моем курсе дизайна пользовательского интерфейса есть рекомендуемых шрифтов, с более чем 60 фантастическими бесплатными (или бесплатными шрифтами Creative Cloud), охватывающими всех типов шрифтов (с засечками, плоскими, моноширинными, рукописными и т. Д.), В том числе отмечает, где каждый шрифт работает лучше всего.

Правило 7: Укради как художник

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

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

А где вишенку сорвать? Вот ресурсы, которые я нашел самых полезных при проектировании для клиентов. В списке в порядке убывания:

1. Dribbble

Этот сайт, предназначенный только для приглашенных, «покажи и расскажи дизайнерам» имеет без исключений самое высокое качество работы пользовательского интерфейса в Интернете. Здесь вы можете найти отличные примеры практически всего.

Фактически, , вы должны следить за моей работой по дриблингу здесь. Вот еще несколько человек, за которыми вы также можете подписаться:

• Джейми Сайк . Публикация нового пользовательского интерфейса практически ВСЕГДА. Неизменно первоклассный материал. Огромный опыт и дизайн. Что я могу сказать? Легко следовать .

• Балканские братья . Кажется, это странная истина о том, что чем ближе дизайнер к России, тем лучше они разбираются в цветах.Эти хорватские дизайнеры фантастические с плоскими интересными . Всегда отличные градиенты, цвета и тени.

• Элегантные чайки . Если вы когда-нибудь задумывались «чувак, как мне сделать что-то более интересное, чем стандартная сетка Bootstrap?», Просто просмотрите несколько их снимков. Вот ваш ответ .

• Cosmin Capitanu. Замечательный шаблон. Он делает вещи, которые выглядят безумно-футуристическими, но не кричащими. Реально хорошо с цветами. Однако на самом деле он не фокусируется на UX, что также является критикой дриблинга в целом.

Работа Balkan Brothers, Cosmin Capitanu, Elegant Seagulls и Jamie Syke, соответственно.

2. Плоская доска пользовательского интерфейса

Я не имею ни малейшего представления, кто такой «wararc», но его доска пользовательского интерфейса телефона была до смехотворно полезна для меня, пытаясь найти разрозненные примеры красивого пользовательского интерфейса.

3. Pttrns

Каталог скриншотов мобильных приложений.Хорошая особенность Pttrns заключается в том, что весь сайт организован — подождите, — шаблонами UX. Благодаря этому очень удобно быстро исследовать любой элемент интерфейса, над которым вы сейчас работаете, будь то страница входа, профиль пользователя, результаты поиска и т. Д.

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

А пока давайте сделаемся как воры.

И, в духе этого раздела, название «Укради как художник» было заимствовано из одноименной книги, которую я не читал, в основном потому, что название, кажется, суммирует все, что может содержаться на страницах.

Заключение

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

Во всяком случае, это именно то, чему я научился до сих пор, и я всегда новичок.

Если вы все еще со мной, вы прочитали две статьи на общую сумму более 5000 слов, и просмотрели множество иллюстраций и скриншотов. Но я еще не умер, так что это еще не конец.

Если вам понравилось, ознакомьтесь с Learn UI Design, полным видеокурсом для разработчиков и дизайнеров UX, которые хотят изучить дизайн интерфейса. Контент в том же стиле, что вы читали выше — практических стратегии и анализа, — не бесполезная теория, которая доминирует в написании статей о дизайне в Интернете.

Во всяком случае, вам также следует воспользоваться моим информационным бюллетенем о дизайне , чтобы писать больше в этом духе (если вы можете это выдержать).

Посмотрите, как я делаю проект пользовательского интерфейса

, шаг за шагом

Я проведу вас через каждую часть UI-проекта — точно так же, как я проделал для всех, от Fortune 100 компаний до стартапов Y-Combinator .

Эксклюзивные руководства по дизайну. Подписано более 50 000 человек. Отказ от подписки в один клик.

7 отличных примеров типографики в веб-дизайне | by CanvasFlip

Ваши эксперименты с типографикой могут во многом повлиять на ваш сайт. Вот несколько хороших впечатляющих типографских дизайнов.

Изображение предоставлено designlisticle.com

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

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

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

«Гарнитура» и «шрифт» — два ключевых элемента в типографике, которые всегда неправильно понимались как одно и то же.

Гарнитура — это группа символов, букв и цифр, имеющих одинаковый дизайн. Например, Garamond, Times, и Arial — это гарнитуры. Тогда как шрифт — это особый стиль гарнитуры с заданной шириной, размером и плотностью. Например, Arial — это гарнитура; 16pt Arial Bold — это шрифт. Итак, шрифт — это творческая часть, а шрифт — это структура.

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

Типографии в веб-дизайне не всегда должны быть сложными и красивыми. Во многих случаях простая типографика творит чудеса. Размер шрифта и интервал также имеют большое значение.

Вот несколько примеров веб-сайтов с лучшей типографикой.

1. Antro.ca

Antro — это креативное агентство, которое фокусируется на пользовательском опыте с размышлениями и исследованиями.

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

При прокрутке вниз вы видите более крупные и толстые заголовки в сочетании с более мелкими и тонкими абзацами. В них используется шрифт Brandon-Grotesque без засечек.

2. Vintage Hope

Vintage Hope — это благотворительная организация, помогающая детям в Малави собирать ваши старые фарфоровые блюда для финансирования благотворительности.

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

За исключением заголовка, раскрашенного пальцами, меньшие заголовки выделены шрифтом Belta Bold. Текст меньшего размера относится к семействам Helvetica, Arial, Sans-Serif.

3. Level Up Life

Level Up Life — это простое игровое пространство. Он предназначен для отслеживания ваших достижений и вознаграждения за их выполнение. Игра предлагает упражнения на продуктивность, предлагая вам представить свою жизнь как игру и превратить ваши задачи в квесты. Вероятно, это единственное место, где вы никогда не откладываете на потом.

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

4. Rallyinteractive.com

Rally interactive — отличный пример минималистичного веб-дизайна, который хорошо работает. Это также отличный пример для типа формы.

Шрифт, используемый как в заголовке, так и в форме, — это Chronicle display, новый набор начертаний заголовка, который придает силу и полезность классическому шрифту с засечками. Chronicle Display был разработан для использования в больших размерах и содержит три варианта ширины, шесть разных весов (здесь вы видите обычный и легкий вес) и версии для двух разных размеров, каждый из которых доступен как с латинским, так и с курсивом.

5. Собственные детские

Детские — это веб-сайт, на котором размещаются рисунки, нарисованные и нарисованные детьми, и превращаются их в мягкие игрушки.

Здесь у вас есть два контрастных шрифта, которые хорошо сочетаются друг с другом.

Заголовки набраны шрифтом Gloria Hallelujah, курсивом. Это контрастирует с шрифтом Quicksand без засечек, используемым для части инструкций. Шрифт заголовка придает веб-сайту игривый вид, в котором основное внимание уделяется детской теме.

6. Thrivesolo

Это программное обеспечение для управления проектами, текст заголовка выполнен простым шрифтом, который обеспечивает четкое сообщение.

Этот вид простого сообщения через текст лучше всего работает с идеально формальным шрифтом и четкими буквами.

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

Во всем тексте используется шрифт clarendon Light, грузия.

7. Hix Snedeker

Эта девелоперская компания использует шрифт Proxima-Nova без засечек для заголовка и подзаголовка, однако в заголовке использование цветного заполнения мозаики дает уникальный вид Это.Заголовок взаимодействует с пользователем с помощью курсора, что заставляет внутренний узор перемещаться вместе с курсором.

Некоторые примеры сочетания шрифтов

В отношении сочетания шрифтов существует старое правило, которое гласит: согласование или контраст, но не противоречие.

Вот несколько примеров проверенных пар шрифтов, которые гарантированно избегают конфликтов.

Не менее важна проверка цветового контраста в вашем дизайне для оптимальной читаемости.

Например, Белый как текст работает с красным и синим фоном, а не с желтым и зеленым фоном.

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

Для веб-дизайнера необходимо избегать небрежности с типографикой. В то же время эксперименты и A / b-тестирование могут помочь понять, что работает визуально, а что нет.

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

Поделитесь этим блогом, если вы думаете, что это поможет кому-то вдохновиться типографикой 🙂

Используйте Visual Inspector, чтобы БЕСПЛАТНО проверять и вносить изменения шрифта в реальном времени на любом веб-сайте.

Исправить ошибки дизайна на Live-сайте без программирования — получить визуальный инспектор БЕСПЛАТНО

7 правил создания великолепного пользовательского интерфейса — Часть 2 | Эрик Д.Kennedy

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

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

• Размер (больше или меньше)
• Цвет (больший или меньший контраст) ; яркие цвета привлекают внимание)
• Толщина шрифта (жирнее или тоньше)
• Заглавные буквы (строчные, ВЕРХНИЙ и Заглавный регистр)
• Курсив
• Межбуквенный интервал (или — необычный термин предупреждение — отслеживание! )
• Поля (технически не свойство самого текста, но может использоваться для привлечения внимания, поэтому он входит в список)

Твердое использование цвета, заглавных букв и интервалов.Ребенком Джона Белла.

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

Up-pop и down-pop

Вы можете разделить все способы стилизации текста на две группы:

• Стили, которые увеличивают видимость текста . Крупный, жирный, с заглавной буквы и т. Д.
• Стили, которые уменьшают видимость текста . Маленький, менее контрастный, с меньшим отступом и т. Д.

Мы будем называть эти стили «up-pop» и «down-pop» в честь любимого прилагательного дизайнеров. Мы не будем называть это «визуальным весом», потому что это скучно.

Заголовок кейса от hugeinc.com

Заголовок «Материальный дизайн» вызывает много интересного. Это большой ; это высококонтрастный ; это очень жирный .

С другой стороны, элементы в нижнем колонтитуле того же сайта раскрываются вниз. Это малый , менее контрастный и менее жирный шрифт .

Теперь важная часть.

Заголовки страниц — единственный элемент для создания тотального стиля up-pop .
Для всего остального вам понадобится up- И down-pop .

Если элемент сайта нуждается в выделении, примените ОБЕИХ стилей up-pop и down-pop, но чуть БОЛЬШЕ up-pop.Это предотвратит перегруженность объектов, но придаст разным элементам визуальный вес, который они должны иметь.

Баланс визуальных стилей

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

Эти цифры на сайте Blu Homes привлекают внимание своим большим размером — но обратите внимание, что они одновременно преуменьшены очень легким шрифтом и менее контрастным цветом , чем темно-серый.

Маленькие метки под номерами , однако, серые и маленькие, также имеют прописные буквы и очень жирные .

Все дело в балансе.

Я оставлю вас с этим: стиль текста сложен .

Но каждый раз, когда я думал: «Может быть, этот текст просто не может выглядеть правильно, », я ошибался. Мне просто нужно было поправиться. И чтобы поправиться, мне просто нужно было продолжать попытки.

Итак, я предлагаю вам небольшое утешение: если он не выглядит хорошо, не волнуйтесь — он мог бы , если бы вы были лучше.Но послушайте, давайте продолжим попытки и сделаем себя лучше.

Эй, PS: если вы хотите узнать больше о стилизации текста, ознакомьтесь с Learn UI Design . Я подробно рассказываю об этом.

10 простых способов создания красивых документов Google

Вы помните, когда Документы Google были известны как Writerly? Да, это было давно, но с тех пор Документы Google превратились из простого текстового процессора в мощный инструмент для создания творческих и эстетичных Документов Google.

Google постоянно добавляет новые функции в свой набор текстовых редакторов, который также состоит из таблиц, слайдов, форм, рисунков Google и сценариев приложений. Это превращает его в профессиональный инструмент, который может конкурировать с лучшими программами обработки текста.

Фактически, с помощью надстроек и шаблонов вы можете превратить свой пакет Документов Google в мощный центр. Если вам интересно, как сделать старые скучные Документы Google красивыми, вот несколько уловок и советов, которые помогут вам создать симпатичные Документы Google.

Если вы раньше печатали большой документ, то знаете, как важно иметь заголовки, чтобы разбивать вещи на части. Paragraph Styles + дает вам возможность создавать собственные заголовки вне встроенных в программу инструментов редактирования.

Если вы обнаружите, что смотрите на большой кусок текста и задаетесь вопросом, как сделать ваши Google Документы более эстетичными? Тогда Paragraph Styles + — простой ответ.

Вы больше не ограничены размером заголовка программы.При использовании стилей абзацев + вы можете указать, какой шрифт, размер, стиль и формат вы бы предпочли при оформлении документа Google. Вы также можете сохранить несколько стилей.

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

• Выделите текст.
• Откройте боковую панель, перейдя в Надстройки> Стиль абзаца + .
• Щелкните заголовок , который вам нужен.

Paragraph Styles + также позволяет создавать оглавление для мегапроекта, над которым вы работали.

Lucidchart Diagrams — одно из самых популярных приложений, доступных для Google Docs. Это невероятно глубокий инструмент для создания, который позволяет создавать диаграммы и диаграммы для украшения вашего документа Google.

Если вы пытаетесь делать красивые заметки в документах Google, то этот инструмент для вас.Создав схему, вы можете вставить ее прямо в документ, а также поделиться ею.

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

3. Переведите

Вот этот, который мы очень любим. Хотя наш сайт основан на английском языке, наши писатели (и читатели) приезжают со всего мира.Удобно, когда Google Translate находится в углу вашего творческого Google Doc.

Чтобы заставить работать:

• Выделите текст в документе, который вы хотите перевести.
• Перейдите к Tools в строке меню.
• Выберите Translate Document и выберите язык .

Google Docs скопирует ваш документ на выбранном вами языке — отлично!

Если вы не хотите полностью дублировать документ, попробуйте установить Docs Paragraph Translate из Google Workspace Marketplace.

MindMeister предназначен для поклонников интеллектуальных карт. Это довольно простой в использовании и отличный способ создать красивый документ Google, особенно если вы визуально ориентируетесь.Чтобы составить карту разума, выделите маркированный список. Щелкните надстройку MindMeister .

Когда вы нажмете на нее, MindMeister превратит ваши маркеры в карту разума. Это простой способ украсить ваш документ Google, а также упростить информацию в нем. Это также один из лучших инструментов, когда дело доходит до мозгового штурма проекта.

Вы когда-нибудь получали документ, в котором было слишком много прописных или строчных слов в неправильных местах? Что, если бы этот документ был большим, и вам приходилось выбирать его для отдельных случаев, когда грамматика пошла не так?

Не беспокойтесь.Изменить регистр здесь.

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

Если вы не заинтересованы в загрузке Change Case, вы можете узнать, как изменить шрифты по умолчанию в Google Docs, а также для начала.

Нет ничего более неприятного, чем копирование и вставка из одного документа в другой только для того, чтобы увидеть все ошибки форматирования. PDF-файлы печально известны этим; когда вы переносите идеально отформатированный документ в Word, он обычно рассыпается, как выстрел из дробовика.

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

Как и Translate, Easy Accents — это простое дополнение для Документов Google, которое позволяет вставлять символы с диакритическими знаками в Документы Google без использования сочетания клавиш.

Это особенно полезно, если вы печатаете на другом языке и не знаете, какие сочетания клавиш нужно добавить в специальные символы. Easy accent поддерживает большое количество языков. Это удобный инструмент, который можно использовать сбоку от экрана, когда вы пишете на другом языке.

Облака слов в моде в наши дни и являются простым способом сделать Google Doc более креативным. Он позволяет создавать красивые карты слов, которые могут помочь проиллюстрировать вашу точку зрения в творческом Документе Google.

Word Cloud Generator делает это, читая весь документ, определяя вашу «тему», а затем визуализируя ее. Затем вы можете загрузить любые создаваемые вами облака слов, изменить их цветовые палитры и настроить количество слов, из которых они извлекаются.

Doc Tools — это надстройка, аналогичная ранее упомянутому Change Case. Он может настраивать отдельные слова в соответствии с желаемым стилем верхнего и нижнего регистра.

Однако Doc Tools также добавляет больше полезных функций для украшения вашего документа Google. Для этого есть панель инструментов, в которой вы можете увеличивать или уменьшать размер текста, выделять текст или сортировать списки от А до Я.

Наконец, есть Word Counter Max.Поскольку в Документах Google уже есть встроенная система подсчета слов, вы можете подумать, что она вам не нужна. Тем не менее, Word Counter Max имеет несколько действительно интересных функций.

По мере ввода Word Counter Max постоянно обновляет количество слов и символов в документе, которое вы можете видеть на боковой панели. Word Counter Max также позволяет вам установить цель письма и дает вам визуальное представление о том, насколько вы близки к ее достижению.

Если вам нужно включить оценку времени чтения, Word Counter Max также может вам в этом помочь.А если вы немного любите писать, вы даже можете создавать отчеты и отслеживать, сколько вы пишете ежемесячно.

Повышение эстетичности слайдов Google

Это лишь некоторые из надстроек Google Docs, которые можно использовать, чтобы ваши документы выглядели привлекательно. Однако есть гораздо больше, что вы можете использовать для улучшения ваших таблиц Google, слайдов Google и документов Google.

Как превратить слайд-шоу в видео

Вы знаете, как сэкономить время на презентациях? Записывайте свои презентации и превращайте их в видеоролики для своей аудитории с помощью этих инструментов.

Читать дальше

Об авторе Шианн Эдельмайер (134 опубликованных статей)

Шианн имеет степень бакалавра дизайна и опыт работы в сфере подкастинга.Сейчас она работает старшим писателем и 2D-иллюстратором. Она занимается творческими технологиями, развлечениями и производительностью для MakeUseOf.

Более От Шианн Эдельмайер

Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!

Нажмите здесь, чтобы подписаться

графический дизайн | искусство | Britannica

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

Эволюция графического дизайна как практики и профессии была тесно связана с технологическими инновациями, потребностями общества и визуальным воображением практиков. Графический дизайн практиковался в различных формах на протяжении всей истории; действительно, яркие примеры графического дизайна восходят к рукописям древнего Китая, Египта и Греции. По мере развития полиграфии и книжного производства в 15 веке вместе с ним в последующие столетия развивался прогресс в графическом дизайне, когда наборщики или наборщики часто разрабатывали страницы по мере того, как они устанавливают шрифт.

В конце 19 века графический дизайн стал отдельной профессией на Западе, отчасти из-за процесса специализации работы, который там происходил, а отчасти из-за новых технологий и коммерческих возможностей, вызванных промышленной революцией. Новые методы производства привели к отделению дизайна средства коммуникации (например, плаката) от его фактического производства. В конце 19 — начале 20 веков рекламные агентства, книжные издательства и журналы все чаще нанимали арт-директоров, которые организовывали все визуальные элементы коммуникации и объединяли их в гармоничное целое, создавая выражение, соответствующее содержанию.В 1922 году типограф Уильям А. Двиггинс ввел термин графический дизайн для обозначения новой области.

На протяжении ХХ века технологии, доступные дизайнерам, продолжали быстро развиваться, равно как и художественные и коммерческие возможности дизайна. Профессия значительно расширилась, и графические дизайнеры создали, среди прочего, страницы журналов, обложки для книг, плакаты, обложки компакт-дисков, почтовые марки, упаковку, товарные знаки, знаки, рекламу, кинетические названия для телевизионных программ и кинофильмов, а также веб-сайты. .К началу 21 века графический дизайн стал глобальной профессией, поскольку передовые технологии и промышленность распространились по всему миру.

Получите подписку Britannica Premium и получите доступ к эксклюзивному контенту. Подпишитесь сейчас

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

Исторические фонды

Рукописный дизайн в древности и средневековье

Хотя графический дизайн появился недавно как профессия, его корни уходят в глубокую древность. Иллюстрированные рукописи создавались в Древнем Китае, Египте, Греции и Риме. В то время как первые дизайнеры рукописей сознательно не создавали «графические дизайны», переписчики и иллюстраторы работали над созданием сочетания текста и изображения, которое одновременно гармонично и эффективно передавало идею рукописи.Древнеегипетская «Книга мертвых», содержащая тексты, предназначенные для помощи умершим в загробной жизни, является прекрасным примером раннего графического дизайна. Иероглифические повествования, написанные писцами, иллюстрированы красочными иллюстрациями на свитках папируса. Слова и изображения объединены в единое целое: оба элемента сжаты в горизонтальную полосу, повторяющаяся вертикальная структура письма отражается как в столбцах, так и на рисунках, а для письма и рисования используется единый стиль рисования.Плоские цветные участки окаймлены четкими контурами кисти, которые ярко контрастируют с богатой текстурой иероглифического письма.

В средние века рукописные книги сохраняли и распространяли священные писания. Эти ранние книги были написаны и проиллюстрированы на листах обработанной кожи животных, называемых пергаментом, или пергаментом, и сшиты вместе в формат кодекса со страницами, которые переворачивались, как страницы современных книг. В Европе в монастырских письменных комнатах было четкое разделение труда, которое привело к дизайну книг.Ученый, разбирающийся в греческом и латинском языках, возглавлял письменную комнату и отвечал за редакционное содержание, дизайн и выпуск книг. Писцы, обученные стилям букв, проводили дни, склонившись над письменными столами, переписывая страницу за страницей текста. Они указали место на макете страницы, где иллюстрации должны были быть добавлены после того, как текст был написан, с помощью небольшого наброска или описательной заметки, сделанной на полях. Иллюминаторы, или иллюстраторы, визуализировали изображения и украшения в поддержку текста.Создавая эти работы, монахи помнили об образовательной ценности картин и способности цвета и орнамента создавать духовные обертоны.

Производство рукописей в Европе в средние века привело к появлению самых разнообразных дизайнов страниц, стилей иллюстраций и надписей, а также методов производства. Изоляция и плохие условия для путешествий позволили проявиться узнаваемым региональным стилям дизайна. Некоторые из наиболее характерных средневековых подходов к искусству и дизайну, в том числе хиберно-саксонский стиль Ирландии и Англии и международный готический стиль, преобладавший в Европе в конце 14 — начале 15 веков, были использованы в рукописных книгах, которые достигли основных инноваций в графическом дизайне. .Келлская книга ( ок. 800 гг. Н. Э.), Иллюстрированная книга Евангелий, которая, как считается, была завершена в начале 9 века в ирландском монастыре Келлс, известна как одна из самых красивых рукописей гиберно-саксонских языков. Его страница, изображающая появление имени Иисуса Христа в Евангелии от Матфея 1:18, называется «страницей Чи-Ро». В дизайне монограмма XPI, которая использовалась для обозначения Христа во многих рукописях, представляет собой замысловатый узор из мерцающих цветов и спиралевидных форм, расцветающих на всей странице.Страница Chi-Rho из Келлской книги — это парадигма того, как графическая форма может стать метафорическим выражением духовного опыта: она ясно передает сакральную природу религиозного содержания.

С 10-го по 15-й век рукописные книги в исламских странах также достигли высокого художественного и технического уровня, особенно в рамках традиций персидской миниатюрной живописи. Вершина ширазской школы дизайна и иллюстрации персидских рукописей очевидна на странице, на которой изображена книга Khamseh («Пятерка») великого поэта XII века Нехами.