Типографика — Transcript

Full transcript

1. 0:00Привет друзья это Артур Кузьмин Дий Le
2. 0:03ПТ по дизайну из школы фактор это наш
3. 0:08лекция про типо графику версия номер 3
4. 0:11если вы смотрели лекцию версии номер 2
5. 0:14то я всё равно советую вам пересмотреть
6. 0:16потому что здесь добавились большие
7. 0:18блоки новой
8. 0:20информации что у нас будет сначала база
9. 0:24разберёмся с базовой терминологией
10. 0:25настройками шрифта расскажу где брать
11. 0:28гарнитуры как
12. 0:30люди допускают в настройках потом будем
13. 0:33строить линейку размеров рассчитывать
14. 0:35интерлиньяж расскажу про контраст про
15. 0:38сочетание разных стилистики размеры для
16. 0:40мобилок про отступы и в конце будем
17. 0:43разбираться Как строить сложные
18. 0:45типографические конструкции сниппеты
19. 0:47такие
20. 0:48бутерброды здесь добавил кусочек из
21. 0:51лекции про движение и напряжение про
22. 0:53ритм
23. 0:54метромет и
24. 0:56пятном с этими
25. 0:58понятия скажу про динамику Как строить
26. 1:02эту штуку дам таблицу для проверки
27. 1:04контраста Ну ещё задания и готовые
28. 1:07материалы которые можно использовать в
29. 1:09работе Итак минимальная терминология Я
30. 1:14считаю что если вы начинающий дизайнер
31. 1:16то вам не стоит Начинать ваше знакомство
32. 1:19с типографий с книг Гордона и
33. 1:21корольковой потому что там очень много
34. 1:25профессиональной информации истории и
35. 1:29тратите время и после этих книжек вы
36. 1:32сходу не сможете взять и начать что-то
37. 1:35рисовать поэтому я даю Только самую
38. 1:38нужную информацию которая вам нужна для
39. 1:40того чтобы просто ориентироваться в мире
40. 1:42шрифтов то что называет шрифтами обычно
41. 1:46на самом деле это гарнитуры то есть вот
42. 1:48есть такая штука Как гарнитура допустим
43. 1:51Аал и внутри гарнитуры Aro есть большое
44. 1:56количество разных шрифтов допустим А
45. 1:58Regular are далее вот по начертания
46. 2:01могут быть ещ другие семейства там
47. 2:04всякие моноширинные там и прочие но не в
48. 2:07реале конкретно А в других каких-то
49. 2:08шрифтах в других каких-то гарнитура Вот
50. 2:12Но как видите большинство дизайнеров они
51. 2:14не особо запариваюсь в обычной речи там
52. 2:17на работе вот с развлечением гарнитуры и
53. 2:20шрифта не душ всё называет шрифтами Вот
54. 2:23Но для как бы галочки вот я вам
55. 2:26рассказал то что есть гарнитур есть шри
56. 2:28есть начертание к все горят просто шрифт
57. 2:32виды шрифтов гротески то что
58. 2:34используется в интерфейсах то что нам
59. 2:36сегодня и понадобится они называются то
60. 2:39есть без засечек
61. 2:40Антик это шрифты с засечками То есть
62. 2:43сериф у них вот такие вот штучки по
63. 2:45краям и акциденция - Это необычные
64. 2:48разные шрифты которые используются в
65. 2:50основном для заголовков в основном в
66. 2:53веб-дизайне в графическом дизайне в
67. 2:55интерфейсах такое встре может неча
68. 3:00на
69. 3:01сайте если говорить про терминологию
70. 3:04касательно устройства самого шрифта вы
71. 3:06нано могли встретить вот такую страшную
72. 3:08картинку на которой куча разных значений
73. 3:11но по факту из всех вот этих терминов
74. 3:14Если вы неш рифтовой дизайнер то вам
75. 3:17нужны вот эти То есть вы должны знать
76. 3:21что такое Кай вот эта Верхняя шапка по
77. 3:23который выравниваются все
78. 3:26буквы это высота
79. 3:28строчных м толщина штриха baseline - это
80. 3:32та линия на которой стоит сам шрифт и
81. 3:35знать что такое Let spacing или трекинг
82. 3:38- это расстояние между шрифта Ну ещё вам
83. 3:41нужно знать про то что расстояние между
84. 3:45вот этими
85. 3:46двумя как бы элементами называется
86. 3:49межстрочный просвет все называют эту
87. 3:52штуку интерлиньяж но там тоже есть
88. 3:55нюансы что такое интели что такое
89. 3:58межстрочный просвет в
90. 4:01мы мне на тубе там оставили много
91. 4:03комментариев что я там перепутал
92. 4:05выражение Но короче когда люди говорят
93. 4:08про интерлиньяж они говорят про
94. 4:09настройку вот этого расстояния Ну то
95. 4:12есть фигме есть такая коробочка вокруг
96. 4:14буквы и по сути для того чтобы ей
97. 4:17управлять вам нужно как раз настройки
98. 4:19интерлиньяж И изменять Вот то есть вот
99. 4:22этих в
100. 4:26принципе с
101. 4:29гарнитуры Ну я считаю что гарнитур надо
102. 4:33покупать
103. 4:35и часто просто потому что бесплатные
104. 4:39гарнитуры они уже достаточно заезженные
105. 4:41ими пользуются все и поэтому ваш дизайн
106. 4:45будет выглядеть свежее если вы купите
107. 4:47какую-нибудь классный Гротеск у студии
108. 4:50благо это стоит не так дорого вот под
109. 4:55какой-то определённый проект Но если
110. 5:00суша компания которая не хочет платить
111. 5:04лицензию за большую посещаемость то
112. 5:06можно воспользоваться вот этими шрифтами
113. 5:08и вот как раз здесь Королькова нам
114. 5:11пригодится потому что она сделала
115. 5:12подборку по классной бесплатной
116. 5:14кириллице я сразу скажу то что я сам в
117. 5:19работе использую чаще всего две
118. 5:21гарнитуры всего это
119. 5:30много лет пользуюсь И как бы меня ВС
120. 5:34устраивает Как сочетать разные гарнитуры
121. 5:37Если
122. 5:38вы делаете дизайн интерфейса то можете
123. 5:42не париться с сочетанием шрифтов
124. 5:45сочетанием гарнитур подбирать там
125. 5:48правильно по химии по контрасту там
126. 5:51Антик ротем вы может забить серьёзно
127. 5:54потому что у хорошей гарнитуры для
128. 6:00будет большое количество плотностей то
129. 6:03есть там будет тонкий супер жирный Black
130. 6:06Regular medum и прочее и вот вот
131. 6:09этих как бы начертаний будет вам
132. 6:12достаточно для того чтобы даже большой
133. 6:14проект затащить и нарисовать всё будет
134. 6:17красиво базовые настройки Ну вот
135. 6:20естественно сама гарнитура фигме вот
136. 6:23здесь вот у нас начертание здесь вот
137. 6:26находится как раз интерлиньяж дава седу
138. 6:29фигму и просто будем это на примере
139. 6:33какого-нибудь текста
140. 6:35разбирать Вот возьму тут парочку
141. 6:42строчек и настрою так чтобы у них был
142. 6:48перенос на следующую строку Ну вот
143. 6:51непосредственно сама гарнитура тут вот
144. 6:54можно посмотреть как она выглядит здесь
145. 6:56у нас начертания различные здесь у нас
146. 7:00настройка как раз расстояни между
147. 7:04строками вот этого межстрочного просвета
148. 7:06вот как видите я тут могу задавать эту
149. 7:10штуку в процентах могу задавать её как
150. 7:14какое-то конкретное значение если
151. 7:15проценты уберу кстати для вёрстки лучше
152. 7:18передавать вот так в конкретных
153. 7:20значениях дальше у нас здесь расстояние
154. 7:24между абзацами параграф spacing То есть
155. 7:27если я делаю перенос с помощью
156. 7:30то я могу вот это расстояние менять
157. 7:34конкретно перенос вот если я кстати
158. 7:37делаю перенос через Shift enter то у
159. 7:38меня вот этот параграф он будет
160. 7:41игнорировать видите я выставляю сечас
161. 7:43вот это вот по теру перенёс А вот это
162. 7:45перенёс без
163. 7:48ра также тут у нас
164. 7:51есть расстояние между буквами поб
165. 8:00это
166. 8:02ширина нашего контейнера И вообще
167. 8:04поведение этого
168. 8:06контейнера тут расскажу важную вещь что
169. 8:08если вы
170. 8:11используете Когда вы пользуетесь
171. 8:13инструментом текст И вообще с ним как-то
172. 8:15Работайте то я вам советую трогать его
173. 8:19только за правую границу если вам нужно
174. 8:22как-то сложить текст то сложите его с
175. 8:25помощью вот этой ширины вас вот
176. 8:30либо авторина либо авто высота то есть
177. 8:34авто высота видите когда Я складываю
178. 8:36этот бокс то у меня автоматически рамка
179. 8:39расширяется если я рукой потяну вот за
180. 8:42эту штуку у меня здесь включится
181. 8:44фиксированная ширина и при сложении
182. 8:48блока у меня будет Вот это вот вылезать
183. 8:50ну верстальщики вас за это
184. 8:53поругать также Т есть вро
185. 8:59это можно ВС запомнить в стиле чтобы не
186. 9:02делать эти настройки 100 раз для каждого
187. 9:05Ну каждый раз когда вы что-то
188. 9:06пользуетесь и не путаться один раз всё
189. 9:08вот это настроили для каждого размера и
190. 9:10вот сюда вот
191. 9:12сохранили потом здесь есть выравнивание
192. 9:15вот внутри бокса по центру правое левое
193. 9:19левое выравнивание у нас швейцарское
194. 9:21центральное выравнивание у нас
195. 9:23классическая правое выравнивание у на
196. 9:25нестандартно ясли вы начинающий дизайне
197. 9:28сою его вообще первый год стараться не
198. 9:31использовать потому что там очень легко
199. 9:32накосячить много правил как когда это
200. 9:35можно применять когда нет делайте по
201. 9:38левой стороне и вообще никогда не
202. 9:39ошибётесь вот здесь У вас есть
203. 9:43выравнивание внутри вот этого текстового
204. 9:45контейнера но так как мы работаем по
205. 9:48умолчанию с не фиксированным контейнером
206. 9:51автоматическим то пускай стоит то что
207. 9:55стоит вот допустим выравнивание поверху
208. 9:57бывают такие шрифты у которых
209. 9:59нестандартная площадка Ну то есть под
210. 10:02площадкой Я имею в виду как раз там вот
211. 10:04этот текстовый бокс и иногда в редких
212. 10:07случаях нужно выравнивать по центру но я
213. 10:10с таким не часто сталкиваюсь теперь
214. 10:13разберёмся с дополнительными настройками
215. 10:15не спрятано у нас вот тут что у нас тут
216. 10:18вообще
217. 10:18[музыка]
218. 10:20есть сейчас тут
219. 10:23Переключи чтобы я ничего не забыл вот
220. 10:26важно что запомните английские названия
221. 10:29этих вещей они появляются на поле Когда
222. 10:31вы наводите потому что фронтендер они
223. 10:34общаются именно на вот этом языке на
224. 10:36языке вот этих названий а не
225. 10:37дизайнерских названий Вот и ещё одно
226. 10:40маленькое занудство то что расстояние
227. 10:42между буквами оно бывает двух типов вот
228. 10:45то что вы настраиваете в
229. 10:47фигме вот это вот это трекинг
230. 10:52а но как видите между буквами уже есть
231. 10:55какое-то расстояние и оно было настроено
232. 10:57создателем шрифта и это называется
233. 10:59кернинг вот поэтому вы меняете здесь
234. 11:02трекинг Ну и вообще я кстати не советую
235. 11:05менять вот эту штуку трекинг или р
236. 11:09спейсинг потому что дизайнер шрифта
237. 11:11потратил очень много часов чтобы задать
238. 11:13оптимальное расстояние для каждой
239. 11:15буквенной пары в зависимости там от
240. 11:17формы этой буквы и вот нарушая это
241. 11:21расстояние вы как
242. 11:22бы ну в основном делаете хуже чем лучше
243. 11:25потому что там работал человек
244. 11:27заточенный именно на
245. 11:29стони между
246. 11:33буквами про продвинутые настройки Самое
247. 11:36важно в продвинутых настройках я вам
248. 11:37сейчас всех все их покажу Но это вот эти
249. 11:40две настройки Капитель и моноширинные
250. 11:42цифры Сейчас
251. 11:45разберёмся зачем это нам вообще надо
252. 11:48сейчас я возьму ка и возьму
253. 11:56[музыка]
254. 11:58Капитель Циферки 345 600 и
255. 12:0643 ну и какая-нибудь
256. 12:09миллион Вот вот как раз цифры мы
257. 12:12выравниваем по правому краю по разрядам
258. 12:14и сейчас посмотрим на то что мы будем
259. 12:17делать с этими настройками вот смотрите
260. 12:19Не во-первых не все настройки есть во
261. 12:21всех шрифтах это зависит от художника
262. 12:23шрифта то есть что он тут нарисовал но
263. 12:26здесь по сути повторяются у нас
264. 12:30как у нас будет вести себя контейнер
265. 12:31шрифта здесь добавляется выравнивание по
266. 12:35ширине которые используют в книгах вот
267. 12:37если вы делаете какой-нибудь книжный
268. 12:39интерфейс оно вам понадобится а в целом
269. 12:41так не нужно Здесь же всякие
270. 12:42декоративные штуки типа подчёркивания
271. 12:45зачеркивание и здесь есть автоматический
272. 12:48кейс то есть я могу не шифтом набирать
273. 12:53вот эти буквы прописные А могу сделать
274. 12:57это вот так автоматически с помощью вот
275. 13:00этих кнопок то есть всё будет всегда
276. 13:02капсом если я вот это нажму всё будет
277. 13:04всегда строчными если я вот это нажму
278. 13:06Вот это называется Интер капитализация в
279. 13:08английском языке для заголовков часто
280. 13:12применяется и есть такая штука Как Small
281. 13:16Caps То есть это как Caps только Ну по
282. 13:20сути поменьше то есть Вот видите для
283. 13:22некоторых подписей для некоторых кнопок
284. 13:24иногда такая тема заходит теперь найм
285. 13:29машинных цифр А нет сейчас ещё расскажу
286. 13:32вот есть такая функция вертикальные
287. 13:35обрезки её добавили г фигму совсем
288. 13:38недавно и Как видите она избавляется от
289. 13:40вот этих вот пустых мест которые в
290. 13:43вёрстке присутствуют но и с одной
291. 13:45стороны как бы это удобно Для того чтобы
292. 13:47отступ расставлять но проблема в том что
293. 13:50большинство браузеров ещё эту функцию не
294. 13:53поддерживают
295. 13:54поэтому Веста передадите маке в таком
296. 13:58виде стает его с ошибками поэтому
297. 14:00оставляем пока
298. 14:02стандартные Здесь также есть
299. 14:04нумерованные списки и буллеты А если у
300. 14:08вас вот эта штука вся с нумерованными
301. 14:11списками Ну вот допустим я сейчас создам
302. 14:14список с цифрами конечно странно это
303. 14:16выглядит Но вот
304. 14:18так то вы можете отдельно задавать
305. 14:22расстояние именно для листа То есть оно
306. 14:25может быть там побольше поменьше и это
307. 14:27расстояние отдельно от расстояние
308. 14:30переноса через Enter Ну ещ есть такая
309. 14:33штука как она позволяет скрывать длинный
310. 14:38текст здесь можно задать количество
311. 14:39строчек вот которые будут скрываться
312. 14:43тоже верстальщики часто такую штуку
313. 14:45использует скрытие под тро точи теперь
314. 14:47Дополнительные настройки так вот кстати
315. 14:50лист можно здесь
316. 14:58отменить мы зайдём вот сюда в детали
317. 15:01здесь есть выносная
318. 15:03пунктуация как вот Лебедев советует
319. 15:06делать кто-то советует кто-то не
320. 15:08советует а чтобы
321. 15:13свешивались вот видите
322. 15:16свешивались говорит надо
323. 15:21свешивается сами я допустим Ну люблю
324. 15:25свешивались
325. 15:29так тут опять дублируется кейс и вот
326. 15:32здесь вот важная для нас настройка - это
327. 15:34стиль цифр здесь есть вот такая вот
328. 15:36некрасивая цифра 17 это моноширинные
329. 15:39цифры что это делать Вот смотрите когда
330. 15:42допустим у меня стандартные настройки
331. 15:44цифр мне для сравнения цифр надо их
332. 15:47сравнивать по разрядам и Как видите у
333. 15:49меня цифры выровнены Ну по-разному
334. 15:52относительно вот этой вот вертикальной
335. 15:54линии и сравнивать не всегда может быть
336. 15:57удобно поэтому для таблиц обычно
337. 15:59используется вот эта вот
338. 16:01настройка когда я делаю вот так у меня
339. 16:04расстояние площадки на которой стоит
340. 16:06цифра выравнивается в некоторых шрифтах
341. 16:09это специально
342. 16:16отрисовать то есть отдельные цифры на
343. 16:19отдельных кегль их площадках если в
344. 16:21настройках шрифта такого нет то они
345. 16:23просто автоматически выровняться то есть
346. 16:25с бросятся настройки ёнинга которые
347. 16:29жри и фры будут друг под другом вот так
348. 16:33располагаться есть для таблиц запомните
349. 16:36что Выра по правому краю по разрядам и
350. 16:38плюс вот эта вот настройка для вас
351. 16:40обязательно Ну и дальше здесь огромное
352. 16:42количество разных настроек это вот для
353. 16:45математических формул для фракций для
354. 16:49перечёркнутый это нужно чтобы не путать
355. 16:52его там с букво
356. 16:59знаки когда вот у нас есть вот такая
357. 17:00допустим вот такое сочетание F и L вот
358. 17:03часто их соединяют как вот это раньше
359. 17:05было на письме А и разные настройки уже
360. 17:09которые будут зависеть от того что у вас
361. 17:11за шрифт здесь есть также стилистические
362. 17:15сеты атене это То есть когда один и тот
363. 17:18же знак был нарисован несколькими
364. 17:20разными способами здесь вот можно
365. 17:22включить а по сути вот допустим г у вас
366. 17:25будет выглядеть как с такой палочкой
367. 17:27внизу или просто кругом или вот допустим
368. 17:29два
369. 17:30вида вот ну и здесь можно просто
370. 17:33посмотреть какие настройки предлагает
371. 17:35сам художник
372. 17:38шрифта па мы не
373. 17:40отключаем Ну и тут есть ещё если у вас
374. 17:44шрифт как бы богатый на символы то есть
375. 17:46всякие классные штуки типа мелкие цифры
376. 17:48цифры в кружках какие-то дополнительные
377. 17:51стили для них и так далее То есть вот мы
378. 17:53разобрались с дополнительными
379. 17:55настройками ошибки которые сразу в ла
380. 17:58при просмотре портфолио за них кстати
381. 18:01очень часто отказывают сразу то есть
382. 18:03если видит что у вас есть такие проблемы
383. 18:05с типографий
384. 18:06то ну как бы не берут резюме и портфолио
385. 18:12закрывает Ну вот допустим про трекинг Ну
386. 18:15вот эта первая штука она такая как бы на
387. 18:18грани строчные стараются не разряжать
388. 18:21Потому что это не очень
389. 18:23красиво был раньше такая была раньше
390. 18:26такая мода специально разряжать строчные
391. 18:29буквы в кнопках для того чтобы кнопки
392. 18:31были заметны потому что это же выглядит
393. 18:34необычно Вот Но я вам Настоятельно не
394. 18:37советую Капс же наоборот разряжают и
395. 18:40капители разряжают Ну то есть где-то от
396. 18:4310% пока не развалится Вот видите 20%
397. 18:46нормально 70 еле держится а при 130
398. 18:49буквы уже
399. 18:50начинают разваливаться на
400. 18:53отдельные как бы символ это уже не
401. 18:57слово и заголовком крупного кегля иногда
402. 19:00уменьшают трекинг на 1% просто потому
403. 19:03что буквы крупные а подбирают трекинг Ну
404. 19:08кернинг точнее под наборный текст обычно
405. 19:12не для крупных заголовков Поэтому в
406. 19:14крупном тексте может смотреться странно
407. 19:16но в принципе и так нормально можно не
408. 19:19париться так вот тут у меня поехала
409. 19:21ссылочка есть такой инструмент Сейчас я
410. 19:24вам его открою и покажу
411. 19:30где можно потренировать своё как бы
412. 19:33визуальное чутьё и посмотреть в
413. 19:35целом
414. 19:37как как вот лучше поставить кернинг
415. 19:40чтобы у нас количество Ну расстояния там
416. 19:43между буквами разной формы было примерно
417. 19:46одинаково Вот я сейчас попробую
418. 19:52поставить
419. 19:54так и он мне потом скажет На сколько
420. 19:58процентов я там прав Или ошибся ну вот
421. 20:01видите я 80% здесь набрал надо было
422. 20:03немножко левее
423. 20:05дви
424. 20:07вот следующая тема три вида тире это
425. 20:11очень частая ошибка прям буквально Я
426. 20:13скидываю вот эту
427. 20:15фразу каждые 2 дня наверное разным людям
428. 20:19обычно Что делают ставят дефис вместо
429. 20:21тире Вот Но есть их три вида вот
430. 20:24короткий это
431. 20:25дефис сред между цифрами
432. 20:29линна для того чтобы делать Вот такие
433. 20:32вот штучки в
434. 20:33предложениях кавычки Ну я думаю что все
435. 20:36про это знают но ещё раз напомню то что
436. 20:38у нас в русском языке приняты кавычки
437. 20:42ёлочки вот такие кавычки нам пригодятся
438. 20:45только если у нас есть кавычки внутри
439. 20:47кавычек в английском языке используются
440. 20:50вот такие они там ёлочки Не используют
441. 20:51длина строки то есть в идеале длина
442. 20:55строки хорошая это вот около
443. 20:59ле при размере шрифта
444. 21:0116 То есть если у вас кель меньше или
445. 21:05больше то вы можете Вот взять тый шрифт
446. 21:09и 600 пропорционально уменьшить вот этот
447. 21:12вот ваш рисунок где будет 600 отмечено и
448. 21:14посмотреть Какая длина строки должна
449. 21:16быть для шрифта побольше для шрифта
450. 21:18поменьше
451. 21:20Почему так нужно делать потому что вот
452. 21:23есть исследование Лоу
453. 21:29искать начало следующей строки когда вот
454. 21:32такое большое расстояние и в целом если
455. 21:34у вас будет Вот такое большое растяжение
456. 21:36текста для небольшого шрифта то вот это
457. 21:40предложение которое здесь его меньше
458. 21:43дочитывать это вот был подтверждено
459. 21:44исследования ими три раза Они проводили
460. 21:48там в 2000 2012 2018 пока в чте человека
461. 21:53ничего особо
462. 21:55неме
463. 21:57текста дизайн систему у какой-нибудь
464. 21:59большой компании вот допустим дтб ся
465. 22:02типографика или Apple или Google то вы
466. 22:04увидите что там огромное количество
467. 22:07разных стилей и совершенно непонятно
468. 22:10какой Где использовать зачем их так
469. 22:13много как это всё сочетается вот сегодня
470. 22:16мы с вами будем с этой темой разбираться
471. 22:19смотрите вообще разный стиль текста и
472. 22:21размер нужны для того чтобы показывать а
473. 22:24группировку и вложенность как бы одних
474. 22:27блоков в другие вот допустим у нас есть
475. 22:29такая вложенность то что есть там
476. 22:30Солнечная система планета земля на
477. 22:32планете Земля есть материки на материках
478. 22:35есть страны в странных города там районы
479. 22:37улицы дома и так далее И вот для того
480. 22:39чтобы такую штуку нам проделать то мы
481. 22:42должны для самого верхнего уровня
482. 22:44поставить большой заголовок это у нас H1
483. 22:46и чем чтобы показать вложение следующие
484. 22:50заголовки они должны быть уже на порядок
485. 22:54меньше Как построить такой размерный ряд
486. 22:58Вообще прикол в том то
487. 23:00что
488. 23:02сейчас мы живём в такое замечательное
489. 23:04время когда размеры шрифтов в
490. 23:06интерфейсах стандартизировать А как это
491. 23:10произошло то есть в один момент где-то
492. 23:13там тринадцатый четырнадцатый год или
493. 23:15двенадцатый год были выпущены дизайн
494. 23:17системы у Apple и Google по сути это
495. 23:22первый раз когда такие крупные компании
496. 23:24показали в деталях как они делают свой
497. 23:27дизайн и выпустили свои чтобы
498. 23:28разработчики могли делать дизайн в их
499. 23:31стиле и так зародилось как бы две
500. 23:34системы гуглов система
501. 23:38кратная двум и чем и плоская система с
502. 23:44размерами которые могут быть не кратны
503. 23:47то есть у Apple вообще достаточно
504. 23:48сложная система у них там есть отступы
505. 23:5136 там обводки по 033 и всякие такие
506. 23:55решения художественные у Гугла всё как
507. 23:58стабильно там
508. 24:06четырёхсерийный систем потому что это
509. 24:09просто удобнее запоминать Ну и проще
510. 24:12этому учить дизайнеров Там и так
511. 24:16далее когда появились вот эти системы
512. 24:19они появились в первую очередь для
513. 24:21мобильных приложений то дизайнеры стали
514. 24:23их вовсю использовать потом перенесли же
515. 24:26самые Симы на топ и дальше уже ну как бы
516. 24:32из-за того что у всех примерно
517. 24:34одинаковая по размеру типографика она
518. 24:36Потянула за собой примерно одинаковые
519. 24:38размеры элементов примерно одинаковые
520. 24:40размеры отступов вот и дальше дизайн
521. 24:44начал весь очень становиться похожим
522. 24:47друг на друга кстати вот здесь в прошлой
523. 24:50теме Я вам забыл сказать то что кроме
524. 24:53длины строки сейчас ещ принят онный
525. 24:56размер
526. 24:58Для наборного текста то есть это не
527. 25:01меньше 15 это где-то 15 или 16 Можно
528. 25:06даже больше для мелких интерфейсов
529. 25:09профессиональных это 14 но я вам советую
530. 25:12всё-таки всё равно использовать
531. 25:15шестнадцатый
532. 25:16шрифт шестнадцатый
533. 25:18размер кегля для того чтобы ваш текст
534. 25:22был хорошо читаем раньше когда печатали
535. 25:26книги вот там Web 1.0 там на заре
536. 25:30интернета шрифт просто размер шрифтов
537. 25:33просто переносили из книг и поэтому
538. 25:35текст был очень мелкий он был
539. 25:36двенадцатый потом его увеличили
540. 25:39постепенно до четырнадцатого потому что
541. 25:40двенадцатый было неудобно читать и
542. 25:42четырнадцатый был принят как стандартный
543. 25:44и потом было исследование от Гугла что
544. 25:48увеличение размера текста увеличивает
545. 25:50конверсию сайтов и интерфейсов и поэтому
546. 25:53Google Chrome в браузер у себя
547. 25:55стандартным шрифтом сделал 16 чтобы
548. 25:58удобнее было читать ну и сейчас
549. 26:00постепенно эта тенденция она
550. 26:02продолжается шрифты растут уже Я видел
551. 26:04базовые восемнадцатый для веб-дизайна
552. 26:07это уже и двадцать четвёртый и тридцать
553. 26:10второй даже наборный текст поэтому
554. 26:12делайте от шестнадцатого и больше и не
555. 26:16переживайте Как строить размеры вот вам
556. 26:20надо будет вот эту картинку себе
557. 26:21заскринить для того чтобы потом было
558. 26:24удобно вбивать разме плаги
559. 26:28ме нам надо будет воспользоваться
560. 26:30плагином
561. 26:32ty сес мы перейдём в
562. 26:36фигму Где лежит моя
563. 26:38лекция найду вот здесь
564. 26:46ty же неправильно набрал но всё равно
565. 26:49нашл вот так он выглядит с такой
566. 26:50аватаркой запускаем
567. 26:58ки разме Что делать с вот этими
568. 27:01настройками Ну во-первых тый шрифт
569. 27:04базовый или пятый мы с вами построим
570. 27:07сначала линейки для шестнадцатого шрифта
571. 27:09потом для
572. 27:10пятнадцатого вот шестнадцатый здесь
573. 27:13есть размер шага размер шага у нас
574. 27:18связан с красивыми математическими
575. 27:21пропорциями которые используются в
576. 27:24архитектуре здесь в зависимо от того что
577. 27:28будет либо очень маленький шаг вот такой
578. 27:31вот нам допустим не подходит потому что
579. 27:33они идут подряд тый Сенаты восемнадцатый
580. 27:35и так далее 125 Вот это тоже супер
581. 27:39маленький шаг его тоже не советую вам
582. 27:42использовать у вас получится слишком
583. 27:44большое количество размеров вы в них
584. 27:46запутается такое бывает только для очень
585. 27:48больших систем каких-то громовский я вам
586. 27:52советую
587. 27:53использовать вот этот 1
588. 27:55КД или
589. 27:59п или 1 к 309 Это
590. 28:04половина золотого сечения то есть вот
591. 28:06эти размеры они наиболее часто
592. 28:09используются в интерфейсах я сейчас
593. 28:12покажу что с ними дальше делать там их
594. 28:14надо будет немножко округлить с ними
595. 28:16поработать но суть в том то что вам
596. 28:17нужно запомнить что лучше всего подходят
597. 28:19вот эти три пропорции 1,2 1,25 и 139 я
598. 28:23сейчас покажу в чём между ними
599. 28:26разница Так здесь по умолчанию задаётся
600. 28:32илинь то есть высота строки Вы можете в
601. 28:35принципе оставить его там о ид нам Ну
602. 28:39или
603. 28:41допустим ну можете оставить по умолчание
604. 28:441 потому что мы другим плагином будем
605. 28:45его выставлять вот эти значения можно
606. 28:48оставить так вот скругления у нас
607. 28:51включены намм вот эти супер какие-то
608. 28:53детальные пиксели нуж
609. 28:56поэтом в при вот округлить и нажимаем
610. 29:00кнопку
611. 29:06сгенерируйте сов нам в принципе хватит
612. 29:10размеров от десятого шрифта меньше
613. 29:12десятого смысла прямо вообще никак
614. 29:14делать Нет лучше даже минимально
615. 29:16использовать одиннадцатый Если вы
616. 29:18используете десятый то пишите его только
617. 29:20капсом или с капсом максимальный размер
618. 29:23который нам нужен для интерфейсов Это
619. 29:25где-то Че дальше уже будет очень крупно
620. 29:29и они используются для веб-дизайна Вот и
621. 29:32следующее что нам надо будет сделать -
622. 29:33это округлить значение размеров до
623. 29:35чётных если у нас базовый шрифт
624. 29:38шестнадцатый но при этом можно оставить
625. 29:41тринадцатый и одиннадцатый и не делать
626. 29:44их чётными это удобно для всякой
627. 29:47мелочёвки вот посмотрим что у нас тут
628. 29:50появилось
629. 29:51вот у меня базовый шестнадцатый Caption
630. 29:55подпись двенадцатый вот этот девятый Вот
631. 29:57этот мне
632. 29:58не подой я его округ до дего кстати могу
633. 30:03удалить сразу вот эти ремы Они мне тоже
634. 30:05не понадобятся фронтенде потом сами
635. 30:08пересчитают то есть вот здесь будет
636. 30:12десятый двенадцатый меня устраивает Шей
637. 30:15меня устраивает 21 я могу округлить либо
638. 30:17До Д либо до
639. 30:19х Ну я выберу наверное 20 просто
640. 30:22чуть-чуть его уменьш чтобы у меня не
641. 30:25такой большой шаг был меж
642. 30:28здесь 27 я
643. 30:34кругмана
644. 30:3547 пускай будет
645. 30:4148 в идеале чтобы было кратно четырём Ну
646. 30:44для крупных шрифтов Но это не
647. 30:47обязательно и вот допустим 60 я 61
648. 30:50округлювати
649. 30:58половинку золотого сечения потому что он
650. 31:00делает мне большой шаг и достаточно
651. 31:03большие размеры сейчас повторим эту
652. 31:05историю для
653. 31:07другого для других
654. 31:10значений
655. 31:12так вернёмся
656. 31:14фигму опять открываем наш плагин вот
657. 31:18здесь я задам
658. 31:21125 и тоже будет у
659. 31:24меня и виде разме
660. 31:28поэтому я сейчас тоже создам их и для
661. 31:29вас
662. 31:30округ как бы я это
663. 31:33делал здесь у нас шаг немножко поменьше
664. 31:36поэтому размерная линейка побогаче
665. 31:39десятый так как у меня есть десятый есть
666. 31:41тринадцатый Я наверное сделаю его
667. 31:43немножко побольше потому что десятый
668. 31:44шрифт - это прямо на грань пускай будет
669. 31:48одиннадцатый Почему я не сделал
670. 31:49одиннадцатый там потому что у меня здесь
671. 31:53Caption 12 Если я буду здесь до Ого
672. 31:56округлять они будут слишком похожи
673. 31:59здесь у меня шаг хотя бы д пикселя вот
674. 32:01шаг должен быть хотя бы 2 пикселя Потому
675. 32:03что если меньше то у вас контраста между
676. 32:06этими размерами не
677. 32:08будет здесь одиннадцатый я поставил
678. 32:11здесь тринадцатый оставляю здесь
679. 32:12шестнадцатый оставляю пофигу что
680. 32:14тринадцатый одиннадцатый нечётные Это
681. 32:16здесь Нормально Двадцатый оставляю
682. 32:20двадцать пятый Мне нужен либо ше либо че
683. 32:23Я скорее склоняюсь д чет потому что это
684. 32:25более стандартный
685. 32:28Такой размер тридцать первый
686. 32:37[музыка]
687. 32:44округлювати
688. 32:47плюс
689. 32:50во Ну и шестидесятый шесть пер округ до
690. 32:54шестидесятого в принципе меня вот такая
691. 32:57линейка она побольше нравится Чем на
692. 33:011,39 то есть 1,25 вот мне кажется что
693. 33:05вообще там идеальная по сути так вот
694. 33:09допустим мы будем работать с ней что нам
695. 33:12надо сделать дальше дальше у нас план
696. 33:15такой нам Мы округлили размер доч нах
697. 33:19построили с вами вот эти вот значение и
698. 33:22теперь мы будем пользоваться другим
699. 33:25плагином он называется
700. 33:28а он позволит нам перевести проценты в
701. 33:31точные значения чтобы расстояние между
702. 33:34строками не плясал в зависимости от
703. 33:36браузеров и чтобы не было никаких
704. 33:40вольностей от фронтендер вообще по
705. 33:43подбору интерлиньяж у нас есть вот такое
706. 33:45правило Я сейчас его возьму сюда чтобы
707. 33:47вам было удобно за этим
708. 33:51наблюдать вот смотрите всё что до 24 я
709. 33:56считаю текстом Ну то есть это текстовые
710. 33:59блоки в принципе 24 - это уже на грани
711. 34:01что-то между заголовком и текстом Но для
712. 34:04них
713. 34:06А я делаю интерлиньяж
714. 34:10где-то ну от 130 до 150% или
715. 34:14соответственно коэффициент 1,3 или 1,5
716. 34:17чтобы нам работать с вот этим плагином
717. 34:19GoodLine height нам сначала надо
718. 34:21выделить все шрифты и стереть вот здесь
719. 34:26вот проценти
720. 34:28Да у нас ВС разъело но в этом ничего
721. 34:31страшного
722. 34:32нет Потом мы ищем наш вот этот
723. 34:38плагин он к сожалению не стирает
724. 34:40проценты поэтому надо их вручную вводить
725. 34:43и
726. 34:44выделяем текст до два
727. 34:47чего я поставлю здесь 1,5 коэффициент
728. 34:53максималь воздушным
729. 34:57советую особо делать плотнее потому что
730. 34:59с этим надо научиться хорошо
731. 35:02управляться Ну можно поставить 1,4
732. 35:04например это тоже будет хорошо 1,3 уже
733. 35:07так достаточно плотно Сейчас я вам
734. 35:09покажу разницу Сейчас сделаем сначала
735. 35:131,5 R это у
736. 35:17нас к Какому значению округляется Вот
737. 35:22это число которое получится то есть мы
738. 35:25стараемся округлять его к
739. 35:28Почему Потому что большинство
740. 35:30компонентов и то что мы с вами будем
741. 35:32разрабатывать в дизайн системах они
742. 35:35построены по четырёх ксей сетке и
743. 35:38поэтому чтобы нам чтобы у нас шрифты
744. 35:40сочетались с нашими иконками кнопками
745. 35:44там всякими
746. 35:46переключателями лучше сделать так чтобы
747. 35:48вот это вот Ну вот значение высоты
748. 35:52строки совпадало с Ну было кратно
749. 35:55четырём так вот я нажал У меня
750. 35:58получилось 1,5 Что такое 1,5 То есть это
751. 36:02я когда складываю у меня вот здесь
752. 36:04расстояние Это примерно 150% от высоты
753. 36:08вот этой строки ну вот видите так
754. 36:09получилось воздуш ненько даже для
755. 36:11двадцать четвёртого оно не выглядит
756. 36:13крупным Но если вы прямо хотите чтобы у
757. 36:16вас было всё плотно вот я поставлю 1 и3
758. 36:20поменяю и Как видите у меня Ну тоже
759. 36:22нормально выглядит но просто не так
760. 36:25много места за
761. 36:28Давайте сечас сравним эти два блока
762. 36:29просто
763. 36:31чтобы посмотреть какая
764. 36:34разница Ну вот то есть Видите вот эта
765. 36:36штука она намного более
766. 36:38воздушная чем Вот это но это тоже
767. 36:42ОКей главное не делать меньше 1 и3
768. 36:45сейчас это
769. 36:46уже Ну можно сказать не принято раньше
770. 36:49интерлиньяж был 130% я советовал ГТО
771. 36:53примерно 3 года назад чувствую что
772. 36:57растёт мода на такой интерлиньяж теперь
773. 37:01выделим заголовки А вот у заголовков уже
774. 37:06должен
775. 37:07быть должна быть высота строки поменьше
776. 37:10Потому что так как буквы крупные то и
777. 37:12отступы будут очень крупные И вам
778. 37:14придётся для того чтобы не нарушать
779. 37:16принцип близости делать гигантский
780. 37:18отступ по всему экрану поэтому от
781. 37:20отступов заголовка по сути зависит
782. 37:22насколько длинный у вас будет макет Вот
783. 37:25давайте я здесь поставлю
784. 37:27о
785. 37:29и вот написано что от одного до 1 и3
786. 37:33Давайте поставим 1,2 здесь оставляем
787. 37:36тоже
788. 37:37четвёрку и у нас получается Всё тут
789. 37:40посчитано я сейчас сложу это выглядит в
790. 37:43принципе достаточно прилично как бы
791. 37:46меньше не надо и больше тоже не надо Но
792. 37:48если вот я поставлю
793. 37:51единичку То будет вот так види это было
794. 37:57вот здесь вот некоторые элементы они уже
795. 37:59начинают друг с другом взаимодействовать
796. 38:01поэтому 1 1 и2 1 и3 Это ваши друзья для
797. 38:09заголовка то есть вот вот мы с вами
798. 38:11построили по сути базовую
799. 38:23типографические в этих
800. 38:25сочетаниях мся с ми
801. 38:29Вот который
802. 38:31придуман записан просто мной никто его
803. 38:34так не называет но я буду называть
804. 38:36принцип контраста п1 2 3 А что значит п1
805. 38:392 3 есть по сути всего три приёма Как вы
806. 38:43можете работать с контрастом первый это
807. 38:48забрать 50% тона у одного из элемента
808. 38:52допустим одинаковых разме
809. 38:57Вот это половина ЧР второй инструмент -
810. 39:00это увеличить плотность на два то есть у
811. 39:03вас допустим этот текст Regular
812. 39:05следующий медиум и следующий После него
813. 39:08себо или деболт как он называется и
814. 39:12допустим вычистить один размер из вот
815. 39:15этой нашей линейки То есть у нас есть
816. 39:18тринадцатый следующий После него оди
817. 39:22всего три приёма цвет плотность и размер
818. 39:27и вот этими тремя приёмами мы играем для
819. 39:29того чтобы достигнуть большего контраста
820. 39:31каждый из приёмов можно усиливать вот
821. 39:34здесь допустим за счёт какого-то яркого
822. 39:37цвета мы можем больше внимания
823. 39:38привлекать к этой истории вот здесь я
824. 39:41могу не две плотности добавить А ещё
825. 39:42больше здесь У меня начертание бок А
826. 39:45здесь Regular очень сильный контраст
827. 39:47получается и здесь размер я естественно
828. 39:49могу прибавлять не один а вообще много и
829. 39:52там до Ну впт до бесконечности и
830. 39:55получается что вот это у меня минималь
831. 39:57конт А вот это у меня будет максимальный
832. 39:59контраст То есть я все эти три приёма
833. 40:01могу сочетать вместе делать это жирнее
834. 40:04больше Вот это Серым и всё это как раз
835. 40:08те приёмы которые мы используем в
836. 40:11типографике теперь разберёмся с вами с
837. 40:14правилами сочетаний для
838. 40:16стилистики Regular То есть сейчас Я
839. 40:20думаю вы тоже замечали такую историю что
840. 40:23достаточно модно что в интерфейсах
841. 40:27заголовки Ну то есть они не совсем
842. 40:30тонкие типа
843. 40:31как Хотя раньше была такая мода делать
844. 40:34Вот такие тонкие заголовки они просто
845. 40:36обычного начертания просто за счёт
846. 40:38своего размера видно что он как бы
847. 40:40намного толще чем наш базовый наборный
848. 40:44текст как нам сделать вот это сочетание
849. 40:47я вам сейчас покажу Ну то есть для
850. 40:49начала нам нужно просто взять нашу Вот
851. 40:52эту вот историю и скопировать давайте я
852. 40:55воз
853. 40:58чтобы Вы могли за мной ВС это
854. 41:02повторить
855. 41:04так я тут вот это всё расшир Вот это
856. 41:08[музыка]
857. 41:10вытяну и расстояние между ними сделаю
858. 41:14побольше допустим 100 чтобы мне было
859. 41:18удобно с этим дальше
860. 41:21работать что мне надо сделать мне надо
861. 41:23скопировать просто
862. 41:26рядом вот эти тексты ровно такого же
863. 41:29размера просто
864. 41:31напротив потом я избавляюсь слева от вот
865. 41:35этого самого большого заголовка просто
866. 41:37удаляю его как здесь по
867. 41:40инструкции потом следующее что я делаю
868. 41:44Это я
869. 41:45смещают этот список на два размера вниз
870. 41:50кстати там надо было две удалить Вот
871. 41:53давайте я я сначала короче смещ а потом
872. 41:55удалю на два размера вниз То есть у нас
873. 41:57сейчас они идентичны вот я на один
874. 42:00размер вниз сместил вот я ещ один на
875. 42:03один размер вниз сместил и Я располагаю
876. 42:06их вот между вот этими строчками чтобы
877. 42:08мне удобно было собирать потом я вот эти
878. 42:11два верхних из левого столбца удаляю
879. 42:14выделяю вот это вот добро и просто вот
880. 42:18сюда загоняю один под
881. 42:26другой немножко побольше
882. 42:28сделать чтобы они у меня
883. 42:34залезли все вот я загоняю один размер по
884. 42:37другим и получилось так что они у меня
885. 42:39сочетаются Теперь через
886. 42:42один то есть вот смотрите здесь
887. 42:44заголовок самый большой А вот этот это
888. 42:48через один и Тут всё через один через
889. 42:50один через один через оди Вот и у нас
890. 42:52здесь осталось внизу несколько
891. 42:54неприкаянные Мы с ними сейчас отдельно
892. 42:56Поработаем
893. 42:57то есть смотрите у вас есть
894. 43:00тый это ваш наборный текст здесь уже
895. 43:04можно не через два сочетать Ну точнее
896. 43:06Можно и через два И через один сочетать
897. 43:08вот допустим у нас есть шестнадцатый и
898. 43:10тринадцатый их можно спокойно поставить
899. 43:13рядом вот шестнадцатый и одиннадцатый их
900. 43:16тоже можно поставить рядом у вас
901. 43:19есть тринадцатый и оди мы их можем вот
902. 43:23так вот соединить по сути это все
903. 43:25сочетания которые
904. 43:28Ну у Вас могут быть только вот эти вот
905. 43:30два надо местами поменять Чтобы вс было
906. 43:32по
907. 43:38размеру то есть вот ещё раз просто в
908. 43:41конце повторю то что у вас здесь может
909. 43:43быть два сочетания то есть шестнадцатый
910. 43:45текст с тринадцатым и шестнадцатый текст
911. 43:48с самым маленьким одиннадцатым вот ну и
912. 43:50Риты с ом они тоже как бы есть по сути
913. 43:53это все сочетания которые могут вам это
914. 43:57гармоничные сочетания которые могут вам
915. 43:59пригодиться в вашей работе теперь я
916. 44:03покажу вам как делать название к ним то
917. 44:06есть я скопирую ещё раз вот этот столбец
918. 44:10выров его по правому краю Здесь тоже И
919. 44:14покажу как мы их называем мы называем
920. 44:17сверху вниз У нас вот этот
921. 44:21стиль называется
922. 44:23H1 вот этот H2 бо
923. 44:29H3
924. 44:31H4 и
925. 44:34чет
926. 44:36H5 теперь с
927. 44:38текстом У вас есть текст шестнадцатый
928. 44:41это ваш базовый размер мы его называем
929. 44:44текст размер который побольше
930. 44:47соответственно называется текст
931. 44:50L Ну обычно не делаю Вот этоже Даше э
932. 44:57соответственно тринадцатый размер - это
933. 44:59текст
934. 45:01S а одиннадцатый размер - это
935. 45:05текст
936. 45:06XS Вот вот эти ещё называются Caption
937. 45:10могут называться Caption в разных дизайн
938. 45:11системах Но вот так вот в принципе по
939. 45:13ним достаточно удобно ориентироваться ну
940. 45:16и соответственно вот эти размеры которые
941. 45:20у вас остались Они соответствуют тем
942. 45:22которые вы подписали то есть вот это у
943. 45:26нас совой
944. 45:27и сороковой то есть вот это у нас
945. 45:31H3 Вот это у нас значит
946. 45:35H4 Вот это у нас
947. 45:38H5 Вот это у нас текст
948. 45:45L текст
949. 45:50м текст
950. 45:53S это тоже
951. 45:59текст
952. 46:02S и вот это у нас КСТ
953. 46:15XS Вот мы с вами построили таблицу
954. 46:19сочетаний для вот этой штуки с регум вот
955. 46:24вот это я сохраню Пускай нам пригодится
956. 46:27для будущих
957. 46:30расчётов теперь Ребята давайте построим
958. 46:33такую же таблицу сочетаний если у нас
959. 46:35базовый шрифт будет не 16 а 15 То есть я
960. 46:40запускаю вот этот плагин меняю здесь на
961. 46:4315 скел я оставляю 1.25 мне нравится и
962. 46:48нажимаю
963. 46:50сгенерировать Так у меня получается
964. 46:53точно такая же табличка я напомню вам
965. 47:00про вот эти правила интерлиньяж чтобы
966. 47:03они у нас лежали
967. 47:08рядом так вот
968. 47:12смотрите если у нас это под
969. 47:27я оставлю Трей я оставлю дей три
970. 47:32семо соше п седьмой То есть я вам хочу
971. 47:35сказать что вы в принципе если сами
972. 47:37делаете дизайн систему Вы можете
973. 47:41и использовать и дробные Ну не дробные
974. 47:44точнее нечётные размеры для ваших
975. 47:47шрифтов и я такое достаточно часто
976. 47:49встречаю то есть ну можете на крайняк
977. 47:52округлить их там дох То есть у вас вот
978. 47:54здесь вот будет д здесь
979. 47:59ири и так далее но можете и не округлять
980. 48:02То есть если как бы хотите вы плоскую
981. 48:05систему но я вам советую всё-таки Если
982. 48:06вы начинающий дизайнер пользоваться
983. 48:08шестнадцатым базовым и округлять Вот Но
984. 48:11сейчас построю чтобы всё было как бы
985. 48:14чётенько
986. 48:15вот смотрите у меня текст до два чето
987. 48:19это опять от 1,3 до полтора То есть я
988. 48:23сначала убираю здесь проценты
989. 48:27чтобы у меня плагин сработал
990. 48:30[музыка]
991. 48:32запускаю ставлю здесь Ну вот давайте для
992. 48:35эксперимент я Постав не 1 и5 а
993. 48:391,4 И здесь поставлю тоже четырёх
994. 48:42пиксельную
995. 48:44сетку нажму на кнопку вот у меня везде
996. 48:47получилось 1,4 Ну это тек для залов
997. 48:56после двадцать четвёртого допустим здесь
998. 48:59будет
999. 49:011,2 так размеры с интели Нежа я сделал и
1000. 49:07теперь Давайте
1001. 49:10попробуем на них потренироваться и
1002. 49:13сделать себе жирные сочетания то есть по
1003. 49:17сути видите работа вся та же самая Ну то
1004. 49:19есть если я сейчас буду делать сочетание
1005. 49:22я это сделаю там точно таким же способом
1006. 49:25возьму
1007. 49:27делаю большой
1008. 49:29фрейм сделаю здесь большое
1009. 49:33расстояние там допустим
1010. 49:37100 копирую
1011. 49:45текст вот эти два
1012. 49:49убираю сейчас точнее сдвигаются на два
1013. 49:54вниз 1Д
1014. 49:58вот эти два
1015. 49:59убираю и просто вот подставляю
1016. 50:06их один под
1017. 50:10другой Ну вот здесь вот надо побольше
1018. 50:17подвинуть вот два одиноких текста
1019. 50:23внизу Я просто вот копирую
1020. 50:28свой базовый
1021. 50:32размер пятнадцатый вместо шестнадцатого
1022. 50:34сюда и вот здесь вот два вот этих
1023. 50:37сочетания оставляю То есть мне надо
1024. 50:39чтобы у меня был здесь шаг через один
1025. 50:41одинадцатый тринадцатый тринадцатый
1026. 50:44пятнадцатый вот такой вариант типа
1027. 50:47пятнадцатый плюс одиннадцатый тоже мне
1028. 50:48может пригодиться я его
1029. 50:50оставлю вот просто поменяю их
1030. 50:53местами чтобы всё шло по
1031. 51:01размеру всё то есть мы с вами
1032. 51:03с сочетаниями для тонких шрифтов
1033. 51:07разобрались для шестнадцатого и для
1034. 51:08пятнадцатого не переживайте все Вот эти
1035. 51:11шаблоны А вы можете после лекций если на
1036. 51:14ютубери получить через нашего Бота я их
1037. 51:18все сделал для разных размеров для
1038. 51:20разных как бы вот этих пропорций можете
1039. 51:23себе сохранить потыкать попробовать
1040. 51:26текст поставлять и так далее так дальше
1041. 51:30следующая тема это у нас как как делать
1042. 51:33сочетание для стилистики если у вас болт
1043. 51:36жирные заголовки вот тут у меня
1044. 51:38заголовки все Regular тоненькие у нас же
1045. 51:41бывают и жирные заголовки правильно не
1046. 51:44только тонкие Но вот ещё и бывают вот
1047. 51:47такие поэтому мы с вами Давайте ещё раз
1048. 51:50построим одну линейку Повторение мать
1049. 51:54учения нам никому это не повредит 16
1050. 51:58125
1051. 52:03сгенерировать округлили доч отно кроме
1052. 52:06вот этих нижних то есть здесь будет
1053. 52:1011 13 тоже норм 16 норм 20 25 тут мне
1054. 52:15надо
1055. 52:1824 здесь будет
1056. 52:2332 здесь будет 40
1057. 52:32здесь будет
1058. 52:3448 Ну и здесь будет
1059. 52:3760 Так
1060. 52:4060
1061. 52:4348 ремы
1062. 52:46удаляю интерлиньяж
1063. 52:50сейчас
1064. 52:52простам до че
1065. 52:57сетка
1066. 52:58че после двадцать
1067. 53:01четвёртого
1068. 53:021,3 сетка
1069. 53:05четыре Что
1070. 53:10случилось проценты забыл
1071. 53:14стереть так да операция такая Надо
1072. 53:17сначала проценты стереть стёрли проценты
1073. 53:20ещё раз тогда До двадцать четвёртого 1,5
1074. 53:24и4 и после
1075. 53:27два чет
1076. 53:291,3 иче всё построили эту штуку и теперь
1077. 53:34нам надо сделать сочетание для
1078. 53:37болда что мы делаем мы вытягиваем опять
1079. 53:41эту штуку вот здесь вот расстояние
1080. 53:45сделаем 100 чтобы было удобно их
1081. 53:48загонять друг под
1082. 53:49друга
1083. 53:51копируем все наши заголовки и добавляем
1084. 53:55им жирность допустим нас не а себо ПД
1085. 54:00вот такие заголовки болды жирнее я вам
1086. 54:03делать не советую потому что ну дизайн
1087. 54:06будет от этого темнее можно накосячить
1088. 54:09сделать грязным потом нам не нужен самый
1089. 54:12мелкий жирный заголовок потому что под
1090. 54:14ним ничего не может быть Ну то есть
1091. 54:16меньше о у нас ничего нет поэтому мы его
1092. 54:19просто удаляем
1093. 54:21ихний заголовок нам вот этоже
1094. 54:25пригоди мы здесь сделаем смещение на
1095. 54:28один не на два а на один Вот видите
1096. 54:31всего на один вот этот верхний нам не
1097. 54:33нужен То есть я удалил один сверху и
1098. 54:35один вот отсюда снизу и загоняю их друг
1099. 54:39под
1100. 54:45друга Ну чуть-чуть отступа
1101. 54:49сейчас поправим
1102. 54:56с отступами отдельно будем разбираться
1103. 54:58дальше Ну вот и у нас получились Такие
1104. 55:00сочетания
1105. 55:02для жирного текста и здесь немножко
1106. 55:06по-другому будут называться наши стили
1107. 55:09то есть мы опять я скопировал всё
1108. 55:12выровнял по правому
1109. 55:14краю и пишу начало заголовки
1110. 55:19H1
1111. 55:22H2
1112. 55:24H3 H4
1113. 55:26[музыка]
1114. 55:28H5 Вот так мы назвали заголовки от H1 до
1115. 55:32H5 и теперь вот эти стили текста У нас
1116. 55:36называются subtitle То есть это
1117. 55:38специальные стили для заголовка subtle
1118. 55:441
1119. 55:45subtitle
1120. 55:472 subtitle
1121. 55:493 и вот это у
1122. 55:52нас будет subtitle
1123. 55:544 вот
1124. 55:57и дальше у нас вопрос А что делать с
1125. 55:59названиями текстов моя практика
1126. 56:02показывает что для них лучше не Ну
1127. 56:06дальше не писать что вот это H6 H7 H8 и
1128. 56:09что вот это сатал такой такой потому что
1129. 56:12можно запутаться поэтому мы тут начнём с
1130. 56:14текста Вот найдём наш базовый размер
1131. 56:15шестнадцатый и напишем что это
1132. 56:19текст меньше него естественно текст
1133. 56:25и XS больше него это текст
1134. 56:33L и соответственно Вот это у нас
1135. 56:37Двадцатый и текст L Двадцатый и я назову
1136. 56:40его просто текст L
1137. 56:44BT Вот это шестнадцатый и базовый размер
1138. 56:47у нас текст шестнадцатый значит я его
1139. 56:50назову просто текст M
1140. 57:00вот в таком случае немножко меньше
1141. 57:02Путаница потому что вы не так часто
1142. 57:04работаете с большим количеством
1143. 57:06заголовка но супер часто работаете с
1144. 57:08маленькими подзаголовками и вам так
1145. 57:10будет проще ориентироваться в ваших
1146. 57:13стилях которые будут сохранены где-то
1147. 57:16сбоку то есть на самом деле даже вот это
1148. 57:19количество стилей можно уменьшить Ну то
1149. 57:21есть я могу Как оптимизировать
1150. 57:24количество стиле я могу вот от этого
1151. 57:25избавиться
1152. 57:27и вот это у меня
1153. 57:30будет Допустим то есть можете оставить А
1154. 57:33можете сделать вот так вот это будет 1
1155. 57:36он и тут и тут будет
1156. 57:37одинаков Или допустим смотрите что вы
1157. 57:40можете ещё сделать Вы можете вот эти все
1158. 57:43Саб тайтлы Ну может какой-нибудь один
1159. 57:46оставить или вообще их удалить И вот
1160. 57:49здесь везде
1161. 57:57ле это просто я вам показал максимальную
1162. 58:00комплектацию То есть вы из вот этих
1163. 58:03можете в принципе оставить два Сата и
1164. 58:06сделать вот так
1165. 58:08вот или оставить только один сал вот
1166. 58:11этот четвёртый А вот эти удалить то есть
1167. 58:14короче вот это максимальная комплектация
1168. 58:17то есть сколько вам оставлять вот ну с
1169. 58:19этими Сата Решайте сами можете их вообще
1170. 58:21убрать и Поль
1171. 58:25текстом брать только вот эти два или вот
1172. 58:27этот один или вот эти три То есть они Ну
1173. 58:31это стиль
1174. 58:32опциональный вот по сути вот у вас
1175. 58:34получилась а такая история с сочетанием
1176. 58:40А что с размерами для мобилки Да по сути
1177. 58:42всё тоже самое Просто когда у вас есть
1178. 58:45крупные заголовки на десктопе допустим у
1179. 58:48вас там H1
1180. 58:50[музыка]
1181. 58:51это ну сколько там 60 в нём вам на
1182. 58:55мобилке
1183. 58:56Ну вот 40 если у вас крупный заголовок
1184. 58:58или 32 будет за глаза то есть вы на
1185. 59:01мобилке просто вот эти H1 и H2
1186. 59:04заменяется допустим на H3 или H4 или вы
1187. 59:07H1 и H2 заменяется на H4 и H5 всё текст
1188. 59:12остаётся такого же размера текст на
1189. 59:15мобилке не надо уменьшать Пускай тоже
1190. 59:17будет шестнадцатый пускай будет крупный
1191. 59:19То есть это удобно читать главное Просто
1192. 59:22чтобы вот эти заголовки у вас не
1193. 59:24пожирали такое огромное количество мест
1194. 59:27Ну в принципе даже сороковой размер для
1195. 59:29мобилки это сейчас Окей там для
1196. 59:31некоторых экранов это вполне себе
1197. 59:34нормально смотрится теперь про СТВ
1198. 59:37типографике вот я вас научу всего одному
1199. 59:40короче
1200. 59:41правилу чтобы не усложнять и у вас 80%
1201. 59:46ошибок которые вы совершаете они просто
1202. 59:48уйдут запомните отступ до текста должен
1203. 59:53быть не меньше чем илинь текста больше
1204. 59:57может быть а Меньше нет Вот пример вам
1205. 1:00:00слева вот смотрите есть у меня такой
1206. 1:00:02текст одно слово какой у меня должен
1207. 1:00:05быть отступ до него Я конечно могу его
1208. 1:00:09прижать сюда но в случае если у меня
1209. 1:00:12вдруг заголовок станет гигантским Ну то
1210. 1:00:15есть сложится там допустим две строки то
1211. 1:00:18у меня тогда вот этот текст он влезет в
1212. 1:00:21его интерлиньяж и будет это будет
1213. 1:00:23нарушением принципа близости я вам
1214. 1:00:26сейчас покажу о чём я
1215. 1:00:31говорю вот допустим смотрите я взял
1216. 1:00:33маленький
1217. 1:00:34текст и у
1218. 1:00:37меня ну допустим у меня слово The
1219. 1:00:42Quick То есть если я уверен что у меня
1220. 1:00:45никогда не будет второй строки я его
1221. 1:00:48могу поближе подвинуть но не сильно
1222. 1:00:51близко то есть вот так вот Не надо
1223. 1:00:52двигать то есть вот нормально Ну вот
1224. 1:00:55где-то на таком сто достаточно воздушно
1225. 1:00:58как мне проверить на каком расстоянии я
1226. 1:01:00просто проверяю свой интерлиньяж Ну и
1227. 1:01:04примерно на этом расстоянии Ну то есть я
1228. 1:01:06и должен этот текст поставить То есть он
1229. 1:01:09у меня не должен сильно залазить сюда Ну
1230. 1:01:12допустим Ну тут ещё у меня заголовок Как
1231. 1:01:14видите воздушный помните же что можно
1232. 1:01:15было
1233. 1:01:17сделать вот такой интерлиньяж
1234. 1:01:26воздушный понимаете То есть если у меня
1235. 1:01:27интерлиньяж большой то у меня и отступы
1236. 1:01:29должны быть Вот такие конские А если у
1237. 1:01:31меня интерлиньяж маленький то я могу
1238. 1:01:33себе позволить И отступы поменьше
1239. 1:01:37сделать вот такие допустим и вот тоже
1240. 1:01:39будет
1241. 1:01:41симпатично поэтому для заголовков в
1242. 1:01:44ваших шаблонах я сделал интерлиньяж
1243. 1:01:47поменьше чем 120 вот чтобы у вас не было
1244. 1:01:51таких проблем то есть вот по сути это и
1245. 1:01:53есть тот принцип по которому вам надо
1246. 1:01:55ставлять элемен То есть если я кнопку
1247. 1:01:58какую-то захочу сделать То есть она у
1248. 1:02:00меня тем же самым правилом повинуется То
1249. 1:02:03есть она не должна
1250. 1:02:06влезать в его личное пространство как бы
1251. 1:02:09вот этого шрифта не должна влезать в его
1252. 1:02:11интерлиньяж
1253. 1:02:13то есть вот по сути Вот это одно правило
1254. 1:02:16вам надо запомнить и у вас большинство
1255. 1:02:18ошибок они как
1256. 1:02:19[музыка]
1257. 1:02:22бы
1258. 1:02:24смм единственный нюанс вот здесь видите
1259. 1:02:27есть тельный
1260. 1:02:28знак я что хочу о ЧМ хочу вас
1261. 1:02:32предупредить то что вот этот межстрочный
1262. 1:02:35просвет с ним
1263. 1:02:38есть есть два способа измерять эту
1264. 1:02:43историю Вот видите здесь у меня залазит
1265. 1:02:47текст залазят крупные буквы в вот этот
1266. 1:02:50межстрочный просвет А здесь не залазит и
1267. 1:02:52так и так
1268. 1:02:54допусти вот если вы вот так будете
1269. 1:02:57отступы строить то у вас меньше
1270. 1:02:58вероятности что будут какие-то косяки Да
1271. 1:03:01может казаться если у вас две строчки
1272. 1:03:03вплотную стоят одна серая одна чёрная то
1273. 1:03:06лучше конечно вот так поставить чтобы
1274. 1:03:08они прямо стык встык были Вот но иногда
1275. 1:03:11если текста допустим больше у вас здесь
1276. 1:03:14больше чем одна строка Там две строки
1277. 1:03:16три строки то лучше Ну всё-таки вот до
1278. 1:03:20Верх то есть здесь отступ будет
1279. 1:03:21дополнительный здесь между строками
1280. 1:03:23будет отступ ноль а вот здесь будет
1281. 1:03:25четыре пие
1282. 1:03:28условно Давайте всё-таки Нарисуем Я
1283. 1:03:31боюсь что вы не
1284. 1:03:33поняли вот смотрите вот так вплотную я
1285. 1:03:36могу поставить
1286. 1:03:37[музыка]
1287. 1:03:38норм Видите какой у меня здесь
1288. 1:03:41межстрочный
1289. 1:03:45просвет вот
1290. 1:03:48он вот я их поставил друг к другу вот
1291. 1:03:52здесь вот вплотную видите у меня залазит
1292. 1:03:55я вот эта вот история от буквы т наверх
1293. 1:03:59но смотрится всё равно норм вот так
1294. 1:04:03смотрится
1295. 1:04:04Норм но если у меня будет Вот такая вот
1296. 1:04:07штука несколько строчек и я вот так
1297. 1:04:11вплотную
1298. 1:04:18прифинанс вот на два или четыре пикселя
1299. 1:04:21если у вас вот туп два есть дизайн Steam
1300. 1:04:23Вот чуть-чуть отодвинули уже лучше
1301. 1:04:25выглядит
1302. 1:04:27вот вам ещё раз на белом чтобы Вы
1303. 1:04:29внимательно посмотрели В чём
1304. 1:04:33разница всё с отступами вроде закончено
1305. 1:04:37Итак типографический
1306. 1:04:39Бутерброд что же это у нас
1307. 1:04:42такое есть вот такая Замечательная вещь
1308. 1:04:45допустим на каком сервисе маркетплейсе
1309. 1:04:47на любом
1310. 1:04:48магазине это когда у типографи разного
1311. 1:04:51размера сложить вме чтобы Прим всё
1312. 1:04:56смотрелось хорошо и гармонично чтобы
1313. 1:04:59делать гармоничную композицию В
1314. 1:05:00типографике нам нужно разобраться с
1315. 1:05:02такими понятиями как ритм метр и
1316. 1:05:06пятно Давайте Сначала пройдёмся по
1317. 1:05:09базовому понятию движений Вот это у нас
1318. 1:05:12статическая композиция то есть видите
1319. 1:05:15все шарики на одном расстоянии одного
1320. 1:05:17размера Они уверенно покоятся в центре
1321. 1:05:20экрана никуда не движутся если мы
1322. 1:05:23посмотрим на вот эти вот шарики то здесь
1323. 1:05:26есть движение из-за того что я разделил
1324. 1:05:29их отступами вот эти у меня собрались
1325. 1:05:31вместе и получается что у нас это либо
1326. 1:05:34куда-то летит в какую-то сторону либо
1327. 1:05:36стреляет Ну то есть какое-то движение
1328. 1:05:38уже визуально оно ощущается то же самое
1329. 1:05:41у нас с любыми объектами которые мы
1330. 1:05:44рисуем есть метрические композиции То
1331. 1:05:47есть статичные это спокойные
1332. 1:05:50ровный как бы повторяющиеся объекты То
1333. 1:05:54есть у нас получается пампампампам как в
1334. 1:05:57музыке то есть или вот большие или
1335. 1:06:00чередования одинаковых объектов то есть
1336. 1:06:02вот это ВС статические композиции есть
1337. 1:06:05ритмические композиции которые двигаются
1338. 1:06:08То есть когда у нас идёт разница по
1339. 1:06:11размером у нас движение идёт как бы от
1340. 1:06:14маленького к большому потом к маленькому
1341. 1:06:16то есть вот это вот движение оно
1342. 1:06:18ощущается нашим глазом вот ритмическое
1343. 1:06:22движение может создаваться за сч
1344. 1:06:24размеров и
1345. 1:06:26ну е за сч
1346. 1:06:29цветов и вот смотрите Чем проще
1347. 1:06:32перемещение взгляда по объекту Чем проще
1348. 1:06:35считывается вот эта вот динамика
1349. 1:06:38тем выглядит дизайн чище проще и
1350. 1:06:42гармоничнее То есть если у нас динамика
1351. 1:06:44сложная то и воспринимать соответственно
1352. 1:06:46наш дизайн становится
1353. 1:06:48сложнее вот та же самая история с ритмом
1354. 1:06:51отступов то есть чем проще тем лучше тем
1355. 1:06:54сложнее тем сложнее воспринимать тоже
1356. 1:06:57самое с размерами и тоже самое с цветами
1357. 1:07:00и все эти вещи вместе они работают
1358. 1:07:04одновременно то есть допустим я могу
1359. 1:07:06создать динамику сразу И по цвету и по
1360. 1:07:08размеру и вот это вот будет простая
1361. 1:07:11динамика А если у вас вот такой
1362. 1:07:14переполох то серое то Чёрное то цветное
1363. 1:07:18то маленькое то большое то вот это вот
1364. 1:07:20будет шумно выглядеть вот это вот будет
1365. 1:07:22выглядеть Просто теперь
1366. 1:07:26наме чтобы работать
1367. 1:07:28с метром и ритмом нам нужно разобраться
1368. 1:07:32как вообще построить пятно вот мы
1369. 1:07:35используем для этого вот такую бр
1370. 1:07:37подложку которую можете наложить на
1371. 1:07:40любой ваш дизайн для этого рисуем серый
1372. 1:07:43прямоугольник ставим 1% прозрачности и
1373. 1:07:47выбираем эффект background BL и вот
1374. 1:07:50когда я это накладываю на какие-то
1375. 1:07:52другие конструкции вот размыть у меня
1376. 1:07:56получается восприятие этого дизайна как
1377. 1:07:59пятен то есть Видите вот здесь вот
1378. 1:08:01большое Чёрное пятно маленькое серое
1379. 1:08:04пятно и вот по сути когда мы считываем
1380. 1:08:07дизайн бессознательно мы ориентируемся
1381. 1:08:10как раз по восприятию на вот эти вот
1382. 1:08:12пятна и вот смотрите вот такой снипет по
1383. 1:08:16сути кажется что здесь сложно достаточно
1384. 1:08:19всё много разной типографики большие
1385. 1:08:21шрифты маленькие шрифты здесь строчки
1386. 1:08:23там разного размера и прочего но факту
1387. 1:08:26здесь у нас есть большое Чёрное пятно и
1388. 1:08:28здесь есть большое Чёрное пятно Здесь
1389. 1:08:30оно подкрепляется синим и здесь
1390. 1:08:31подкрепляется синим то есть и есть
1391. 1:08:33небольшая динамика то есть вот это
1392. 1:08:35потемнее а вот это посветлее То есть это
1393. 1:08:37как бы метрическая композиция Но в ней
1394. 1:08:40есть небольшой ритм по цвету То есть все
1395. 1:08:44эти вещи они комбинирует у нас чисто
1396. 1:08:47ритмическая композиция допустим здесь
1397. 1:08:50достаточно много разной типографики но
1398. 1:08:52как видите идёт от яркого чёрного вот
1399. 1:08:55здесь вот Просветов больше Поэтому пятно
1400. 1:08:58бледнеет но оно всё ещё большое вот
1401. 1:09:00здесь оно по площади маленькое но тем не
1402. 1:09:03менее получается что оно более бледное
1403. 1:09:06чем вот это потому что по размеру меньше
1404. 1:09:08и здесь совсем бледное пятно серое и два
1405. 1:09:11акцента крупный акцент потом ну как бы у
1406. 1:09:14нас большая динамика такой дыщ наверху
1407. 1:09:17потом плавнее плавнее плавнее плавнее О
1408. 1:09:20как бы снижается интенсивность и в конце
1409. 1:09:23ещё акценти даёт то есть здесь вот
1410. 1:09:25получается такой как бы ритм Ну и эти
1411. 1:09:29штуки они могут сочетаться вот как выше
1412. 1:09:31мы видели что у нас может быть
1413. 1:09:34метрическая композиция но при этом в
1414. 1:09:36динамике а при этом динамика есть в
1415. 1:09:40цвете то есть оно немножко бледнеет так
1416. 1:09:42и с размерами может быть то же самое
1417. 1:09:45большое Чёрное пятно большое серое пятно
1418. 1:09:47большо маленькое Чёрное пятно маленькое
1419. 1:09:49серое пятно Ну вот эти штуки они а
1420. 1:09:52немножко по отдельности воспринимаются
1421. 1:09:54потому что мы всё-таки смотрим Ну вот
1422. 1:09:55вот эту вот большую картинку Ну ещё одна
1423. 1:09:58ритмическая композиция вот такой
1424. 1:10:00достаточно сложный снипет с большим
1425. 1:10:02количеством текста в узкой вёрстке но по
1426. 1:10:05факту у нас что тут есть яркое зелёное
1427. 1:10:09пятно яркое Чёрное пятно правда поменьше
1428. 1:10:11размером потом идёт серое пятно потом
1429. 1:10:14бледное пятно потом вот маленький
1430. 1:10:16голубой акцент то есть по сути тоже от
1431. 1:10:18большого от яркого какого-то объекта к
1432. 1:10:22серому постепенно вот уменьшается
1433. 1:10:25вот эта динамика цвета то есть вот это
1434. 1:10:28вот это тоже самое что вот это вот ну и
1435. 1:10:32последний блок здесь Всё достаточно
1436. 1:10:35просто большой жирный акцент большое
1437. 1:10:37серое пятно маленький серый акцент как
1438. 1:10:40же нам это дело строить теперь Ну куча
1439. 1:10:43всего же так сложно на самом деле не так
1440. 1:10:45сложно есть по сути у вас всего два
1441. 1:10:49инструменты для этого первый инструмент
1442. 1:10:51- это факто когда вы берёте сочетание
1443. 1:10:55крупных больших объектов и маленьких
1444. 1:10:57объектов то есть достигаете здесь
1445. 1:11:00максимального контраста то есть Вот
1446. 1:11:02видите если у нас есть сочетание А ну
1447. 1:11:06как бы размеров гармоничные то есть
1448. 1:11:08здесь небольшой очень шаг по размеру и
1449. 1:11:10контраст он всё время гармоничный
1450. 1:11:13потихонечку расходится то если я хочу
1451. 1:11:15сделать факто ид то я наоборот выберу
1452. 1:11:18крупные размеры и буду сочетать их с
1453. 1:11:20маленькими размерами и у меня получится
1454. 1:11:22Вот такая конструкция запомните её
1455. 1:11:24причём Вы можете ставить текст как
1456. 1:11:26сверху так и снизу и достигать вот этого
1457. 1:11:29контраста всеми способами то есть здесь
1458. 1:11:31большое здесь маленькое и серы с жирным
1459. 1:11:34всё тоже самое то есть мы берём крупные
1460. 1:11:38заголовки и к ним ставим маленькие
1461. 1:11:40тексты маленькие серые тексты или там
1462. 1:11:42маленькие цветные тексты у нас здесь вот
1463. 1:11:44идёт большая динамика мы вот эти
1464. 1:11:47факто сочетаем с нашими гармоничными
1465. 1:11:53сочетаниями то есть
1466. 1:11:56ещё раз вернусь вот к этой истории Вот
1467. 1:11:58это гармоничное сочетание с небольшим
1468. 1:12:02движением контраст А вот это с ярким
1469. 1:12:04движением контраст и то есть по сути Вы
1470. 1:12:07должны их просто слеп друг с другом в
1471. 1:12:10соответствии с вот этими вот настройками
1472. 1:12:13То есть я вот сюда сверху могу написать
1473. 1:12:15маленький текст то есть у меня будет
1474. 1:12:18супер серое пятнышко потом Бах и потом
1475. 1:12:22плавный контраст пошёл и снизу вот здесь
1476. 1:12:24вот у меня
1477. 1:12:25[музыка]
1478. 1:12:26допустим будет какойто я под ним могу
1479. 1:12:29опять ставить текст меньше Давайте
1480. 1:12:32попробуем на практики я вам просто
1481. 1:12:33сейчас покажу как эта история работает у
1482. 1:12:37меня есть заготовка вот такой снит он
1483. 1:12:40отличается от того что я вам показываю Я
1484. 1:12:42сейчас попробую сверстать для вас эту
1485. 1:12:45историю с Reg стилем и
1486. 1:12:49с меня небольшая ширина Вот такая приме
1487. 1:12:54шири что я делаю сначала я должен всё
1488. 1:12:57привести к своему базовому размеру
1489. 1:13:01текста Вот у меня есть текст M я возьму
1490. 1:13:04вот этот стиль и скопирую его абсолютно
1491. 1:13:09всем моим
1492. 1:13:11текст И вот я смотрю что у меня
1493. 1:13:14получается для такой маленькой ширины
1494. 1:13:16всего 215 пикселей то есть половина
1495. 1:13:18мобилки Ну там 2/3 очень крупно поэтому
1496. 1:13:22я могу для сниппетов мелких базовый
1497. 1:13:24текст использовать другой допустим я
1498. 1:13:26возьму текст S Вот он у меня есть
1499. 1:13:34двенадцатый так текст
1500. 1:13:40S Вот я его скопировал У меня текст S
1501. 1:13:44теперь мне нужно составить группировку
1502. 1:13:48То есть у меня здесь есть какая-то цена
1503. 1:13:52есть заголовок есть це цент компании и
1504. 1:13:56так далее Я так понимаю что самое
1505. 1:13:58главное в выборе машины у меня вот эти
1506. 1:14:01вот две вещи поэтому они должны по
1507. 1:14:04визуальной иерархии занимать какой-то
1508. 1:14:07большой объём пространства
1509. 1:14:09А вот это у нас
1510. 1:14:12Внизу на самом деле Call To Action недо
1511. 1:14:16просто авто вот поэтому Call To Action у
1512. 1:14:19нас это какая-то должна быть ссылочка
1513. 1:14:25Ну сейчас мы какой-нибудь синий цвет для
1514. 1:14:27него подберём Ну вот допустим вот такой
1515. 1:14:29то есть это тоже важная история поэтому
1516. 1:14:31мы её красим
1517. 1:14:33И где это находится Ну вот допустим у
1518. 1:14:36нас есть представитель кто продаёт не
1519. 1:14:39знаю насколько мне важно Где покупать
1520. 1:14:41Наверное это не супер важная информация
1521. 1:14:44и у меня есть адрес куда М надо ехать
1522. 1:14:47эта информация более важно и самая и
1523. 1:14:49наименее важная информация Наверное это
1524. 1:14:52вот эта вот штука когда это объявление
1525. 1:14:55было выложено поэтому мы эту информацию
1526. 1:14:57сразу же Превращаем в какую-нибудь серую
1527. 1:15:00такую историю Теперь давайте когда мы с
1528. 1:15:03группировкой разобрались и с важностью
1529. 1:15:05разобрались вот я кстати советую вам в
1530. 1:15:09первую очередь если вы с иерархии пока
1531. 1:15:12на вы прописать для себя прям
1532. 1:15:16что ну что важнее А что нет здесь вот
1533. 1:15:19самое важное Первое это картинка
1534. 1:15:23картинка Ну она поэто самая большая Там
1535. 1:15:25ещё изображение потом второе что тут
1536. 1:15:28важное самое Наверное это цена потому
1537. 1:15:30что я условно хочу там бху за 2 половино
1538. 1:15:34вот а какая она там будет конкретно это
1539. 1:15:36наверное я буду во вторую очередь хотеть
1540. 1:15:39узнавать потом мне важен адрес и потом
1541. 1:15:45мне уже важно кто
1542. 1:15:48продаёт Хотя кто продаёт и адрес они
1543. 1:15:50могут тут на самом деле поспорить потому
1544. 1:15:53что куда ехать
1545. 1:15:55Ну а если это перекуп или это Частник то
1546. 1:15:57есть вот это вот может быть тоже важно
1547. 1:15:58поэто кто продат пойдёт на второй план у
1548. 1:16:02на адрес менее важный
1549. 1:16:10ссылка и самое последнее это когда вы
1550. 1:16:17ужины то есть свежее неже дамы попробуем
1551. 1:16:22сы э иерархия
1552. 1:16:27Давайте начнём с
1553. 1:16:30цены у нас Мы работаем с шрифтом текст S
1554. 1:16:35с двенадцатым Какое у нас есть к
1555. 1:16:38нему решение то есть что мы можем
1556. 1:16:41подобрать вот хорошее сочетание - это
1557. 1:16:43сделать текст покрупнее и мы тут сейчас
1558. 1:16:46посмотрим Достаточно ли нам вот такой
1559. 1:16:49крупности текста для того чтобы у нас
1560. 1:16:51все остальные нашик
1561. 1:16:56встали в нашу
1562. 1:16:57[музыка]
1563. 1:16:58иерархию Вот в этой группе где у нас
1564. 1:17:01цена большая и цена маленькая но явно
1565. 1:17:03цена старая должна быть как-то меньше по
1566. 1:17:07размеру то есть здесь вот мы
1567. 1:17:09разобрались потом в каждой следующей
1568. 1:17:11группе мы настраиваем свою иерархию вот
1569. 1:17:14допустим у меня здесь есть МАЗ цент это
1570. 1:17:16название Это кто продаёт и какое-то
1571. 1:17:19описание Это названи я думаю что это
1572. 1:17:21супер ирия
1573. 1:17:25надо менее важным сделать вот это более
1574. 1:17:27важно Это менее важно Это более важно
1575. 1:17:30Это менее важное и так далее И то есть
1576. 1:17:32нач пока вся эта история у меня
1577. 1:17:35становится похожа Вот здесь вот я
1578. 1:17:38вижу такую штуку что кажется что это
1579. 1:17:41похоже на метрическую
1580. 1:17:45композицию то есть вот здесь у меня
1581. 1:17:47чёрная вот здесь у меня се я вот этим
1582. 1:17:51повторением Хочу
1583. 1:17:53воспользоваться здесь У меня
1584. 1:17:57метр а вот с ценой кажется что так не
1585. 1:18:01получается И что я могу тут сделать так
1586. 1:18:04как у меня цена
1587. 1:18:06и я описание Кстати забыл то что вот а
1588. 1:18:10цена и название объявления находятся в
1589. 1:18:14самом верху то есть иерархия же у нас
1590. 1:18:17как работает то есть она у нас за счёт
1591. 1:18:19цвета за счёт размера и ещё за счёт
1592. 1:18:21расположения А работает поэтому я маду
1593. 1:18:25ставлю На самый верх но при этом я не
1594. 1:18:28буду менять к ней никакой Никакое
1595. 1:18:31начертание то есть не буду делать её
1596. 1:18:33крупнее там или среднем То есть у меня
1597. 1:18:35получается что текст сочетается с
1598. 1:18:37текстом с как в моей вот этой вот схемки
1599. 1:18:42текст текст S Просто я строю такую
1600. 1:18:45композицию что у меня как бы один будет
1601. 1:18:47сверху другой снизу и они будут всё
1602. 1:18:50равно хорошо
1603. 1:18:51сочетаться Ну и вот смотрите что по сути
1604. 1:18:53тут получается
1605. 1:18:55Вот это это как бы Просто обычное
1606. 1:18:57сочетание текст M плюс текст S я вам
1607. 1:19:00сейчас даже подпишу
1608. 1:19:03[музыка]
1609. 1:19:07это
1610. 1:19:09текст
1611. 1:19:13s
1612. 1:19:16S теперь дальше так как я хочу сделать
1613. 1:19:19чистый дизайн я не могу использовать
1614. 1:19:22большое количество приёмов
1615. 1:19:25поэтому я стараюсь использовать как
1616. 1:19:27можно меньше разных размеров шрифтов
1617. 1:19:30начертаний и я буду работать с цветом
1618. 1:19:33вот если я просто возьму сейчас уберу
1619. 1:19:35все отступы И вот так вот их друг к
1620. 1:19:37другу приставлю то есть что у меня
1621. 1:19:39получится Ну вот кажется что вот эта вот
1622. 1:19:42штука с названием она как-то теряется то
1623. 1:19:45есть вот если бы вот этого элемента не
1624. 1:19:47было то я в принципе мог бы ну вот так
1625. 1:19:50вот это соединить То есть у меня что
1626. 1:19:52получается что вот это S Вот это S это
1627. 1:19:55просто один текстовый блок Вот это тоже
1628. 1:19:57с Просто я сделал небольшую как бы такую
1629. 1:20:00штуку и вот этот снит он бы в принципе
1630. 1:20:03нормально смотрелся но у меня тут
1631. 1:20:07больше у меня тут намного больше
1632. 1:20:09информации у меня есть ещё два элемента
1633. 1:20:11и поэтому мне надо решить как мне с ними
1634. 1:20:16поступить что я буду делать я могу
1635. 1:20:18разбить вот этот блок на две
1636. 1:20:21групы
1637. 1:20:23есть д вещи сделаю тут одинаковые
1638. 1:20:27отступы такие И вот это будет у меня
1639. 1:20:29один блок по пятну вот здесь вот я
1640. 1:20:31сделаю отступ побольше чтобы показать
1641. 1:20:33что это другая группа и вот здесь вот я
1642. 1:20:36сделаю допустим ещё один вот и вот так
1643. 1:20:39сейчас чтобы сильно место по вертикали
1644. 1:20:42тоже не
1645. 1:20:43отнимать И вот так это будет уже лучше
1646. 1:20:46смотреться Какие у меня ещё есть вариант
1647. 1:20:49то есть видите Я использовал всего два
1648. 1:20:51начертания текста а вот эти с вот этими
1649. 1:20:53штуками разобрался с
1650. 1:20:55здесь у меня получилась метрическая
1651. 1:20:57композиция здесь больша большой акцент
1652. 1:21:01на синий цвет в конце и здесь по сути
1653. 1:21:04вышла Вот такая
1654. 1:21:07вот история что здесь У меня идёт
1655. 1:21:10динамика по размеру
1656. 1:21:13просто вот в этом блоке Ну вот то есть
1657. 1:21:17получается что вот это это тоже самое
1658. 1:21:21что вот это
1659. 1:21:23текст больша как бы история и при этом
1660. 1:21:27Вот это и вот это тоже сочетается между
1661. 1:21:30собой и получается что используя всего
1662. 1:21:33нес всего два размера мы можем добиться
1663. 1:21:35такой гармони что тут ещё можно сделать
1664. 1:21:38я могу попробовать добавить третий
1665. 1:21:40размер вот какой-то совсем
1666. 1:21:43мелкий и мы просто потом с вами начнём
1667. 1:21:47вот эту историю с
1668. 1:21:59а у меня меньше нету размера тогда мне
1669. 1:22:01надо наоборот увеличивать всё
1670. 1:22:03остальное Вот это я оставляю
1671. 1:22:07мелким Вот это я оставляю мелким Вот это
1672. 1:22:10я начинаю увеличивать то есть цену Я
1673. 1:22:13увеличиваю до текста
1674. 1:22:21L даже до
1675. 1:22:23H5 текст
1676. 1:22:25L вот допустим это я увеличиваю до
1677. 1:22:28текста
1678. 1:22:29L старую цену Я оставляю текст
1679. 1:22:33S это у меня уже получается факто ид
1680. 1:22:37видите то есть вот это
1681. 1:22:39L Вот это
1682. 1:22:42S А вот это вот будет M допусти у меня я
1683. 1:22:46три размера хочу использовать
1684. 1:22:55[музыка]
1685. 1:23:03так сейчас посмотрим как это выглядеть
1686. 1:23:08будет
1687. 1:23:101032 здесь это здесь
1688. 1:23:13[музыка]
1689. 1:23:16то и вот это всё оставляю мелким ну вот
1690. 1:23:19видите когда у меня большее
1691. 1:23:21количество размеров выглядит как-то
1692. 1:23:25честно говоря мусор Ну то есть вот эта
1693. 1:23:27вот история давайте я цену тоже сделаю
1694. 1:23:33эмко Ну и отступы надо немножко
1695. 1:23:41подравнять по отступа есть отдельный
1696. 1:23:44урок как научиться их расставлять тоже У
1697. 1:23:47нас на YouTube канале лежит Ну если вы
1698. 1:23:50курс смотрите то в курсе естественно Вы
1699. 1:23:52наверное уже проходили эту историю
1700. 1:23:57попробуем теперь приляг вот эти
1701. 1:23:59сочетания напрямую вот если я МАЗ центр
1702. 1:24:01с ценой
1703. 1:24:03группируют это
1704. 1:24:09отбиваю ну тоже Смотрится как-то не
1705. 1:24:11очень кажется что вот эти две вещи
1706. 1:24:15текст м и текст L они не очень хорошо в
1707. 1:24:20этом контексте сочетаются и мне делать
1708. 1:24:23Может мне е руе цену надо
1709. 1:24:25делать чтобы у меня контраст
1710. 1:24:29появился кажется что она прямо теперь
1711. 1:24:31очень сильно
1712. 1:24:33выбивается Можем попробовать их местами
1713. 1:24:39поменять Чтобы у нас
1714. 1:24:42появился немножко другой
1715. 1:24:45рисунок То есть я поставил
1716. 1:24:51цену Я поставил название
1717. 1:25:00на название у меня больше места немножко
1718. 1:25:02теперь
1719. 1:25:03есть вот сюда я приделы МАЗ
1720. 1:25:09центр и здесь с каким-то отступом Можно
1721. 1:25:13даже вот два на три группы это
1722. 1:25:16разбить у меня получается вот такая
1723. 1:25:19карточка очень крупно вышла здесь вот
1724. 1:25:23кстати Давайте я обратно
1725. 1:25:25уменьш вот эту
1726. 1:25:29историю с тремя размерами сейчас
1727. 1:25:31работаем Не
1728. 1:25:36забудьте видите что я пытаюсь сделать я
1729. 1:25:39пытаюсь найти как бы какую-то композицию
1730. 1:25:43которая будет повторяться Потому что так
1731. 1:25:45как у меня всё разностное мне это очень
1732. 1:25:49сильно мешает сейчас типа ВС ВС разное
1733. 1:25:53разные э длины разные размеры то есть
1734. 1:25:56мне хочется эту историю причесать и вот
1735. 1:25:59допустим я смотрю на первый элемент у
1736. 1:26:01меня здесь большая
1737. 1:26:03штука и маленькая чёрная штука вот как
1738. 1:26:07бы мне хочется дальше сделать тоже самое
1739. 1:26:09чтобы вот здесь вот
1740. 1:26:11была большая штука то есть они у нас по
1741. 1:26:14площади немножко похожи и дальше
1742. 1:26:16какая-то маленькая
1743. 1:26:17штука вот если я вот так это придела
1744. 1:26:21сюда Может быть мне надо вот это в одну
1745. 1:26:23групу
1746. 1:26:25объединить типа чтобы это вот так вот
1747. 1:26:28как-то было на следующую строчку
1748. 1:26:30складывалось или что-нибудь в этом
1749. 1:26:35духе вот или
1750. 1:26:37А я вот так собираю то что у меня здесь
1751. 1:26:40вот
1752. 1:26:44будет Вот такая история и снизу у меня
1753. 1:26:49будет Ну какая-то примерно Такая же
1754. 1:26:52история Вот кстати кажется что
1755. 1:26:54получилось Сейчас с тремя шрифтами
1756. 1:26:56сделать То есть мне пришлось здесь
1757. 1:26:59использовать отступы для того
1758. 1:27:01чтобы для того чтобы у меня композиция
1759. 1:27:03не смешалась Потому что если я вот это
1760. 1:27:05всё соединю вместе И избавлюсь вообще от
1761. 1:27:09ритма то у меня вот эта вот штука ну
1762. 1:27:12видите она тырын тырын тын-тын она
1763. 1:27:15скачет и получается что я попадаю на Как
1764. 1:27:19раз на вот такую ситуацию То есть мне
1765. 1:27:23нужно
1766. 1:27:24что появись Като какая-то стабильность
1767. 1:27:28какая-то Вот понятность в этой истории
1768. 1:27:30поэтому мы вот это
1769. 1:27:31разбиваем почему вот это будет работать
1770. 1:27:34потому что
1771. 1:27:35здесь вот это повторяется вот с этим А
1772. 1:27:39вот это повторяется вот с этим вот с
1773. 1:27:42этим точне вот то есть мы пытаемся
1774. 1:27:45прийти к каким-то повтором вот я даже
1775. 1:27:48могу Вотс я сечас вот этот заголовок
1776. 1:27:51уме Давайте посмотрим вот сейчас я
1777. 1:27:54Уменьши Давайте посмотрим через
1778. 1:27:57пятно на обе эти
1779. 1:28:01композиции
1780. 1:28:031% граун бр немножко
1781. 1:28:07прибавляем и по сути вот смотрите что у
1782. 1:28:11меня тут
1783. 1:28:13получилось вот одно пятно серое пятно
1784. 1:28:17одно пятно серое пятно вот эта
1785. 1:28:20композиция кажется более гармоничной вот
1786. 1:28:24композиция более динамическая Потому что
1787. 1:28:26видите здесь сначала так потом серая и
1788. 1:28:30потом только пошли вот эти повторы То
1789. 1:28:33есть получается что наверное из вот этих
1790. 1:28:37двух Я бы стал дальше док дорабатывать
1791. 1:28:40вот эту нижнюю Ну то есть я бы тут ещё с
1792. 1:28:42отступами поработал то есть мог бы
1793. 1:28:44сэкономить себе немножко там
1794. 1:28:46вертикального какого-то пространства
1795. 1:28:48посмотреть опять как это будет выглядеть
1796. 1:28:55вот кажется что эта штука она достаточно
1797. 1:28:58хороша то есть видите что я вот здесь
1798. 1:29:00вот сделал я изменил а по сути только
1799. 1:29:03одну штуку в иерархии То есть я решил
1800. 1:29:05что я цену поставлю над
1801. 1:29:09названием и всё только в этом разница и
1802. 1:29:13часто Вам приходится как бы думать над
1803. 1:29:16вот этими иерархически вещами чтобы они
1804. 1:29:19у вас поработали Ну вот давайте я продел
1805. 1:29:21теперь те же самые операции только для
1806. 1:29:24наших жирных стилей я композицию оставлю
1807. 1:29:27потому что она мне в принципе нравится и
1808. 1:29:29посмотрим можно ли что-то лучше собрать
1809. 1:29:32если у нас будет жирная вот для тонких Я
1810. 1:29:35выбрал Вот это Ну то есть мне это больше
1811. 1:29:38всего
1812. 1:29:39заходит вообще работать чисто без жирных
1813. 1:29:42начертаний достаточно сложно потому что
1814. 1:29:44здесь всегда будет зоопарк разных
1815. 1:29:47размеров жирными начертания дела это
1816. 1:29:49немножко попроще вот
1817. 1:29:53допустим нить А у меня же есть для
1818. 1:29:55текстов жирные стили типа я возьму текст
1819. 1:29:59СБО и сделаю заголовок пожирнее
1820. 1:30:03и вот смотрите что получилось то что вот
1821. 1:30:08в этом случае у меня иерархия показывает
1822. 1:30:11что заголовок важнее чем Mazda цент
1823. 1:30:13только с помощью расположения Ну типа
1824. 1:30:15потому что он выше А здесь я не только с
1825. 1:30:17помощью расположения могу это сделать но
1826. 1:30:19и с
1827. 1:30:20помощью как бы жирности тоже то есть Я
1828. 1:30:24добавляю контраста в Это
1829. 1:30:27сочетание вот Можем попробовать сделать
1830. 1:30:30то же самое с метро Комсомольское чтобы
1831. 1:30:32повторить наш
1832. 1:30:41рисунок сейчас я доделаю жирный
1833. 1:30:44заголовок ещё вот здесь вот тоже сделаю
1834. 1:30:45это что
1835. 1:30:48восемнадцатый у нас тут Двадцатый есть в
1836. 1:30:51принципе Двадцатый нам подойдёт
1837. 1:30:57вот с жирными шрифтами пространств для
1838. 1:30:59творчества больше то есть по сути я что
1839. 1:31:01делаю я повторяю тот же самый приём
1840. 1:31:04который у меня был просто увеличил
1841. 1:31:07контрастность то есть вот здесь м в
1842. 1:31:11принципе всё нормально В плане контраста
1843. 1:31:13стало Давайте тут тоже
1844. 1:31:15перенесём но есть там один нюанс который
1845. 1:31:19которым мне надо
1846. 1:31:21ещё с вами поделиться
1847. 1:31:25вот нюансы что ещё можно сделать так как
1848. 1:31:28у меня вот этот текст весь одного
1849. 1:31:29размера и одного начертания ту только
1850. 1:31:32цвет меняется я могу это вообще собрать
1851. 1:31:34всё в один текстовый блок в принципе и
1852. 1:31:37пускай вот это будет одно пятно а вот
1853. 1:31:39это будет другое жирное пятно и тогда у
1854. 1:31:41меня вот здесь композиция очень сильно
1855. 1:31:43упрощается То есть получается что у меня
1856. 1:31:45вот здесь просто большое Чёрное пятно а
1857. 1:31:48вот здесь пятно примерно такого же
1858. 1:31:50размера размер-то очень важен Просто оно
1859. 1:31:53будет серая и синий
1860. 1:31:57акценти вот здесь получился достаточно
1861. 1:32:00дробный ритм потому что здесь вот я
1862. 1:32:02выделил Комсомольскую и Я сейчас смотрю
1863. 1:32:04на это и думаю что можно это по такому
1864. 1:32:07же принципу упростить как было
1865. 1:32:10там то есть я беру и вот эти все четыре
1866. 1:32:15вещи Mazda центр Там проче просто
1867. 1:32:20соединяю тут отступ сломал
1868. 1:32:26вот могу ещё попробовать вот сюда вот
1869. 1:32:28больше серого
1870. 1:32:30дать типа для адреса чтобы у меня эта
1871. 1:32:33штука похожа
1872. 1:32:39был так с
1873. 1:32:43этим вообще кстати человек который эти
1874. 1:32:46снипет изначально рисовал он на это
1875. 1:32:48несколько месяцев потратил Вот поэтому я
1876. 1:32:51не претендую конечно на то что у меня
1877. 1:32:52лучше получится но
1878. 1:32:55мне главное вам объяснить сам
1879. 1:32:59принцип то есть Может быть мы вот это
1880. 1:33:01вообще всё будем в Чёрное пятно собирать
1881. 1:33:03не будем здесь серого никакого делать
1882. 1:33:06или мы всё вот это сделаем
1883. 1:33:08[музыка]
1884. 1:33:12Серым и МАЗ центр и компанию там и
1885. 1:33:16прочее вот а вот это то есть по сути
1886. 1:33:19видите это ВС просто
1887. 1:33:24Какое пятнышко лучше
1888. 1:33:27выглядит вот здесь вот я всё ещё вот
1889. 1:33:30такую композицию
1890. 1:33:31[музыка]
1891. 1:33:32хочу Ну и большой чёрный
1892. 1:33:37прямоугольник то есть видите здесь
1893. 1:33:39конечно мешает то что там разная длина
1894. 1:33:41адреса Вот это тоже разрывает пятно вот
1895. 1:33:44эта маленькая штука про 600 км То есть
1896. 1:33:47если бы я мог здесь регулировать
1897. 1:33:48количество контента Ну там допустим Ещё
1898. 1:33:51какое-нибудь слово Дописать то
1899. 1:33:54вот это вот это пятно оно выглядело бы
1900. 1:33:56намного лучше но нам придется с этим ну
1901. 1:33:59как бы просто смириться ещ Вот это
1902. 1:34:01композиция плоха с точки зрения потому
1903. 1:34:04что здесь ну точнее с точки зрения U как
1904. 1:34:07вот микро проектирования потому что
1905. 1:34:08заголовок может быть здесь в одну строку
1906. 1:34:10рядом карточка здесь две строки и у нас
1907. 1:34:13вот это пятно с ценой Будет прыгать
1908. 1:34:16туда-сюда поэтому я наверно остановлюсь
1909. 1:34:19на проработке варианта у которого
1910. 1:34:22цена будет сверху ближе к фотографии
1911. 1:34:28прижат то есть вот что ещё тут можно
1912. 1:34:31сделать допустим я хочу ещё какие-то
1913. 1:34:35ввести А размерности сюда вот здесь вот
1914. 1:34:38у меня есть текст
1915. 1:34:41XS то есть Может быть я начну
1916. 1:34:44уменьшать ещё какие-то тексты А вот эти
1917. 1:34:47немножечко
1918. 1:34:49увеличу то есть вот это всё до текста м
1919. 1:34:52увеличу
1920. 1:34:55и вот это
1921. 1:35:05тоже по сути Работа дизайнера же она
1922. 1:35:08заключается в том что Чем быстрее вы
1923. 1:35:12сможете
1924. 1:35:13перебирать вот эти варианты тем быстрее
1925. 1:35:17у вас
1926. 1:35:18получится какой-то классный визуал вот
1927. 1:35:23четыре варианта Ну вот этот вариант мне
1928. 1:35:25тоже не нравится ну
1929. 1:35:27Даже несмотря на то что я там отступ
1930. 1:35:29сейчас поправлю там и прочее всё равно
1931. 1:35:31не вытягивает слишком большой зоопарк
1932. 1:35:34разной типографики То есть Вам надо
1933. 1:35:37учиться два-три максимум там четыре
1934. 1:35:40стиля используют здесь у нас один вот
1935. 1:35:42это второй а всё остальное - это
1936. 1:35:48третий Да вот так вот если сделать
1937. 1:35:55можно кстати
1938. 1:35:57попробовать вот эту штуку с
1939. 1:36:02Сегодня куда-нибудь поставить наверх но
1940. 1:36:04я не уверен что она просто настолько
1941. 1:36:08важна вот у вас в таких случаях когда
1942. 1:36:10короче вас ожидает Вот такая проблемная
1943. 1:36:13достаточно сложная ситуация больше там
1944. 1:36:16трёх-четырёх строк подряд который надо
1945. 1:36:18сверстать чтобы был контраст Не
1946. 1:36:20забывайте использовать отступы потому
1947. 1:36:23что с помощью отступов Вы можете
1948. 1:36:25разделить ваш дизайн на группы и тогда
1949. 1:36:29вам не придётся контрастом чисто
1950. 1:36:32контрастом без отступа отделять эти
1951. 1:36:34блоки друг от друга но вообще мы
1952. 1:36:36стараемся как бы контрастом их тоже
1953. 1:36:39отделять То есть у нас вот здесь вот
1954. 1:36:40допустим между вот этим текстом и вот
1955. 1:36:43этим текстом Есть разница и в размере и
1956. 1:36:45в толщине и ещё с помощью отступа здесь
1957. 1:36:48разница только в цвете размер тот же
1958. 1:36:51самый но здесь стоит отступ здесь
1959. 1:36:53разница только в цвете и отступ то есть
1960. 1:36:56вот когда я собираю три Вот таких вот
1961. 1:36:59историй то получается Ну немножко
1962. 1:37:02получше Вот финальный вариант Ну который
1963. 1:37:04я бы здесь оставил вот который можно
1964. 1:37:06было сделать за 20 минут наверное я бы
1965. 1:37:08оставил какой-то вот такой ну
1966. 1:37:10Единственное что может быть визуально по
1967. 1:37:14немножко отступ сэкономил типа и
1968. 1:37:17всё Вот потому что я так понимаю
1969. 1:37:19карточка маленькая Поэтому вот как-то
1970. 1:37:21так я бы наверно е я оставил как вообще
1971. 1:37:25проверить что сочетания которые вы
1972. 1:37:28сделали контрастные или нет А я
1973. 1:37:31специально для вас потратил время и
1974. 1:37:34сгенерировал вот такую таблицу в которой
1975. 1:37:38я сделал Ну как бы все сочетания со
1976. 1:37:41всеми сочетаниями которые только
1977. 1:37:43возможны для жирного
1978. 1:37:44шрифта потому что вы можете захотеть
1979. 1:37:48Если у вас есть Ну вот прикиньте да у
1980. 1:37:51вас же есть гигантские саб тайтлы и Вы
1981. 1:37:53подумаете А почему бы мне не взять вот
1982. 1:37:55эти гигантские Саб тайтлы и тоже не посо
1983. 1:37:58тать их с какими-нибудь текстами То есть
1984. 1:38:00у вас в дизайне может быть комбинация на
1985. 1:38:02самом деле И вот такого стиля и вот
1986. 1:38:04такого стиля и это всё огромная головная
1987. 1:38:07боль да у вас такое большое количество
1988. 1:38:09комбинаций так вот вот есть вот такая
1989. 1:38:12таблица в ней я сделал все варианты всех
1990. 1:38:16сочетаний то есть
1991. 1:38:18есть супер маленькие с супер большими
1992. 1:38:22тонкие толстыми одного размера и разного
1993. 1:38:25размера Они помечены так то что чёрные -
1994. 1:38:29это те которые 100% норм синие это те у
1995. 1:38:33которых с контрастом всё нормально но
1996. 1:38:35при этом это избыточно Ну то есть если у
1997. 1:38:38вас будут и такие стили и такие стили и
1998. 1:38:40такие стили у вас будет типографический
1999. 1:38:42зоопарк в проекте оранжевый - Это где
2000. 1:38:45контраст буквально на грани вот наме вот
2001. 1:38:48тако
2002. 1:38:49вотк с подписью
2003. 1:38:54Малей и самый большой заголовок здесь
2004. 1:38:56уже даже перебор контраста Вот то есть
2005. 1:38:58перебор контраста Я тоже пометил И
2006. 1:39:00красны это когда прям совсем
2007. 1:39:02недостаточно или избыточно вот
2008. 1:39:06Пользуйтесь этой таблицей для того чтобы
2009. 1:39:09проверить сочетание которые вы придумали
2010. 1:39:12Вообще вот эта вот история с вёрст вот
2011. 1:39:15этих сочетаний и контрастом она нается
2012. 1:39:19Реми ти
2013. 1:39:23перво время вот сколько часов вы
2014. 1:39:25потратите на это вот ровно настолько ваш
2015. 1:39:29дизайн будет в итоге
2016. 1:39:31Классно Вот поэтому все усилия зачтут
2017. 1:39:35обязательно в какой-то момент произойдёт
2018. 1:39:38прорыв Смотрите если вы смотрите эту
2019. 1:39:40лекцию на
2020. 1:39:42ютуберс то для того чтобы получить все
2021. 1:39:45вот эти материалы а также задание к этим
2022. 1:39:49материалам Вам нужно будет тыкнуть в
2023. 1:39:51ссылку там бот потом выдаст вам а вот
2024. 1:39:55эти материалы для самостоятельного польз
2025. 1:39:58Вот спасибо большое что посмотрели эту
2026. 1:40:00лекцию Надеюсь то что вам стало немножко
2027. 1:40:03понятнее Как строить линейки и как
2028. 1:40:04вообще работают дизайнеры вот с такими
2029. 1:40:08сложными вещами как к этому вообще
2030. 1:40:10подступиться как это анализировать
2031. 1:40:13А поэтому Если вам понравилось то
2032. 1:40:16напишите в комментариях что вы поняли
2033. 1:40:18Напишите также что вы не поняли что
2034. 1:40:20осталось как бы непонятно что надо ещё
2035. 1:40:24лучше объяснять и рассказывать и в
2036. 1:40:27четвёртой версии этой лекции я смогу
2037. 1:40:30наверное рассказать вам вообще
2038. 1:40:32всё-всё-всё что вы не понимаете Спасибо
2039. 1:40:36Пока