Правила композиции для создания сайтов
,

Правила композиции для создания сайтов

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

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

Правило третей

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

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

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

Иерархия

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

Очевидно, что нужно выделять главные и второстепенные объекты. В ключевые точки на пересечении линий из прошлого пункта ставь те объекты, которые надо выделить. Помни, что мы читаем по траектории Z или F. Соответственно, первый квадрат из девяти – самый просматриваемый. Этот концепт не работает при создании сайтов для арабского и азиатского мира, потому что их паттерн чтения другой.

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

Баланс

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

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

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

Правило журнала

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

Цветовые комбинации

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

Определи основной цвет и дополнительные. Присвой им определенные роли и не отступай от них. Одно из самых простых и универсальных решений – 3-4 оттенка одного цвета, один контрастный и дополнительно белый или черный. Используй контрастный цвет для акцентов, выделяй им кнопки, навигацию, делай тонкие рамки. 

Ритм и повторение

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

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

Если речь о большом количестве информации на одной странице, то нужно создать ритм. Сплошное полотно из элементов и текстов – это прошлый век. Самые прогрессивные сайты сегодня используют поочередную смену темного и светлого фонов, явное разграничение блоков. Посмотри на Tesla, Microsoft, Wrike, Jira, Asana.

Воздух

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

Правила композиции для создания сайтов

Изучай базу

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

0 ответы

Ответить

Хотите присоединиться к обсуждению?
Не стесняйтесь вносить свой вклад!

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