+7(919)219-14-03
Звоните прямо сейчас
Социальные сети
Веб-дизайн обучение. Подбор шрифтов и иконок

Веб-дизайн обучение. Подбор шрифтов и иконок

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

1 июня 2021 в 16:57

Урок №4. Веб-дизайн обучение. Подбор шрифтов и иконок

Первым делом мы расскажем о том, для чего веб-дизайнеры используют иконки на сайтах и покажем, где их можно скачать. Затем поговорим о типографике (шрифтах) - сложная, но очень интересная тема! Мы расскажем об основных параметрах шрифтов и их видах и покажем, как работать с текстом в фотошопе.

В конце занятия дадим ресурсы для скачивания бесплатных веб-шрифтов и иконок, а после этого Антон создаст раздел сайта для своего проекта с текстовыми блоками и иконками.

Видео-уроки:

https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/vebdizain-obuchenie-podbor-shriftov-i-ikonok-6086e074874e5a0225d85f97

1)Иконки и их задачи.
Иконки - это изображения, которые помогают быстрее доносить ключевой смысл информации до пользователя.
Основная задача иконок – помочь пользователю в процессе восприятия информации.

2)Стили иконок.
Существуют 4 основные стиля иконок:
1.Контурные или линейные (outline icons), которые выполнены абрисами и не имеют заливки.
2.Заливные (solid icons), которые выполнены плашками с заливкой.
3.Плоские или флэт (flat icons), которые совмещают в себе 2 предыдущих стиля, но имеют при этом минимальный набор средств визуализации.

3)Ошибки при подборе иконок.
При выборе иконок для своего проекта стоит пользоваться таким понятием как “сет иконок” – это набор иконок одного стиля на некоторую тематику. Если вы будете использовать иконки из одного сета, то все они будут выдержаны в одном стиле (и по цветам, и по толщине линий, и т.д).

4)Ресурсы для скачивания иконок.
Существует много ресурсов, на которых как опытные, так и начинающие дизайнеры выкладывают свои сеты иконок. Мы дадим вам самые основные ссылки:
1. dribbble.com
2. behance.net
3. thenounproject.com
4. flaticon.com

5)Параметры шрифта.
Типографика занимает в нашей жизни довольно большую часть информационной среды, т.к. передает нам необходимую информацию через слова, цифры, которые составляют баннеры, объявления, подписи, реклама и т.д. Типографика - одна из самых сложных тем для изучения в веб-дизайне.

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

7)Работа с иконками и текстом в фотошопе(Adobe Photoshop).

Создание иконок в фотошопе:

https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/vebdizain-obuchenie-podbor-shriftov-i-ikonok-6086e074874e5a0225d85f97

1)Создание линейных (Outline) иконок в фотошопе.

2)Создание иконок c заливкой (Soild) в фотошопе.

3)Создание иконок в стиле флэт(Flat) в фотошопе.

Работа с типографикой в фотошопе:

https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/vebdizain-obuchenie-podbor-shriftov-i-ikonok-6086e074874e5a0225d85f97

1)Операции с текстом в фотошопе.

2)Редактирование статьи для сайта в фотошопе.

Дополнительные уроки:

https://zen.yandex.ru/media/id/5f5a7a2e186bea34b535fa36/vebdizain-obuchenie-podbor-shriftov-i-ikonok-6086e074874e5a0225d85f97

1)Инструменты выравнивания в фотошопе.

2)Операции с векторными фигурами в фотошопе.

3)Как установить шрифты в фотошопе на Mac OS X.

4)Как установить шрифты в фотошопе на Windows.

Самые часто задаваемые вопросы на уроке №4. Веб-дизайн обучение. Подбор шрифтов и иконок

1. Во всех ли проектах уместно использовать иконки?
Да, во всех. И самые строгие, и самые яркие сайты используют в своем дизайне иконки, потому что это отличный инструмент для передачи информации. Графическая информация воспринимается человеком быстрее, чем текстовая, именно в этом и заключается основное преимущество иконок.

2. Какой стиль иконок сейчас самый популярный?
Контурные. Их сейчас используют чаще всего, потому что они достаточно ненавязчивые, но в то же время могут быть очень нетривиальными. Года 3 назад флет-иконки были популярны, но они обязывают к тому, чтобы весь стиль проекта был абсолютно плоским. Контурные же иконки универсальные.

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

4. В какой программе рисуются иконки?
Иконки создаются в векторных графических редакторах (Adobe Illustrator, Corel Draw и т.д.). Однако несложные иконки можно нарисовать и в фотошопе, т.к. в нем также предусмотрена работа с векторной графикой.

5. Почему многие дизайнеры против использования классических шрифтов типа Arial, Times New Roman и т.д.?
Это связано с тем, что эти шрифты используются очень часто и к тому же в абсолютно всех тематиках проектов. Каждый дизайнер хочет выделиться и сделать что-то уникальное, а шрифт может ему в этом помочь. НО, очень часто дизайнеры забывают о том, что не все шрифты подходят для той или иной тематики сайта, и в итоге получается несформированный по стилю проект. Классические шрифты на то и классические, что они проверены временем, а, значит, они могут использоваться во всех проектах и тематиках. Старые шрифты, которые были созданы еще в прошлом веке (а некоторые и раньше) отличаются хорошей читабельностью в небольших размерах, т.к. создавались для книгопечатания.

6. Что такое веб-шрифты?
Это такие шрифты, которые могут быть использованы при создании сайтов. Это такая категория шрифтов, которая адаптирована для использования в интернете. Все не веб-шрифты при попытке разместить на сайте будут автоматически преобразованы браузером в один из самых близких ему по типу веб-шрифтов.

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

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

9. Во всех ли шрифтах есть несколько начертаний?
Нет. Многие современные шрифты создаются с не очень большим количеством начертаний (иногда даже с одним). Все же популярные и востребованные шрифты, которые продуманы до мелочей и используются в большом количестве проектов, имеют от 4 до 12 начертаний.

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

11. Сможет ли верстальщик настроить трекинг и кернинг?
Трекинг сможет, а вот кернинг - нет. Именно поэтому кернинг используют чаще всего при создании логотипов и других графических объектов, которые переносятся на сайт в формате svg или png.

12. Какой оптимальный интерлиньяж для больших текстовых блоков?
От 0 до 40. Больше делать не стоит, потому что тогда снижается читаемость текста.

Мы разобрали модуль №4. Веб-дизайн обучение. Подбор шрифтов и иконок

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

Урок №3. Цвет в веб-дизайне. Работа с цветом и изображением

Веб-дизайн обучение. Подбор шрифтов и иконок


Подарок внутри! Подписка на обновление блога по Web-дизайну.
Бесплатный подарок для подписчиков нашего блога->
Курсы по Веб-дизайну!
* Поля, обязательные для заполнения
Нажимая "Подписаться", Вы принимаете условия обработки персональных данных.
Теги: Web-дизайн

Другие статьи блога

Зачем вести учет доходов и расходов, если денег все равно не хватает и больше от этого не становится?
Зачем вести учет доходов и расходов, если денег все равно не хватает и больше от этого не становится?
Полезные плагины Figma
Полезные плагины Figma
Как заработать на инвестициях новичку
Как заработать на инвестициях новичку

Наверх
array(5) { ["id"]=> int(0) ["ip"]=> string(13) "3.231.146.172" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "c7540c853ede076f08c4020beaa41883" }