Реферат на тему «Искусство шрифта в web дизайне»

СОДЕРЖАНИЕ

1. Введение
2. Происхождение и развития web-дизайна
3. Типографика в web-дизайне
4. Особенности использования шрифтов в web-дизайне
5. Заключение
6. Список используемой литературы

Введение

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

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

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

Огромное значение для оформления web-дизайна имеет правильное использование шрифтов.

Цель данной работы – рассмотреть искусство шрифта в web-дизайне Для достижения цели необходимо решить следующие задачи:

1. Рассмотреть происхождение и развитие web-дизайна.
2. Выявить особенности типографики в web-дизайне.
3. Изучить особенности использования шрифтов в web-дизайне.

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

1. Происхождение и развития web-дизайна

Веб-дизайн (от англ. web design) — отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений.

Веб-дизайн — вид графического дизайна, направленный на разработку и оформление объектов информационной среды Интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества. Подобная трактовка отделяет веб-дизайн от веб-программирования, подчеркивает специфику предметной деятельности веб-дизайнера, позиционирует веб-дизайн как вид графического дизайна[1].

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

Веб-дизайн – самый молодой из видов дизайна, но, пожалуй, самый «синтетический»: он вобрал в себя черты оформления книги, плаката и промышленного дизайна. Вести отсчет стоит с 19-го века, времени зарождения промышленного капитализма, бурного развития наемного труда и ускорения темпов экономического роста.

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

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

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

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

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

Плакаты 1920-1950 годов уже не выглядят так богато, как в прошлом веке. Зато появляется больше конкретики: четко выделяется название товара, его основные преимущества, пишется сопроводительный текст. В некоторых плакатах текста бывает очень много, и это становится отдельным направлением в маркетинге, но чаще всего дизайнеры ограничиваются несколькими фразами, которые называют и коротко описывают товар[2].

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

С тех пор начинает вырабатываться графический язык — язык цвета, формы и композиции. Его развитие достигает пика в 60-90 годы. Рекламные плакаты того времени — настоящее торжество формы, невероятно выразительные и сильные работы.

Наконец, в этот период создается главное изобретение, к которому графический дизайн держал свой долгий путь — появляется сетка, или швейцарская модульная система верстки. Ее появлению мир обязан Яну Чихольду, Эмилю Рудеру, Максу Биллу и другим известным графическим дизайнерам середины 20-го века[3].

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

В начале 90-х годов кончился СССР и начался WWW. У российского населения стали постепенно появляться компьютеры и модемный доступ в сеть. Интернет стал наполняться первыми веб-страницами. Во второй половине 1990-х годов зарождается понятие веб-дизайна.

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

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

В 1990 году мир увидел первую веб-страницу — info.cern.ch. На сайте был лишь текст и ссылки. Первая версия HTML не позволяла визуализировать веб-страницы и придавать им индивидуальный лоск. Сплошь «текстовые» сайты просуществовали до 1994 года[4].

В 1993 году появляется первый браузер с поддержкой графики — NCSA Mosaic, а спустя ещё 3 года — каскадные таблицы стилей (CSS), позволившие форматировать сплошной текст.

2. Типографика  в web-дизайне

Коммуникация играет в дизайне огромную роль. Очень важно создавать крепкую связь между веб-сайтом и непосредственно самим пользователем и затем помогать ему в достижении поставленных целей. Когда мы говорим о коммуникации в контексте веб-дизайна, обычно мы имеем в виду текст. Типографика является неотъемлемой частью данного процесса. Хорошая типографика — это залог легкодоступной информации, в то время как при плохой типографике приходится прикладывать усилия для понимания текста. Как отмечаетА.Ю.Гончаров,  веб-дизайн на 95% состоит из типографики.

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

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

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

Внедрение свойства @font-face CSS сыграло важную роль в развитии этого направления. Следует лишь прописать ссылку на любой файл шрифта, и его использование становится уместным  на страницах сайта. Есть в этой теме некоторые недовольства со стороны разработчиков, но и это оказалось вполне решаемой проблемой.

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

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

Шрифты для веб-дизайна желательно указывать в относительных единицах (% или «em»), это способствует адаптивности и гибкости контента. Более привычные пиксели «px» имеет смысл использовать для неадаптивных контейнеров, когда при изменении размера экрана двигаются блоки, а шрифт остается стабильным.

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

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

Комфортный для глаз шрифт — 12–16 px, но даже самый мелкий блок не должен быть меньше 10 px.

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

3. Особенности использования шрифтов в web-дизайне

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

• Используйте минимальное количество шрифтов

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

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

• Старайтесь использовать стандартные шрифты

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

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

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

• Ограничьте длину строки

Правильно подобранное количество знаков на одной строке — это ключ к легкости прочтения вашего текста. Выбирая ширину текста, вы должны ориентироваться не на ваш дизайн, а на ясность и четкость написанного. Обратите внимание на этот совет от Baymard Institute: «Если вы хотите, чтобы вашему читателю было комфортно, каждая строка должна содержать не более 60 знаков. Правильно подобранное количество знаков на одной строке — это ключ к легкости прочтения вашего текста»[6].

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

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

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

• Выбирайте гарнитуры, которые хорошо читаются в любом размере

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

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

Использование шрифта Vivaldi затруднит прочтение текста на маленьком экране.

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

Многие шрифтовые гарнитуры созданы таким образом, что иногда бывает очень легко спутать похожие буквы, особенно «I» и «L», написанные латиницей (как на изображении ниже). В некоторых же буквы расположены так близко друг к другу, что сочетание «r» и «n» можно принять за букву «m». Поэтому, выбирая шрифт, протестируйте его в разных контекстах. Так вы сможете убедиться, что из-за шрифтовой гарнитуры у читателя не возникнет проблем с пониманием текста.

• Избегайте капса

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

• Не сводите межстрочное расстояние к минимуму

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

Правильное межстрочное расстояние способствует лучшей читабельности текста.

• Убедитесь, что у вас все в порядке с цветовым контрастом.

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

Небольшие тексты должны иметь коэффициент контраста минимум 4,5:1 по отношению к фону.

Большие тексты (от 14 размера полужирным шрифтом/от 18 размера и выше стандартным шрифтом) должны иметь коэффициент контраста минимум 3:1 по отношению к фону.

• Старайтесь не использовать красный или зеленый цвет в тексте

Дальтонизм — явление довольно распространенное, особенно среди мужчин (8% мужского населения — дальтоники). Поэтому, помимо цвета, желательно использовать какие-то другие знаки для выделения важной информации. Также старайтесь не прибегать к красному и зеленому цвету, так как именно эти цвета чаще всего не распознаются дальтониками.

• Старайтесь не использовать мерцающий текст

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

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

Заключение

Таким образом, можно сделать следующие выводы.

В наше время количество Интернет-пользователей стремительно растет. Все более широкое распространение в мире получают информационные сети — объединение компьютеров с помощью коммуникаций. Тем более приобретает особое значение web-дизайн.

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

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

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

Список используемой литературы

1. Бородаев Д. В. Веб-сайт как объект графического дизайна. Монография. — М.: Септима ЛТД, 2016. – 415с.
2. Бердышев С.Н. Рекламный текст. Методика составления и оформления/С.Н. Бердышев.- М.: Наука, 2016.- С. 252.
3. Борисов Б.Л, Технология рекламы и PR/Б.Л. Борисов.- М.: ФАИР-ПРЕСС, 2015.- 449с.
4. Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. — М.: КУДИЦ-ПРЕСС, 2017. — 254с.
5. Комолова Н.В. HTML. Учебный курс/Н.В.Комолова. – СПб.: Питер, 2016. – 268 с.
6. Компьютерные информационные технологи: Учебное пособие/А.В. Бурдуковская — Издательство БГУЭП, 2015. — 62 с.
7. Курушин В.Д. Графический дизайн и реклама. Самоучитель/В.Д.Курушин. – М.: ДМК Пресс, 2016.- 272 с.
8. Мокшанцев Р.И. Психология рекламы: Учебное пособие/Р.И. Мокшанцев.- М.: ИНФРА-М, 2016.- 387с.
9. Панкратов Ф.Г. и др. Рекламная деятельность/Ф.Г. Панкратов – М.: Маркетинг, 2015.- 512с.
10. Радугин А.А. Реклама: новые технологии в России / А.А. Радугин – М., Центр, 2017. – 336 с.
11. Типографика в веб-дизайне: основы и правила использования[Электронный ресурс] Режим доступа: https:// webformyself. com/tipografika-v-veb-dizajne-osnovy-i-pravila-ispolzovaniya/