17
Газетчики и редакции журналов быстро увидели необходимость сеток и начали
применять их в своей практике.
В работе дизайнера, когда макеты состоят из различных объектов, сетка
помогает ровно их упорядочить. Сетка позволяет, заложив ключевые
закономерности при её построении всего один раз, позже использовать их
заново без дополнительной настройки. Правильно примененные сетки
помогают удерживать внимание читателя, повышают качество восприятия
текста и улучшают опыт его взаимодействия с материалом. Сегодня в дизайне
медиа сетка придает информации упорядоченность и согласованность. Она
ответственна за структурирование содержимого отдельных статей и издания
в целом.
Существует множество видов и конфигураций сеток: от примитивных
клеточных, до сложносочиненных структур с разными расстояниями между
горизонталями и вертикалями. Сетки могут быть простыми и сложными,
фиксированными или динамическими.
В зависимости от того, что берется за основу построения сетки, можно
выделить следующие ее типы: блочная (в основе блок), колоночная (колонки),
модульная (модуль), иерархическая (визуальный вес и расположение элементов
относительно друг друга).
Блочная сетка – самый простой вид сетки, которая, как правило,
используется в печатных изданиях. Обычно такая сетка представляет собой
стандартизированный прямоугольник, который содержит контент на странице
или на экране. В качестве примера, можно привести простые страницы блогов,
статей, новостей, где страницы предназначены для сплошного чтения.
18
Рис. 1.9. Блочная сетка
Колоночная – сетка, имеющая колонки в своей структуре. Основные
блоки выровнены по вертикальным колонкам, используется узкий
межколонник.
Рис. 1.10. Колоночная сетка
Модульная сетка характеризуется наличием как вертикального
разделения, так и горизонтального. Это система расположения объектов
в пространстве, основанная на рядах и колонках определенного, строго
заданного размера. В ячейках можно располагать такие элементы как:
текстовые блоки, заголовки, врезки, графические иллюстрации и изображения.
19
Рис. 1.11. Модульная сетка
Иерархическая – сетка, характеризующаяся интуитивным
расположением блоков, которая делает фокус на пропорциях и визуальном
объеме элементов в дизайне. Такой тип сетки часто используется, когда
контент не стандартизированный и не однообразный. Часто встречается для
площадок, связанных с модой, фотографией, искусством.
Рис. 1.12. Иерархическая сетка
1.3 Исследование проблемы выбора шрифтового оформления
При первом знакомстве с любым сайтом ключевую роль играет дизайн.
Шрифт, как его составляющая, может упростить восприятие сайта и
информации на нем для нового пользователя или, наоборот, усложнить.
Исследования показывают, что многие люди не читают текст на сайте целиком,
а только просматривают (сканируют) информацию.
Результаты айтрекинга доказывают, что большая часть респондентов во
время просмотра веб-страниц читает информацию по шаблону буквы F. Иными
20
словами, люди обращают внимание на те надписи, которые, если мысленно
начертить латинскую букву F, расположены на двух горизонтальных и одной
вертикальной линиях. Если текст в этой области будет читабельным, а
информация правильно структурирована по важности – пользователь с
большей долей вероятности примет решение остаться на сайте. В противном
случае посетитель поспешит покинуть страницу и перейти к следующим
результатам поиска.
Прежде, чем перейти к выбору шрифтовых сочетаний, нужно знать, из
чего выбирать. Все шрифты делятся на две основные категории: рукописные и
печатные.
Рукописные шрифты имеют оригинальный вид, среди них есть
персонализированные (например, шрифт Кафки, Пикассо, Сезанна). Их
используют дизайнеры для оформления заголовков, логотипов. В качестве
основного шрифта для текста они не подходят, поскольку затрудняют чтение и
восприятие.
Здесь эстафету у них перенимают печатные шрифты. Их разделяют на
три группы:
Шрифты с засечками. Они облегчают чтение печатных изданий,
визуально очерчивая строки. Но в веб-дизайне они скорее усложняют
восприятие и рассеивают внимание читателя. Основное назначение таких
шрифтов – использование в логотипах, выделение заголовков и важной
информации на странице.
Рубленные. Шрифты нейтрального характера, без засечек.
Подходят для заголовков, параграфов, основного текста.
Декоративные. Они выглядят оригинально, ярко. Такие шрифты
отлично подойдут для молодежных сайтов и любой тематики, связанной с
творчеством. Но применять их нужно очень осторожно: текст, написанный
декоративным шрифтом, сложный для чтения. Чаще всего их используют для
создания логотипов и выделения заголовков.
21
Рис. 1.13. Примеры печатных шрифтов
В разговоре о шрифтах, как правило, упоминаются стандартные
характеристики: начертание, насыщенность, четкость, кегль и т. д. Но каждый
шрифт – это, прежде всего, характер.
В зависимости от смысла, который необходимо передать, стоит
выбирать и подходящий шрифт. Например, жирный шрифт с резкими
очертаниями настраивает на восприятия фактов, важной информации,
сенсационных новостей. Шрифты с мягкими линиями и закругленными
очертаниями вызывают приятные и легкие эмоции и подходят для
соответствующей тематики.
Характер шрифтов особенно важно учитывать при создании сочетаний
заголовок + текст.
Если в этой паре соединить противоречащие друг другу гарнитуры,
внимание читателя сосредоточится на самих шрифтах, а не на содержании
страницы. Например, если заголовок выполнен в Franklin Gothic (солидный,
мужественный стиль), а основной текст в Souvenir (легкий, воздушый), в
результате получится противоречивое сочетание, которое мешает
гармоничному восприятию статьи. А если заменить шрифт заголовка на Futura
Bold, картина полностью изменится: эти два шрифта дополнят друг друга
благодаря схожести элементов и не создают ненужного напряжения.
Для посетителя важны только моменты восприятия: насколько
гармонично вписывается шрифт в оформление, легко ли воспринимается,
удобно ли читать. Правильно ли расставлены акценты на странице, которые
помогают ориентироваться в обилии информации. Задача дизайнера –
22
проработать все эти факторы, выдерживая дресс-код тематики сайта.
Сделать это правильно помогают следующие правила:
Использование 2-3 шрифтов для оформления сайта. Большее
количество будет отвлекать внимание посетителей. К тому же, большое
количество использованных шрифтов увеличит время загрузки страницы, что
отрицательно скажется на посещаемости и поисковом продвижении.
Читабельность. Все остальное не будет иметь значения, если текст
не удобно читать. Чтобы пользователь не покинул страницу в первые же
секунды после перехода, важно убедиться, что текстовый контент легко
читается и выбраны правильные параметры: цветовое сочетание, размер,
начертание и пр.
Выделение логических блоков. Для этого применяются разные
гарнитуры или один и тот же шрифт, но с разными параметрами насыщенности,
размера, начертания. Это помогает посетителю сориентироваться на странице.
1.4 Исследование и определение стиля для сайта
Стиль дизайна сайта – это моментальное обращение к целевой
аудитории. То, что увидит посетитель на сайте в первое мгновение – повлияет
на дальнейшее отношение к компании, и на решение покинуть площадку или
остаться.
При разработке дизайна, в первую очередь, необходимо решить в каком
стиле должен быть выдержан сайт. Ниже рассмотрятся примеры и краткое
описание стилевых решений дизайна сайта, однако необходимо учитывать, что
многие примеры сайта основаны на определенном стиле, но также, включают
элементы других стилей. Сайт, органично сочетающий несколько стилевых
решений будет по-настоящему уникальным и неповторимым.
Выбор стиля дизайна сайта должен быть основан на психографических
характеристиках, присущих целевой аудитории сайта. Стили дизайна сайта
можно разделить по техническому и художественному исполнению.
Классика. В этом направлении оформлено множество популярных web-
23
ресурсов, Поскольку классика универсальна: в этом ключе сайт может
оформить и салон красоты, и юридическая компания, и производственная
фирма. Оформление дает понять посетителю, что компания серьезная,
надежная и готова к сотрудничеству.
Этот стиль веб-дизайна подчиняется достаточно строгим нормам:
Структура построена колонками;
Наименование и логотип находятся в верхней части страницы;
Меню расположено слева или сверху, выпадающее либо статичное;
Цветовая гамма – сдержанная, гармоничная, без ярких и пестрых
акцентов, обычно в светлых оттенках. Если у компании разработана айдентика,
включаются фирменные цвета и элементы; Выбираемые цвета дизайна сайта
должны сочетаться с уже используемыми цветами в логотипе, а полиграфия
дает ответ на вопрос – какие типы шрифтов могут быть использованы для
оформления текстового контента;
Графика, анимация и прочие мультимедийные штучки либо совсем
отсутствуют, либо расставлены в виде незначительных вкраплений;
Шрифты подбираются скромные, без излишеств, вычурности,
цветовых эффектов;
Оформление не отвлекает внимание гостей на себя, и они могут
целиком сосредоточиться на информации о бизнесе.
Как правило, классический дизайн сайта используют, создавая веб-
ресурс для бизнеса (компаний и корпораций). При этом, акцентируют внимание
на логотипе (наиболее ярком и привлекающем внимание, цветовом
изображении) - наиболее узнаваемом элементе бизнеса.
24
Рис. 1.14. Стартовая страница сайта Сбербанка
Стиль гранж, в отличие от остальных пришел не из веб-дизпйна, а из
музыкальной сферы из которой взял такие отличительные черты как грубые
рваные контура, небрежность и некую тяжесть. В данном стиле часто
используются темные, приглушенные оттенки, рваные текстуры, объекты hand
made. Этот стиль можно выделить с помощью таких признаков:
Цветовая гамма являет собой такие цвета: кирпичные, сероватые,
черные, коричневые, песочные, грязно-зеленые тона. Очень часто черный,
яркие цвета заменяются более натуральными – бордовый, оливковый и т.д.;
В качестве текстуры часто используются состаренные, выцветшие,
потертые, полутона, которые словно выгорели на солнце или поблекли под
воздействием времени, песчаные фоны, неровные и рваные края, затертые и
размытые графические элементы вдохновленные городской и индустриальной
архитектурой и пейзажами, кладка, исписанные граффити стены, деним,
рогожка, выцветшая бумага;
Шрифты используют замысловатые, размытые, гротескные, потертые, от
настоящих готических до искусно стилизованных под прошедшие эпохи.
Целевая аудитория – та, у которой в почете все крафтовое. Реже такой
стиль используется для деловой среды или крупного бизнеса, такая эстетика
адресована молодежи. Особо рекомендовано барбершопам и сайтам,
представляющим алкогольную продукцию.
25
Рис. 1.15. Сайт Mookhomor
Основной акцент в минимализме на простом и неброском оформлении.
Здесь не должно быть ничего лишнего. Обилие контента здесь не
приветствуется, иногда весь текст состоит из нескольких фраз или призывов к
действию, либо же он заменен на фото и видно контент. Для такого стиля сайта
характерно минимум графических элементов, ацент делается на
информативности и четкого оказания на тематику сайта. Сайт четко
структурирован. Лаконичность является одним из главных принципов, а
количество визуальных элементов сводится к минимуму. Этим правилам
подчиняется все, от структуры интернет-ресурса до выбора цветовой гаммы. В
основе минимализма лежит чистая логика и полный отказ от излишеств.
У такого стиля широкая сфера применения. Так оформляют интернет-
магазины, лендинги, корпоративные сайты малого или среднего бизнеса. Чаще
всего используется для создания сайтов , на которых обильно представлен
какой-либо контент, например фото. Часто используется для выставок
современного искусства. Крупному бизнесу не рекомендуется сооздавать сайт в
минимализме.
Стиль минимализм обладает рядом преимуществ, например простотой
восприятия подающейся информации и акцентированием внимания на главных
деталях сайта.
26
Рис. 1.16. Сайт Prana
Ретро. В середине 2000-х годов стал набирать популярность винтажный
стиль. Стиль ретро может включать ретроспективные, классические или
античные элементы. Часто сайты в таком стиле оформляют наиболее
популярные исторические периоды, как например дизайн под античность и
период до 20 века или же дизайн в стиле культуры начала 20 века.
Такой стиль используется в ситуациях, когда нужно сформировать
определенное мнение о продукте или товаре, сделать акцент на его богатом
историческом бекграунде. Чаще всего ретро стиль выбирают те владельцы, чей
бизнес является семейным делом и обладает богатой, многолетней историей.
Рис. 1.17. Сайт Forefathers
Карточный стиль «Metro». Необычный вариант, идеально подходящий