Секреты веб-дизайна. Урок №4 — «Типографика. Как легко стать повелителем текста»

Приветствую Вас, уважаемый коллега!

Мы приступаем к очень важной теме вообще всего веб-дизайна. На очереди у нас типографика. Как обычно я расскажу что это, зачем и как это потом все применять в веб-дизайне. Что такое типографика? Скажем, в веб-дизайне, да и не только в веб-дизайне, скажем в полиграфии и так далее – это предоставление информации в виде текста таким образом, что бы человеку, который будет ее просматривать, было максимально удобно, приятно и комфортно воспринимать эту информацию. Наверняка вы знаете. Что люди приходят на все сайты не для того, что бы поглазеть на какие-то красивые картинки, а для того, что бы получить нужную ему информацию. Соответственно, вот эту информацию в виде текста мы должны предоставить в таком виде, что бы человек максимально быстро ее нашел, прочитал и понял. То есть, вот такое простое объяснение, которое я лично для себя сформировал. Естественно, в интернете вы можете найти кучу различных объяснений данного термина, но, тем не менее, саму суть я рассказал и, соответственно на примере сейчас я вам покажу, как работать с типографикой. Это очень важная тема, потому что большая часть новичков не уделяет ей никакого внимания, либо очень мало времени. Но, если вы посмотрите на любые сайты, давайте, допустим, сейчас зайдем в браузер и зайдем на какой-нибудь сайт, давайте даже рассмотрим ту же тему типографики «Типографика в веб-дизайне» и рассмотрим парочку сайтов, сколько на ней контента, сколько на ней различной графики и так далее. То есть, вот у нас первый сайт пошел, примерно 60% здесь у нас идет текст. Следующий сайт, здесь у нас текст занимает примерно 80-90%. Следующий сайт, здесь примерно процентов 60-70. То есть, как вы видите, можно, конечно, сайтов больше открыть, но особо не изменится, можно посмотреть другую тему, так же особо ситуация не изменится, где-то больше чуть, где-то чуть меньше. Примерно текстовая информация занимает на большинстве сайтов, порядка 50-80%. Соответственно, если вы хотите стать крутым дизайнером, что бы ваши сайты были максимально качественными и достигали поставленные перед ними цели, то, соответственно, вам большую часть своего времени необходимо уделять именно типографике, потому что, когда вы научитесь доносить нужную информацию до посетителя, которую он хочет получить, максимально удобным для него способом, то, соответственно, сайты у вас будут не только красивыми, но удобными и в дальнейшем люди будут у вас заказывать снова и снова дизайн, потому что конверсия у них будет высокая, а для бизнесменов это самый нужный показатель. Соответственно, в данном курсе вообще всю стратегию разработки дизайна я выставил именно таким способом, что первую большую работу над дизайном сайта мы начинаем именно с текста – это самая важная, на мой взгляд, составляющая часть создания дизайна сайта, поэтому начнем мы именно с нее. Точно так же, как и в других предыдущих курсах, я разбил все на этапы на разные небольшие части, что бы вам было проще усваивать информацию и она у вас четко структурировалась, и отложилась в голове, была как разложена по полочкам. В этом уроке мы с вами разберем типографику, соответственно, разберем, как весь текст правильно, гармонично расставить по своим местам в дизайне сайта. Дальше мы нарисуем основные элементы сайта, то есть, обычным черно-белым цветом с оттенками серого. Дальше мы разберем колористику, потом добавим графику, покажу базовый принцип обработки и дальше мы добавим интерактивность, то есть, такие вот виды, как будет изменяться ссылка при наведении, как будет меняться кнопка, различные блоки и так далее. То есть, что бы наш сайт был не статичным, а динамичным. Сейчас, соответственно, в данном уроке мы полностью время посетим типографике, то есть, работе с текстом.

Ну что ж, давайте приступим. Начнем со шрифтов. Что такое шрифты, как ими пользоваться в фотошопе, где брать, какие использовать и так далее. Что бы посмотреть какие у вас есть шрифты в фотошопе вам достаточно перейти на инструмент «текст» и вот здесь есть у нас списочек со шрифтами, которые установлены в вашей ОС. То есть, у кого-то будет чуть больше, у кого-то чуть меньше. Сразу хочу сказать, что далеко не все шрифты, которые здесь есть отображаться будут корректно в браузерах. Сейчас я вам расскажу про безопасные шрифты, которые лучше всего использовать при разработке дизайна, которые будут одинаково отображаться во всех браузерах корректно, потому что, если вы выберете какой-то шрифт, который, скажем, такой уникальный, с завитушками всякими и так далее, которые есть у вас на компьютере, то у 99% тех людей, которые будут заходить к вам на сайт, данный шрифт будет не отображаться и изменяться на какой-то стандартный, поэтому вся прелесть вашего дизайна просто сойдет на нет. Поэтому, первое правило, которому вы всегда должны следовать, то есть, выбирайте безопасные шрифты. Как же это делать? Где их брать? На самом деле все очень просто. Есть такой в интернете сервис, который называется Google Fonts. Вам необходимо просто в строке браузера вбить www.google.com/fonts / . Откроется у вас такая страничка, где у вас будут все шрифты, которые 100% будут качественно отображаться во всех браузерах, то есть, не будет никаких искажений, и, соответственно, все вы их можете скачать и использовать в фотошопе при разработке. Здесь есть разные шрифты, как на английском, так и на русском. Давайте сейчас пройдемся по самому сайту, по фильтрам, которые есть и я вам покажу, как пользоваться и устанавливать фотошоп. Итак, здесь у нас сначала идет семейство различных шрифтов, вы можете выбрать, и, соответственно, отсортируются вообще все шрифты, которые можно выбирать. То есть, если мы выключаем какую-то галочку, как вы видите, у нас количество шрифтов уменьшается и становится меньше. Соответственно, если мы хотим, что бы их стало больше, ставим все галочки. Ну, я бы не рекомендовал по началу выбирать, потому что все шрифты будут нормально отображаться, смысла отключать я особого не вижу, если вы не делаете какой-то сайт, заточенный именно под какую-то инфографику, допустим, где будет много текста и необходимо сделать что-то креативное. Так, здесь мы параметры можем выбирать, скажем, то, насколько будет жирный шрифт у нас, то есть, если мы передвигаем ползунок направо, шрифт становится, вот эти шрифты, которые у нас отображаются, они максимально жирные. То есть, вы видите все эти шрифты, которые отфильтровались, они максимально жирные. Если мы хотим, что бы они были максимально вот эти вот линии максимально тонкие, максимально узкие, то, соответственно, передвигаем этот ползунок налево и у нас, соответственно, отфильтруются все шрифты и выдают такие вот, которые также будут безопасно отображаться в браузерах. Ну, я рекомендую поставить на серединку, что бы выдавались максимально привычные для глаза, потому что если вы будете впадать из крайности в крайность, выбирайте либо шрифты где очень тонкие линии, либо жирные, то, соответственно, и то и другое очень тяжело воспринимается глазом, тяжело обрабатывается мозгом человека, соответственно, напрягает читателей, люди не любят такое. Вообще, по поводу шрифтов я хочу сказать, что чем проще, тем лучше. Вообще, самый лучший дизайн такой, который человек не замечает и видит только нужную ему информацию. Не старайтесь перегружать человека, посетителя сайта графикой – это делает дизайн хуже.

Дальше, здесь у нас регулируется наклон. Если вы хотите, что бы наклон был максимальный, то передвигайте направо. Если хотите, что бы все буквы были у нас прямо, то налево. Мы ставим примерно посерединке и здесь мы регулируем ширину букв. То есть, такие параметры, я, честно говоря, никогда ими не пользуюсь, они стоят у меня как по умолчанию. Далее вот здесь вот хороший пункт. Вы можете выбрать либо английский, то есть, по умолчанию стоит, либо выставить кириллицу, то есть, русский язык, вам показываются русские шрифты. Вот так мы работаем в основном с русско-говорящими странами. Я в основном сразу выбираю Cyrillic, что бы все шрифты у нас фильтровались именно по нашему языку. Если, соответственно, вы здесь что-то не так выставили, вы можете нажать вот эту кнопочку, и у вас все выставятся настройки, которые были изначально. Давайте выберем русский язык. Рассмотрим мы для начала эту вкладочку, те параметры, которые здесь есть. Здесь вы  можете вбить текст, который может отображаться вот в этих небольших блоках, в которых мы просматриваем то, как выглядит сам шрифт, его отображение. То есть, допустим, вы разрабатываете какой-то дизайн сайта в фотошопе и вам необходимо посмотреть, допустим, как будет смотреться текст в блоке с менюшкой, к примеру. Вы сюда его вбиваете, и здесь можем смотреть, как это будет отображаться. Соответственно, если вам необходимо, что бы текст был меньше, здесь просто в размере, здесь написано «size» по-английски, выбираем размер текста и точно так же смотрим, как это отображается, потому что бывает такое, что в 28 пикселей смотрится шрифт нормально, выставляем, допустим, 12-14 пикселей и шрифт вообще не читается. То есть, просматривайте именно в том размере, в котором будете его применять в фотошопе. Так, здесь у нас отображение дат, по-моему. Как бы я особо никогда не пользуюсь данным списком, фильтром точнее, то есть, основные параметры – это, которые я выбираю – это именно русский язык, текст и, соответственно, размер. Как бы дальше я просто скачиваю данный шрифт, который мне необходим и начинаю работать с ним в фотошопе. Ну, я думаю, это точно так же, как в любой какой-то программе, плагины есть там, 999 функций, но пользуешься обычно десятью.

Так, дальше. Дальше мы можем посмотреть, сколько будет загружаться данный стиль, если будем подключать к нашему сайту, по времени. Ну, для дизайнеров это неважная информация. Так, здесь у нас, в принципе, нет ничего интересного. Вернемся назад. Рассмотрим вот эти остальные вкладки, которые здесь есть – word. Ну, это то, как будет отображаться в word. Ну, вот интересно, как мы работаем в фотошопе, а дальше интересный параграф – это то, как будет отображаться данный шрифт в таком вот блоке. То есть, мы можем посмотреть и визуально понять какое из этих двух шрифтов будет более читаем, и как бы на таком блоке гораздо более понятный, чем по одной строчке. То есть, вы можете проверять удобство данного шрифта и именно в этой вкладке. Далее мы можем посмотреть по заголовкам. Если вы, допустим, хотите подобрать для своего сайта какой-то заголовок, что бы он был немного креативным таким шрифтом, то, соответственно, переходите в пункт меню «Poster», здесь все шрифты отображаются в виде таких вот заголовков, изначальных в размере 64 пикселя. Естественно, все это применить, сделать побольше, сделать поменьше и посмотреть, как будет отображаться. Плюс здесь мы можем сделать инверсию, посмотреть то, как будет отображаться на черном, на темном фоне. Вот, собственно, и все. То есть, когда мы определились со шрифтом, нажимаем на кнопочку «Add to Collection», после этого нажимаем на вот такую стрелочку, где мы можем скачать. Здесь говорится, что необходимо скачать zip-файл. Скачиваем, допустим, на рабочий стол, после этого открываем, у нас здесь идут шрифты. Извлекаем на рабочий стол, допустим, вот у нас 4 извлеченных шрифта, их сейчас необходимо установить. То есть, в Windows 7 это делается очень просто. Мы запускаем, кликаем 2 раза левой кнопкой мыши, открывается такое окошко и у нас есть кнопочка «Установить», мы ее просто жмем, и у нас устанавливается автоматически в Windows и в фотошопе данный шрифт. То есть, естественно, если вы хотите, что бы шрифт был и курсивом, и жирный, и обычный вариант, то вам необходимо установить по очереди вот эти все шрифты. Как бы шрифт один, но варианты его отображения установить необходимо по отдельности. Соответственно, после этого мы можем найти данный шрифт в фотошопе. Давайте перейдем, посмотрим, как будет отображаться. Вот у нас шрифт, который установили – Cuprum, и можем изменять его наклон, жирность и так далее. То есть, если бы мы установили только обычный вариант, то у нас эти наклон и жирность были бы не активны и, соответственно, мы не могли бы менять. А так мы можем добавить жирность, изменить наклон, короче говоря, обычные действия с текстом в фотошопе. Вот так вот легко и просто устанавливаются безопасные шрифты, которые в то же время и относительно оригинальные, то есть, не стандартные, которые есть в Windows, немного измененные и здесь вы можете найти довольно красивые такие шрифты, которые будут выделять ваш дизайн, но при этом у всех одинаково красиво отображаться, что, наверное, самое главное, что стоит учитывать дизайнеру. Хорошо, по поводу безопасных шрифтов мы разобрались.

Теперь давайте перейдем, непосредственно, в фотошоп и я хочу затронуть такую тему, как количество использования шрифтов. То есть, шрифтов вы можете в дизайн запихнуть большое количество, физически вас никто в этом не ограничивает, и вы можете использовать хоть для каждого слова отдельный шрифт, но, я думаю, вы понимаете, что это будет смотреться по-дилетантски и самое главное – это будет плохо восприниматься целевой аудиторией, будет нечитабельно. Соответственно, данный сайт все будут закрывать, уходить и цель сайта будет не выполнена. Оптимальным значением для хорошего удобного сайта является примерно 2, максимум 3 разных шрифта. Вот эти вот шрифты, которые есть, вы можете их использовать 2-3 штуки, то есть, для основной массы текста у вас будет 1 шрифт, то есть, процентов 80 он будет занимать и на 2й и 3й шрифт у вас примерно уйдет по 10% текста, то можете выделять какие-то заголовки и подзаголовки, сделать меню, а, допустим, весь текст, какой-то контент, у вас будет занимать другой шрифт и на него будет уходить примерно процентов 80 всего объема. То есть, больше 3х шрифтов я никогда не рекомендовал использовать – это смотрится некрасиво и самое главное – тяжело воспринимается человеческим глазом, очень трудно читать. Хорошо, по поводу этого пункта я вам рассказал.

Следующий момент, который тоже очень важен – это размер самого текста, размер шрифта. Здесь есть несколько моментов, которые я, скажем, за свою практику выделил и хочу вам дать небольшие такие чит-коды, что бы не экспериментировали, а сразу пользовались готовыми, проверенными вариантами. Сразу хочу сказать, что первый момент не стоит выставлять какие-то значения, которых нет по умолчанию, допустим, в этой линейке. Если вы выставите текст 15 пикселей, 17 пикселей, в браузере он может отображаться вообще коряво. То есть, если выставляете 14 пикселей, 18, 24, то, как он отображается в фотошопе, точно так же он будет отображаться в любом браузере. Но может получиться такая ситуация, если вы выставили 15, 17, 21 пиксель и так далее, в браузере он может немножко некорректно отображаться, поэтому я рекомендую придерживаться  именно вот этих параметров, ну, как бы это просто из практики, моего личного опыта.

Следующее. Размеры всех текстов я лично разбиваю на 3 группы: это заголовки, ну, в данном примере сайта у нас не так сильно выделены заголовки – это хорошо заметно на примере каких-то лендингов. То есть, давайте, допустим, посмотрим один из моих лендингов по курсу, допустим, тех.дизайна и здесь это будет хорошо видно. То есть, допустим, вот у нас заголовок, вот заголовок, здесь. Как вы видите, все они одинакового размера, одинаковой структуры. Также я делю подзаголовки и, соответственно, весть текст. То есть, везде у нас одинаковые заголовки по размеру, подзаголовки и так далее. За счет этого сохраняется общая структура сайта и людям легко воспринимать информацию, потому что если бы один заголовок был, допустим, 48 пикселей, другой 60, третий 72 пикселя, человек бы не понимал, что это заголовок, подзаголовок, либо еще что-то, то есть, а здесь, когда он видит такую четкую структуру, он сразу понимает: «ага, это заголовок, дальше будет идти подзаголовок и потом пойдет контент». То есть, на автомате, когда он просмотрит 1й, 2й, 3й блок вот такой вот, когда, допустим, дойдет до 3го, до 4го, скорость восприятия информации очень сильно увеличится и просматривать сайт ему станет гораздо проще, легче. Соответственно, такие сайты просматриваются гораздо больше по статистике, потому что есть единая четкая структура. Ее, соответственно, необходимо на этапе типографики все это прорабатывать, что бы человеку, который просматривать будет ваш сайт, было максимально удобно им пользоваться, воспринимать информацию.

Итак, по поводу заголовка. Я обычно делаю заголовки от 24 пикселей до 72, то есть, не больше, не меньше я не делаю, а разница довольно-таки сильно большая, и если я использую какие-то стандартные сайты, а, допустим, сайт-визитка, интернет-магазин и так далее. Это у нас заголовки примерно 24-32 пикселя. Если мы берем лендинги, то в основном там заголовки идут 60-72 пикселя, то есть, вот такой вот разброс. Для обычных сайтов вот это вот значение. Ну, опять, скажем, из опыта, много тестировал, много смотрел, как лучше выглядит, как лучше воспринимается людьми, читается и так далее. Рекомендую использовать именно такие цифры.

Далее, подзаголовки. Подзаголовки я рекомендую делать от 18 до 24 пикселей. Если у нас какой-то лендинг, то там можно использовать чуть побольше, то есть 24 примерно до 36, ну, лично я использую. То есть, вот это для обычных сайтов, это для лендингов, и, собственно говоря, текст, основная масса, сама информация. То есть, для обычного сайта это 12-18 пикселей, для лендинга может доходить от 14 до 24 пикселей, потому что бывают такие ниши, допустим, какой-то курс по садоводству, где аудитория пенсионеры, там лучше сделать шрифт побольше, что бы люди максимально просто читали, потому что у пенсионеров со зрением у всех большие проблемы и, соответственно, чем будет больше сам текст, тем они будут гораздо проще воспринимать информацию.

Опять же, чуть не забыл, на что вам необходимо ориентироваться, когда вы разрабатываете типографику, работаете с текстом. Основные параметры, на которые вам необходимо ориентироваться – это целевая аудитория. Именно из этого параметра вам необходимо подбирать сам шрифт, его жирность, наклон, цвет, отступы, размер и так далее, то есть, все параметры исходят из этого основного критерия. Уже от этого всего вы начинаете плясать и выбирать текст. Не стоит так делать, идти обратным путем, то есть, подобрали вот эти все параметры, потом начинаете думать: «а подойдет ли вашей целевой аудитории?». Нет, друзья, это неправильный ход. Нужно идти именно от целевой аудитории, подбирать именно под нее, потому что вы делаете сайт не для себя, а для тех людей, которые будут его посещать. Хорошо, с этим мы разобрались.

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

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

Дальше пройдемся по некоторым моментам, которые есть у нас в фотошопе, такие моменты, как жирность, наклон и так далее. Технически тоже давайте покажу, уделю внимание. То есть, если мы хотим выделить, сделать какой-то шрифт жирным, выбираем инструмент «Текст», выделяем данный текст и здесь в этом поле выбираем команду «Bold», соответственно, наш шрифт становится жирным. Если хотим, что бы н был наклонным, то выбираем команду «Italic». Текст становится таким курсивом, наклонным, а если хотим, что бы было и жирным наклоном, то, соответственно, обе эти команды. Что бы вернуть все обратно, то выставляем «Regular». То есть, это можно применять, к абсолютно любым текстам. Если хотим применить данное значение, жмем на ОК, если нет, то Отмена. Все здесь очень просто, ничего нового я здесь не скажу. Если у вас есть какие-то проблемы с инструментами фотошопа и так далее, то изучите бесплатный курс мой, это 60 с лишним уроков, после того вам станет все легко и понятно. На таких мелочах я сейчас зацикливаться не буду, а больше скажу, непосредственно, о тех вещах в веб-дизайне, которые вы не найдете в свободном доступе в интернете, либо которые очень трудно найти и понять.

Дальше по поводу стилей. Очень многие, в том числе и я, когда только начинал делать сайты, я любил делать какие-то красивые стили, то есть, выделять текст, добавлять различные стили веб 2.0 и так далее. Тогда очень модно было пару лет назад. Да, это смотрится красиво, да, это смотрится прикольно, но стиль вы можете использовать максимум в заголовках, то есть, что бы привлечь внимание. То есть, если у вас идет какой-то текст для чтения, допустим, вот, допустим, блок с текстом, не применяйте вообще никаких стилей, потому что очень сильно усложняет чтение. Простой совершенно текст – это самый лучший вариант. Если вы хотите использовать шрифты, то применяйте их только к заголовкам. И то, даже в этом случае я рекомендую использовать только два стиля, то, что вы можете сделать для заголовков: это тень (так, здесь у нас, по-моему, нет. Давайте посмотрим какие-нибудь сайты, если где-то используется. Кстати говоря, как вы видите, на нормальных сайтах нигде вот этих эффектов нет. То есть, если мы берем Google, Яндекс. Контакт и так далее, то у них вообще весь минимализм, практически никакой графики. У них есть свои цели, потому что, что бы не нагружались системы..Давайте что ли посмотрим какой-нибудь сайт…про помидоры. Как видите, везде совершенно обычный шрифт, нигде не используются стили. Давайте тогда в фотошопе покажу вам). Максимум, как я уже вам говорил, то, что вы можете применить к тексту…вот вы можете заметить, что здесь у нас есть около текста небольшая однопиксельная тень и смотрится за счет этого более выразительно. Давайте сейчас посмотрим, как будет с ней и как без нее. Пусть так без тени и так с тенью. То есть, это один из 2х вариантов, который я допускаю в дизайне, который можно применять к тексту. Он даже не то, что не портит, а увеличивает читаемость этого текста, тем более, что нам необходимо привлечь внимание к данному блоку, что бы повысить продажи. Как я уже говорил пару минут назад, нам необходимо было сфокусировать внимание на том, что бы совершались продажи и с помощью такой красивой кнопки привлекаем внимание, плюс концентрируем внимание на тексте с помощью данного стиля. Делать это очень просто, давайте вам покажу. Мы переходим в «стиль слоя» и выбираем «тень». Сейчас, к сожалению, на экране у вас не видно, это самый нижний пункт, просто можете открыть «стиль слоя» и поставить здесь галочку. Далее ставим смещение 1 пиксель, размер 1 пиксель, после этого можете немножко поиграться с непрозрачностью, примерно 70% хватит. Я рекомендую всегда выставлять не черный цвет, а именно оттенок фона ближе к черному, тогда будет смотреться максимально естественно. Нажимаем ОК. вот так вот делается простая тень.

Дальше второй момент, который я еще допускаю – это тиснение у текста. Если вы внимательно присмотритесь, то можете заметить, что здесь дублируется текст, и он смещен направо и вниз по одному пикселю белого цвета, не обязательно, что бы он был белого цвета, может быть оттенка какого-то похожего на фон, но максимально приближенному к белому. Для чего это делается? Делается это для того, что бы текст был более выразительным, но сейчас у нас фон не особо темный. Давайте немножко увеличим его оттенок, и вы сейчас сами все увидите. Если вы сейчас посмотрите и сравните, когда  включу дополнительный слой, текст будто читается гораздо лучше и эффект такой, как будто при печати в типографии. Естественно сейчас, если у нас это слишком видно, мы можем уменьшить непрозрачность и будет смотреться гораздо более реалистично и правдоподобно, плюс увеличивается простота восприятия данного текста, человеку становится гораздо проще прочитать его. Как это делается? Делается это очень просто: мы находим текст, на который необходимо сделать тиснение, дублируем данный слой, выбираем инструмент «текст» и после этого выбираем белый цвет. Я почти всегда выбираю белый цвет, ни какие-то там оттенки. Соответственно, после этого переходим на инструмент «перемещение» и на клавиатуре нажимаем по одному разу клавишу «вниз» и клавишу «направо». После этого данный слой переносим вниз. И я обычно выставляю непрозрачность в районе 50-70%, тогда будет смотреться максимально качественно и не будет, скажем, резать глаза, потому что, если оставите на 100% и у вас фон будет чуточку темнее, то очень сильно будет бить по глазам, как будто идете ночью и смотрите в мобильник и вот этот вот свет от экрана прям лупит по глазам, ничего в окружности не видно. Соответственно, с текстом то же самое, делаем так, что бы было комфортно на него смотреть, но при этом он стал более четким. Такая небольшая фишечка.

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

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

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

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

Следующий важный момент, которому вам необходимо уделять также большое внимание – это расстояние между строчками в самом блоке с текстом. Это очень сильно влияет на восприятие текста, на простоту усвоения информации. Опять же, не должно быть перебора, не нужно падать из крайности в крайность, не нужно делать маленьким расстояние и не нужно слишком сильно увеличивать его. Я, скажем, выяснил такую формулу, расстояние должно быть примерно в 1,5-2 раза больше, чем сам шрифт. То есть, допустим, шрифт у нас в данном случае 18 пикселей, соответственно, расстояние между вот этими строчками у нас должно быть примерно 24-36 пикселей. Давайте посмотрим на практике, как это сделано у меня. В данном случае у нас 14 пикселей стоит размер шрифта, и посмотрим сколько выставлено – здесь у нас 24, то есть, чуть меньше, чем в 2 раза, то есть, 1,8, как раз в том интервале, в котором я вам говорил. Если мы выставляем больше, там уже 30, ну сами уже посмотрите, смотрится уже не так гармонично и слишком сильно выбивается из всей концепции дизайна. Опять же, если мы поставим все это меньше, если поставим авто, то текст слишком сильно прилеплен, даже если мы вставляем те же самые 14 пикселей, становится еще меньше, то есть, 18 так же не подходит, ну, 24, на мой взгляд, самый оптимальный вариант. То есть, какая простая формула? В цифрах это примерно 1,5-2 раза необходимо ставить больше размер между строчками выставляется, а вот в этом параметре в окошке «символ», если оно у вас не открыто, то необходимо перейти в «окно» и установить галочку напротив синего, вот эта панелька у вас сразу появится. Здесь просто  вам необходимо перейти, вот сейчас у нас стоит сам шрифт 14 пикселей и я обычно увеличиваю на 1, либо 2 пункта, то есть, тогда текст этот будет смотреться гармонично и легко читаться. То есть, можете не высчитывать, как я вам говорил. Если будете выбирать на 1-2 вот этих параметров больше, то всегда будет у вас текст хорошо, легко читаться. То есть всегда будет подходить под ту формулу, которую я вывел. Это касается, как каких-то пунктов меню, так это касается точно так же текста. То есть, если мы рассмотрим какой-то мой лендинг, здесь я придерживаюсь точно такого же правила. Так, где у нас еще текст тут? Здесь текста не особо много. Ладно, не важно. Вот такое вот правило, которое я хотел вам сказать. Оно очень простое и всегда работает, отлично смотрится. Единственное, пожалуй, исключение, которое вы можете сделать, если вы точно знаете, что ваша аудитория пенсионеры и что у них проблемы со зрением, то можете увеличить до 2-3 раз, то есть, поставить не 24, а 30 пикселей – для людей будет так лучше воспринимать информацию.

Так, хорошо. Следующий момент, который я хотел вам рассказать – по поводу заголовков, подзаголовков и текстов, какие использовать шрифты. Давайте разберем на примере данного лендинга. Я вообще люблю понарушать какие-то правила, потестировать, посмотреть, но есть те, которые изначально лучше соблюдать. Для заголовков, друзья, больше всего подходят какие-то шрифты с засечками. Что это за шрифты? Сейчас я вам покажу в фотошопе. Вот, допустим, у нас есть заголовок, шрифты с засечками, это, допустим, как Times New Roman. То есть, если мы сейчас увеличим масштаб, то увидим, что на конце везде у нас есть небольшие засечки. Это из типографики, из обычной полиграфии. Уже давно люди выяснили, наверное, больше 100 лет назад, что именно вот такие шрифты привлекают сильно много внимания. Соответственно, если мы знаем данный параметр, что они сильно привлекают внимание, мы можем использовать данные шрифты в заголовках. Но, опять же, это правило больше действует и лучше действует при печатной какой-то продукции, газетах и так далее, в интернете, в новопространстве это не так сильно сказывается на конверсии, потому что мы тестировали и как бы особой разницы нет. То есть, возможно, как-то читается и привлекается внимания больше, но на конверсии это особо не сказывается, поэтому лично я не заморачиваюсь. Но, опять же, самый важный пункт – не рекомендую ставить данный текст в обычных блоках с текстом, где у нас идет какая-то, скажем, информация для чтения, которую необходимо полчаса, допустим, читать. Ну покажу на этом примере. Воспринимать такую информацию, когда шрифт у нас с засечками становится очень сложно, то есть, даже то же самое меню прочитать становится уже гораздо сложнее, по сравнению с предыдущим шрифтом. То есть, поэтому эти шрифты с засечками используйте максимум где-то в заголовках, где вы хотите привлечь внимание. То же касается обычного текста. Я использую самые обычные шрифты без засечек и вам точно так же рекомендую, потому что они гораздо проще воспринимаются человеческим глазом, мозгом и их как бы легче читать. Если вы посмотрите на все мои сайты, то я, соответственно, везде данные шрифты использую. Сразу хочу сказать, что у меня нет каких-то любимых шрифтов. У меня так получается, что я влюбляюсь в какой-то шрифт на 2-3 месяца, им активно пользуюсь, делаю в это время все дизайны, а потом я перехожу к какому-то другому, как бы получается так. При этом я всегда стараюсь придерживаться тех правил, о которых сегодня в данном уроке я рассказывал, что бы они везде отображались одинаково и так далее. Всех правил, которые я вам рассказал, я, соответственно, сам придерживаюсь. То есть, это не так, что я их где-то прочитал и сам это не использую – нет. То есть, я даю только ту информацию, которую я сам использую, если я что-то не использую, я вам давать не буду, потому что я не знаю, как это работает, и я не знаю, какой результат вы получите. А так, вы можете смело брать, применять и знать, что это работает.

Ну что ж, в принципе, по типографике я закончил. Единственный момент, о котором хотел рассказать —  в интернете полным-полно разных каких-то эксклюзивных шрифтов с разными завитушками, то есть, давайте «шрифты для фотошопа» введем, зайдем на любой сайт и здесь посмотрим. Здесь есть куча шрифтов, допустим, какой-то готический возьмем, очень оригинальные. То есть, вот такие шрифты не будут отображаться у нас во всех браузерах. Что же делать, если вас так приперло, хочется сделать какую-то красивую шапку? Здесь есть один единственный выход. Вы просто данный шрифт используете, но при этом, когда будете отдавать на верстку своей макет, говорите, что бы вот эту шапку дизайнер ставил именно, как картинку, что бы он текст не вставлял текстом. В картинке, это все, естественно, будет отображаться как вы хотели, весь остальной текст пусть верстает верстальщик, так как должно быть именно текстом, а не картинками. То есть, такой простой момент, который как бы легко решается. Естественно, данных картинок не должно быть много, потому что иначе у вас будет сайт очень сильно грузиться и большая часть аудитории будет отваливаться, не дождавшись загрузки, потому что сейчас статистика такова, что, если человек ждет 3 секунды и у вас сайт не загрузился, то большая часть просто закрывает вкладку и переходит к другому сайту, поэтому не перегружайте их картинками.

Ну что ж, на этом данный урок я буду заканчивать. Последнее такое небольшое наставление от меня, которое я бы хотел вам дать – это, скажем, расставьте, пожалуйста, правильно приоритеты в своем обучении дизайну, в создании сайтов. Поймите, что текст – это самый главный контент, то, ради чего люди приходят именно на все сайты. Да, есть другие способы контента, допустим, это аудио, сейчас модно видео, какая-то графическая составляющая и так далее. Все равно до сих пор большая часть, как я уже говорил, примерно 50-80% занимает текст. Соответственно, именно 50-80% своего времени вы должны посвятить при разработке дизайна, именно текста, а уже потом их все графические составляющие, потому что их делать не так сложно, именно с текстом работать гораздо сложнее и поэтому уделите время и не думайте, что тексту необходимо уделить 10-30 минут, и остальное время посвятить графике. Нет, это неправильный путь. Лучше уделите больше времени именно тексту, потом переходите к графике.

Хорошо, на этом данный видеоурок мы заканчиваем. Как обычно домашка вас ждет. Домашка, как бы стандартная у нас, продолжение предыдущих. Сейчас я создам новый документ, что бы было проще показывать. Итак, на данный момент у вас уже есть 3  макета с идеями с сетками и направляющими, с различными колонками и так далее. Сейчас вам необходимо сделать 3 макета и наложить на них везде текст, больше вам на данном этапе ничего делать не нужно, просто сделать, что бы текст легко и просто воспринимался вашими глазами. Если вы хотите еще дальше пойти, просто покажите эти макеты своим друзьям, либо родным с которыми вы живете, и поверьте, вы услышите от них совершенно другую точку зрения, потому что даже я занимаюсь 5й-6й год дизайном. Если, допустим, показываю какой-то свой дизайн друзьям или брату, то он мне говорит с точки зрения не дизайнера, потому что никогда особо не занимался этим,  а простым взглядом, незамыленным, показывая те моменты, на которых лучше сфокусироваться и переделать. Единственный момент – воспринимайте правильно эту обратную связь, критику, потому что поначалу очень тяжело, скажем, переделать свое детище, потому что когда ты только начинаешь делать дизайн сайтов, тебе кажется, что это творение такое, над которым ты проработал кучу времени, ты его холишь и лелеешь, как собственного ребенка, но, тем не менее, примите ту обратную связь, которую вам будут говорить родственники и друзья и переделайте, потому что на ваши сайты все равно будут заходить обычные люди, а не дизайнеры и необходимо делать именно под них. Итак, вам необходимо сделать 3 вот таких вот макет, где у вас будет только текст.

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

Так, сейчас я выключу эту папочку, покажу, как у вас должно быть. Вот такой вот простой макет, где у вас расставлены все направляющие, есть сетка модульная и по этой сетке вам необходимо весь текст расположить. Таких макетов у вас должно быть 3 штуки.

Ну что ж, на этом данный урок мы заканчиваем. Как сделаете домашку, переходите к следующему видео. На этом все, спасибо за внимание и до встречи!

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



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

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