Композиция
Композиция задает расположение элементов в логическом порядке, при котором дизайн становится цельным и обретает внутренний смысл.
Гармония в соотношениях, красота и логика построения присуща не только творениям человека. Признаки композиции можно обнаружить в строении вселенной, животных организмов и растений или природных формах.
Работаем от задачи
Когда я сажусь за новый проект, бывает довольно трудно понять с чего же начать. Передо мной пустой белый лист и хотелось бы его заполнить чем-нибудь. Я как и вы видел тысячи сайтов с разными дизайнами, разным расположением элементов и нужно лишь перенести все это на новый макет.
Но именно в этом главная проблема. Перед началом работы в голове слишком много информации и вариантов, того как можно сделать. Поэтому просто не понятно как подступиться. Знакомая ситуация?
Но именно в этом главная проблема. Перед началом работы в голове слишком много информации и вариантов, того как можно сделать. Поэтому просто не понятно как подступиться. Знакомая ситуация?
Всегда начинайте с постановки задачи. Какой бы она ни была: рассказать историю, продать, получить заявку — важно правильно сформировать фокус внимания.
Определитесь с тем, какие элементы дизайна наиболее важны и на каких стоит сделать акцент.
Выделить важное на сайте можно при помощи нескольких приёмов: Цвет, Размер, Необычная форма, Пустое пространство вокруг.
То есть, чтобы выстроить композицию, в которой информация быстро и непринужденно считывается посетителем, самый важный заголовок должен быть написан самым крупным шрифтом, второстепенный — шрифтом поменьше, наборный текст — еще более мелким. Главная кнопка целевого действия — должна быть акцентной (например, цветной), кнопка второстепенного действия — прозрачной и т. д.
Определитесь с тем, какие элементы дизайна наиболее важны и на каких стоит сделать акцент.
Выделить важное на сайте можно при помощи нескольких приёмов: Цвет, Размер, Необычная форма, Пустое пространство вокруг.
То есть, чтобы выстроить композицию, в которой информация быстро и непринужденно считывается посетителем, самый важный заголовок должен быть написан самым крупным шрифтом, второстепенный — шрифтом поменьше, наборный текст — еще более мелким. Главная кнопка целевого действия — должна быть акцентной (например, цветной), кнопка второстепенного действия — прозрачной и т. д.
Баланс
Определить, как правильно сбалансировать макет очень сложно. Здесь нет четких правил. Это больше похоже на чувство!
У пользователя при посещении сайта не должно возникать ощущение, что вроде всё окей, но что-то не так. Хорошо выстроенная логическая компоновка элементов приятна для восприятия и не позволяет пользователю заскучать.
У пользователя при посещении сайта не должно возникать ощущение, что вроде всё окей, но что-то не так. Хорошо выстроенная логическая компоновка элементов приятна для восприятия и не позволяет пользователю заскучать.
Баланс на странице очень часто достигается за счет симметрии элементов — контент располагается симметрично по схеме лево-право, верх-низ.
Асимметричный баланс требует более тщательной проработки.
Асимметричный баланс требует более тщательной проработки.
Элементы всегда имеют разный визуальный вес, поэтому расположить их нужно с умом, так, чтобы они уравновешивали друг друга. Например: коллаж из фото справа может быть сбалансирован крупным заголовком слева. Или за блоком с явным перевесом влево, может следовать блок с перевесом вправо.
Но сбалансировано не значит однотипно, что бы посетитель не заскучал нужно постоянно взбадривать его внимание, например за счет контрастов.
Но сбалансировано не значит однотипно, что бы посетитель не заскучал нужно постоянно взбадривать его внимание, например за счет контрастов.
За счет привлечения взгляда к конкретному объекту мы как бы управляем поведением посетителя и ведем его в нужном нам направлении.
Сочетание элементов
При создании гармоничной композиции на сайте важно использовать сочетаемые элементы. Это как пазл: множество элементов, которые идеально подходят друг к другу, складываются в единую картинку, логичную и понятную.
Фотографии необходимо подбирать из одной фотосессии, либо с одинаковой обработкой. Это создаст целостную атмосферу на сайте.
Фотографии необходимо подбирать из одной фотосессии, либо с одинаковой обработкой. Это создаст целостную атмосферу на сайте.
Иконки должны сочетаться между собой, быть в одной палитре, одинакового размера, с одинаковой толщиной линий. Идеально, если они из одного набора, сочетаются визуально и по тематике. Если не получается подобрать иконки в одном наборе, то необходимо искать максимально подобную или вовсе отрисовать их под задачу.
Геометрические формы играют важную роль в создании единого стиля оформления сайта. Помимо того, что формы должны быть в одной стилистике, они также должны соответствовать нише, передавать правильные ассоциации.
Если сайт для серьезной компании нефтегазовой промышленности, то ни о каких плавных линиях речи быть не может, как и о скругленных фотографиях и прочих милых штучках))
Если сайт для серьезной компании нефтегазовой промышленности, то ни о каких плавных линиях речи быть не может, как и о скругленных фотографиях и прочих милых штучках))
Разношерстные и несочетающиеся между собой блоки и страницы также отпугивают, из-за чего пользователь теряет фокус, не сосредоточен, не настроен на то, чтобы прочитать информацию, которую вы даёте. Это нервирует пользователя, тратит его время, силы, снижает покупательскую способность.
Необходимо создать ритм, эффект повторения. Это могут быть контрастные блоки, которые сменяют друг друга, или повторяющаяся периодически структура блока. Если подряд идет много блоков с текстовой информацией, то целесообразно периодически разбавлять их сбивкой — блоком с изображением, или видео, или цитатой, который позволяет отвлечься от монотонности контента.
Необходимо создать ритм, эффект повторения. Это могут быть контрастные блоки, которые сменяют друг друга, или повторяющаяся периодически структура блока. Если подряд идет много блоков с текстовой информацией, то целесообразно периодически разбавлять их сбивкой — блоком с изображением, или видео, или цитатой, который позволяет отвлечься от монотонности контента.
Конечно круто создать мега-супер-классный концепт и впечатлить всех вокруг. При этом намеренно нарушить кучу базовых правил ради ВАУ-эффекта.
Но подумайте, какой результат вы хотите получить? Супер-дизайн это классно, но реальный заказчик к вам придет в 90% случаев не за этим. Ему нужен грамотный инструмент, который будет работать. При этом желательно, чтобы он все же был достаточно ВАУ :))) Но без фанатизма)
Но подумайте, какой результат вы хотите получить? Супер-дизайн это классно, но реальный заказчик к вам придет в 90% случаев не за этим. Ему нужен грамотный инструмент, который будет работать. При этом желательно, чтобы он все же был достаточно ВАУ :))) Но без фанатизма)
