Правильная композиция – залог успешной фотографии, картины и сайта. Но в отличие от произведений искусства в сайте важна не только эстетика, но в первую очередь практичность и управление вниманием. Поэтому главные принципы композиции в веб-дизайне строятся на пересечении маркетинга и изобразительного искусства.
Правило третей
Все начинается с правила третей, с которым знакомы не только дизайнеры, но и фотографы. Это самый базовый принцип построения композиции, базирующийся на основе “золотого сечения”. По этой теории нужно разделить страницу на 9 равных частей – проведи две вертикальные и две горизонтальные линии. Пересечения точек и будут теми местами, в которых люди больше всего концентрируют внимание. А правильное использование такой схемы поможет сделать гармоничную картинку.
Человек хорошо воспринимает деление на две и на три части, от этого и нужно отталкиваться. Не нужно сложной геометрии, это может запутать пользователя.
В современных программах и редакторах есть несколько вариантов сеток, с которыми знаком даже начинающий дизайнер. Это значительно облегчает работу, легко выбрать подходящую сетку и подставить туда свои элементы.
Иерархия
Наш мозг имеет уникальную способность к мгновенной классификации информации. Поэтому тебе нужно создать композицию читаемую и простую для восприятия. Разум пользователя будет группировать визуально похожие объекты и выделять важное – на это уходят доли секунды. Это способ не только передавать большой объем информации, но и управлять вниманием.
Очевидно, что нужно выделять главные и второстепенные объекты. В ключевые точки на пересечении линий из прошлого пункта ставь те объекты, которые надо выделить. Помни, что мы читаем по траектории Z или F. Соответственно, первый квадрат из девяти – самый просматриваемый. Этот концепт не работает при создании сайтов для арабского и азиатского мира, потому что их паттерн чтения другой.
Продумай пользовательский путь. Зная траекторию взгляда и правило третей, ты можешь выстроить объекты так, чтобы они привели к нужному тебе результату. Тут можно применить маркетинговую схему, например, AIDA.
Баланс
Важно уравновешивать композицию. Ты добавил два-три главных элемента, но еще есть и дополнительные. Нельзя загрузить одну часть страницы и оставить другую совсем пустой – распределяй элементы равномерно, бережно и точно. Большой заголовок и кнопку уравновесь картинкой с другой стороны, а мелкие навигационные и информационные пункты распредели по углам или относительно их.
Тут стоит придерживаться понятия силовых линий, когда на определенных линиях размещаются графические блоки. Линии эти могут быть горизонтальными, вертикальными и диагональными, все зависит от задумки и особенностей проекта.
Визуальный баланс – понятие относительное, его нельзя измерить, не всегда получится положиться на привычную симметрию или другие ориентиры. Здесь придется только тренировать насмотренность, пробовать, экспериментировать, брать пример с лучших специалистов.
Правило журнала
Вспоминай самые известные журналы, переноси хорошие решения в веб. Полиграфия существует в разы дольше, чем интернет, поэтому в ней уже много готовых вариантов. Но разница, конечно, есть – сайты гибкие, а не статичные, как страницы журнала. Это стоит учитывать, но основные композиции можно без труда брать из мира глянца. Представь, что ты раскрыл шикарную статью, рекламу или подборку – вот в таком направлении и делай сайт. Адаптируй решение под свою тематику, добавь кнопки и анимацию.
Цветовые комбинации
Не только расположение объектов важно, но и их цвет. Даже идеальную композицию можно испортить неправильным подбором цветовой схемы. Здесь тоже применяются принципы иерархии.
Определи основной цвет и дополнительные. Присвой им определенные роли и не отступай от них. Одно из самых простых и универсальных решений – 3-4 оттенка одного цвета, один контрастный и дополнительно белый или черный. Используй контрастный цвет для акцентов, выделяй им кнопки, навигацию, делай тонкие рамки. Подробно об этом смотри в статье «Почему готовые схемы не работают».
Ритм и повторение
Придумать классный первый экран сложная и ответственная задача, но эта работа нередко самая любимая у дизайнеров, потому что она творческая и каждый раз позволяет проявить себя. Кстати, посмотри обязательно онлайн-премьеру «Секреты первого экрана: делаем 5 версий».
А вот уже после первого экрана нужно создать и другие блоки и страницы в соответствующей концепции, но уже проще по структуре. Важно придерживаться единого стиля.
Если речь о большом количестве информации на одной странице, то нужно создать ритм. Сплошное полотно из элементов и текстов – это прошлый век. Самые прогрессивные сайты сегодня используют поочередную смену темного и светлого фонов, явное разграничение блоков. Посмотри на Tesla, Microsoft, Wrike, Jira, Asana.
Воздух
Свободное пространство, воздух между блоками и деталями – это иногда даже более важная часть дизайна, чем любые сложные элементы. Нельзя впихнуть максимум информации в ограниченное пространство и пожертвовать воздухом, потому что это уничтожит твой дизайн. Если нужно дать много важной информации, лучше поищи способ разделить ее и структурировать.
Обязательно изучи этот материал: «Сила ничего: важность пустого пространства в дизайне».
Изучай базу
Мы часто описываем смелые решения, ультрасовременные тренды, необычные подходы и оригинальные идеи. Но весь креатив и нестандартность подхода бессмысленны, если ты не знаешь основ. Никакого практического толка от дизайна не будет, когда пользователь просто не понимает, что происходит. Может он и поразится красотой и футуризмом твоего сайта, но коммерческого успеха не жди. Если у тебя полно идей, но еще нет достаточного уровня мастерства и практики – приходи на онлайн-коучинг «Веб-дизайнер: счастливый билет в Таиланд».
Здесь опытный куратор проведет тебя за руку сквозь все дебри основных понятий в веб-дизайне, покажет секреты и тонкости мастерства, поможет создать классное портфолио и скорректирует ошибки. Так твой путь к мастерству будет короче и легче, а результаты – круче. Записывайся прямо сейчас!
