Краткое руководство, которое поможет вам улучшить ваш дизайн.
Нередко мы оказываемся в неприятной ситуации, когда нам кажется, что что-то не так с макетом – все или слишком бледно, или, наоборот, вычурно; то чего-то не хватает, то макет необходимо как-то разгрузить. Три решения, предложенные в этой статье, помогут привести ваш дизайн в порядок и сделать его лучше.
____
Правило 1. Всегда помни о сетке
Если макет способен скорее «усыпить», чем пробудить интерес, возможно, дело в том, что в нем отсутствует структура, или, на языке графического дизайна, сетка. Эту сетку можно заметить не сразу, но она волшебным образом делает ваш макет намного лучше.
Сетка обеспечивает визуальную сбалансированность и гармоничность макета. Работа без сетки может привести к чрезмерной или недостаточной концентрации объектов, а также к размытому фокусу. Все это не лучшим образом сказывается на общем впечатлении от дизайна макета.
Рассмотрим подробнее процесс создания сетки и размещения элементов дизайна.
____
Шаг 1
Вы можете создать сетку в любом графическом редакторе, например InDesign, Illustrator или Photoshop. Для этого необходимо правильно разместить направляющие. В данном случае я демонстрирую это в программе InDesign, но в остальных редакторах это осуществляется похожим способом.
Во-первых, создаю новый слой (Window > Layers, затем выбираю New Layer… в панели инструментов), переименовываю это в Grid (Сетка). Благодаря этому, линии сетки представляют собой отдельный слой, который остается неизменным, пока вы работаете с остальными элементами дизайна.
Если ваш графический редактор позволяет вам создавать Master Pages, активируйте Master и выведите на экран. Размещение направляющих линий на Master Page позволяет использовать созданную вами сетку на необходимом вам количестве страниц (т.е. на тех страницах, где вы применяете Master).
____
Шаг 2
Вы можете создать большое количество различных макетов, используя всего одну модель сетки. В случае стандартной портретной страницы, как, например, документ формата А3, размещенный ниже, вы можете разделить страницу на 4 колонки. Последовательность действий для InDesign следующая: Layout > Margins и Columns > Увеличить число колонок до 4.
____
Шаг 3
Работая с Master page, или просто со слоем «Сетка» (в том случае, если вы работаете с документом в одну страницу), убедитесь, что линейки отображены на странице (в InDesign: View > Show Rulers).
Кликните по линейке в верхней части экрана и перетаскивайте направляющую вниз по странице. Кликните и перетащите еще одну, чтобы в итоге получилась пара направляющих, размещенных рядом друг с другом.
Наведите курсор на пару полученных направляющих, выделите их, нажмите Copy и Paste. Продолжайте вставку направляющих на страницу, разместите их таким образом, чтобы страница состояла из квадратных секторов, как показано ниже.
____
Шаг 4
Примите наши поздравления! Модель сетки готова, и теперь вы можете вернуться к вашему дизайну и начать экспериментировать с размещением элементов на странице. Потренируйтесь разместить и структурироваться блоки текста и изображения в колонках таблицы.
Пока вы придерживаетесь структуры таблицы, очень сложно сделать что-то, что будет выглядеть откровенно некрасиво. Поиграйте с балансом, старайтесь избегать двух «соревнующихся» по какому-то критерию элементов в макете (например, два изображения одного размера).
____
2. Помни о цветовом контрасте и сочетаемости
Иногда цветовое оформление дизайна оправдано и выглядит уместно, а в некоторых случаях перебор с цветом может все испортить. Почему же так происходит?
Эмпирически доказано, что успех в использовании цвета определяется двумя составляющими. Это цветовой контраст и цветовая сочетаемость.
Это значит, что какую бы комбинацию вы не применяли (независимо от того, сколько цветов она в себя включает), в ней должны обязательно присутствовать тона, которые контрастируют друг с другом, с одной стороны, и дополняют друг друга, с другой.
____
Цветовой контраст
Два цвета, похожих либо с точки зрения тона, либо по яркости, могут визуально сливаться и создать непривлекательный дизайн, лишенный изюминки.
Чтобы «поиграть» на контрасте, сочетайте бледные тона с темными, холодные с теплыми. Обратите внимание, что сочетание черного и белого часто имеет больший эффект, чем сочетание цветов хроматической гаммы. Почему? Потому что обеспечивает максимально возможный контраст.
____
Цветовая сочетаемость
Если вы еще не приобрели цветовой круг, обязательно сделайте это!
Гармонирующие между собой цвета, то есть цвета, которые хорошо друг с другом сочетаются (часто расположенные в противоположных сторонах стандартного цветового круга), оказывают положительное воздействие на человека – «успокаивают» взгляд, создают приятные нам дизайны.
Используйте цветовой круг или книгу с цветовыми образцами в качестве источника идей и вдохновения для ваших проектов, или же попробуйте использовать ряд цветов, которые расположены рядом в цветовом спектре (например, сочетание зеленых и синих, желтых и оранжевых и т.д.)
____
3. Осторожнее с оригинальными шрифтами
Разнообразие шрифтов, доступных современному дизайнеру, беспрецедентно. Многие из шрифтов, представленных в сети, бесплатны для коммерческого использования. В теории это разнообразие и возможность выбора — всегда хорошие новости для дизайнера. С другой стороны, на практике это может привести и к целому ряду сложностей и проблем, как, например, когда мы пытаемся применить очередной шрифт с эффектом шероховатости и небрежными линиями, найденный нами на Behance.
Если вы не эксперт в области каллиграфии, оригинальный шрифт обязательно испортит ваш макет. Выбор же шрифта, который выглядит прилично в большинстве контекстов, гарантирует вам успех.
Таким образом, если вы подозреваете, что ваш проект выглядит несколько «нелегально», отдайте предпочтение тем шрифтам, которые можно отнести к более-менее классическим. Ищете вдохновения? Попробуйте такие варианты как Futura (смотрите образец ниже), Gill Sans, Adobe Garamond Pro, или Baskerville. Все они присутствуют в списке шрифтов графических редакторов.
____
Заключение
Обратите внимание на эти три простых решения для ваших проектов, когда вас вновь посетит вдохновение на создание чего-то нового!
____
Макет выглядит неаккуратно и непривлекательно? Вернитесь к истокам и создайте сетку.
____
Что-то не так с цветом? Отдайте предпочтение контрастирующим и хорошо гармонирующим цветам.
____
Шрифт все портит? Откажитесь от оригинальных, экзотических шрифтов, замените их классическими, которые вас никогда не подведут.
Здравствуйте!
Скажите, пожалуйста, есть ли больше образцов применения первого правила?
Исчерпывающе.