Текст как он есть. Дизайн сайта

Дизайну в России мало где учат. И одним из лучших решений является – почитать Ководство Артемия Лебедева и приложить к этому своё мнение о том, хорошо ли это смотрится или нет. Мне всегда больше всего нравились простые дизайны. Чем проще, тем лучше. Поделюсь своим опытом дизайнера.

Сегодня небольшая заметка о дизайне сайтов. А именно об оформлении текстов. Максимально удобное оформление текста позволяет комфортно читать всё с экрана монитора или ноутбука.

Число символов в строке. Колонки

Откройте любую книгу или газету. Дальше не читайте, пока не найдёте какое-нибудь печатное издание.

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

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

А вот и наглядный пример. Культовая книга "Бизнес в стиле фанк навсегда" за авторством Кьелла Нордстрема и Йонаса Риддерстрале. [ну у них и имена и фамилии, склонять по-русски срашно. Да что уж там, страшно даже сделать опечатку]. В открытом виде книга имеет размеры, равные листку формата А4. Большие поля снизу, сверху и по бокам. Большое количество цветных иллюстраций и врезок. За счёт того, что колонки текста неширокие - шрифт сравнительно небольшой. Но это не вызывает отторжения, так как текстовые блоки невелики по размерам. Менее сорока строк и ширина текста меньше 80 символов - всё это нормальные величины. Если в вашей книге на одной странице будут умещаться текстовые блоки размером 200 строк и шириной 150 символов, подумайте об эргономике ещё раз. Читать это будет очень неудобно.

А теперь подумайте, почему WEB 2.0-дизайны обычно основываются на фиксированной по ширине и, при этом, часто эта ширина очень невелика. И/или на сайте используются крупные шрифты. Подсказка: такой дизайн номного приятнее читать, чем статью с плотным и мелким текстом, который расползается по всей размерности браузера. Представьте, что вы читаете ЭТО на мониторе диагональю 30 дюймов. Да-да, вам собственноручно потребуется подстраивать размер окна браузера, чтобы всё выглядело более-менее прилично.

Фишка в том, что это индустриальный стандарт такой, что ширина строки должна быть не более 50-60 символов. В противном случае читабельность текстов резко ухудшается.

Размер шрифта

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

Цвет текста

Теперь про цвет текста. Цветовосприятие… Нужно понимать, что синий текст на чуть более тёмном оттенке синего смотрится ужасно. Дело не только в том, что это некрасиво. Проблема в том, что такой текст сложно заметить и очень трудно читать. При длительном чтении такого текста любому станет нехорошо.

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

Самым лучшим цветовым сочетанием является чёрный текст на белом фоне. Выворотный шрифт (чёрный фон и белый текст) считается намного более плохим решением. Хотя о вкусах не спорят.

С засечками или без?

Делать шрифт с засечками или без – решать вам. Но я могу сказать, что когда сайт slon.ru только открывался, там был шрифт Georgia с засечками. И выглядело это очень кайфово! Дизайн был шикарным. У меня даже фотки остались. А потом по советам web-мастеров, slon.ru сделал шрифт без засечек. И всё стало выглядеть более уныло.

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