Форма и цвет
Как и цвет, форма обладает своей выразительностью. Поэтому Иттен соотнёс базовые цвета с основными геометрическими фигурами, у которых совпадают их выразительные характеристики.
Квадрат — неподвижная материя, красный цвет.
Треугольник — символ мысли, жёлтый цвет.
Круг — вечное движение духа, синий цвет.
Правила образования вторичных цветов можно применить и к форме. Например, форма оранжевого цвета — трапеция, а форма фиолетового цвета — овал. То же и с субъективностью — Иттен считал, что каждому человеку нравится какая-то своя форма.
Иллюстрация: Skillbox Media
Там, где цвет и форма согласованы в своей выразительности, их воздействие на зрителя удваивается. Картина, воздействие которой определяется главным образом цветом, должна строиться на подчинении формы цвету, а картина, в которой художник придаёт главное значение форме, в своём цветовом решении должна идти от формы.
Иоханнес Иттен
В качестве примера работы с формой Иттен советует посмотреть на разных художников. Например — европейские:
Маттиас Грюневальд стремился к объективности в цвете и форме.
Маттиас Грюневальд. «Ашаффенбургский алтарь», 1519 г. Изображение: Приходская церковь Вознесения Богоматери, Штуппах / Wikimedia Commons
Конрад Витц объективен в цветах, но субъективен в форме.
Конрад Витц. «Святой Христофор», около 1435 г. Изображение: Художественный музей, Базель / Wikimedia Commons
Винсент ван Гог субъективно работал и с цветами, и с формой.
Традиционные варианты смешивания палитр
При самостоятельном получении колера необходимо знать правила смешивания красок. Рассмотрим распространённые варианты получения нужного цвета.
Красные
Красный является представителем основного колера. Для получения различных красных оттенков необходимо придерживаться правил:
- Тон кармина, который максимально приближается к фуксии, соединяется с жёлтым 2:1. В результате получаем красный.
- Соединяя розовый цвет с жёлтым, получаем оранжевый.
- Для получения алого необходимо взять красный и жёлтый в пропорции 2:1.
- Для достижения красной палитры с мягким эффектом смешиваются красная и розовая краска. Для достижения более светлого тона, то лучше добавить белую краску.
- Если в основную красную краску добавить краситель тёмного цвета, то получим бордовый.
- Достичь тёмно-красного можно путём смешения цветов красного и фиолетового в соотношении 3:1.
Синие
Существуют основные цвета, к которым относят и синий. Для получения нужного синего колера необходимо использовать этот основной цвет. Голубой получаем путём добавления в синюю палитру белую. При увеличении объёма белого оттенок будет становиться светлее. Для получения умеренного тона вместо белого используют бирюзовый.
Для получения синих цветов и оттенков, необходимо следовать следующей схеме. В синий добавляем:
- жёлтый и получаем сине-зелёный;
- красный, в итоге получим фиолетовый;
- оранжевый обеспечит серый цвет;
- черный даст возможность образовать тёмно-синий.
Зелёные
Как правильно смешивать краски для получения зелёного и его оттенков. Основное правило – смешиваем жёлтые и синие красители. Яркая палитра зелёных оттенков достигается путём сочетания основных цветов в разных объёмах и добавления дополнительных красителей. Дополнительные цвета – это черный и белый.
Как получить цвет хаки? Для этого соединяют два элемента: жёлтый и синий, с добавлением коричневой колеровки
Для получаемого результата важно количество вещества. Оливковый цвет можно получить если взять зелёный желтый тона
Сделать горчичный оттенок сложнее. К жёлтому добавляют красный, черный и немного зелёного цвета.
Зелёный не относится к основному цвету. Для его получения смешивают цвета красок жёлтого и синего. Но, для получения насыщенного зелёного тона, необходимо использовать приготовленную на производстве зелёную краску. Если зелёную краску делали самостоятельно, то тона будут не яркими.
Смешение красителей, которые имеют белый и зелёный оттенок, дают возможность получить светло-зелёный, а если добавить немного жёлтого, то можно любоваться салатовым.
Другие оттенки
Обратимся и к другим тонам. Какой оттенок является одним из востребованных? Очень часто в интерьере используются серый тон. Он получится, если черный цвет смешать с белым. Чем больше белого, тем светлее будет получившийся результат.
Также очень часто востребован серый, который имеет серебристый металлизированный оттенок. Серебряный цвет при смешивании получится, если использовать разные добавки, к примеру, сурьму.
Итак, чтобы обладать тем колером, который подходит определённому интерьеру, нужно смешать красители. Какие цвета смешать, чтобы получилось всё правильно, подскажут рекомендации, которые приведены выше. Получившиеся краски будут долго радовать хозяев.
Coolors.Co
Сервис Coolors.co включает в себя самые разнообразные и мощные инструменты для создания цветовых палитр. Вы можете не только самостоятельно пробовать свои силы, но и вдохновляться тысячами цветовых сочетаний, которые составили другие пользователи.
Как и на Colorscheme.ru и Adobe Color, разработчики предусмотрели функционал, который позволит создать дизайн, доступный для дальтоников. Считаю это важным, т.к. этой проблеме много времени никто не уделяет.
Сервис также отлично справляется с задачами, опирающимися на составление палитр, опираемых на различные классические цветовые схемы.
Дополнительный функционал
- Генерация палитры из загруженной фотографии
- Создание коллажа из загруженной фотографии + сгенерированная палитра
- Палитры градиентов
- Создание градиентов
- Проверка контрастности цвета текста и фона
- Поддерживает HEX, RGB, CMYK, HSB, HSL, LAB, XYZ, LCH, RAL, HKS, COPIC, PRISMACOLOR, LUV и HWB
- Приложение для IOS + аддон для Adobe + расширение для Chrome
Проблема 1: Низкая доступность
Многие из изученных нами палитр совершенно не приспособлены для визуализации данных. Мало того, что цвета в их составе недостаточно яркие, так эти палитры еще и совершенно не продуманы с точки зрения доступности для людей с ограниченными возможностями. Палитра Flat UI Colors — одна из самых популярных в интернете, и понятно почему: она отлично выглядит. Но, как видно из названия, эта палитра создана для пользовательских интерфейсов (UI). Людям, не различающим цвета, сложно воспринимать визуализацию данных, если она выполнена при помощи такой палитры:
Полноцветная палитра Flat UI Colors, режим протанопии (слепоты на красный цвет) и оттенки серого.
Проблема 2: Недостаточно цветов
Еще одна проблема, которую мы отметили во многих существующих палитрах — это недостаточное количество цветов. При создании визуализаций в Graphiq, мы используем как минимум 6 цветов, а в некоторых случаях и 8–12. В большинстве палитр просто нет нужного нам количества цветов.
Вот несколько примеров с Color Hunt:
Это классные палитры, но они недостаточно гибкие, чтобы использовать их для представления сложных массивов данных.
Выразительность цвета
Иттен считал, что каждым цветом можно выразить эмоцию: ярость, очарование, восхищение, страсть. При этом одни и те же цвета в зависимости от контекста воспринимаются по-разному: голубая синева моря очаровывает нас, но если в этот цвет выкрасить помещение, оно будет казаться жутким.
В качестве примера Иттен приводит времена года. У художников каждое из них соотносится с определённым цветом:
Весна — жёлтый, светло-розовый, светло-голубой.
Лето — зелёный, синий, красный.
Осень — коричневый и фиолетовый.
Зима — холодные, глубокие и прозрачные цвета.
Суждение «приятный — неприятный» не может быть основой правильного и правдивого колористического решения. Более приемлемыми будут критерии, которые возникают в том случае, когда наши суждения относительно каждого отдельного цвета исходят из оценки общей цветовой гаммы. С позиции четырёх времён года это означает, что для каждого из них нам следует находить те цвета в цветовом шаре, которые в целом ясно выражают его характер.
Иоханнес Иттен
Также Иттен даёт эмоциональные определения основным цветам своего спектра:
Жёлтый — самый светлый из всех цветов, символизирует разум и познание. Если жёлтый начинает терять свою яркость, он начинает ассоциироваться с завистью, предательством, двуличием, безумием.
В зависимости от окружения жёлтый цвет меняет свой характер. Например, на фоне розового цвета он теряет выразительность. Иллюстрация: Skillbox Media
Сальвадор Дали. «Портрет Галы с двумя рёбрышками ягнёнка, балансирующими на её плече», 1933 г. Изображение: Фонд «Гала — Сальвадор Дали»
Красный — обладает мощной яркостью, символизирует духовную любовь. В зависимости от оттенка и окружения легко меняет свой характер. Например, красно-оранжевый — войны и демонический мир, пурпурно-красный — светская и духовная власть.
Красный легко адаптируется под любое окружение и приобретает новые смыслы. На зелёном фоне он кажется банальным и шумным, а на сине-зелёном — разгоревшимся огнём. Иллюстрация: Skillbox Media
Анри Матисс. «Танец», 1910 г. Государственный Эрмитаж. Изображение: Государственный Эрмитаж
Синий — пассивный и всегда холодный, символизирует веру. Если он заметен, то вызывает ощущение страха и печали, но вместе с тем указывает путь к чему-то духовному. Синий на лиловом фоне кажется отчуждённым и слабым, а на красно-оранжевом — сохраняет свою чистоту.
На жёлтом фоне синий приобретает зеленоватый оттенок, а на чёрном — сияет в своей чистоте и силе. Иллюстрация: Skillbox Media
Натан Исаевич Альтман. Портрет Ахматовой, 1915 г. Изображение: Государственный Русский музей
Впечатления и душевные переживания художника могут быть очень интенсивны и велики, но если с самого начала работы над произведением он не выберет из всей цветовой гаммы основной, нужной для него группы, то конечный результат может оказаться сомнительным. Поэтому подсознательное восприятие, интуитивное мышление и позитивные знания должны составлять одно целое, чтобы из многообразия доступных нам возможностей выбрать истинные и правильные.
Иоханнес Иттен
Больше о цвете
- Продающий красный: как цвет влияет на восприятие бренда
- Цветовые пространства: большой разбор
- Что такое цветовой круг Иттена и как дизайнеры подбирают цвета с его помощью
Не забывайте о белом пространстве
Чтобы обидеть белое пространство, достаточно назвать его «пустым местом». Пустота предполагает, что она должна быть чем-то заполнена, и поэтому она не «выполняет свою работу» должным образом. Но это не одно и то же.
Когда белое пространство используется целенаправленно, оно помогает повысить четкость и ясность вашего дизайна: когда более нагруженные и замысловатые части композиции сбалансированы белым пространством, ваш дизайн начинает дышать.
Например, взгляните на дизайн , выполненный Cocorrina. Белое пространство помогает достигнуть баланса между картинкой, текстурой и текстом, что придает дизайну изысканность и чистоту.
Итак, как же лучше использовать белое пространство?
Уменьшите масштаб графических элементов. Благодаря этому, вы сможете создать больше белого пространства вокруг центральных элементов, и при этом не выйдете за рамки изначального дизайна. Для наглядности взгляните на дизайн открытки с кулинарным рецептом от Serafini Creative, где основные элементы целенаправленно уменьшены для создания прекрасного обрамления из белого пространства.
Не пытайтесь заполнить все белое пространство. Как уже было сказано, белое пространство — это не пустое место, оно служит определенным целям, поэтому не пытайтесь заполнить каждый его кусочек.
В качестве примера можно привести дизайн веб-сайта от Creative Web Themes, где для презентации товара используется одно изображение, заголовок с полужирным начертанием, две небольшие линии текста и ссылка на дальнейшую информацию. Благодаря такому простому плану и большому количеству белого пространства каждый элемент имеет собственную территорию и может «дышать», что позволяет дизайну выглядеть опрятно и оказывать должный эффект на зрителя.
При создании дизайна всегда спрашивайте себя, все ли элементы на 100% необходимы. Нужен ли весь этот текст, обязателен ли ярко-голубой заголовок, нужны ли все 3 изображения? Удаляя лишние частички из макета, вы можете создать более точный дизайн, который будет только выигрывать за счет белого пространства.
Этап третий — исследования
Задача любого сайта, а сайта компании, занимающейся предоставлением услуг или продажей товаров в особенности, вызывать у потребителя доверие, быть понятным для покупателя, не вызывать сомнений. Эта задача решается с применением правила User-centered design, UCD, которое означает, что у сайта должен быть дизайн, ориентированный на пользователя.
Как это понять? Думаю, тут без психологии и стереотипов не обойтись.
Я считаю, в разработке сайтов, как и вообще в любом деле не нужно изобретать велосипед. Даже если уровень креатива у вас зашкаливает, самый лучший сайт тот, который похож на все остальные.
В психологии это называется синдромом утенка и успешно применяется при разработке сайтов. Для пользователя самым понятным и удобным будет сайт, который похож на тот, к которому он привык, изучил его.
Например, до того, как я могла гордо назвать себя продвинутым пользователем, я имела почту на mail.ru, а из поисковых систем пользовалась только Яндексом. Когда я впервые попала на Google, для меня был непонятен их минималистичный дизайн, с полным отсутствием всех привычных для взгляда, информационных блоков. К слову, в итоге дизайн Google мне нравится больше, особенно сейчас, когда они в очередной раз его поменяли, хотя поиском я пользуюсь от Яндекс.
Особенно часто про синдром утенка забывают разработчики сайтов креативных агентств. Пытаясь показать свою креативность, они забывают, что их целевая аудитория – не конкуренты в выдаче, а простые заказчики, которые даже не всегда понимают, что такое корпоративный стиль, не говоря уже про такие заумные слова, как брендинг, нейминг и иже с ними.
Есть на этот счет и ещё одно правило — Physical consistency — переводится как физическая согласованность, но в русской интерпретации его называют правилом логичности.
Данное правило используют применительно к внешнему виду сайта. Мы привыкли видеть название сайта в шапке, при этом в левой части оно воспринимается гораздо логичней, чем в противоположной.
Скорее всего, это связано с тем, что наш взгляд идет от верхнего левого края по диагонали к нижнему правому
И важно в самом начале увидеть название и какой-то слоган, чтобы понять, что мы оказались по адресу.. Для нас является нормой наличие меню в виде списка ссылок, наличие важной информации в центре экрана и т.д
Думаю, к этому правилу можно отнести и такие вещи, как цветовая гамма, изображения и графика
Для нас является нормой наличие меню в виде списка ссылок, наличие важной информации в центре экрана и т.д. Думаю, к этому правилу можно отнести и такие вещи, как цветовая гамма, изображения и графика
На этом этапе можно переходить к разработке концепции будущего сайта.
Дальнейшие правила более всего используются веб-дизайнерами, т.к. в первую очередь касаются именно внешнего вида сайта.
Психология и веб-дизайн
С одной стороны может показаться что общего у психологии и web-дизайна, но как показывает практика между ними очень много общего. Поэтому предлагаю ознакомиться с книгами которые рассказывают о том как можно увлечь посетителя настолько, что он забудет что хотел уйти с вашего сайта.
18. «Мэджик дизайн: веб-дизайн, как психотерапия» от Михаила Солоницина
Это не совсем книга, а запись интервью с владельцем «Меджик – дизайн» Михаилом Солонициным на одном из лучших психологических подкастов. Вопросы будут касаться психологии покупателей и заказчиков. Вы узнаете как надо вести себя с клиентом. Такой вариант лучшее, что может быть для обучающей аудиокниги. Специалист отвечает на вопросы, которые больше всего интересуют начинающих дизайнеров.
19. «UX-дизайн Netflix не дает нам спать по ночам» от Маделейна Морли
Используя реальные примеры и цифры, Моделейн рассказывает об инструментах, которые так ловко ловят нас в свои сети и привлекают к экранам.
Издание есть в текстовом варианте, но можно прослушать в аудио. Это неконкретно о великом и ужасном Netflix, а о том, как работает на потребителях UX-дизайн. На изучение вы потратите не более 18 минут.
🗓 Что входит в обязанности специалиста
Старт работы предусматривает заполнение брифа
Это важно, так как при работе необходимо учитывать множество факторов, понимать цель и задачу, чтобы в итоге выполнения работы получить нужный результат и не тратить время на многочисленные доработки. По этой причине особенности по заказу не следует узнавать в спешке, на заполнение нужно выделить время, прежде всего, заказчику
Второй этап работы – рисование прототипов, визуализация сайта. Их может быть несколько. Данная работа выполняется в целях предоставления заказчику вариантов отображения блоков, в которых будет размещаться контент. Не следует пренебрегать этим этапом, так как он позволяет сэкономить время впоследствии. Лучше уточнить все вопросы еще в начале работы.
После согласования прототипа разрабатывается макет. В нем должен присутствовать текст, анимация, а также цветовое оформление. На этом этапе также важны согласования, по результатам которых подготовленный дизайн-макет идет в разработку.
Подготовленный шаблон переходит в работу верстальщикам и программистам. Дальнейшее продолжение работы ведется уже вместе с ними. При необходимости в ходе процесса вносятся требуемые корректировки. Если же веб-дизайнер владеет языками программирования и верстки, он может самостоятельно завершить свою работу в виде готового продукта.
Как использовать свою персональную палитру?
Первый шаг
Первым делом мы советуем заглянуть в свой гардероб. Имея палитру легко оценить его с точки зрения подходящих вашей внешности цветов.Ваш гардероб максимально должен соответствовать цветам палитры. Есть смысл разобрать его, и возможно, вы поймете природу некоторых «лишних» вещей. Очень часто именно вещи «неправильных» оттенков становятся таковыми, когда и выбросить жалко и носить почему то не хочется.
Второй шаг
Прикладывайте палитру к вещам, сравнивайте цвета. Хорошо, если ваша одежда «сливается» с палитрой, значит это гармоничные внешности оттенки
Именно на них стоит обращать внимание в магазинах. Если же вещь однозначно выбивается по цвету, например, выглядит на фоне палитры слишком блеклой или напротив, «режущей глаз», не стоит её жалеть
Она не гармонична вам и поэтому у вас не было настроения её носить. Чувство гармонии обычно присутствует, даже если мы ничего об этом не знаем. Кроме того, она будет плохо сочетаться с другими элементами гардероба по цвету.
Третий шаг
Оправляясь в шопинг, берите с собой распечатанную палитру или готовый свотч. Первое время, пока вы не запомнили ваши оттенки и еще не научились видеть разницу между своими оттенками и другими, ваша палитра — ваш друг.
Четвертый шаг
В магазине обращайте внимание прежде всего на цветовую гамму, и только после на фасоны и крой. Прикладывайте образцы, выделяйте из всего свои оттенки, наиболее близкие вашей палитре
Палитра поможет вам сэкономить время на примерку не подходящих оттенков.
Пятый шаг
Выбрав варианты одежды согласно палитре, берите их, подходите к зеркалу, и прикладывайте их к лицу, посмотрите как работает цвет, в ваших цветах вы будете выглядеть свежо и привлекательно.
Шестой шаг
Если в магазине проблемы с освещением, постарайтесь найти источник дневного света, внимательнее смотрите на сходство цветов выбранной вещи и палитры.
Список цветов с названиями
В таблице перечислены названия цветов на английском языке (которые можно использовать в качестве значений), поддерживаемые всеми браузерами, и их шестнадцатеричные значения. Все перечисленные цвета являются «безопасными», то есть во всех браузерах будут отображаться одинаково.
| Название цвета | HEX | Цвет |
|---|---|---|
| Black | #000000 | |
| Navy | #000080 | |
| DarkBlue | #00008B | |
| MediumBlue | #0000CD | |
| Blue | #0000FF | |
| DarkGreen | #006400 | |
| Green | #008000 | |
| Teal | #008080 | |
| DarkCyan | #008B8B | |
| DeepSkyBlue | #00BFFF | |
| DarkTurquoise | #00CED1 | |
| MediumSpringGreen | #00FA9A | |
| Lime | #00FF00 | |
| SpringGreen | #00FF7F | |
| Aqua | #00FFFF | |
| Cyan | #00FFFF | |
| MidnightBlue | #191970 | |
| DodgerBlue | #1E90FF | |
| LightSeaGreen | #20B2AA | |
| ForestGreen | #228B22 | |
| SeaGreen | #2E8B57 | |
| DarkSlateGray | #2F4F4F | |
| LimeGreen | #32CD32 | |
| MediumSeaGreen | #3CB371 | |
| Turquoise | #40E0D0 | |
| RoyalBlue | #4169E1 | |
| SteelBlue | #4682B4 | |
| DarkSlateBlue | #483D8B | |
| MediumTurquoise | #48D1CC | |
| Indigo | #4B0082 | |
| DarkOliveGreen | #556B2F | |
| CadetBlue | #5F9EA0 | |
| CornflowerBlue | #6495ED | |
| MediumAquaMarine | #66CDAA | |
| DimGray | #696969 | |
| SlateBlue | #6A5ACD | |
| OliveDrab | #6B8E23 | |
| SlateGray | #708090 | |
| LightSlateGray | #778899 | |
| MediumSlateBlue | #7B68EE | |
| LawnGreen | #7CFC00 | |
| Chartreuse | #7FFF00 | |
| Aquamarine | #7FFFD4 | |
| Maroon | #800000 | |
| Purple | #800080 | |
| Olive | #808000 | |
| Gray | #808080 | |
| SkyBlue | #87CEEB | |
| LightSkyBlue | #87CEFA | |
| BlueViolet | #8A2BE2 | |
| DarkRed | #8B0000 | |
| DarkMagenta | #8B008B | |
| SaddleBrown | #8B4513 | |
| DarkSeaGreen | #8FBC8F | |
| LightGreen | #90EE90 | |
| MediumPurple | #9370D8 | |
| DarkViolet | #9400D3 | |
| PaleGreen | #98FB98 | |
| DarkOrchid | #9932CC | |
| YellowGreen | #9ACD32 | |
| Sienna | #A0522D | |
| Brown | #A52A2A | |
| DarkGray | #A9A9A9 | |
| LightBlue | #ADD8E6 | |
| GreenYellow | #ADFF2F | |
| PaleTurquoise | #AFEEEE | |
| LightSteelBlue | #B0C4DE | |
| PowderBlue | #B0E0E6 | |
| FireBrick | #B22222 | |
| DarkGoldenRod | #B8860B | |
| MediumOrchid | #BA55D3 | |
| RosyBrown | #BC8F8F | |
| DarkKhaki | #BDB76B | |
| Silver | #C0C0C0 | |
| MediumVioletRed | #C71585 | |
| IndianRed | #CD5C5C | |
| Peru | #CD853F | |
| Chocolate | #D2691E | |
| Tan | #D2B48C | |
| LightGray | #D3D3D3 | |
| PaleVioletRed | #D87093 | |
| Thistle | #D8BFD8 | |
| Orchid | #DA70D6 | |
| GoldenRod | #DAA520 | |
| Crimson | #DC143C | |
| Gainsboro | #DCDCDC | |
| Plum | #DDA0DD | |
| BurlyWood | #DEB887 | |
| LightCyan | #E0FFFF | |
| Lavender | #E6E6FA | |
| DarkSalmon | #E9967A | |
| Violet | #EE82EE | |
| PaleGoldenRod | #EEE8AA | |
| LightCoral | #F08080 | |
| Khaki | #F0E68C | |
| AliceBlue | #F0F8FF | |
| HoneyDew | #F0FFF0 | |
| Azure | #F0FFFF | |
| SandyBrown | #F4A460 | |
| Wheat | #F5DEB3 | |
| Beige | #F5F5DC | |
| WhiteSmoke | #F5F5F5 | |
| MintCream | #F5FFFA | |
| GhostWhite | #F8F8FF | |
| Salmon | #FA8072 | |
| AntiqueWhite | #FAEBD7 | |
| Linen | #FAF0E6 | |
| LightGoldenRodYellow | #FAFAD2 | |
| OldLace | #FDF5E6 | |
| Red | #FF0000 | |
| Fuchsia | #FF00FF | |
| Magenta | #FF00FF | |
| DeepPink | #FF1493 | |
| OrangeRed | #FF4500 | |
| Tomato | #FF6347 | |
| HotPink | #FF69B4 | |
| Coral | #FF7F50 | |
| Darkorange | #FF8C00 | |
| LightSalmon | #FFA07A | |
| Orange | #FFA500 | |
| LightPink | #FFB6C1 | |
| Pink | #FFC0CB | |
| Gold | #FFD700 | |
| PeachPuff | #FFDAB9 | |
| NavajoWhite | #FFDEAD | |
| Moccasin | #FFE4B5 | |
| Bisque | #FFE4C4 | |
| MistyRose | #FFE4E1 | |
| BlanchedAlmond | #FFEBCD | |
| PapayaWhip | #FFEFD5 | |
| LavenderBlush | #FFF0F5 | |
| SeaShell | #FFF5EE | |
| Cornsilk | #FFF8DC | |
| LemonChiffon | #FFFACD | |
| FloralWhite | #FFFAF0 | |
| Snow | #FFFAFA | |
| Yellow | #FFFF00 | |
| LightYellow | #FFFFE0 | |
| Ivory | #FFFFF0 | |
| White | #FFFFFF |
Adobe Color CC
Бесплатный инструмент Adobe Color CC существует уже некоторое время, и является одним из лучших инструментов для создания цветовой палитры. Он позволяет не только создавать свои собственные палитры, но и смотреть, что сделали другие. Можно выбирать цвет с цветового круга (или прямо с изображения), и применять разные правила для легкой генерации палитры. При этом, процесс создания достаточно гибкий, ведь каждый цвет можно настраивать по своему вкусу самостоятельно.
Новейшая функция Adobe Color CC – это инструменты, которые быстро вам подскажут, будут ли работать выбранные вами цвета при дальтонизме, и насколько эффективно их использование в качестве фона для текста.
Adobe Kuler
Adobe Kuler – один из самых известных ресурсов для работы с цветом. Содержит огромную библиотеку готовых цветовых тем. Вы можете выбрать любую из них, или, загрузив, понравившееся изображение, составить собственную цветовую тему. Все темы можно отсортировать по оценкам, по популярности и по новизне. Каждая тема состоит из пяти цветов, которые сочетаются между собой по одному из правил цветовой гармонии.
Основная работа происходит в цветовом круге. Разделители между цветами как раз наглядно демонстрируют сочетание цветов по правилам гармонии. Перемещая разделители по кругу в разных направлениях, вы можете получить разный цвет, тон, насыщенность и яркость.
Несомненным плюсом Adobe Kuler является наличие его плагина в графическом редакторе Adobe Photoshop. То есть вы можете работать с Adobe Kuler он-лайн, либо используя программу Adobe Photoshop на своём компьютере.
Сколько получают веб-дизайнеры
Как и во многих других профессиях, зарплата веб-дизайнера зависит от его стажа. Если смотреть на объявления с сервисов по поиску работы, то в России начинающие специалисты или стажеры могут рассчитывать на зарплату от ₽40 тыс. Профессионалы среднего уровня, со стажем от года, получают от ₽60 тыс., а старшим специалистам с многолетним опытом обещают от ₽100 тыс. и выше. При этом на уровень зарплаты влияет не только опыт, но и знания, навыки, репутация и количество клиентов.
В веб-дизайне широко распространен фриланс, поскольку профессия завязана на компьютере и, при желании, с ним под рукой можно работать из любой точки мира. При фриланс-занятости на первый план вместо стажа выходят портфолио, а также скорость и качество работы. Для удаленных специалистов важны и навыки работы с клиентами, поскольку каждый раз придется договариваться самостоятельно. Зарплата утверждается по договоренности или за каждый отдельный элемент. Например, за главную страницу сайта и за добавление новой рубрики гонорар может различаться. При таком подходе оплата варьируется в среднем от ₽5 тыс. до ₽8 тыс. за задачу. Если работать на зарубежный рынок, то, согласно анализу портала Kinsta, средняя зарплата веб-дизайнера в год будет $57 тыс. в год или около ₽350 тыс. в месяц.
Экономика образования
Какой язык программирования учить прямо сейчас: 9 самых востребованных
Кому подойдетпрофессия веб-дизайнер?
Анализ продукта перед разработкой дизайна
Веб-дизайнером может стать практически любой человек. Здесь важнее softskills (личные качества) и готовность к lifetime learning, чем уже имеющиеся навыки. Для изучения HTML/CSS или Photoshop есть уроки, курсы, учебные программы, а быстрого способа стать дружелюбным, креативным или стрессоустойчивым – нет.Профессия веб-дизайнер подойдет человеку, который умеет мыслить аналитически, выдерживает сидячую, монотонную работу и не теряет концентрацию, а еще может посмотреть на задачу под другим углом. Художественный вкус — не обязателен, но приветствуется. Уметь рисовать не обязательно.
Где и как можнопопрактиковаться?
Если вы учитесь веб-дизайну на курсах, то будете выполнять практические работы, готовить дипломные проекты.
Хотите развиваться быстрее и учиться эффективнее — практику придется организовать самостоятельно. Например, копировать, анализировать и разбирать по элементам проекты, которые найдете у гуру и агенств на Behance, Awwwards и т.п.
Можно проходить бесплатные пошаговые уроки с YouTube, участвовать в марафонах и хаккатонах, подавать работы на конкурсы, брать первые коммерческие заказы «за дешево» или бесплатно, наняться к кому-то опытному в подмастерье.
Студия дизайна/агентство
Может быть большой и именитой, с хорошо налаженными процессами. Например, Студия Артемия Лебедева, AGIMA, AIC, Дизайн-бюро Горбунова. В таких требования к кандидату очень высокие, условия могут быть жесткими, но вы приобретете бесценный опыт.
Студия может быть менее именитой, но процессы будут налажены отлично. Попасть туда в качестве Junior специалиста будет не так сложно.
Но большую часть рынка занимают студии имени себя, микро-агентства из 3-5 человек. В таком веб-дизайнер может стать человеком-оркестром с невысокой зарплатой.
Компании, в которых есть отдел дизайна
Предлагают услуги по маркетингу (SEO, SMM), разработке, созданию фото и видео контента. Дизайнер в такой команде может заниматься и отрисовкой сайтов, и решать другие задачи, как дизайн айдентики, продуктовый дизайн, графический дизайн.
Примеры крупных игроков: Promodo, Red Keds. Но есть и хорошая новость: в компаниях чаще можно встретить разделение труда: верстать, натягивать дизайн на движок, общаться с клиентом – будут другие.
Фриланс
Чаще всего заниматься исключительно UX/UI или веб-дизайном на фрилансе могут уже состоявшиеся специалисты, которые наработали опыт, портфолио и профессиональное признание.
Читайте так же: Что такое фриланс и фрилансер
Начинающему специалисту, как правило, приходится браться за небольшие заказы. Такие заказчики не готовы дробить процесс разработки сайта на дизайн, верстку, программирование, поэтому придется выполнять очень широкий круг обязанностей.
И еще важный момент фриланса: самостоятельный поиск заказчика и коммуникация с ним. Примеры: fl.ru, weblancer, фриланс биржа от habr. Обязательно учите язык, на англоязычных фриланс-ресурсах работы больше и оплачивают её лучше. Например: Upwork, Fiverr, Freelancer.
