Мастер веб-дизайна. Урок №6 — «Как сделать легко читаемые текст»

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

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

Пункт номер два. Шрифт не должен быть большим или маленьким. Как мы видим, на одном из моих сайтов с братом подобран оптимальный шрифт для чтения. В веб-дизайне каждый волен делать все, что хочет, но, так получается, что многие начинающие веб-дизайнеры думают только о себе, не заботясь о посетителях своих сайтов. А это очень зря. Ведь посетителей гораздо больше и они намного критичнее относятся к каждому элементу на вашем сайте, чем вы сами. Если им что-то не понравится, они практически моментально закроют вашу страничку. Согласитесь, это нам не нужно. Очень часто это происходит когда на сайте либо уже большой, либо совсем маленький текст. Читать ни тот, ни другой удовольствие не доставляет и даже, более того, жутко раздражает и выводит из себя. Я рекомендую вам использовать шрифт 12 или 14 кеглей. Здесь у нас на сайте 12 кеглей. Довольно удобно читать. Конечно, все зависит от тематики сайта. На информационных порталах, я не советую ставить больше, потому что там текста много, а вот если какие-то промо-сайты или сайты-визитки, то можете поставить и 14 кеглей. Будет хорошо смотреться. Конечно, заголовки не стоит делать таким же размером. Они, как обычно, бывают больше. Здесь уже стоит ориентироваться по своему дизайну, чтобы заголовок вписывался в общую картину. Я обычно ставлю заголовки от 18 до 72 кеглей. Отлично! В общем, всегда учитывайте размер текста на своих дизайнах, чтобы он был оптимальным для чтения, не слишком маленьким, чтобы глаза не уставали и не слишком большим, чтобы не напрягало людей. Переходим к третьему пункту.

И в третьем пункте я рекомендую вам выбирать шрифт, который 100% есть на компьютерах всех пользователей, то есть вы видите картинку, которая по умолчанию есть в Windows. Это несколько шрифтов, которые точно будут отображаться на  каждом компьютере. Вот те шрифты с завитушками и прочие всякие оригинальные они не установлены на большинстве компьютеров и скорее всего не будут отображаться, дизайн сайта можно от этого потерять, поэтому я советую использовать стандартные шрифты, которые есть на всех компьютерах и поменьше обращаться ко всяким оригинальным. Да, сейчас есть технологии CSS, позволяющие подгружать шрифт с сервера, не устанавливая на компьютер его, но опять же здесь вам нужно знать СSS-стили, а это для начинающих дополнительная головная боль. Здесь вы можете либо выучить таблицу стилей, либо просто использовать безопасные шрифты вот это вот. Второй вариант предпочтительнее. Я им сам пользуюсь, потому что вы должны делать дизайн своих сайтов, рассчитанный на большинство пользователей, чтобы было всем удобно, а не только нескольким человекам, которые зайдут на ваш сайт. Я лично, на 80% всех дизайнов, которые разрабатываю, пользуюсь всего двумя шрифтами – это Verdana и Impact. Verdana, по моему мнению, лучше всего читается, я его использую в тексте, а Impact очень хорошо подходит для заголовков. Как вы видите, шрифт сам по себе жирный и, если он будет красным и сделать побольше размером, то будет хорошо привлекать внимание. Можете так же, как и я использовать в заголовках. Отлично! Переходим к следующему пункту. И это у нас выравнивание текста.

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

И следующий пункт – это использовать заголовки и подзаголовки. Сегодня у людей очень мало времени и если они за пару секунд не найдут на вашем сайте, то что искали, то просто не задумываясь уйдут, а вам это разумеется не нужно. Люди заходят на сайты, так же как и вы, чтобы получить какую-то информацию. К сожалению, даже самый красивый дизайн сайта не способен долго удерживать посетителя. Поэтому, зная, что человек хочет получить какую-то информацию, для этого сначала мы должны привлечь его внимание, чтобы он заинтересовался, а уже потом рассказать ему в тексте, что мы знаем. Привлекает внимание лучше всего заголовок. А подзаголовок свяжет хорошо сам заголовок с текстом. Всегда используйте вот такую вот связку на свих текстах, страницах и людям будет очень просто находить информацию на вашем сайте, и они полюбят ваш сайт. Так же если у вас длинный текст, вы можете разбить его на абзацы и дать каждому абзацу свой подзаголовок, чтобы человек, зашедший на ваш сайт, не тратил время на чтение всего текста, а за пару каких-то там секунд нашел то, что ему нужно. Отлично! Переходим к следующему пункту.

И это пункт разделять текст абзацами. Это делать нужно обязательно. Думаю, вы наверняка натыкались на километровые тексты, сплошные тексты, от которых быстро устаешь. И устаем мы потому, что в таких текстах нужно постоянно быть сосредоточенным, чтобы не потерять строчку, на которой читаешь, а это отнимает много сил. И чтобы было легче и приятнее читать, каждые 2-3 предложения или каждые 3-5 строчек разделяйте абзацами. Так информация будет восприниматься гораздо легче. И сделайте это, и посетители просто полюбят ваш сайт и будут по долгу проводить на нем свое время. Отлично! Идем дальше.

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

Не используйте на странице больше трех шрифтов. По моим наблюдениям, если пользоваться, если использовать больше трех разных шрифтов, то единство будет теряться и дизайн перестанет быть гармоничным. Лучше взять три шрифта и менять у них размер, цвет, наклон, жирность и подчеркивание. Чем если взять пять-семь разных шрифтов и с ними ничего не делать. Так будет гораздо лучше. Я в своих работах практически всегда использую 1-2 шрифта, не больше. Очень редко, когда три. Для большинства сайтов этого вполне хватает, перегружать массой различных шрифтов сайт, это опять же издевательство над пользователем. Человек так устроен, что всю информацию он систематизирует и при виде одинаковых каких-то блоков с текстом, заголовков одинаковых на разных страницах, он будет примерно чувствовать, что это подзаголовок, заголовок, текст какой-то и что будет после этого идти. Он уже автоматически будет  быстрее искать информацию на вашем сайте, так как будет уже знать структуру вашего сайта, ему будет легче ориентироваться. А вот если человек каждый раз будет видеть разные шрифты, то он постоянно будет сбиваться с толку, тратить больше времени на поиск информации. А знаете, люди это очень не любят и, как следствие, всего этого человек долго не задержится на вашем сайте. А это вам не нужно совсем. Поэтому учтите это и используйте не больше трех шрифтов. Отлично! Идем дальше.

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

И последнее, о чем я хочу рассказать, нужно регулировать расстояние между буквами, то есть регулировать керлинг. Бывают такие шрифты, в которых расстояние между буквами может быть разное. К примеру, здесь мы видим, что расстояние между M (эм) и I(ай)  значительно больше, чем, к примеру, расстояние между двумя буквами ll (эл). И это можно отрегулировать с помощью не хитрых действий. Нажимаете вот эту кнопочку, вылазит менюшка «Символ», вы ставите там, где вам нужно, здесь, как вы видите, керлинг, и вы ставите чуть поменьше, чем нужно. Как вы видите, стало гораздо лучше, расстояние между всеми буквами практически одинаковое и заголовок выглядит естественнее и легче читаться будет. Особенно важно это учитывать при разработке логотипов, если вы будете заниматься — это вам понадобится в первую очередь. В веб-дизайне это не столь критично. В основном необходимо редактировать это только в самих заголовках, либо в каких-то графических шапках сайта, где используются большие шрифты, чтобы было красиво. Сам же текст я не советую вам редактировать, потому что это очень муторное занятие, вам просто это надоест. Не стоит этого делать. Ну что ж, с теоретической частью на этом все. И сейчас наступает очередь домашки.

Вам нужно найти три любых текста, каждый на 2-3 страницы, шрифтом 12, 14 кеглей и с учётом того, что вы сегодня узнали 10 пунктов, переделать каждый текст. Приступать к просмотру следующего видео, вы можете только после выполнения этого задания. Эта тема очень важная. Вы должны ее усвоить, а без практики вам это не дастся. Если вы думаете, что вы и так запомните, я вас огорчу, этого не будет. Запомнить можно, если что-то только делая, практикуясь. Поэтому вам сейчас нужно сделать, обработать, возьмите три сплошных текста и пройдитесь по всем пунктам, которые мы сейчас разобрали.

Желаю вам удачи и успехов в выполнении этой домашки и встретимся в следующем видео!

Пройдите курс "Профессия веб-дизайнер" за 10 дней бесплатно:



Понравилась статья?
Сделайте доброе дело — поделись ей со своими друзьями и коллегами, кликнув по всем кнопкам соц.сетей:

Нравится
comments powered by HyperComments