Принципы дизайна

Дизайн — это запутанный, сложный и увлекательный бизнес.

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

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

01. Линия

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

Линии также могут передавать определенные идеи. Прямые создают порядок и опрятность, волнистые — движение, а зигзагообразные могут означать напряжение или волнение.

Методика много применяется в фотографии с использованием «направляющих линий», которые оправдывают свое название — они ведут взгляд. Нахождение и подчеркивание основных направляющих линий в вашей работе, может позволить вам направить взгляд через всю работу, или к определенным ключевым точкам.

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

PRA Website Design

Использование линий — это хороший способ стилизовать ваши иллюстрации. Посмотрите на эти схематичные иллюстрации от Ксении Ставровой для бренда оборудования SNDCT. С помощью простых белых линий на всех иллюстрациях, у дизайна появляется ярко выраженный и узнаваемый стиль. Использование линий в иллюстрациях может создать интересный эффект.

Постеры для SNDCT от Ксении Ставровой

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

02. Масштабирование

Масштабирование это большая часть дизайна. По очень базовому определению масштаб — это намеренное изменение размеров определенных элементов.

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

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

Например, посмотрите на этот плакат к фильму «Драйв». Здесь главный герой сильно увеличен, что привлекает внимание сначала к нему, а уже потом к другим лицам.

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

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

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

Labour Market Intelligence от The Consult

Хотите еще советов и приемов для освоения масштаба в своих проектах? Посмотрите эти 5 творческих способов использования масштаба в своих проектах.

03. Цвет

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

Давайте посмотрим на два примера брендинга. В первом примере, дизайн от Smack Bang Designs для сервиса для женщин по омоложению кожи Lite Luxe. У этого дизайна светлые, мягкие, пастельные цвета. Белые, светло-серые, мягкие розовые и медно-золотые цвета мягко дополняют друг-друга, создавая спокойный, элегантный и женственный дизайн.

Lite-luxe от Smack Bang Designs

С другой стороны у нас брендинг для бренда соков Frooti от Sagmeister & Walsh. В отличие от предыдущего примера, которые выбрали палитру, которая мягко дополняет себя, в этом брендинге были выбраны контрастные цвета, которые сделали дизайн энергичным и игривым.

Frooti Rebrand от Sagmeister & Walsh

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

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

04. Повторение

Подумайте о крупных брендах: Coca-Cola, Google, Apple, Nike. Уверен, вы сразу же вспомните их логотипы, стиль и основные цвета, которые они используют. Почему эти вещи моментально приходят в голову? Да, вы угадали — повторение.

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

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

Повторение — это ключевой элемент, когда дело касается брендинга, но это также может подойти и для единичного дизайна. Например, повторение важно когда речь идет о создании паттернов и текстур.

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

Хотите еще немного вдохновения и красивых узоров из брендинга? Тогда обязательно посмотрите эту статью.

Xoclad от Anagrama

05. Негативное пространство

Грубо говоря, негативное пространство — это то, что находится вокруг или между элементами, которые формируют свою собственную форму.

По праву королем и первопроходцем негативного пространства считается М.К Эшер, чьи работы, я уверен, вы видели раньше. Эшер создал ряд мозаик, которые сфокусированы на переходе одной формы в другую через негативное пространство, как эта гравюра «Sky& Water I».

Sky& Water I от М.К Эшера

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

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

Графические изображения животных от Джорджа Бохуа

06. Симметрия

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

Симметрия много используется в логотипах, для создания гармоничного и пропорционального дизайна. У некоторых крупных брендов, таких как Target, McDonald’s, Chanel, Starbucks и т.д симметричные логотипы.

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

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

Свадебное пришлашение от Нейта Койлера

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

Посмотрите на этот ежегодный отчет от Brighten the Corners и Аниш Капур, который привлекает внимание к симметричности текстовых столбцов, отражая их по обе стороны страницы.

Ежегодный отчет Zumtobel от Brighten the Corners и Аниш Капур

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

07. Прозрачность

Прозрачность — это то, как виден элемент, при наложении на другой. Чем ниже прозрачность, тем светлее и менее заметен ваш элемент, и чем прозрачность выше, тем элемент ярче.

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

DME Promotional poster 2008 от Джека Кроссинга

Прозрачность — это также хороший вариант для создания ощущения движения статических изображений. Например, посмотрите на этот плакат от Филиппо Бараккани, Микко Кертнера и Лоренца Поттаста, где различные слои изображения с разными уровнями прозрачности создают удивительный эффект и ощущение движения.

Прозрачность не ограничивается только веб-дизайном. Посмотрите, как пригласительные в Нью-Йоркский Музей стекла, выглядят на прозрачном стекле, обладая удивительным дизайном и интересным эффектом. Подумайте, каким образом будет напечатан ваш дизайн, и какую прозрачностью он может обладать, и не бойтесь подойти к вопросу творчески.

08. Текстура

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

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

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

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

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

Ever Upward от Дена Кассаро

Посмотрите на визитки, разработанные Inkdot для Foremost Wine Company, которые выносят текстуру на совершенно иной уровень с помощью тиснения непосредственно на визитную карточку. Учитывая, как текстура и ваш дизайн воспринимаются, вы можете создать запоминающийся дизайн, который точно выделится из толпы.

Визитки Foremost Wine Co

09. Баланс

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

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

Хороший метод — представить, что ваш дизайн напечатают как 3D модель. Будет ли она стоять, или же завалится на одну сторону?

Посмотрите на логотип кошки от Джорджа Бокуа, который отлично сбалансирован.

Один из типов баланса — это асимметричный баланс, который скорее не про зеркальное отражение элементов, а больше про распределение, изменение размера и выравнивание элементов относительно их «веса». Давайте посмотрим на пример.

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

What’s your graphic design personality?

10. Иерархия

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

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

A2 Magazine

На следующем уровне иерархии у нас «дворяне», те элементы, которые тоже важны, но требуют чуть меньше внимания, чем «короли». К ним относятся подзаголовки, цитаты, дополнительная информация. Убедитесь в том, что они заметны и выделяются, но не такие броские, как ваши заголовки.

Посмотрите на это свадебное приглашение от Southern Fried Paper. Обратите внимание, как дата (очень важная часть приглашения) сделана больше, смелее и заметнее, чем текст ниже. Но при этом дата не затмевает имен «Одри и Грант».

Одри и Грант от Southern Fried Paper

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

Взгляните на этот плакат для The Night Market от Мэри Гэллоуэй. Вы легко сможете определить где заголовок, подзаголовок, дата, и информация, которая важна меньше.

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