Карьера веб-дизайнера с нуля до первой продажи за 14 дней. Урок №5 — «Добавляем красивые “безопасные” шрифты в макет»

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

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

Давайте сразу перейдем к практике. Самый первый и самый важный принцип, который вы должны усвоить и к которому вы должны всегда придерживаться – вы должны использовать здесь  так называемые безопасные шрифты. Что это такое? Это те шрифты, которые будут правильно отображаться в браузере, то есть, есть в интернете куча различных красивых шрифтов, допустим, какие-то рукописные, с различными завитушками, какие-то готические и так далее. Но они браузерами: программами там Google Chrome, Firefox, Opera и так далее, не воспринимаются, то есть в фотошопе мы это можем все красиво оформить, но, когда сайт будет верстаться, когда он станет, превратится из картинки в живой сайт, который будет в интернете, то эти шрифты автоматически заменятся на какие-то стандартные по умолчанию, и смотреться будет не так красиво, как в фотошопе. Поэтому, чтобы не было таких расхождений, всегда используйте только безопасные шрифты, которые есть на каждом компьютере у каждого пользователя.

Итак, какие же шрифты и как понять где их брать? Есть на самом деле хороший сервис такой, называется он Google Fonts, зайдите вот по адресу, вбейте в адресной строке google.com/fonts и вот здесь вот есть различные шрифты, которые можно посмотреть сразу как они отображаются, скачать себе на компьютер, установить, чтобы они появились в фотошопе. По умолчанию здесь у нас стоят английские шрифты, давайте изменим всего лишь один параметр, вот здесь вот latin написано, и выберем Cirillic, то есть у нас будет показываться вот в этой вкладке все шрифты, которые можно использовать, на, русские шрифты, которые можно использовать в фотошопе и они будут отлично отображаться в каждом из браузеров. То есть, вот эти шрифты и соответственно здесь мы видим, то, как они отображаются. Вот эти все шрифты вы спокойно можете брать, скачивать, устанавливать. Сейчас я покажу, как это сделать. Точно так же здесь вы можете немножко изменять различные параметры, то есть размер шрифта, посмотреть, как он будет смотреться, то есть, допустим, если мы делаем текст, то, в принципе, в основном всегда у нас бывает, ну, для чтения 14, 18 пикселей, то есть соответственно мы выставляем данные параметры и смотрим, как у нас будет смотреться приблизительно на сайте. Если, допустим, мы хотим сделать какой-то заголовок, ищем шрифт для заголовка, то выставляем размер побольше и смотрим, как будет смотреться. Сюда, соответственно, мы можем вбить какое-то наше словосочетание, и здесь по умолчанию какой-то текст забит, ну, допустим «Заголовок для лендинга», и смотрим, как отображаются разные шрифты с данным заголовком, то есть, есть даже вот такие красивые шрифты, которые будут так же классно отображаться.

Хорошо! После того как вы определились какой шрифт взять, вам необходимо нажать на вот эту вот синюю кнопку «Add to collection». Здесь появляется такая всплывающая область серая, где написано, какой шрифт мы хотим скачать. То есть, в данном случае это Open Sans. После этого мы нажимаем вот на эту стрелочку: Download, то есть скачать, у вас появляется всплывающее окошко, где мы выбираем первый пункт zip file, ну, вот по этому синему названию. У нас происходит скачка, выбираем какую-то папку, допустим, на рабочий стол, сохраняем. После этого нам необходимо соответственно перейти в данную папочку, извлекаем архив, заходим в папку с шрифтами и здесь сейчас нам необходимо их установить. Как вы видите, сейчас у нас разное количество различных типов, то есть жирный, жирный с наклоном, очень жирные шрифты, то есть один шрифт, но различное начертание у них отличается, чтобы по одному не устанавливать, сначала мы их все выделяем, потом щелкаем правой кнопкой мыши и выбираем команду «Установить». У нас происходит такая вот установка, где пишется, что 10 из 10 шрифтов установились. После этого мы можем смело переходить в фотошоп и у нас они появятся вот в этом поле. Вот он данный шрифт Open Sans. Если вдруг у вас какая-то там, допустим, старая версия фотошопа, то может получиться так, что вам необходимо будет сначала закрыть фотошоп, заново загрузить и после этого у вас, ну, данный шрифт появится в этом списке.

Хорошо! Переходим ко второму правилу. Я вам дам, скажем, всего три основных правила, которые вам первоначально первые пару месяцев стоит придерживаться, не слишком заморачиваться, дабы у вас не было каши в голове, вам необходимо просто придерживаться, самых главных правил: первое – это стандартные шрифты, о которых я только что рассказал, второе правило – используйте один конкретный шрифт на весь дизайн, то есть, допустим, вы, к примеру, мы сейчас разрабатываем дизайн сайта стоматологии и здесь мы используем только один конкретный шрифт, в данном случае PT Sans, то есть, если вдруг вы начнете делать, допустим, меню сделали PT Sans, далее перешли в какой-то другой блок с текстом, начали делать, допустим, с шрифтом Tahoma, это будет смотреться не профессионально, не красиво и у людей, людям это будет доставлять неудобство при чтении, то есть, первоначально, пока у вас нет особого опыта в веб-дизайне, используйте всего один шрифт на один дизайн. Следующее, так же важное правило, которое, я замечаю такую ошибку, которая присутствует у всех новичков, это неправильный подбор цвета у шрифтов, то есть, допустим, вот у нас, к примеру, есть менюшка и у нее синий фон, то есть очень часто вы можете увидеть такую ситуацию, что на темном фоне люди берут и делают точно такой же тёмный цвет текста. Правило очень простое, если у вас фон темный, то шрифт обязательно должен быть светлым. Соответственно, если фон у нас светлый, то есть в данном случае, допустим, белый, то цвет шрифта должен быть темным, то здесь у нас синий и черный. Если вы сразу не можете, скажем, в голове себе представить какой шрифт, какой цвет шрифта будет лучше, то просто выделяете текст, для которого хотите подобрать цвет, сначала, допустим, выбираете белый, нажимаете «Ок», смотрите, как все это выглядит в 100 процентном размере, если, допустим, не подходит, вы понимаете, что, ну, не красиво смотрится, в любом случае попробуйте второй вариант, точно так же выбираете, и делаете какой-то темный оттенок, ну, допустим, черный и сравниваете предыдущий вариант и то, что сейчас сделали, выбираете оптимальный. Это не значит, что необходимо выбирать именно белый или черный, просто смотрите какие-то оттенки: темнее и светлее. Таким способом вы всегда сможете подбирать, скажем, цвета у шрифтов, которые будут выразительнее, легко читаться и доставлять неудобство пользователям. Потому что сейчас, ну, как бы, очень много людей, которым уже за 25 лет и у всех почти проблемы со зрением, то есть большая часть, наверно, 80 % аудитории, не может читать мелкий шрифт, поэтому нужно побеспокоится о наших посетителях сайта, сделать так, чтобы они не напрягались и им было легко воспринимать информацию.

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

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

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

Спускаемся ниже. Начнем мы с левого блока. Как вы видите, здесь у нас «услуги» выделены жирным шрифтом, точно так же 18 шрифт, все тот же PT Sans, но при этом, как вы видите, все буквы у нас большие. Для чего это сделано? Для того, чтобы привлечь внимание посетителя. Как я уже говорил это, ну, такой важный пункт, который люди, допустим, в стоматологии ищут больше всего. И для того, чтобы они не заходили на какую-то отдельную страничку, не искали, мы сразу привлекаем их внимание большим шрифтом, большей жирностью. И, соответственно, человек, когда увидел данные услуги, понял, что, ага, вот этот блок идет с перечнем услуг, уже начинает читать. Соответственно, здесь у нас ниже уже шрифт поменьше, 14 пикселей, так как информация, с помощью которой не нужно привлекать внимание, она скажем,  поясняющая к вот этому заголовку. Соответственно, регуляр – это обычное состояние шрифта, он не жирный, без наклона. Что здесь отличительное есть, в отличие, допустим, от текста? Здесь у нас между каждой строчкой идет такой вот отступ, мы нажимаем Enter для того, чтобы можно было легко воспринимать вот эти пункты меню, потому что, если вот этих отступов не будет, все будет казаться, что прилеплено и читаться будет очень тяжело. То есть, на пункты меню это не похоже, как будто идет сплошной какой-то текст. Мы должны визуально показать, что это отдельные пункты, по которым можно пройтись и кликнуть.

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

Идем дальше. Здесь у нас такой вот блок с приветствием от, ну, грубо говоря, какого-то там виртуального стоматолога-работника данной компании. И вот такое приветствие единственное, наверно, когда вы можете оформить курсивом, то есть наклонным шрифтом. Во всех других вариантах я, скажем, не рекомендую использовать наклонный шрифт, потому что он читается гораздо сложнее. Единственное, когда вы можете его использовать – это когда какие-то идут цитаты, когда вот что-то в скобки вы берете. Почему? Ну, просто  потому, что все люди привыкли читать газеты и  там это привычно, именно таким вот оформлением в газетах выделяют различные цитаты. Мы, соответственно, должны в интернете передавать ту информацию, которую люди привыкли и хотят видеть в удобном и привычном для них виде. Ничего нового придумывать не нужно. Хорошо, идем дальше. Ну, и здесь подпись черным цветом, не особо выделяется, потому что это не такая важная информация.

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

Далее у нас здесь три такие, скажем, блока с текстом, какие-то составные части услуг и небольшое описание. То есть мы привлекаем внимание небольшим подзаголовком 18 пикселей и выставляем жирность, шрифт вставляем черным, потому что это не такая важная информация. Тем более, что здесь еще будет картинка, которая привлекать будет внимание, поэтому синим не делаем, оставляем черным цветом. Ну,  и, естественно, вот этот поясняющий текст, точно так же как и весь остальной на сайте, мы делаем небольшим шрифтом 14 пикселей, обычная жирность, а! единственное, здесь выравнивание у нас по центру, а не слева, потому что смотреться будет так немножечко гармоничнее. Здесь у нас отличает только сам контент, само содержание, а по стилистике у нас все точно так же: заголовок и текст. Сразу хочу сказать, что, если вы будете делать такие блоки составные по колонкам, то я рекомендую выставлять направляющие вот так вот, чтобы весь текст у вас по горизонтали, по вертикали был  ровно, ну, выравнен. Иначе, если что-то будет съезжать, то смотреться будет не красиво.

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

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

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

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



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

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