Рекомендации по оформлению сайта

Структура сайта

Прежде чем перейти к базовым принципам дизайна, давайте разберём то из каких частей состоит страница сайта. Любой сайт можно сравнить с презентацией, где каждая секция — это отдельный слайд. 

Каждая секция должна раскрывать только какую-то одну тему, отвечать на один конкретный вопрос, например: "Что за продукт?", "Какие преимущества?", "Где мы находимся?" и т.д.

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

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

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

Разное расположение элементов в секциях

Порядок и сетки

Первое, на что обращаешь внимание при входе на сайт — то насколько легко найти нужную информацию. Если на вашем сайте огромное количество кнопок и текстов, расположенных слишком близко друг к другу, посетителю будет крайне сложно воспринимать информацию.
​
Поэтому очень важно сделать так, чтобы сайт стал "чистым" и понятным. Одним из таких признаков чистоты является белое пространство ("white space") или пустое пространство. Чем больше "воздуха" между смысловыми блоками сайта (секциями) и элементами внутри них, тем проще и легче воспринимается информация.
​
Чтобы создать аккуратный сайт, обязательно используйте сетку.

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

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

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

Справа выравнивание выглядит более более устойчиво

Слева плохое выравнивание, справа – исправленный вариант

Как видите, без выравниваний и сетки сайт выглядит крайне неряшливо.

Сетка позволяет выстроить целую систему отступов на вашем сайте: отступы между элементами, отступы между смысловыми блоками (секциями), отступы между заголовками и основным текстом и так далее. Соблюдение таких сеток придаёт сайту ритмичность. Ритм в контексте дизайна сайта — это повторение одних и тех же приёмов, включая использование одинаковых отступов между секциями/элементами.

В конструкторах сайтов, как правило, уже есть готовая сетка (grid) по умолчанию, придерживайтесь её и всё будет отлично.

Отступы между секциями

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

Содержимое отдельной секции должно быть окружено воздухом

Правило близости

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

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

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

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

Некорректные отступы между связанными по смыслу объектами

Типографика

Ещё один важный аспект при создании вашего сайта — выбор шрифтовой пары. Это может быть либо один и тот же шрифт с двумя разными начертаниями (например Bold для заголовков и Normal/Light для обычного текста), либо два разных шрифта: антиква и гротеск.

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

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

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

Ниже мы привели примеры удачных шрифтовых пар.

Антиква + гротеск

Один и тот же шрифт в разных начертаниях

Исключение составляют разве что шрифты с имитацией рукописного текста, которые можно использовать для подписей к иллюстрациям или в качестве декора, имитации писем и т.п. Но если вы решите использовать такой прием, то рекомендуем использовать только один рукописный шрифт на сайте.
​
Но и это ещё не всё, когда мы выбрали шрифтовую пару, важно соблюдать межстрочный интервал. Межстрочный интервал простыми словами — это расстояние между двумя строками текста.
​
Увеличивая межстрочное расстояние, вы увеличиваете вертикальный пробел между строками текста, как правило, улучшая читабельность текста. Межстрочный интервал должен быть на 30% больше, чем высота символов.

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

Текст справа читать гораздо удобнее

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

Цвета вашего сайта

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

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

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

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

Для этого вам понадобится цветовой круг. Существует несколько популярных цветовых моделей, руководствуясь которыми можно подобрать удачные цвета для вашего сайта:

1. Монохромная — цветовая модель, использующая один цвет и его оттенки, не только чёрно-белая, как часто полагают.

2. Аналоговая — использует сочетания цветов, которые находятся рядом в цветовом круге (3 цвета подряд на цветовом круге), это близкие похожие цвета.

3. Комплементарная — самая эффектная, сильная и рабочая цветовая модель, использующая 2 цвета, находящиеся друг напротив друга в цветовом круге.

4. Классическая триада — цвета, равномерно распределенные по цветовому кругу в виде равностороннего треугольника.

5. Контрастная триада — когда два близких цвета противопоставляются одному, расположенному на противоположной стороне.

Примеры цветовых моделей

Посмотрите как может выглядеть один и тот же сайт с использованием различных цветовых моделей:

Примеры использования цветовых моделей

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

Контраст элементов

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

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

Пример, когда разница между заголовком и подзаголовком едва заметна

Пример, когда разница между заголовком и подзаголовком хорошо видна

Иерархия

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

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

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

Главный заголовок H1 сделан крупнее других заголовков с типом H2

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

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

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

С типографикой та же история: будет странно, если вы будете использовать какой-нибудь Comic Sans (сейчас сложно представить, что кто-то будет всерьез его использовать) при создании сайта для серьёзного люксового бренда, пример ниже.

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

Так что же такое ритм?

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

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

Вот несколько ключевых аспектов, связанных с ритмом:

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

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

2. Периодичность: Ритм в дизайне может быть установлен через регулярное и предсказуемое размещение элементов или мотивов. 

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

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

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

4. Пропорции и порядок: Соблюдение гармоничных пропорций и порядка помогает достичь эстетического баланса и упорядоченности в дизайне. В этом как раз могут помочь сетки и одинаковые отступы.

Ещё об одном одном аспекте, связанным с ритмом, поговорим отдельно.

Общая стилистика

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

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

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

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

4. Макет и композиция: Расположение элементов, баланс пространства и сетка — все это важные элементы, влияющие на общую структуру и композицию сайта. Обратите внимание на размещение контента, использование отступов и создание понятной и легкой навигации.

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

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

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

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

Немного про анимацию

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