Дизайн текста: как сделать его «живым»

Дизайн текста: как сделать его «живым»

Доброго времени суток, друзья! Сегодня впервые на моем блоге вы можете увидеть гостевой пост. Из которого вы узнаете как правильно оформлять тексты и как важно не только написать качественный текст, но и грамотно расположить его на странице. Гостевой пост подготовила компания — www.textstyle.ru.
Дизайн текста
Наверняка каждый встречал на просторах Интернета сайты, текст на которых просто невозможно или неприятно читать: или оформлен он как сплошной набор букв, серая масса, или, наоборот, веб-дизайнер переусердствовал с количеством цветов. Такие ресурсы, как правило, не привлекают к себе внимания и не вызывают положительных эмоций: читать размещенный на них текст скучно и утомительно. Поэтому очень важно уделять особое внимание дизайну текста, контента. В настоящее время такую работу выполняет особый специалист – вебстальщик.

специалист – вебстальщик

Начнем с основного текста

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

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

Поговорим о заголовках

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

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


Картинки кликабельны

Размеры

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

Следующее, на чем следует остановиться, — это отступы

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

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

Вот несколько самых главных и первых требований к грамотному оформлению текста на веб-ресурсе. Многое, разумеется, зависит от самой тематики сайта и общей дизайнерской идеи. Посмотреть примеры грамотно оформленного текста можно здесь: http://www.textstyle.ru/.

Надеюсь, из статьи вы узнали новые полезные вещи для себя.

А вот по этой ссылке http://www.saturnteplo.ru/ вы найдете множество электрической продукции, такой как электрические котлы, электрические конвекторы и многое другое.

Игорь (Luckyboy)

Comments (16)

  • Nana

    Занимательно. Не встречала пока подобных статей. Спасибо.

    24 ноября 2010 at 16:00
  • Погорельских

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

    24 ноября 2010 at 18:09
    • Luckyboy

      Welcome 🙂

      24 ноября 2010 at 22:43
  • Ekaterina

    Действительно, статья очень полезная. Особенно понравилось про оформление заголовков.

    24 ноября 2010 at 18:58
    • Luckyboy

      Рад слышать 🙂

      24 ноября 2010 at 23:37
  • TextStyle

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

    24 ноября 2010 at 19:06
  • Archil

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

    24 ноября 2010 at 19:45
    • Luckyboy

      А у меня из-за неё в кеш гугла 10К страниц влетело 🙂 А так около 1К на блоге. Вот я и сменил по быстрому, лень было закрыть от индексации.

      24 ноября 2010 at 23:35
  • Алексей

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

    24 ноября 2010 at 20:05
    • Luckyboy

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

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

      24 ноября 2010 at 23:40
    • rusinmd

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

      П.С. Как насчёт центрирования текста?
      У первой картинки верхний отступ можно и больше сделать.

      25 ноября 2010 at 13:58
  • TextStyle

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

    25 ноября 2010 at 11:06
  • koordinator7

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

    12 декабря 2010 at 15:30
  • Voktis

    Как руководитель проекта TextStyle я устанавливаю гибкие цены для партнеров. Цены для клиентов представлены на сайте http://www.textstyle.ru стандартный дизайн текста для обычного сайта 8 т.р. Для веб-студий и SEO-компаний — дешевле на несколько тысяч рублей. По сути это цена дизайна половины сайта у среднего дизайнера-фрилансера.

    Статья хорошая, но в ней не учли одну главную вещь – кто есть посетитель сайта? А точнее его возрастную категорию.
    >>>Дело здесь в том, что мы решаем ПОЛ проблемы удобочитаемости текста. Другая половина — это копирайтинг и структура подачи материала решается клиентом (которому несложно показать как бить текст) и копирайтерами. Насколько он понятен в плане разбиения текста на небольшие куски, которые легко «переварить».

    13 декабря 2010 at 14:50
  • koordinator7

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

    15 декабря 2010 at 0:58
  • Murketolog

    А по каким критериям идет оценка логотипа или дизайна корпоративного
    сайта? Как обычно — итерационно. Есть список стилей которые мы оформляем базово.

    18 июня 2011 at 22:03

Comments are closed.