Как сделать красивый сайт — текст

newspaper beautysite - Как сделать красивый сайт - текст

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

Шрифт

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

  • наиболее легко читаемый шрифт — Roboto;
  • оптимальный размер шрифта — 13-16px;
  • выравнивание — по левой стороне или по краям (зависит от дизайна);

Ни в коем случае не делайте текст белым, если шаблон черный, это даст жуткий резонанс, который, в свою очередь, очень сильно будет бить по глазам. Для таких случаев можно применить один из вариантов серых цветов (#dcdcdc; #dadada; #cccccc; прочее).

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

Позиционирование

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

text align correctly - Как сделать красивый сайт - текст

На скриншоте выше показана предыдущая версия данной стать в предыдущем дизайне. На плоском дизайне выравнивание по краям является безальтернативным решением.

Отступы

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

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

Креатив

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

Не забудьте почитать про подбор цветов

Читайте также

Похожие записи

PSD — особенности работы с внутренним файлом Adobe Photoshop
PSD (Photoshop Document) — внутренний формат файлов для Фотошопа, представляющий из себя многоуровневый файл, применяемый для сохранения макета дизайна. Хранит...
Facebook — небольшой гайд о первичной настройке страницы для бизнеса
В Facebook находится одна из наиболее платежесспособных аудиторий сети, приблизительно 70% — пользователи в возрасте 24-44 лет (т.е. с деньгами),...
Минимализм в web-дизайне: пять основ
Минимализм активно применяется в веб-дизайне, позволяя уменьшить количество всех ненужных элементов и достичь чистой, а также суперэффективной компоновки. Если вы...
Как увеличить продажи, UX-советы, для повышения конверсии
Взять и просто сверстать страницу, назвав ее лендингом и ожидая мгновенных продаж только от одной рекламы не достаточно. Вы можете...
Использования анимации и динамических эффектов в веб-дизайне
Недавно освоился с двумя замечательными плагинами: animate.css и wow.js, которые внедрил в лендинг. Получилось очень неплохо — множество эффектных переходов,...

Комментарии

  1. @Inwer пишет:
    07.08.2018 в 14:59

    Кто-нибудь пользовался вот этими http://c-wd.ru/tools/ инструментами? Они мне помогли сайт сделать.

  2. @виктор пишет:
    21.12.2018 в 12:42

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *