Три легких способа сделать ваш дизайн лучше

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

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

____

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

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

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

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

 ____

Шаг 1

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

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

1

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

1.1

____

Шаг 2

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

1.2

1.3

____

Шаг 3

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

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

1.4

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

1.5 1.6

____

Шаг 4

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

1.7

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

1.8

____

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

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

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

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

____

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

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

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

5.2

____

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

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

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

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

5.3

____

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

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

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

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

3.1.3

____

Заключение

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

____

Макет выглядит неаккуратно и непривлекательно? Вернитесь к истокам и создайте сетку.

____

Что-то не так с цветом? Отдайте предпочтение контрастирующим и хорошо гармонирующим цветам.

____

Шрифт все портит? Откажитесь от оригинальных, экзотических шрифтов, замените их классическими, которые вас никогда не подведут.

 

Автор —        Перевод — Planet Design

3 комментария

  1. Здравствуйте!
    Скажите, пожалуйста, есть ли больше образцов применения первого правила?

  2. Исчерпывающе.

Add a comment

*