UX Guide
Главная страница » Гармоничный дизайн — 3 правила

Гармоничный дизайн — 3 правила

Гармоничный дизайн — 3 правила

Краткое руководство, которое поможет вам улучшить ваши дизайн-макеты.

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

Правило 1. Всегда помни о сетке!

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

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

Рассмотрим подробнее процесс создания сетки и размещения элементов вашего макета.

Шаг 1

Вы можете создать сетку в любом графическом редакторе, например Quark, CorelDRAW, Illustrator или Photoshop. Для этого необходимо правильно разместить направляющие. В данном случае я демонстрирую это на примере InDesign, но в остальных редакторах это осуществляется похожим образом.

Во-первых, я создаю новый слой (Окно > Слои, затем выбираю Новый Слой… в панели инструментов), переименовываю это в Grid (Сетка). Благодаря этому, линии сетки представляют собой отдельный слой, который остается неизменным, пока вы работаете с остальными элементами макета.

Гармоничный дизайн — сетка

Если ваш графический редактор позволяет вам создавать Master Pages, активируйте Master и выведите на экран. Размещение направляющих линий на Master Page позволяет использовать созданную вами сетку на необходимом вам количестве страниц (т.е. на тех страницах, где вы применяете Master).

pic3

Шаг 2

Вы можете создать большое количество различных макетов, используя всего одну модель сетки. В случае стандартной портретной страницы, как, например, документ формата А3, размещенный ниже, вы можете разделить страницу на 4 колонки. Последовательность действий для InDesign следующая: Макет> Поля и Колонки> Увеличить число колонок до 4.

pic4

сетка

Шаг 3

Работая с Master page, или просто со слоем «Сетка» (в том случае, если вы работаете с документом в одну страницу), убедитесь, что линейки отображены на странице (в InDesign: Вид> Показать линейки).

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

pic6

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

pic7

pic8

Шаг 4

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

pic9

Пока вы придерживаетесь структуры таблицы, очень сложно сделать что-то, что будет выглядеть откровенно некрасиво. Поиграйте с балансом, старайтесь избегать двух «соревнующихся» по какому-то критерию элементов в макете (например, два изображения одного размера).

pic10

2. Помни о цветовых контрасте и сочетаемости.

Иногда цветовое оформление макета оправдано и выглядит уместно, а в некоторых случаях перебор с цветом может все испортить. Почему же так происходит?

Эмпирически доказано, что успех в использовании цвета определяется двумя составляющими. Это цветовой контраст и цветовая сочетаемость.

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

Цветовой контраст

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

Чтобы «поиграть» на контрасте, сочетайте бледные тона с темными, холодные с теплыми. Обратите внимание, что сочетание черного и белого часто имеет больший эффект, чем сочетание цветов хроматической гаммы. Почему? Потому что обеспечивает максимально возможный контраст.

Гармоничный дизайн — цветовой контраст

Цветовая сочетаемость

Если вы еще не приобрели цветовой круг, обязательно сделайте это!

Гармонирующие между собой цвета, то есть цвета, которые хорошо друг с другом сочетаются (часто расположенные в противоположных сторонах стандартного цветового круга), оказывают положительное воздействие на человека – «успокаивают» взгляд, создают приятные нам дизайны.
Используйте цветовой круг или книгу с цветовыми образцами в качестве источника идей и вдохновения для ваших проектов, или же попробуйте использовать ряд цветов, которые расположены рядом в цветовом спектре (например, сочетание зеленых и синих, желтых и оранжевых и т.д.)

pic12

pic13

3. Осторожнее с оригинальными шрифтами

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

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

Таким образом, если вы подозреваете, что ваш проект выглядит несколько «нелегально», отдайте предпочтение тем шрифтам, которые можно отнести к более-менее классическим. Ищете вдохновения? Попробуйте такие варианты как Futura (смотрите образец ниже), Gill Sans, Adobe Garamond Pro, или Baskerville. Все они присутствуют в списке шрифтов графических редакторов.

pic14

Заключение

Обратите внимание на эти три простые решения для ваших проектов, когда вас вновь посетит вдохновение на создание чего-то нового!

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

Оригинал статьи: design.tutsplus.com

Источник: i am designer