How to: сделать гармоничный дизайн креативов и сайта и не облажаться

Давай будем честными хотя бы сами с собой: большинство из нас вообще нифига не дизайнеры. Мы можем называть себя арбитражниками, маркетологами, сммщиками, контекстологами, предпринимателями и владельцами рекламного бизнеса, мы можем делать креативы и сайты самостоятельно, но это не делает нас дизайнерами 99 левла. И что же теперь, все бросить? Конечно, нет! Ведь это отнюдь не означает, что we can't fake it ‘til we make it.

Читать в полной версии

Один из самых простых способов заставить свой фейк-дизайн работать – это грамотно работать с цветовой палитрой. Все же знают, что цвета играют огромную роль в рекламной кампании, вызывают у пользователей приступы определенных эмоций и писали слово «распродажа» большими красными буквами? Райян Маккреди (Ryan McCready) рассказал, как на протяжении уже трех лет пускает всем пыль в глаза и мимикрирует под про на самом сложном примере – составлении инфографик. Ну, что, посмотрим что-ли?
 

Перед тем, как начнем


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

Не используй вот такие цвета



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



В общем, не будь таким дизайнером. Есть миллионы цветов, которые можно использовать. Причем буквально миллионы – целых 16 777 216 оттенков. А серые и черные вообще даже не цвета, так что, если они остались наедине, то тут уже пахнет тоской и отчаянием.

Лучше используй цвета бренда



Это один из самых простых приемов, который почему-то часто упускают из виду, особенно новички. Если мы имеем на руках уже проверенные цвета бренда, которые прописаны в брендбуке, активно использовались в официальных промо, испытаны в битве и закалены временем, то не нужно изобретать велосипед – берем пипетку и стрил+с-стрил+в на свои творения. Вот, например, инфографика L2Inc о Snapchat, которая извращается над желтым из их логотипа. А главное, сразу понятно, о чем речь: либо потребление сыра, либо снапчатец.


 

Не позволяй цветам отвлекать от смысла



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


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

Лучше используй различные тона одного цвета



Вот самый простой лайфхак, который поможет тебе слепить что-то красивое, приличное и органичное бесплатно, без регистрации и смс. Итак, записывай рецепт: в первую очередь тебе понадобится базовый цвет – например, в случае ниже это голубой #93BEDF. Берем цветовой код, ставим его в микроволновку и вуаля – всего через секунду ты получаешь 20 красивых, замечтательных и самых разных цветов, которые превосходно сочетаются друг с другом в любом порядке.


 

Сохраняй последовательность



Довольно частая ошибка, с которой часто сталкиваются недодизайнеры в начале своей псевдо-дизайнерской карьеры – это желание сделать каждый кусок своей визуализации уникальным, вычурным и вау. Но, так как мы собрались здесь не для того, чтобы обсуждать шокирующие тенденции в рекламе (см. п. 3), ПОСЛЕДОВАТЕЛЬНОСТЬ ВАЖНЕЕ УНИКАЛЬНОСТИ. Сохраняя последовательность, ты также делаешь свой дизайн простым и аккуратным. И, если ты даже не ходил в художку в детстве, то должен добиваться простоты и аккуратности любой ценой.


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

 

Не бойся цветового круга



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

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

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



Во-вторых, последовательное сочетание или аналогичная триада – берем 3 цвета, которые находятся рядом друг с другом на колесе.



И в-третьих, комплементарное сочетание или дополнительные цвета – берем 2 противоположных цвета, которые лежат друг напротив друга.


 

Не забывай о теме и цели


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



Поэтому, когда мы говорим о развитии, росте, деньгах и экологии – что может быть лучше зеленого?



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



А если ты сравниваешь Twitter со Snapchat… но в примере ниже дизайнер явно что-то не уловил, да.


 

И напоследок: полезные инструменты в библиотеку



1. Adobe ---> https://color.adobe.com/ и Paletton ---> http://paletton.com/



2.CodeHex ---> https://www.colorcodehex.com/



3. Coolors ---> https://coolors.co/



4. Material UI Сolors ---> http://materialuicolors.co/



5. BrandColors ---> https://brandcolors.net/