6 простых советов по созданию эффективной типографической иерархии


Оглавление (нажмите, чтобы открыть):

Иерархия в типографике

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

Визуальный язык

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

Гештальт

Для понимания иерархии я нахожу очень полезным возвращение к принципам гештальт-восприятия. Они помогут полностью понять эти отношения. Я нахожу эти принципы чрезвычайно полезным для понимания теории при обосновании дизайнерских решений. Кроме того, дизайнеры ведь не берут свой материал из воздуха, так? С точки зрения гештальт-теории это объясняется так: человеческий разум группирует маленькие части визуального паззла, чтобы преобразовать их в единое целое. Принципы гештальт-восприятия включают в себя:

  • Близость – то, насколько близки элементы друг к другу.
  • Сходство – схожие объекты группируются вместе.
  • Принцип замыкания – элементы группируются вместе, если они составляют целостную модель или форму.
  • Продолженние – все объекты имеют гармоничную, симметричную, правильную и плавную форму.

Подробнее о принципах гештальта можно почитать в статье Основы композиции сайтов

Акцент

Типографский акцент вступает в игру, когда требуется назначить приоритет одного элемента над другим. Акцент представляет такой тип обработки, который контрастирует с другим объектом, чтобы привлечь внимание к нему. Толщина символов, размер и цвет могут сделать все это, но наилучшим способом расстановки акцента является стиль. Заглавные или рукописные буквы при эффективном использовании помогут привлечь внимание пользователя. Степень внимания пользователя по отношению к конкретному элементу еще называют «визуальным весом». Усиливают «визуальный вес» жирный шрифт, яркие цвета, преувеличенные шрифты.
Иерархия является основополагающей концепцией, которая непосредственно влияет на то, какое впечатление веб-сайт оказывает на пользователя.

Примеры сайтов с хорошей типографической иерархией:

(Сайты, обладающие хорошей типографической иерархией, не должны быть преимущественно типовыми сайтами. Я просто привожу их в пример как наиболее очевидные)

6 простых способов создания эффективной типографической структуры

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

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

1. Ограничить набор шрифтов

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

2. Заполнение и контраст

Сочетание шрифтов serif и sans-serif – универсальный принцип дизайна. А все потому, что сложные, интересные и часто изящные шрифты serif хорошо сочетаются с простыми, чистыми шрифтами sans-serifs, создавая легкую структуру, не вызывающую напряженность. Используйте один для заголовков, а второй для основного текста. Будьте осторожны, если вы решитесь соединить два serif или два sans serif шрифта – шрифты из одной классификации обычно приводят к непонятному смешению заполнения и контраста. Не стоит слишком акцентировать контраст, потому что, выбор двух одинаково ярких шрифтов может привести к неожиданному (читай отрицательному) результату.

3. Задать общий тон

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

4. Стратегия размера

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

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

5. Контрастные цвета

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

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

6. Белое пространство

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

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

12 принципов визуальной иерархии

Чем отличается действительно классная композиция от «не очень»? Дьявол кроется в деталях. Команда Visme визуализировала и описала их — основные правила создания крутого контента.

1. Размер и масштаб

Размер, конечно, имеет значение — но важнее пропорции и соотношение.

2. Цвет и контраст

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

3. Иерархия типографики

Подумайте о газете. Заголовки и крутые статьи там сделаны больше. такой же принцип можно использовать для чего угодно. Есть важная информация — выделяйте её.

4. Дистанцирование

Пространство усиливает ваш месседж и создаёт движение.

5. Сближение

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

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

Негативное пространство не только облегчает чтение информации, группируя ее по отделам, но также создает фокус на отдельные объекты.

7. Построение

Выравнивание и построение — основной принцип структуры вашего дизайна. Если слова или элементы просто разбросаны по странице, то они чаще всего создают путаницу.

8. Правило нечётных чисел

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

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

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

10. Линии

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

11. Правило третей

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

12. Перспектива

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

Основы типографики

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

Хороший вкус, как и идеальная типографика, выше индивидуальности. Ян Чихольд

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

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

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

Классификация шрифтов

1. San-Serif

Шрифты без засечек, или «Гротеск»


2. Serif fonts

Шрифты с засечками, или «Антиква»

3. Декоративные (акцидентные) шрифты

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

4. Handwritting – рукописные шрифты

Слова здесь излишни. В принципе, характеристика подходит такая же, как и для декоративных шрифтов. Главное, не переусердствовать.

5. Моноширинные шрифты

Все шрифты, в которых длина букв по горизонтали одинаковая

6. Символьные шрифты

Представлены в виде иконок (Fontawesome, Stroke, icomoon)

Основные термины

Давайте с Вами разберём основные понятия, с которыми мы столкнемся при работе с типографикой.

1. Гарнитура – совокупность шрифтов, объединенных общими стилевыми признаками, отличными от других шрифтов.

2. Насыщенность – определяется изменением толщины основных и соединительных штрихов одноименных знаков.

3. Контрастность – отношение толщины соединительных штрихов к толщине основных штрихов знаков

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

5. Трекинг/Кернинг – более сложные понятия, однако именно они позволяют нам задавать тон и тональность подачи информации. Трекинг – равномерное расстояние между буквами, а кернинг – избирательное расстояние между буквами, что позволяет добавить разнообразия в одних и тех же надписях.

6. Интерлиньяж – вертикальный интервал между строками текста. Для прямого шрифта он измеряется от базовой линии одной строки текста до базовой строки, расположенной под ней. Не забывайте об этом пункте. Интерлиньяж можно и нужно изменять.

7. Комплектность шрифта – совокупность всех знаков, необходимых для набора текста ( строчные, прописные, цифры, знаки препинания, символы и спецзнаки)

8. Пропорции – показатель изменения ширины одноименных знаков в начертаниях одной гарнитуры.

Как выбрать шрифт?

Для начала Вы должны определить тему проекта (строгая, деловая, минималистичная, фантазийная, женская/мужская, аристократичная) и строго следовать этому «настроению» на протяжении всей работы. Не путайте и не забывайте настроение сайта, с которым Вы работаете.

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

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

Принципы типографики

Как подобрать шрифты, которые будут гармонично сочетаться друг с другом, не будут конфликтовать, а будут дополнять?

1. Классика хороша во все времена

Хороший и всегда работающий типографский прием – использовать в заголовке рубленый шрифт (Гротеск), а самого текста – шрифт с засечками (Антиква).

2. Каждому своя роль

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

3. Экспериментируйте

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

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

4. Простота и лаконичность – гарант успеха

Вместо того, чтобы нагромождать сайт различными шрифтами, пытаясь выделить каждый фрагмент, усмирите пыл и фантазию, и подумайте «А стоит ли оно того?». Не зря же рекомендуют использовать 1-2 шрифта, точнее гарнитуры. Попробуйте. И Вы увидите, что все гениальное – просто.

5. Какой цвет?

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

Управление шрифтами

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

Как правило, на рабочем компьютере дизайнера установлено множество всевозможных шрифтов, которые когда-то зацепили мастера, и он, чтобы не потерять их, внес их в свою коллекцию. Из-за этого разнообразия появляются 2 проблемы:
1. снижается скорость работы компьютера, а соответственно вся продуктивность
2. вы просто замучаетесь прокручивать все шрифты в меню Fonts для того, чтобы найти одну единственную нужную Вам в данный момент гарнитуру.

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

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

В настоящее время существует довольно много менеджеров шрифтов, как платных, так и бесплатных, так что Вы можете выбрать то,что Вас больше устроит. Я лишь назову некоторые из них для примера: Nexus Font (бесплатный), Suitcase Fusion и Suitcase (платный), Linotype FontExplorer X (бесплатный), FontFrenzy (бесплатный) и др.

10 правил композиции, без которых не обходится ни один дизайнер

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

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

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

1. Акцентируйте внимание на главном

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

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

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

Это дизайн Мэттью Метца для ритейлера «Nordstrom», поэтому самым важным элементом здесь является модель и ее одежда. Так, модель поместили в центр, а размещенный особым образом текст и отсутствие цветовой палитры помогают сфокусироваться на ее лице и одежде. И затем указатели привлекают внимание к информации, приведенной несколько ниже.

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

2. Направляйте взгляд читателя с помощью указателей

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

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

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

Давайте, к примеру, посмотрим на постер от Design By Day, где используются четкие указательные линии, которые сначала направляют вас к основному элементу (названию), а затем к разным сегментам текста.

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

Подобное можно наблюдать на постере 1 Trick Pony, где правая рука мужчины используется для «переадресации» взгляда от изображения к логотипу, и затем к нижней части изображения. Таким образом, формы изображения могут послужить указателями.

3. Масштаб и иерархия

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

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

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

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


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

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

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

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

4. Соблюдайте баланс между элементами

Баланс — это довольно важная вещь с точки зрения многих аспектов. И, разумеется, ваш дизайн не является исключением.

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

Во-первых, существует симметричный баланс. Суть его очевидна — баланс дизайна достигается за счет симметрии. Отражая определенные элементы по обеим сторонам (право-лево, верх-низ), вы добиваетесь абсолютной сбалансированности.

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

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

Вот пример удачного использования асимметричного баланса. В своем постере Munchy Potato целенаправленно распределил окружности разного размера по разным областям пространства, добившись таким образом асимметрии.

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

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

5. Используйте элементы, которые дополняют друг друга

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

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

Используйте снимки из одной фотосессии. Это невероятно легкий способ удостовериться, что изображения будут связными, учитывая, что они сделаны в одном стиле и принадлежат к одному направлению. Например, дизайнеры Jekyll & Hyde и Елена Бонаноми используют данный прием в одном из разворотов журнала Must.

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

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

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

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

6. Увеличьте (или уменьшите) контраст

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

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

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

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

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

7. Повторяйте элементы дизайна

Повторяйте за мной: «Повторение сопутствует успешной композиции».

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

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

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

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

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

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

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

8. Не забывайте о белом пространстве

Чтобы обидеть белое пространство, достаточно назвать его «пустым местом». Пустота предполагает, что она должна быть чем-то заполнена, и поэтому она не «выполняет свою работу» должным образом. Но это не одно и то же.

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

Например, взгляните на дизайн , выполненный Cocorrina. Белое пространство помогает достигнуть баланса между картинкой, текстурой и текстом, что придает дизайну изысканность и чистоту.

Итак, как же лучше использовать белое пространство?

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

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

В качестве примера можно привести дизайн веб-сайта от Creative Web Themes, где для презентации товара используется одно изображение, заголовок с полужирным начертанием, две небольшие линии текста и ссылка на дальнейшую информацию. Благодаря такому простому плану и большому количеству белого пространства каждый элемент имеет собственную территорию и может «дышать», что позволяет дизайну выглядеть опрятно и оказывать должный эффект на зрителя.

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

9. Выстраивайте элементы дизайна

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

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

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

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

Мастер Йода рекомендует:  7 бесплатных онлайн-редакторов кода для веб-разработчиков

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

10. Разделите дизайн на трети

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

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

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

Взгляните на дизайн Гаджана Ваматева для National Geographic и подумайте, как здесь применяется правило одной трети. Скорее всего, вы заметили, что линии (если бы они были) пересекались бы на точке фокусировки каждого из изображений: двух путешественниках на первой картинке, и большой птице — на второй. Линии бы также пересекались на текстовых рамках, привлекая внимание к тексту и предложению прочитать дальнейшую информацию.

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

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

Обращение к читателю

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

А у вас есть какие-нибудь хитрости для работы с композицией? Или, возможно, вы знаете примеры каких-нибудь дизайнов с высокоэффективной композицией? В любом случае, не стесняйтесь делиться своими мыслями и идеями по этому поводу в комментариях!

Создание эффективных публикаций

Классификация шрифтов по способам воспроизведения

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

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


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

Обычно при чтении люди не обращают внимания на шрифт, не замечают формы отдельных букв. Это значит, что шрифт спроектирован правильно: внимание не отвлекается от текста, а значит, информация воспринимается лучше. Для того чтобы читатель «не видел» шрифт, разработчику нужно серь­езно потрудиться: соблюсти стиль, пропорции, ритм, продумать детали. Од­ним из основателей систематического подхода к разработке шрифтов был Альбрехт Дюрер. Сохранились его записи, датированные 1525 годом: «Когда рисуешь в квадрате букву, сделай ширину ее толстой ножки равной одной десятой части стороны квадрата, тонкий же штрих буквы сделай равным тре­тей части толстого». Систематизация пропорций типографских литер и пра­вил их монтажа продолжалась два столетия. В середине XVIII века в Англии жил замечательный дизайнер шрифтов Джон Баскервиль. Он разрабатывал шрифты, учитывая особенности применявшихся в то время технологий, в том числе и свойства металлов, которые использовались для отливки литер. При­мерно в это же время в Италии работал Джамбаттиста Бодони, разработав­ший 265 латинских, греческих и восточных шрифтов. С появлением компью­теров начался новый виток развития шрифтового искусства.

Основные элементы шрифта обозначены на рис. 4.16.

Кегль — размер шрифта; определяется расстоянием между верхним и ниж­ним выносными элементами. Здесь же учитываются и заплечики — неболь­шой зазор над верхним и под нижним выносными элементами (понятие досталось нам «в наследство» от металлических литер).

Линия шрифта — базовая линия, по которой выравнивается нижний край основной части буквы (не считая свисающих элементов и нижнего вынос­ного элемента).

Штрихи, образующие формы букв, делятся на основные (обычно вертикаль­ные, более толстые) и соединительные (более тонкие). В буквах треугольной формы (А, У) основным штрихом считается идущий сверху слева вниз на­право (нисходящий штрих), а соединительным — идущий снизу слева вверх направо (восходящий штрих). Соотношение между толщинами основных и соединительных штрихов называется контрастностью шрифта.

Засечки — поперечные элементы на концах штрихов букв. Короткие горизон­тальные штрихи визуально соединяют буквы и выстраивают из них слова, облегчая процесс чтения текста. Шрифты с засечками получили наибольшее распространение, так как засечки помогают взгляду передвигаться вдоль строки, и буквы при этом не сливаются друг с другом. С течением времени начертание шрифтов менялось, в частности, изменялись формы засечек. В ста­рых антиквенных шрифтах сохраняется легкий эффект рукописного начерта­ния. Засечки чуть изогнуты и плавно утолщаются при переходе к основным штрихам, приближаясь по форме к треугольнику, ось овалов круглых букв слегка наклонена влево (рис. 4.17, а). В антиквах более позднего времени за­сечки становятся более прямыми, ось овалов вертикальна (рис. 4.17, б). Во многих современных антиквах засечки прямые (рис. 4.17, в).

Брусковые шрифты характеризуются прямоугольными и квадратными за­сечками, соединяющимися с основными штрихами под прямым углом или с легким закруглением. Толщина засечек, основных и соединительных штри­хов различаются незначительно (рис. 4.17, г).

Шрифты без засечек называют рублеными или гротесками. Толщина основ­ных и соединительных штрихов в них практически одинакова (рис. 4.17, д). Буквы без засечек легче читать в шрифтах очень большого и, в особенности, очень малого кегля.

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

Тот или иной стиль шрифта определяется единым принципом построения букв. Так, если буква О выполнена циркулем, то другим буквам округлых очертаний (В, Ю и др.) нельзя придавать овальную форму; или, например, буква Н имеет прямоугольную форму, значит, букву П нельзя вписывать в квадрат и т. д.

Конструкцию и стилевые особенности шрифта легко проследить по наибо­лее простым и ясным формам:

· по контурам цифр;

· по формам характерных букв (например. У, Л, М);

· по вопросительному знаку;

· по округлым частям букв Р и В, наплывам;

· по контрасту между основными и соединительными штрихами;

· по форме засечек и свисающего элемента букв Ц и Щ.

Лучше всего форма читается у шрифтов с прямым светлым начертанием (рис. 4.18).

В зависимости от соотношения горизонтальных размеров (ширин) различ­ных знаков, шрифты делятся на моноширинные (например, Courier) и про­порциональные, такие как Times (рис. 4.19).

В моноширинных шрифтах все знаки имеют одинаковую ширину. Как пра­вило, они применяются для набора таблиц, листингов программ и т. д.

Пропорциональные шрифты более читаемы, поэтому они значительно по­пулярнее. В пропорциональных шрифтах буквы делятся на узкие (I, J), нормальные (О, Н, В) и широкие (М, Щ, Ф, Ж). Лучше всего воспринима­ется шрифт, в котором высота и ширина нормальных букв соотносятся в пропорции золотого сечения.

Главное для шрифта — хорошее восприятие, а глаз человека несовершенен. В первой главе шла речь об устойчивых визуальных искажениях. Шрифт -это искусство оптической иллюзии. Когда говорят о точности графики шрифта, речь идет не о геометрической точности, а о визуальной. В частно­сти, графические иллюзии проявляются в начертаниях букв:

· горизонтальная средняя линия буквы Н, расположенная строго в гео­метрическом центре, кажется смещенной вниз;

· буква О кажется ниже Н;

· горизонтальные штрихи, равные по толщине вертикальным, выглядят тоньше.

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

Начертание.Для выделения части текста или как декоративный прием используют курсив­ные и наклонные начертания. Наклонные шрифты образуются путем измене­ния угла наклона знаков прямых начертаний, при этом буквы и цифры прак­тически не изменяют рисунка. Курсивные шрифты отличаются от наклонных тем, что знаки в них меняют очертания, приобретают вид «рукописных». От основного начертания курсивы отличаются рисунком, пропорциями, насы­щенностью (рис. 4.20). Обычно курсив используют для выделения в шрифтах типа антиква, а наклонное начертание — в шрифтах типа гротеск.

Еще один способ выделения текста — полужирное и жирное начертания. Впервые жирные шрифты были разработаны в начале XIX века. Они ис­пользовались для набора заголовков, объявлений, афиш. Позднее литеры жирного и полужирного начертаний разрабатывались как вариант обычного светлого шрифта для выделения части текста.

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

Шрифты одной гарнитуры имеют одну графическую основу и носят общее название, например, Arial, Arial Black, Arial Rounded MT Bold, Arial Narrow и т. д. В пределах одной гарнитуры шрифты могут отличаться не только на­сыщенностью и наклоном, но и пропорциями. В зависимости от начерта­ния, шрифт в гарнитуре может быть светлым, жирным, полужирным, пря­мым, наклонным, узким, широким и т. д. Если гарнитура имеет большое число начертаний, это позволяет легко подбирать нужные шрифты для раз­личных элементов публикации. Чем больше начертаний, тем легче добиться выразительности при составлении текстового документа без изменения гар­нитуры (рис. 4.21).

Характеристики наборного шрифта. Для описания структуры и размеров наборного шрифта существуют специ­альные термины.

Пункты. В пунктах измеряют высоту шрифта (кегль). Один пункт равен 1/72 дюйма (в технике англо-американский пункт принимается равным 0,353 мм).

Цицеро — единица измерения ширины печатных строк. В одном дюйме 6 ци­церо, а в одном цицеро — 12 пунктов.

Интерлиньяж — расстояние между базовыми линиями соседних строк. Из­меряется в пунктах и складывается из кегля шрифта и расстояний между строками. Интерлиньяж 10/12 (десять на двенадцать) означает, что при вы­соте шрифта в 10 пунктов расстояние между базовыми линиями соседних строк — 12 пунктов. Интерлиньяж может быть большим, плотным, сплош­ным. Сплошным называют интерлиньяж, при котором значения кегля и интерлиньяжа совпадают (рис. 4.22).

Апрош — межбуквенное расстояние. Изначально при наборе с помощью метал­лических литер межбуквенные расстояния определялись зазором между краем литеры и очком (самой буквой). Точнее говоря, это расстояние складывалось из двух полуапрошей, так как для составления слова литеры располагались вплотную друг к другу. Расстояния между буквами в большой степени опре­деляют восприятие шрифта. Каждый знак, в зависимости от его формы, должен иметь собственные фиксированные значения левого и правого ап­роша. Прекрасно прорисованные буквы могут не сложиться в хороший шрифт, если апроши выверены неточно. При жирном начертании или при узких буквах апроши должны быть меньше. Кроме того, величина апрошей зависит от кегля: чем крупнее шрифт — тем плотнее кажется текст при од­ном и том же значении апроша.

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

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

Классификация наборных шрифтов.Для оформления текстовых документов можно использовать несколько шрифтов. Профессионалы обычно берут набор из трех-четырех основных гарнитур (антиквы, брусковых, рубленых). Хорошо сочетающиеся гарниту­ры дизайнеры объединяют в собственные шрифтовые каталоги и использу­ют в дальнейшем при создании документов одной серии.

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

При всем разнообразии гарнитур, можно выделить следующие основные группы, в которых рисунки символов объединены общими графическими признаками (рис. 4.23):

· шрифты с засечками или антиква (serif);

· шрифты без засечек или гротески (sans serif);

· брусковые (square serif);

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

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

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

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

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

Объект типографики как носитель информации.Основная задача типографики — воспроизведение и тиражирование информации. Один из основателей Международного центра типографиче­ских искусств в Нью-Йорке Эмиль Рудер говорил: «Печатное произведение, которое нельзя прочесть, не имеет смысла». Но увлечение дизайном стра­ницы иногда приводит к тому, что прочитать текст очень трудно. Компью­терные технологии в полиграфии и мода на оригинальность породили ради­кальные направления в типографском искусстве. Зачастую шрифтовой документ создается не столько для чтения, сколько для рассматривания.

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

Выделим следующие виды печатных документов:

· информационные — справочники, буклеты, бюллетени, ведомости, от­четы, планы, прайс-листы;

· рекламные — приглашения, объявления, плакаты, листовки, проспекты, рекламные каталоги;

· идентификационные — визитные карточки, этикетки, фирменные кон­верты, папки;

· обучающие — руководства, пособия, инструкции, самоучители;

· документы деловой переписки — письма, бланки, опросные листы.

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

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

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

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

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

Отдельные виды документов различаются по структуре включаемой в них информации:

· рекламный листок содержит коротко изложенные убедительные факты, название фирмы и ее координаты;

· каталог выставки содержит перечень фирм-участниц, их адреса и теле­фоны, характеристики выставленных образцов, план размещения стен­дов, время работы;


· информационные бюллетени зачастую включают в себя схемы, диа­граммы, таблицы и т. д.

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

Создаваемый документ может быть связан с другими печатными материала­ми. Если это буклет для выставки, стоит подумать о продолжении реклам­ной кампании, а для того, чтобы фирма запомнилась, необходим повторяе­мый образ. Если это часть деловой документации — нужно выдержать общий фирменный стиль, отдельные виды документов (отчеты, бланки за­казов, письма) должны создаваться по единому шаблону.

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

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

Не нашли то, что искали? Воспользуйтесь поиском:

20 самых важных принципов дизайна в картинках

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

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

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

01. Линия

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

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

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

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

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

Линия — это многогранный, простой и эффективный графический элемент, который точно не стоит принимать как должное! Экспериментируйте с линиями, и вы увидите, насколько крутым они могут сделать ваш дизайн!

02. Масштаб

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

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

К примеру, посмотрите на этот постер Габза Грегорца Домарадски к фильму Drive. На этом постере главный герой изображен очень крупно: в первую очередь мы обращаем внимание на него, а уже потом замечаем все остальные лица.

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

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

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

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

03. Цвет

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

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

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

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

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

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

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

Что касается дизайна бренда, повторение выступает ключевым элементом: оно и обеспечивает согласованный образ бренда, и логически связывает все элементы воедино.

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

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

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

Хотите еще вдохновляющих примеров брендинга с использованием паттернов? Почитайте эту статью: 50 восхитительных геометрических паттернов в графическом дизайне!

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

Скажем прямо: негативное пространство — это “пространство между”, область внутри и вокруг элементов, у которой есть своя форма.

Общепризнанным королем и первопроходцем негативного пространства был художник Мауриц Эшер: я уверен, его работы уже встречались вам и ставили в тупик. Эшер создал множество работ-мозаик, в которых одна форма плавно перетекала в другую через негативное пространство, как на этой гравюре “Sky & Water I”.

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

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

06. Симметрия

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

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

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

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

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

Посмотрите на дизайн этого ежегодного отчета от Brighten the Corners и Аниша Капура — колонки текста симметричны относительно середины разворота.

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

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

Степень прозрачности элемента показывает, насколько мы можем видеть “сквозь него”. Чем выше прозрачность, тем легче и незаметнее выглядит элемент; чем ниже прозрачность — тем он массивнее.

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

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

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

08. Текстура

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

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

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

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

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

А теперь рассмотрим дизайн визитки от Inkdot для компании Foremost Wine. Дизайнер вывел использование текстуры на новый уровень — сама бумага для визитки сделана рельефной. Заранее продумывайте ощущения, которые будет вызывать ваш дизайн (не только в духовном, но и в материальном смысле) — и вы сможете создавать действительно выдающиеся работы.

09. Баланс

Баланс важен во всех сферах нашей жизни — и в дизайне, конечно, тоже.


Чтобы освоить баланс, нужно видеть “вес” каждого элемента: от текстовых блоков до картинок. Нужно учитывать цвета, размеры, формы элементов и на основании этого оценивать их “вес” относительно других деталей.

Есть хороший способ сделать это: представьте, что ваш дизайн напечатан на 3D принтере. Подумайте, что выделяется? Что перевешивает?

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

Одной из разновидностей баланса является “асимметричный баланс”, в котором верх/низ и право/лево не являются зеркальными отражениями друг друга. Скорее асимметричный баланс достигается “уравновешиванием” элементов за счет размера и выравнивания. Рассмотрим пример.

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

10. Иерархия

Иерархия в дизайне — это то же самое, что иерархия в обществе: идея одна и та же. Сверху иерархического списка располагаются самые важные вещи, “короли” . Их нужно “одеть” максимально роскошно, чтобы они привлекали больше внимания.

Мастер Йода рекомендует:  Когда и как загружать JQuery из CDN Google Javascript

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

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

Посмотрите на это приглашение от фирмы Southern Fried Paper. Заметьте, что дата (очень важная часть свадебного приглашения) выполнена крупным, жирным шрифтом, что делает ее более заметной, чем текст в нижней части. И все же дата не затмевает заголовка “Audrey and Grant”.

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

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

Конечно, иерархия — это больше, чем просто размер шрифта. У графики тоже есть своя иерархия: вспомните, мы говорили об этом в разделе “Масштаб”. Чем ярче и красочнее элемент, чем ближе к центру он расположен — тем выше его иерархия по отношению к более мелким, бледным или удаленным элементам.

11. Контраст

Часто бывает, что именно контраст выступает тем главным ингредиентом, благодаря которому дизайн “бросается в глаза” — а ведь именно этого (как бы грустно это ни звучало) хотят многие клиенты.

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

Наиболее распространенными формами контраста являются темный/светлый, толстый/тонкий, большой/маленький и т.п.

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

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

Представьте, что автор написал бы “New York” тем же цветом, что и “Bike Expo” — контраст был бы гораздо ниже и фразу было бы сложно разобрать.

Еще один отличный пример контрастного дизайна — работа Робби Кобба. В ней прослеживается контраст не только между светлым и темным, но и между толстым и тонким, в результате чего дизайн получается ярким и увлекательным.

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

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

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

12. Рамочки

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

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

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

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

13. Сетка

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

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

Давайте рассмотрим несколько примеров использования различных сеток.

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

Если хотите сделать сетку более гибкой, добавьте больше колонок, как в следующем примере.

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

Поэтому найдите сетку, которая подходит вам и вашему дизайну, и отталкивайтесь от нее.

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

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

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

14. Беспорядок

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

“Дизайнерский беспорядок” отличается от других форм беспорядка своей целью и исполнением. Основной целью дизайна должно быть сообщение. Что мы хотим сказать клиенту своей работой? Понятно ли мы это доносим? Можно ли усилить эффективность передачи информации?

К примеру, давайте рассмотрим дизайн, в котором шрифт выглядит беспорядочно, но у этого беспорядка есть цель. На постере Хита Киллена к фильму “The Killer Inside Me” мы видим нацарапанные от руки буквы, а в тех местах, где использован шрифт, расстояния между буквами “прыгают” в беспорядке.

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

В этом то и заключается основное различие между “беспорядком” и “дизайнерским беспорядком”. Если бы дизайнер использовал такой прием при создании постера детского фильма про веселых говорящих животных, то форма дизайна не соответствовала бы его содержанию. Но в случае с фильмом The Killer Inside Me (Убийца внутри меня) дизайн идеально дополняет картину.

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

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

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

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

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

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

15. Направление

Важным аспектом дизайна выступает “поток” внимания — то есть путь, по которому движется взгляд пользователя. В каком порядке мы изучаем содержимое? Как читателю понять, куда смотреть дальше? Логично ли направление, по которому следует взгляд?

Ученые исследовали природу движений человеческого взгляда и вывели несколько закономерностей. Взгляните на это исследование, проведенное Nielsen Norman Group: ученые фиксировали направление взгляда людей при просмотре веб-страниц, чтобы выявить паттерны “потребления” контента. Ниже вы видите результаты в форме тепловых карт.

Исследования доказали, что существуют стандартные паттерны движения взгляда (в форме букв “F” и “E”), поэтому больше всего внимания пользователь уделит тому, что расположено по левому или по верхнему краю. Еще один распространенный паттерн — форма буквы “Z”.

Общая идея в том, что глаз обычно стремительно и “рывками” движется из верхнего левого угла в правый нижний. Лучше всего эту теорию объясняет диаграмма Гутенберга: всю теорию мы можете прочитать здесь.

Не нужно каждый раз на 100% закладывать в дизайн все эти паттерны. Рассматривайте каждую работу в отдельности и подбирайте наиболее подходящий способ направить “поток” внимания. Просто учитывайте, что максимум внимания концентрируется в верхнем левом углу страницы, а при движении вниз оно плавно рассеивается.

Давайте рассмотрим пример того, как правильно и эффективно направлять внимание.

Этот дизайн от Atelier Martine&Jana очень мягко и органично направляет наше внимание за счет того, что текст размещен вдоль изгибов и плавных линий изображения. Сначала мы видим заголовок и дату (здесь использована небольшая иерархия), а потому начинаем скользить вниз, одновременно изучая и текстовую информацию, и изображение.

Короче говоря, поток внимания распределяется между текстом и фотографией.

16. Правила

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

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

Тем не менее, многие дизайнеры уверены: как только вы освоили эти правила — пора их нарушать.


Давайте рассмотрим пример, в котором правила нарушены намеренно. На этом постере дизайнер Шахир Заг нарушает несколько основных правил типографики ради шутки (кстати, очень правдивой).

Еще один пример нарушения правил, на который вы обязательно наткнетесь в процессе своих дизайнерских приключений, это Дэвид Карсон. Карсон оформлял публикации для журналов (таких как Ray Gun Magazine) в стиле авангард и гранж. Его дизайны были динамичными, шокирующими и полностью нарушали правила — и все же ими до сих пор восхищаются.

Есть одна замечательная история о Карсоне. Его попросили оформить интервью с музыкантом Брайаном Ферри. Изучив текст, дизайнер нашел его слишком скучным — и оформил интервью шрифтом Zapf Dingbats (символьный шрифт, наподобие Wingdings), что сделало статью совершенно нечитаемой. Смотрите картинку ниже:

У Карсона был принцип в отношении дизайна: “ не стоит считать разборчивость залогом эффективной коммуникации”.

Карсону и многим другим дизайнерам удается передавать суть идеи, полностью игнорируя правила. Постер Шахира Зага о головной боли (мы обсуждали его ранее) нарушает правила ради смеха, а работа Карсона — чтобы отразить суть интервью.

Получается, что коммуникация остается эффективной, несмотря на то, что разборчивость страдает.

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

17. Движение

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

До этого мы говорили о потоке и направлении внимания в дизайне — именно эти факторы играют важную роль при создании ощущения движения. Если ваша работа органично направляет поток внимания зрителя сверху вниз, слева направо, из точки А в точку Б — то дизайн будет “двигаться” плавно.

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

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

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

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

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

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

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

В этой работе Мэтта Чейза линии движения на слове “futute” создают ненавязчивое ощущение, что слово движется. Линии отлично подходят для создания такого мягкого и легкого ощущения движения.

18. Глубина

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

Так как же придать нашим дизайнам глубины? Существует множество тактик, давайте разберем несколько из них.

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

Давайте рассмотрим пример, который иллюстрирует эффективное использавние теней для создания глубины. На этом постере к книге дизайнер Доминик Шмитц использует множество разные теней: они выглядят достаточно сложно, зато очень реалистично. Взгляните: каждая тень исполнена по-разному и идеально подходит к “своему” элементу дизайна. Реализм требует больших усилий, но результат того стоит!

Еще одна техника — наложение некоторых элементов. За счет этого приема создается многослойный дизайн. Взгляните на этот дизайн от Фабиана Де Ланге — детали иллюстрации, графические элементы (белая граница) и шрифты наслаиваются друг на друга, создавая ощущение глубины.

Еще один способ — поиграть с перспективой: это обычно означает создание элементов с эффектом 3D. Правильно настроив перспективу, дизайнер может “приподнять” некоторые элементы над страницей, создавая ощущение глубины. Давайте рассмотрим пример.

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

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

Самый известный ценитель плоского дизайна — компания Apple. В сентябре 2013 года компания Apple запустила новую операционную систему, которая шла в комплекте с полностью обновленным дизайном: пропали тени и глубина, а им на смену пришли плоские иконки приложений, интерфейсы и т.п.

19. Типографика

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

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

Давайте рассмотрим пример “показной” типографики (display typography). Для тех, кто не знает, показной типографикой обычно называют более яркие, стилизованные типографические дизайны. Это и постеры к фильмам, и заголовки журналов и т.п.

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

Переходим к основному тексту. Дизайнеры постоянно спорят, какой шрифт читабельнее и разборчивее: с засечками или без.

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

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

Если хотите поподробнее разобраться с основами подбора шрифтов, обязательно почитайте эту статью: “20 типографических ошибок, которые допускает каждый новичок!”

Тем не менее, я все же еще раз обозначу несколько базовых мудростей:

  • Следите за кернингом в заголовках
  • Убедитесь, что основной текст не выглядит слишком большим/маленьким на том носителей, который вы используете
  • Постарайтесь не использовать слишком много шрифтов сразу
  • Если вы работаете с большим объемом текста, лучше выровнять его по левому краю
  • Если сомневаетесь в подборе шрифта, распечатайте дизайн (на листе странные шрифты будут заметнее, чем на экране)

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

В журнале 99U Magazine используется один и тот же набор шрифтов, но дизайнерам удается комбинировать их множеством различных способов. Эффективно и стильно! Смотрите:

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

20. Композиция

Композиция отлично подойдет, чтобы подытожить все вышеизложенные принципы.

“Композиция” — это общая организация элементов вашего дизайна. Знаю, объяснение звучит скучновато, но на практике это самый веселый раздел дизайна. Именно здесь можно поиграть, поэкспериментировать и добиться прекрасного внешнего вида.

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

Давайте возьмем несколько дизайнов и разберем их композиции. Во-первых, у нас есть рассылка от J.Crew. В этом дизайне акцент сделан на “30” — для выделения этого элемента использованы масштаб и глубина. Часть внимания также уделяется заголовку — это достигается за счет иерархии, размещения заголовка в центре страницы, увеличения размера шрифта и добавления рамки.

В этом простом дизайне использовано несколько техник. Посмотрите, как каждый элемент вносит свой вклад в создание сильного, привлекательного и эффективного дизайна.

Вот еще один случайный пример — на этот раз это постер от Lab B Design Office. В этом дизайне применяются похожие техники и те же принципы, но результат получился совсем другим. В этой работе используются масштаб и глубина: блоки текста разные по размеру, а расположение текста за фотографией создает глубину. Кроме того, очевидно использование иерархии и рамок: белый фон обрамляет текст, а текст служит “рамкой” для изображения.

Таким образом, при помощи различных комбинаций, техник и типов контента мы можем создавать бесконечное множество разных лейаутов.

Пусть это будет вашим “до ре ми”. Как только вы освоите ноты, сможете бесконечно комбинировать их, создавая самые разные мелодии.

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

  • Сбалансирован ли дизайн?
  • Логична ли иерархия в дизайне?
  • Скользит ли глаз по странице легко и логично?
  • Понятна ли аудитории основная идея дизайна?

Заключение

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

Относитесь к каждому “правилу” скептически и применяйте его только тогда, когда это уместно (а если неуместно — забейте на правила!). Дизайн — это постоянно развивающаяся и изменяющаяся область, и каждый случай по-своему сложен, уникален и интересен.

Но если вы новичок, держите в голове эти 20 принципов. Где бы вы ни были — замечайте постеры, меню, знаки и пытайтесь понять, какие принципы в них применяются. Развивайте в себе “взгляд дизайнера” и собирайте — в голове или на каком-то носителе — интересные случаи использования принципов дизайна (пригодится на черный день).

А вообще, получайте удовольствие. Играйте, экспериментируйте — но делайте это намеренно и осторожно. Удачи!

У вас есть свои техники и советы для начинающих? Или какие-то свои принципы? Если готовы раскрыть пару своих секретов, пишите в комментариях!

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

20 принципов дизайна, которые помогут вам сделать первые шаги в этой творческой среде

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


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

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

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

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

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

Уделяйте внимание линиям, чтобы создавать интригующие изображения.

Линия — это многогранный, простой и эффективный графический элемент, который точно не стоит принимать как должное! Экспериментируйте с линиями, и вы увидите, насколько крутым они могут сделать ваш дизайн!

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

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

К примеру, посмотрите на этот постер Габза Грегорца Домарадски к фильму Drive. На этом постере главный герой изображен очень крупно: в первую очередь мы обращаем внимание на него, а уже потом замечаем все остальные лица.

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

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

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

Хотите еще несколько полезных советов по масштабу? Почитайте статью «5 интересных способов использования масштаба в дизайне».

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

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

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

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

Хорошую практику в работе с цветом Вы можете получить из курса «57 практических уроков по Photoshop».

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

При эксперементе с цветом можно даже найти свой стиль по которому в будущем Вас будут узнавать!

Возьмите любой известный бренд — Coca-Cola, D&G, SUBWAY — и вы сможете представить их логотип, образ и цветовую схему. Почему же всё это моментально всплывает в памяти? Дело в повторении.

Что касается дизайна бренда, повторение выступает ключевым элементом: оно и обеспечивает согласованный образ бренда, и логически связывает все элементы воедино.

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

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

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

Хотите еще вдохновляющих примеров брендинга с использованием паттернов? Почитайте статью «50 восхитительных геометрических паттернов в графическом дизайне».

Скажем прямо: негативное пространство — это «пространство между», область внутри и вокруг элементов, у которой есть своя форма.

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

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

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

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

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

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

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

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

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

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

Посмотрите на дизайн этого ежегодного отчета от Brighten the Corners и Аниша Капура — колонки текста симметричны относительно середины разворота.

Если использовать в лейауте (это расположение элементов и блоков относительно друг друга в рамках страницы или интерфейса) немного симметрии, можно создать ощущение баланса и порядка. Так что в следующий раз, когда будете создавать дизайн какой нибудь публикации или работать с большими объемами текста, обратите внимание на симметрию: возможно ее слишком много (или слишком мало)? Если кажется, что с дизайном что-то не то, поэкспериментируйте с симметрией.

Степень прозрачности элемента показывает, насколько мы можем видеть «сквозь него». Чем выше прозрачность, тем легче и незаметнее выглядит элемент; чем ниже прозрачность — тем он массивнее.

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

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

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

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

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

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

Мастер Йода рекомендует:  Курс «Программирование с зависимыми типами на языке Idris»

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

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

А теперь рассмотрим дизайн визитки от Inkdot для компании Foremost Wine. Дизайнер вывел использование текстуры на новый уровень — сама бумага для визитки сделана рельефной. Заранее продумывайте ощущения, которые будет вызывать ваш дизайн (не только в духовном, но и в материальном смысле) — и вы сможете создавать действительно выдающиеся работы.

Баланс важен во всех сферах нашей жизни — и в дизайне, конечно, тоже.

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

Есть хороший способ сделать это: представьте, что ваш дизайн напечатан на 3D принтере. Подумайте, что выделяется? Что перевешивает?

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

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

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

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

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

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

Посмотрите на это приглашение от фирмы Southern Fried Paper. Заметьте, что дата (очень важная часть свадебного приглашения) выполнена крупным, жирным шрифтом, что делает ее более заметной, чем текст в нижней части. И все же дата не затмевает заголовка «Audrey and Grant».

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

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

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

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

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


Наиболее распространенными формами контраста являются темный/светлый, толстый/тонкий, большой/маленький и т.п.

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

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

Представьте, что автор написал бы «New York» тем же цветом, что и «Bike Expo» — контраст был бы гораздо ниже и фразу было бы сложно разобрать.

Еще один отличный пример контрастного дизайна — работа Робби Кобба. В ней прослеживается контраст не только между светлым и темным, но и между толстым и тонким, в результате чего дизайн получается ярким и увлекательным.

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

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

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

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

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

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

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

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

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

Давайте рассмотрим несколько примеров использования различных сеток.

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

Если хотите сделать сетку более гибкой, добавьте больше колонок, как в следующем примере.

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

Поэтому найдите сетку, которая подходит вам и вашему дизайну, и отталкивайтесь от нее.

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

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

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

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

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

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

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

В этом то и заключается основное различие между «беспорядком» и «дизайнерским беспорядком». Если бы дизайнер использовал такой прием при создании постера детского фильма про веселых говорящих животных, то форма дизайна не соответствовала бы его содержанию. Но в случае с фильмом The Killer Inside Me (Убийца внутри меня) дизайн идеально дополняет картину.

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

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

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

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

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

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

Важным аспектом дизайна выступает «поток» внимания — то есть путь, по которому движется взгляд пользователя. В каком порядке мы изучаем содержимое? Как читателю понять, куда смотреть дальше? Логично ли направление, по которому следует взгляд?

Ученые исследовали природу движений человеческого взгляда и вывели несколько закономерностей. Взгляните на это исследование, проведенное Nielsen Norman Group: ученые фиксировали направление взгляда людей при просмотре веб-страниц, чтобы выявить паттерны «потребления» контента. Ниже вы видите результаты в форме тепловых карт.

Исследования доказали, что существуют стандартные паттерны движения взгляда (в форме букв «F» и «E»), поэтому больше всего внимания пользователь уделит тому, что расположено по левому или по верхнему краю. Еще один распространенный паттерн — форма буквы «Z».

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

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

Давайте рассмотрим пример того, как правильно и эффективно направлять внимание.

Этот дизайн от Atelier Martine&Jana очень мягко и органично направляет наше внимание за счет того, что текст размещен вдоль изгибов и плавных линий изображения. Сначала мы видим заголовок и дату (здесь использована небольшая иерархия), а потому начинаем скользить вниз, одновременно изучая и текстовую информацию, и изображение.

Короче говоря, поток внимания распределяется между текстом и фотографией.

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

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

Тем не менее, многие дизайнеры уверены: как только вы освоили эти правила — пора их нарушать.

Давайте рассмотрим пример, в котором правила нарушены намеренно. На этом постере дизайнер Шахир Заг нарушает несколько основных правил типографики ради шутки (кстати, очень правдивой).

Еще один пример нарушения правил, на который вы обязательно наткнетесь в процессе своих дизайнерских приключений, это Дэвид Карсон. Карсон оформлял публикации для журналов (таких как Ray Gun Magazine) в стиле авангард и гранж. Его дизайны были динамичными, шокирующими и полностью нарушали правила — и все же ими до сих пор восхищаются.

Есть одна замечательная история о Карсоне. Его попросили оформить интервью с музыкантом Брайаном Ферри. Изучив текст, дизайнер нашел его слишком скучным — и оформил интервью шрифтом Zapf Dingbats (символьный шрифт, наподобие Wingdings), что сделало статью совершенно нечитаемой. Смотрите картинку ниже:

У Карсона был принцип в отношении дизайна:

«не стоит считать разборчивость залогом эффективной коммуникации».

Карсону и многим другим дизайнерам удается передавать суть идеи, полностью игнорируя правила. Постер Шахира Зага о головной боли нарушает правила ради смеха, а работа Карсона — чтобы отразить суть интервью.

Получается, что коммуникация остается эффективной, несмотря на то, что разборчивость страдает.

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

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

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

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

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

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

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

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

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

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

В этой работе Мэтта Чейза линии движения на слове «futute» создают ненавязчивое ощущение, что слово движется. Линии отлично подходят для создания такого мягкого и легкого ощущения движения.

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

Так как же придать нашим дизайнам глубины? Существует множество тактик, давайте разберем несколько из них.

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


Давайте рассмотрим пример, который иллюстрирует эффективное использавние теней для создания глубины. На этом постере к книге дизайнер Доминик Шмитц использует множество разных теней: они выглядят достаточно сложно, зато очень реалистично. Взгляните: каждая тень исполнена по-разному и идеально подходит к «своему» элементу дизайна. Реализм требует больших усилий, но результат того стоит!

Еще одна техника — наложение некоторых элементов. За счет этого приема создается многослойный дизайн. Взгляните на этот дизайн от Фабиана Де Ланге — детали иллюстрации, графические элементы (белая граница) и шрифты наслаиваются друг на друга, создавая ощущение глубины.

Еще один способ — поиграть с перспективой: это обычно означает создание элементов с эффектом 3D. Правильно настроив перспективу, дизайнер может «приподнять» некоторые элементы над страницей, создавая ощущение глубины. Давайте рассмотрим пример.

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

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

Самый известный ценитель плоского дизайна — компания Apple. В сентябре 2013 года компания Apple запустила новую операционную систему, которая шла в комплекте с полностью обновленным дизайном: пропали тени и глубина, а им на смену пришли плоские иконки приложений, интерфейсы и т.п.

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

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

Давайте рассмотрим пример «показной» типографики (display typography). Для тех, кто не знает, показной типографикой обычно называют более яркие, стилизованные типографические дизайны. Это и постеры к фильмам, и заголовки журналов и т.п.

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

Переходим к основному тексту. Дизайнеры постоянно спорят, какой шрифт читабельнее и разборчивее: с засечками или без.

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

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

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

Тем не менее, я все же еще раз обозначу несколько базовых мудростей:

• Следите за кернингом в заголовках
• Убедитесь, что основной текст не выглядит слишком большим/маленьким на том носителей, который вы используете
• Постарайтесь не использовать слишком много шрифтов сразу
• Если вы работаете с большим объемом текста, лучше выровнять его по левому краю
• Если сомневаетесь в подборе шрифта, распечатайте дизайн (на листе странные шрифты будут заметнее, чем на экране)

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

В журнале 99U Magazine используется один и тот же набор шрифтов, но дизайнерам удается комбинировать их множеством различных способов. Эффективно и стильно! Смотрите:

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

Композиция отлично подойдет, чтобы подытожить все вышеизложенные принципы.

Как я уже говорил, в композиции сходятся все предыдущие 19 элементов дизайна. Для создания эффективных и уместных лейаутов (это расположение элементов и блоков относительно друг друга в рамках страницы или интерфейса) можно использовать всё: размеры, повторения, типографику, линии, беспорядок и т.д.

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

В этом простом дизайне использовано несколько техник. Посмотрите, как каждый элемент вносит свой вклад в создание сильного, привлекательного и эффективного дизайна.

Вот еще один случайный пример — на этот раз это постер от Lab B Design Office. В этом дизайне применяются похожие техники и те же принципы, но результат получился совсем другим. В этой работе используются масштаб и глубина: блоки текста разные по размеру, а расположение текста за фотографией создает глубину. Кроме того, очевидно использование иерархии и рамок: белый фон обрамляет текст, а текст служит «рамкой» для изображения.

Таким образом, при помощи различных комбинаций, техник и типов контента мы можем создавать бесконечное множество разных лейаутов.

Пусть это будет вашим «до ре ми». Как только вы освоите ноты, сможете бесконечно комбинировать их, создавая самые разные мелодии.

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

• Сбалансирован ли дизайн?
• Логична ли иерархия в дизайне?
• Скользит ли глаз по странице легко и логично?
• Понятна ли аудитории основная идея дизайна?

Заключение
Дизайн — это сложный бизнес, полный принципов, фишек и техник: о некоторых вам расскажут, а какие-то придется изучать самим.
Относитесь к каждому «правилу» скептически и применяйте его только тогда, когда это уместно (а если неуместно — забейте на правила!). Дизайн — это постоянно развивающаяся и изменяющаяся область, и каждый случай по-своему сложен, уникален и интересен.
Но если вы новичок, держите в голове эти 20 принципов. Где бы вы ни были — замечайте постеры, меню, знаки и пытайтесь понять, какие принципы в них применяются. Развивайте в себе «взгляд дизайнера» и собирайте — в голове или на каком-то носителе — интересные случаи использования принципов дизайна (пригодится на черный день).
А вообще, получайте удовольствие. Играйте, экспериментируйте — но делайте это намеренно и осторожно. Удачи!

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

У вас есть свои техники и советы для начинающих? Или какие-то свои принципы? Если готовы раскрыть пару своих секретов, пишите в комментариях!

Остались вопросы? Есть пожелания? Выслушаем:

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

6 практических советов по созданию рекламы

Мы уже давно не задумываемся о том, нужна нам реклама или нет. Ответ очевиден. Зато все чаще задумываемся о том, как сделать рекламу максимально эффективной. Каждому из нас хорошо знакомы общеизвестные принципы рекламной деятельности. Книжные шаблоны рекламных кампаний, рекомендации многочисленных маркетологов, финансистов и даже психологов — со временем они превратились в настоящее клише, которое не так-то просто реализовать на практике. А может, стоит чаще вспоминать простые приёмы, не раз проверенные жизнью? Те рекламные истины, которые ни для кого не являются новостью, а скорее воспоминанием.

Совет 1. Не создавайте рекламу, похожую на другие.

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

Кроме того, создавая рекламу, повторяющую чей-то шаблон, вы рискуете вызвать у клиента ассоциации со своими конкурентами, то есть в этом случае ваши деньги будут работать против вас. Художник-сюрреалист Сальвадор Дали ещё в 1961 году нарисовал для испанской компании, принадлежавшей семье Бернат, логотип леденца на палочке.

Леденцу дали название «Chupa Chups». Тогда Дали был признан мастером эпатажа. В то время никто не мог предположить, что в 2001 году в России появится леденец с вызывающим названием «Лизун-Сосун», чье оформление в точности будет повторять дизайн «Chupa Chups».

Владельцы кондитерской фабрики-производителя, судя по всему, надеялись раскрутить свой продукт благодаря уже более чем узнаваемой к этому времени упаковке и даже провели довольно масштабную рекламную кампанию. К сожалению, они получили противоположный эффект: продажи «Chupa Chups» возросли, а «Лизун-Сосун» так и не приобрел всенародной любви.

Совет 2. Исключите любые стереотипные фразы и обещания в рекламе.

«Быстро, качественно, недорого!», «Экономьте свое время и деньги вместе с нами!» — эти приевшиеся фразы уже давно перестали производить нужный эффект. Прокомментируйте свое предложение более детально. Вместо «быстро» скажите: «выполним все работы за 2 дня», вместо «качественно» укажите: «комплектующие из Германии».

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

Совет 3. Больше конкретной информации.

Психологи утверждают, что подсознательное доверие у человека вызывают точные цифры. Чем более конкретное число вы указываете в рекламе, тем большую степень доверия оно вызывает. Этот подход активно используют в своей рекламной практике банки, указывая 12,85% годовой прибыли вместо 12%. Столь точное объявление в подавляющем большинстве случаев покажется клиенту внушительным и надежным.

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

Совет 4. Внимательно относитесь к «картинке» рекламы.

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

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

Совет 5. Не «заигрывайтесь» с эротическим подтекстом.

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

В остальных случаях, за редким исключением, привлекательная девушка и её сексуальный образ будут оттягивать все внимание клиента с вашего продукта на себя. Так и получается, что иногда мы помним лишь красивую картинку, но совершенно не можем «привязать» к ней какой-либо товар.

Совет 6. Не забывайте о покупателе.

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

4 простых совета для создания эффективного UX дизайна

UX (User Experience, взаимодействие с пользователем) дизайн это не просто создание эстетического дизайна вебсайта или чистота его юзабилити – он выходит за рамки этих понятий. Он показывает, как работает вебсайт, как ощущается и движется, а также то, что чувствует пользователь, когда использует его. Если конкретнее, то он интерпретирует поисковые запросы пользователей и превращает их в дизайнерские решения.
Так как же создавать такие решения? Начните с этих четырех простых советов по созданию потрясающих UX дизайнов, и это станет началом пути к формированию положительной взаимодействия с пользователями и дальнейшей оптимизации этого взаимодействия с ними.

1. Понимание для кого создается дизайн

Постарайтесь как можно лучше понять, для кого вы создаете дизайн. Какая Ваша целевая аудитория? Как они (посетители сайта) ведут себя? Как они думают? Большинство UX дизайнеров проводят много времени в сети, и они легко распознают хорошее (или плохое) взаимодействие с пользователями, когда видят его.
А теперь посмотрите на свой продукт так, как если бы вы его использовали, поставьте себя на место потребителя. Прочувствуйте опыт и точки неудобства. Если у вас есть такая возможность, поговорите с как можно большим количеством существующих или потенциальных пользователей. Их опрос сможет дать вам более глубокое понимание их потребностей и проблем.

2. Адаптация дизайна для всех размеров экрана и любых устройств доступа

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

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

4. Делайте приоритет на пользователя

Звучит очевидно, но это достойно повторения. UX дизайн ориентирован в первую очередь на удобство для пользователей. Ключ к эффективному UX дизайну – любовь к своим пользователям, выявление их нужд и задач, понимание, чем вы можете помочь в достижении поставленных целей. Исследования необходимы, наиболее ценные идеи о потребностях и нуждах ваших пользователей могут прийти только через изучение пользовательского опыта и общение с потребителями о вашем продукте. Использовать можно такие методы исследований как: опросы, фокус группы, А/В тестирования, тестирование юзабилити и этнографические полевые исследования.

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

Статья доступна для ознакомления в следующих рубриках: О микростоках
Если Вам понравилась моя статья, то Вы можете получать новые материалы по RSS или подписаться для получения обновлений блога на e-mail :

Добавить комментарий