Дипломная работа: Графическая концепция web-сайта
Внимание! Если размещение файла нарушает Ваши авторские права, то обязательно сообщите нам
17
Газетчики и редакции журналов быстро увидели необходимость сеток и начали
применять их в своей практике.
В работе дизайнера, когда макеты состоят из различных объектов, сетка
помогает ровно их упорядочить. Сетка позволяет, заложив ключевые
закономерности при её построении всего один раз, позже использовать их
заново без дополнительной настройки. Правильно примененные сетки
помогают удерживать внимание читателя, повышают качество восприятия
текста и улучшают опыт его взаимодействия с материалом. Сегодня в дизайне
медиа сетка придает информации упорядоченность и согласованность. Она
ответственна за структурирование содержимого отдельных статей и издания
в целом.
Существует множество видов и конфигураций сеток: от примитивных
клеточных, до сложносочиненных структур с разными расстояниями между
горизонталями и вертикалями. Сетки могут быть простыми и сложными,
фиксированными или динамическими.
В зависимости от того, что берется за основу построения сетки, можно
выделить следующие ее типы: блочная (в основе блок), колоночная (колонки),
модульная (модуль), иерархическая (визуальный вес и расположение элементов
относительно друг друга).
Блочная сетка – самый простой вид сетки, которая, как правило,
используется в печатных изданиях. Обычно такая сетка представляет собой
стандартизированный прямоугольник, который содержит контент на странице
или на экране. В качестве примера, можно привести простые страницы блогов,
статей, новостей, где страницы предназначены для сплошного чтения.
18
Рис. 1.9. Блочная сетка
Колоночная – сетка, имеющая колонки в своей структуре. Основные
блоки выровнены по вертикальным колонкам, используется узкий
межколонник.
Рис. 1.10. Колоночная сетка
Модульная сетка характеризуется наличием как вертикального
разделения, так и горизонтального. Это система расположения объектов
в пространстве, основанная на рядах и колонках определенного, строго
заданного размера. В ячейках можно располагать такие элементы как:
текстовые блоки, заголовки, врезки, графические иллюстрации и изображения.
19
Рис. 1.11. Модульная сетка
Иерархическая – сетка, характеризующаяся интуитивным
расположением блоков, которая делает фокус на пропорциях и визуальном
объеме элементов в дизайне. Такой тип сетки часто используется, когда
контент не стандартизированный и не однообразный. Часто встречается для
площадок, связанных с модой, фотографией, искусством.
Рис. 1.12. Иерархическая сетка
1.3 Исследование проблемы выбора шрифтового оформления
При первом знакомстве с любым сайтом ключевую роль играет дизайн.
Шрифт, как его составляющая, может упростить восприятие сайта и
информации на нем для нового пользователя или, наоборот, усложнить.
Исследования показывают, что многие люди не читают текст на сайте целиком,
а только просматривают (сканируют) информацию.
Результаты айтрекинга доказывают, что большая часть респондентов во
время просмотра веб-страниц читает информацию по шаблону буквы F. Иными
20
словами, люди обращают внимание на те надписи, которые, если мысленно
начертить латинскую букву F, расположены на двух горизонтальных и одной
вертикальной линиях. Если текст в этой области будет читабельным, а
информация правильно структурирована по важности – пользователь с
большей долей вероятности примет решение остаться на сайте. В противном
случае посетитель поспешит покинуть страницу и перейти к следующим
результатам поиска.
Прежде, чем перейти к выбору шрифтовых сочетаний, нужно знать, из
чего выбирать. Все шрифты делятся на две основные категории: рукописные и
печатные.
Рукописные шрифты имеют оригинальный вид, среди них есть
персонализированные (например, шрифт Кафки, Пикассо, Сезанна). Их
используют дизайнеры для оформления заголовков, логотипов. В качестве
основного шрифта для текста они не подходят, поскольку затрудняют чтение и
восприятие.
Здесь эстафету у них перенимают печатные шрифты. Их разделяют на
три группы:
Шрифты с засечками. Они облегчают чтение печатных изданий,
визуально очерчивая строки. Но в веб-дизайне они скорее усложняют
восприятие и рассеивают внимание читателя. Основное назначение таких
шрифтов – использование в логотипах, выделение заголовков и важной
информации на странице.
Рубленные. Шрифты нейтрального характера, без засечек.
Подходят для заголовков, параграфов, основного текста.
Декоративные. Они выглядят оригинально, ярко. Такие шрифты
отлично подойдут для молодежных сайтов и любой тематики, связанной с
творчеством. Но применять их нужно очень осторожно: текст, написанный
декоративным шрифтом, сложный для чтения. Чаще всего их используют для
создания логотипов и выделения заголовков.
21
Рис. 1.13. Примеры печатных шрифтов
В разговоре о шрифтах, как правило, упоминаются стандартные
характеристики: начертание, насыщенность, четкость, кегль и т. д. Но каждый
шрифт – это, прежде всего, характер.
В зависимости от смысла, который необходимо передать, стоит
выбирать и подходящий шрифт. Например, жирный шрифт с резкими
очертаниями настраивает на восприятия фактов, важной информации,
сенсационных новостей. Шрифты с мягкими линиями и закругленными
очертаниями вызывают приятные и легкие эмоции и подходят для
соответствующей тематики.
Характер шрифтов особенно важно учитывать при создании сочетаний
заголовок + текст.
Если в этой паре соединить противоречащие друг другу гарнитуры,
внимание читателя сосредоточится на самих шрифтах, а не на содержании
страницы. Например, если заголовок выполнен в Franklin Gothic (солидный,
мужественный стиль), а основной текст в Souvenir (легкий, воздушый), в
результате получится противоречивое сочетание, которое мешает
гармоничному восприятию статьи. А если заменить шрифт заголовка на Futura
Bold, картина полностью изменится: эти два шрифта дополнят друг друга
благодаря схожести элементов и не создают ненужного напряжения.
Для посетителя важны только моменты восприятия: насколько
гармонично вписывается шрифт в оформление, легко ли воспринимается,
удобно ли читать. Правильно ли расставлены акценты на странице, которые
помогают ориентироваться в обилии информации. Задача дизайнера –
Источник: https://baza.diplomsite.ru/previewfile/756