Лекция по цвету — Transcript

Full transcript

1. 0:00Приветствую вас друзья на лекции по
2. 0:04цвету Не пугайтесь длительности этой
3. 0:06лекции больше половины из неё занимают
4. 0:10воркшопы по построению палитр для разных
5. 0:13цветов в интерфейсах и вы можете
6. 0:17возвращаться к этим отдельным кусочкам
7. 0:20тогда когда вам нужно будет работать там
8. 0:22например с жёлтым цветом посмотреть все
9. 0:23его нюансы с каким-то кислотным с тёмным
10. 0:26и так далее То есть лучше смотреть это
11. 0:29видео в несколько заходов Ну
12. 0:31непосредственно Когда вы решаете
13. 0:32какие-то продуктовые задачи начнём мы с
14. 0:35вами с
15. 0:37теории темы у нас сегодня вот такие То
16. 0:41есть у нас есть первая часть
17. 0:43посвящена образу цвета в интерфейсе то
18. 0:46есть в зависимости от того какой цвет Вы
19. 0:49будете
20. 0:49использовать вы достигаете определённого
21. 0:52эффекта в восприятии ваших макет здесь
22. 0:56будет управление ассоциациями Что
23. 0:58означают цвета Как сделать нескучные
24. 1:01цвета как подбирать сочетание Как
25. 1:04выбирать непосредственно главный
26. 1:06брендовый цвет безопасные зоны Какие
27. 1:08лучше не делать и практис основные
28. 1:11ошибки которые ребята совершают у нас на
29. 1:13курсах это кстати говоря третья версия
30. 1:17не четвёртая четвёртая будет позже
31. 1:19третья версия этой лекции с учётом
32. 1:21прошедших четырёх потоков вот мы
33. 1:25пофиксили многие проблемы развернули
34. 1:27многие темы о которых нас спросили
35. 1:29отдельно бы благодарность Я хочу
36. 1:31выразить себе за то что дописал
37. 1:33наконец-то в четыре подхода эту лекцию
38. 1:35Даше филичкин из озона Леда дизайн
39. 1:39систем за знания по построению палитр
40. 1:42которые мы с ней обсуждали Аня манзара
41. 1:44за вдохновение Саша юшково за
42. 1:47методическую помощь и рику за то что
43. 1:50рассказал мне про страшно соло сочетание
44. 1:54hct которого мы будем очень много Каса в
45. 1:57этой лекции также мы с вами Поработаем
46. 2:00над построением палитр всех базовых
47. 2:03цветов красный жёлтый синий светлые
48. 2:05тёмные оттенки кислотные оттенки бледные
49. 2:08оттенки А я вам покажу семь плагинов с
50. 2:11помощью которых можно строить палитры
51. 2:14разные инструменты повышение контраста
52. 2:16понижение контраста и вот управление вот
53. 2:19этими штуками как это по уму делается
54. 2:21поговорим о цветах состоянии и
55. 2:24компонентов будет большой гайд по серому
56. 2:27цвету потому что он как бы 60-70
57. 2:31Интерфейс Это Серый это очень важная
58. 2:33штука поговорим про доступность про
59. 2:35новые цветовые
60. 2:37стандарты hcl и про тёмную тему её тоже
61. 2:40построем для всех базовых цветов Ну что
62. 2:44поехали начинаем мы с вами с базовых
63. 2:47характеристик у вас у всех в фигме есть
64. 2:50вот такой дашборд cer котором вы можете
65. 2:54найти такую штуку как управление
66. 2:56цветовым пространством есть это то что у
67. 2:58ва стот по
68. 3:00и есть hsl который более Понятно
69. 3:03объясняет как вообще в принципе
70. 3:05распределяются цвета по вот этому
71. 3:07пространству может кстати тое
72. 3:09пространство Не совсем правильный термин
73. 3:11но это не суть важно у нас есть три
74. 3:14основных
75. 3:15параметра то есть непосредственно сам
76. 3:18цвет какой это будет цвет жёлтый синий
77. 3:20красный и так далее saturation Это его
78. 3:22насыщенность или по-другому яркость От
79. 3:26Серого до там яркого оттенка и lightness
80. 3:30- это светлость то есть где находится на
81. 3:33какой координате относительно белого и
82. 3:34чёрного наш цвет вот если мы переключаем
83. 3:38раскладку из хекса в hsl Ну то есть что
84. 3:41такое хкс это по сути hsl сломанный вот
85. 3:43так вот пополам чтобы можно было вот эти
86. 3:46два параметра lightness и saturation
87. 3:49использовать их одновременно Если вы
88. 3:51переключается в такое пространство то
89. 3:52оно более понятное наверху белый внизу
90. 3:54чёрный посередине яркий вот здесь вот
91. 3:56зона цветовой слепоты поговорим о
92. 3:58значении цвета Первое это БН col или
93. 4:03Action Ну то есть это цвет
94. 4:04непосредственно бренда и он же чаще
95. 4:06всего является основным цветом для
96. 4:09кнопок для каких-то активных элементов
97. 4:11ссылок если это позволяет нам
98. 4:14доступность Вы можете здесь прочитать Я
99. 4:17не буду всё перечитывать основные
100. 4:19значения этих цветов главную суть
101. 4:23которую мне нужно до вас донести это то
102. 4:26что у цветов достаточно банальные АСО
103. 4:30вот типа там розовенький
104. 4:33женственный там коричневый это там
105. 4:35деревья Земля чёрный это ночь серый -
106. 4:40Это какая-то нейтральная штука белый
107. 4:42чистота простота зелёненькие деревья
108. 4:45красненький жёлтенький солнце вот ровно
109. 4:47вот эти ассоциации из них по сути и
110. 4:50исходят значение цветов потому что ну
111. 4:53как бы человек уже достаточно много лет
112. 4:56эволюционирует и мы переносим
113. 5:00все всю Вот эту вот эволюционную историю
114. 5:02наше отношение И восприятие природы на
115. 5:05объекты и в графическом дизайне и на
116. 5:08какие-то предметы и по
117. 5:10сути эти цвета вызывают у нас
118. 5:13отдалённые ассоциации такие же как ну
119. 5:17вызывают у нас природные цвета по сути
120. 5:19это как-то вот оттуда вытекает и теперь
121. 5:22вы сможете Взглянуть на бренды и их
122. 5:25логотипы с другой стороны посмотреть
123. 5:27вообще что пытается донести до нас цвет
124. 5:31каждого логотипа
125. 5:34букинге зд перелёта с чем-то таким
126. 5:38мягенький хорошенький У нас вот здесь
127. 5:40небо airbnb coca-cola такие более
128. 5:44активные дерзкие цвета WhatsApp пытается
129. 5:47быть своим парнем Молодёжный Facebook
130. 5:50про спокойную уверенную историю и кстати
131. 5:53у Фейсбука Вот И вообще у всех брендов
132. 5:56Вы можете замечать такую историю как
133. 5:58повышение Яр
134. 6:01цветов которые они используют то есть
135. 6:02обычно в сере брендинге это было
136. 6:04какое-то более спокойное стало более
137. 6:07активно то есть эта штука она вообще
138. 6:10является там основным трендом повышение
139. 6:12чем ярче цвет тем больше он как бы
140. 6:16заставляет мозг ваш выделять дофамина Вы
141. 6:19даже
142. 6:20можете Провести такой небольшой
143. 6:22эксперимент на тему того чтобы в
144. 6:25телефоне у себя поставить такую
145. 6:28настройку чтобы все цта бы чёрно-белым и
146. 6:30вы заметите как смотреть в телефон и
147. 6:32скроллить ленту будет намного менее
148. 6:34интересно вот собственно этим и
149. 6:36пользуются все бренды пытаясь как бы
150. 6:39выжить и в интерфейсного дизайне и в
151. 6:41графическом дизайне пытаясь выжить из
152. 6:43вас побольше эмоций отсюда же тренд на
153. 6:47брутализм на какие-то кислотные оттенки
154. 6:49потому что вот такие оттенки уже
155. 6:51перестали быть чем-то особенным и
156. 6:54дофамина надо всё больше и больше из
157. 6:56людей вытягивать поэтому мы уходим в
158. 6:57какую-то там кислотную
159. 7:00историю собственно чтобы это вам
160. 7:02показать через оттенок цвета мы передаём
161. 7:08как бы Тип и количество определённой
162. 7:10энергии Ну то есть есть цвета спокойные
163. 7:13есть цвета которые дают там определённое
164. 7:16количество энергии есть цвета которые
165. 7:18максимально заряжены Ну то есть и с
166. 7:20оттенками та же самая история то есть
167. 7:22чем больше вот этот параметр Хрома
168. 7:25возможного цвета то есть насколько он
169. 7:27может ярко светить на вас через монитор
170. 7:30тем больше по сути он пытается из вас
171. 7:33дофамина вытащить и это первая штука что
172. 7:37интерфейсы с бледными цветами с цветами
173. 7:41у которых Хрома пониженная какие-то
174. 7:43тёмные оттенки они менее Энергичные
175. 7:46более спокойные вот эти более активные
176. 7:49теперь поговорим про одну такую практику
177. 7:51м ну как бы есть такой термин остранение
178. 7:54это не
179. 7:55опечатка это термин который придумал
180. 7:58Виктор шкловский
181. 7:59в 916 году для литературы то есть Суть в
182. 8:03чём вот вы читаете Войну и мир и там
183. 8:07война война война потом описание берёзки
184. 8:09там или дуба на там 10-15 страниц и так
185. 8:13далее и вы думаете что это такое вообще
186. 8:16как бы этот приём до него не
187. 8:19использовали так активно и поэтому когда
188. 8:22человек встречается с такой штукой его
189. 8:24вырывает из обычного восприятия он такой
190. 8:26Блин я проду читаю уже 15 страниц то
191. 8:29есть эта штука вырывает его из
192. 8:31автоматизма и таким образом он ну как бы
193. 8:35замечает что ваш произведение оно
194. 8:39необычное и по сути вот здесь и кроется
195. 8:42творчество в работе с цветом Как сделать
196. 8:45так чтобы цвет не был банальным потому
197. 8:48что те же самые приёмы они есть и в
198. 8:50творчестве и в изобразительном искусстве
199. 8:52и я вам советую на досуги глянуть лекцию
200. 8:54про отстранение от Виктора меламеда
201. 8:56очень интересно и вот первый наш пример
202. 9:00отстранению это остранение по
203. 9:02насыщенности смотрите все стремятся
204. 9:05делать какие-то супер Энергичные
205. 9:08кричащие Яркие цвета для этого просто
206. 9:12открывают хкс берут Вот этот самый угол
207. 9:15Самый красный цвет это есть максимально
208. 9:18яркий оттенок Но вот эти максимально
209. 9:21яркие оттенки Они самые заезженный то
210. 9:24есть по сути Если вы выбираете цвет из
211. 9:26самого угла то вы повторяете
212. 9:30миллион дизайнеров то для того чтобы
213. 9:32чуть-чуть отстраниться от миллиона
214. 9:34дизайнеров вам достаточно хотя бы искать
215. 9:36цвета в диапазоне немножечко подальше от
216. 9:39угла о безопасных зонах Ну там куда там
217. 9:42нельзя заходить или не стоит заходить
218. 9:44чтобы не получить какой-нибудь странный
219. 9:45результат мы поговорим с вами дальше вот
220. 9:47допустим в интерьерах Вот мы с Аней
221. 9:49когда общались с Мазай Она говорит о том
222. 9:52что нужно взять какой-то цвет и
223. 9:54немножечко дать ему грязи то есть
224. 9:57архитектура
225. 9:59дизайн ну исторически так сложил что он
226. 10:02идт впереди относительно каких-то дизайн
227. 10:06решений и скорее всего вы замечали моду
228. 10:09там в каких-то кафешках уже цвета
229. 10:11становятся такие бледно серые вообще вот
230. 10:14есть тренд на то чтобы всё становилось
231. 10:17какими-то там серыми оттенками Но это
232. 10:18всё потому что это возникает в
233. 10:21противовес вот этой вот дофаминовое
234. 10:24двойки который устраивают все остальные
235. 10:26бренды Возможно скоро вот эти цвета всем
236. 10:29будут надоедать и мы снова увидим
237. 10:31дизайны в каких-то Вот таких вот
238. 10:32странных оттенках но пока для
239. 10:35интерфейсов об этом говорить рано Ну вот
240. 10:38собственно разница между двумя экранами
241. 10:41здесь цвет с высокой Хромой активный
242. 10:43здесь цвет более пассивный lightness
243. 10:47этот параметр отвечает сразу за два
244. 10:50ощущения ну во-первых чем светлее тем
245. 10:53легче воспринимается дизайн чем темнее
246. 10:56тем тяжелее воспринимается дизайн
247. 10:59чем светлее а или темнее он тем
248. 11:03спокойнее И чем ярче тем он будет как бы
249. 11:07кричать насыщенность давать и так далее
250. 11:10То есть можно через lightness этого
251. 11:12добиться ваша сль можно выкручивая
252. 11:14параметр Хрома в плагин в плагине
253. 11:18который работает в ваш CL модели сегодня
254. 11:21про него тоже поговорим то есть Вот
255. 11:23видите светлые цвета такие лайтовые
256. 11:25тёмные цвета такие более как бы тягучие
257. 11:30вот обычно эти два параметра подбирают
258. 11:32одновременно Ну
259. 11:34когда ищут точку здесь на вот этой
260. 11:37цветовой панель Ну вот ещё один пример
261. 11:40То есть бледно-голубой как он работает и
262. 11:43насыщенный голубой как он работает с
263. 11:46зелёным ровно та же самая история Ну то
264. 11:48есть совершенно разное настроение Хотя
265. 11:50по сути и то зелёное и это зелёное
266. 11:53отстранение по насыщенности и яркости
267. 11:55цветов сейчас мы с вами посмотрим на
268. 11:59такую небольшую подборку цвета которую я
269. 12:01приготовил она связана с характером
270. 12:04брендо и количество энергии которое этот
271. 12:06бренд хочет передать вот смотрите
272. 12:09спокойные оттенки То есть это что-то
273. 12:13может быть монохромное либо что-то с
274. 12:16низкой яркостью какие-то такие цвета
275. 12:20приглушённые то есть они могут быть
276. 12:22пастельные могут быть немножко грязе это
277. 12:24вот собственно то М я говорил такой
278. 12:26достаточно спокойный ди
279. 12:29Мы двигаемся немножко в сторону как бы
280. 12:32увеличения энергии то здесь начинают
281. 12:33появляться цветные фоны более яркие
282. 12:37какие-то небольшие цвета сочетания
283. 12:39цветов какие-то
284. 12:41отдельные цветовые решения в чёрно-белой
285. 12:45гамме Ну то есть в общем потихонечку
286. 12:47количество энергии увеличивается вот
287. 12:50допустим здесь полностью серо-белый
288. 12:52интерфейс и в нём Начинает появляться У
289. 12:55нас потихоньку кислота Но вот в качестве
290. 12:58акцента небольшим объём если Мы
291. 13:01двигаемся ещё дальше и хотим сделать
292. 13:02активный дизайн то у нас появляется
293. 13:05больше активных цветов красных Некоторые
294. 13:08из них там не выкручивают супер ручки Но
295. 13:10вот здесь вот уже красные фоны большое
296. 13:13количество этого цвета сейчас это было
297. 13:16Чем больше мы добавляем ярких цветов и
298. 13:20повышаем контраст тем более активным и
299. 13:22вызывающим становится наш дизайн ну вот
300. 13:26видите площадь цвета тоже играет как бы
301. 13:29достаточно большое значение Мы двигаемся
302. 13:32дальше здесь становится ещё больше
303. 13:35цветных фонов они становятся всё ярче и
304. 13:37активнее всё больше акцентов и уже на
305. 13:41фоне как бы вот этого многоцветье
306. 13:43обычный белый цвет или обычный чёрный
307. 13:45цвет он даёт нам уже акцентной То есть
308. 13:49как бы у нас они меняются местами то
309. 13:52есть уже белый становится акцентом на
310. 13:54фоне ярких нов и примеры кричащего То
311. 13:59есть это когда мы начинаем выкручивать
312. 14:01ручки нарушать
313. 14:03правила делать так как никто не делает
314. 14:06ломать контраст выбирать такие цвета
315. 14:09которые обычно берут по чуть-чуть у нас
316. 14:11получается кричащий дизайн не всем
317. 14:13проектам это подходит Ну для
318. 14:16интерфейсов как минимум встречается
319. 14:18нечасто какой-нибудь там не знаю запись
320. 14:20на Рей фестиваль вам возможно позволит
321. 14:23оформить такой стори Но в основном как
322. 14:26бы это не практикуется то о ЧМ Я говорил
323. 14:28как остранение по объёму цвета то есть
324. 14:32если мы используем цвет в качестве
325. 14:34акцента на белом фоне это смотрится
326. 14:36обычно если мы делаем полноценную
327. 14:39заливку это уже
328. 14:41смотрится Ну более Странно то есть
329. 14:43иногда может быть удачно иногда как бы
330. 14:46менее удачно но тут всё зависит от
331. 14:49настроения и характера вашего бренда то
332. 14:52есть вот здесь чуть-чуть кислоты супер
333. 14:55много
334. 14:56кислоты отстранение по редкости
335. 14:59использования то есть самые популярные
336. 15:01решения - это монохромные палитры плюс
337. 15:04какой-то акцентный цвет вот допустим
338. 15:06разные оттенки синего плюс белые разные
339. 15:09оттенки серого плюс чёрные разные
340. 15:11оттенки чёрного плюс вот акцентные цвета
341. 15:14потом после них идут спокойные оттенки
342. 15:16Ну вот эти видите не очень большая
343. 15:20яркость то есть вот могут использовать
344. 15:22много разных тонов здесь уже побольше
345. 15:24побольше ещё побольше Ну как бы цвета
346. 15:28становится всё становится всё страннее
347. 15:29потом можно использовать непопулярные
348. 15:32цвета всякие болотные цветы мяса цвет
349. 15:34детской неожиданности и совсем уже
350. 15:37странные то есть кислотные какие-то
351. 15:39штуки в большом объёме отстранение по
352. 15:42контрасту то есть э в правильном как бы
353. 15:45в правильном понимании дизайна у нас э
354. 15:48объекты должны быть контрастно на фоне
355. 15:50Ну вот мы читаем чёрный текст на белом
356. 15:52фоне и всё выглядит достаточно
357. 15:55читабельно здесь Мы специально начинаем
358. 15:59нарушать потихонечку этот контраст здесь
359. 16:03может быть по чуть-чуть там какой-то
360. 16:05чёрный цвет на Акценте лежит Возможно
361. 16:08даже не проходит по стандартам вот здесь
362. 16:11вот белый на сером опять белый на сером
363. 16:14и бледно-жёлтые кнопки вот здесь вот
364. 16:17серый текст на жёлтом вот этот зелёный
365. 16:19это всё низко контрастные штуки но за
366. 16:21счёт больших размеров этой типографики
367. 16:23это работает чёрный на сером Здесь тоже
368. 16:26дополнительные такие не очень ну
369. 16:29сочетаемые как бы но достаточно сильно
370. 16:32выделяющиеся приёмы вот там оранжевое
371. 16:35какое-то пятно на таком сером чёрный
372. 16:37текст на сером там с низким контрастом
373. 16:39всё тоже и полный Трэш то есть который
374. 16:41можно использовать всё это вызывает
375. 16:44дофаминовые реакции в мозге сочетание
376. 16:47цветов я для новичков советую даже
377. 16:50Умоляю вас начинайте работать сначала с
378. 16:53монохромным палитрами то есть Возьмите
379. 16:55один какой-нибудь цвет и постройте от
380. 16:57него палитру Я сегодня покажу как это
381. 17:00сделать вот а экспериментировать можно
382. 17:02на досуге Если вы хотите сделать
383. 17:05сочетание цветов и ничего у вас не
384. 17:06останавливает берите Круг итона и
385. 17:10Работайте с ним вот есть всякие
386. 17:12треугольники равнобедренные
387. 17:14противоположные цвета соседние цвета
388. 17:16квадраты там и прочее только я вам
389. 17:18советую для интереса попробовать брать
390. 17:20не только краевые значения допустим там
391. 17:23тёмно-фиолетовый и тёмно-жёлтый или там
392. 17:25тёмно-зелёный и тёмно какую-то фуксию
393. 17:29брать бледно-жёлтый и тёмно-фиолетовый
394. 17:32там бледно синий там тёмно-синий и
395. 17:34бледно оранжевый Вот это может дать вам
396. 17:36а интересные значения если хотите ещё
397. 17:41больше интересных значений то мы с вами
398. 17:44отправляемся опять смотреть на вот такую
399. 17:47вот штуковину которую я для вас собрал
400. 17:50это такой генератор странных оттенков
401. 17:52который я сделал сам Вы можете сами
402. 17:54такой изготовить А здесь я просто беру и
403. 17:57разные режимы наложения использую для
404. 18:00картинки у которой и так супер странные
405. 18:03тона Вот видите подобрано и оно даёт мне
406. 18:07кучу разных сочетаний которые я бы в
407. 18:09жизни вручную не додумался подобрать Вот
408. 18:12видите допустим какой-то коричнево
409. 18:14бордовый с кислотой Ну вообще
410. 18:17удивительная штука вот какие-то col BL
411. 18:20решения вот это вот достаточно приятный
412. 18:22оттенок вот эти вот интересные и
413. 18:24приятные оттенки Ну для плакатов для
414. 18:27постеров для ваших работ
415. 18:29Эта штука должна отлично вам подойти
416. 18:33Кстати если мы хотим поговорить о ну
417. 18:36если вы хотите узнать Как строятся
418. 18:38родственные палитры в
419. 18:41разных в разных оттенках то Дождитесь
420. 18:44конца видео Я понимаю тяжело но там в
421. 18:46самом конце я показываю Как построить
422. 18:49палитры я одинаковые по контрасту чтобы
423. 18:52можно было использовать сразу много
424. 18:53брендовых цветов и показываю примеры где
425. 18:56ещё где ещё брать идеи в реальной жизни
426. 19:00дизайнер должен уметь вертеть головой
427. 19:03смотреть вокруг смотрить на природу
428. 19:05потому что большинство крутых оттенков
429. 19:08они на самом деле скрыты в природе
430. 19:10смотрите фильмы вот Уэс Андерсон вообще
431. 19:13мастер яркого контрастного ража у него
432. 19:17там супер много странных оттенков Ну и
433. 19:19вообще в кино очень много интересных
434. 19:22решений можно для себя почерпнуть теперь
435. 19:26перейдём непосредственно к интерфейсного
436. 19:29брендовый цвет при этом брендовый цвет
437. 19:31ещё и акцентный То есть им покрашены
438. 19:33основные элементы с которыми можно
439. 19:36взаимодействовать вот безопасные зоны
440. 19:38для выбора цветов для хекса Это где-то
441. 19:41примерно Вот такая вот Клякса чтобы мы
442. 19:44не залазить в серые зоны и брали не
443. 19:48слишком какие-то бледные оттенки не
444. 19:50слишком тёмные оттенки Почему я не
445. 19:53советую это делать вы узнаете сегодня в
446. 19:55течение всей лекции я показываю проблемы
447. 19:58при выборе бледных цветов при выборе
448. 20:00светлых цветов тёмных цветов и как
449. 20:03хорошо работать когда у нас брендовый
450. 20:05цвет яркий также следует опасаться вот
451. 20:08этой зоны это зона Color blind А это
452. 20:12такая зона в которой контраст цвета не
453. 20:15будет проходить ни на чёрном фоне ни на
454. 20:17белом фоне это такие противные цвета с
455. 20:19которыми лучше не связываться Вот и
456. 20:21плагины нам помогут не попасть в просак
457. 20:24и выбрать Такой цвет который точно будет
458. 20:26адекватен и виден всем нашим зрителям вы
459. 20:29выбрали удачный цвет если им можно
460. 20:32покрасить текст написать текст на белом
461. 20:34фоне написать им текст на чёрном фоне
462. 20:37написать на фоне этого цвета белом а или
463. 20:41чёрным текстом то есть вот если можно
464. 20:43покрасить иконку всё это супер Если вы
465. 20:46берёте Такой цвет у которого проблемы с
466. 20:48контрастом допустим вот здесь проблемы с
467. 20:50контрастом вот здесь явно будут проблемы
468. 20:52с контрастом А когда мы плагин запустим
469. 20:55это всё ещё с этим можно работать из
470. 20:57этого можно выкрутиться и Я сегодня
471. 20:59покажу как и вот цвет Color blind
472. 21:01который там ни для белого ни для чёрного
473. 21:04скорее всего контраст у нас не получится
474. 21:06ну на Чёрном может его будет видно но с
475. 21:08белым есть проблема с читабельность для
476. 21:11новичков для тех кто такой О ужас мне
477. 21:13надо прямо сейчас работать есть классное
478. 21:16решение поиск по цвету дл вот я вам
479. 21:18сейчас покажу как эта штука работает
480. 21:20открываете поиск забиваете слово
481. 21:23интерфейс Ну оно будет забито и
482. 21:26нажимаете вот здесь кнопку фильтр и
483. 21:28здесь можно выбрать прямо по оттенку
484. 21:31кучу разных работ связанных с
485. 21:33интерфейсом и вы можете прямо здесь
486. 21:35посмотреть как эти оттенки другие
487. 21:37дизайнеры используют на различных
488. 21:40макетах и насколько это вообще вам
489. 21:42нравится адекватно насколько это
490. 21:43соответствует образу то есть прежде чем
491. 21:45вы всё сами покрасите в какую-нибудь
492. 21:48палетку Гляньте вот эту подборку и может
493. 21:50быть увидите для себя какие-то идеи или
494. 21:52можете прям ну сты брить цветовую схему
495. 21:56это круто кради как художник главное не
496. 21:59кради плохие решения теперь Bad PR
497. 22:02помните когда были вообще такие иконки
498. 22:05То есть это какой-то там двенадцатый год
499. 22:07четырнадцатый год шестнадцатый год были
500. 22:11модны вот такие иконки вот такие вот
501. 22:13иконки вот такие иконки Всякая там
502. 22:16псевдо 3D какая-то вот с такой косой
503. 22:19тенью чем это всё объединяется очень бле
504. 22:23цветами тогда было модно использовать
505. 22:26вот такие цвета и сейчас Когда вы
506. 22:29используете вот такие тона сочетания вы
507. 22:33берёте и свой дизайн автоматически
508. 22:35проваливается в 2014 год вот допустим
509. 22:39как старые европейские банки так
510. 22:40выглядят Вот мой кипрский банк Bank of
511. 22:43cyprus которые используют Ну там есть
512. 22:46ещё триггеры если не смотрели сериальчик
513. 22:48вот этот из четырёх серий про
514. 22:50трудоустройство Гляньте я там
515. 22:52рассказываю про мелкие шрифты про тени
516. 22:55Вот про всю эту историю это вот как как
517. 22:58раз об этом соберёте комбо получите
518. 23:00интерфейс из 2014 года потом
519. 23:04эксперименты с многоцветной тоже часто
520. 23:06встречается у новичков Особенно тех кто
521. 23:08приходит в дизайн с намерением творить
522. 23:11красиво и креативно выбирает кучу разных
523. 23:15тонов с какого-нибудь сайта с генерацией
524. 23:17палет и просто ну бездумно красят Вот
525. 23:21эту вот историю это кстати кейс с одного
526. 23:24крупного курса вот у них на сайте был
527. 23:26раньше выложен и здесь вот такая же
528. 23:28проблема
529. 23:29только здесь
530. 23:32многоцветное грязных тонов Вот кстати
531. 23:35про грязные тона дополнительный материал
532. 23:38вот вам памятка отличная подборка иконок
533. 23:41Где на бледно коричневом каком-то
534. 23:44бежевом фоне смешиваются бледные оттенки
535. 23:47разных цветов и всё это даёт очень
536. 23:49большую грязь вот Собственно как и вот в
537. 23:52этом интерфейсе Потом следующая проблема
538. 23:54- это перебор
539. 23:57брутализм обычно Но вот этот текст
540. 24:00невозможно будет прочитать никто не
541. 24:01будет его читать как художественная
542. 24:04работа имеет право на жизнь но как
543. 24:06какое-то интерфейсного решение нет ни в
544. 24:09коем случае Ну и все такие штуки очень
545. 24:11тяжело читать как бы дизайнер сам
546. 24:13утвердился а юзеры страдает не надо
547. 24:17выкручивать все ручки на максимум
548. 24:19добавлять там заливать максимально всё
549. 24:22кислотой на кислоте писать
550. 24:25кислотой это ВС Особенно для
551. 24:27какой-нибудь там роте
552. 24:29может плохо кончиться если у вас
553. 24:31креативное агентство или Кислотный рейв
554. 24:33или какой-нибудь там
555. 24:42техножрец кислотой выглядит симпатично
556. 24:45но опять же для ежедневной работы в
557. 24:48большинстве компаний не подойдёт То есть
558. 24:50если вы свои макеты для трудоустройства
559. 24:52покрасить вот в такие тона то скорее
560. 24:54всего ну как бы работодатели чары они не
561. 24:57поймут ваше творчество и будут скипать
562. 25:00портфолио искать что-то что больше
563. 25:03похоже на то что они хотят видеть у себя
564. 25:05на работе теперь минутка практики
565. 25:08Возьмите вот этот шаблон он будет
566. 25:11ссылкой указан под видео и Попробуйте
567. 25:14придумать цвет для вот этого бренда
568. 25:17чтобы его точно принял заказчик Ну то
569. 25:19есть Исходя из ваших
570. 25:22ассоциаций подберите сам цвет который вы
571. 25:25хотите выбрать и подберите оттенок И
572. 25:27после этого Ну ADV задание для тех кто
573. 25:30хочет Попробуйте подобрать Такой цвет
574. 25:33который будет соответствовать магазину
575. 25:35свежей рыбы но будет отличаться от всех
576. 25:37других магазинов свежей рыбы то есть
577. 25:39Попробуйте придумать что-то свежее для
578. 25:42них для
579. 25:45всех Итак друзья теперь перейдём к
580. 25:48построению палитр я предлагаю вам
581. 25:50поставить видео на паузу и установить
582. 25:53вот эти плагины они нам понадобятся для
583. 25:55дальнейшей
584. 25:57работы цвета Я думаю вы видели палитры
585. 26:01крупных компаний что они насчитывают в
586. 26:03себе десятки а иногда и сотни цветов там
587. 26:07различные палетки от там
588. 26:11бледно-серый цвета и у начинающих
589. 26:14дизайнеров часто есть проблемы с тем
590. 26:16чтобы разобраться А какие из них вообще
591. 26:17надо использовать но бояться не надо
592. 26:21потому что в основе всего лежит вот
593. 26:23такая простая схема есть э пять основных
594. 26:27цветов то есть вот самое первое деление
595. 26:30- это первостепенный и второстепенный
596. 26:32primary secondary то есть primary - это
597. 26:35основной цвет акцентный secondary - Это
598. 26:37для того чтобы показать какое действие
599. 26:40на втором месте по важности и также для
600. 26:42primary и secondary есть цвета состояний
601. 26:46то есть есть цвета при наведении цвета
602. 26:48активного действия и цвета выключенного
603. 26:51действия то есть disable вот сейчас мы с
604. 26:53вами посмотрим как это работает самый
605. 26:55основной цвет который Вам нужно выбрать
606. 26:57- это primary а о нём мы говорили о его
607. 26:59значении в предыдущей части лекции и я
608. 27:03вам советую Если вы можете выбирать
609. 27:06праймери цвета брать цвет которым вы
610. 27:09можете написать текст на белом фоне и он
611. 27:11будет читаем и это будет означать что на
612. 27:13фоне этого цвета можно будет написать
613. 27:15белый текст но чаще всего Когда вы
614. 27:18приходите в компанию то брендовый цвет
615. 27:21Вам уже дают Ну основной цвет и есть как
616. 27:24бы техники которые позволяют даже если
617. 27:27ваш брендовый цвет не очень контрастный
618. 27:30им плохо писать текст как из этих
619. 27:32ситуаций выкручиваться Я сегодня покажу
620. 27:34на примере всех цветов в палитре Как
621. 27:37работать Какого цвета красить ссылки Что
622. 27:40делать с текстами Но если даже Вам этой
623. 27:42лекции не хватит то вы сможете прочитать
624. 27:45вот эти статьи Когда я работал White
625. 27:47clients я делал цветовые схемы
626. 27:49генеративные Поэтому вот здесь вот я как
627. 27:51раз девушке передаю информацию при
628. 27:53увольнении о том как поступать если ваш
629. 27:56основной Цвет белый бледно-жёлтый ледно
630. 27:58розовый и так далее смотрите несколько
631. 28:01основных поинтов первое то что у вас
632. 28:03есть цвет праймери первостепенный а цвет
633. 28:06секондари второстепенный Он должен быть
634. 28:09как минимум на 50% менее активным то
635. 28:13есть его вес в иерархии должен быть
636. 28:15меньше на 50% при этом у нас сохраняется
637. 28:19акцент на цвете текста это очень важно
638. 28:22Вот посмотрите я взял фон который даже
639. 28:24намного больше намного более прозрачный
640. 28:27чем вот этот больше чем 50% но при этом
641. 28:29с помощью текста сохранил активность
642. 28:32этой кнопки А disable в свою очередь
643. 28:34делается похожим образом вы можете взять
644. 28:37кнопку наложить на неё 30-40 про
645. 28:40непрозрачности И вот так вот будет
646. 28:42выглядеть состояние disable и потом уже
647. 28:45от вот этой непрозрачности вы подберёте
648. 28:47цвета и у вас получится Вот что-то такое
649. 28:49здесь самое важное что Что даёт йб
650. 28:53кнопки ей даёт ленность именно
651. 28:56неактивность текста третий принцип
652. 28:58который нам надо усвоить - это принцип
653. 29:00повышения контраста то есть для того
654. 29:02чтобы вам показать разницу между
655. 29:04неактивным и активным состоянием вы
656. 29:07используете повышение контраста Как
657. 29:09повышать контраст и визуальный вес с
658. 29:11помощью цвета было бледнее стало ярче
659. 29:14было меньше по площади цвета стало
660. 29:17больше по площади цвет вот вам пример
661. 29:19условно там не залитая иконка контурная
662. 29:23залитая иконка плюс цвет а или серый
663. 29:26превратился в чёрный и так далее серый
664. 29:29может превращаться в брендовый Ну по
665. 29:30тому же самому принципу Вот как это
666. 29:32работает в табах здесь ещё подчёркивание
667. 29:35добавляется дополнительно показывая что
668. 29:37эта штука активная Ну и здесь то же
669. 29:39самое и с кнопкой Есть огромное
670. 29:43количество разных стилей для кнопок
671. 29:45которые вы можете нарисовать в дизайне И
672. 29:47самое главное Вот смотрите я вам
673. 29:49показываю здесь несколько вариаций
674. 29:51просто по уменьшению вот этого
675. 29:54визуального веса то есть здесь всё ещё
676. 29:56площадь здесь меньше площади цвета но
677. 29:58цвет активный здесь меньше площади цвета
678. 30:00но цвет пассивный и совсем Ghost Button
679. 30:03у которой площадь цвета Вообще
680. 30:05минимальна четвёртый принцип который нам
681. 30:07надо понять То есть как конкретно В
682. 30:10какие цвета красить состояние чтобы было
683. 30:13Точно видно что что-то происходит то
684. 30:16есть вообще о состояниях немножко зачем
685. 30:17они нужны они нужны для того чтобы
686. 30:20показать в интерфейсе Какие элементы
687. 30:23готовы для взаимодействия то есть на
688. 30:26десктопе У нас есть Когда вы наводите
689. 30:29мышь на элемент то этот элемент вам
690. 30:32немножко отвечает то есть меняет
691. 30:34немножко свой оттенок при этом это не
692. 30:36должна быть какая-то супер ввела история
693. 30:39то что там она была белой стала чёрной
694. 30:41как в веб-дизайне это часто делают
695. 30:43потому что тогда человек при Ну допустим
696. 30:46в интернет-магазине где много кнопок он
697. 30:48будет проводить мышкой и у него будут
698. 30:50вот так вот светиться загораться вот эти
699. 30:52кнопки и это будет грязно выглядеть вот
700. 30:55поэтому обычно мы делаем так принцип
701. 30:57плюс один или вот в скобочках видите мис
702. 30:59оди а если мы возьмём цвет скажем вот
703. 31:03500 из середины для того чтобы показать
704. 31:06его активность ховеров плюс один оттенок
705. 31:09то есть было 500 стало 600 если нам
706. 31:11нужно показать ещё и активное состояние
707. 31:15то тогда это будет плюс ещё плюс один
708. 31:17оттенок То есть получается 500 600 700 и
709. 31:20точно такое же Принцип если мы берём
710. 31:23допустим цвет не 500 а 300 то есть мы к
711. 31:26300 прибавляем один и потом прибавляем
712. 31:28ещё один вот смотрите ещё какой
713. 31:31интересный момент для Серова естественно
714. 31:33тоже самое И точно также это работает в
715. 31:36обратную сторону то есть если у вас
716. 31:39праймери цвет - это какой-нибудь 950 или
717. 31:42900 вам в ту сторону двигаться некуда
718. 31:44может быть Ну то есть Может быть ваш
719. 31:46цвет достаточно тёмный и не получится
720. 31:50двигать его ещё более в темноту тогда мы
721. 31:52не прибавляем единицу а наоборот
722. 31:54отнимаем то есть мы показываем что вот
723. 31:57это будет У нас primary вот это будет
724. 31:59Hover А вот это вот будет Active и тот
725. 32:01же самый принцип используется для тёмной
726. 32:03темы потому что там кнопки ну и элементы
727. 32:06Они часто должны становиться ярче а не
728. 32:09темнее потому что темнее уже некуда они
729. 32:10наоборот будут проваливаться перейдём к
730. 32:12нашей практике построение палитр разных
731. 32:15оттенков так Перед тем как мы начнём с
732. 32:17вами раскрашивать интерфейсы надо
733. 32:21поговорить о доступности в основном
734. 32:24когда мы говорим про доступность мы
735. 32:25говорим про доступность текста и
736. 32:27каких-то
737. 32:28графических элементов активных то есть
738. 32:31Наша задача чтобы эти элементы были
739. 32:34хорошо видны на фоне с которым мы
740. 32:37работаем Ну то есть вот Представьте что
741. 32:39вот эта круглая штука - это кнопка
742. 32:42и на этой кнопке написан текст 4 с поно
743. 32:46и если вот этот текст Ну как видите
744. 32:48зелёный на зелёном будет бледно зелёным
745. 32:51то люди с нарушениями зрения Они не
746. 32:54смогут его просто прочитать им придётся
747. 32:56напрягаться там приближать компютер
748. 32:58надевать там ещ двойные очки и так далее
749. 33:01То есть есть самый первый базовый
750. 33:04стандарт VC Ну как бы на него можно
751. 33:06ориентироваться но он достаточно жёсткий
752. 33:09и с тех пор как его выпустили вторую
753. 33:12версию по-моему лет сть уже не обновляли
754. 33:14вышли новые мониторы и поэтому с этим
755. 33:17стандартом есть определённые проблемы То
756. 33:20есть вот правило по этому стандарту Ну
757. 33:22то есть если вы по нему сделаете то там
758. 33:23точно все увидят Вот но не факт что это
759. 33:26будет красивы дизайн по сути для того
760. 33:29чтобы у вас получилось вы используете
761. 33:31плагин контраст и просто смотрите
762. 33:35насколько у вас контрастная эта штука
763. 33:37вот должно быть либо Аа либо Аа Но если
764. 33:41у вас ваш дизайн который вы хотите не
765. 33:44проходит по вот этим стандартам это не
766. 33:47значит что всё пропало там ничего не
767. 33:50будет работать конверсия провалится Ну
768. 33:53как бы не факт да людей с нарушениями
769. 33:56зрения около ЛР из 8 миллиардов но
770. 34:00нарушения зрения бывают разные во-первых
771. 34:02то
772. 34:03есть текст по вот этому стандарту по VC
773. 34:06увидят точно все даже с Ну типа там с
774. 34:09большими проблемами со зрения но при
775. 34:11этом чтобы вы понимали что можно
776. 34:14сохранить какие-то свои идеи и красоту
777. 34:16что чем меньше у вас будет контраст Ну
778. 34:19какие-то люди Они будут отваливаться не
779. 34:21будут видеть нормальный ваш дизайн Им
780. 34:23будет сложнее то есть здоровые люди
781. 34:25будут видеть текст при расть даже 31 но
782. 34:29при этом Ну как бы есть ребята которые
783. 34:32такие вот контраст чекера там это супер
784. 34:33важно Ну такая позиция как бы нельзя в
785. 34:36том числе слепо доверять им Потому что
786. 34:40vcg насколько я помню не учитывает
787. 34:42именно параметр текста то есть плотность
788. 34:46размеры жирность и прочее он вот чисто
789. 34:48текст на цвет с цветом сравнивает и в
790. 34:50результате получает вот такие вот баги
791. 34:53что допустим чёрный текст на оранжевом
792. 34:56фоне вот плохо читается у него А белый
793. 35:00текст на оранжевом фоне отлично читается
794. 35:02но при этом он фейлит результаты то есть
795. 35:04вот эти глюки надо учитывать что ну как
796. 35:08бы глазам Своим тоже надо доверять не
797. 35:10только технике я вам советую применять
798. 35:13вместо VC алгоритм АК не знаю Мне
799. 35:17нравится так читать Вот есть для этого
800. 35:19несколько плагинов которые могут вам в
801. 35:22этом помочь по умолчанию Я всегда
802. 35:24использовал контраст Когда вы наводите
803. 35:27на
804. 35:28определённый элемент который стоит на
805. 35:29фоне он вам показывает то есть для
806. 35:31какого размера элементов если навести
807. 35:35там будет ещё и конкретные размеры
808. 35:36указаны подходит вот э история Ну вот
809. 35:39как видите контекст Ботек с этим
810. 35:41достаточно сложно разобраться в этом
811. 35:43плагине то есть он удобный Но если вы
812. 35:45как бы знаете о чём он вам говорит я вам
813. 35:48советую чуть менее Юза Бель плагин
814. 35:51потому что у него нет своей пипетки и
815. 35:53автовыбор сюда надо
816. 35:55вставлять код цвета но при этом вот для
817. 35:58начинающих Он отлично объясняет в чём
818. 36:01дело то есть как видите здесь вот слева
819. 36:03показаны плотности а справа показано При
820. 36:06каком размере текста это ок или не ок и
821. 36:10причём видите здесь есть красная жёлтая
822. 36:12и Зелёная зона То есть он показывает что
823. 36:14да м ну вы доводите цвет до такого
824. 36:18контраста для для чёрного там и для
825. 36:20белого вот здесь вот можно посмотреть
826. 36:22чтобы Вы могли понять ну насколько
827. 36:25вообще в процентах
828. 36:28будут видеть этот текст при нужной
829. 36:29плотности нужном размере или нет то есть
830. 36:31вот можете использовать этот плагин для
831. 36:33проверки но я вам сегодня всё ещё это
832. 36:35покажу и ещё есть один удобный плагин о
833. 36:38col у него встроенный контраст чеке То
834. 36:41есть можно пользоваться им как для
835. 36:45подбора цветов и плюс он сразу
836. 36:47показывает вот уровень контраста
837. 36:49Насколько должно быть это всё хорошо вот
838. 36:51здесь вот кстати в этом плагине Вы
839. 36:52можете посмотреть рекомендации если
840. 36:54нажмёте на буковку и и там будет
841. 36:56написано там как Какие минимальные
842. 36:58параметры Ну там для разного размера для
843. 37:00разных цветов параметры будут изменяться
844. 37:03поэтому каких-то единых стандартов тут
845. 37:05нет мы начнём с вами
846. 37:07работать с цветами строить палитру с
847. 37:11серого цвета потому что серый цвет в
848. 37:13интерфейсе это база так как у нас дизайн
849. 37:17интерфейсный поэтому мы стараемся
850. 37:20акцентные цвета и какие-то яркие цвета
851. 37:24использовать только по делу чтобы у нас
852. 37:27это всё не превратилось в какой-то
853. 37:28цветастый зоопарк и серый цвет Нам очень
854. 37:31сильно в этом помогает для того чтобы
855. 37:32сделать в принципе весь интерфейс более
856. 37:35лёгким воздушным чистым и как бы
857. 37:37расставить корректный акцент начнём с
858. 37:40серой палитры и со световой
859. 37:43темы вот смотрите ваша задача сегодня
860. 37:46построить вот такую палитру как мы будем
861. 37:50это делать во-первых нам нужно получить
862. 37:53базовый цвет от который от которого
863. 37:55строит палитру То есть он должен быть у
864. 37:57вас где-то посередине и от него
865. 37:59рассчитывается вверх и вниз светлые и
866. 38:02тёмные оттенки я вам советую цвет вот
867. 38:04такой ше деяк очень просто запомнить как
868. 38:07его получить в домашних условиях если вы
869. 38:09забыли код вы берёте чёрный и просто
870. 38:13накладывается на
871. 38:15него
872. 38:1740% непрозрачности то есть вот здесь
873. 38:22потом берёте пипетку снимаете и вот у
874. 38:24вас получается этот цвет Всё просто
875. 38:28потом когда мы вот этот цвет получили Мы
876. 38:31открываем плагин Cover shades Вот видите
877. 38:34такой замечательный плагин копируем туда
878. 38:38наше
879. 38:39значение и у нас получается вот такая
880. 38:41палитра которая соответствует по сути
881. 38:43тому что я вам здесь вот справа
882. 38:45нарисовал я вам советую именно эту
883. 38:47палитру Но она как бы не единственная То
884. 38:51есть если вы хотите немножко потемнее
885. 38:54немножко посветлее то вам надо изменить
886. 38:57этот базовый цвет То есть как его можно
887. 39:00поменять Ну допустим Вы можете
888. 39:02экспериментировать допустим поставить
889. 39:0450% прозрачности вот хотите чтобы
890. 39:06потемнее было
891. 39:08покон опять же берёте
892. 39:11пипетку
893. 39:13ставите у вас здесь вот видите немножко
894. 39:16палитра поменялась она стала потемнее
895. 39:18Вот
896. 39:20видите и также е здесь есть
897. 39:24параметры поте пое вам менять Оставьте
898. 39:28дефолтный там 58 или 60 даже 58 этого в
899. 39:32принципе достаточно также этой штукой
900. 39:35можно пользоваться для того чтобы
901. 39:36строить другие серые палитры но я вам не
902. 39:38советую с помощью этого плагина строить
903. 39:40цветные палитры дальше про это расскажу
904. 39:42вот смотрите у нас получилась Вот такая
905. 39:44штука но у вас на ней не будет вот этих
906. 39:47подписей когда вы в плагине сгенерить А
907. 39:49чтобы забрать вот эту историю с
908. 39:52подписями нужно будет просто под ссылкой
909. 39:54видео перейти в Бота и он вам выдаст Все
910. 39:57материа который к этой лекции
911. 39:59прилагаются в том числе там для подбора
912. 40:01цветов и прочее все файлы которые я
913. 40:03показываю и все которые позже нарисую
914. 40:05они будут лежать там в фигме смотри с
915. 40:08чего мы начинаем мы начинаем всегда с
916. 40:09текста И как я уже говорил нам нужно Ну
917. 40:13вот для нашего для основного текста Ну
918. 40:16вот Second
919. 40:18сделать подобрать
920. 40:21оттенок мы
921. 40:23делаем первый принцип Для текста
922. 40:27сочетание его с иконками Если у вас есть
923. 40:30Линейная иконка outline она должна быть
924. 40:33Такого же цвета и примерно такой же
925. 40:35толщины как Текст какой выбрать цвет для
926. 40:38текста я не советую вам выбирать чисто
927. 40:41чёрный вот этот
928. 40:4300 потому что это создаёт избыточный
929. 40:46контраст там есть такой эффект что когда
930. 40:48контраст слишком высок то текст начинает
931. 40:51расплывались
932. 40:57чёрному или даже более серый Вот я
933. 41:00допустим возьму вот этот цвет Ну девятый
934. 41:04вот у нас получился вот такой как бы
935. 41:07чёрный но не чёрный теперь нам нужно
936. 41:09покрасить иконку которая стоит рядом с
937. 41:12текстом залитую и я не могу её покрасить
938. 41:15прямо в тот же самый цвет Потому что
939. 41:17если я это сделаю вот
940. 41:19смотрите она выглядит темнее чем текст и
941. 41:25будет выделяться очень сильно
942. 41:27а нам нужно их примерно уравновесить по
943. 41:30оттенкам чтобы они красиво стояли рядом
944. 41:33для отдельно стоящей иконки Конечно
945. 41:35можно её покрасить просто в тот же самый
946. 41:37цвет текста Но если она рядом с текстом
947. 41:39то мы применяем вот такую штуку отнимаем
948. 41:42один оттенок наш оттенок
949. 41:45девять Давайте поставим 8 с
950. 41:49поно И теперь они как бы видите
951. 41:52отличаются этот чуть-чуть светлее этот
952. 41:53чучуть темнее но вдвоём они выглядят
953. 41:56гармоничнее теперь проделаем Ту же самую
954. 41:58операцию для secondary T по Second
955. 42:01тексту То есть как подобрать цвет чтобы
956. 42:05получить вот такую вот историю и чтобы
957. 42:07это было красиво у
958. 42:10нас сечас у нас secondary должен быть
959. 42:13бледнее примерно на 50-40 про чем
960. 42:16основной мы
961. 42:19берём и просто
962. 42:21делаем не прозрачно здесь 50 если вас
963. 42:24Такое устраивает оставляйте так или може
964. 42:27делать непрозрачность 40 тоже будет
965. 42:29читаться И теперь нам нужно подобрать к
966. 42:33вот этому Серому цвету который у нас
967. 42:34получился оттенок в нашей палитре Ну это
968. 42:38как раз вот как видите наш уже знакомый
969. 42:40цвет шесть девяток он у нас ровно в
970. 42:43середине Поэтому я буду использовать
971. 42:46его выделяя опять Линейная иконка и
972. 42:49текст красится в оттенок номер
973. 42:53п чтобы вот эта штука у нас была по весу
974. 42:58вот этому оттенку значит я беру здесь 4
975. 43:03ми всё вот так хорошо
976. 43:08теперь тоже мы
977. 43:10строим
978. 43:12состояние чуть-чуть
979. 43:14по чуть-чуть по бледнее чем вот это То
980. 43:17есть он должен быть ещё бледнее чем
981. 43:19Чтобы показать что он совсем не
982. 43:21работает С это приме
983. 43:28э и эти е бледнее есть вы можете
984. 43:31смотреть в зависимости от того Наско
985. 43:33тный цвет выбрали иногда это может быть
986. 43:3430 20 или
987. 43:3840%
988. 43:4040т вот ну возьмём 30 чтобы это хотя бы
989. 43:43можно было
990. 43:46прочитать и для вот этого цвета у нас
991. 43:49Самый подходящий это ну вот э вот
992. 43:53тройка я беру опять иконку текст
993. 43:59троечку ну вот видите они достаточно
994. 44:01похожи по яркости Ну и вот это
995. 44:03естественно минус оди То есть это будет
996. 44:13двоечка Вот примерно первая часть работы
997. 44:16уже сделана но вы скажете А где все
998. 44:18остальные состояния кроме А сейчас мы их
999. 44:21тоже
1000. 44:21сделаю Итак ссылки Представьте что мы
1001. 44:25работаем сейчас с м ЧМ Ну вот как у ра
1002. 44:29например и нам нужно сделать ссылки мы
1003. 44:31же не можем сделать там синие ссылки или
1004. 44:33какие-то если у нас весь интерфейс
1005. 44:35чёрно-белый поэтому Чтобы показать что
1006. 44:38это ссылка а не просто текст его
1007. 44:40выделяют жирным Вот давайте мы с вами
1008. 44:43покрасим для начала этот текст в наш
1009. 44:46основной
1010. 44:48цвет это его дефолтный цвет потом нам
1011. 44:52нужно сделать для него Ну для ссылки
1012. 44:58мы должны прибавить один оттенок Давайте
1013. 45:00попробуем у нас основной текст это де
1014. 45:05вот прибавим Ну даже Давайте прибавим
1015. 45:06вот до 10 два прибавим
1016. 45:09оттенка что-то не видно особо никакой
1017. 45:12разницы и наверное даже если я вообще в
1018. 45:14чёрный цвет уведу полностью то тоже
1019. 45:17особой разницы не наблюдаю Ну то есть
1020. 45:20это очень сложно
1021. 45:21распознать пому Прив абот
1022. 45:28отнимем ну для начала Ну давайте даже
1023. 45:30сразу не единичку отнимем потому что
1024. 45:32чёрный с чёрным достаточно сложно
1025. 45:35показать разницу отнимем два вот у нас
1026. 45:37было дев о станет
1027. 45:43во Ну вот это уже более заметно Вот это
1028. 45:46можно использовать если вам нужно ещё
1029. 45:48более заметный хове на ссылке Вы можете
1030. 45:50ещё немножко отступить то есть здесь нам
1031. 45:53придётся ориентироваться на оттенки Ну
1032. 45:56то есть шагать на 11 пока вы не
1033. 45:58увидите что вот есть чёткая разница
1034. 46:01между вот этими двумя цветами Можете
1035. 46:03даже собрать небольшой прототип чтобы
1036. 46:05посмотреть как это при наведении
1037. 46:07выглядит
1038. 46:09и для ссылки всё тоже самое просто беру
1039. 46:12Вот этот
1040. 46:13текст всё он нам как бы
1041. 46:16подходит
1042. 46:19теперь то есть смотрите у на есть сы для
1043. 46:21личных документов вотре
1044. 46:25таки для них обычно Чтобы показать что
1045. 46:28это ссылка их ещё подчёркивают но в
1046. 46:32мобильных приложениях не очень уважают
1047. 46:35подчёркивание поэтому как бы у нас есть
1048. 46:37вот два варианта всегда такая и такая Ну
1049. 46:39кстати для ли документов в мобильных
1050. 46:41приложениях подчёркивание тоже использу
1051. 46:44берём здесь наш secondary
1052. 46:47цвет и для того чтобы эта штука у нас
1053. 46:52при наведении как-то показывал что она
1054. 46:54работает ещ кстати Бывает такое что
1055. 46:57с бывает без
1056. 46:58наведения ну без наведения не имеет
1057. 47:01подчеркивания а при наведении оно
1058. 47:02появляется но тут опционально это
1059. 47:04зависит от стиля вашего конкретного
1060. 47:06проекта Давайте добавим плюс
1061. 47:10о цвет у нас п это будет
1062. 47:156 Ну вот вполне достаточно для того
1063. 47:18чтобы показать что эта штука активная то
1064. 47:21есть прием УВМ то уем то
1065. 47:27д шага чтобы было видно то есть просто
1066. 47:30разные оттенки имеют разный контраст и
1067. 47:33поэтому там для синего цвета достаточно
1068. 47:35одного шага вот для чёрного нужно
1069. 47:37побольше
1070. 47:38фоны обязательно белый фон мы имеем вот
1071. 47:42просто вот такой цвет шесть Буково F
1072. 47:45полностью белый и ещё более глубокий фон
1073. 47:48для того чтобы на нём можно было белом
1074. 47:50делать
1075. 47:52подложки Этот цвет в диапазоне от
1076. 47:57до F5 F5
1077. 47:58F5 что это за диапазон и как в него
1078. 48:01попасть вот смотрите Я выбрал F5 F5 F5 и
1079. 48:05начиная на клавиатуре если я вниз буду
1080. 48:08нажимать на кнопочку вниз на стрелку то
1081. 48:11у меня фон
1082. 48:12темнеет А если я вверх буду нажимать то
1083. 48:16у меня фон светлеет и вот есть
1084. 48:20FA и вот диапазон оттуда вот я просто
1085. 48:23тыкаю до
1086. 48:24F5 проверять мы будем на макетах просто
1087. 48:28Ну вот этот совсем цвет я вам не советую
1088. 48:31часто использовать потому что на нём
1089. 48:32белый может теряться вам там
1090. 48:33дополнительные тени придётся подключать
1091. 48:35вот этот цвет на нём оптимально выглядит
1092. 48:38белый с достаточным контрастом теперь
1093. 48:41борде борде должны быть э достаточно
1094. 48:45бледные я вам советую брать цвет
1095. 48:50единичку или полтора Если в вашем макете
1096. 48:53прям совсем ничего не видно
1097. 48:57то есть берём вот так вот единичку вот
1098. 49:00эту
1099. 49:01штуку если полтора ставим плюс
1100. 49:04оди кажется что разницы большой нет
1101. 49:07Давайте ещё единичку добавим два вот
1102. 49:11сейчас уже видно на глаз разницу это хор
1103. 49:14и активный цвет у нас такой же как
1104. 49:18брендовый Ну то есть здесь у нас
1105. 49:20основной цве это вот этот
1106. 49:23детка вот
1107. 49:27те Я честно признаюсь про себя что яхте
1108. 49:31вот мне не нравится материал дизайн Как
1109. 49:33выглядит с вот этими вот тенями и
1110. 49:35прочими штуками я уважаю тени трёх видов
1111. 49:40Вот это первая такая тень Бордер у неё
1112. 49:45параметры БР 12 прозрачность То есть она
1113. 49:49заменяет Бордер вот когда вам нужно
1114. 49:51сделать Дин такой максимально воздушный
1115. 49:53бело на белом вот може использовать
1116. 49:55такую ию
1117. 49:57жёсткой
1118. 49:58грани такая же тень но размытая то есть
1119. 50:02здесь BL 52 размытость уже
1120. 50:066 и тень из реального мира тоже мне
1121. 50:09очень нравится смотрите что за тень из
1122. 50:11реального мира когда мы освещаем
1123. 50:13какой-то
1124. 50:15объект то от него тень падает в
1125. 50:19определённую сторону
1126. 50:21правильно И вот почему мнете ие потому
1127. 50:26здесь тень падает во все стороны такое
1128. 50:30такого в реальном мире не бывает как бы
1129. 50:32вот поэтому вот эти мне не очень
1130. 50:36нравится можно вот использовать вот
1131. 50:38такие но они достаточно сложные потому
1132. 50:40что здесь нужно задействовать спред
1133. 50:41Здесь спред мину 20 BL 20 есть смещение
1134. 50:45и
1135. 50:476% но здесь чтобы эта штука заработала
1136. 50:51нужно ещ делать обводку потому что если
1137. 50:53обводки не будет то у нас потеряется два
1138. 50:56вот этих вот угла поэтому я добавляю
1139. 50:59обводку её цвет такой же как фон наш
1140. 51:04бэкграунд Поехали дальше теперь самое
1141. 51:07сложное мы с вами сейчас будем
1142. 51:10раскрашивать кнопки по
1143. 51:12состояни начнём с праймери основной цвет
1144. 51:16у нас девятка хове к нему Это плюс
1145. 51:20один ну Давайте
1146. 51:25попробуем ну вот даже
1147. 51:28десятка но как видите не особо видно я
1148. 51:32бы наверное отнимал чтобы было больше
1149. 51:35заметно давайте отнимем от 9 8 с
1150. 51:43поно Давайте даже ещё один отнимем
1151. 51:49вос Да вот так вот более
1152. 51:53заметно активный в момент
1153. 51:57момент работы самой кнопки
1154. 51:58непосредственно Ну Hover Press я вот
1155. 52:00кстати объясню вам вот этот нюанс на
1156. 52:02десктопе У вас есть состояние default То
1157. 52:05есть когда кнопочку никто не трогал
1158. 52:07Hover Когда вы на неё наводите мышкой и
1159. 52:10Active - это в момент клика То есть она
1160. 52:12должна становиться ещё
1161. 52:15отличаться на мобилке такой истории нет
1162. 52:18поэтому вот здесь вот через СШ написано
1163. 52:20Hover pressed потому что на мобилке вам
1164. 52:23не нужно три состояния вы делаете одно и
1165. 52:26когда нажимаете у вас немножечко
1166. 52:29меняется цвет кнопочки То есть Вам
1167. 52:31третье не нужно ещё бледнее делать Ну
1168. 52:33либо Вы можете делать вот это плюс вот
1169. 52:35это то
1170. 52:35есть самое самое главное что там просто
1171. 52:38два состояния а не три и
1172. 52:41disable Давайте посмотрим какой должен
1173. 52:43быть йл Вот примерно там
1174. 52:4530% ну я считаю что это даже дофига
1175. 52:48потому что кнопка выглядит Ну достаточно
1176. 52:50активный значит для такого тёмного цвета
1177. 52:53надо ещё больше её уводить вниз
1178. 52:57Давайте посмотрим какой Мы можем взять
1179. 52:59цвет Для этого ну вот у нас есть цвет
1180. 53:01фона Я всегда советую с него начать То
1181. 53:03есть это прикольно не надо плодить
1182. 53:05цветов вот допустим у вас цвет фона
1183. 53:08текст мы не можем оставить белый Потому
1184. 53:10что его вообще не видно мы его
1185. 53:26вот для такой кнопки сделать
1186. 53:28прозрачность 30% вот так вот будет
1187. 53:32выглядеть Вот давайте поищем Что за цвет
1188. 53:34у нас может быть похож на вот этот
1189. 53:40вот так не так не получится Вот так вот
1190. 53:43рядом Ну вот четвёртый Мне кажется
1191. 53:45похож Давайте
1192. 53:55попробуем в принципе да можно даже ещё
1193. 53:59чуть-чуть убавить попробовать вот три
1194. 54:00если я
1195. 54:03поставлю Ну вот этот вот Отличный вообще
1196. 54:06дальше следующее вот эта кнопка должна
1197. 54:08быть менее
1198. 54:09активной Поэтому мне надо сделать что я
1199. 54:15возьму тоже наверное попробую
1200. 54:18сначала цвет
1201. 54:25фона ставлю на ней
1202. 54:27текст девятку тут цвет фона
1203. 54:32плюс
1204. 54:35девятка соответственно если мне нужно
1205. 54:39сделать хор то я добавляю плю о к фону
1206. 54:44было 05 стало
1207. 54:47о а у меня тут даже рядом есть
1208. 54:51палитра если мне надо сделать активное
1209. 54:54состояние ещ плюс оди то есть Вот
1210. 54:56давайте
1211. 54:58полтора и disable Как видите я уже
1212. 55:01построил я могу просто заменить её и всё
1213. 55:06то есть вот вот так вот мы работаем У
1214. 55:09Second может быть могут быть разные
1215. 55:11стили то есть я могу построить primary п
1216. 55:14secondary Вот
1217. 55:18так и будет понятно что вот это
1218. 55:20первостепенная это второстепенная могу
1219. 55:23построить primary п Second вот так
1220. 55:26используя всего один цвет никаких серых
1221. 55:28оттенков То есть это тоже понятно Это
1222. 55:31зависит от вашего стиля у нас там внизу
1223. 55:33есть макеты для тестов мы с вами потом
1224. 55:35выберем Какая кнопка нам больше подойдёт
1225. 55:37но здесь у нас везде используется наш
1226. 55:41основной цвет смотрите короче есть два
1227. 55:43основных способа работы
1228. 55:47с вот этими кнопками с обводкой
1229. 55:49Первое - это ну изменять обводку толщину
1230. 55:53допустим там сделать не единицу а две
1231. 55:55Измени немножко оттенок но я вам покажу
1232. 55:58такой лайтовый способ который мчится с
1233. 56:01нашим общим решением мы фон кнопки
1234. 56:05которая у нас ну вот просто просто вот
1235. 56:09даже смотрите Я вот её
1236. 56:12копирую вот здесь вот заменяю То есть
1237. 56:14это такая же кнопка и я просто ей
1238. 56:17добавляю
1239. 56:18фон вот такой минимальный самый-самый
1240. 56:21бледный который у вас есть самый бледный
1241. 56:24фон в палитре
1242. 56:26то есть вот это получилось
1243. 56:310,5 плю
1244. 56:339 то есть вот такая же кнопка только с
1245. 56:36обводкой и видите То есть получается что
1246. 56:38здесь это у меня первое состояние и вот
1247. 56:40эти штуки были темнее А здесь это второе
1248. 56:44состояние То есть получается что у вот
1249. 56:46этого будет фон вот
1250. 56:50такой
1251. 56:54п9 всё
1252. 56:56а для того чтобы
1253. 56:59сделать мы берём Вот эту вот историю
1254. 57:02сначала Лим
1255. 57:04текст у нас он уже есть выбран и обводку
1256. 57:09по сути Ну по тому же принципу тоже
1257. 57:12Такого же цвета как текст то есть Видите
1258. 57:15вот эта кнопка вот э она же не
1259. 57:17активная теперь третье степенная кнопка
1260. 57:20То есть это как вот это только е меньше
1261. 57:23на не
1262. 57:25акн цвет нашего
1263. 57:31бордера а активный цвет оставим такой же
1264. 57:35как у
1265. 57:37всех то есть здесь
1266. 57:41получится 0,5
1267. 57:44п
1268. 57:459 Ну 0,5 - Это фон Ну цвет обводки а
1269. 57:50девятка - это эта
1270. 57:52штука потом для того чтобы нам
1271. 57:58делать как бы залитую историю то мы
1272. 58:01повторяем Просто всю операцию тоже самое
1273. 58:04как с вот этой кнопкой то есть мы
1274. 58:07добавляем р видите у нас даже небольшая
1275. 58:11обводка есть но это всё равно это
1276. 58:12симпатично выглядит и вот здесь мы тоже
1277. 58:16добавляем
1278. 58:17фон чуть-чуть потемнее на один оттенок
1279. 58:26уже и так достаточно бледная обводка
1280. 58:29Наша задача просто текст
1281. 58:30залить мы его
1282. 58:33дибли всё вот у нас получается такая
1283. 58:35штука ещё что у нас может быть из серого
1284. 58:39цвета в плане кнопок У нас есть Ну
1285. 58:43сейчас модно стало делать белые кнопки
1286. 58:46на сером фоне поэтому Давайте белый фон
1287. 58:50цвет текста активный девятка
1288. 58:57потом нам нужно сделать хове и поэтому
1289. 58:59мы пытаемся добавить плюс оди то есть
1290. 59:02вот этот цвет у нас Ноль вот этот цвет у
1291. 59:05нас должен быть по идее 0,5 но у нас фон
1292. 59:07цвета 0,5 поэтому мы ещё добавляем
1293. 59:11единичку вот правильно здесь вот был
1294. 59:14ноль
1295. 59:17единичка и когда он
1296. 59:20активный полтора 0 о полтора
1297. 59:28и чтобы
1298. 59:29сделать кнопку У нас есть тоже тут два
1299. 59:33варианта вот можем взять белую и просто
1300. 59:36зади
1301. 59:39текст Ну вот в принципе она уже выглядит
1302. 59:43как нерабочая
1303. 59:44но можно попробовать и вот такую
1304. 59:50поставить То есть она вообще будет без
1305. 59:53фона неработает
1306. 59:56Давайте попробуем покрасить наш макет в
1307. 59:59выбранные
1308. 1:00:00цвета то есть
1309. 1:00:03тексты надо все покрасить в
1310. 1:00:09Девятку все второстепенные
1311. 1:00:17тексты мы красим в наш secondary
1312. 1:00:23цвет кнопочки меняем и сечас вот будем
1313. 1:00:26тестировать кнопки ну фон
1314. 1:00:29Граунд здесь фон
1315. 1:00:33белый что у нас тут осталось у нас тут
1316. 1:00:36есть
1317. 1:00:37бордера активные и неактивные вот
1318. 1:00:40Давайте ещё заменим все цвета бордеро
1319. 1:00:44сразу и я вам там покажу несколько
1320. 1:00:53нюансов вообще Бордер можно сделать
1321. 1:00:55двумя
1322. 1:00:56способами Если у вас есть цветной фон то
1323. 1:01:01смотрите что я могу сделать я могу
1324. 1:01:03нарисовать этот Бордер прямо поверх Как
1325. 1:01:06видите он темнее
1326. 1:01:08фона иначе Его не будет видно потому что
1327. 1:01:10он очень
1328. 1:01:11тонкий Но я могу вообще не использовать
1329. 1:01:16Бордер вот здесь вот видите нет бордера
1330. 1:01:19это просто просто отступ но здесь отступ
1331. 1:01:23два то есть тонкий тёмный толщиной оди
1332. 1:01:27или такой же потолще но Ну вот толщиной
1333. 1:01:30два То есть вы можете варьировать Вот
1334. 1:01:32эту историю чтобы сделать что-то более
1335. 1:01:35заметным вы можете либо цвет прибавить
1336. 1:01:37либо площадь прибавить помните Да наш
1337. 1:01:39принцип повышения контраста Вот это
1338. 1:01:41такой нюанс потом Ну вот здесь вот
1339. 1:01:43допустим мне даже не придётся бордеро
1340. 1:01:46вый цвет использовать потому что я взял
1341. 1:01:47здесь два толщину и просто покрасил её в
1342. 1:01:51цвет фона вот а вот этот может быть
1343. 1:01:53спокойно
1344. 1:01:56цвет бордера использую просто серый
1345. 1:01:59видите серый на белом контрастный серый
1346. 1:02:01на сером вот если я сделаю
1347. 1:02:04единицу уже не такой контрастный его
1348. 1:02:07почти не видно то есть вот если
1349. 1:02:09увеличить немножко толщину то он
1350. 1:02:11примерно станет По контрасту так же как
1351. 1:02:13вот такой же как вот этот то есть всё
1352. 1:02:15вот этот принцип
1353. 1:02:16запомните что можно с бордера делать
1354. 1:02:18теперь давайте разбираться с вот этим
1355. 1:02:21активным бордеро Давайте начнём с
1356. 1:02:23толщины один
1357. 1:02:26Ну вроде выглядит неплохо но если вам не
1358. 1:02:29хватает акцента Вы можете
1359. 1:02:32немножко утолщить его допустим до двух
1360. 1:02:35Вот это уже жирный очень акцент Вы
1361. 1:02:37можете также варьировать очень тонкий в
1362. 1:02:40один пиксель но максимально тёмный либо
1363. 1:02:43можете выбрать какой-нибудь
1364. 1:02:44побледнел
1365. 1:02:50моженков
1366. 1:02:54история и на неё надо кликать то мы её
1367. 1:02:57красим в чёрный цвет и оценку Кстати
1368. 1:03:00тоже надо будет покрасить чёрный цвет
1369. 1:03:03вот тогда вот это уже будет похоже на
1370. 1:03:05что-то
1371. 1:03:06кликабельное Но помните Да чёрный цвет
1372. 1:03:09рядом с чёрным мы не можем У нас есть
1373. 1:03:10специальный цвет для
1374. 1:03:13этого для залитых иконок и в свою
1375. 1:03:17очередь если у нас иконка Линейная то
1376. 1:03:19можно не
1377. 1:03:21париться и использовать активный цвет
1378. 1:03:23просто вот так Как вариант э можно
1379. 1:03:27оставить э-э Ну как бы серую звёздочку
1380. 1:03:30но это странно вообще было бы вот
1381. 1:03:32поэтому Давайте их тоже
1382. 1:03:52перекрасить теперь нам надо разобраться
1383. 1:03:54с кнопками Ну то есть я начинаю смотреть
1384. 1:03:58с
1385. 1:03:59сочетаний Просто давайте
1386. 1:04:01возьмём все эти
1387. 1:04:03кнопки
1388. 1:04:06притащит Допустим мы сейчас покрасим
1389. 1:04:08сначала отдельно стоящие кнопки primary
1390. 1:04:11цвет выглядит очень
1391. 1:04:13жирно может даже будет Ну вот кстати как
1392. 1:04:16проверять кнопки у вас в вашем макете
1393. 1:04:20если их много подряд будет стоять не
1394. 1:04:23должно вызывать это перегруз
1395. 1:04:26Ну то есть вот в карточках товара частая
1396. 1:04:28ошибка в интернет-магазинах вижу что
1397. 1:04:30прям кнопки купить купить купить купить
1398. 1:04:32Там пять товаров в ряду и просто до низу
1399. 1:04:35и вся страница в акцентной цвете то есть
1400. 1:04:38мы сейчас просто проверим как они вместе
1401. 1:04:40смотрятся а потом я покажу что можно
1402. 1:04:41было с этим бы сделать То есть Давайте
1403. 1:04:44проверим вот с этой
1404. 1:04:47сначала вместе смотрится
1405. 1:04:50Неплохо а здесь
1406. 1:04:55с этой и вы просто для себя выбираете
1407. 1:04:58что смотрится лучше для вас теперь что
1408. 1:05:02бы я сделал я бы короче
1409. 1:05:08попробовал вот эту штуку сделал здесь
1410. 1:05:12первостепенной и добавить к ней вот
1411. 1:05:18такую тресте
1412. 1:05:22кнопку Ну вот честно говоря Мне сейчас
1413. 1:05:25кажется что проваливается
1414. 1:05:27немножко потому что она даже по
1415. 1:05:31сравнению с вот этой с вот этим цветом
1416. 1:05:33нашего бордера какая-то бледно
1417. 1:05:35Тая Либо мы е добавляем немножко толщины
1418. 1:05:39А там вообще меньше единицы сори это
1419. 1:05:42из-за того что я уменьшал Макет с кейлом
1420. 1:05:46Либо мы добавим ей ещё немножко цвета то
1421. 1:05:48есть какой у нас там цвет стоит 05 Ну
1422. 1:05:51давайте пусть будет не 05 первый вот
1423. 1:05:53здесь Бордер будет один
1424. 1:05:56и
1425. 1:05:57здесь они должны быть тоже один Ну чтобы
1426. 1:06:01не плодить кучу стилей для разработчиков
1427. 1:06:04То есть получается а фоны у нас один фон
1428. 1:06:0805 обводка один фон
1429. 1:06:1205 фон
1430. 1:06:181 всё она стала немножко
1431. 1:06:22темнее Ну вот Давайте проверим сколько
1432. 1:06:25будет лучше выглядеть если если обводка
1433. 1:06:28будет немножко
1434. 1:06:29потолще
1435. 1:06:36поярче
1436. 1:06:39сейчас Ну вот в принципе кнопка
1437. 1:06:41перестала так теряться на
1438. 1:06:43фоне потому что её цвет теперь с вот
1439. 1:06:47этим
1440. 1:06:49одинаковый
1441. 1:06:50всё всё правильно это была ошибочка
1442. 1:06:53такая ну это случается в процессе
1443. 1:06:56так если бы я этот макет делал Я бы
1444. 1:06:59наверное
1445. 1:07:00поставил не первостепенные кнопки
1446. 1:07:05везде а везде бы поставил второстепенные
1447. 1:07:11кнопки Вот посмотрите А где надо двойную
1448. 1:07:15то здесь вот треть степенную
1449. 1:07:18Посмотрите сразу как и меняется образ
1450. 1:07:21макета То есть он становится намного
1451. 1:07:23легче при этом все ваши вот эти вот
1452. 1:07:26оставить заявку они никуда не исчезают
1453. 1:07:30То есть это
1454. 1:07:32всё всё также хорошо видно ну то есть
1455. 1:07:35достаточно ярко и чётко И последнее что
1456. 1:07:38нам осталось сделать это придумать В
1457. 1:07:40какой цвет покрасить активный
1458. 1:07:44баннер для начала попробуем просто серый
1459. 1:07:48цвет
1460. 1:07:50и брендовый в принципе кстати Вот видите
1461. 1:07:54в таком стиле он даже достаточно хорошо
1462. 1:07:57а достаточно хорошо выглядит сейчас
1463. 1:08:00кстати я хочу такой же баннер добавить в
1464. 1:08:03этот макет чтобы мы на сером фоне я вам
1465. 1:08:05тоже
1466. 1:08:07показал вот Давайте попробуем Здесь тоже
1467. 1:08:10его просто
1468. 1:08:13инвертировать ну как бы видно но не
1469. 1:08:17сказать что прям супер сильно видно
1470. 1:08:21поэтому Давайте попробуем в обратную
1471. 1:08:22сторону то есть мы его прямо покрасим в
1472. 1:08:24чёрный
1473. 1:08:31Ну вот так вот наверное маркетологов бы
1474. 1:08:33точно устроил Ну у вас всегда есть два
1475. 1:08:36варианта типа менее активный банер более
1476. 1:08:39активный банер Так ну вот смотрите мы с
1477. 1:08:42вами построили серую палитру мы забыли
1478. 1:08:45только вот эти иконки покрасить отдельно
1479. 1:08:51стоящие вот смотрите какой нюанс Вот они
1480. 1:08:54в
1481. 1:08:56очень очень
1482. 1:08:58яркие если мы их фоновый цвет покрасим
1483. 1:09:01то их не видно будет и поэтому нам
1484. 1:09:04скорее всего придётся для Вот таких
1485. 1:09:06отдельно стоящих
1486. 1:09:08иконок достаточно крупного размера найти
1487. 1:09:12ещё один стиль и вот 05 слишком бледно
1488. 1:09:16один вот так вот уже видно Я вот сейчас
1489. 1:09:20добавлю себе что здесь должна быть ещё
1490. 1:09:23отдельно стоящая иконка
1491. 1:09:34Вот примерно примерно как-то так Теперь
1492. 1:09:38давайте мы с вами перейдём к нюансам
1493. 1:09:41серой палитры потому что их тоже при
1494. 1:09:44великое
1495. 1:09:45множество вот смотрите мы с вами строили
1496. 1:09:49цвет
1497. 1:09:50от Ну от ного там от какого-нибудь
1498. 1:09:55к чёрному м и у нас получается Вот такая
1499. 1:09:58история То есть а что если у нас за
1500. 1:10:01базовый цвет пойдёт не чёрный цвет а
1501. 1:10:04допустим какой-нибудь вот близкий к
1502. 1:10:06чёрному То есть он вроде как чёрный Для
1503. 1:10:08текста подойдёт но при этом При
1504. 1:10:10рассмотрении Мы видим что это оттенок
1505. 1:10:11красного или оттенок синего или оттенок
1506. 1:10:14там фиолетового цвета и вот это всё
1507. 1:10:17порождает Эстет ские муки потому что
1508. 1:10:20хочется в какой-то единой палитре всё
1509. 1:10:22сделать но есть нюансы вот смотрите
1510. 1:10:26здесь вот гайд по серому короче типа как
1511. 1:10:29это раскрашивать я показываю там разные
1512. 1:10:31макеты разные стей и прочие штуки с как
1513. 1:10:35они выглядят на вот этой нашей
1514. 1:10:37стандартной
1515. 1:10:38палитре если мы пришиваем цвет допустим
1516. 1:10:43у нас
1517. 1:10:44цвет не от чёрного мы пошли а вот от
1518. 1:10:47такого типа сине чёрного тоже будет
1519. 1:10:50прикольный результат Вот такая
1520. 1:10:53серо-голубая палитра
1521. 1:10:55и она будет выглядеть ничуть не хуже чем
1522. 1:10:58классическая серы Вот посмотрите даже
1523. 1:11:00приятная
1524. 1:11:06холодненького с голубым цветом то есть
1525. 1:11:09видите здесь примешивается чуть-чуть
1526. 1:11:10такого зелёного морского а тоже в
1527. 1:11:13принципе выглядит достаточно свежо и
1528. 1:11:16симпатично Но если вы берёте красный
1529. 1:11:21фуксию там жёлтый цвет зелёный цвет с
1530. 1:11:25фиолетовым ещ может быть неплохо то
1531. 1:11:28могут возникнуть вот такие вот вещи то
1532. 1:11:30что вы построите чёрную палитру она у
1533. 1:11:33вас будет выглядеть вот так вы построите
1534. 1:11:34красную палитру она будет у вас
1535. 1:11:35выглядеть как вампирский замок То есть у
1536. 1:11:37вас Second Цвет будет Вот так вот
1537. 1:11:39выглядеть И это не очень хорошо потому
1538. 1:11:43что ну как бы Грязнова бывает часто при
1539. 1:11:46сочетании с другими серыми цветами
1540. 1:11:49какой-то образ даёт такой вот как раз
1541. 1:11:51там вампир или жаба или бабуля там Ну
1542. 1:11:55вот почему я их собственно и показал
1543. 1:11:57потому что у вас вампир Если всё красное
1544. 1:11:59бабуля Если всё какое-нибудь там
1545. 1:12:01бордовое и жаба если весь интерфейс
1546. 1:12:03какой-нибудь зелёный собственно у вас
1547. 1:12:05тут есть возможность для
1548. 1:12:08самостоятельного изучения этих макетов
1549. 1:12:10Ну то есть не знаю насколько как бы у
1550. 1:12:12вас сейчас развит глаз чтобы увидеть там
1551. 1:12:15вот эти нюансы Ну тут чётко видно что
1552. 1:12:18всё такое вот Зелёная Болотная Ну то
1553. 1:12:20есть главное не стройте оттенки даже вот
1554. 1:12:22эти оттенки которые я подобрал это
1555. 1:12:24приемлемый уровень покраски в серой
1556. 1:12:28палитре просто у некоторых он прям
1557. 1:12:30Действительно бывает вот такой и вот это
1558. 1:12:32прям вампир из Улицы Сезам это не очень
1559. 1:12:35но что важно для тёмной темы вот эти
1560. 1:12:39оттенки могут быть интересны то есть они
1561. 1:12:41могут выглядеть достаточно интересно вот
1562. 1:12:43допустим фиолетовые смотрите Какая
1563. 1:12:45красота поэтому для тёмной темы можете
1564. 1:12:48поэкспериментировать сгенерить другую
1565. 1:12:49серую палитру и Вполне возможно что это
1566. 1:12:53будет выглядеть Симпатично Раз уж мы
1567. 1:12:55заговорили о тёмной теме Давайте
1568. 1:12:57немножко основ а самая первая штука про
1569. 1:13:01которую хочется рассказать в связи с
1570. 1:13:03тёмной Темой это про
1571. 1:13:06непрозрачность то есть вот смотрите у
1572. 1:13:09нас есть цвет Ну допустим какой-то
1573. 1:13:12красный цвет и есть два типа
1574. 1:13:15непрозрачности Первое - это
1575. 1:13:17непрозрачность на элементе то есть Вот
1576. 1:13:20видите р непрозрачных слоя 50% Я даю вот
1577. 1:13:24у нас такая
1578. 1:13:26штука
1579. 1:13:28возвращаем Теперь я могу сделать
1580. 1:13:30непрозрачность по Альфа каналу 50% Как
1581. 1:13:34видите это тоже самое И ещё я могу
1582. 1:13:38конкретно сделать такой же цвет прямо
1583. 1:13:40кодом то есть Вот видите это хкс код все
1584. 1:13:43вот эти три цвета выглядят одинаково но
1585. 1:13:47непрозрачность используется по-разному
1586. 1:13:48Ну во-первых вот эти две непрозрачности
1587. 1:13:50в плане цвета дадут вам один и тот же
1588. 1:13:52результат но вот эта история для
1589. 1:13:55разработчиков будет намного более
1590. 1:13:56удобный Когда у вас прозрачность в Альфа
1591. 1:13:59канале а не в слое потому что здесь
1592. 1:14:01непрозрачность зашита в сам цвет в код
1593. 1:14:03цвета вот здесь код цвета остаётся тот
1594. 1:14:07же самый но элемент становится другим то
1595. 1:14:09есть эти фишки используют при построении
1596. 1:14:11тёмной темы но это используют Когда у
1597. 1:14:15вас многоцветные системы также могут
1598. 1:14:18использовать наложение
1599. 1:14:20на яркий цвет белой непрозрачной
1600. 1:14:24подложки
1601. 1:14:25и прочих вещей вот смотрите ещ четвёртый
1602. 1:14:28способ вам покажу сделать такой
1603. 1:14:32цвет Так это у нас красный я беру белую
1604. 1:14:36подложку кладу её
1605. 1:14:38сверху накладываю непрозрачность и Вот
1606. 1:14:41видите опять получаю тот же самый
1607. 1:14:42оттенок то есть вот эти все фишки
1608. 1:14:44экспериментально используют в разных
1609. 1:14:46дизайн системах для того чтобы работать
1610. 1:14:48с тёмной Темой потому что в ЧМ прикол То
1611. 1:14:51есть у вас может быть какой-то оттенок
1612. 1:14:54кото
1613. 1:14:55на белом цвете выглядит хорошо и на ном
1614. 1:14:58цвете будет выглядеть хорошо Вот видите
1615. 1:15:01то есть и не надо будет строить
1616. 1:15:03дополнительную палитру Но если вы
1617. 1:15:05начинающий я вас предостерегают этих
1618. 1:15:07экспериментов потому что там очень-очень
1619. 1:15:10много нюансов и чтобы их коснуться
1620. 1:15:12придётся ещё одну трёхчасовой лекцию
1621. 1:15:14записать мы с вами используем другой
1622. 1:15:15способ который более удобный для
1623. 1:15:17разработчиков то есть
1624. 1:15:18непосредственно будем строить коды
1625. 1:15:21цветов это вот первая тую предо
1626. 1:15:26Наверно не стоит начинать с
1627. 1:15:28непрозрачности Давайте Вот мой первый
1628. 1:15:30способ сначала
1629. 1:15:32изучим то есть есть такой прикол Вот
1630. 1:15:34матери дизай да у них ну как бы чем
1631. 1:15:38ближе к зрителю находится слой тем
1632. 1:15:42больше у него тень это порождает многие
1633. 1:15:44грязные решения в макетах новичков
1634. 1:15:46поэтому я это не очень люблю но
1635. 1:15:53рассказать если она на чёрном фоне
1636. 1:15:56поэтому они используют не чёрный фон а
1637. 1:15:58такой вот тёмно-серый чтобы на нём тени
1638. 1:16:01было
1639. 1:16:02видно то есть здесь видите увеличивается
1640. 1:16:05её блюр но при этом а ну как видите
1641. 1:16:10Объект который находится ближе к зрителю
1642. 1:16:13он светлеет Ну то есть это логично в
1643. 1:16:16принципе то что как бы если Солнце
1644. 1:16:19светит как бы вперёд на экран то то что
1645. 1:16:21будет ближе к Солнцу то будет и светлее
1646. 1:16:24поэтому они вот использовать такой метод
1647. 1:16:26мы его тоже будем сегодня использовать
1648. 1:16:28для того чтобы выделить что-то на чёрном
1649. 1:16:29фоне вот если возьмём Apple то у них
1650. 1:16:32здесь с тенями всё попроще они
1651. 1:16:35используют просто Свет ну то есть без
1652. 1:16:38тени для того чтобы показать что ближе
1653. 1:16:40что дальше ну и здесь главная ошибка -
1654. 1:16:42это перепутать местами то есть допустим
1655. 1:16:44вот здесь шапка
1656. 1:16:46и футер выше чем слой основной фона То
1657. 1:16:52есть если вы перепутаешь
1658. 1:16:55чем вот эти вот вещи то есть так не
1659. 1:16:57очень хорошо и вот как бы наглядное
1660. 1:17:01применение из дизайн системы ВК если они
1661. 1:17:03используют стандартный цвет попапа то он
1662. 1:17:06начинает сливаться с вот этой вот чёрной
1663. 1:17:10непрозрачность белую непрозрачность
1664. 1:17:12делают странно поэтому они Просто берут
1665. 1:17:15и немножко светлее делают сам попап и
1666. 1:17:18всё то есть выглядит прекрасно третья
1667. 1:17:20штука про которую я вам хочу рассказать
1668. 1:17:22для тёмной темы которая нам пригодится
1669. 1:17:24это
1670. 1:17:25у нас на чёрном фоне если мы возьмём
1671. 1:17:29какой-нибудь супер яркий цвет Ну там
1672. 1:17:33допустим на белом фоне он будет
1673. 1:17:37смотреться достаточно контрастно а на
1674. 1:17:39чёрном фоне может выглядеть врг ЗНО вот
1675. 1:17:42особенно если мы берём Ну с квадратиками
1676. 1:17:45может быть это не сильно Понятно ну
1677. 1:17:47короче это вызывает напряжение в глазах
1678. 1:17:49но вот с текстом намного
1679. 1:17:51более ясна эта штука то есть вот такой
1680. 1:17:53текст долго читать
1681. 1:17:57поэтому для тёмной темы цвета приглушает
1682. 1:18:00вот вам опять пример из
1683. 1:18:03Apple то есть ну как видите здесь они
1684. 1:18:06немножечко приглушает потому что он у
1685. 1:18:08них и так не супер не супер яркий Но чем
1686. 1:18:13больше в цвете в самом яркости тем
1687. 1:18:16больше Как видите разница то есть вот
1688. 1:18:18они делают их более бледными чтобы не
1689. 1:18:21напрягать глаза и см цветом примерно
1690. 1:18:24сама истори и как нам сделать
1691. 1:18:26непосредственно этот ну вот мы возьмём
1692. 1:18:29допустим чёрный фон Нарисуем на нём
1693. 1:18:32ярко-красный квадратик и чтобы он у нас
1694. 1:18:34не вырывал глаза Ну или допустим вот
1695. 1:18:36какой-нибудь ярко-синий вот этот совсем
1696. 1:18:38жёсткий перейдём здесь в hsl и вот у нас
1697. 1:18:41H - это h s saturation можем просто
1698. 1:18:44saturation чуть-чуть убавить и он станет
1699. 1:18:48поспокойнее И перестанет выжигать глаза
1700. 1:18:50на чёрном фоне Теперь давайте поработаем
1701. 1:18:52с тёмной Темой в палитре Ну начнём с
1702. 1:18:56текста и иконок мы не советуем
1703. 1:18:59использовать полностью чёрный фон потому
1704. 1:19:02что полностью чёрного цвета в природе не
1705. 1:19:04бывает То есть он всегда какой-то тёмный
1706. 1:19:07даже в полной абсолютной темноте у вас
1707. 1:19:09никогда не будет чёрного цвета там 00
1708. 1:19:12поэтому для того чтобы он был более
1709. 1:19:13органичный и не вызывал напряжения в
1710. 1:19:16глазах чтобы было не было переизбытка
1711. 1:19:18контраста фон используется что-то из
1712. 1:19:21того какой у нас был текст то есть мы
1713. 1:19:23как бы
1714. 1:19:24не полностью то есть с некоторыми
1715. 1:19:26оговорками то есть вот допустим вот
1716. 1:19:28такой можем взять 23 23 23 или вот этот
1717. 1:19:30вот ну то есть какой-то не чёрный даже
1718. 1:19:32вот это это же не чёрный цвет вот по
1719. 1:19:34сравнению с ним чёрный выглядит ещё
1720. 1:19:38более насыщенным то есть Видите Там даже
1721. 1:19:40есть разница есть ещё куда чернить эту
1722. 1:19:41историю но я вам не
1723. 1:19:43советую также мы не используем чисто
1724. 1:19:46белый цвет и вот тогда у нас получается
1725. 1:19:49очень комфортный контраст то есть мы
1726. 1:19:51возьмём светло-серый который был нашем
1727. 1:19:55види для фона мы взяли текстовый цвет а
1728. 1:19:57Для текста взяли фоновый цвет поменяли
1729. 1:20:00их местами покрасили теперь нам нужно
1730. 1:20:02Здесь проделать Ту же самую историю
1731. 1:20:04отнять единичку то есть вот у нас был 05
1732. 1:20:08и мы с вами Делаем его ещё немножко
1733. 1:20:09темнее делаем единичку Т получается
1734. 1:20:12кстати не отнять а прибавить вот
1735. 1:20:14прибавить единичку Здесь тоже прибавить
1736. 1:20:18единичку ВНО пое с
1737. 1:20:24Кстати у нас остаётся на месте потому
1738. 1:20:27что он и был Посередине между Серым и
1739. 1:20:30чёрным Единственное что нам нужно вот
1740. 1:20:33эту штуку сделать не светлее а немножко
1741. 1:20:35темнее поэтому мы тоже прибавляем
1742. 1:20:39единичку и для Дий у нас disable был
1743. 1:20:42раньше три значит если вот мы отступаем
1744. 1:20:45в обратную сторону Ну станет где-нибудь
1745. 1:20:48восемь Да и здесь опять
1746. 1:20:52ээ прибавляем ещё
1747. 1:20:551 тон значит будет 8 с
1748. 1:20:57по ВС с текстом
1749. 1:21:01разобрались теперь ссылки всё тоже самое
1750. 1:21:05вот это основной цвет для ссылок такой
1751. 1:21:07же как обычный текст Second это се нам
1752. 1:21:11нужно сделать немножко поактивнее эту
1753. 1:21:13историю мы можем попробовать сделать
1754. 1:21:16светлее Ну как видите разницы небольшой
1755. 1:21:18нет вот ровно та же самая история
1756. 1:21:19повторяется как когда темни значит
1757. 1:21:21сделаем немножко потемнее наоборот
1758. 1:21:23о полтора вот здесь основной 0,5 плюс
1759. 1:21:27оди единичка не видно не
1760. 1:21:31видно вот это уже заметно заметное
1761. 1:21:34изменение тона и здесь то же самое то
1762. 1:21:36есть хотите
1763. 1:21:37ссылку немножко темнить хотите немножко
1764. 1:21:41подсвечивается вот мы здесь вот
1765. 1:21:43конкретно в этом случае немножко
1766. 1:21:46подсвечивает И всё И тогда будет всё
1767. 1:21:49хорошо здесь текст такой же как в
1768. 1:21:51дизейбл
1769. 1:21:52для этой ссылки
1770. 1:21:55фоны Ну стандартный фон у нас
1771. 1:21:57естественно такой же как у самой
1772. 1:21:59страницы вот он там 9 с поно А этот
1773. 1:22:02должен быть немножко светлее вот он
1774. 1:22:04будет
1775. 1:22:05девять теперь с
1776. 1:22:07бордера стандартный Бордер 8 с по хове
1777. 1:22:12для него надо немножечко прибавить
1778. 1:22:15яркость допустим 8 во мало Давайте
1779. 1:22:21се се хорошо
1780. 1:22:24и яркий Бордер активный такой же как
1781. 1:22:27основной текст наш главный наш главный
1782. 1:22:29цвет теперь тени Ну минимальная тень
1783. 1:22:33понятно Это наш дополнительный цвет фона
1784. 1:22:36если нам надо ещё светлее дополнительный
1785. 1:22:38цвет фона у нас де вот это будет 8 с
1786. 1:22:42поно Вот это будет 8 всё то есть вот по
1787. 1:22:46сути вам тень тени я там оставил Но их
1788. 1:22:48практически не видно можно даже убрать и
1789. 1:22:50теперь работаем с
1790. 1:22:52кнопочками дава
1791. 1:22:55цвет вот такой текст такой же как у фона
1792. 1:23:01Ну просто просто поменяем их местами
1793. 1:23:05hpr нам надо делать темнее то есть вот
1794. 1:23:09мы допустим у нас один не подходит
1795. 1:23:13полтора Ну вот полтора уже неплохо А вот
1796. 1:23:17этот будет Допустим
1797. 1:23:18д так нормально То есть получается у нас
1798. 1:23:22здесь 05
1799. 1:23:25здесь
1800. 1:23:28полтора и здесь
1801. 1:23:30два disable ищем что-то похожее на 30%
1802. 1:23:36вот этого цвета
1803. 1:23:39се слишком
1804. 1:23:42активно 8 с поно Вот это похоже на
1805. 1:23:45правду и ищем Для текста тоже цвет чтобы
1806. 1:23:49он был похож
1807. 1:23:50на кстати можно Ну чёрном нет
1808. 1:24:02слишком Вот примерно какой-то вот такой
1809. 1:24:05оттенок должен
1810. 1:24:13быть так Итого мы
1811. 1:24:16выбрали dis 8 с
1812. 1:24:19по и текст у
1813. 1:24:22него шестёрка
1814. 1:24:27Всё теперь secondary Цвет тоже
1815. 1:24:31самое Примерно там 40-50 про от э
1816. 1:24:41основного
1817. 1:24:42много
1818. 1:24:44[музыка]
1819. 1:24:46много вот кажется что в самый раз здесь
1820. 1:24:51кстати можно использовать белый текст Ну
1821. 1:24:52не белый точнее а наш primary
1822. 1:24:55и здесь
1823. 1:24:56получается мы
1824. 1:24:58взяли
1825. 1:25:00Семёрку плюс
1826. 1:25:0305 Наш
1827. 1:25:05текст и дальше по тому же самому
1828. 1:25:08принципу семёрка здесь
1829. 1:25:12восьмёрка здесь 8 с поно Ну и вот эту
1830. 1:25:16кнопку disable можно просто
1831. 1:25:18скопировать Теперь давайте
1832. 1:25:21посмотрим вот здесь обводку
1833. 1:25:24я могу сделать
1834. 1:25:26яркую текст я тоже могу сделать яркий
1835. 1:25:29сейчас видите у нас вот эта кнопка даже
1836. 1:25:31ярче чем вот это выглядит Поэтому если
1837. 1:25:33вы будете использовать ту то Тогда
1838. 1:25:36придётся
1839. 1:25:38поменять так
1840. 1:25:41восем поменять их местами и теперь нам
1841. 1:25:44надо немножечко эту штуку притури
1842. 1:25:56либо тушим Бордер либо заливаем То есть
1843. 1:25:58тут два варианта Я предпочитаю
1844. 1:26:02заливку берём
1845. 1:26:05заливку начиная вот отсюда вот эту вот
1846. 1:26:09отсюда то есть вот это у нас получается
1847. 1:26:12се Вот это
1848. 1:26:14восем Ну и вот здесь вот так как у нас
1849. 1:26:17эта кнопка на чёрном фоне мы просто
1850. 1:26:19берём disable текст
1851. 1:26:24и у нас получается
1852. 1:26:26disable теперь для серых Ну понятно что
1853. 1:26:29вот эти активные А вот эти должны быть
1854. 1:26:32ещё темнее и ещё пассив
1855. 1:26:35нее Давайте возьмём фоновый цвет это у
1856. 1:26:39нас
1857. 1:26:41будет
1858. 1:26:44девятка п
1859. 1:26:4505 следующий немножко
1860. 1:26:50посветлее
1861. 1:26:518500 п 05 Ну и вот это
1862. 1:26:55соответственно вос
1863. 1:26:59идим тоже берём нашу
1864. 1:27:03кнопку и вот эту вот
1865. 1:27:06историю красим в наш цвет для disable
1866. 1:27:10кнопка то есть вот смотрите разница
1867. 1:27:12между Дий текстом он на чёрном фоне у
1868. 1:27:15него такой контраст А здесь другого
1869. 1:27:18цвета текст потому что если мы сделаем
1870. 1:27:20такой же Ну как полностью disable то он
1871. 1:27:24может
1872. 1:27:28потеряться Вот видите у него контраст
1873. 1:27:30прям совсем провалился и скорее всего
1874. 1:27:32Никто не сможет прочитать эту кнопку и
1875. 1:27:35для сен мы берём цвет нашего
1876. 1:27:39бордера
1877. 1:27:40стандартного цвет текста Как наш пра так
1878. 1:27:46п05 а цвет бордера у на
1879. 1:27:508 Ну и я копирую эту исто и начинаю
1880. 1:27:54заливать Ну то есть вот это у нас
1881. 1:27:58девятка вот здесь у нас фон будет 8 с по
1882. 1:28:02обводка сохраняется куда-то сбежала а
1883. 1:28:07она она по сути Такого же цвета Ну это
1884. 1:28:09ничего страшного Кстати что здесь вот
1885. 1:28:11она исчезла в момент преста его видит
1886. 1:28:13секунду одну и вот здесь вот нам нужен
1887. 1:28:16текст потому что у нас эта штука на
1888. 1:28:18чёрном
1889. 1:28:20фоне Если вы сейчас смотрите это видео и
1890. 1:28:24такие что это за математика вообще
1891. 1:28:25среднего средней школы ничего не понятно
1892. 1:28:28то смотрите дальше Потому что мы вот эту
1893. 1:28:31операцию с цветами будем с вами
1894. 1:28:33повторять на всех оттенках и к концу вы
1895. 1:28:35видео вы просто преисполниться и поймёте
1896. 1:28:38всё абсолютно и
1897. 1:28:40запомнить белая кнопка в светлой теме у
1898. 1:28:42нас выполняла функцию максимально
1899. 1:28:44нейтральные кнопочки на серо на сером
1900. 1:28:48фоне поэтому у нас она тоже должна
1901. 1:28:51выполнять функцию максимально
1902. 1:28:53нейтральной кнопочки
1903. 1:28:54И как мы этого добьёмся ну то есть мы
1904. 1:28:58возьмём Давайте допустим возьмём
1905. 1:29:02чёрный Ну то есть самый самый самый вот
1906. 1:29:05этот вот то есть этот у нас был самый
1907. 1:29:06белый а это самый
1908. 1:29:08чёрный цвет
1909. 1:29:10текста такой же как у ри Ну наш основной
1910. 1:29:15текст И вот эта штука должна просто
1911. 1:29:18немножечко
1912. 1:29:19посветлее следующий после чёрного у нас
1913. 1:29:229 с поно
1914. 1:29:25её
1915. 1:29:28видно 8 с
1916. 1:29:30по 9 точнее это наш фон кнопка пропала
1917. 1:29:35поэтому
1918. 1:29:38пропускаем 8 с
1919. 1:29:40по всё то есть вот Это получается
1920. 1:29:4610 9 с
1921. 1:29:49по
1922. 1:29:51и 8 с по и йл такой же фон как у чёрной
1923. 1:29:57только текст должен быть зади Блен всё
1924. 1:30:02как перекрашивать белые интерфейсы в
1925. 1:30:04чёрный то есть здесь немножко другая
1926. 1:30:07логика то есть видите здесь у нас был
1927. 1:30:09основной фон
1928. 1:30:11на
1929. 1:30:12сером здесь будет наоборот здесь вот и
1930. 1:30:16вот здесь и вот здесь будет полностью
1931. 1:30:18чёрный фон вот такой А вот
1932. 1:30:24будут как раз второстепенный
1933. 1:30:28фон вот этот
1934. 1:30:30второй И вот тогда видите они у нас
1935. 1:30:33аккуратно выглядят
1936. 1:30:35на на фоне чёрного цвета то есть если вы
1937. 1:30:38там Если вы бахнем на оборот что у вас
1938. 1:30:40будет серый фон и чёрная эта штука то
1939. 1:30:42получается что у вас плашки будут
1940. 1:30:45вдавленный просто
1941. 1:30:49покажу Вот видите они у вас вда вовнутрь
1942. 1:30:51да имеет место быть но немножко
1943. 1:30:54нелогично с точки зрения
1944. 1:30:56Матери так добавлю обводку чтобы было
1945. 1:30:58видно Где макет
1946. 1:31:01заканчивается Ну и вот смотрите опять мы
1947. 1:31:04берём красим
1948. 1:31:09тексты весь красим в цвет primary
1949. 1:31:14текст теперь secondary нам тут не надо
1950. 1:31:19менять потому что он такой же вот эту
1951. 1:31:22штучку
1952. 1:31:24так как у нас основной
1953. 1:31:25цвет 0,5 мы красим в 0,5 Ну точнее опять
1954. 1:31:30наврал Вот это красим в 0,5 а иконка
1955. 1:31:33залитая рядом с основным текстом Вы
1956. 1:31:36помните Да что у нас оттенок немножечко
1957. 1:31:39отличается на единичку вот чтобы он не
1958. 1:31:42так сильно
1959. 1:31:48выпирает процедуру для всех остальных
1960. 1:31:56вот здесь так как мы не залитый стиль
1961. 1:31:58используем мы это оставляем И теперь мы
1962. 1:32:01подбираем кнопки вот
1963. 1:32:06кстати вот эти тексты у нас провалились
1964. 1:32:09тоже они должны быть тоже сери ну здесь
1965. 1:32:12вот всё сери всё
1966. 1:32:14правильно Так теперь борде берём наши
1967. 1:32:19замечательные борде
1968. 1:32:24и Красим в наш цвет бордеро проверяя
1969. 1:32:27насколько хорошо мы
1970. 1:32:30подобрали ну выглядит аккуратно теперь
1971. 1:32:34основной цвет бордера попробуем бахнуть
1972. 1:32:38тот который мы выбрали здесь ещё толщина
1973. 1:32:41два Давайте е
1974. 1:32:42убавить достойно ещё короче смотрите
1975. 1:32:47здесь обводки у фотографий я сейчас про
1976. 1:32:50них отдельно расскажу обводки фотографий
1977. 1:32:54нужны для того чтобы если фоток нет у
1978. 1:32:56нас не развалился макет но Естественно
1979. 1:32:58они не должны быть такими
1980. 1:33:00жёсткими а если мы их сделаем цветом
1981. 1:33:03нашего бордера то тогда она будет
1982. 1:33:22отъедается или мало
1983. 1:33:26Во вот условно чтобы у нас не развалился
1984. 1:33:29макет если что-то пойдёт не так здесь
1985. 1:33:32опять же помните это принцип с
1986. 1:33:34толщиной что там один или два если вы
1987. 1:33:37больше даёте толщину то Цвет будет
1988. 1:33:39смотреться ярче короче с помощью
1989. 1:33:41прозрачности подгоняем этот цвет под
1990. 1:33:44наши бордера для чего это сделано когда
1991. 1:33:48я беру фотку то этот Бордер не заметен
1992. 1:33:52когда фотки нет он сразу начинает
1993. 1:33:54держать нам макет и тот же самый принцип
1994. 1:33:56для светлой
1995. 1:33:59темы надо применять то есть там мы берём
1996. 1:34:03Ну не чёрный А вот этот вот и ему тоже
1997. 1:34:05даём там ну видите 8% Грязнова выглядит
1998. 1:34:09Можно даже ещё меньше четыре допустим И
1999. 1:34:13когда я фотку убираю у меня не
2000. 1:34:14разваливается макет Ну понятно вы там
2001. 1:34:17заглушку приду Но это вот просто вам
2002. 1:34:20такой
2003. 1:34:28ин Вот серка и придумать какой у нас
2004. 1:34:32будет баннер и тут тоже кстати я хочу
2005. 1:34:36баннер добавить посмотреть как это будет
2006. 1:34:42выглядеть первый способ это сделать дыщ
2007. 1:34:45Но вообще люди такое не очень прием бы
2008. 1:34:48да Вы точно будет точно видно в что тели
2009. 1:34:52сказать при не так плохо выглядит короче
2010. 1:34:55это можно использовать Давайте ещ один
2011. 1:34:56сделаем по не такой сумасшедший вот
2012. 1:35:00возьмём наш вот этот при подъёма три
2013. 1:35:03вида фона и сделаем вот такой
2014. 1:35:06акцент вот тоже в принципе выглядит
2015. 1:35:09хорошо и кнопки с дефолтным кнопками
2016. 1:35:14опять же вот если мы их
2017. 1:35:16покрасим Давайте на одно покрасим в
2018. 1:35:19яркий
2019. 1:35:20цвет
2020. 1:35:22вот красим тоже как вот
2021. 1:35:26здесь вот видите как бы этот макет он
2022. 1:35:29тоже В тёмном варианте тоже даёт по
2023. 1:35:31глазам очень сильно такой бдыщ
2024. 1:35:34здесь будет а макет который здесь мы
2025. 1:35:39сделаем более спокойным то есть мы
2026. 1:35:42возьмём
2027. 1:35:44здесь второстепенные
2028. 1:35:47кнопки ну вот кстати с серой кнопкой Мне
2029. 1:35:50кажется здесь будет лучше выглядеть чем
2030. 1:35:52если я полностью белую с обводкой
2031. 1:35:56хотя и так и так Нормально в принципе но
2032. 1:35:59но она очень сильно вот эти вот обводки
2033. 1:36:01они всегда очень сильно бьют по
2034. 1:36:04глазам поэтому давайте я возьму вот
2035. 1:36:09эту это кстати Gold buton будет на наш
2036. 1:36:13Вот видите я не предусмотрел то есть вот
2037. 1:36:15эта кнопка она нам не подходит здесь
2038. 1:36:17Потому что у неё фон совпадает с цветом
2039. 1:36:20фона
2040. 1:36:22карточки Вот как раз на вот тестирование
2041. 1:36:25макетов оно по сути для того и нужно
2042. 1:36:27чтобы Вы могли обнаружить вот такие
2043. 1:36:33проблемы и для этого как раз я столько
2044. 1:36:35стилей ещё и сделал чтобы можно было
2045. 1:36:38выбрать Не косячный ну то есть как вот
2046. 1:36:41это починить Ну то есть надо значит
2047. 1:36:44добавлять ещё плюс один оттенок то есть
2048. 1:36:47вот это светлее делать Вот это светлее
2049. 1:36:51делать
2050. 1:36:53сейчас вот это светлее делать Они тут
2051. 1:36:55перепутаны
2052. 1:36:59местами и тогда такая ри кнопка она
2053. 1:37:05прокатит ой точнее такая се кнопка
2054. 1:37:08прокатит Вот это хороший
2055. 1:37:11вариант а здесь мы сделаем всё по
2056. 1:37:14намного более
2057. 1:37:16спокойным то есть здесь у нас основная
2058. 1:37:18Кнопка будет вот
2059. 1:37:21э вот сразу как дизайн успокаивается А
2060. 1:37:25вот здесь вот
2061. 1:37:29уже мы сделаем кнопочку вот такую с
2062. 1:37:33обводкой вот собственно такие дела
2063. 1:37:35друзья а кстати активная иконка может
2064. 1:37:39быть праймери когда она стоит э отдельно
2065. 1:37:42от текста то есть её не надо будет
2066. 1:37:44тушить И для белого цвета то же самое
2067. 1:37:48там забыл кнопочку
2068. 1:37:50покрасить она может быть праймери
2069. 1:37:55всё Итак мы с вами построили серую
2070. 1:37:57палитру и дальше нас ожидает ещё
2071. 1:38:00построение цветных палитр но там я пойду
2072. 1:38:02с большей скоростью и так подробно
2073. 1:38:05комментировать не буду Вы сможете после
2074. 1:38:08окончания урока забрать эти файлы если
2075. 1:38:10вы новичок можете прямо использовать
2076. 1:38:12прямо эти палитры Ну то есть они уже
2077. 1:38:15выглядят довольно
2078. 1:38:17Окей можете Ну я ВС равно советую вам
2079. 1:38:20подобрать свою вот просто повторить за
2080. 1:38:22мно все эти действи тировать покрасить
2081. 1:38:24вот эти макеты свои цвета но в принципе
2082. 1:38:27можно будет пользоваться даже
2083. 1:38:30готовыми теперь перейдём к построению
2084. 1:38:32цветных палитр я вам хочу напомнить про
2085. 1:38:35кусочек с безопасным
2086. 1:38:37выбором цвета то есть у нас есть бледные
2087. 1:38:41цвета у нас есть светлые цвета у нас
2088. 1:38:44есть Яркие цвета и тёмные
2089. 1:38:46цвета я вам говорил то что лучше
2090. 1:38:49выбирать цвета которыми можно покрасить
2091. 1:38:53иноки и текст и чтобы на них можно было
2092. 1:38:56писать белым но дизайн темы прекрасен
2093. 1:39:00что часто нам задают ограничения
2094. 1:39:02допустим наш основной цвет может быть
2095. 1:39:05жёлтый или он может быть какой-нибудь
2096. 1:39:08бледно синий Там и так далее То есть Ну
2097. 1:39:11это зависит от того для кого вы делаете
2098. 1:39:13дизайн какое там настроение Какой образ
2099. 1:39:15и мы сейчас будем разбираться с тем как
2100. 1:39:18строить палитры для разных цветов и для
2101. 1:39:20разных
2102. 1:39:21оттенков моя цель сегодня показать вам
2103. 1:39:24как строить для светлых для тёмных для
2104. 1:39:26ярких и ну вот видите я покажу с какими
2105. 1:39:30цветами Буду сегодня работать и покажу
2106. 1:39:32что делать с капризными цветами там
2107. 1:39:36салатовый
2108. 1:39:37жёлтый всякие кислотные оттенки как с
2109. 1:39:40ними
2110. 1:39:41работать для начала построим вообще
2111. 1:39:44такие палитры откуда я их беру для того
2112. 1:39:47чтобы построить такую палитру мы с вами
2113. 1:39:50используем плагин который называется
2114. 1:39:57Вот Нам нужен допустим у нас вот такой
2115. 1:39:59брендовый цвет мы берём вот эту
2116. 1:40:02штуку вставляем и у нас получается
2117. 1:40:05палитра всё
2118. 1:40:07нажимаем у нас получается Вот такая вот
2119. 1:40:09история Вот видите Причём здесь вы
2120. 1:40:14можете сразу эту палитру немножко
2121. 1:40:17отрегулировать ви по
2122. 1:40:24он генерирует палитры достаточно яркие
2123. 1:40:27То есть вы можете Вот видите здесь
2124. 1:40:29получаются такие достаточно
2125. 1:40:31электрические оттенки А здесь очень
2126. 1:40:32спокойные поэтому вы можете немножечко
2127. 1:40:35убавить вот эту историю они будут
2128. 1:40:37поспокойнее если вам надо или на оборот
2129. 1:40:40выкрутить чтобы у вас получилось поярче
2130. 1:40:44но видите всё равно вот здесь вот
2131. 1:40:45выкрутить сильно не
2132. 1:40:47получается пока СПО
2133. 1:40:53мы будем работать над
2134. 1:40:56цветами это плагин тоже не очень удобный
2135. 1:40:59но пока самый нормальный в своём роде
2136. 1:41:05плагин что он делает это такая здесь вот
2137. 1:41:09неудобное Окно но на Большом мониторе в
2138. 1:41:11принципе нормально Вот мы берём наш цвет
2139. 1:41:14500 ну 500 Я имею в виду тот которы
2140. 1:41:19ли икаем Вот
2141. 1:41:23немножко глючит сделаем здесь 11 шагов
2142. 1:41:25чтобы у нас совпадало с серой палитрой и
2143. 1:41:29здесь вот смотрите тоже строятся Шаги
2144. 1:41:31по-другому алгоритму а это гугловский
2145. 1:41:34алгоритм он немножко более
2146. 1:41:36точно делает провалы Ну как бы делает
2147. 1:41:40точнее шаги потому что здесь вот видите
2148. 1:41:42получаются электрические цвета А здесь
2149. 1:41:44вот не электрические они все спокойные И
2150. 1:41:47вы здесь Можете вручную подтянуть
2151. 1:41:50яркость определённых цветов или всей
2152. 1:41:52палитры сразу вот допустим у нас здесь
2153. 1:41:5407 1425 мы просто там примерно в два
2154. 1:41:57раза всё вот увеличим вот от Пика и
2155. 1:42:00рисуем вот такую же
2156. 1:42:05горку Вот видите у нас палитра стала
2157. 1:42:08намного ярче Ну или вы можете вообще
2158. 1:42:10выкручивать как бы эти цвета но видите
2159. 1:42:13тогда они начинают сливаться быть ближе
2160. 1:42:16друг другу и ну палитра в принципе вся
2161. 1:42:19становится на порядок ярче То есть это
2162. 1:42:22всё зависит от ваших задач Ну вот
2163. 1:42:24допустим вот такой цвет внизу я бы не
2164. 1:42:25стал брать он очень сильно выбивается То
2165. 1:42:27есть я бы его вот до такого состояния
2166. 1:42:30убавил Вот и также вы можете как бы с
2167. 1:42:34помощью Light немножко потемнее сделать
2168. 1:42:37иногда вот допустим у вас тут фиолетовый
2169. 1:42:40А вы не очень хотите фиолетовый вы Вот
2170. 1:42:42его в серый хотите увести Допустим или в
2171. 1:42:45синий там ну с этим цветом не очень
2172. 1:42:47понятно Ну то есть видите это ь То есть
2173. 1:42:49она меняет оттенок вот допустим для
2174. 1:42:52жёлтого что нам пригодится чуть попозже
2175. 1:42:55у жёлтого есть несколько как бы форматов
2176. 1:42:59куда он может двигаться он может
2177. 1:43:01двигаться в болотный может двигаться в
2178. 1:43:04коричневый цвет Ну и собственно всё вот
2179. 1:43:08и в оранжевый ещё может двигаться А если
2180. 1:43:11если хотите вот и иногда получается что
2181. 1:43:15некоторые оттенки выглядят Грязнова
2182. 1:43:17допустим вот этот И вам захочется его
2183. 1:43:20там немножко подтянуть допустим в
2184. 1:43:22зелёный
2185. 1:43:23зены или в жёлтый то есть вот здесь вот
2186. 1:43:25можно чуть-чуть как бы
2187. 1:43:27под Ну Убрать вот эту грязь и чуть-чуть
2188. 1:43:30короче сделать его поярче по насыщеннее
2189. 1:43:34типа немножко в соседний цвет увести и
2190. 1:43:37это удобно потому что можно каждый цвет
2191. 1:43:39быстро сделать и просто добавить потом
2192. 1:43:42такую палитру она у вас будет
2193. 1:43:44здесь начнём мы с синего
2194. 1:43:47цвета возм оттенок 500 за
2195. 1:43:52основно уже построены поэтому мы на них
2196. 1:43:54Останавливаться не будем будем красить
2197. 1:43:57непосредственно в синий цвет те вещи
2198. 1:44:00которые нам нужны Так ну смотрите 500
2199. 1:44:05м что мне нужно для работы мне нужен
2200. 1:44:09плагин с проверкой
2201. 1:44:12контраста я буду пользоваться плагином
2202. 1:44:15контраст включу здесь сразу АК режим и
2203. 1:44:18он работает таким образом то что я
2204. 1:44:20нажимаю на текст и он мне говорит о том
2205. 1:44:22что подходит или не подходит мой текст
2206. 1:44:24для определённого размера То есть я
2207. 1:44:27обычно ориентируюсь на то чтобы вот
2208. 1:44:29контент текст э
2209. 1:44:32l60 у меня было доступно Так мы включаем
2210. 1:44:35вот эту историю красим наш основной
2211. 1:44:37текст и иконку Как вы помните уже
2212. 1:44:40в наш основной цвет в пятисотый
2213. 1:44:43иконочный
2214. 1:44:52[музыка]
2215. 1:44:53нашего основного цвета ну Давайте
2216. 1:44:57попробуем
2217. 1:44:58300 вот этот текст видите у него сразу
2218. 1:45:02он уже не проходит по многим параметрам
2219. 1:45:05можем поставить 400 тогда у него будет
2220. 1:45:10получше читаемость но смотрите в чём как
2221. 1:45:13бы Суть в том что насколько у вас вот
2222. 1:45:16эти два текста друг с другом вообще
2223. 1:45:19контрастирует в принципе достаточно
2224. 1:45:21нормально по контрасту мы здесь
2225. 1:45:23провалились для контент текста поэтому
2226. 1:45:26используем эту штуку для крупных
2227. 1:45:28каких-то вещей Ну вообще такой текст
2228. 1:45:30второстепенный и того же цвета он
2229. 1:45:32достаточно редко используется но такие
2230. 1:45:34случаи бывают Итак здесь вот мы ставим
2231. 1:45:37500 здесь у нас
2232. 1:45:39ми1 здесь мы ставим
2233. 1:45:43400 Здесь тоже У нас
2234. 1:45:45ми1
2235. 1:45:48300 й должен быть ещё бледнее Давайте
2236. 1:45:53поставим 200 Да он по контрасту не
2237. 1:45:55проходит но по сути и не должен потому
2238. 1:45:57что кнопка выключена и ставим 100 вот у
2239. 1:46:01нас получилась Вот такая палитра
2240. 1:46:02отдельно стоящая иконка А должна быть
2241. 1:46:05голубого цвета Давайте поставим ей 200
2242. 1:46:09так же как здесь вот отдельно стоящая
2243. 1:46:12иконка У нас должна нужна нам для того
2244. 1:46:15чтобы она могла превращаться в primary
2245. 1:46:18цвет й цвет у нас 500 то есть допустим
2246. 1:46:21выключено включено Если вдруг вам такие
2247. 1:46:24иконки понадобятся потом дальше ссылки
2248. 1:46:27Здесь нам цвет позволяет покрасить э
2249. 1:46:32ссылку в наш брендовый цвет поэтому мы
2250. 1:46:34так делаем А чтобы сделать хове она
2251. 1:46:37должна немножко потемнеть здесь вот есть
2252. 1:46:41проблемы в некоторых палитра что Видите
2253. 1:46:43вот эти цвета они достаточно сильно
2254. 1:46:44отличаются Вот это спокойно А вот это
2255. 1:46:46становится электрический и если вы вот
2256. 1:46:50этого не хотите то вам здесь понадобится
2257. 1:46:53другой плагин Ну то есть я в этом ничего
2258. 1:46:55прямо страшного не вижу но в принципе Вы
2259. 1:46:57можете воспользоваться вот такой вот
2260. 1:46:59штукой она называется hct col Picker
2261. 1:47:04hct То есть вы можете взять цвет который
2262. 1:47:07Вам конкретно кажется там слишком
2263. 1:47:08электрический и немножечко убавить у
2264. 1:47:11него параметр Хрома и тогда он
2265. 1:47:15побледнеть Вот видите я могу его
2266. 1:47:17электризоваться или немножечко убавлять
2267. 1:47:19этот параметр Хрома при сохранении а его
2268. 1:47:23тональность то есть вот также можно
2269. 1:47:25здесь вот вручную немножко подкручивать
2270. 1:47:27тон Но это как бы на ваш страх и риск
2271. 1:47:30мне будет окей с такой палитры собирать
2272. 1:47:31поэтому я остановлюсь на это так disable
2273. 1:47:35ссылка Такого же цвета как disable
2274. 1:47:39текст дополнительные ссылки голубого
2275. 1:47:43цвета Наверное нам здесь не понадобятся
2276. 1:47:45потому что у нас есть серые
2277. 1:47:49фоны у нас бывает такое что нужны
2278. 1:47:51брендовые фоны
2279. 1:47:53я беру обычно самый бледный цвет который
2280. 1:47:56нам нужен и для дополнительного мы берм
2281. 1:48:00основной потому что ну бывает такое что
2282. 1:48:03нам нужно прямо покрасить какой-то
2283. 1:48:04баннер пря ярко-синий
2284. 1:48:06цвет это будет 50 кстати заметь что вот
2285. 1:48:10здесь вот 50 100 200 300 400 500
2286. 1:48:13плотности цвета яркость его это тоже
2287. 1:48:16самое что в нашей серой палитре
2288. 1:48:20было 05 то есть вот это 50 100 150 200
2289. 1:48:25300 400 500 это эквиваленты просто в
2290. 1:48:28некоторых плагинах они считываются
2291. 1:48:31по-разному
2292. 1:48:32так для цветного
2293. 1:48:35бордера Нам нужен цвет немножечко поярче
2294. 1:48:38чем фоновый чтобы можно было на нём
2295. 1:48:40что-то различить Hover плюс
2296. 1:48:44о то есть вот это
2297. 1:48:47100 Это
2298. 1:48:50200 и это будет ри
2299. 1:48:53Ну то есть 500 так с тенями тут тени Нам
2300. 1:48:57тоже не нужны Я просто скопировал серую
2301. 1:49:00палитру и сейчас её
2302. 1:49:04перекрашивают
2303. 1:49:06500
2304. 1:49:08праймери текст
2305. 1:49:13белый здесь 600 здесь
2306. 1:49:18700 и й может быть серый такой же
2307. 1:49:22остаться что кстати прикольно но можете
2308. 1:49:25поэкспериментировать и сделать
2309. 1:49:28допустим инвертировать
2310. 1:49:32кнопку найти текст который будет 40%
2311. 1:49:35прозрачности для
2312. 1:49:37ди Ну вот
2313. 1:49:40допустим вот этот всё у вас два варианта
2314. 1:49:43можете выбрать любой который вам больше
2315. 1:49:45по душе Мне больше нравится серая потому
2316. 1:49:46что по ней прям чётко видно что она не
2317. 1:49:48работает она снимает себя все акценты не
2318. 1:49:51будет путаться с
2319. 1:49:55далее должен быть бледнее 500
2320. 1:50:00400
2321. 1:50:01300 может быть Вот
2322. 1:50:05такой мы можем пробовать белый и Чёрный
2323. 1:50:08текст Ну чёрный Я имею в виду наш чёрный
2324. 1:50:12из серой
2325. 1:50:15палитры который не совсем чный чуть-чуть
2326. 1:50:17менее чный Но для того чтобы поставить
2327. 1:50:20здесь Белы и рный текст нам опять
2328. 1:50:25н чтобы выбрать цвет текста нам нужно
2329. 1:50:28понять насколько он вообще контрастный
2330. 1:50:30вот чёрный контрастный но выглядит не
2331. 1:50:33очень красиво у нас вообще три варианта
2332. 1:50:35То есть это может быть белый текст
2333. 1:50:36чёрный текст и текст цвета Prim они у
2334. 1:50:40нас Как видите почти все не очень
2335. 1:50:42красиво выглядят контраст Значит у нас
2336. 1:50:44слишком тёмный фон Давайте возм 100 и
2337. 1:50:49Как видите здесь уже синий текст
2338. 1:50:51работает намного лучше можем взять фон
2339. 1:50:5450 Ну в принципе да он чуть-чуть вот
2340. 1:50:57здесь вот не проходит
2341. 1:50:59но как бы с этим можно смириться в
2342. 1:51:02принципе нормально Вот ну если хотите
2343. 1:51:04прямо жёстко по vcg у гореть то делайте
2344. 1:51:08чёрный и Как видите у него всё супер
2345. 1:51:12контраст можете кстати взять не только
2346. 1:51:14брендовый цвет а взять какой-нибудь
2347. 1:51:16синий потемнее допустим вот этот всё у
2348. 1:51:18него уже контент текст проходит поэтому
2349. 1:51:20мы его в принципе можем использовать
2350. 1:51:22Единственное что они по тональности
2351. 1:51:24отличаются это Балаган можем взять ещё
2352. 1:51:27темнее синий цвет Да в принципе так
2353. 1:51:31будет немножко получше или опять же с
2354. 1:51:33помощью
2355. 1:51:34плагина hct мы можем сделать специальный
2356. 1:51:38цвет Для этого текста и вот эту штуку
2357. 1:51:41потушить вот смотрите выбираю цвет
2358. 1:51:45убиваю немножко хрому и текст становится
2359. 1:51:49по бледнее вот в принципе более
2360. 1:51:51родственным как бы цвету дальше про
2361. 1:51:55текст не буду писать Ну тут короче тут
2362. 1:51:56вы можете подобрать вольные использовать
2363. 1:51:59чёрный брендовый с небольшим нарушением
2364. 1:52:01или подобрать цвет
2365. 1:52:03потемнее вот этот соответственно если
2366. 1:52:06этот был 50 значит этот 100 этот фон 200
2367. 1:52:11йб
2368. 1:52:12остаётся Ну цвет текста опять же на ваш
2369. 1:52:16вкус но мне честно говоря нравится Так я
2370. 1:52:18бы здесь чуть-чуть контраст нарушил
2371. 1:52:20радин
2372. 1:52:23здесь у нас все цвета такие же как Вот
2373. 1:52:26эти синие можем
2374. 1:52:27проверить сам Наш текст Кстати по
2375. 1:52:30контрасту проходит для белого фона Вот
2376. 1:52:35видите всё в принципе
2377. 1:52:37нормально и здесь мы просто повторяем
2378. 1:52:40нашу
2379. 1:52:42процедуру здесь 500 так как всё
2380. 1:52:46500 здесь мы просто добавляем фон
2381. 1:52:5450 это
2382. 1:52:57100 Это
2383. 1:53:00200 это
2384. 1:53:05100 У нас есть цвет для мы можем его
2385. 1:53:10использовать Если хотим сделать цветной
2386. 1:53:13Вот он
2387. 1:53:16видите вот кнопка но може сде также
2388. 1:53:23альтернативу То есть у вас есть вот
2389. 1:53:26этот чтобы всё просто было в одном стиле
2390. 1:53:29и какой-нибудь
2391. 1:53:34стандартный серый Бордер который мы с
2392. 1:53:37вами
2393. 1:53:38делали так
2394. 1:53:41Бордер V2 Ну вот они обе выглядят
2395. 1:53:44достаточно
2396. 1:53:47диб сразу здесь копирую потому что она
2397. 1:53:50будет такая же
2398. 1:53:52Ну
2399. 1:53:53и если мы хотим третье сеен ную Конечно
2400. 1:53:56уже такой достаточно большой зоопарк
2401. 1:53:58кнопок будет
2402. 1:54:01но мы используем наш
2403. 1:54:05Бордер используем брендовый цвет Для
2404. 1:54:09текста здесь он
2405. 1:54:11был 100 п 500 ну Бордер плюс
2406. 1:54:18текст и здесь
2407. 1:54:20повторяем туже самую
2408. 1:54:23операцию добавляем
2409. 1:54:26заливку полтинник и здесь прям заливка
2410. 1:54:31100 всё супер построили белое Здесь нам
2411. 1:54:36не надо мы это уже построили и теперь
2412. 1:54:39просто подбираем то что нам больше
2413. 1:54:41нравится я вот честно говоря за вот эти
2414. 1:54:43кнопки голосую здесь они за такие Сейчас
2415. 1:54:46посмотрим что в итоге будет лучше
2416. 1:54:55крашу левые в
2417. 1:55:00пятисот цвет у меня белый Для текста а
2418. 1:55:05второстепенную
2419. 1:55:08кнопку Она кстати может быть серая То
2420. 1:55:12есть вы помните даже что у вас две
2421. 1:55:13палитры Вы можете комбинировать праймери
2422. 1:55:16отсюда и Second оттуда Ну не в обратную
2423. 1:55:18сторону у вас не может быть чёрная
2424. 1:55:20основная и дополнительная синяя не это
2425. 1:55:23странно вот ну Давайте попробуем вот
2426. 1:55:30так в принципе симпатично выглядит А
2427. 1:55:33здесь немножко
2428. 1:55:35убавил здесь будет
2429. 1:55:38основная Вот это А кстати и второй
2430. 1:55:42вариант для неё вот такой ну мне не
2431. 1:55:45очень нравится обводки в сочетании с
2432. 1:55:47этими плашками жёстко выглядит Я люблю
2433. 1:55:49когда плашки с плашками сочетаются
2434. 1:55:53так здесь вот это первостепенная
2435. 1:55:56а второстепенная
2436. 1:56:01будет Вот
2437. 1:56:08такая видите всего два цвета и как бы
2438. 1:56:11несколько стилей в принципе выглядит
2439. 1:56:19симпатично и теперь разберёмся с борде
2440. 1:56:23оставляем цвет текста оставляем красим
2441. 1:56:27наши замечательные
2442. 1:56:30цифры в primary
2443. 1:56:39цвет красим
2444. 1:56:41звёздочки так как они
2445. 1:56:44out в тот же
2446. 1:56:46цвет а вот эти вот звёздочки мы красим В
2447. 1:56:51другой цвет
2448. 1:56:53который у нас специальный для иконок
2449. 1:56:56которые стоят рядом с праймери
2450. 1:57:00текстом
2451. 1:57:02Угу Ну тут забыл Ну ладно ничего
2452. 1:57:05страшного вот с этими иконками что делат
2453. 1:57:08то есть у нас есть серый для заливки
2454. 1:57:11иконок залитая может быть
2455. 1:57:14праймери Ну я вот так предпочитаю делать
2456. 1:57:17но бывает случай когда душа Просит
2457. 1:57:23вот
2458. 1:57:24такого но с серым понимаете если у вас
2459. 1:57:26много вот этих сердечек стоит то серое
2460. 1:57:29сердечко оно не привлекает внимание
2461. 1:57:30Поэтому будет меньше шума от него так
2462. 1:57:33основная обводка синяя два пикселя или
2463. 1:57:38один можно
2464. 1:57:39оставить баннер который бдыщ помните Да
2465. 1:57:44фоны мы делали вот он банер который бдыщ
2466. 1:57:47и банер который
2467. 1:57:50лайтовый вот такой может быть с чёрным
2468. 1:57:54текстом может быть с синим
2469. 1:57:56текстом но вы помните да то что контраст
2470. 1:57:59у нас здесь чуть-чуть
2471. 1:58:02проваливается Вот видите контент текста
2472. 1:58:04тут не соответствует вот ну тут как
2473. 1:58:07решите так друзья продолжаем работу над
2474. 1:58:10тёмной Темой и первое с чего я хотел бы
2475. 1:58:12начать это с применения принципов о
2476. 1:58:15которых мы с вами
2477. 1:58:16говорили вот здесь есть такой принцип
2478. 1:58:20dation
2479. 1:58:23у Apple у Google везде рекомендации в
2480. 1:58:26том чтобы приглушать цвета для ярких
2481. 1:58:30оттенков Потому что если мы этого не
2482. 1:58:32будем делать то текст будет
2483. 1:58:51расплываются 50% яркости от праймери и
2484. 1:58:56когда мы с вами попробуем это покрасить
2485. 1:58:59допустим вот это у нас будет основной
2486. 1:59:00цвет а вот этот как бы более тёмный
2487. 1:59:03сейчас вот я ему дал А вот этот как
2488. 1:59:05более тёмный цвет должен быть секон и
2489. 1:59:08Видите какая есть разница из-за того что
2490. 1:59:11у нас палитра построена в ярких тонах
2491. 1:59:14Примерно вот в этой точке происходит
2492. 1:59:16перелом то есть вот эти цвета они
2493. 1:59:18равномерно синие А вот отсюда они пошли
2494. 1:59:20уже с таким Ну как я это называю типа с
2495. 1:59:23дополнительным электричеством И нам от
2496. 1:59:26этого электричества надо избавиться а
2497. 1:59:28как нам от него избавиться нам нужно
2498. 1:59:30чтобы
2499. 1:59:32яркость вот этого текста Она уменьшилась
2500. 1:59:35Ну яркость то есть Хрома И для этого мы
2501. 1:59:38с вами воспользуемся
2502. 1:59:42плагином вот здесь вот поставим 11 и
2503. 1:59:46выберем наш основной цвет базовый вот
2504. 1:59:48500 с которым мы работаем и построим
2505. 1:59:51палитру в принципе вот эта палитра
2506. 1:59:53которая по умолчанию сгенерировать она
2507. 1:59:55достаточно хороша Давайте её проверим
2508. 1:59:59вот смотрите 11 цветов там 11 цветов
2509. 2:00:02здесь я сейчас её поставлю рядом И
2510. 2:00:04покажу
2511. 2:00:05вам этот прикол про
2512. 2:00:08сатурацию Вот видите вот этот цвет Он
2513. 2:00:12менее насыщенный чем вот этот синий и
2514. 2:00:14так далее у них насыщенность пропадает и
2515. 2:00:17вот если я возьму ещ один текст вот этот
2516. 2:00:22всё также будет 500 А вот этот будет 600
2517. 2:00:25и Вот видите теперь он вместо того чтобы
2518. 2:00:28как бы торчать перед ним ну эти эти два
2519. 2:00:31цвета они просто из разных немножко
2520. 2:00:33палитр и примерно одинаковые по
2521. 2:00:34цветности вот этот становится
2522. 2:00:36приглушённый если мы возьмём ещё один то
2523. 2:00:38он становится ещё более приглуши Вот
2524. 2:00:41примерно то что нам и нужно получить
2525. 2:00:44поэтому работать мы будем с вот этой
2526. 2:00:46палитрой теперь то есть здесь ну можете
2527. 2:00:49даже вот так вот себе скопировать
2528. 2:00:53чтобы вам также было удобно мы просто
2529. 2:00:56эту палитру сейчас везде
2530. 2:01:01применим вот эта штука Нам пока не нужна
2531. 2:01:04вот смотрите тот же самый принцип Мери
2532. 2:01:08цвет 500 иконка рядом с текстом 500 вот
2533. 2:01:13эта штука должна быть темнее так как у
2534. 2:01:16нас палитра В тёмной темы то мы не
2535. 2:01:18отнимаем а наоборот прибавляем один
2536. 2:01:20оттенок
2537. 2:01:22Вот то есть вот это получается
2538. 2:01:24600 И здесь тоже самое то есть Нам нужен
2539. 2:01:28текст примерно в половину темнее для
2540. 2:01:31нашей этой истории Главное чтобы он
2541. 2:01:33проходил у нас по контрасту мы это
2542. 2:01:35сейчас проверим это у нас допустим будет
2543. 2:01:39600 проверим
2544. 2:01:41контрастность так и он у нас вообще не
2545. 2:01:43проходит никакой контраст Что это значит
2546. 2:01:47Это значит то что в принципе для синего
2547. 2:01:50оттенка мы будем использовать за
2548. 2:01:52праймери 500 который вон видите тоже не
2549. 2:01:56больно-то хорошо работает нам вот эта
2550. 2:01:58история она не доступно здесь на тёмной
2551. 2:02:01теме и поэтому на тёмной теме нам нужно
2552. 2:02:04либо выбирать цвет более яркий хотя бы
2553. 2:02:07вот такой чтобы он был ри и тогда у нас
2554. 2:02:12уже следующий оттенок будет ну должен
2555. 2:02:14проходить по контрасту примерно 50%
2556. 2:02:18Давайте
2557. 2:02:20возьмём 500
2558. 2:02:24посмотрим как они вместе
2559. 2:02:32смотрятся Ну в принципе видно что он
2560. 2:02:35второстепенный проверим контраст и у нас
2561. 2:02:38видите Second текст по контрасту не
2562. 2:02:41проходит Это значит что скорее всего мы
2563. 2:02:44в принципе не можем использовать вот эти
2564. 2:02:47оттенки Для текста для мной
2565. 2:02:50те ещ сильнее либо заменять их на
2566. 2:02:55нашу на вот эти вот тексты которые у нас
2567. 2:02:58есть в чёрно-белой палитре внутри
2568. 2:03:00компонентов пожалуйста учтите этот нюанс
2569. 2:03:03так Ну я всё равно попробую
2570. 2:03:06построить Давайте этот будет 100 это
2571. 2:03:13200 А половина видите это какой-то серый
2572. 2:03:16цвет ну Давайте попробуем для него 200
2573. 2:03:22это будет выглядеть
2574. 2:03:25вместе Ну как видите разница не сильно
2575. 2:03:28большая поэтому скорее всего нам
2576. 2:03:30придётся от этой истории
2577. 2:03:33отказаться Такова жизнь не во всех
2578. 2:03:36оттенках у нас прокатывает то что мы
2579. 2:03:40хотим вместо этого используем цвета из
2580. 2:03:43чёрно-белой палитры мы ровно Для этого
2581. 2:03:45их и
2582. 2:03:46постро ская
2583. 2:03:51с будет
2584. 2:03:53белая для фонов так как у нас это уже не
2585. 2:03:57белый Давайте отберём какой-нибудь
2586. 2:04:01этот вообще не видно абсолютно не
2587. 2:04:04контрастный 800 а более яркий будет
2588. 2:04:08будет 700 вот Ну можем добавить ещё один
2589. 2:04:11если нам вдруг понадобится он будет 600
2590. 2:04:14это вот такой помни в мной теме мы с
2591. 2:04:18мили для бордеро
2592. 2:04:22по Т этот вообще не
2593. 2:04:25видно этот слишком
2594. 2:04:27яркий Ну вот такой попробуем оставить
2595. 2:04:30это будет 700 чуть-чуть поярче 600 и
2596. 2:04:34максимально яркий У нас здесь в нашей
2597. 2:04:36парадигме 500 Кстати чтобы повысить
2598. 2:04:39видимость вот этих бордеро Вы можете Как
2599. 2:04:42вы помните увеличить их толщину для
2600. 2:04:45тёмной темы допустим Ну если это не
2601. 2:04:47очень сложно для вашей разработки
2602. 2:04:49поэтому мнет
2603. 2:04:52тени нам тут не
2604. 2:04:54нужны ну вот эту штуку с э я вам показал
2605. 2:04:59и теперь Самое интересное - это покраска
2606. 2:05:03кнопок Ну кстати я думаю что вы поняли
2607. 2:05:06что это не только для кнопок но и для
2608. 2:05:08других компонентов у которых есть
2609. 2:05:10состояние хове эвы и прочих в том числе
2610. 2:05:13табы и такие различные
2611. 2:05:17истории у нас
2612. 2:05:20500 текст
2613. 2:05:22сразу проверяем контрастность Ну чёрный
2614. 2:05:24Нет мы его инвертирующий
2615. 2:05:52будем использовать много различных
2616. 2:05:53цветов и палитр и только в первом цвете
2617. 2:05:56я взял середину Ну как это самое простое
2618. 2:05:58для начала А потом мы будем брать более
2619. 2:06:00тёмные более светлые Там и так далее
2620. 2:06:02разные цвета чтобы я вам показал как это
2621. 2:06:06может изменяться в зависимости от
2622. 2:06:08оттенка и в зависимости от того
2623. 2:06:10насколько тёмный ваш праймер цвет здесь
2624. 2:06:12у нас серая тема серой темы мы можем
2625. 2:06:16оставить таким можем построить новый он
2626. 2:06:19должен примерно быть
2627. 2:06:22вот допустим возьмём вот такой цвет не
2628. 2:06:25видно не
2629. 2:06:29видно ну как-то не особо Мне кажется что
2630. 2:06:32серая кнопка лучше теперь Second
2631. 2:06:34примерно половина от вот этого это был
2632. 2:06:37500 значит
2633. 2:06:38Это скорее всего 700 и текст всё также
2634. 2:06:43белый остаётся и для не как
2635. 2:06:47разли его будет видно можно уводить вот
2636. 2:06:50сюда
2637. 2:06:51з проблема с активным состоянием поэтому
2638. 2:06:54Давайте попробуем в обратную сторону
2639. 2:06:56если это 800 то значит здесь 600 А здесь
2640. 2:06:59500 то есть они получились немножко
2641. 2:07:01зеркальные но в этом ничего плохого нету
2642. 2:07:05потому что все эти состояния они длятся
2643. 2:07:07по несколько секунд поэтому у вас
2644. 2:07:09проблем с ними не возникнет
2645. 2:07:20яже вобще наш синий цвет Как видите на
2646. 2:07:23чёрном фоне он не котируется поэтому
2647. 2:07:25здесь тоже белый
2648. 2:07:29текст обводка у нас эту кнопку я сечас
2649. 2:07:34скопирую и по тому же самому принципу
2650. 2:07:37добавляем заливку такую же как у вот
2651. 2:07:40этой кнопки там достаточно тмю И здесь
2652. 2:07:42тоже добавляем заливку и добавляем
2653. 2:07:45делаем её чуть-чуть посветлее то есть
2654. 2:07:46везде принцип плю о или мину о здесь у
2655. 2:07:49нас получается заливка 700
2656. 2:07:52здесь заливка 600 Так primary secondary
2657. 2:07:55нам здесь ну мы не будем их менять
2658. 2:07:58просто для теста можем посмотреть как
2659. 2:08:00это будет вместе выглядеть Итак давайте
2660. 2:08:02теперь покрасим наши макеты в эти цвета
2661. 2:08:05Ну вообще смотрите вот подложки которые
2662. 2:08:08мы покрасили нам совершенно
2663. 2:08:10необязательно их использовать то есть
2664. 2:08:12они нам подложки мы оставляем серыми и
2665. 2:08:16раскрашиваем контент который Т есть
2666. 2:08:22она никак не сработала а при Ну в плане
2667. 2:08:24контраста да я вам напомню то что здесь
2668. 2:08:27Да мы получили какой-то контраст Но эти
2669. 2:08:29синие цвета Ну вот только вот 200 300
2670. 2:08:32видите уже по контрасту не проходит Мы
2671. 2:08:35конечно можем забить вот здесь вот на
2672. 2:08:37вот эту одну отметок контент l60 но я не
2673. 2:08:41рекомендовал бы всё-таки поэтому
2674. 2:08:43смотрите нам надо принять решение будем
2675. 2:08:47мы использовать вот такой цвет хоть
2676. 2:08:49где-нибудь или мы его заменим полностью
2677. 2:08:51на белый Давайте попробуем То есть это
2678. 2:08:54200 Вот давайте я возьму вот эту штуку и
2679. 2:08:57попробуем с ней немножко поиграться Вот
2680. 2:08:58это
2681. 2:09:03300 и пойдём Вот сюда вот вниз вот Для
2682. 2:09:06чего я могу это использую У меня есть
2683. 2:09:09активные
2684. 2:09:12элементы это кликабельные
2685. 2:09:18отзывы и вот я могу вот так вот их
2686. 2:09:20покрасить
2687. 2:09:22Ну как видите цвет на самом деле не вот
2688. 2:09:24прям супер классный Хотя Вот видите для
2689. 2:09:28не текстовых элементов а требования они
2690. 2:09:31намного ниже и Можем попробовать с
2691. 2:09:34тёмной Темой но просто тут много нюансов
2692. 2:09:35сделать вот такую штуку Какой цвет нам
2693. 2:09:38подойдёт для того чтобы не текстовые
2694. 2:09:41элементы делать Вот допустим вот этот
2695. 2:09:42синий
2696. 2:09:43подойдёт мы можем попробовать вот эту
2697. 2:09:46штуку покрасить в белый и посмотреть как
2698. 2:09:48будет в принципе достаточно ярко Можно
2699. 2:09:51попробовать оставить так можно взять
2700. 2:09:53какой-нибудь цвет чисто для вот этих вот
2701. 2:09:56иконок отдельно стоящий чтобы у нас ну
2702. 2:09:59всё-таки было немножко побольше
2703. 2:10:00брендового цвета в
2704. 2:10:02интерфейсе и берём нашу
2705. 2:10:06кнопку здесь 500 Вот это
2706. 2:10:09белая баннер естественно тоже Можно
2707. 2:10:12оставлять серый Можно попробовать
2708. 2:10:13покрасить в наш цвет фонов который мы
2709. 2:10:17выбрали Я помню что у нас вот этот
2710. 2:10:19должен быть прямо в дыщ
2711. 2:10:23а вот этот должен быть полегче Вот
2712. 2:10:25давайте мы его полегче попробуем
2713. 2:10:28сделать Либо
2714. 2:10:32так либо вот так то есть мне кажется он
2715. 2:10:35даже темнее чем вот этот серый поэтому
2716. 2:10:38возможно эту брендовую подложку
2717. 2:10:40использовать не стоит видите мы
2718. 2:10:42подбираем цвета но всё равно после
2719. 2:10:44тестов на
2720. 2:10:45макетах понят можем кивать вре
2721. 2:10:52существует такая история с
2722. 2:10:55притир давайте мы вот эту штуку
2723. 2:10:59сохраним Я думаю что она нам
2724. 2:11:08пригодится И вот мы её покрасим по
2725. 2:11:11принципу отдельностоящей иконки основная
2726. 2:11:15у нас будет цвета потому что он проходит
2727. 2:11:19А и не актив точнее дефолт она должна
2728. 2:11:22быть
2729. 2:11:24темнее вот в принципе можем вот такой
2730. 2:11:26вот штукой воспользоваться попробовать
2731. 2:11:28посмотреть как у
2732. 2:11:29нас это Пойдёт если не пойдёт Ну то есть
2733. 2:11:33у вас для этого всегда есть белая
2734. 2:11:35палитра вам достаточно синих кнопочек и
2735. 2:11:38всё остальное может быть в белой палитре
2736. 2:11:40то есть не обязательно Ну стараться там
2737. 2:11:42всё-всё-всё выкрашивание
2738. 2:11:51не стал бы красить в синий Ну хотя в
2739. 2:11:54принципе её видно но в других случаях
2740. 2:11:57Если бы у Вас брендовый цвет Был
2741. 2:11:58немножко потемнее то она могла бы
2742. 2:11:59проваливаться вот так в принципе
2743. 2:12:03выглядит Ну видимо видно
2744. 2:12:08её опять же по secondary кнопкам мы
2745. 2:12:11можем оставлять серые кнопки
2746. 2:12:13второстепенными Можем попробовать
2747. 2:12:15использовать то что мы взяли чтобы
2748. 2:12:16проверить насколько хорошо получилось в
2749. 2:12:19принципе неплохо выглядит
2750. 2:12:27а здесь мы попробуем использовать
2751. 2:12:29второстепенную
2752. 2:12:30Ну или третье пенную
2753. 2:12:34давайте мы её покрасим в тот же самый
2754. 2:12:39цвет и будем сочетать её с
2755. 2:12:43серой Ну в принципе так может
2756. 2:12:46быть Давайте ещё попробуем
2757. 2:12:52Ну вот если толщину немножко увеличить
2758. 2:12:54то так хорошо видно Давайте Здесь тоже
2759. 2:12:57увеличим
2760. 2:13:00тогда на тёмном цвете линии выглядят
2761. 2:13:04тоньше вот Обратите внимание что у нас
2762. 2:13:06шрифты в кнопках медиум и здесь и здесь
2763. 2:13:09Потому что на Цветном фоне белые
2764. 2:13:11выглядят тоньше на чёрном фоне цветные
2765. 2:13:14белые линии выглядят тоньше поэтому
2766. 2:13:15можно добавить жирности для тёмной темы
2767. 2:13:18Ну для светлой тоже можете добавить что
2768. 2:13:20программистам дво рабо не создавать Вот
2769. 2:13:22и для вот этого тоже чтобы она на фоне
2770. 2:13:24бордера
2771. 2:13:25выделялась то есть вот чувствую
2772. 2:13:28что так как-то
2773. 2:13:30более симпатично
2774. 2:13:34будет насчёт обводки главной активной
2775. 2:13:37обводки мы её Можем попробовать взять
2776. 2:13:41брендовую
2777. 2:13:42она опять же выглядит достаточно бле
2778. 2:13:46добавим ей
2779. 2:13:47толщины можно сделать так нужна сделать
2780. 2:13:51белую одну или два пикселя Ну вот это
2781. 2:13:54видите намного ярче выглядит Суть в том
2782. 2:13:56то что вот вы можете встретиться такой
2783. 2:13:59штукой что допустим у вас жёлтая обводка
2784. 2:14:01или там ярко-красная обводка и белая
2785. 2:14:03обводка и вы не знаете Какую выбрать
2786. 2:14:05цветную или белую руководствуется тем
2787. 2:14:07правилом насколько сильный вам нужно
2788. 2:14:09задать контраст понимаете как бы ярче
2789. 2:14:11выглядит то что наиболее контрастно к
2790. 2:14:13фону и вот здесь вот эта ситуация что и
2791. 2:14:16тут два пикселя и тут два пикселя но
2792. 2:14:17посмотрите насколько бледнее вот этот
2793. 2:14:19цвет То есть если вам не нужно делать
2794. 2:14:21большой акцент можете использовать
2795. 2:14:23цветную Если вам нужен большой акцент
2796. 2:14:25Используйте белую Ну и опять же толщиной
2797. 2:14:27Главное чтобы у вас всё было
2798. 2:14:28консистентность Если у вас здесь обводка
2799. 2:14:31в один пиксель то скорее всего на
2800. 2:14:32кнопочка тоже Придётся делать один а
2801. 2:14:33если два то везде по два так будет
2802. 2:14:36выглядеть симпатичнее Теперь давайте
2803. 2:14:38поработаем с бордовым цветом Цвет будет
2804. 2:14:41такой достаточно сложный Я вообще не
2805. 2:14:43советую брать такие тёмные оттенки без
2806. 2:14:45крайней необходимости Потому что есть
2807. 2:14:48вероятность что образ вашего макета
2808. 2:14:51будет такой как женщина бальзаковского
2809. 2:14:53возраста вот такой будет макет опять же
2810. 2:14:56красим у нас основную
2811. 2:14:59900 этот
2812. 2:15:02-1800 этот Посередине где-то между ними
2813. 2:15:06вот смотрите сейчас кстати будет а опять
2814. 2:15:09проблема что если мы сильно отступаем то
2815. 2:15:12они могут не сочетаться нам нужно с вами
2816. 2:15:14это обязательно проверять на предмет
2817. 2:15:16того насколько он выглядит
2818. 2:15:19второстепенной и этот яркий
2819. 2:15:22Поэтому нам скорее всего придётся опять
2820. 2:15:24прибегнуть к помощи плагина со страшным
2821. 2:15:28названием ставим 11 и попробуем получить
2822. 2:15:32ещё один
2823. 2:15:33цвет вот наш базовый такой видите эта
2824. 2:15:37палитра намного ярче чем вот эта То есть
2825. 2:15:40вы можете такую же яркую палитру
2826. 2:15:42построить в этом плагине Я сейчас вам
2827. 2:15:44кстати покажу как эта палитра кстати нам
2828. 2:15:47и для тёмного цвета тоже подойдёт
2829. 2:15:57вот смотрите нам нужен второстепенный
2830. 2:15:59цвет текста Ну он где-то в половину
2831. 2:16:04должен быть бледнее Вот Давайте
2832. 2:16:08попробуем Вот видите это уже больше
2833. 2:16:11похоже на второстепенный текст Давайте
2834. 2:16:13попробуем ещё побледнение вот это было
2835. 2:16:15500 вот возьмём 400
2836. 2:16:22Ну вот вот это больше похоже вот
2837. 2:16:24смотрите как
2838. 2:16:25проверить 50 или 40% Ну конечно отдаёт
2839. 2:16:29немножко оранжева Том Вот лучше было бы
2840. 2:16:32если бы он был прям совсем такой и
2841. 2:16:35Давайте попробуем вот я вам сейчас её
2842. 2:16:37эту
2843. 2:16:38палитру сохраню тут
2844. 2:16:42можно добавлять ещё одну Вот
2845. 2:16:46видите есть допустим я вот эту у меня
2846. 2:16:51остаётся Здесь тоже
2847. 2:16:5511
2848. 2:16:56900 и мы можем посравнению с ней
2849. 2:17:00немножко убавить наши параметры вот
2850. 2:17:02попробуем параметры Хрома убавить если
2851. 2:17:04нам хочется совсем такую палитру с более
2852. 2:17:07ближе в серый цвет Я просто начну
2853. 2:17:10двигать вот начиная вот отсюда Ну хотя
2854. 2:17:13этот ещё нормальный вот отсюда
2855. 2:17:17начнуть видите я им убавляет вот эти
2856. 2:17:20оттенки становятся
2857. 2:17:21грязными может быть мы не будем их так
2858. 2:17:24сильно трогать Но вот эта палитра
2859. 2:17:27становится ещё ну в ней короче меньше
2860. 2:17:29яркости со светлость мы не будем ничего
2861. 2:17:32делать потому что она пропорциональна ю
2862. 2:17:34у нас одинаковые это красный цвет а вот
2863. 2:17:36хром и так Давайте попробуем её добавить
2864. 2:17:38и посмотреть получится ли у нас сделать
2865. 2:17:41хорошую половинку от нашего основного
2866. 2:17:47цвета в итоге та палитра которую вы
2867. 2:17:50оставляете ну для белого цвета
2868. 2:17:51естественно вот э основная просто
2869. 2:17:54конкретно Для текста можете задать
2870. 2:17:59что-то более бледное Вот например
2871. 2:18:03смотрите вот он примерно такой получился
2872. 2:18:0550% от
2873. 2:18:08основного теперь проверяем контраст
2874. 2:18:11видите этот текст вполне читаемый на
2875. 2:18:13белом фоне можно его пока
2876. 2:18:16оставить здесь ВС красим мы выбрали цвет
2877. 2:18:21из верхней
2878. 2:18:22палитры этот значит будет немножко
2879. 2:18:25бледнее
2880. 2:18:26300
2881. 2:18:28и будет ещё бледнее этот совсем розовый
2882. 2:18:33А вот этот вот кстати его можно было бы
2883. 2:18:35убавить по Хроме Кстати если вам надо
2884. 2:18:37убавить отдельный цвет в палитре который
2885. 2:18:40уже Гене то Пользуйтесь вот это вот этим
2886. 2:18:43планом вот смотрите я его выбираю и вот
2887. 2:18:47тут вот чучуть просто хро УВ да гно
2888. 2:18:50конечно но для тёмной темы будет Как раз
2889. 2:18:53так вот это у нас розовый
2890. 2:18:59200 Так это у нас чтобы не запутаться
2891. 2:19:04900 этот был 400 по-моему Да это был 400
2892. 2:19:10из верхней Давайте я вот эту пока уберу
2893. 2:19:11чтобы она нам не
2894. 2:19:12мешала 200 и
2895. 2:19:17здесь Ну вот 100 кстати здесь выбрать
2896. 2:19:20может быть ошибкой
2897. 2:19:25выбивается немножко по
2898. 2:19:28цвету Давайте мы его просто чучуть
2899. 2:19:31вручную
2900. 2:19:36подтянем он должен у вас по весу быть
2901. 2:19:39как вот этот примерно текст так хорошо
2902. 2:19:42вообще нам эти цвета Ну они могут и не
2903. 2:19:44понадобится никогда то есть вот такой
2904. 2:19:46кейс это очень редкий случай это когда у
2905. 2:19:50вас какой-нибудь не знаю
2906. 2:19:54там вот такого вида баннер с у которого
2907. 2:19:58должен быть и основной и дополнительный
2908. 2:20:00цвет поэтому то что мы с вами строим вот
2909. 2:20:02эти цвета к к ярким Ну это можно сказать
2910. 2:20:05такой
2911. 2:20:06ADV то что обычно и не требуется вот
2912. 2:20:09этот цвет кстати можно было бы заменить
2913. 2:20:11наверное и на серый в принципе Видите
2914. 2:20:14вот так вот тоже
2915. 2:20:18делают Поехали дальше
2916. 2:20:21отдельно стоящая
2917. 2:20:23иконка так яркая 900 но отдельно стоящая
2918. 2:20:27серая Ну или какая-нибудь
2919. 2:20:33Ну скорее
2920. 2:20:37100 Да вот так будет нормально Ну
2921. 2:20:40немножко в розовый Будет уходить так
2922. 2:20:42Поехали дальше со ссылками тут всё тоже
2923. 2:20:45самое так это
2924. 2:20:48бнд нам не надо остатся се цветом это
2925. 2:20:52такая же по цвету как
2926. 2:20:54текст хове для неё темнее если сделаем в
2927. 2:20:59принципе заметно Но мы уже решили что
2928. 2:21:01будем отступать немножко назад в сторону
2929. 2:21:03яркости минус оди вот даже минус д Вот
2930. 2:21:06так вот будет очень заметно серую ссылку
2931. 2:21:08Ну скорее всего й вот здесь кстати тоже
2932. 2:21:10можно было серую оставить й и это
2933. 2:21:12наверное было бы лучше чем вот эта вся
2934. 2:21:14сложная машинерия которую я развл с
2935. 2:21:17раскрасками и подгонка цвета Ну просто
2936. 2:21:20хоте м показать как Ну что делают вот
2937. 2:21:23когда руками именно подбирают Просто вы
2938. 2:21:26же понимаете что все эти формулы которые
2939. 2:21:28я вам задаю они ну являются как бы
2940. 2:21:32просто таким костылём к ручному подбору
2941. 2:21:36Ну то есть просто описанием правил по
2942. 2:21:39которым Ну мы примерно сами это делаем
2943. 2:21:42вручную когда работаем так фоны тут берм
2944. 2:21:46самый бледный честно говоря вот у
2945. 2:21:48красного цвета
2946. 2:21:51что вот я взял самый-самый бледный их
2947. 2:21:53цвет и он всё равно достаточно яркий вот
2948. 2:21:57Можем ли мы построить как бы цвет
2949. 2:22:00который вот здесь вот дальше ниже
2950. 2:22:02пятидесяти Давайте откроем вот этот
2951. 2:22:04плагин и попробуем его немножко по тону
2952. 2:22:07поближе сделать вот сюда 98 сделаем в
2953. 2:22:10принципе такое будет полегче особенность
2954. 2:22:13красного цвета реально очень очень он
2955. 2:22:15живучий даже бледные оттенки дают Ну
2956. 2:22:19такую колоссальную
2957. 2:22:21историю с красным цветом можно построить
2958. 2:22:24здесь эти ховеры Но для красного цвета
2959. 2:22:27они будут выглядит не очень
2960. 2:22:30красиво поэтому мы с вами возьмём
2961. 2:22:32основной но видите он почти чёрного
2962. 2:22:34цвета получается Ладно построи для вас
2963. 2:22:36ховера тоже и дефолт ную
2964. 2:22:41обводку такую хорошо видно 100 это будет
2965. 2:22:46200 это будет 900 сложно придумать ваку
2966. 2:22:50для вот этой истории но скорее всего это
2967. 2:22:53опять какой-то баннер с какой-то
2968. 2:22:56обводкой вот
2969. 2:22:59такой в котором есть красный
2970. 2:23:07текст Ну и допустим какой-нибудь Не знаю
2971. 2:23:11радио Button Вот и мы когда его выбираем
2972. 2:23:15эту штуку то у нас баннер загорается
2973. 2:23:22Вот
2974. 2:23:25какой-то вот такой
2975. 2:23:33истории Ну это вам просто
2976. 2:23:37накидывают такие цветные баннеры быть
2977. 2:23:42использованы вот не выбранная и выбра
2978. 2:23:45повысили контраст как бы нома теперь
2979. 2:23:49кнопки 900 Мы же 950 Кстати да начали на
2980. 2:23:55900 Нет мы с 900 работаем а у меня здесь
2981. 2:23:58ошибка
2982. 2:24:00была 900 здесь везде тоже
2983. 2:24:06900 короче вот это
2984. 2:24:08900 Так это будет 800 это будет
2985. 2:24:13700 оставлю серый чтобы не скатываться в
2986. 2:24:16вампирский вообще вот эти тона для фонов
2987. 2:24:18они очень неприятные и поэтому я
2988. 2:24:21стараюсь по возможности избегайте в
2989. 2:24:23красном цвете цветных подложек то есть
2990. 2:24:26они выглядят некрасиво Ну вот эта штука
2991. 2:24:28выглядит не очень красиво Грязнова
2992. 2:24:30выглядит лучше серую оставить так
2993. 2:24:33secondary кнопка
2994. 2:24:37возьмём бледный фон красный текст Вот
2995. 2:24:41это будет
2996. 2:24:4350 п
2997. 2:24:47900 Ну вот это естественно будет 100 п
2998. 2:24:49900 вот вот это будет 200 п 900 можете с
2999. 2:24:53чёрным попробовать но как бы лучше когда
3000. 2:24:57когда родственные цвета друг на друге
3001. 2:24:59лежат вот это это выглядит симпатичнее
3002. 2:25:02здесь disable остаётся и пробуем ещё вот
3003. 2:25:06здесь вот поменять цвета тоже на 900
3004. 2:25:09здесь она логично просто чуть-чуть
3005. 2:25:13подкрашивать до полтинника здесь до 100
3006. 2:25:17Ну и здесь соответственно микс текст 900
3007. 2:25:21А вот эта штука вот такая даже её
3008. 2:25:24практически не видно либо делаем чуть
3009. 2:25:27потолще либо берём новый цвет 100
3010. 2:25:31допустим делаем и здесь
3011. 2:25:34Аналогично просто добавляем заливку
3012. 2:25:38полтинник и здесь 100 получается 50
3013. 2:25:47плюс 900 И здесь тоже 100 плюс 900 Ну
3014. 2:25:52вот такие два стиля кнопки здесь я бы
3015. 2:25:54тоже оставил Серый вот у нас основной
3016. 2:25:57900 не путать и теперь
3017. 2:26:13красим иконка Вы помните у нас минус оди
3018. 2:26:21немножечко получился дизайн какой-то
3019. 2:26:23красный Ну я не советую не люблю вот эти
3020. 2:26:26тёмные цвета честно говоря в интерфейсе
3021. 2:26:27это выглядит так достаточно Скучновато
3022. 2:26:30Ну то есть если только заставит вас
3023. 2:26:33тогда можете
3024. 2:26:35Да так красим
3025. 2:26:39кнопки 900 это у
3026. 2:26:42нас белый
3027. 2:26:45цвет второстепенный можно оставить
3028. 2:26:47серыми вот здесь вот сейчас Ну
3029. 2:26:50поэкспериментировать с secondary
3030. 2:26:57цветом ну честно говоря не очень красиво
3031. 2:27:00похоже на
3032. 2:27:01ошибку Давайте возьмём вот этот вот
3033. 2:27:06стиль Вот это не
3034. 2:27:09катит поэтому тут два варианта по сути
3035. 2:27:12есть вот ещё вот такие можно пробовать
3036. 2:27:17их Ну так по симпатичнее выглядит
3037. 2:27:21уже ну и здесь вот сделаем по классике
3038. 2:27:25другие цвета
3039. 2:27:27Просто сейчас я это добью чтобы полную
3040. 2:27:29картину
3041. 2:27:33посмотреть цвет для отдельностоящих
3042. 2:27:36иконок
3043. 2:27:38розовый этот
3044. 2:27:44праймери этот меняем на вот такой
3045. 2:27:50а вот этот вот вот эту обводку меняем на
3046. 2:27:54нашу третье
3047. 2:28:03ную Ну вот так вот немножко полегче но
3048. 2:28:05вот это честно говоря вариант мне тоже
3049. 2:28:07не нравится вот этот неплохо Давайте ещё
3050. 2:28:10комбинацию попробуем
3051. 2:28:13сейчас они должны быть
3052. 2:28:16красные вот такую комбинацию попробуем
3053. 2:28:22Ну
3054. 2:28:26короче здесь вот эти цвета Ну вот с
3055. 2:28:28красным цветом реально проблема вот это
3056. 2:28:31не подходит тоже выглядит
3057. 2:28:34некрасиво на макете остаётся вот этот
3058. 2:28:37вариант либо вообще забить на эти кнопки
3059. 2:28:40и сделать Сен серую второй из серой
3060. 2:28:43палитры брать Вот потому что серой
3061. 2:28:46палитрой сразу выглядит
3062. 2:28:52Ну немножко по сдержаннее поаккуратнее
3063. 2:28:54как-то выглядит Эта история вот Ну ещё и
3064. 2:28:56обводки не люблю так что особенно в
3065. 2:28:59интерфейсах где одни обводки
3066. 2:29:01вокруг так вот эту штуку перекрашиваем в
3067. 2:29:06основной Вот это мне тоже не нравится
3068. 2:29:10сердечко вот когда оно из серого там
3069. 2:29:13было Другой цвет
3070. 2:29:15се вот когда из серого превращается в
3071. 2:29:18красный так лучше
3072. 2:29:22от вот этого тоже отказываемся
3073. 2:29:26стиля Здесь вроде всё Теперь давайте
3074. 2:29:29тоже самое провер с красной Темой с
3075. 2:29:32тёмной Темой для красного точнее возьмём
3076. 2:29:35нашу страшненько палитру вот такую и
3077. 2:29:39попробуем Здесь провернуть тоже самое
3078. 2:29:42вот допустим основной текст у нас 900 мы
3079. 2:29:44не можем сделать потому что он по
3080. 2:29:47контрасту сразу нейт я это вижу ф все
3081. 2:29:50тест Значит у нас вариант какой либо
3082. 2:29:54делать ярче но сильно ярче тоже трш вот
3083. 2:29:58лучше делать ещё светлее но это уже
3084. 2:30:00какой-то розовый видите То есть он
3085. 2:30:02только здесь у него начинается какая-то
3086. 2:30:05Жизнь это ни разу не похоже на наш вот
3087. 2:30:07этот красный Поэтому я думаю что
3088. 2:30:10мы здесь будем использовать белый просто
3089. 2:30:12оставим как есть а вот с этим ничего не
3090. 2:30:15будем делать сейчас я его для вас
3091. 2:30:17зачеркну чтобы вы поняли что мы его не
3092. 2:30:19берём так потом Можем попробовать
3093. 2:30:22отдельно стоящую иконку
3094. 2:30:24покрасить в принципе её видно не знаю
3095. 2:30:27Кстати как вот с белым цветом они будут
3096. 2:30:28сочетаться но не очень хорошо иконка
3097. 2:30:31проваливается то есть Может быть для
3098. 2:30:33белого нужно даже добавить немножко
3099. 2:30:36яркости Если вы хотите вот до 700
3100. 2:30:39добавить и в целом они будут вместе
3101. 2:30:40хорошо смотреться со ссылками та же
3102. 2:30:43самая история как с текстом Вот давайте
3103. 2:30:46посмотрим что он нам тут говорит ну типа
3104. 2:30:49нет вот я эту ссылку прекрасно вижу но
3105. 2:30:52как видите плагин контраст говорит что
3106. 2:30:54не надо я бы честно говоря Ну если бы
3107. 2:30:56хотел больше красного добавить я бы её
3108. 2:30:58оставил поэтому
3109. 2:31:00тут вы должны будете решить сами Я
3110. 2:31:04построю для неё на всякий случай hpr
3111. 2:31:06тоже Пускай она немножечко темнее здесь
3112. 2:31:08станет й будет серый фоны вампирские
3113. 2:31:13сейчас тоже построим для фонов Вот это
3114. 2:31:15будет слишком ярко темнее видите Тут
3115. 2:31:18даже оттенка не поэтому мы с ми
3116. 2:31:20во оттенок из более бледной
3117. 2:31:27истории Так нам надо их расставить от
3118. 2:31:35светового в принципе видите у меня даже
3119. 2:31:38у меня даже 3 тоны не получается Здесь
3120. 2:31:40задать слишком ярко выглядит Эта история
3121. 2:31:44если вам вдруг нужно построить палитру е
3122. 2:31:48длиннее
3123. 2:31:50это ну как бы нет ничего сложного опять
3124. 2:31:52открываем плагин со страшным названием
3125. 2:31:54делаем Здесь 16 шагов берём наш цвет и
3126. 2:31:58вот у нас более длинная палитра она
3127. 2:32:02правда длинная не только с чёрной
3128. 2:32:05стороны но и со всех сторон но в целом
3129. 2:32:07Нам должно вот этого
3130. 2:32:08хватить чисто вот нюансы Короче
3131. 2:32:14рассказываю так Допустим вот такой фон у
3132. 2:32:16нас основной слишком яркий
3133. 2:32:21вот такой еле
3134. 2:32:24видный потом
3135. 2:32:26такой И потом такой вот это вот уже
3136. 2:32:29неплохо то есть чисто для фонов можно
3137. 2:32:38забить так бордера с бордера боюсь с
3138. 2:32:42цветными тоже будет такая же
3139. 2:32:44проблема начну с
3140. 2:32:48яркого в принципе это десо его видно
3141. 2:32:51достаточно хорошо на чёрном фоне
3142. 2:32:53Особенно с двойной толщиной вопрос
3143. 2:32:56Какого цвета делать Бордер более бледный
3144. 2:32:59потому что здесь ну как бы видите этот
3145. 2:33:02глаза режет достаточно У него слишком
3146. 2:33:05много светлости Ну то есть яркости вот
3147. 2:33:07этой хромы Давайте попробуем вот такой
3148. 2:33:10его не
3149. 2:33:11видно вот этот ну немножко видно но тоже
3150. 2:33:16противный оттенок
3151. 2:33:20палитре что
3152. 2:33:23есть вот Ну видимо Короче если вам нужен
3153. 2:33:26всё-таки прям
3154. 2:33:28совсем бледный хове здесь Придётся
3155. 2:33:31оставить серый потому что
3156. 2:33:32здесь ну как видите есть с этим
3157. 2:33:36проблемы Я сейчас на глаз поставил но
3158. 2:33:39все эти значения серых бордеро они как
3159. 2:33:41вы помните есть в гайде по серому
3160. 2:33:43который был до этого вот эту штуку
3161. 2:33:46кстати можете при наведении сделать
3162. 2:33:48цветной
3163. 2:33:492 пикселя как раз примерно по
3164. 2:33:51тональности всё проходит так работаем
3165. 2:33:55дальше пробуем красить primary
3166. 2:33:58цвет неплохо я думаю что текст будет
3167. 2:34:01белый вот Хотя видите его видно
3168. 2:34:04альфабанком был построен вот этот
3169. 2:34:08намного лучше поэтому мы тут сразу
3170. 2:34:10меняем текст на
3171. 2:34:11белый фон
3172. 2:34:15900 фон -1800
3173. 2:34:21700 Если не хотите чтобы у вас в красный
3174. 2:34:24в такой яркий уходили ховеры Пользуйтесь
3175. 2:34:27просто соседней
3176. 2:34:31палитрой наверно даже наоборот Потому
3177. 2:34:33что видите здесь этот цвет Он очень
3178. 2:34:35тёмный то есть вот получается как бы вот
3179. 2:34:37от вашего цвета бургундского вина
3180. 2:34:39отступает Либо так либо через
3181. 2:34:44яркость я вам оба варианта
3182. 2:34:47оставлю чтобы сами
3183. 2:34:50решили какой для вас будет
3184. 2:34:59лучше так кнопку й оставляю Ну если не
3185. 2:35:04хотите оставлять опять Пользуйтесь
3186. 2:35:07блекоти и гасите вот этот
3187. 2:35:13цвет Но мне не очень нравится Потому что
3188. 2:35:15видите здесь примесь оранжевого серый
3189. 2:35:18как-то выглядит почище то есть мы
3190. 2:35:20всё-таки стремимся сохранить брендовый
3191. 2:35:22цвет даже если нам дали Вот такой но мы
3192. 2:35:25работаем так чтобы не сильно уходить в
3193. 2:35:27оранжевые в розовые там и в прочее то
3194. 2:35:29есть потому что это уже чужие цвета Не
3195. 2:35:33факт что они будут согласованы так здесь
3196. 2:35:35нам опять нужна палитра Я уже думаю
3197. 2:35:37просто вот эту перестать использовать и
3198. 2:35:40положить сюда длинную чтобы можно было
3199. 2:35:42ей
3200. 2:35:43оперировать Second видите здесь мы не
3201. 2:35:45найдём У нас вот этот основной цвет
3202. 2:35:48поэтому сюда Т ярче и туда будет
3203. 2:35:51ярче Ну вот такой вариант только
3204. 2:35:55если или вот
3205. 2:35:57такой но здесь опять же с белым цветом
3206. 2:36:01потому что красный не проходит по
3207. 2:36:03контрасту Ну и начинаем то есть вот это
3208. 2:36:06у нас 950 и нам надо в ту сторону его
3209. 2:36:10либо в обратную 950 900 800 либо в ту
3210. 2:36:14сторону то есть Видите вот этот п1 или
3211. 2:36:17ми1 ну как бы тот же принцип 100 раз
3212. 2:36:21повторим пока не ну типа прямо всем всем
3213. 2:36:24всем не станет
3214. 2:36:27Понятно Вот я напишу чтобы было понятно
3215. 2:36:30что это
3216. 2:36:311.000 и вот это тоже так ошибься
3217. 2:36:389950
3218. 2:36:401.000
3219. 2:36:441.100 так здесь белый цвет это копируем
3220. 2:36:51и это
3221. 2:36:53заменяем здесь добавляем фоны Ну и всё
3222. 2:36:56по накатанной Вот видите вот эта штука
3223. 2:36:58не очень гармонично выглядит сразу видно
3224. 2:37:01что Режет
3225. 2:37:03глаз потому что мы начали смешивать две
3226. 2:37:06палитры То есть если бы мы не смешивали
3227. 2:37:08две палитры а работали только вот в этой
3228. 2:37:10дизайн получился бы по скучнее но все
3229. 2:37:12вот эти истории они бы сохранились То
3230. 2:37:14есть в принципе вы можете как бы вот так
3231. 2:37:16отстраниться и сказать что Ну вот так
3232. 2:37:18тоже прикольно
3233. 2:37:20но найдутся дизайнеры которые вам скажут
3234. 2:37:22что не прикольно поэтому давайте мы не
3235. 2:37:24будем рисковать вашей самооценкой и
3236. 2:37:27зачеркну это оставим Вот это ну и здесь
3237. 2:37:30естественно Нам тоже понадобится более
3238. 2:37:33бледная
3239. 2:37:35обводка Или давайте мы вот эту кнопку
3240. 2:37:38сразу построим короче с той палитрой
3241. 2:37:40чтобы не опростоволоситься
3242. 2:37:43так это
3243. 2:37:461000 откуда берутся и 200 это вот просто
3244. 2:37:52продолжение вот этого вот видите тут
3245. 2:37:561.000 1.000
3246. 2:37:591.100
3247. 2:38:011.200 1.300 вот
3248. 2:38:06туда
3249. 2:38:09фон потемнее или посветлее Давайте
3250. 2:38:13попробуем потемнее Потому что есть куда
3251. 2:38:20Ну вот можно вот сюда попробовать можно
3252. 2:38:22наоборот увести в Плюс То есть мы от от
3253. 2:38:25вот этого цвета стартовали и плюсом
3254. 2:38:28будет Вот
3255. 2:38:31этот и вот этот самое важное короче
3256. 2:38:34здесь вот в чём нюанс Если вы выбираете
3257. 2:38:39Ну то есть длинную палитру и у вас
3258. 2:38:41ховеры здесь темнеют то у вас везде
3259. 2:38:44ховеры должны темнеть если у вас здесь
3260. 2:38:46ховеры светлеют то у вас везде ховеры
3261. 2:38:49должны светлеть Главное чтобы вот было
3262. 2:38:51одинаковый принцип Ну как бы темнеет у
3263. 2:38:55вас или светлеет вот эта
3264. 2:38:57история Поэтому если мы вот это так
3265. 2:39:00оставляем то и вот это должно быть как
3266. 2:39:03бы по-другому то сейчас пока у нас всё
3267. 2:39:06темнеет Вот это темнеет Вот это темнеет
3268. 2:39:09Сейчас я вам лишнее зачеркну Хотя мне и
3269. 2:39:12нравится кстати вот эти кнопки Вот Но я
3270. 2:39:14м зачеркну и вот эти построю тоже в
3271. 2:39:17более тёмный
3272. 2:39:21какой-то
3273. 2:39:24вариант убираем палитра наше забираем и
3274. 2:39:33рисуем Так что мы с текстом решили
3275. 2:39:36что-то зра
3276. 2:39:38покрасил что текст у нас белый у таких
3277. 2:39:42вещей Ну не совсем белый Вы же помните
3278. 2:39:45Да что Белый цвет мы стараемся не
3279. 2:39:46использовать Вот можете просто с бем
3280. 2:39:50покра
3281. 2:39:51кнопки в этот красный вампирский цвет и
3282. 2:39:55вс будет отлично то есть Вот видите с
3283. 2:39:57белым нормально выглядит Но если Вы прям
3284. 2:40:01как бы там заморочиться хотите то вот
3285. 2:40:04можно так
3286. 2:40:07попробовать хорошо В целом выглядит
3287. 2:40:09видите с серой кнопкой очень понятно что
3288. 2:40:12второстепенная то есть может быть такое
3289. 2:40:15что вам вообще ничего из этого не подой
3290. 2:40:18то есть онот с конкретным цветом
3291. 2:40:20выглядит отстойно и тогда вы возьмёте
3292. 2:40:22серый просто серый для вот этой работы
3293. 2:40:26Но мы как бы
3294. 2:40:29Тестируем давайте
3295. 2:40:34потестить
3296. 2:40:36жить
3297. 2:40:38можно так теперь возьмём две secondary
3298. 2:40:42secondary и Ферри
3299. 2:40:50Ну вот здесь вот кстати обводка
3300. 2:40:51Тоненькая нормально
3301. 2:40:54выглядит здесь не очень нормально
3302. 2:40:56Давайте её побольше
3303. 2:40:59два Вот это будет Серый вот это будет
3304. 2:41:03пра вот линейный иконки Я не вижу
3305. 2:41:06большого смысла красить в красный цвет
3306. 2:41:08Потому что видите они будут
3307. 2:41:09проваливаться относительно вот этих
3308. 2:41:10поэтому здесь я серый оставлю Мы в
3309. 2:41:12принципе не делали кста это текст здесь
3310. 2:41:15видите у на нету такого я е здесь бе
3311. 2:41:17оставил Иста
3312. 2:41:20вот этот дыщ а этот не дыщ вот если не
3313. 2:41:23дыщ то возьмём наш тёмный фон и он у нас
3314. 2:41:27проваливается относительно нашего серого
3315. 2:41:29поэтому мы такой не
3316. 2:41:31берём удаляем вот в этот
3317. 2:41:34покрасим Вот они примерно одинаковые в
3318. 2:41:37своей светло здесь попробуем взять ещё
3319. 2:41:40более
3320. 2:41:43яркий вот тоже так и можно кста
3321. 2:41:48Попро супер рве глазный даже праймери
3322. 2:41:51цвет
3323. 2:41:52используют То есть в принципе он тоже
3324. 2:41:54может быть рабочий но мне не очень
3325. 2:41:57нравится У меня текст начинает расплава
3326. 2:41:59нано слишком большой
3327. 2:42:00контраст для такого количества текста
3328. 2:42:03поэтому Ну вот это
3329. 2:42:06будет более-менее
3330. 2:42:10О'кей
3331. 2:42:12так все пому кстати неправильный цвет
3332. 2:42:17покрасил вот вот
3333. 2:42:22так теперь поработаем с фиолетовой
3334. 2:42:24палитрой и возьмём светлый цвет
3335. 2:42:27попробуем покрасить в него текст и
3336. 2:42:29посмотрим на уровень контраста Ну как
3337. 2:42:32видите он не подходит для ссылок и
3338. 2:42:36основного текста поэтому мы такой
3339. 2:42:39брендовый цвет использовать не можем но
3340. 2:42:41можем взять ему какой-то цвет в тон вот
3341. 2:42:44допустим пятисотый и он будет отлично
3342. 2:42:47подходить Минус один
3343. 2:42:49400 Да мы можем брать оттенки даже если
3344. 2:42:52наш брендовый цвет вот такой мы с
3345. 2:42:53помощью кнопок его
3346. 2:42:56активируем так второстепенный текст от
3347. 2:43:00этого цвета у нас сделать не получится
3348. 2:43:02потому что если я возьму 300 Или 200 то
3349. 2:43:05мы по контрасту не будем проходить для
3350. 2:43:07тёмной темы может быть подойдёт а для
3351. 2:43:08нас нет или ещё один вариант попробовать
3352. 2:43:13этот цвет Еве в
3353. 2:43:15темноту
3354. 2:43:18700 сделаю
3355. 2:43:21400 это всё при том что у нас брендовый
3356. 2:43:23Цвет будет
3357. 2:43:27300 и disable Либо
3358. 2:43:32мы берём ещё
3359. 2:43:34бледнее через два
3360. 2:43:37примерно Ну так в принципе
3361. 2:43:40нормально
3362. 2:43:42200 так Поехали дальше отдельностоящая
3363. 2:43:46иконка ЕС возьму
3364. 2:43:50100 здесь я
3365. 2:43:53возьму наш основной цвет который в
3366. 2:43:56принципе ну выглядит достаточно заметно
3367. 2:43:58но мы это ещё протести на интерфейсе
3368. 2:44:00Возможно придётся
3369. 2:44:02взять чуть-чуть поярче вот такой да
3370. 2:44:05наверное это будет
3371. 2:44:07получше плюс-минус один оттенок То есть
3372. 2:44:09если у вас брендовый 300 то вот эти
3373. 2:44:11цвета вокруг они будут хорошо сочетаться
3374. 2:44:14со ссылками всё тоже самое правда хор
3375. 2:44:18ссылки мы здесь наверное
3376. 2:44:28уведённая
3377. 2:44:32Ну естественно берём самый бледный цвет
3378. 2:44:36для низа и чуть-чуть поярче возьмём
3379. 2:44:43сотку дефолтный Бордер ну этот кстати
3380. 2:44:47неплохо выглядит это 100
3381. 2:44:50значит этот будет
3382. 2:44:52200 а активный будет
3383. 2:44:55300 теперь работаем с брендовым цветом
3384. 2:44:58вот смотрите мы должны
3385. 2:45:01красить кнопки обязательно в брендовый
3386. 2:45:03цвет чтобы получить Ну нужное
3387. 2:45:05впечатление для заказчика
3388. 2:45:08в во всём интерфейсе но здесь у нас
3389. 2:45:11будет возникать проблема с текстом и нам
3390. 2:45:13нужно понять Какого цвета текст здесь
3391. 2:45:16будет подходить для того чтобы получить
3392. 2:45:18нужный контраст Ну там чёрный Хорошо
3393. 2:45:20подходит но лучше взять какой-нибудь
3394. 2:45:22родственный оттенок Ну то есть не совсем
3395. 2:45:24чёрный а вот с примесью фиолетового То
3396. 2:45:28есть он будет смотреться лучше и
3397. 2:45:30контраст у него Ну чуть-чуть не проходит
3398. 2:45:33но я в принципе оставил бы его
3399. 2:45:36таким Так мы делаем
3400. 2:45:40ярче ещё ярче получается 300 400 и 500
3401. 2:45:49кстати насчёт текста с белым здесь
3402. 2:45:50смотрится намного лучше А у белого
3403. 2:45:53текста здесь такая же контрастность как
3404. 2:45:56если бы мы выбрали тёмный цвет поэтому
3405. 2:46:00мне кажется вот если в сочетании с
3406. 2:46:02ховера Ну то есть да он чу-чуть не
3407. 2:46:04проходит вот здесь Но в принципе так как
3408. 2:46:07оттенок бренда такой бледной Наверное
3409. 2:46:10нам лучше выводить его всё-таки в
3410. 2:46:12бледность а не в яркость здесь я оставлю
3411. 2:46:15серый цвет у нас бледной подложкой
3412. 2:46:22Вот видите этот текст он слишком
3413. 2:46:24электрический А у нас брендовый цвет
3414. 2:46:28более
3415. 2:46:30Блек поэтому мы можем взять Вот этот он
3416. 2:46:34он похож на него либо нам придётся
3417. 2:46:37генерировать ещё одну палитру с помощью
3418. 2:46:40плагина вот со страшным названием так
3419. 2:46:43здесь попробуем сделать вот такую
3420. 2:46:46обводку и тоже те 400 кстати видите на
3421. 2:46:50белом фоне он проходит по проверку по
3422. 2:46:53контрасту Так что возможно вот эти два
3423. 2:46:56варианта они будут лучше выглядеть чем
3424. 2:46:58вот с этим Так здесь у нас какой мы цвет
3425. 2:47:01взяли мы взяли 50 плюс 500 плюс
3426. 2:47:07400 значит вот эти
3427. 2:47:10два у нас будет 100 и 200
3428. 2:47:15фаны оставляю такой же
3429. 2:47:19и здесь тот же самый принцип добавляю
3430. 2:47:21фон полтинник ну и вот этот будет 100 йб
3431. 2:47:27оставляю таким же и Теперь
3432. 2:47:30попробуем но это совсем невидимо Давайте
3433. 2:47:34возьмём сотку здесь скорее всего
3434. 2:47:37придётся подтянуть толщину чтобы эта
3435. 2:47:40история заработала да И тут придётся
3436. 2:47:44подтянуть Нет Так мне не очень нравится
3437. 2:47:47лёгкость пропадает Так давайте мы
3438. 2:47:50возьмём
3439. 2:47:51здесь
3440. 2:47:53200 Ну вот в принципе да она становится
3441. 2:47:56как бы на два порядка
3442. 2:47:59ниже
3443. 2:48:00400 и повторяем данную операцию здесь
3444. 2:48:04500 то есть 50 и здесь
3445. 2:48:08100 оставляю серым цветом и теперь
3446. 2:48:11покрасим этот дизайн в наши цвета опять
3447. 2:48:16начнём с текста
3448. 2:48:21основной текст Кстати я понял
3449. 2:48:23что надо всё-таки убавить до
3450. 2:48:26400 чтобы не потерять вот эту
3451. 2:48:29лёгкость в интерфейсе А вот этот
3452. 2:48:32secondary цвет надо будет заменить на
3453. 2:48:36цвет из серой
3454. 2:48:40палитры то есть понимаете здесь самое
3455. 2:48:43главное не потерять настроение бренда То
3456. 2:48:45есть вы можете сделать эту историю
3457. 2:48:49НТ но при этом у вас появятся
3458. 2:48:52какие-нибудь
3459. 2:48:53электрические цвета или вот что-то такое
3460. 2:48:57что будет очень сильно выбиваться И
3461. 2:48:59тогда дизайнеры скажут ну типа ну а что
3462. 2:49:02такое почему оно не такое лёгкое как мы
3463. 2:49:05задумывали Ну вс-таки это Корнер кейс
3464. 2:49:07такие достаточно сложные истории которые
3465. 2:49:10я вам специально показываю в основном
3466. 2:49:12цвета в
3467. 2:49:14интерфейсах достаточно бана ото вот этой
3468. 2:49:18и поэтому там будет всё как с синим
3469. 2:49:32цветом так
3470. 2:49:35отлично Ну вот эти естественно тоже
3471. 2:49:38будут по 400
3472. 2:49:46все здесь такой же цвет как у шрифта
3473. 2:49:49здесь чуть-чуть бледнее и поработаем с
3474. 2:49:51кнопками которые мы
3475. 2:49:53выбрали вот наш Мери цвет такой
3476. 2:50:00лайтовый и Тестируем нашу secondary
3477. 2:50:06кнопочку с подложкой
3478. 2:50:10Вот видите такой нежный очень получился
3479. 2:50:14цвет кстати для такого цвета Я возможно
3480. 2:50:17бый в палитре если у вас вдруг такая
3481. 2:50:19штука есть ещё бы уменьшал контрастность
3482. 2:50:24основного текста чтобы он не выбивал так
3483. 2:50:27сильно относительно конверсионных
3484. 2:50:29элементов то есть вот здесь как раз
3485. 2:50:31можно было бы убавить чёрный так Ну мы
3486. 2:50:34пока оставим как есть и покрасим все
3487. 2:50:37остальные элементы вот как мы обычно
3488. 2:50:41красим то есть вот это у нас будет
3489. 2:50:44основная А вот это будет дополнительная
3490. 2:50:53Ну как видите они не очень сочетаются
3491. 2:50:54между
3492. 2:50:57собой Сейчас посмотрим кстати насколько
3493. 2:50:59хорошо
3494. 2:51:01сочетается эта кнопка вот с этой Ну
3495. 2:51:03вообще честно говоря мне Я не очень
3496. 2:51:05люблю эти кнопки с обводкой они не везде
3497. 2:51:08подходят поэтому давайте мы её для вот
3498. 2:51:11этого
3499. 2:51:13кейса
3500. 2:51:16Вычеркни слишком активные
3501. 2:51:19края вот если я возьму края вот
3502. 2:51:24отсюда то вот так уже лучше выглядит Ну
3503. 2:51:26то есть сохраняется ну как бы это вот
3504. 2:51:30эта штука она очень сильно
3505. 2:51:33торчит и образ теряется
3506. 2:51:37или должно быть Две таких кнопки
3507. 2:51:40рядом чтобы они были в одном
3508. 2:51:43ле такс вот э основная
3509. 2:51:48это
3510. 2:51:49бледна ну тоже выглядит не очень
3511. 2:51:53наверное здесь всё-таки пришлось бы
3512. 2:51:55делать серую кнопку Если уж понадобится
3513. 2:51:58делать такую вот двойную историю или
3514. 2:52:01вообще есть вариант сделать
3515. 2:52:03здесь ну какой-нибудь buton просто надо
3516. 2:52:06будет немножко ссылку поближе подвинуть
3517. 2:52:08кверху Так сейчас мы разберёмся как в
3518. 2:52:11итоге мы
3519. 2:52:12оставляем это у нас цвет
3520. 2:52:17200 Давайте убавлять пробовать пускай
3521. 2:52:20будет 100 Ну вот так кстати немножко
3522. 2:52:24получше в плане
3523. 2:52:25акцента Так что да давайте вот здесь
3524. 2:52:27везде поменяем обводку на
3525. 2:52:30100 Ну в
3526. 2:52:33принципе в принципе меня
3527. 2:52:38устраивает Так теперь покрасим наши
3528. 2:52:40иконочный
3529. 2:52:49и покрасим обводку в основной цвет Ну в
3530. 2:52:52принципе достаточно лайтово оно не
3531. 2:52:55должно понимаете прям сильно торчать То
3532. 2:52:58есть даже вот эта штука по моему мнению
3533. 2:53:00достаточно сильно торчит но так она
3534. 2:53:03незаметная То есть наверное придётся
3535. 2:53:05всё-таки её сделать 300 Так теперь
3536. 2:53:08баннер здесь бдыщ здесь лайтовый банер
3537. 2:53:12берём наши фоновые
3538. 2:53:16цвета здесь возьмём текст
3539. 2:53:20проблемы с контрастом
3540. 2:53:28жёсткие здесь контент
3541. 2:53:32проходит короче можете оставить 400 так
3542. 2:53:34как мы немножко нарушили уже в принципе
3543. 2:53:36везде и Ну чтобы сохранить как бы вот
3544. 2:53:39этот образ Ну либо добавьте ему немножко
3545. 2:53:44тона просто вручную вот
3546. 2:53:46через можете взять текст для вот этих
3547. 2:53:49баннеров и немножко его
3548. 2:53:52подкрутить хрому
3549. 2:53:54убавляем То есть он должен быть бледный
3550. 2:53:57И при этом он такой достаточно тёмный
3551. 2:54:00что там с контрастом с контрастом уже у
3552. 2:54:03нас получше Вот хочется обозревать для
3553. 2:54:06вас самые разные цвета и как вот они на
3554. 2:54:08глаз подбираются тоже то есть моя задача
3555. 2:54:11была в том чтобы баннер как бы был
3556. 2:54:13заметный но при этом текст его не
3557. 2:54:15отличался по палитре не выбивал В общем
3558. 2:54:18из интерфейса Так теперь здесь возьмём
3559. 2:54:23допустим акцентный
3560. 2:54:25цвет
3561. 2:54:26[музыка]
3562. 2:54:28либо ну здесь вот как видите какого-то
3563. 2:54:31бдыщ не получается вот если взять
3564. 2:54:32акцентный цвет из белом его поставить то
3565. 2:54:35как раз получается то что надо поэтому
3566. 2:54:37наверное вот этот мы поменяем на
3567. 2:54:40акцентный чтобы он был ярче Вот видите
3568. 2:54:43кстати вот здесь и
3569. 2:54:45здесь
3570. 2:54:47сейчас Нет Это у нас
3571. 2:54:49акцентный всё-таки короче если мы хотим
3572. 2:54:51чтобы у него акцент был выше чем у
3573. 2:54:55кнопки ну то есть сейчас он равен А нам
3574. 2:54:58хочется немножко выделить этот баннер то
3575. 2:55:00мы возьмём следующий цвет вот допустим
3576. 2:55:01четырёх сотый для яркой плашки Ну вот да
3577. 2:55:05тут теперь он по иерархии прям совсем
3578. 2:55:07такой прям первый а всё остальное Ну
3579. 2:55:10такое лайто вень кое так поехали на
3580. 2:55:13тёмную
3581. 2:55:14тему и я сразу
3582. 2:55:18для бледных оттенков потому что вижу что
3583. 2:55:19вот эти ну они достаточно яркие надо их
3584. 2:55:23де сатури так плагин со страшным
3585. 2:55:26названием 11 тонов Давайте даже ещё
3586. 2:55:30больше сделаем Пускай у нас будет выбор
3587. 2:55:33хотя в принципе не Я думаю нам не
3588. 2:55:35понадобится столько потому что у нас
3589. 2:55:38запас в правую и в левую сторону
3590. 2:55:40достаточно
3591. 2:55:42большой берём наш основной цвет Как
3592. 2:55:45видите палитра уже побледнение
3593. 2:55:59всё с вот этим багажом мы уже можем
3594. 2:56:02приступать к
3595. 2:56:03работе Давайте красить текст в основной
3596. 2:56:07цвет для чёрного это хорошая идея видите
3597. 2:56:11Здесь всё отлично этот должен стать
3598. 2:56:14немножко темнее
3599. 2:56:18И вот сразу Уже видно ограничение этой
3600. 2:56:21палитры видите то есть вот эти цвета они
3601. 2:56:23пошли в яркость и он начинает
3602. 2:56:26выбиваться то есть Давайте
3603. 2:56:29попробуем взять Вот этот слишком скучный
3604. 2:56:33вот смотрите я взял короче 300 Для
3605. 2:56:36текста и 300 из другой палитры потому
3606. 2:56:40что она темнее чуть-чуть на тон как раз
3607. 2:56:42и у нас получился равный вес для иконки
3608. 2:56:45И для этого вот если я даже возьму 400
3609. 2:56:49уже будет выбиваться так по контрасту
3610. 2:56:51всё супер 300 и здесь я напишу что это
3611. 2:56:56300 и в скобочках D палитра Вот это
3612. 2:57:00теперь текст второстепенный должен
3613. 2:57:03выглядеть вот так поэтому мы возьмём за
3614. 2:57:05основу вот этот цвет а вот этот цвет у
3615. 2:57:08нас должен быть Ну допустим 600 и он не
3616. 2:57:11проходит вообще жёстко Давайте 500 400
3617. 2:57:16Ну короче я вижу хорошо Он не проходит у
3618. 2:57:20нас по контрасту но так как у нас в
3619. 2:57:23цветные подзаголовки это экстремальные
3620. 2:57:26какие-то случаи Наверное я бы его
3621. 2:57:28оставил потому что ещё ну ниже его я
3622. 2:57:31двигать не могу ярче я тоже делать Не
3623. 2:57:33могу он у меня начнёт равняться с этим
3624. 2:57:35текстом Видите вот как бы нюансы
3625. 2:57:38светлого светлых оттенков так ещё раз
3626. 2:57:42какой взял РСО взял из палитры D Так
3627. 2:57:47теперь на Мне нужно сделать примерно
3628. 2:57:50такую же тёмную
3629. 2:57:52историю 400 П 1 300
3630. 2:57:57и
3631. 2:58:02600 отдельностоящая
3632. 2:58:06иконка возьму её как или чуть-чуть
3633. 2:58:09поярче 500 а основной цвет у нас 300 ну
3634. 2:58:15мы это е будем проверять Нако отдельной
3635. 2:58:18нка вообще хорошо смотрится но мне
3636. 2:58:19кажется что я много
3637. 2:58:21взял 400 500 600 Ну вот Скорее Скорее
3638. 2:58:25вот так то есть она не должна как бы
3639. 2:58:27быть Вот такой прям Потому что люди
3640. 2:58:30могут думать что на неё нельзя нажать но
3641. 2:58:33при этом она не должна быть яркой чтобы
3642. 2:58:35был вообще порог вот превращения в ярко
3643. 2:58:38поэтому Ну я вообще сторонник брать
3644. 2:58:42серый оттенок и превращать его в
3645. 2:58:44брендовый цвет Но так как мы работаем с
3646. 2:58:48палитрой брендовых цветов то я как
3647. 2:58:49обязан вам показать всю эту
3648. 2:58:53историю теперь ссылки в базе
3649. 2:58:57300 при
3650. 2:59:00наведении можем позволить себе
3651. 2:59:02немножечко поярче её
3652. 2:59:05сделать У нас
3653. 2:59:07есть elevation опять работаем С палитрой
3654. 2:59:11D Е Е темнее нет вот нам нужно подобрать
3655. 2:59:16такой самый тёмный оттенок который видно
3656. 2:59:18хорошо для вот этого первого цвета то
3657. 2:59:21есть видите 900 уже всё А 800 ещё видно
3658. 2:59:25и от него начинаем плюсовать 700 600 вот
3659. 2:59:30у нас получился такой
3660. 2:59:32elevation дефолтный
3661. 2:59:34Бордер Ну вот этот не
3662. 2:59:36[музыка]
3663. 2:59:37видно этот уже похож на
3664. 2:59:41Бордер то есть мы взяли семисотый цвет
3665. 2:59:44Ну следующий Понятно шестисотый
3666. 2:59:48а праймери у нас 300 так двигаемся
3667. 2:59:52дальше красим нашу
3668. 2:59:55кнопку 300 достаточно яркая но при этом
3669. 2:59:58Ну как бы сам цвет стрий ничего не надо
3670. 3:00:01делать чёрный цвет очень
3671. 3:00:04нравится нашей нашему плагину по
3672. 3:00:07контрасту и мне тоже на тёмной теме
3673. 3:00:09выглядит хорошо то есть если бы здесь он
3674. 3:00:11был
3675. 3:00:12белый это выглядело бы хуже так как
3676. 3:00:15будто видите это дырка и фон через неё
3677. 3:00:17просвечивает
3678. 3:00:19и просто
3679. 3:00:26прибавляю вот это палитра D если я вас
3680. 3:00:30запутал desaturate То есть у неё
3681. 3:00:32немножко
3682. 3:00:34[музыка]
3683. 3:00:35увлек серую я здесь оставлю для скорости
3684. 3:00:40secondary должна быть бледнее поэтому мы
3685. 3:00:43её уводи Давайте попробуем 800 слишком
3686. 3:00:46700
3687. 3:00:48Ну так хорошо попробуем цвет брендовый
3688. 3:00:53Для текста чтобы у них получилось
3689. 3:00:55родственны связь немножко не хватает но
3690. 3:00:57выглядит классно Ну то есть можете
3691. 3:01:00конечно вывести в белый Если хотите
3692. 3:01:02контраст или подобрать что-то вот отсюда
3693. 3:01:06вот допустим сотку Ну вот кстати вот так
3694. 3:01:08хорошо и контраст и по красоте ВС
3695. 3:01:13симпатично этот
3696. 3:01:16700
3697. 3:01:18700
3698. 3:01:20600 500 текст
3699. 3:01:27сотка и пытаемся то же самое проделать
3700. 3:01:30с со второстепенной кнопкой другого
3701. 3:01:33стиля Я бы текст тоже взял
3702. 3:01:37сотку так это просто всё
3703. 3:01:44300d и поехали
3704. 3:01:48делаем заливку это заливка 700 плюс так
3705. 3:01:53всё перепутал здесь здесь текст 100 Ну
3706. 3:01:56то есть это вот этот цвет 100 здесь
3707. 3:02:00соответственно тоже везде текст 100 а
3708. 3:02:03цвета 700
3709. 3:02:05и
3710. 3:02:08600 здесь нужно Ну текст тоже будет 100
3711. 3:02:13А вот цвет бордера Ну давайте возьмём из
3712. 3:02:16наших
3713. 3:02:19чтобы он не выбивал так сильно
3714. 3:02:22Ага хорошо
3715. 3:02:28выглядит цвет бордера у нас тоже
3716. 3:02:31700 и здесь получается тоже
3717. 3:02:41самое забавный эффект кстати
3718. 3:02:43симпатичный и перейдём к покраске наших
3719. 3:02:46макетов
3720. 3:02:48Ну опять красим
3721. 3:02:52текст брендо у нас везде
3722. 3:03:03300 Я кстати так и не разобрался как
3723. 3:03:06работает мульти
3724. 3:03:14выделение видите оно у меня почему-то не
3725. 3:03:17хочет выделять всё
3726. 3:03:19остальное Если знаете как то Подскажите
3727. 3:03:23в
3728. 3:03:24комментариях так вот это всё тоже 300 А
3729. 3:03:28вот это 400 потому что надо на 1 тон
3730. 3:03:31ниже сделать теперь
3731. 3:03:36кнопки здесь у нас остаётся
3732. 3:03:39чёрный Ну наш чёрный 14 14
3733. 3:03:4414 и вот здесь Ой как хорошо серая
3734. 3:03:46кнопка смотрится
3735. 3:03:49с белым цветом но мы красим в цветную
3736. 3:03:53палитру вы в дизайне можете это
3737. 3:03:56комбинировать А мы будем пробовать
3738. 3:03:58использовать наши secondary
3739. 3:04:01цвета чтобы проверить что мы там на
3740. 3:04:03подбирали вообще
3741. 3:04:05приемлемо
3742. 3:04:10приятнее так здесь поработаем с нашей
3743. 3:04:13цветной кнопочкой
3744. 3:04:22Вот кстати здесь почему-то не так плохо
3745. 3:04:24выглядит как в предыдущем варианте на
3746. 3:04:26светлой теме вообще ну как бы у Вас
3747. 3:04:30должно консистентность и светлая и
3748. 3:04:32Тёмная тема То есть я не могу здесь
3749. 3:04:34отдельно это выбрать поэтому Если уж мы
3750. 3:04:36тут выбрали залитую то тут Нам тоже надо
3751. 3:04:39будет сделать Ну как бы тоже самое иначе
3752. 3:04:43это будет странно выглядеть при
3753. 3:04:45переключении некон будет Я тут тоже
3754. 3:04:48самое сделаю что там зарю вот эти кнопки
3755. 3:04:53это знаете почему она здесь не катит
3756. 3:04:54Практически во всех дизайнах потому что
3757. 3:04:56у меня дизайн весь с бордера и плашками
3758. 3:04:58но они очень часто встречаются и поэтому
3759. 3:05:01здесь вот эта вот история она начинает
3760. 3:05:03шуметь очень сильно поэтому я стараюсь
3761. 3:05:05избегать вот этих вот кнопок обводок в
3762. 3:05:07обводка в обводка и так далее так красим
3763. 3:05:11дальше так это на основной цвет
3764. 3:05:14активный иконос пром
3765. 3:05:17что
3766. 3:05:23получилось Ну в
3767. 3:05:27принципе сейчас я ещё посмотрю как она с
3768. 3:05:30залитыми иконками
3769. 3:05:34выглядит в принципе она не особо мешает
3770. 3:05:36Вот она больше но она чуть-чуть темнее и
3771. 3:05:40поэтому в целом Ну то есть иерархия
3772. 3:05:42Здесь вс-таки через вот эту
3773. 3:05:44штуку вот если я её сделаю такого жеве
3774. 3:05:49а ну это как раз активный
3775. 3:05:52будет Ну нет она всё равно она всё равно
3776. 3:05:56хорошо в иерархии стоит Ну на мой
3777. 3:06:00взгляд Если знаете как сделать лучше
3778. 3:06:02кстати Пишите в комментариях присылаете
3779. 3:06:04свои варианты вот в четвёртой версии
3780. 3:06:06откорректируйте
3781. 3:06:08у нас должно быть бдыщ
3782. 3:06:12А вот это у нас должно быть не бдыщ
3783. 3:06:18но это слишком
3784. 3:06:20темно скорее наверно Вот
3785. 3:06:25так А если здесь
3786. 3:06:28сделать белый
3787. 3:06:31текст плохо будет
3788. 3:06:34выглядеть Ну вот по сути два стиля Вот
3789. 3:06:37таких
3790. 3:06:38получилось здесь я бы добавил немножко
3791. 3:06:41толщины чтобы прям с иерархией точно не
3792. 3:06:44было никаких проблем
3793. 3:06:47вот как-то
3794. 3:06:50так смотрите дальше я пропущу оранжевый
3795. 3:06:55цвет потому что он будет строиться по
3796. 3:06:57тем же самым принципам что и предыдущие
3797. 3:06:59три которые я показал что бы вы тут не
3798. 3:07:01взяли всё будет тоже самое я для вас
3799. 3:07:04построю сегодня ещё экстремальный
3800. 3:07:07бледно-розовый а покажу обязательно
3801. 3:07:10нюансы работы с жёлтым цветом с разными
3802. 3:07:12оттенками даже вот здесь серединку
3803. 3:07:14возьму и покажу работу с кило цветами
3804. 3:07:18все палитры которые я не построил Вам
3805. 3:07:21нужно будет построить самостоятельно в
3806. 3:07:23качестве домашнего задания Так ну что
3807. 3:07:26перейдём к экстремальному бледно
3808. 3:07:28розовому Ну вот здесь как бы Как видите
3809. 3:07:31текст я точно не смогу покрасить в этот
3810. 3:07:33цвет поэтому за primary текст я возьму
3811. 3:07:35родственный оттенок вот допустим 400
3812. 3:07:38опять у меня контент не проходит Ну
3813. 3:07:40давайте 500 С 500 видите тоже проблема
3814. 3:07:43Ну то есть этот текст должен быть
3815. 3:07:46немножко ещё темнее вот типа 600 но
3816. 3:07:49может быть
3817. 3:07:51придирки А тут какая-то фуксия полезла
3818. 3:07:54поэтому давайте мы сразу с
3819. 3:07:57генерируют
3820. 3:08:02названием То есть я хочу построить
3821. 3:08:05палитру
3822. 3:08:06бледно-розовые Куда же мне тыкнуть
3823. 3:08:08наверное попробую в 500 вот у меня пошли
3824. 3:08:11бледно-розовые оттенки давайте мы их
3825. 3:08:14пою прямо здесь вот я возьму хрому и
3826. 3:08:18начну и начну её убавлять чтобы брать
3827. 3:08:22электричество сначала у меня получаются
3828. 3:08:24такие
3829. 3:08:25достаточно Скучновато тона и вот мы что
3830. 3:08:29можем сделать мы можем в целом поднять
3831. 3:08:33короче уровень lightness всей
3832. 3:08:44палитры Давайте я вам покажу для
3833. 3:08:46сравнения какой был
3834. 3:08:51оригинал сем вот эту
3835. 3:08:54б 11
3836. 3:08:57цветов построим от
3837. 3:09:00пятисот видите она становится бледнее
3838. 3:09:04Вот давайте мы попробуем ещё немножко
3839. 3:09:07Хрома
3840. 3:09:11поджать Ну допустим хочется нам вот
3841. 3:09:13такой стиль надоели нам дофаминовые
3842. 3:09:15оттенки Мы хотим всё вот в такую бледную
3843. 3:09:18штуку увести Ну вот пускай у нас она
3844. 3:09:20будет такая палитра на запас вы
3845. 3:09:24понимаете Я надеюсь зачем я её строю Ну
3846. 3:09:27то есть здесь Суть в том что вот эти
3847. 3:09:30цвета они мне нравятся но вот отсюда
3848. 3:09:32начинаются электрические цвета если мы
3849. 3:09:36хотим Ну такой вот цвет вот этой вот
3850. 3:09:38увядающей розы вот этот цвет только я
3851. 3:09:41испортил
3852. 3:09:44Сейчас я его починю
3853. 3:09:52Вот и вот это вот немножко починю
3854. 3:09:55тоже чуть-чуть поярче его сделаю
3855. 3:09:58чуть-чуть
3856. 3:10:04побледнела грязи не допускать Вот
3857. 3:10:07давайте Теперь попробуем найти текст
3858. 3:10:09который у нас отвечает контрасту Ну как
3859. 3:10:13правило он будет находиться где-то в
3860. 3:10:15середине или чуть дальше середины
3861. 3:10:21Опа видите сходу попали и он уже не
3862. 3:10:24электрический вот
3863. 3:10:26Сравните вот как бы вот это И вот это
3864. 3:10:29вот что к вот этому больше подходит
3865. 3:10:31больше подходит вот что-то такое
3866. 3:10:33Спокойно это я взял
3867. 3:10:36400 значит вот это мину о
3868. 3:10:40300 вот
3869. 3:10:45это тут интересно стати Давайте смотреть
3870. 3:10:49если это
3871. 3:10:51300 в принципе считывается вы кстати
3872. 3:10:55можете это шрифтом порева просто вот
3873. 3:10:57допустим вот так это использовать и
3874. 3:10:59тогда будет
3875. 3:11:00нормально
3876. 3:11:03оставляем 300
3877. 3:11:07300 мину о
3878. 3:11:13200
3879. 3:11:15200 не проходит по контрасту Да не
3880. 3:11:18должен проходить потому что Это disable
3881. 3:11:21сотка так вот здесь что-то побольше
3882. 3:11:26сотки 200 и основной
3883. 3:11:31цвет Ну как бы активный цвет мы же не
3884. 3:11:34можем взять активным цветом вот этот то
3885. 3:11:36есть нам
3886. 3:11:37придётся выкручиваться Почему я вообще
3887. 3:11:39использую цвета из середины вот этот
3888. 3:11:42будет у нас для фонов то есть мы за счёт
3889. 3:11:44фона создадим брендовый эффект а
3890. 3:11:47Ну активный цвет Он должен ВС равно быть
3891. 3:11:50активным блин Поэтому нам тут деваться
3892. 3:11:53некуда дальше Поехали Ну с текстом всё
3893. 3:11:58просто точнее со ссылками мы тут уже всё
3894. 3:12:04проставить её будем вести к брендовом
3895. 3:12:07цвету немножко будем делать
3896. 3:12:09бледнее У нас
3897. 3:12:12есть ны остаются такими можно бледный
3898. 3:12:17фон брендового цвета и ему в
3899. 3:12:22помощь возм какой-нибудь
3900. 3:12:25потемнее Так здесь у нас тоже самое
3901. 3:12:28борде
3902. 3:12:30цветные Ну если полтинник возьмём вообще
3903. 3:12:33ничего не видно
3904. 3:12:36100
3905. 3:12:38Ну не всё-таки надо 100 брать он не
3906. 3:12:42должен торчать сильно иначе будет много
3907. 3:12:45внимания привлекать больше чем контент
3908. 3:12:48То есть это будет
3909. 3:12:50100
3910. 3:12:51200 и активный цвет мы выбрали
3911. 3:12:57400 так работаем
3912. 3:13:01дальше кнопочки Вот здесь мы должны
3913. 3:13:04сохранить брендовый цвет как
3914. 3:13:07основной текст у нас 400 То есть
3915. 3:13:10получается 500 плю ой
3916. 3:13:1550 п 400 что с
3917. 3:13:18контрастом не очень хорошо Ну давайте
3918. 3:13:21возьмём 500 Вот это уже лучше можно
3919. 3:13:25кстати чтобы не
3920. 3:13:28париться Вот это тоже на 500
3921. 3:13:32заменить и вот здесь тогда проблема
3922. 3:13:37исчезнет
3923. 3:13:39совсем Давайте прибавим один оттенок вот
3924. 3:13:44здесь тоже будет 500
3925. 3:13:48вот здесь будет
3926. 3:13:51500 да и всё и больше и вот здесь вот
3927. 3:13:54будет
3928. 3:13:56500 Всё теперь у нас э как бы с палитрой
3929. 3:14:00Нет проблем просто эти кнопки будут
3930. 3:14:03очень часто встречаться так как они
3931. 3:14:05основные Ну и поехали здесь там было 50
3932. 3:14:09стало 100 здесь станет 200
3933. 3:14:17Разрешите Я кстати поправлю
3934. 3:14:20там везде надписи чтобы не
3935. 3:14:24запутались Вы когда будете смотреть это
3936. 3:14:28в в гайде в
3937. 3:14:31самом Как же сделать secondary по
3938. 3:14:34отношению к этой кнопке Я думаю у нас
3939. 3:14:38тут сразу пропадает вот этот вариант
3940. 3:14:40потому что ну видите это же он и есть то
3941. 3:14:42есть я от него просто
3942. 3:14:44избавляюсь ие всего у меня не получится
3943. 3:14:48сделать такую кнопку тоже потому что у
3944. 3:14:50нас основной цвет видите он бледный
3945. 3:14:52поэтому от Вот этого я тоже избавляюсь и
3946. 3:14:55по факту у нас остаётся всего лишь два
3947. 3:15:00варианта как это
3948. 3:15:03заседать я добавлю немножко цвета
3949. 3:15:12толщины так Итого у нас получается
3950. 3:15:15Здесь са 50 п
3951. 3:15:18500 здесь заливка 50 полная и здесь
3952. 3:15:25заливка 100 Ну так будет странно
3953. 3:15:28выглядеть
3954. 3:15:29кстати поэтому Можем немножко и схитрить
3955. 3:15:33и сделать вот такой
3956. 3:15:35прикол Ну конечно это если вам
3957. 3:15:37фронтендер позволят это сделать То есть
3958. 3:15:39я что сделал Я фон оставил такой же а у
3959. 3:15:44обводки прибавил в момент
3960. 3:15:47активности яркость то есть вот ещё вот
3961. 3:15:50так
3962. 3:15:51сделал так Поехали дальше Вот это всё
3963. 3:15:55вам потом надо будет в токены зашить для
3964. 3:15:57светлой и тёмной темы это токены мы не
3965. 3:15:59будем разбирать на этом уроке он так
3966. 3:16:01получился огромный вот поэтому токены
3967. 3:16:04будут в другой раз Итак Ну тут нам
3968. 3:16:07тестировать нечего Поэтому просто красим
3969. 3:16:23Ну и второстепенную Ну не
3970. 3:16:25расстраивайтесь что здесь не получилось
3971. 3:16:27других цветов возьмёте серую Давайте нам
3972. 3:16:30на помощь придёт серая световая
3973. 3:16:34палитра тут у нас огромная куча кнопок и
3974. 3:16:39мы просто
3975. 3:16:40решим что из этого станет secondary если
3976. 3:16:43нам не подойдёт наша Вот такая кнопочка
3977. 3:16:50Хотя я не вижу на самом деле причин по
3978. 3:16:53который она может не подойти так как у
3979. 3:16:55них одинаковые
3980. 3:17:04цвета и Давайте серый ещё попробуем
3981. 3:17:17Какая сери кнопка здесь будет лучше
3982. 3:17:19подходить Ну явно не вот
3983. 3:17:23эта Я думаю что либо эта либо Вот
3984. 3:17:30такая ну вот видите даже вот этот
3985. 3:17:33вариант мне больше нравится он такой
3986. 3:17:36лёгкий воздушный поэтому короче вот это
3987. 3:17:40мы тоже
3988. 3:17:42заем для этой
3989. 3:17:44палитры вот ну бывает Я это вам положу
3990. 3:17:48сюда чтобы у вас
3991. 3:17:55сохранилось возьмём нашу палитру и
3992. 3:18:00пойдём покрасим тёмную тему Ну вот здесь
3993. 3:18:03вот мы сейчас разгуляе конечно То есть у
3994. 3:18:06нас основной цвет розовый то есть мы
3995. 3:18:09Весь белый немножечко разом даже видите
3996. 3:18:13пропадает брендовый эффект
3997. 3:18:16здесь текст у нас розоватый А тут как бы
3998. 3:18:19практически незаметно что он
3999. 3:18:22розоватый может мы даже вот смотрите
4000. 3:18:25докуда мы можем двигаться пока у нас не
4001. 3:18:30станет контраст
4002. 3:18:33пропадать вот 200 идеально он и розовый
4003. 3:18:37и при этом очень
4004. 3:18:40контрастный это мы для базового текста
4005. 3:18:43сделаем Second будет темнее но тут вот
4006. 3:18:48короче опять видите Нижняя палитра нам
4007. 3:18:51подкладывает свинью мы с вами подбираем
4008. 3:18:54из
4009. 3:18:56верхний так не похоже не
4010. 3:19:00похоже не
4011. 3:19:02похоже цвет должен быть Примерно вот
4012. 3:19:04такой супер грязный у нас такой есть
4013. 3:19:10вообще Давайте попробуем его посмотреть
4014. 3:19:13какой к нему будет самый близкий Вот мне
4015. 3:19:16кажется вот этот или чтобы у
4016. 3:19:20нас так 300 вот если я сейчас у него
4017. 3:19:23Отниму его яркость то что
4018. 3:19:28будет Угу тон тоже надо
4019. 3:19:32отнимать Вот кстати для таких задач вот
4020. 3:19:35этот плагин с о Color он лучше подходит
4021. 3:19:39смотрите он сразу показывает Ака Что оно
4022. 3:19:42как бы не ок и здесь сразу можно
4023. 3:19:47поработать с Хромой Ну короче что-то
4024. 3:19:50чует моё сердце что придётся нам с серым
4025. 3:19:54цветом его компоновать сейчас я вам
4026. 3:19:57покрашу покажу что типа нет не
4027. 3:20:01катит слишком сложно слишком много
4028. 3:20:04заморочек не должно быть так много
4029. 3:20:05заморочек если начинаются заморочки
4030. 3:20:08бегите
4031. 3:20:10просто не юзайте эту шту и тоже оставим
4032. 3:20:13серым тогда у
4033. 3:20:17история так отдельностоящая
4034. 3:20:24иконка основной мы выбрали
4035. 3:20:29300 это
4036. 3:20:31слишком Ну вот так наверное это у нас
4037. 3:20:39900 запишем ещё что вот
4038. 3:20:43этот это 200 а не 300
4039. 3:20:53здесь я не совсем правильно нарисовал
4040. 3:20:55Сейчас я напишу что мы здесь серый
4041. 3:20:57оставляем просто А этот не
4042. 3:21:02берём так ссылочки ссылочки ссылочки
4043. 3:21:06Такого же
4044. 3:21:11цвета Hover Press немножко можно взять
4045. 3:21:15поярче
4046. 3:21:19200
4047. 3:21:22300
4048. 3:21:27400 и й оставлю такую
4049. 3:21:32серую
4050. 3:21:34фоны минималка для чёрного ещё немножко
4051. 3:21:38для
4052. 3:21:39чёрного ещё немножко для
4053. 3:21:42чёрного по бордера
4054. 3:21:49слишком Вот это видно Ну кстати очень
4055. 3:21:52сильно
4056. 3:21:53видно Давайте посмотрим варианты Ну
4057. 3:21:56наверное вот этот оставлю это у нас
4058. 3:22:00900 Ну это значит будет 800 А это
4059. 3:22:05будет 200 Как наш основной цвет
4060. 3:22:16primary цвет так как у нас primary цвет
4061. 3:22:20это типа тут ну полтинник который на
4062. 3:22:22Чёрном не различим что он розовый мы
4063. 3:22:24взяли вместо него 200 то здесь тоже
4064. 3:22:27будет
4065. 3:22:29200
4066. 3:22:31текст сейчас контраст контраст контраст
4067. 3:22:34вернём текст у нас
4068. 3:22:37отличный чёрный цвет очень
4069. 3:22:41стильно если
4070. 3:22:43хотите можете его немножко взять отсюда
4071. 3:22:45но мне и чёрный нравится
4072. 3:22:50наша Давайте плюс
4073. 3:22:52о
4074. 3:22:54300
4075. 3:23:03400 Я не пользуюсь практически нижней
4076. 3:23:06палитрой Ну вот
4077. 3:23:10точнее Вот так вот я сделаю вам типа мне
4078. 3:23:13дальше интересны вот эти вот цвета то
4079. 3:23:15есть я могу вот это
4080. 3:23:17заю если где-то мне надо но в целом как
4081. 3:23:20бы вот так
4082. 3:23:23оставлю
4083. 3:23:26secondary здесь вот это может быть 200 п
4084. 3:23:32200 вот эта
4085. 3:23:35штука что-то из наших фонов Вот так
4086. 3:23:39например
4087. 3:23:41Ну вот так вот норм
4088. 3:23:46это у нас это 900 А вот это покрасим наш
4089. 3:23:52основной цвет вот смотрите вот здесь вот
4090. 3:23:54кстати этот вариант в котором белый цвет
4091. 3:23:56смотрится лучше чем родственный
4092. 3:23:59розовый Вот видите То есть он Так
4093. 3:24:02смотрится как-то немножко Грязнова А вот
4094. 3:24:05так вот смотрится чище при этом вот эта
4095. 3:24:07штука смотрится хорошо именно с розовым
4096. 3:24:11цветом поэтому здесь как бы Вайт на
4097. 3:24:15кнопках А вот это Блэк Ну то есть мы
4098. 3:24:17просто текст
4099. 3:24:46попробовать можно с
4100. 3:24:49белым Ну условно Белый там вообще F5 F5
4101. 3:24:53Ну вот так мне кажется будет
4102. 3:24:59хорошо и Красим
4103. 3:25:02фон так это девятисотый
4104. 3:25:06ну и здесь соответственно будет
4105. 3:25:10800 и
4106. 3:25:14700 а не даже 900 всё-таки
4107. 3:25:18и
4108. 3:25:20800 ну классно
4109. 3:25:25Вроде так теперь раскрашиваем наши
4110. 3:25:29экраны и проверяем нашу цветовую схему
4111. 3:25:57так
4112. 3:26:07иконки 900 200 это тоже пожалуй уберу
4113. 3:26:12чтобы не мешало мне
4114. 3:26:21Ну вот так вот как-то Я
4115. 3:26:29работаю ну чтобы брендовый цвет не
4116. 3:26:31обижать то есть он всё-таки
4117. 3:26:35нам
4118. 3:26:38нужен Так это красим это
4119. 3:26:42красим это всё красим в основной с Серым
4120. 3:26:45хороо
4121. 3:26:52смотрится Так что нам ещё надо покрасить
4122. 3:26:56здесь с серым хорошо но нам надо
4123. 3:26:58проверять наши secondary
4124. 3:27:01кнопки так тоже хорошо
4125. 3:27:05выглядит А если второстепенная
4126. 3:27:14там такая толстая
4127. 3:27:16не очень
4128. 3:27:19толстая Ну в
4129. 3:27:22принципе жить
4130. 3:27:24можно Ну вот это мне больше нравится ну
4131. 3:27:28тут как бы зависит от того какой вы
4132. 3:27:31хотите эффект добиться но конкретно для
4133. 3:27:33этого макета не очень хорошо выглядит
4134. 3:27:35так здесь
4135. 3:27:36попробуем вот
4136. 3:27:38такую
4137. 3:27:40плюс вот
4138. 3:27:43такую вот это кстати ничего это лучше
4139. 3:27:46выглядит
4140. 3:27:50оставляем Ну и не забывайте про
4141. 3:27:53возможность комбинации с Серым и нам
4142. 3:27:56баннер надо
4143. 3:27:58быдыщ и баннер который
4144. 3:28:03спокойный вот пожалуйста такие макеты
4145. 3:28:06для тёмной
4146. 3:28:07темы Так теперь переходим к ярким цветам
4147. 3:28:11у нас есть вот такой жёлтый мы возьмём
4148. 3:28:14его за основной и попроб
4149. 3:28:16вот смотрите первый прикол в том что мы
4150. 3:28:20не можем использовать жёлтый
4151. 3:28:23текст и как бы для
4152. 3:28:26контраста нам придётся его просто не
4153. 3:28:29использовать ни для
4154. 3:28:32праймери для иконок мы можем его
4155. 3:28:34использовать тек Эмен
4156. 3:28:37видите это нормально с серым цветом
4157. 3:28:40Самое оно Можно попробовать сделать
4158. 3:28:42какой-нибудь
4159. 3:28:46историю Но как видите есть проблема
4160. 3:28:49чтобы их избежать Если Вы прям Ну у вас
4161. 3:28:52есть чёткое намерение сделать жёлтую
4162. 3:28:55иконку Вы можете ей
4163. 3:29:01добавить сейчас такое ощущение что
4164. 3:29:03градиентная
4165. 3:29:06а очень мягкую
4166. 3:29:11обводок сейчас вот допустим я возьму
4167. 3:29:14самый бледно-жёлтый
4168. 3:29:16если его не видно
4169. 3:29:18вообще то я добавляю строк но не
4170. 3:29:22основного цвета иначе будет шумно
4171. 3:29:24выглядить А вот допустим
4172. 3:29:27200 Ну и наверное её лучше сделать
4173. 3:29:30потолще и по
4174. 3:29:33бледнее то есть вот вот такой приём
4175. 3:29:36помогает выделить штуку которая с фоном
4176. 3:29:39совершенно не
4177. 3:29:41контраст вот такое Вы можете
4178. 3:29:45наблюдать того что зачем
4179. 3:29:47мучить
4180. 3:29:49людей дизайнеров и разработчиков и
4181. 3:29:52юзеров то возьмём просто серый И будем
4182. 3:29:54превращать его в
4183. 3:29:55жёлтый со ссылками мы их оставляем
4184. 3:29:59чёрными здесь ничего не поделаешь
4185. 3:30:02с
4186. 3:30:05фонами Давайте вот бахнем жёлтый
4187. 3:30:11фон
4188. 3:30:13так так
4189. 3:30:16в принципе ну для чего-то он может
4190. 3:30:18подходить можно взять немножко
4191. 3:30:29поярче короче с фонами будем разбираться
4192. 3:30:32Когда будем банеры рисовать потому что
4193. 3:30:34здесь без окружения без текста очень
4194. 3:30:37тяжело подобрать ховеры жёлтые то есть
4195. 3:30:41по умолчанию серые здесь он может быть
4196. 3:30:44активным
4197. 3:30:46То есть это у нас
4198. 3:30:48400 просто видите комбинируем с Серым и
4199. 3:30:51всё потому что не хватает контрастность
4200. 3:30:55и
4201. 3:30:56цвет основной У нас вот такой текст
4202. 3:31:00сразу жёстко
4203. 3:31:01проваливается поэтому мы
4204. 3:31:05возьмём наш чёрный цвет Ну наш чёрный
4205. 3:31:08цвет - это 14 14
4206. 3:31:1114 Вот у него с контрастом сразу всё в
4207. 3:31:14порядке
4208. 3:31:17можем сделать немножко темнее но сразу
4209. 3:31:19натыкается на такую проблему что у
4210. 3:31:21жёлтого цвета нету как бы тёмных
4211. 3:31:24оттенков прямо совсем там будет провал
4212. 3:31:27на графике и он будет уходить либо в
4213. 3:31:30коричневый либо в болотный либо в
4214. 3:31:31какой-то вот такой вот цвет
4215. 3:31:33А давайте посмотрим вообще что бывает у
4216. 3:31:38нас с жёлтыми
4217. 3:31:39оттенками у меня тут вот был такой
4218. 3:31:44набор вот
4219. 3:31:46как с ними работать вообще Вот видите
4220. 3:31:48вот эти цвета они плюс-минус похожи но
4221. 3:31:51они уходят либо в оранжева либо в
4222. 3:31:53коричневый либо в зелёный и нам надо
4223. 3:31:56выбрать Ну в какой цвет Мы хотим чтобы
4224. 3:31:57они уходили если мы построим вот эту
4225. 3:32:02палитру через плагин со страшным
4226. 3:32:09названием то вы увидите
4227. 3:32:12[музыка]
4228. 3:32:13что у нас 400
4229. 3:32:16что цвета могут быть такие достаточно
4230. 3:32:19Грязнова особенно вот здесь вот в нижней
4231. 3:32:21части
4232. 3:32:22палитры Можем попробовать их
4233. 3:32:27подтянуть Ну как видите это уже
4234. 3:32:30совершенно не жёлтые цвета получаются вы
4235. 3:32:32кстати можете Вот с помощью ью Ну
4236. 3:32:34непосредственно самого цвета
4237. 3:32:36регулировать В какой цвет Будет уходить
4238. 3:32:38ваш жёлтый То есть он может уходить в
4239. 3:32:40оранжевый может уходить в зелёный То
4240. 3:32:42есть у вас здесь ну потому что он в
4241. 3:32:44принципе при Смени цтов
4242. 3:32:46но с этим мы будем разбираться когда
4243. 3:32:48тёмную тему будем генерить поэтому я
4244. 3:32:50думаю то что мы будем осветлять пока
4245. 3:32:56можем чтобы не уходить сильно от
4246. 3:33:01нашего основного цвета
4247. 3:33:05брендового так это
4248. 3:33:08400 это
4249. 3:33:11300 это 200
4250. 3:33:16Я бы взял серый цвет опять же ну потому
4251. 3:33:20что с вот этой заливкой
4252. 3:33:22у нас
4253. 3:33:25будут возникать
4254. 3:33:30проблемы Можно конечно попробовать вот
4255. 3:33:32так но кажется
4256. 3:33:35что потенциально это может быть не очень
4257. 3:33:38красиво Ну давайте я построю на всякий
4258. 3:33:41случай и потом если что вычеркни это 100
4259. 3:33:47это будет
4260. 3:33:49200 это будет
4261. 3:33:53300 ну комбинация с серым Кстати мне
4262. 3:33:56кажется самая такая
4263. 3:33:59отличная так
4264. 3:34:01здесь жёлтая
4265. 3:34:05обводка обводка
4266. 3:34:09400 и здесь фон
4267. 3:34:12сотка и здесь фон 200
4268. 3:34:16тоже серы потому что ну если мы будем
4269. 3:34:17дилить там вообще будет ничего не видно
4270. 3:34:19можно кстати дилить вот таким
4271. 3:34:22способом типа вот просто погасить
4272. 3:34:30текст взять наш
4273. 3:34:33й текстовый стиль и вот таким образом
4274. 3:34:35сделать Ну кстати для основного
4275. 3:34:40жёлтого такое не прокатит видите всё
4276. 3:34:43равно он
4277. 3:34:46только если совсем тушить но кнопка
4278. 3:34:47очень активная получается Поэтому я бы
4279. 3:34:50оставил
4280. 3:34:53серые Так ну и вот эти кнопки по сути
4281. 3:34:57нам тут некуда делать бледнее особо
4282. 3:35:01Можем попробовать сейчас увеличим
4283. 3:35:04толщину сделаем сотку но видите она
4284. 3:35:07практически не ну типа не работает
4285. 3:35:10поэтому не видно её
4286. 3:35:16поэтому мы с Вами просто её
4287. 3:35:18зачеркну сразу
4288. 3:35:22же вот это под
4289. 3:35:24вопросом Теперь попробуем это на
4290. 3:35:29практике то есть вот смотрите вот этот
4291. 3:35:31текст
4292. 3:35:33мы не можем с ним
4293. 3:35:35ничего поделать он у нас остаётся чёрным
4294. 3:35:40или
4295. 3:35:40серым А наши иконочный мы просто красим
4296. 3:35:47в Prim
4297. 3:35:52цвет либо оставляем чёрными в
4298. 3:35:55зависимости от того насколько у вас
4299. 3:35:57оттенок считываемый То есть если у вас
4300. 3:35:58брендовый цвет из светлых то вы помните
4301. 3:36:01Да он исчезнет просто тогда тогда будет
4302. 3:36:04чёрная Кстати если у вас в розовом такая
4303. 3:36:08же проблема Вот видите мы оставляем
4304. 3:36:14чные красить в какой-то более Ну цвет
4305. 3:36:18поярче иначе у нас по контрасту эта
4306. 3:36:20штука не
4307. 3:36:21пройдёт то есть вот Я на пример проведу
4308. 3:36:24Чтобы у вас было так и было
4309. 3:36:29так И здесь тоже
4310. 3:36:36оставлю ну помните Да он чуть бледнее
4311. 3:36:39там на
4312. 3:36:41отте серым кстати тоже можно оставить Ну
4313. 3:36:44то есть если особо важная инфа но так
4314. 3:36:46как она важная то наверное Либо так либо
4315. 3:36:49так Так теперь с кнопочками с
4316. 3:36:52нашими вот здесь я не знаю обводку Мне
4317. 3:36:55кажется она не потянет эта
4318. 3:36:58иконка Ну хотя
4319. 3:37:01кстати ну можно так оставить в
4320. 3:37:05принципе так это сразу красим в
4321. 3:37:12брендовый и вот эти вещи просто
4322. 3:37:18дублируем И вот так нормально
4323. 3:37:22и я думаю что с серой кнопкой тоже будет
4324. 3:37:28нормально Вот поэтому для сери Короче я
4325. 3:37:31бы здесь оставлял серый но мы сейчас
4326. 3:37:35чисто вместе с вами
4327. 3:37:39попробуем использовать по максимуму
4328. 3:37:42возможности жёлтого цвета и посмотреть
4329. 3:37:44насколько это подходит Вот это например
4330. 3:37:50кнопка так красим её в
4331. 3:37:53сотку в принципе тоже Рабочая схема Ну
4332. 3:37:56вот так мне кажется более аккуратно Вот
4333. 3:37:59так вот побольше акцента
4334. 3:38:01получается так вот эту кнопку оставляем
4335. 3:38:04жёлтый а со второй делаем
4336. 3:38:08тест обводку её покрасить в жёлтый
4337. 3:38:12цвет Ну вот смотрите
4338. 3:38:15На мой взгляд вот это вот это тоже Good
4339. 3:38:19Вот это чуть-чуть похуже но вычёркиваю я
4340. 3:38:23их прямо не буду наверное оставлю ну
4341. 3:38:27вопросик оставлю и баннеры можно
4342. 3:38:30оставить серые и чёрные они достаточно
4343. 3:38:32активные ну попробуем сделать
4344. 3:38:38дыщ и сделать лайтовый н ну видите он
4345. 3:38:43совсем не подходит он теряется это
4346. 3:38:45полтинник вот если 100 сделать Ну вот
4347. 3:38:48так уже получше и
4348. 3:38:51обводок тоже основного
4349. 3:38:54цвета Вот кстати это интересно вот даже
4350. 3:38:59200 Ну в принципе вот 100 А вот 200
4351. 3:39:03чу-чуть посвежее выглядит такой он
4352. 3:39:06бледно-жёлтый
4353. 3:39:08симпатичный может кстати Ну нет кнопочка
4354. 3:39:13всё-таки проваливается
4355. 3:39:16короче здесь либо
4356. 3:39:18100 либо 200 вот я вот так вот вам
4357. 3:39:22сделаю пускай останется тоже самое с
4358. 3:39:24тёмной Темой с тёмной Темой нам будет
4359. 3:39:26легче жить на порядок мы с вами
4360. 3:39:30попробуем всё-таки
4361. 3:39:33сгенерировать нашу палитру с противными
4362. 3:39:36цветами потому что вы помните Да что эти
4363. 3:39:38противные цвета они могут получше
4364. 3:39:41работать в мной теме
4365. 3:39:4811 и Давайте экспериментировать какой же
4366. 3:39:51цвет нам взять чтобы получить нужную
4367. 3:39:53палетку это не
4368. 3:39:56то
4369. 3:39:59400 какой-то супер коричневый
4370. 3:40:03цвет может 300 Вы можете и вот здесь вот
4371. 3:40:07поиграть в принципе но плагин немножко
4372. 3:40:10глют Поэтому может снет м палитру Мне не
4373. 3:40:15нравится эта
4374. 3:40:17палитра так Давайте ещё раз
4375. 3:40:24попробуем возьмём основной
4376. 3:40:28цвет Он у нас уходит в какой-то такой
4377. 3:40:32болотнова попробуем чуть-чуть
4378. 3:40:35подтянуть по Хроме
4379. 3:40:48и может быть немножко убавить Так ну это
4380. 3:40:52оставим или прибавим по
4381. 3:40:55светлости чтобы он всё-таки был жёлтым а
4382. 3:40:58не
4383. 3:41:03зелёным и последняя корректировка - это
4384. 3:41:07по Хью То есть она позволит нам сделать
4385. 3:41:10из зелёного немножко более жёлтый цвет
4386. 3:41:15Ну тут уже видите пошёл
4387. 3:41:18коричневый нам с ним ничего не
4388. 3:41:31сделают Ну в
4389. 3:41:34принципе в
4390. 3:41:37принципе наверное
4391. 3:41:41норм Ну если что мы ещё там по ходу
4392. 3:41:43подправить
4393. 3:41:45в процессе
4394. 3:41:48работы Давайте пробовать он конечно в
4395. 3:41:51чёрную уходит Это не очень хорошо но
4396. 3:41:53ладно будем
4397. 3:41:55тестировать Итак жёлтый цвет
4398. 3:41:59400 сразу пройдёт по контрасту я
4399. 3:42:03уверен Видите вот можно на тёмной теме
4400. 3:42:06можно прямо развернуться с этими жёлтыми
4401. 3:42:09цветами Вот это пошло в
4402. 3:42:13оранжева попробуем пришить
4403. 3:42:18его другим
4404. 3:42:20способом типа взять из палитры
4405. 3:42:28D Мне нужно чтобы они одинаковые были по
4406. 3:42:31весу но при этом не отличались сильно по
4407. 3:42:35оттенку secondary
4408. 3:42:39жёлтый Давайте он должен
4409. 3:42:42быть Вот Похож на Вот это
4410. 3:42:52пробуем
4411. 3:42:54500
4412. 3:42:56похоже но по контрасту не особо
4413. 3:43:00хорошо Ну давайте оставим его пока на
4414. 3:43:04всякий случай как
4415. 3:43:06вариант типа я
4416. 3:43:10покрашу в пятисот
4417. 3:43:15вот это
4418. 3:43:19500д а это будет тогда
4419. 3:43:24600 вот и поме это вопросом типа
4420. 3:43:28подойдёт нам это или
4421. 3:43:30нет
4422. 3:43:32й Если
4423. 3:43:37будем нет й лучше оставить
4424. 3:43:42серым с иконками тоже самое
4425. 3:43:47слишком
4426. 3:43:49ярко Вот так
4427. 3:43:58нормально я оставлю вам серую чтобы она
4428. 3:44:02была Так это будет
4429. 3:44:06цвет 800
4430. 3:44:15так неправильно 400
4431. 3:44:19основной Ну из коричневого в такое типа
4432. 3:44:22не серый
4433. 3:44:25чище
4434. 3:44:27ссылки активная
4435. 3:44:30400
4436. 3:44:33Hover немножко
4437. 3:44:37потемнее
4438. 3:44:39500 й
4439. 3:44:41сера фаны
4440. 3:44:45тоже надо будет
4441. 3:44:49тестировать слишком
4442. 3:44:51тёмный Ну как бы да вообще слишком
4443. 3:44:56тёмный
4444. 3:45:00так
4445. 3:45:03так и вот
4446. 3:45:05так дефолт ную
4447. 3:45:08обводку Я бы оставил серого цвета
4448. 3:45:10всё-таки
4449. 3:45:15и
4450. 3:45:16активную
4451. 3:45:20400 вот 8,5
4452. 3:45:237400
4453. 3:45:27кнопки активные
4454. 3:45:30400
4455. 3:45:34Hover
4456. 3:45:37500 600
4457. 3:45:41либо 300 200
4458. 3:45:46так почище
4459. 3:45:48будет
4460. 3:45:51400
4461. 3:45:53300 200 когда я использую верхнюю
4462. 3:45:57палитру когда мне нужно в тёмные цвета
4463. 3:45:59уводить и я не хочу чтобы они были
4464. 3:46:01яркими по сери опять либо серый либо
4465. 3:46:05какие-то вариации Ну давайте посмотрим
4466. 3:46:08красиво будет или нет Если мы
4467. 3:46:10возьмём какой-то тёмный цвет для фона
4468. 3:46:15вот
4469. 3:46:18коричневый в принципе
4470. 3:46:21норм ну вот этот уже
4471. 3:46:25Грязнова сразу вопрос А надо ли нам
4472. 3:46:30оно так здесь возьмём либо жёлтый с
4473. 3:46:34белым либо жёлтый с
4474. 3:46:38жёлтым Ну с коричневым не хочу строить
4475. 3:46:42не нравится как выглядит
4476. 3:46:45далеко уходим от брендового
4477. 3:46:50цвета Так что
4478. 3:46:53здесь 400 п 400 и здесь у нас пойдёт вот
4479. 3:46:59кстати Помните я вам говорил то что
4480. 3:47:01можно было генерировать цвета с помощью
4481. 3:47:04прозрачности вот я вам сейчас покажу
4482. 3:47:06пример как это можно
4483. 3:47:08сделать допустим я бы зде сдел
4484. 3:47:10прозрачность
4485. 3:47:17Вот видите у меня получился такой
4486. 3:47:19хор А здесь бы я сделал Тоже самое тоже
4487. 3:47:23прозрачность и
4488. 3:47:2720% всё то есть вот эти цвета с помощью
4489. 3:47:30палитры вот этой генеративной их не
4490. 3:47:32сделаешь то есть это либо ваш сль
4491. 3:47:36ковыряться либо Ну что я имею в виду
4492. 3:47:40Кстати по hsl ковыряться тоже вам
4493. 3:47:42расскажу про эту штуку
4494. 3:47:45мы от этого метода отказались потому что
4495. 3:47:47он сложнее и не всегда подходит даёт там
4496. 3:47:50грязные оттенки Но вот для тёмной темы
4497. 3:47:53если я й
4498. 3:47:55убавляем
4499. 3:47:57сильно то у меня по сути и получаются
4500. 3:48:00вот эти тона вот как будто построенные
4501. 3:48:06прозрачностью Поэтому вот можете
4502. 3:48:08использовать непрозрачность 5-10 для
4503. 3:48:10ховеров это в принципе ном может бытье
4504. 3:48:14жёлтый цвет а допустим белый для
4505. 3:48:18непрозрачности такое вот тоже бывает ну
4506. 3:48:21выглядит своеобразно но
4507. 3:48:23бывает Вот и обязательно нам надо вот
4508. 3:48:26эти цвета которые мы для ховеров сделали
4509. 3:48:30пикнуть и
4510. 3:48:32сохранить то есть вот этот оттенок мы
4511. 3:48:35вот это стираем заменяем на код
4512. 3:48:41цвета тоже самое не прозрачно стира
4513. 3:48:45заменяем на код цвета чёрт знает какой у
4514. 3:48:47вас там будет фон может быть будет фон
4515. 3:48:48где-нибудь не чёрный а какой-нибудь
4516. 3:48:50красный
4517. 3:48:51и ну для красного будет непрозрачность
4518. 3:48:54норм для чёрного как бы короче лучше
4519. 3:48:57чтобы не возникало Путаница у
4520. 3:48:58программистов эти цвета пикнуть всё-таки
4521. 3:49:01Ир теори Наверное я оставлю серым Вот
4522. 3:49:05вот так ну Давайте попробуем теперь их
4523. 3:49:08поставить и посмотреть как это будет
4524. 3:49:11выглядеть Здесь три основных кнопки
4525. 3:49:18с серым цветом
4526. 3:49:20Хорошо Давайте попробуем нашу модную
4527. 3:49:25кнопку жёлтую
4528. 3:49:27чисто тоже приемлемо выглядит сейчас
4529. 3:49:31попробуем жёлтую кнопку с Ну давайте вот
4530. 3:49:34попробуем Ну хотя она и так р тут
4531. 3:49:38стоит тоже хорошо короче и серые кнопки
4532. 3:49:42тоже Можно оставлять Вот смотрители м
4533. 3:49:45не нужно чтобы у вас было так много
4534. 3:49:46акцента на странице Да ради Бога не
4535. 3:49:49Используйте просто primary БН вот
4536. 3:49:51Используйте Вот такие и они будут
4537. 3:49:54выглядеть
4538. 3:49:56нормально так добавим наш нашу
4539. 3:50:00обводку Я люблю двухпильный
4540. 3:50:17отлично наши Эти штучки
4541. 3:50:21красятся жёлтый
4542. 3:50:24цвет они могут быть и
4543. 3:50:27белыми Ну вот могут быть и
4544. 3:50:34жёлтыми здесь вот ради эксперимента
4545. 3:50:37покрашу тоже парочку вот в этом блоке
4546. 3:50:45так и ставим баннер вот этот должен быть
4547. 3:50:48дыщ можно прям вот так вот праймери
4548. 3:50:52цветом бахнуть А вот этот поспокойнее
4549. 3:50:58какой-то неприятный
4550. 3:51:00Цвет тоже неприятный цвет короче с
4551. 3:51:03фонами коричневыми Мы сели в
4552. 3:51:07лужу какой же цвет нам здесь подошёл бы
4553. 3:51:11больше наверное Вот это был бы б дыщ
4554. 3:51:16но он по оттенку как-то не очень сюда
4555. 3:51:18ложится у нас всё яркое а он нет
4556. 3:51:22оставляем
4557. 3:51:244 Ну а второй нам Придётся оставить
4558. 3:51:27серым кстати можете попробовать его
4559. 3:51:29вообще белым
4560. 3:51:31сделать тогда у вас вот это будет бдыщ А
4561. 3:51:34вот это ну точнее даже совсем белым вот
4562. 3:51:37а вот этот будет помягче
4563. 3:51:38Ну и Серый если м нужно помягче
4564. 3:51:44зелёный цвет яркий Кислотный оттенок Ну
4565. 3:51:49вот Давайте возьмём вот этот
4566. 3:51:50300 и посмотрим что делать когда у
4567. 3:51:55вас такие кислотные тона видите он сразу
4568. 3:51:58не проходит по
4569. 3:52:01контрасту поэтому текст мы оставляем
4570. 3:52:05чёрным ссылочку Можно попробовать
4571. 3:52:08вытянуть в какой-нибудь близкий цвет
4572. 3:52:11допустим вот 600
4573. 3:52:15Дальше она уже слишком разнится с нашим
4574. 3:52:19основным цветом Ну то есть Видите вот
4575. 3:52:22это ещё как бы Окей А следующий уже
4576. 3:52:25слишком
4577. 3:52:29тёмный это 600 хове для
4578. 3:52:34600 Давайте будем
4579. 3:52:37500
4580. 3:52:40сером Ну да там ВС правильно
4581. 3:52:45зены Боже
4582. 3:52:47Упаси Бордер зелёные Я бы тоже делать не
4583. 3:52:52стал так в
4584. 3:52:55принципе будем
4585. 3:52:59тестировать это 300 у на и самые
4586. 3:53:03интересные
4587. 3:53:05кнопочки кислотная Зелёная белые сразу
4588. 3:53:08не
4589. 3:53:09проходит Так у 300 Ну давайте Да
4590. 3:53:17500 кнопку disable тоже оставим
4591. 3:53:23серой secondary
4592. 3:53:27кнопка видите зелёный достаточно живучий
4593. 3:53:31у него контур сохраняется даже когда
4594. 3:53:33цвет бледный в отличие от
4595. 3:53:36жёлтого тш
4596. 3:53:44Ну либо так но это уже для меня вопрос
4597. 3:53:47как-то она не очень хорошо выглядит Не
4598. 3:53:49похожа на ничего электрического в не
4599. 3:53:53нету Вот это больше
4600. 3:53:56подходит делаем потолще иначе будет не
4601. 3:53:58видно и РТР пускай будет серый так вот
4602. 3:54:04это сразу
4603. 3:54:06Тогда
4604. 3:54:08убираем здесь сделаем
4605. 3:54:11состояние 300
4606. 3:54:14здесь мне нужен
4607. 3:54:18фон
4608. 3:54:2150 и
4609. 3:54:24100 Прикольно кстати получилось
4610. 3:54:26сочетаются они и Всё Работаем как
4611. 3:54:31обычно иконки кстати не стал красить вот
4612. 3:54:34иконка тоже такая Кислотный Рей в пати
4613. 3:54:38запись на кислотную
4614. 3:54:40терапию к Марине которая готовит к рейва
4615. 3:54:48так серый цвет это чёрная это чёрная это
4616. 3:54:52чёрная вот такую иконку Мы в зелёный
4617. 3:54:54красить не будем она
4618. 3:54:56проваливается А вот залитую можем и
4619. 3:55:04покрасить
4620. 3:55:08Угу основная кнопка Зелёная основная
4621. 3:55:12кнопка зелёная
4622. 3:55:15дополнительная кнопка ще на два
4623. 3:55:20пикселя тоже
4624. 3:55:24Зелёная текст
4625. 3:55:26чёрный сейчас попробуем ещё такую штуку
4626. 3:55:29мне вот хочется посмотреть как с
4627. 3:55:31одинарными кнопками
4628. 3:55:34смотрятся эти карточки вообще в
4629. 3:55:39целом сломался
4630. 3:55:44я возьму вот эту кнопку и её везде
4631. 3:55:47поставлю Ну жить можно Если в рамках
4632. 3:55:51стиля это Окей то Да можно
4633. 3:55:56попробовать бдыщ
4634. 3:56:01баннер зелёненький А
4635. 3:56:05лайтовый ну вот соточку поставим в
4636. 3:56:09принципе как-то
4637. 3:56:12так и последнее Тёмная тема с которой мы
4638. 3:56:16разбираемся нам бы тут конечно немножко
4639. 3:56:19уменьшить кислотность попробуем но если
4640. 3:56:22будет грязно
4641. 3:56:24то Ну придётся забивать на людей с
4642. 3:56:28плохим зрением потому что мы хотим
4643. 3:56:30делать кислоту Но вообще кстати
4644. 3:56:32симпатично выглядит Сейчас подождите ещё
4645. 3:56:35раз хочу попробовать кое-что
4646. 3:56:38поменять Что будет если я хрому
4647. 3:56:45ну не настолько Ладно не буду
4648. 3:56:47выкручивать на максимум но
4649. 3:56:53подтянул нее
4650. 3:57:02было Ну вот и посмотрим какая
4651. 3:57:05палитра вот у нас их две Ну Вторая поре
4652. 3:57:10выглядит возм их обе имм ка будет нам
4653. 3:57:16лучше
4654. 3:57:18подходить Ну давайте
4655. 3:57:22текст
4656. 3:57:23контраст текст Вообще в
4657. 3:57:26порядке так иконка ярче становится
4658. 3:57:29иконку вот здесь вот чуть бледнее кстати
4659. 3:57:31сделал видите потому что он в ту сторону
4660. 3:57:34ярче становится а мне надо её
4661. 3:57:44готовить так на что это должно быть
4662. 3:57:46похоже что-то такое может что-то такое
4663. 3:57:50Хьюстон у нас проблемы с
4664. 3:57:56контрастом Ну вот более-менее тут вот
4665. 3:57:59конечно под вопросом потому что по
4666. 3:58:02контрасту не проходит вот эта
4667. 3:58:04история но Похоже на то что нам надо и в
4668. 3:58:07целом читае достаточно так я пока
4669. 3:58:10оставлю серый пускай будет серый ну
4670. 3:58:12потому что серым смотрите тоже выглядит
4671. 3:58:15же серый плюс
4672. 3:58:17этот просто иначе он должен быть
4673. 3:58:20какой-то типа вот Ну в принципе я его и
4674. 3:58:22подобрал но он не
4675. 3:58:24контрастный иконка такая бледно зелёную
4676. 3:58:32слишком Ну вот может быть так это
4677. 3:58:35Пожалуй оставлю рядом
4678. 3:58:39ссылки основной
4679. 3:58:41Цвет тоже по бледнее сделаем чтобы было
4680. 3:58:44видно Дий оставлю такой фоны зелёные не
4681. 3:58:48советую всё-таки короче Нижняя палитра
4682. 3:58:52Здесь нормально работает вот с её
4683. 3:58:56притури лучше чем яркая так это 8 с поно
4684. 3:59:00опять я наткнулся на этот
4685. 3:59:07Бордер сейчас
4686. 3:59:10сори отсюда возьму
4687. 3:59:18основной
4688. 3:59:19цвет и кнопочки пошли
4689. 3:59:22красить
4690. 3:59:24кайф чуть
4691. 3:59:26бледнее чуть бледнее или наоборот
4692. 3:59:30чуть
4693. 3:59:32ярче чуть ярче Давайте в яркость
4694. 3:59:35пойдём значит это
4695. 3:59:38300
4696. 3:59:40400
4697. 3:59:42500 остав
4698. 3:59:52вот се сейчас проблемы
4699. 3:59:57начнутся Ну что-то вот такое Ну вот
4700. 4:00:00как-то Ну вот может
4701. 4:00:08так ещ
4702. 4:00:11темнее Ну вот может быть вот
4703. 4:00:15а здесь вс-таки мы весь цвет
4704. 4:00:19сделаем опять
4705. 4:00:24кислотним добавлю немножко ей
4706. 4:00:27яркости и потому же принципу что и
4707. 4:00:31жёлтый я тут построю фон
4708. 4:00:3810%
4709. 4:00:4120% пикаю
4710. 4:00:46и
4711. 4:00:47заменяю заливку на
4712. 4:00:53него всё отлично Мне нравятся эти кнопки
4713. 4:00:58ну вот это не очень в стиля поэтому
4714. 4:01:02пожалуй от вот этих кнопок тёмных я
4715. 4:01:04откажусь Но если вам нравится то можете
4716. 4:01:06их достроить и Красим
4717. 4:01:17вот Понимаете в чём разница что вот мы
4718. 4:01:19тушим эти цвета как бы мы можем сделать
4719. 4:01:22атмосферу рейва Но это всё ещё можно
4720. 4:01:25будет хоть как-то изучать Потому что
4721. 4:01:29часто выкручивают вот эти цвета на
4722. 4:01:31максимум И долго смотреть на такую
4723. 4:01:33страницу просто
4724. 4:01:40невозможно второстепенная кнопка
4725. 4:01:48ну честно говоря что-то так себе Вот
4726. 4:01:51здесь она хорошо выглядела потому что
4727. 4:01:53текст маленький А здесь вот как-то
4728. 4:01:56так давайте-ка на неё по отдельности
4729. 4:02:02Посмотрим может обводка кстати Толстова
4730. 4:02:06просто для этого размера
4731. 4:02:11макет вот с полтора Кстати лучше
4732. 4:02:13выглядит Ну это просто это же надо чтобы
4733. 4:02:15со шрифтом сочеталось с толщиной у нас
4734. 4:02:18здесь другой шрифт видите он более
4735. 4:02:20жирный Поэтому ему вот это обводка
4736. 4:02:22подходит поэтому не закапывай сразу эту
4737. 4:02:24кнопку Попробуйте разную толщину то есть
4738. 4:02:27Может вам вот так вот понравится
4739. 4:02:30допустим
4740. 4:02:32серым Вот вот этот вариант Мне
4741. 4:02:37нравится с серым
4742. 4:02:39цветом можно вот так ещё кстати
4743. 4:02:41поэкспериментировать тоже может неплохо
4744. 4:02:43выглядеть и по контрасту видите
4745. 4:02:46проходит даже я пожалуй этот вариант вот
4746. 4:02:49так вот отмечу Вы можете комбинировать
4747. 4:02:52серые заливки и цветные тексты то есть
4748. 4:02:54для secondary
4749. 4:02:57кнопок так разные варианты я вам
4750. 4:03:01оставил это всё спокойно красится Вот в
4751. 4:03:04эти цвета
4752. 4:03:13проверим зелёное
4753. 4:03:15сердечко Ну как всегда я считаю что
4754. 4:03:18серые выглядят лучше чем
4755. 4:03:21зелёные и
4756. 4:03:24баннер который бдыщ
4757. 4:03:27и
4758. 4:03:31который чуть по полай тове Ну вот
4759. 4:03:36наверное вот этот цвет
4760. 4:03:39700 можно из нижней палитры ещё
4761. 4:03:42посмотреть кстати что-то поярче
4762. 4:03:45Ну он вообще не в стиле Видите вот этот
4763. 4:03:48цвет поэтому я бы наверное может Вот так
4764. 4:03:51вот бы
4765. 4:03:54сделал в принципе достаточно симпатично
4766. 4:03:56и вот кстати для баннеров Вы тоже можете
4767. 4:03:58использовать эту фишку с
4768. 4:04:02прозрачностью 10% или даже там
4769. 4:04:0720% или вот такую историю ещё
4770. 4:04:15то есть вот подбираете какой-то тёмный
4771. 4:04:18фон на нём яркий текст видите он весь по
4772. 4:04:22по контрасту
4773. 4:04:23проходит и можно работать вот такая
4774. 4:04:26Тёмная тема получилась для зелёного
4775. 4:04:29цвета и наша последняя задача на сегодня
4776. 4:04:33- это построить палитру для
4777. 4:04:36алертов Ну то есть для сообщений успеха
4778. 4:04:40ошибки и предупреждений сейчас посмотрим
4779. 4:04:44что нам для этого нужно сделать вот
4780. 4:04:45возьмём серую в первую очередь нам нужно
4781. 4:04:48выбрать один из
4782. 4:04:50цветов Я предлагаю начать с зелёного мы
4783. 4:04:53просто возьмём какой-нибудь зелёный для
4784. 4:04:56начала чтобы на нём текст выглядел
4785. 4:04:59контрастно то есть для этого используем
4786. 4:05:01плагин
4787. 4:05:03контраст здесь Как видите у нас Ну
4788. 4:05:07контенте может быть Не очень хороо но
4789. 4:05:10прос мы будем
4790. 4:05:15он может потерять свою привлекательность
4791. 4:05:17как бы можете использовать такой ну как
4792. 4:05:20бы Старайтесь не нарушать конечно
4793. 4:05:21контраст Но в идеале вот что-то что-то
4794. 4:05:23между хотя бы лайн чтобы у Вас
4795. 4:05:27получалось соблюдать Так теперь у нас
4796. 4:05:29есть вот такой цвет на котором белый и
4797. 4:05:33Чёрный текст более-менее контрастирует
4798. 4:05:35нам нужно построить е второстепенный
4799. 4:05:38текст зде применил небольшую хитрость
4800. 4:05:41покажу ВМ
4801. 4:05:42дело Мы возм наш Вот этот текст который
4802. 4:05:48мы построили в серой палитре и разместим
4803. 4:05:51его на зелёном Как видите он будет
4804. 4:05:54выглядеть очень плохо тоже самое ну с
4805. 4:05:58жёлтым ещё более-менее на Красном полный
4806. 4:06:00трш и чтобы построить хороший цвет для
4807. 4:06:05таких вещей вот здесь как раз очень
4808. 4:06:07хорошо и подходит прозрачность в
4809. 4:06:08принципе прозрачность это инст сра ко
4810. 4:06:13есть какие-то цветные фоны потому что
4811. 4:06:16Как видите прозрачный чёрный когда
4812. 4:06:18накладывается на зелёный даёт хороший
4813. 4:06:21зелёный оттенок у которого в принципе ну
4814. 4:06:23может быть контраст не супер крутой но
4815. 4:06:26тем не менее там подписи если они будут
4816. 4:06:29не супер мелкие их люди увидят То есть
4817. 4:06:32можно даже ну тут как раз подогнать Но
4818. 4:06:34вот 60 уже он не сильно отличается от
4819. 4:06:37этого 50 как бы в самый раз мы
4820. 4:06:40снимаем вот этот цвет пием его и Красим
4821. 4:06:45эту штуку уже на постоянку в него и
4822. 4:06:48потом этот цвет
4823. 4:06:49запишем это опять же я как бы не везде
4824. 4:06:52нужен этот текст можно писать и белым
4825. 4:06:54можно писать и чёрным Это я показываю
4826. 4:06:57как бы в максимальной комплектации Дий
4827. 4:06:59си теперь Нам нужен такой же красный что
4828. 4:07:02мы Для этого делаем вот я покрашу Вот
4829. 4:07:04это всё в зелёный возьму плагин Ну
4830. 4:07:07наверно вот этот
4831. 4:07:09вот Им удобно и
4832. 4:07:16в Красную
4833. 4:07:17зону видите красный совсем получить не
4834. 4:07:20получается Он вот здесь Потому что нам
4835. 4:07:21нужно ещё поправить тон Самое главное
4836. 4:07:24чтобы наш показатель
4837. 4:07:27Хрома не сильно скакал относительно того
4838. 4:07:31что у нас есть в зелёном тогда цвета
4839. 4:07:33получатся одинаковые по яркости можете
4840. 4:07:37попробовать выкрутить эту историю здесь
4841. 4:07:39на максимум Да и здесь в принципе можете
4842. 4:07:41попробовать выкрутить видите для ЗНО
4843. 4:07:43особо не меняется А можно оттенки
4844. 4:07:45начинать подбирать с красным Хотя Кстати
4845. 4:07:47как видите он всё равно ну такого цвета
4846. 4:07:50видимо в природе просто нету поэтому он
4847. 4:07:53не получается так Ну вот допустим Мне
4848. 4:07:55нравится там вот такой
4849. 4:07:58красный я могу его конечно попробовать
4850. 4:08:00сделать ещё опаснее вот просто
4851. 4:08:04поменяв поменяв чуть-чуть Хью кстати
4852. 4:08:07можно вот так вот двигаться потихонечку
4853. 4:08:11пока Не найдёте нужный оттенок
4854. 4:08:14и тоже самое мы проделываем с жёлтым
4855. 4:08:16цветом но Как видите в жёлтый цвет
4856. 4:08:19такого контраста попасть тяжеловато нам
4857. 4:08:22для этого надо
4858. 4:08:23двигать
4859. 4:08:27тон попробуем выкрутить хрому покрутить
4860. 4:08:31немножко
4861. 4:08:35тон Где же у нас наш жёлтый
4862. 4:08:40цвет кажется что он это вот здесь
4863. 4:08:44находится всё И то есть если вы
4864. 4:08:47сохраняете параметр
4865. 4:08:49Хрома в порядке Ну то есть вот здесь вот
4866. 4:08:52у вас 84 89 Они похожи здесь мы Ну как
4867. 4:08:56видите
4868. 4:08:57просто у нас не получается пока получить
4869. 4:09:00э ну там 89 потому что у жёлтого в
4870. 4:09:02принципе нет таких высоких значений
4871. 4:09:05насыщенности вот после этого мы этот
4872. 4:09:07плагин закрываем открываем опять
4873. 4:09:10контраст проверяем как у нас дела
4874. 4:09:14здесь хорошо ну здесь по сути всё
4875. 4:09:17плюс-минус
4876. 4:09:18одинаковое вот белый цвет только
4877. 4:09:21вываливается то есть скорее всего белые
4878. 4:09:24алерты нам не светят будут только
4879. 4:09:30чёрные так и теперь Наша задача
4880. 4:09:33построить ещё и бледнее подложки Ну
4881. 4:09:36вообще вот таких вот ярких алертов они
4882. 4:09:39не очень часто встречаются чаще
4883. 4:09:41встречаются такие бледные это как раз
4884. 4:09:43связано с вот этими проблемами с
4885. 4:09:45контрастом который есть у там белого и
4886. 4:09:49чёрного цвета Как построить эти палетки
4887. 4:09:52очень просто опять открываем наш любимый
4888. 4:09:54плагин с сложным
4889. 4:09:58названием берём Пика
4890. 4:10:02зелёненький добавляем
4891. 4:10:05файл
4892. 4:10:08потом просто можем пикнуть другой цвет
4893. 4:10:12можем с помощью ю тут настроить Ну
4894. 4:10:14короче удобнее будет наверно пикать так
4895. 4:10:17Пика
4896. 4:10:18красный
4897. 4:10:21добавляем Ну и с жёлтым наверное
4898. 4:10:24придётся немножко
4899. 4:10:28помучиться Да как видите плагин любит
4900. 4:10:32такие
4901. 4:10:34оттенки не очень
4902. 4:10:36позитивные сейчас кстати попробуем
4903. 4:10:39просто более позитивным плагином
4904. 4:10:41построить Может быть у нас
4905. 4:10:50Ну вот этот плагин кстати даёт
4906. 4:10:54прям позитивные эффекты в принципе
4907. 4:10:57кстати Ну в зависимости от от ваших
4908. 4:10:59задач Вы можете строить цвета Что тем
4909. 4:11:02плагином что этим плагином Вот кстати я
4910. 4:11:03сейчас подумал что возможно этот плагин
4911. 4:11:06и для красного нам
4912. 4:11:10получше
4913. 4:11:12для она какая-то более позитивная видите
4914. 4:11:15этот плагин
4915. 4:11:16автоматически увеличивает хрому так
4916. 4:11:20чтобы нам было прикольно А вот этот
4917. 4:11:22наоборот уменьшает он больше для тёмной
4918. 4:11:24темы подходит Так что Сорри ребята Я
4919. 4:11:27немножко
4920. 4:11:28ошибся так это я
4921. 4:11:31убираю Вот это
4922. 4:11:33я
4923. 4:11:35оставляю Ну и по сути Нам нужен просто
4924. 4:11:39какой-то из бледных цветов из этой
4925. 4:11:42палитры
4926. 4:11:43либо 50 либо
4927. 4:11:45100 Ну 100 наверно будет
4928. 4:11:59понасенкова вопросы секундочку
4929. 4:12:06подождите Так включаем обратно
4930. 4:12:09плагин и проверяем
4931. 4:12:13Рабочая История рабочая История рабочая
4932. 4:12:16история тоже Рабочая ВС история Опа
4933. 4:12:20нерабочая история и вот здесь нам на
4934. 4:12:24помощь приходит цвет детской
4935. 4:12:26неожиданности опять же как мы работаем с
4936. 4:12:30такими цветами вот у нас есть плагин для
4937. 4:12:33отдельного цвета H C pier берём и просто
4938. 4:12:38давим во-первых хрому на максимум
4939. 4:12:40чего-нибудь происходит давим тон
4940. 4:12:45уводи его куда-нибудь в коричневый цвет
4941. 4:12:48можно тут ещё поиграться что это будет
4942. 4:12:49за
4943. 4:12:50цвет но в целом лучше ью конечно не
4944. 4:12:53трогать чтобы
4945. 4:12:55сохранить преемственность от вот этого
4946. 4:12:57жёлтого То есть просто другую
4947. 4:12:59тональность
4948. 4:13:02выбираем то есть вот иконки Я кстати не
4949. 4:13:04запариваюсь красить здесь по-другому
4950. 4:13:06чтобы сэкономить немножко ли тем более
4951. 4:13:09иконки здесь
4952. 4:13:10долж привлекать внимание
4953. 4:13:14н
4954. 4:13:16работает всё Поздравляю Вы собрали цвета
4955. 4:13:21для алертов теперь запишите их вот в
4956. 4:13:23таком
4957. 4:13:25формате Это поможет вам потом создать
4958. 4:13:28токены чтобы они были корректны то есть
4959. 4:13:30для каждого отдельного цвета и последняя
4960. 4:13:33тема которую мы сегодня разберём перед
4961. 4:13:35тем как я дам вам задание это создание
4962. 4:13:38нескольких брендовых палитр вот допустим
4963. 4:13:42у вас есть
4964. 4:13:44Красная палитра Вот такая и вы хотите
4965. 4:13:48кроме красной палитры
4966. 4:13:50построить ещё одну палитру другого
4967. 4:13:53цвета открываете Ну быстрый способ
4968. 4:13:57сейчас покажу быстрый способ но не про
4969. 4:14:00яркую историю открываете плагин со
4970. 4:14:03сложным названием делаете здесь 11
4971. 4:14:06цветов пикате допустим красный есть
4972. 4:14:09просто в этом плагине это быстрее всего
4973. 4:14:11постро при плюс-минус равна тому что у
4974. 4:14:15нас есть то есть мы её с вами сохраняем
4975. 4:14:19нажимаем вот здесь вот
4976. 4:14:20на добавить а
4977. 4:14:24берём сейчас нажимаем на неё я ещё одну
4978. 4:14:28такую
4979. 4:14:30создам и в этой палитре Второй чтобы Вы
4980. 4:14:33могли сохранить вы берёте
4981. 4:14:40показатель Ну точнее даже про не будет
4982. 4:14:43Вот
4983. 4:14:44здесь сейчас сори 11 цветов вот берёте
4984. 4:14:49показатель UE и меняете и у вас палитра
4985. 4:14:53будет идентична по яркости той которая у
4986. 4:14:56вас уже есть вот и работает Ну в
4987. 4:15:00принципе практически с любыми
4988. 4:15:03оттенками Единственное что а иногда
4989. 4:15:06требуется добавить яркости тогда
4990. 4:15:08заходите вот здесь вот в
4991. 4:15:09Chrome и подтягивается
4992. 4:15:13Но главное чтобы на вот здесь вот видите
4993. 4:15:15шаг его важно хотя бы
4994. 4:15:18примерно сохранить вот этот вот рисунок
4995. 4:15:22что к середине Хрома повышается потом
4996. 4:15:28падает всё пожалуйста вот вам двойная
4997. 4:15:31палитра Добавляйте Пользуйтесь с помощью
4998. 4:15:35Зачем это надо Вот спросите вы с помощью
4999. 4:15:37этого можно получить достаточно
5000. 4:15:39интересные макеты вот
5001. 4:15:43с ренсом Так сейчас я вам покажу
5002. 4:15:47о Короче ребята делают многоцветный
5003. 4:15:50дизайн
5004. 4:15:52и при этом у них получается что цвета
5005. 4:15:55равные
5006. 4:15:57по своей вот этой Хроме по своей как бы
5007. 4:16:00яркости цветности и из-за этого дизайн
5008. 4:16:06получается ну намного
5009. 4:16:09интереснее то есть потому что очень
5010. 4:16:11сложно соблюдать уровень яркости
5011. 4:16:13одинаковый для разных цветов Если вы не
5012. 4:16:18пользуетесь плагинами они это используют
5013. 4:16:20повсеместно там в разных проектах я не
5014. 4:16:22смог найти прям тот который хотел но я
5015. 4:16:25думаю что вам следует посмотреть вообще
5016. 4:16:28и вот сравнить вот эту историю
5017. 4:16:32про Ну вот да Видите у них они
5018. 4:16:35разноцветные много много разных
5019. 4:16:37брендовых цветов можно
5020. 4:16:38составить Итак домашнее задание возьмите
5021. 4:16:43вот эти палитры с вот этими отмеченными
5022. 4:16:46цветами и покрасьте под них наш шаблон с
5023. 4:16:52серым цветом я вам советую сгенерить
5024. 4:16:55серую палитру тоже но если лень можете
5025. 4:16:56пользоваться прямо нашей они будут все
5026. 4:16:59приложены посылки
5027. 4:17:01и ну как бы ваша задача взять те цвета и
5028. 4:17:04вот раскрасить всё точно так же как я
5029. 4:17:06раскрашивал там примеры
5030. 4:17:09повторяют те примеры которые я делал Вот
5031. 4:17:12это похож на красный вот этот похож на
5032. 4:17:14синий вот этот похож на жёлтый А вот
5033. 4:17:16этот похож на
5034. 4:17:18ярко-зелёные как бы по своему поведению
5035. 4:17:21по своим подло сям и каким-то нюансам
5036. 4:17:25поэтому вы можете сопоставить это с теми
5037. 4:17:28палитрами которые я красил до этого Это
5038. 4:17:31задание номер один задание Advanced
5039. 4:17:34взять Вот эту палитру компонентов для
5040. 4:17:37световой темы и перекрасить её в один из
5041. 4:17:41выбранных цветов то есть подобрать все
5042. 4:17:44тексты кнопки
5043. 4:17:46состояния
5044. 4:17:48табы теги То есть это то что я не
5045. 4:17:50показывал используя принципы про которые
5046. 4:17:53я рассказываю то есть вот это п1 П2 ми1
5047. 4:17:56то есть вот эти вот все вещи вы с
5048. 4:17:58помощью этих принципов теперь понимаете
5049. 4:18:01как делаются ховеры в принципе для любых
5050. 4:18:03объектов и активные состояния тоже то
5051. 4:18:07есть вот особенна интересная штука здесь
5052. 4:18:09есть выбранная здесь есть здесь есть
5053. 4:18:13и так далее ну и заполнить для себя вот
5054. 4:18:17эту историю Я сейчас вам тоже её
5055. 4:18:20удалю и принесу просто
5056. 4:18:26туда не цветную
5057. 4:18:29версию всё задание для
5058. 4:18:32вас ребята
5059. 4:18:35готово Спасибо что досмотрели эту штуку
5060. 4:18:38до конца Ну она получилась такой длинной
5061. 4:18:41потому что по сути это как бы такое
5062. 4:18:43настольное руководство к которому можно
5063. 4:18:44возвращаться Когда у вас есть какие-то
5064. 4:18:47проблемы с определённой палитрой Вы
5065. 4:18:49можете посмотреть наши гайды посмотреть
5066. 4:18:53как это у нас было сделано отойти от них
5067. 4:18:55поэкспериментировать самостоятельно с
5068. 4:18:57разными стилями кнопок с серым цветом и
5069. 4:19:01закинуть нам в чат показать как у вас
5070. 4:19:04получилось вот ребята наш коммьюнити в
5071. 4:19:06целом оценят эту историю Вот спасибо вам
5072. 4:19:09большое увидимся на следующих лекциях не
5073. 4:19:12забывай что все ссылки на все вот эти
5074. 4:19:15вот макеты которые я здесь использовал
5075. 4:19:18они будут в Ну под видео Короче всё пока