Dmitriytishanskiy.ru

Онлайн уроки
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Дизайн шрифтов уроки

Основы типографики

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

Хороший вкус, как и идеальная типографика, выше индивидуальности. Ян Чихольд

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

Типографика – это умение работать с «пустотой», как с чистым листом бумаги, который в этом разделе называется «воздухом».

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

Классификация шрифтов

1. San-Serif

Шрифты без засечек, или «Гротеск»

2. Serif fonts

Шрифты с засечками, или «Антиква»

3. Декоративные (акцидентные) шрифты

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

4. Handwritting – рукописные шрифты

Слова здесь излишни. В принципе, характеристика подходит такая же, как и для декоративных шрифтов. Главное, не переусердствовать.

5. Моноширинные шрифты

Все шрифты, в которых длина букв по горизонтали одинаковая

6. Символьные шрифты

Представлены в виде иконок (Fontawesome, Stroke, icomoon)

Основные термины

Давайте с Вами разберём основные понятия, с которыми мы столкнемся при работе с типографикой.

1. Гарнитура – совокупность шрифтов, объединенных общими стилевыми признаками, отличными от других шрифтов.


2. Насыщенность – определяется изменением толщины основных и соединительных штрихов одноименных знаков.


3. Контрастность – отношение толщины соединительных штрихов к толщине основных штрихов знаков


4. Кегль – величина шрифта в наборе, определяется в пунктах. Кегль- то величина площадки, на которой размещается знак.

5. Трекинг/Кернинг – более сложные понятия, однако именно они позволяют нам задавать тон и тональность подачи информации. Трекинг – равномерное расстояние между буквами, а кернинг – избирательное расстояние между буквами, что позволяет добавить разнообразия в одних и тех же надписях.

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

7. Комплектность шрифта – совокупность всех знаков, необходимых для набора текста ( строчные, прописные, цифры, знаки препинания, символы и спецзнаки)

8. Пропорции – показатель изменения ширины одноименных знаков в начертаниях одной гарнитуры.

Как выбрать шрифт?

Для начала Вы должны определить тему проекта (строгая, деловая, минималистичная, фантазийная, женская/мужская, аристократичная) и строго следовать этому «настроению» на протяжении всей работы. Не путайте и не забывайте настроение сайта, с которым Вы работаете.

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

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

Принципы типографики

Как подобрать шрифты, которые будут гармонично сочетаться друг с другом, не будут конфликтовать, а будут дополнять?

1. Классика хороша во все времена

Хороший и всегда работающий типографский прием – использовать в заголовке рубленый шрифт (Гротеск), а самого текста – шрифт с засечками (Антиква).

2. Каждому своя роль

Всегда придерживайтесь типографской иерархии, четко установив, какому шрифту отводится та или иная роль (заголовок, подзаголовок, текст, примечания, ссылочная масса, подпись и т.д.).

3. Экспериментируйте

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

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

4. Простота и лаконичность – гарант успеха

Вместо того, чтобы нагромождать сайт различными шрифтами, пытаясь выделить каждый фрагмент, усмирите пыл и фантазию, и подумайте «А стоит ли оно того?». Не зря же рекомендуют использовать 1-2 шрифта, точнее гарнитуры. Попробуйте. И Вы увидите, что все гениальное – просто.


5. Какой цвет?

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

Управление шрифтами

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

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

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


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

В настоящее время существует довольно много менеджеров шрифтов, как платных, так и бесплатных, так что Вы можете выбрать то,что Вас больше устроит. Я лишь назову некоторые из них для примера: Nexus Font (бесплатный), Suitcase Fusion и Suitcase (платный), Linotype FontExplorer X (бесплатный), FontFrenzy (бесплатный) и др.

5.Граф.дизайн. Типографика.

Цель сегодняшнего занятия: Изучить виды и особенности шрифтов,создать шрифтовую композицию.

Типографика

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

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

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

Читать еще:  Unity урок 1

Гарнитура — шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков. Часто это понятие путают с понятием «шрифт», хотя шрифт — это определенное начертание знаков, в то время как гарнитура определяет общее «семейство» шрифтов.

Гарнитуры можно разделить на две основные категории:

  • Антиква — шрифты с засечками.
  • Гротеск, соответственно, — шрифт без засечек.

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

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

Кегль — высота буквы, включающая в себя нижние и верхние выносные элементы. Измеряется в типографских пунктах (обозначается как pt). Например, текст набранный 14 кеглем, будет равен 14 pt по высоте.

Интерлиньяж — межстрочный интервал. Расстояние между базовыми линиями соседних строк.

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

Есть замечательная игра-тренажер — Kern Type . Просто расставьте все буквы по местам. На самом деле это не так-то просто. Процесс достаточно сложен и требует отличного глазомера. Особенно этот опыт будет полезен при создании логотипов.

Что мы делаем не так?

Используем большое количество шрифтов

Желательно использовать не более 3-х начертаний. Это могут быть шрифты как одной гарнитуры, так и разных. Например, гарнитура Roboto содержит довольно большое количество различных начертаний. Из них легко можно выбрать три, которые, как мы считаем, подойдут для нашего сайта. Допустим, это будут Light, Regular и Bold. Для заголовков можно использовать шрифт Bold или Light, для кнопок Bold, для основного текста Regular. Таким образом, используя одну гарнитуру, мы обеспечили наш сайт правильной типографикой. Естественно, все зависит от тематики сайта и идеи, которую вы планируете заложить в дизайн. Мой пример относится к универсальным и не претендует на что-то уникальное или неординарное.

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

Стили

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

10 советов по типографике в веб-дизайне

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

Более 95% процентов информации в Интернете представлено в виде письменного языка.

Хорошая типографика делает чтение непринужденным, в то время как плохая типографика отталкивает пользователей. Как утверждает Оливер Райхенштейн в своей статье “Веб-дизайн – это 95% типографики”:

Оптимизация типографики – это оптимизация читабельности, доступности, удобства использования (!), общего графического баланса.

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

1. Сведите число используемых шрифтов к минимуму

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

Чтобы предотвратить подобную ситуацию, попробуйте ограничить количество семейств шрифтов до минимума

В общем, ограничьте количество семейств шрифтов до минимума (два – это много, часто бывает достаточно одного) и придерживайтесь их на всем веб-сайте. Если вы используете более одного шрифта, убедитесь, что семейства шрифтов дополняют друг друга в зависимости от ширины их символов. Ниже приведен пример сочетаний шрифтов. Сочетание Georgia и Verdana (слева) имеет сходные значения, которые создают гармоничное соединение. Сравните это с парой Baskerville и Impact (справа), где тяжелый вес шрифта Impact значительно затмевает другой шрифт.

Убедитесь, что семейства шрифтов дополняют друг друга, основываясь на ширине их символов

2. Попробуйте использовать стандартные шрифты

В сервисах внедрения шрифтов (например, Google Web Fonts или Typekit) есть много интересных шрифтов, которые могут придать вашим проектам что-то новое, свежее и неожиданное. Они также очень просты в использовании. Возьмем, например, Google:

  1. Выберите любой шрифт, например, Open Sans.
  2. Сгенерируйте код и вставьте в своего HTML-документа.
  3. Готово!

Так что может пойти не так?

На самом деле, этот подход имеет одну серьезную проблему – пользователи более знакомы со стандартными шрифтами и могут читать их быстрее.

Если на вашем веб-сайте нет особой необходимости в использовании специального шрифта, например, для целей брендинга или создания впечатляющего опыта, обычно, лучше всего использовать системные шрифты. Беспроигрышный вариант – использовать системные шрифты: Arial, Calibri, Trebuchet и т.д. Имейте в виду, что хорошая типографика привлекает читателя к контенту, а не к самому шрифту.

3. Ограничивайте длину строки

Наличие правильного количества символов в каждой строке является ключом к удобочитаемости вашего текста. Не должно быть так, чтобы ваш дизайн диктовал вам ширину текста. Это также должно быть вопросом читабельности. Посмотрите этот совет по удобочитаемости и длине линии от Института Баймарда:

“У вас должно быть около 60 символов на строку, если вы хотите получить хороший опыт чтения. Наличие правильного количества символов в каждой строке является ключом к читабельности вашего текста”.

Если линия слишком короткая, глазу придется слишком часто возвращаться, нарушая ритм читателя. Если строка текста слишком длинная, пользователю будет сложно сосредоточиться на тексте. Изображение: Material Design

Для мобильных устройств вы должны использовать 30–40 символов в строке. Ниже приведен пример двух сайтов, просматриваемых на мобильном устройстве. Первый использует 50-75 символов в строке (оптимальное количество символов в строке для печати и для компьютера), а второй использует оптимальные 30-40 символов.

Изображение: Usertesting

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

4. Выберите шрифт, который хорошо работает в разных размерах

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

Читать еще:  Уроки английского языка с петровым для начинающих

Шрифт Roboto от Google

Убедитесь, что шрифт, который вы выбираете, может быть разборчивым на меньших экранах! Старайтесь избегать шрифтов, которые используют курсивное написание, например, Vivaldi (в приведенном ниже примере): хотя они красивы, их трудно читать.

Шрифт Vivaldi будет трудно читать на небольшом экране

5. Используйте шрифты с различимыми буквами

Во многих шрифтах слишком легко перепутать аналогичные формы букв, в частности “i” и “L” (как видно на изображении ниже), и маленькие расстояния между буквами, например, когда “r” и “n” выглядят как “m”. Поэтому, выбирая шрифт, обязательно проверяйте его в разных контекстах, чтобы убедиться, что это не вызовет проблем у ваших пользователей.

6. Избегайте печатать все прописными буквами

Текст, целиком написанный прописными буквами – отлично подходит в контекстах, которые не подразумевают чтение (например, акронимы или логотипы), но, когда ваше сообщение подразумевает чтение, не заставляйте своих пользователей читать текст, написанный заглавными буквами. Как уже упоминалось Майлсом Тинкером, в его знаковой работе “Легкость печати”, текст целиком написанный в верхнем регистре значительно замедляет скорость просмотра и чтения по сравнению с нижним регистром.

7. Не уменьшайте расстояние между строчками

В типографике у нас есть специальный термин для расстояния между двумя строками текста – лидинг (leading) или межстрочный интервал. Увеличивая межстрочное расстояние, вы увеличиваете вертикальный пробел между строками текста, как правило, улучшая читаемость в обмен на ценное пространство экрана. Как правило, для хорошей читаемости межстрочный интервал должен быть на 30% больше, чем высота символов.

Хорошо подобранное межстрочное расстояние улучшает читабельность. Изображение: Microsoft

Было доказано, что правильное использование пробела между абзацами повышает понимание до 20%, как отметил Дмитрий Фадеев. Умение использовать пустое пространство заключается в том, чтобы предоставить пользователям легко усваиваемое количество контента, а затем удалять посторонние детали.

Слева: Текст, строчки которого почти перекрывают друг друга. Справа: Хорошо подобранные интервалы способствуют читабельности. Изображение: Apple

8. Убедитесь, что у вас достаточный цветовой контраст

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

  • Маленький текст должен иметь коэффициент контрастности не менее 4,5: 1 по отношению к фону.
  • Большой текст (при 14 pt жирный / 18 pt обычный) должен иметь коэффициент контрастности по крайней мере 3: 1 по отношению к фону.

Эти строки текста не соответствуют рекомендациям цветового контрастности и их трудно отличить от цветов фона. Эти строки текста соответствуют рекомендациям цветового контрастности и легко читаются на цветах фона.

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

9. Избегайте окрашивания текста в красный или зеленый цвета

Цветная слепота – распространенное заболевание, особенно среди мужчин (8% мужчин – дальтоники), рекомендуется использовать другие сигналы в дополнение к цвету, чтобы отметить важную информацию. Также избегайте использования только красных и зеленых цветов для передачи информации, поскольку красная и зеленая цветовая слепота является наиболее распространенной формой дальтонизма.

10. Избегайте использования мигающего текста

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

Избегайте мигающего текста!

Вывод

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

Типографика существует, чтобы обеспечивать контент

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

У вас есть собственные советы по типографике в веб-дизайне? Или вы хотите получить более подробную информацию о упомянутых выше вопросах? Дайте мне знать в комментариях ниже!

Свежие вакансии

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Николай Геллар

Переводчик, историк, меломан. Люблю кофе, книги и классический рок. Авторские права на переведенные материалы, размещаемые на сайте, принадлежат их авторам.

Советы, конечно, в основном капитанские, но многие почему-то не знают таких основ. А вот за совет «Избегайте окрашивания текста в красный или зеленый цвета» респект.

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

Для отправки комментария вам необходимо авторизоваться.

Дизайн шрифтов уроки

О количестве и качестве шрифтов в графическом дизайне

Друзья!

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

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

Итак, если правило номер один для грамотного дизайна — это построение модульной сетки (см. статью «Свободное пространство и модульная сетка»), то правило номер два звучит так: ограничивайте количество шрифтов!

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

Чаще всего дизайнер выбирает один шрифт для проекта. Причем характер выбранного шрифта дожен соответствовать креативной идее, либо настроению дизайна. Например, если мы делаем буклет, посвященный сотовому телефону третьего поколения, то нам скорее всего подойдет легкий современный шрифт без засечек. А вот буклету на тему выставки импрессионистов в Эрмитаже больше подойдет классический, «прочно стоящих на ногах», шрифт с засечками. Вообще, удачный подбор шрифтов крайне важен в работе дизайнера, потому как несоответствие характера шрифта идее и характеру проекта может загубить всю работу на корню.

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

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

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

Читать еще:  Уроки яндекс директ бесплатно

Вот примеры хорошего применения шрифта:

Как вы видите, здесь используется всего два шрифта. Один для заголовков, а другой для основного текста. Такая работа выглядит изящно и последовательно.

А вот неудачное использование шрифтов:

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

Вот пример такой работы:

Это не плод моей фантазии. Таких работ я видел множество, и выполнены они были, как правило, либо дизайнерами-новичками, либо любителями.

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

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

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

Урок технологии, дизайн. Шрифт — основа графического дизайна

Разделы: МХК и ИЗО

Конспект урока технологии

Учебные дисциплины – Графика и Основы дизайна.

Тема: Шрифт – основа графического дизайна.

Цель: Создать условия для развития творческого потенциала личности при изучении темы и создания шрифтовой композиции для парфюмерного набора.

Задачи:

  • Актуализировать и систематизировать знания по теме.
  • Познакомить с требованиями, предъявляемыми к шрифтовым композициям в современном дизайне.
  • Развивать образное представление и логическое мышление на основе анализа формы парфюмерного изделия и выбора оригинальной шрифтовой композиции.
  • Развивать навыки работы тушью.
  • Воспитывать познавательный интерес к предмету.

Ход урока:

Мобилизация внимания, подготовка рабочего места.

Вхождение в проблематику темы.

Зрительный нерв перенапряжен от динамики, от фиксации движений. Мелькает окружающий мир — мир образов, мир знаков. Пестрят улицы городов рекламными щитами, вывесками магазинов, наименованием товаров. Взгляд останавливается лишь только тогда, когда видим знакомое слово, которое будоражит наше сознание.

Попробуем докопаться до сути, уловить тот момент, когда удивление изображенное на рисунке в виде расширенных глаз, превратилось в букву “У”.

В. Что заставило человека загнать открытость, откровенность рисунка в таинственный знак букв?

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

Попробует решить поставленную задачу первая группа.

О. Вспомним наскальные рисунки, их магическое действие бесспорно. Это рассказ без слов, самое древнее письмо в виде наскальных рисунков – пиктографическое.

Письмо эры ранней государственности и возникновения торговли – идеографическое (иероглиф). Знаки идеографического письма представляют отдельные слова или целые понятия.

Слоговое – письмо некоторых народов Индии, Японии.

Буквенно-звуковое (фонематическое) – это письмо наших дней. Фонемы обозначают отдельные звуки речи и в зависимости от произношения могут варьироваться.

Я думаю, письмо – как система письменных знаков, передающих речь человека и рассчитанных на зрительное воспроизведение, возникло из потребности закрепить в памяти какие-либо события, передавать важные известия.

В. Что влияло на начертание знаков?

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

Мы очень часто употребляем слово “ шрифт”.

В. Что это такое?

О. 1.Совокупность букв, цифр, знаков определенного рисунка стиля, служащая техническим средством воспроизведения речи на каком-либо языке.

2.Комплект наборных литер (гарнитура) для типографического набора.

3.Рисунок (конфигурация) букв, цифр, знаков.

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

На современном уровне шрифт – основа графического дизайна, индикатор визуальной культуры. Именно в этой области к шрифтам предъявляются самые высокие требования.

Где в настоящее время мы встречаемся со шрифтовыми композициями, нас познакомит вторая группа.

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

Наша группа предлагает небольшую игру ассоциацию. Я показываю шрифтовую композицию, а вы называете какие чувства, вызывает эта композиция.

Предлагаются варианты шрифтовых композиций.

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

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

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

  • Сбалансированность – это такая компоновка, с помощью которой можно достичь приятного для глаза распределения. На зрительное впечатление влияют: размеры, цвет, форма, плотность конкретного элемента.
  • Пропорциональность – соотношение частей и целого.
  • Ритмичность – чередование элементов, которое придает композиции четкость, стройность, особую выразительность, соразмерность.
  • Равновесие – ощущение симметричности.
  • Тон – светлота цвета. Ахроматическая – от белого к черному. Хроматическая — цветная.
  • мКонтрастность – в переводе с французского “противоположность”.
  • Гармоничность – взаимосвязь всех элементов, единство формы и цвета.
  • Целостность – впечатление завершенности, простота элементов.

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

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

Для этого:

    1. Оттеняют буквы.
    2. Применяют закругленные или прямые подсечки.
    3. Обводят буквы по контуру.
    4. Применяют полые буквы.
    5. Пишут буквы только с помощью объемной тени.

    Сделаем вывод:

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

    Переходим к практической части урока.

    Ваша задача: на эскизе парфюмерного изделия выполнить фирменное наименование, используя ваше имя. Графическим материалом будет тушь, инструментами кисть, перо.

    Последовательность работы:

      1. Продумать общее расположение строк текста.
      2. Определить стиль и размер шрифта.
      3. Используя графические приемы создать образ, возникающий в вашем сознании.

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

    Выставка творческих работ. Анализ изделий.

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

Ссылка на основную публикацию
Adblock
detector