Веб-типографика: создаем таблицы для чтения, а не для красоты

Наталия Шергина, фрилансер-редактор и студентка Нетологии, специально для блога перевела лонгрид Richard Rutter о типографике веб-таблиц.

Процесс редактирования цвета в табличном редакторе

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

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

Относитесь к таблицам как к тексту, который будут читать

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

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

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

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

Правильно составленная таблица легко читается и выявляет общие паттерны и закономерности в анализируемых данных. Мастер типографического дизайна Ян Чихольд пишет1:

Читайте также:  NAS Synology автоматическое удаление старых файлов через bash скрипт

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

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

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

Сравнение файлов Linux с помощью GUI

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

1. Kompare

Сравнение файлов Linux с помощью GUI

Kompare — это графическая утилита для работы с diff, которая позволяет находить отличия в файлах, а также объединять их. Написана на Qt и рассчитана в первую очередь на KDE. Кроме сравнения файлов утилита поддерживает сравнение каталогов и позволяет создавать и применять патчи к файлам.

2. Meld

Сравнение файлов Linux с помощью GUI

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

3. Diffuse

Сравнение файлов Linux с помощью GUI

Diffuse — еще один популярный и достаточно простой инструмент для сравнения и слияния файлов. Он написан на Python 2. Поэтому в современных версиях Ubuntu программу будет сложно установить. Поддерживается две основные возможности — сравнение файлов и управление версиями. Вы можете редактировать файлы прямо во время просмотра.

4. KDiff3

Сравнение файлов Linux с помощью GUI

KDiff3 — еще один отличный, свободный инструмент для сравнения файлов в окружении рабочего стола KDE. Он входит в набор программ KDevelop и работает на всех платформах, включая Windows и MacOS. Можно выполнить сравнение до трех файлов Linux или даже сравнить каталоги. Кроме того, есть поддержка слияния и ручного выравнивания.

5. TkDiff

Сравнение файлов Linux с помощью GUI

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

Читайте также:  Где найти хорошие и легальные бесплатные картинки

#4 Уважайте цветовые сочетания

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

Чтобы глазу было приятнее, берите не черный, а темно-серый, и не белый, а алебастровый. Ориентируйтесь на собственные эстетические ощущения — если цветовое сочетание режет глаз, хладнокровно отбросьте вариант. Понять, какие оттенки хорошо смотрятся вместе, помогут сервисы вроде Coolors, Paletton и Adobe Color CC. Там легко собрать свою палитру или взять уже готовые.

#4 Уважайте цветовые сочетания

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

Как сделать текст на сайте максимально читабельным

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

Так как же сделать так, чтобы ваш текст захотели читать? Вот несколько советов.

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

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

Поэтому, работая с текстом в макете, дизайнеру нужно ставить себя на месте пользователя и задавать себе такой вопрос: «Хочу ли я это читать? Приятно ли мне потратить 5, 10, 15 минут на чтение этого текста?».

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

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

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

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

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

Используйте иерархию

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

Читайте также:  Изображение в iOS 12.1 beta подтверждает дизайн нового iPad Pro 2018 года

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

Помните о контрасте

Как сделать текст на сайте максимально читабельным

Контраст является ключевым фактором для того, чтобы текст легко читался.

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

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

Делайте отступы между абзацами и между строк

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

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

Разбавляйте текст изображениями

Скучно читать статью или смотреть страницу, в которой нет ни одной картинки. Хорошей идеей будет разбавлять текст визуальными пояснениями либо просто изображениями по теме. Читать станет гораздо приятней. Картинки любят все, а уж качественные и с душой подобранные (а может даже с внесенными своими изменениями) — что и говорить.

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

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

Пишите цепляющие заголовки

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

К примеру, я могла бы назвать статью «Читабельность текста в вебе». Звучит как тема курсовой, да? Вместо этого я написала в заголовке «Как сделать текст на сайте максимально читабельным» — тем самым как бы предлагая конкретные советы и действия, которые можно и применить и которые повысят читабельность текста на сайте.

П.С.