kinsly studio разработка дизайна
38 терминов из дизайна —
которые Вы должны знать перед разработкой бренда.
Вступление

Когда я только начинал заниматься маркетингом, я и не предполагал, что придется стать еще и дизайнером.

Однако в 21 веке маркетологу приходится понять простую истину — тексты должны быть не только полезными, умными,

написанными «для людей» — но и визуально привлекательными!

Зачем это нужно?

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

2. Тексты с картинками в 40 раз чаще лайкают и шерят в социальных сетях. Больше шеров, постов и лайков = рост внимания к бренду. Растёт популярность бренда — увеличиваются продажи.

3. Человек прочитывает на веб-странице в среднем 20% текста. 80% внимания получают картинки и инфографики.

4. Человеческий мозг воспринимает картинки в 600 000 раз быстрее текста.

 

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

1. Золотое сечение
Не только дизайн, но и математика. Золотое сечение многие художники считают мифом, но все значимые бренды используют его в создании логотипов, рекламы, сайтов и всегда учитывают в брендбуках. Apple, Toyota, Twitter, Asos, Google — тысячи их!

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

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

Размер фрагмента рисунка b относится к размеру фрагмента a так, как фрагмент a относится
к размеру целого рисунка ab. То есть: a/b = ab/a = 1,618 — и это число выражает соотношение объектов, которое считается идеальным. Его называют φ (фи).
Более развернуто этот закон изображается в виде красивой спирали:

Как пользоваться: вместо 1 подставляем длину нашего макета/логотипа/сайта.
Например: стандартная длина А4 =297 мм.
1/φ = 297/1,618=183,6 мм;
1/ φ2 = 113,4 мм; и так далее вплоть до самого маленького размера.
Таким образом мы создаем сетку для гармоничного макета страницы А4 фирменного каталога или буклета.

В центре спирали и на пересечении линий желательно изображать значимые элементы.
К примеру, в веб-дизайне — это кнопки действия, логотипы и важные изображения.
2. Правило третей
Правило третей – это упрощенное «золотое сечение для чайников».
Изображение делится тремя прямыми линиями на 9 равных частей. Согласно правилу третей, важные элементы дизайна
должны располагаться либо на прямых, либо на точках их пересечения.
Также стоит учесть, что точки пересечения в левой стороне листа воспринимаются лучше точек в правой стороне.
41% людей концентрируются на точке пересечения слева наверху листа.
3. Растр и вектор
При печати каталогов, буклетов, брошюр и других POS-материалов, типографии часто просят «предоставить логотип в векторе»
и сердятся на фразу: «у меня логотип в фотошопе».

Растровые изображения (jpg, png) состоят из множества отдельных точек — пикселей. Количество этих точек на единицу
измерения длины составляет «разрешение рисунка». У дисплея разрешение обычно 96 либо 72 dpi («dpi» означает «точки на дюйм»),

у качественной фотографии 300 dpi. Растровые изображения невозможно увеличить без потери качества,
но они передают множество естественных оттенков.
Векторные изображения (ai, eps, cdr, tif) состоят из опорных точек и кривых, которые их соединяют.
Логотипы, иконки, рисунки-иллюстрации создаются в векторной графике. Такие изображения отлично масштабируются без потери качества, поскольку не содержат пикселей, а описываются математическими формулами.
4. Типографика
Типографика — это визуальное оформление текста. 95% веб-дизайна занимает именно типографика. Поэтому если Вам нужен эстетичный и читабельный веб-сайт, следует ознакомиться с ее основными правилами и понятиями.
Существует множество шрифтов и гарнитур. Гарнитуры — это несколько шрифтов в едином стиле, но отличающихся стилем написания.

Но все их можно объединить в два крупных семейства: шрифты с засечками и без засечек.
5. Serif — шрифты с засечками
Самый простой пример Times New Roman. Serif — это шрифты с завитушками, украшениями и штрихами на буквах.
Идеальный для заголовков, заметный и красивый — и при этом самый старинный! Древний Рим, средневековые гравюры —
это всё о семействе Serif.
Некоторые компании используют на сайтах гарнитуры с засечками не только для заголовков, но и для вёрстки публикаций —
это подчеркивает аристократичность и классические традиции.
6. Sans serif — шрифты без засечек
Гарнитуры без украшений и штрихов на буквах. Чистый и лаконичный стиль, родом, как ни странно, из викторианской Англии.
Легко читается и потому очень популярен, подчеркивает современность и высокотехнологичность компании.
Android, Apple, Facebook, Google, Twitter – легче сказать, кто их НЕ использует!
7. Рукописные шрифты
Имитация каллиграфического письма от руки придает индивидуальность, прекрасно подходит для постов в соцсетях
и для дизайнерского оформления тёплых ламповых крафтовых брендов, как с ноткой хипстерства, так и ностальгии.
8. Иерархия
Всем удобнее читать материал, разбитый на абзацы, блоки и списки, чем огромную «простыню».
Поэтому умение составлять иерархию текста — must-have для маркетолога, дизайнера и веб-дизайнера.

Суть типографической иерархии в том, что элементы текста оформляются по-разному в зависимости от их важности, значимости. Ключевые мысли акцентируются типом гарнитуры, кеглем, начертанием (жирный, курсив, подчеркивание).
Правило такое — основную мысль, заголовок, уникальное торговое предложение оформляют максимально заметно, ярко.
Подзаголовки, преимущества, аргументы - чуть спокойнее.
9. «Рыба» и Lorem ipsum dolor
Чтобы клиент мог оценить дизайн, при разработке макета сайта, листовки, фирменного бланка, этикетки, календаря на этапе работ
ДО написания контента, дизайнеры берут на вооружение «рыбу». Рыба – бессмысленный текст, который содержит все буквы алфавита
и даёт полное представление, как будет выглядеть страница.

Исторически сложилось так, что им стала измененная цитата из труда римского оратора и философа Цицерона «О пределах добра и зла».

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.
10. Цвета
Яркие, сочные, удачно подобранные цвета приятны глазу. (с) Капитан Очевидность.
Но дисплей, бумага и ткань отображают их абсолютно по-разному. Поэтому в дизайне применяется несколько моделей,
которые полезно знать каждому маркетологу. Цветовая модель — это способ описания цвета с помощью цифр.
11. Цветовые модели
Вы печатаете корпоративный журнал, каталог, создаете брендбук? Фирменные цвета должны быть обязательно заданы в CMYK
для адекватного отображения при печати.
Сотни тонов и оттенков в буклете либо на фотобумаге получаются при смешении всего 4 красок:
С — циан, М — маджента, Y — yellow, К — blacK.
Как в детстве: если взять кисточку и краски, водить по бумаге и смешивать тона — мы получим множество оттенков.
Все эти цвета в макете задаются цифровыми значениями и важны для точной цветопередачи в полиграфии.
12. RGB
Поскольку дисплеи излучают свечение, в веб-дизайне используется модель RGB.
Если CMYK — это смешение красок на белой бумаге, то RGB — смешение лучей света трёх разных цветов:
R — Red, G — Green, B — Blue. Обозначаются цифрами от 0 до 255, где 255 — самый насыщенный.
Если все три луча одинаково интенсивны, получается белый цвет. Если три луча отсутствуют, получается чёрный. Всего с помощью палитры RGB можно создать 16,7 миллионов оттенков!
Но для печати на бумаге это не работает: если мы в макете для полиграфии зададим параметры RGB, изображение получится «пересвеченным» и неярким.
13. Pantone
Хотя модель CMYK и удобна для полноцветной печати, но:
1. Есть цвета, которые невозможно создать в графическом редакторе. К примеру, золотой и серебряный.
2. У полиграфий отличается оборудование, материалы, расходники и т.д. Что делать, если Вы находитесь в Украине,
а полиграфия в Китае — как контролировать цветопередачу?

Для этого предназначена стандартизированная система Пантон (Pantone Matching System), с которой работают типографии от Индии
до Аляски. Вы сверяете каталоги с производителем, называете номер и можете быть уверены, что напечатают именно то, что нужно. Каталогов Пантон есть множество: для немелованной и мелованной бумаги, шелка, винила, ткани — поэтому выбирайте тщательно!
14. NEX
Эта модель используется в Html и CSS для корректного отображения цветов RGB во всех браузерах.
Существует палитра «безопасных цветов», которые не будут искажены при просмотре в Opera, Chrome и на мобильных устройствах.
Они обозначаются в формате #RRGGBB, где значения записывают в 16-ричной системе, и вместо 255 оперируют значением FF.
15. Теплые и холодные цвета
Если упростить, то к теплым можно отнести красный, жёлтый, оранжевый и их комбинации, вызывающие радостные, позитивные, «летние» бодрые эмоции. К холодным относятся «зимние» синий, голубой, фиолетовый, обладающие успокаивающим эффектом.
Зеленый относится к серединным цветам и может в зависимости от подтона быть как теплым, так и холодным.
16. Тон
Тон — это основная характеристика цвета. Красный, зеленый, синий, желтый — это все тона.
17. Оттенок
Если добавить белый к любому тону — мы получим оттенок. Он визуально выглядит легче, прозрачнее, светлее тона и воспринимается менее значимым. Поэтому выделять ключевые моменты (кнопки действия, онлайн-формы) нужно с помощью основных цветов:
это поможет акцентировать внимание клиента.
18. Теория цвета

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

 

Основные понятия:

– Цветовые круги (инструмент для подбора цветовой гаммы Вашего дизайна),

– Гармония (визуально приятное равновесие цветовых групп),

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

19. Аналоги
Три любых цвета, которые находятся рядом на цветовом круге, называются «аналоги» или «аналоговая триада».
Такие сочетания часто встречаются в природе, на них очень комфортно смотреть, они приятны, гармоничны, к ним любят обращаться бренды. Например, MasterCard.
20. Комплементарность
Дополняющие или комплементарные — это контрастные цвета, которые находятся на противоположных концах цветового круга.
Они подчеркивают яркость друг друга и кажутся очень заметными.
Pepsi Cola, FedEx, Mozilla FireFox, Ikea, Visa используют такое сочетание в брендинге.

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

22. Палитра фирменных цветов
Палитра бренда включает тона, которые будут презентовать бренд следующие 10, 20, 30 или даже 100 лет. К их выбору и гармоничному сочетанию нужно подходить ответственно. Это могут быть как цвета одной гаммы, подобранные по принципу аналога, так и триады
или комплементарности.
23. Градиент
Градиент — плавное изменение от одного оттенка к другому. Есть линейные, радиальные, ромбовидные, конусные и отраженные градиенты, но наиболее популярны линейные и радиальные. С помощью градиента создаются мягкие переходы, иллюзии объема
и красивые эффекты.
24. Прозрачность
Чем выше прозрачность, тем менее заметен элемент дизайна и тем больше другие фрагменты рисунка через него просвечивают.
Чем ниже прозрачность, тем элемент ярче и плотнее.
С помощью прозрачности можно создать эффект дымки, тумана, мыльных пузырей, капель воды. Очень гармонично смотрится прозрачный фон на сайтах: подчеркивает контрастные смысловые элементы и акцентирует кнопки действия.
Поскольку такие дизайны в тренде, множество шаблонов Wordpress и других редакторов Landing Page выполнены в этом стиле.
25. Монохромность
Монохром — это изображение, выполненное в одном цвете либо в его «50 оттенках», которые хорошо сочетаются между собой
и часто используются в дизайне логотипов. Samsung, Twitter, Facebook, CNN, ZARA, WWF и десятки других всемирно известных брендов.

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

26. Дизайн и оформление
Чтобы понимать, как организовать и упорядочить элементы на веб-страницах и в макетах – маркетологу важно умело оперировать массивом дизайнерских терминов.
27. Соотношение сторон
Aspect Ratio – это отношение ширины экрана (кадра, изображения) к его высоте. Термин пришел из кинематографа и фотографии (стандартный размер кадра 3х4 и 16х9). Этот параметр крайне важен для разработки сайта с адаптивным дизайном и корректного отображения картинок и видео. Поисковики всё чаще требуют идеального воспроизведения на смартфонах и планшетах, а клиенты сердятся, когда видят абракадабру и расплывшиеся фотографии вместо удобной верстки.
Адаптивный дизайн отлично отображается на любых устройствах, как со стандартным соотношением сторон 16:9 и 4:3,
так и с нетиповыми 5:3 и 16:10, а также с новейшими 18:9.
28. Белое пространство (воздух)
Когда экран загроможден картинками, видео, фреймами, текстовым массивом — он воспринимается тяжелее, чем минималистичный. Воздух, или negative space — это пустое пространство веб-страницы. Оно может быть любого оттенка, не обязательно белого.
Но чем его больше, тем лучше!
Самый известный пример — Google: лого, поиск, одно меню и ничего лишнего.
29. Текстура
Текстура — имитация поверхности: дерево, кирпич, мех, ткань, бумага. Использование фотографии как фона тоже называется использованием текстуры. Ее предназначение — создать иллюзию рельефа и глубины, добавить колоритные акценты и реалистичность.
30. Разрешение
Чем выше разрешение картинки — тем лучше и качественнее она отображается. С повышением качества увеличивается размер файла, тем дольше она загружается и занимает много места на сервере.
Поэтому баланс и выбор оптимального качества изображения — «наше всё».
Разрешение — количество пикселей в 1 дюйме, обозначается ppi. Картинка в высоком разрешении сохраняет чёткость при увеличении,
в низким — дробится на пиксели.
31. Эффект размытия (Blur)
Блюр чаще всего используется для фонов веб-страниц. Когда мы хотим акцентировать лид-форму или продающий текст, это легко сделать, когда изображение на заднем плане размытое и нечеткое, но атмосферное.
32. Контраст
Контраст – это разница между самой светлой и самой темной частью картинки.
Оптимальный контраст — объект заметен на фоне, низкий — трудно разобрать изображение, похожее на блеклое пятно.
Слишком высокий — изображение превращается в черно-белый гранжевый рисунок.
Но еще контраст — это резкая, очень заметная разница между элементами дизайна. Разные цвета текста и фона, размеры шрифтов, контрастные геометрические формы, темные и светлые картинки.
Высокий контраст очень привлекает внимание, кричит: «Смотрите сюда!»
33. Насыщенность
Насыщенность означает интенсивность или бедность цвета. Насыщенная картинка обладает сочными и яркими цветами,
если максимально снизить насыщенность — получится изображение ч/б.
Насыщенные изображения и цвета привлекают внимание, а ненасыщенные служат отличным фоном для текстов и значимых элементов страницы. Они создают атмосферу, но не загромождают.
34. Флет-дизайн
Плоский дизайн сайта и рекламы – трендовое веяние. Отсутствие эффектов, простота, удобство для пользователя, много «воздуха»
на странице, двухмерное изображение, предметы не отбрасывают теней, плоские кнопки, яркие цвета и современность —
вот его признаки. Правда, не всегда понятно, где находится кнопка заказа, ведь нет иллюзии объема, градиентов, блюров и 3D.
Зато — минимализм и практичность.
35. Брендирование
Плоский дизайн сайта и рекламы — трендовое веяние. Отсутствие эффектов, простота, удобство для пользователя, много «воздуха»
Нельзя вот так взять и рассмотреть все дизайнерские термины и умолчать о брендировании.
Брендирование — ключевой, основополагающий термин для маркетолога. Создание уникального единого стиля для компании,
тщательно продуманного названия, эксклюзивного логотипа, набора шрифтов и визуальных идентификаций.
По телевизору звучит «Свято наближається», спешит красный фургончик с дедом Морозом в красном костюме — всем очевидно,
что Coca-Cola встречает Новый Год. На биллборде спортсмен рвётся к победе на черном фоне, а внизу маленький значок и надпись «Do it» — это, конечно же, NIKE.
36. Логотип и символ бренда
Логотип — это эксклюзивное дизайнерски оформленное название компании — слово либо аббревиатура.
Символ бренда (фирменный знак) НЕ содержит слов. Это графический элемент, который символизирует кредо, принципы и деятельность компании, олицетворяет ее дух и вызывает эмоциональный отклик.
Бывает, что фирменный знак становится настолько узнаваемым, что не нуждается в пояснениях и логотипе.
Яблоко Apple, птица Twitter, кролик Playboy сразу маркируют пространство.
37. Иконки
Мини-картинки, которые представляют те или иные действия или объекты. Позвонить, отправить мейл, перейти в Facebook, Linkedin
или Google+. Есть универсальные иконки, которые понятны всем, есть собственные иконки компании. И здесь нужно быть осторожным – кнопки соцсетей знают все, но авторскую пиктограмму могут не понять.
Иконки сейчас модно исполнять во флет-дизайне, без теней и градиентов.
Предлагаем к просмотру несколько сайтов, оформленных со стандартными и эксклюзивными иконками.
38. Стайл-гайд
Стайл-гайд — очень важная вещь. Это полное, доскональное руководство по дизайну визуальных представлений бренда.
Рекламные материалы, визитки, видеоролики, POS-материалы, сайт, оформление магазина, форма сотрудников —все подчиняется разработанным специалистами стандартам. Шаг вправо, шаг влево – и вместо идеального дизайна возникает разнобой и безвкусица.
Единый стиль, единая айдентика создает у клиентов целостное впечатление о бренде, вызывает живые эмоции, повышает узнаваемость
и способствует росту продаж.
Статьи, которые будут вам полезны
У Вас есть вопросы или нужна консультация?
Свяжитесь с нами и мы с радостью ответим на них!




Звоните нам Пн-Пт: 10:00-19:00 по Киеву 79017, г. Львов, ул. Водопроводная, 2, оф. 615 brand.kinsly@gmail.comФОП Слепко Ю. Ю
Kinsly © 2016 - 2017 Карта сайта