Поделиться , , Google+, Pinterest,

Опубликовано в:

Три способа сделать дизайн гармоничным

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

Три способа сделать дизайн гармоничным

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

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

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

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

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

Шаг 1

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

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

pic2

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

pic3

Шаг 2

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

pic4

pic5

Шаг 3

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

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

pic6

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

pic7

pic8

Шаг 4

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

pic9

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

pic10

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

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

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

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

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

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

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

pic11

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

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

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

pic12

pic13

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

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

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

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

pic14

Заключение

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

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

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

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

comments powered by HyperComments