Перевёрстка плохого экрана — Transcript

Full transcript

1. 0:00так Привет ребята вот я всё проверил
2. 0:03ошибок
3. 0:04много но это ничего страшного так в
4. 0:08общем расскажу как у нас сегодня пройдёт
5. 0:10наш урок урок У нас пройдёт следующим
6. 0:12образом во-первых мы возьмём Это задание
7. 0:16который вы делали я его
8. 0:19перевертати каждый шаг и каждую штучку
9. 0:22которая была в макете ошибочно как я её
10. 0:27поправлю и почему потом После этого мы
11. 0:30пройдёмся по списку самых
12. 0:32распространённых ошибок Я посмотрел все
13. 0:35макеты которые вы сделали на скринил из
14. 0:38них примеры распространённых проблем и
15. 0:42разгруппировать
16. 0:44тоже посмотреть потом в файле с уроком
17. 0:48так Ну поехали Сейчас возьму задание в
18. 0:52общем смотрите Полина подготовил этот
19. 0:54экран и прикол этого экрана был в том
20. 0:57что она взяла какой-то макет намерено
21. 1:00испортила в нём абсолютно каждую деталь
22. 1:03которую можно было испортить и подвох
23. 1:06был в том что здесь в этом экране Ну
24. 1:09вообще практически ни одного элемента
25. 1:11нет хорошего и всё нужно было исправлять
26. 1:14Вот давайте
27. 1:16посмотрим что можно с этим сделать Ну
28. 1:19так у меня тут есть небольшой чек-лист
29. 1:22по которому можно пойти чтобы Дело было
30. 1:25быстрее вот самая первая штука на
31. 1:28которой тоже Поре человек это настройки
32. 1:31фотографии здесь она какого-то такого
33. 1:34сумасшедшего ргз цвета видите специально
34. 1:36все настройки сбиты в принципе такие
35. 1:39Фотографии могут вам встречаться но
36. 1:41проблема в том что этот макет он
37. 1:45не рассчитан на то чтобы в него такие
38. 1:48фотографии попадали и поэтому на фоне
39. 1:50все элементы потерялись Ну то есть
40. 1:54кто-то заблаговременно поменял все
41. 1:57настройки кто-то поправил но обратил
42. 2:00внимание на такую вот
43. 2:01штуку советую обратить там надо было
44. 2:04либо починить фотографию либо починить
45. 2:06кнопки так чтобы их было видно даже если
46. 2:08вот такую фигню заливать вот ну и вообще
47. 2:11для кейсов Если вы будете подбирать себе
48. 2:15картинки Обратите внимание
49. 2:17что в кейсах У вас должны быть в макете
50. 2:21красивые фотографии Да понятно что в
51. 2:24реальном мире они не всегда будут
52. 2:27красивыми но
53. 2:30так устроен уж наш мир что придётся для
54. 2:32кейсов сделать всё-таки какую-то такую
55. 2:35более-менее вылезаю картинку Так что у
56. 2:37нас тут дальше по списку вот эта штучка
57. 2:41то есть если кто-то забыл то у нас все
58. 2:45иконки они должны быть в боксах Ну то
59. 2:49есть вот сделать такой бокс хотя бы 24
60. 2:52на 24 ну или там какой-нибудь в этом
61. 2:55роде 24 на 32 посадить в него
62. 3:01для того чтобы это было удобно
63. 3:03верстать с иконками и их
64. 3:07позиционированием тоже была вот самая
65. 3:09первая проблема Ну тут ребята Как
66. 3:12позиционировать иконки Кто во что
67. 3:14горазд и здесь должно сработать такое
68. 3:19правило выравнивания Ну то есть я не
69. 3:22знаю Кстати Напишите лекцию по
70. 3:23выравнивание уже должны были смотреть
71. 3:25правильно Вот такая вот штука с
72. 3:28фигурками и задания Ну вот короче надо
73. 3:31будет досмотреть эти штуки вот иконку
74. 3:34можно было сделать
75. 3:35а это не особо принципиально просто во
76. 3:38фрейме Вы можете иконку как угодно
77. 3:40подвинуть А в ауте она будет у вас
78. 3:42всегда с
79. 3:47позиционированный иконки в боксах Ну в
80. 3:49обычных фрейма лежат так вот если вы
81. 3:52хотите за позиционировать иконку
82. 3:54какой-то такой странной формы особенно в
83. 3:57кружке ну или в квадрате нужно понимать
84. 4:01что у этой иконки Если вы её абсолютно
85. 4:05ровно поставите вот так вот 15 на 155
86. 4:08оптический вес Он всё-таки с одной
87. 4:11стороны больше чем с другой вот как
88. 4:13проверить оптический вес берёте
89. 4:16однопроцентный
90. 4:18обычный
91. 4:20прямоугольник делаете его размытым и
92. 4:23немножечко Ну добавляете е размытие Вот
93. 4:26и вы понимаете что этой иконки недина
94. 4:30она весит справа и слева Ну то есть
95. 4:32справа всё-таки у неё масса больше из-за
96. 4:36того что масса справа больше то
97. 4:39оптический центр этой иконки он как бы
98. 4:41не ровно посередине находится а немножко
99. 4:44ближе к правой стороне это значит для
100. 4:47того чтобы она выглядела ровно вам нужно
101. 4:49сдвинуть её как бы
102. 4:52левее на пиксель или на два и тогда
103. 4:56Несмотря на то что отступ будет как бы
104. 4:5810 14 там 16 она будет выглядеть более
105. 5:02Ну как бы по центру этого Круга
106. 5:04находиться И точно также с любыми
107. 5:06объектами асимметричной формы вот
108. 5:09поэтому следите за этими штуками ещё что
109. 5:12в иконках я вам советую сделать Ну здесь
110. 5:16вот такого нет но я видел такие примеры
111. 5:18где она была очень сильно упёртая вот я
112. 5:22вам не советую так сделать даже вот
113. 5:24здесь вот она уже очень близко хочется
114. 5:27Ну чтобы она как-то не напрягала это
115. 5:29место и и и была чуточку подальше от
116. 5:32краёв Но только если это не супер
117. 5:34маленький какой-то элемент ещё вот
118. 5:36кстати обратить внимание на дробные
119. 5:39размеры и прочие штуки вот я это тоже к
120. 5:44иконкам прикладывал вот у кого-то
121. 5:46проверял то есть
122. 5:58иконочный вот у меня никакой сетки на
123. 6:01этом макете нет Это плохо А неплохо было
124. 6:04бы её натянуть стандартную сетку две
125. 6:09колонки маржин какие-нибудь типа там 24
126. 6:13или
127. 6:1422 или 16 Ну вот здесь вот вроде как 16
128. 6:19подходит видите А они здесь тоже
129. 6:22съехавшей это чтобы вас запутать
130. 6:30Да вот так вот сделаем и по сетке начнём
131. 6:32это дело всё выравнивать кстати Обратите
132. 6:35внимание то что если вы
133. 6:37хотите Вот видите Тут ещё иконка короче
134. 6:40по-моему Полина её делал
135. 6:43кривой немножко
136. 6:44поправим Если вы хотите чтобы у вас вот
137. 6:47это вот выравнивание слева с иконкой
138. 6:50совпадало Вы можете в принципе ну вашей
139. 6:52дизайн системе Ну в вашем ките в котором
140. 6:55вы работаете подвинуть е до упора влево
141. 6:58вот эту и
142. 7:00это будет нормальная бы практика то есть
143. 7:02нажимать будет удобно ВС равно но так
144. 7:06как она такая мелкая Я не знаю Ну типа
145. 7:08многие люди воспользовались здесь такой
146. 7:10штукой типа сделать кружочек чтобы она
147. 7:12не терялась в принципе мы тоже можем ей
148. 7:15воспользоваться и когда мы начнём делать
149. 7:17кружочек
150. 7:19то
151. 7:20сразу у нас возникает вопрос А какого он
152. 7:25и
153. 7:28вово наемся на проблему номер два
154. 7:31которая нам встречается
155. 7:33в Ну во многих макетах Это разное
156. 7:38оформление элементов которые Ну как бы
157. 7:41находятся в одном поле то есть вот часто
158. 7:44бывает такое то что
159. 7:46вы используете как
160. 7:50бы кнопочки подложечная
161. 7:59что когда у меня в одном Ну как бы в
162. 8:02одной зоне в одной можно сказать группе
163. 8:05находятся элементы которые примерно
164. 8:10одинаково одинаковую функцию выполняют
165. 8:13Ну то есть типа вот это вот допустим вот
166. 8:16это две кнопки А вот это две не кнопки
167. 8:18То есть если я хочу показать между ними
168. 8:21различия значит они у меня должны
169. 8:23выглядеть максимально по-разному если я
170. 8:27хочу если я не хочу на это различие уть
171. 8:30то тогда я должен как бы экономить
172. 8:33количество стилей которое у меня есть и
173. 8:35сделать их примерно одинаковыми вот я
174. 8:37вот кстати сейчас ещё раз посмотрел на
175. 8:39вот эту штуку Вот это наверное я уберу
176. 8:40отсюда это вот это ещё нормально
177. 8:43выглядит потому что
178. 8:46здесь Ну как бы да
179. 8:49картинка на картинке мы здесь ничего не
180. 8:52можем нажать А эту штуку
181. 8:54можно нормальная
182. 8:56тукано вот
183. 8:58эти обе прозрачные подложки либо обе
184. 9:02белые то есть и здесь вот тоже две белые
185. 9:05здесь иконка чёрная здесь оранжевая
186. 9:07здесь иконка здесь подложка прозрачная и
187. 9:11Серый текст здесь подложка оранжевая и
188. 9:13белый текст то есть получается что у нас
189. 9:14четыре элементы в разных стилях нужно
190. 9:17как-то с разобраться с количеством вот
191. 9:20этих вот
192. 9:21стилей у похожих элементов в одном блоке
193. 9:24который
194. 9:25находится Так ну то есть если бы я делал
195. 9:28здесь ээ
196. 9:30иконку и кнопку Ну точнее Вот эту вот
197. 9:32листал и кнопку я наверное не стал бы
198. 9:35сильно упирать В то чтобы они были
199. 9:38разными Ну хотя можно это сделать
200. 9:41Наверное я бы стал делать их одинаковыми
201. 9:43Я бы использовал либо просто
202. 9:46какой-нибудь Ну вот можно серый можно
203. 9:49чёрный текст И вот здесь вот тоже эту
204. 9:51штуку белую размеры Я бы использовал
205. 9:54одинаковые по высоте чтобы
206. 9:57не создавать лишних размеров тоже
207. 10:01которые могут нам в последствии
208. 10:03навредить Ну короче не парился бы
209. 10:05оформлял их одинаково или если я не хочу
210. 10:09чтобы люди как бы ну может быть такое то
211. 10:12что люди начнут нажимать на вот эту вот
212. 10:13штуку потому что они такие Ой вот э
213. 10:15кнопка и вот это тоже кнопка А давайте я
214. 10:18буду нажимать на вот эту страницу если
215. 10:20для меня это проблема то что люди
216. 10:22нажимают На вот эту штуку Ну тогда я не
217. 10:25знаю типа уберу Вот эту вот историю Я
218. 10:28могу здесь какую-нибудь
219. 10:31какую-нибудь конструкцию из точек вот
220. 10:35могу сделать такую типа стачку здесь вот
221. 10:38где-нибудь внизу и всё но пока у меня
222. 10:40такой проблемы нет Я наверное с этой
223. 10:46стачком же теперь по стилям похожих
224. 10:50объектов Вот ну как бы в дизайне нет
225. 10:53нежно быть поме есть
226. 10:57уть пое то вот допустим у меня есть
227. 11:00кнопка назад и листалка страниц Вот либо
228. 11:04я кастую то что они должны быть
229. 11:06максимально похожи друг на друга если я
230. 11:10работаю Ну наподобие тогда я должен и
231. 11:13привести всё к одинаковому виду вот
232. 11:16допустим я смотрю и вижу то что на
233. 11:19иконке толщина Ну как бы толщина иконки
234. 11:22она больше чем у текста то есть я могу
235. 11:24взять и убавить её
236. 11:26немножко ну такими типа такими может
237. 11:30быть немножко колхозными методами могу
238. 11:32убавить эту
239. 11:36толщину так чтобы у меня вот эти толщины
240. 11:39сравнялись Ну или опять же если я не
241. 11:41хочу чтобы они были похожи то мне надо
242. 11:43их совершенно по-разному спроектировать
243. 11:46Ну то есть там какое-то какое-то другое
244. 11:49решение найти для этой истории то есть
245. 11:51вот когда они то ли Похоже то или не
246. 11:54похоже вот что-то что-то между Вот это
247. 11:56самое как бы неприятное то есть оно
248. 11:59глаз он ищет всегда возможность
249. 12:02идентифицировать объекты и понять как
250. 12:04они будут работать ну то есть если мы
251. 12:08всё приводим к каким-то одинаковым вещам
252. 12:11то ну как бы человек это проскакивает
253. 12:13просто и не замечает то есть а если оно
254. 12:15чуть-чуть отличается вот мозг Начинает
255. 12:18искать вот эти различия и это и есть как
256. 12:21бы
257. 12:22такая ну небольшой расход Нейро ресурса
258. 12:25но тут немножко там немножко тут цвет
259. 12:28какой-то там плохой подобрали тут штучки
260. 12:31какие-то одинаковые не одинаковые и в
261. 12:34итоге в целом Ну интерфейс смотрится
262. 12:36таким
263. 12:37достаточно
264. 12:39дрожащим так поехали что у нас тут
265. 12:41дальше так вопросы Сейчас посмотрим
266. 12:44сразу почему это не АВ а иконки а просто
267. 12:48бокс но я вроде ответил потому что там
268. 12:49позиционировать удобнее Раз уж Мы про
269. 12:51иконки говорим можешь рассказать как и
270. 12:53луше экспортировать если это нужно
271. 12:55например для лендинга Если вы
272. 12:57экспортирует СГ ничего не весит имеет
273. 13:00максимальное качество То есть я очень
274. 13:02давно не экспортировала иконки в PNG я
275. 13:06знаю то что В некоторых случаях бывают
276. 13:08картинки экспортируют в PNG для
277. 13:12мобильных приложений то есть
278. 13:15экспортировать там 1X 2X 3 но если есть
279. 13:17свг то Старайтесь в свг это
280. 13:21экспортировать так а нет такого что ВЛ
281. 13:23надо
282. 13:24ста
283. 13:26соблюдать может
284. 13:29ну 20 Вот мы с Полиной разговаривали
285. 13:31недавно Она говорит 20 Она никогда не
286. 13:33видела я вот допустим делал приложение
287. 13:35для Газпромбанка и у них 20 в но других
288. 13:40Я тоже не видел чаще 24 исполь а если
289. 13:43например крестик мы можем также е
290. 13:45выравнивать по правому краю внутри
291. 13:48бокса имеется в виду модальное окно и в
292. 13:51нём крестик справа для
293. 13:58закрытия стрелочку я выравниваю по
294. 14:00левому краю с крестиком Ну вроде я так
295. 14:02не заморачиваюсь
296. 14:05но наверное наверно да наверное
297. 14:08можно так А что по размерам у кнопки
298. 14:11назад она же должна быть около 40
299. 14:14пикселей чтобы палец попадал Ну то есть
300. 14:17смотри есть как бы размер кнопки назад а
301. 14:21есть размер Клик зоны чтобы палец
302. 14:23попадал то есть вообще ну ты когда текст
303. 14:25на клавиатуре набираешь допустим
304. 14:27телефона там же кнопка намного меньше 44
305. 14:30пикселей Просто когда ты в момент когда
306. 14:32ты на неё нажимаешь у неё большая Клик
307. 14:34зона вокруг и в том числе для
308. 14:36разработчиков вы можете как бы вокруг
309. 14:39указывать им Какого размера будет Зона
310. 14:42для для Тапа Да прозрачном сделать
311. 14:45листал неуместно было бы сделать уместно
312. 14:50было бы сделать можно было Другой стиль
313. 14:52оформления выбрать для Эх
314. 14:58сри вы
315. 15:00начинаете здесь делать историю
316. 15:03полупрозрачной То есть Вам надо вы
317. 15:05можете это сделать легко и Вам нужно
318. 15:07будет протестировать тогда вашу
319. 15:11прозрачность на Ну как бы на нескольких
320. 15:15фотографиях на тёмной фотографии на
321. 15:17светлой
322. 15:18фотографии на цветной фотографии то есть
323. 15:21посмотреть как это работает Вы можете
324. 15:23сюда немножко блюр подмешать тогда у вас
325. 15:26видите Ну как бы фон он будет там
326. 15:28грязнее или светлее тут главное
327. 15:31понимаете это тестить Ну то есть
328. 15:32насколько это
329. 15:34будет хорошо и уместно выглядит Ну
330. 15:38листалка да ну вообще листалка один из
331. 15:40восьми не очень наглядная Мне кажется но
332. 15:44сейчас просто для Перевёрткина
333. 15:59как бы вот эти акцидентные шрифты для
334. 16:01заголовков там вот был даже прикольный
335. 16:04один момент с вампирский замком Но вот
336. 16:09смотри короче вот если у тебя вампирский
337. 16:11замок то шрифт ништяк Но если у тебя
338. 16:14следующее это замок феи наверно странно
339. 16:16будет таким шрифтом написать Или если
340. 16:19следующее это будет там не знаю
341. 16:20какой-нибудь Дом Советов Ну то есть в
342. 16:24интерфейсах вообще не особо часто
343. 16:27пользуются какими сочетаниями шрифтов Ну
344. 16:30то есть это обычно либо
345. 16:33какие-то
346. 16:35яркие Ну то есть те те у кого в
347. 16:37брендбуке прям заложен какой-то вот
348. 16:39определённый яркий характер вот как у
349. 16:42Чим например то есть у них там всё под
350. 16:45старину сделано у них там иллюстрации
351. 16:47под старину у них там заголовки даже в
352. 16:49интерфейсах набраны таким интересным
353. 16:52шрифтом но чаще всего если вы будете
354. 16:56делать какую-то там стандартную штуку
355. 16:58типа приложени для бронирования то
356. 17:00дизайнер заруб вам ваши вот такие
357. 17:03шрифты Ну просто потому что они не
358. 17:07универсальны в своём образе и с чем-то
359. 17:10они хорошо Будут смотреться к чему-то
360. 17:12они радикально будут не подходить и
361. 17:14поэтому в этом плане надо Ну внимательно
362. 17:18короче смотреть так поэтому здесь в
363. 17:21рамках нашей перевёз я его поменяю на
364. 17:24какой-нибудь стандарт ну вы знаете да
365. 17:27что Яни Рим
366. 17:31поэтому я поменяю на свой Ну и в целом я
367. 17:34тогда сразу поменяю все чтобы у меня
368. 17:37везде было одинаково так потом Следующая
369. 17:39история которая вот многие оставили её
370. 17:43так как
371. 17:45есть Капс текст капсом текст капсом
372. 17:49используется в интерфейсах иногда Но я
373. 17:53не советую его применять повсеместно Ну
374. 17:56то есть это такой я бы сказал редкий
375. 17:59художественный приём почему его
376. 18:01стараются не использовать потому что для
377. 18:03капса нужно будет сделать Ну следующим
378. 18:07то есть вообще Капс всегда снижает
379. 18:09читаемость текста Потому что люди когда
380. 18:12читают текст они слова ну не читают
381. 18:17каждую букву они ча чаще всего узнают
382. 18:20слово по его форме Ну то есть это в
383. 18:23исследование нома ГП ещё 10 лет назад
384. 18:26Они эту штуку как бы открыли то есть они
385. 18:29знают то что у вот этого слова Вот такая
386. 18:31вот форма у этого такая и узнают его
387. 18:33сразу когда мы пишем слова капсом то они
388. 18:37все превращаются в прямоугольники и на
389. 18:39восприятие вот этой вот истории там с
390. 18:41какого-то большого расстояния или на
391. 18:43большой скорости требуется больше
392. 18:45времени А Вы наверно помните Да из
393. 18:47лекции то что мы боремся за каждую
394. 18:49сраную калорию которую человек тратит на
395. 18:52восприятие нашего интерфейса и Поэтому
396. 18:54стараемся вот этой штуки избегать плюс
397. 18:57Это поможет нам избавиться от ещё одного
398. 19:00стиля почти у всех Ну не знаю там у
399. 19:03половины людей в макетах есть ошибка у
400. 19:07вас очень много стилей текста Ну то есть
401. 19:09весь этот экран можно сверстать тремя
402. 19:11стилями текста Вот я сегодня буду
403. 19:13стараться попасть чтобы у меня вот их
404. 19:15было три всего то есть у вас там и
405. 19:17четыре и пять и шесть и семь и кто во
406. 19:20что горазд и цветов ещё целая куча
407. 19:22намешано но я вам пример покажу так
408. 19:24смотрим Что дальше пишут на разных
409. 19:26фотках эта прозрачно будет смотреться
410. 19:27по-разному А если сделать ставку поинтам
411. 19:29восемь кружков это немного для кружков
412. 19:32Да нет немного на азон Посмотрите там
413. 19:34вообще 20 кружков может быть Ну то есть
414. 19:37Суть в том то что показать что как бы
415. 19:40фоток много и есть ещё как бы и где ты
416. 19:43находишься относительно того места
417. 19:45докуда ты листаешь так поэтому я короче
418. 19:48этот Капс сейчас выключу если могу я не
419. 19:50знаю его набрали А тут эту штуку набрали
420. 19:53капсул поэтому сейчас мы это быстренько
421. 19:55перепечатать
422. 20:00вот эту штуку мы заменим потом дальше
423. 20:03Мне нужно Ну мне нужен какой-то набор
424. 20:06шрифтов Ну точнее не шрифтов а набор
425. 20:09текстовых стилей для того чтобы
426. 20:11поработать с этим макетом я наверное
427. 20:14сразу заранее их определю Вот и здесь мы
428. 20:16столкнётся со следующей проблемой
429. 20:18которая есть примерно в четверти макетов
430. 20:21У вас очень маленький текст Ну то есть
431. 20:25Google завещал что базовый размер текста
432. 20:29в браузере а браузер представляете Да
433. 20:32это штука которой каждый день люди
434. 20:33пользуются по многу часов там базовый
435. 20:36размер текста 16 когда-то давно уже ну
436. 20:40лет 10 назад базовый размер текста в
437. 20:42интернете был 14 то есть в книжках был
438. 20:45двенадцатый в интернете сделали
439. 20:47двенадцатый двенадцатый оказался мелко
440. 20:49его подняли до четырнадцатого потом
441. 20:51прошло ещё несколько лет провели
442. 20:54исследование подняли его до
443. 20:55шестнадцатого увеличение размера текста
444. 20:58увеличивает конверсию интерфейсов потому
445. 21:01что просто крупный текст проще читать Ну
446. 21:03не надо вглядываться Не надо глаза
447. 21:04напрягать у вас я что только не видел у
448. 21:07вас я видел и двенадцатый наборный и
449. 21:09одиннадцатый и у кого-то даже был
450. 21:11восьмой в подписях начните с
451. 21:14шестнадцатого Ну или хотя бы с
452. 21:16пятнадцатого Когда вы делаете свою
453. 21:18типографи Весь вот этот текст читать его
454. 21:21там в 12 это
455. 21:24муче так поэтому мы возм вот
456. 21:27этот Ром ему сразу межстрочный интервал
457. 21:31То есть это тоже следующая беда была
458. 21:33которая у многих людей оставили
459. 21:34межстрочный интервал
460. 21:36100 в лекции по типографике я писал то
461. 21:39что сейчас это где-то от 130 до 160 даже
462. 21:47процентов и потом мы эти проценты ну вот
463. 21:50допустим там 150 и потом эти проценты
464. 21:53должны перевести
465. 21:55в нормальные числовые значения То есть
466. 21:58просто посчитав эту штуку на
467. 22:00калькуляторе вот посмотрим какой у нас э
468. 22:03объём вообще текста в интерфейсе Ну вот
469. 22:06так вот довольно воздушно это выглядит
470. 22:08вот
471. 22:09150% если будет 130 будет выглядеть
472. 22:13примерно вот так Ну вот кстати даже 130
473. 22:17Ну вот время идёт я начинаю несколько
474. 22:19лет назад я учил людей делать 130 вот
475. 22:21сейчас я уже смотрю и 130 Мне кажется
476. 22:24тесно Но это значит То что мода
477. 22:26постепенно меняется Вот и
478. 22:29Ну сейчас уже интерфейсы как-то более
479. 22:31свободно стали верстать может не вам
480. 22:33нени себе Ни тебе ни мне вот 140 можно
481. 22:36оставить тоже и перевести это
482. 22:40в чёткое значение в числовое то есть
483. 22:43потому что проценты у нас могут делать
484. 22:46не очень хорошие вещи с Ну при
485. 22:49рендеринге и и некорректный размеры нам
486. 22:52давать вот допустим 24 24 и 150%
487. 22:56по-моему это вот примерно одно и то же
488. 22:59это наш первый текстовый стиль пока не
489. 23:02буду никаких новых создавать просто
490. 23:05возьму и Ну вот Первое что я делаю при
491. 23:12перевёз тексту и только потом после
492. 23:16этого начинаю верстать дальше всё
493. 23:19остальное так вот кстати параллельно
494. 23:22видите починил Вот эту вот историю
495. 23:25сцт кнопками
496. 23:28стили из адаптированный дизайн систем
497. 23:31ошибка смотря какую дизайн систему ты
498. 23:34взял потому что вот есть дизайн системы
499. 23:36некоторые которые я прикладываю Как
500. 23:38пример вот допустим дтб совский Ring uui
501. 23:42rui - это дизайн система для очень
502. 23:45сложных прикладных программ Ну то есть
503. 23:48которые вы устанавливаете се на ком вот
504. 23:50представьте себе какой-нибудь гигантский
505. 23:52трекер задач типа жиры вот у нас есть
506. 23:54аналог трек или идея Ну то есть какой-то
507. 23:58приложение в котором люди пишут код ну
508. 24:00вот или даже фигму видите то есть здесь
509. 24:03в самой фигме достаточно мелкие тексты
510. 24:05потому что эта штука она как бы ну
511. 24:08должна быть компактной вокруг вашего
512. 24:10интерфейса И когда вы берёте вот такую
513. 24:12дизайн систему где базовый шрифт там
514. 24:14четырнадцатый а шрифт поменьше это
515. 24:17двенадцатый и верста ете им современные
516. 24:20какие-то мобильные приложения у
517. 24:22которых ну не так уж много контента
518. 24:26внутри то ну выглядит это мягко говоря
519. 24:29не к месту поэтому Старайтесь при выборе
520. 24:34дизайн систем
521. 24:35брать Ну что-то такое более либо либо
522. 24:40более универсальное чтобы там были
523. 24:42разные размеры то есть чтобы там был
524. 24:43текст и четырнадцатый шестнадцатый и
525. 24:46восемнадцатый либо Ну либо те которые
526. 24:49крупные я вам мелкие не советую брать
527. 24:51Если вы не взяли себе такую там супер
528. 24:53нагруженную систему в качестве кейса так
529. 24:56Поехали дальше так здесь тек поставил
530. 24:58здесь текст поставил Здесь тоже текст
531. 25:01поставлю будем работать по слоям
532. 25:06заголовка поставлю Вот уголовка кстати
533. 25:08100% это более-менее даже может быть
534. 25:13Нормальный нормальный интерлиньяж
535. 25:16потому что ну в таких местах при
536. 25:19сложении заголовка он что нам даёт он
537. 25:21нам даёт небого разме
538. 25:28до вот этого заголовка То есть если у
539. 25:30вас у заголовка будет гигантский
540. 25:32интерлиньяж то и ваш следующий отступ
541. 25:34должен быть таким же большим А это
542. 25:36значит То что отступы между блоками
543. 25:38которые дальше пойдут минимальные они
544. 25:40тоже будут крупнее Поэтому в целом Ну
545. 25:43интели 100% у заголовка иногда даже 90
546. 25:46бывает Вот это нормально Ну там где-то
547. 25:50до 110 там максимум до 120% Поэтому вот
548. 25:54это мы можем оставить нам надо
549. 25:55подсчитать оставлять ли его соком Пускай
550. 25:59Наверно я сечас не буду высчитывать пря
551. 26:01линейку потому что мне надо тут всего
552. 26:03несколько стилей пускай будет сороковой
553. 26:06значит вот эта штука у меня должна быть
554. 26:0740 Ну может быть там 42 или 44 оставлю
555. 26:1240 так здесь вот я ль поменял здесь
556. 26:15стиль поменял здесь ль поменял здесь ль
557. 26:17поменял дальше что тут ещё надо
558. 26:20починить тут надо починить э
559. 26:27[музыка]
560. 26:28обли внима но Полина звездочки тоже
561. 26:31испортила она их сделала короче такими
562. 26:33острыми хищными
563. 26:36как у каких-то американских генералов на
564. 26:38погоне Ну то есть вы эти звёздочки тоже
565. 26:41можете потютьков
566. 26:58не такими острыми Ну то есть в общем
567. 27:00стиль вот этой штуки можете настроить
568. 27:03также Так ну вот я не знаю я оставлю
569. 27:05может какие-нибудь Вот такие Так вопросы
570. 27:07по этой штуке есть из процентов В
571. 27:09единицы обязательно Переводить Да
572. 27:11обязательно если для браузера десктопа
573. 27:14минимальный - это 16 то для мобильной 14
574. 27:17это ок или там не меньше СТ лучше дела
575. 27:19Ну отвечу сразу на вопрос что лучше не
576. 27:23меньше на мобилке тоже потому что на
577. 27:26десктопе всё-таки видите ну как бы экран
578. 27:29побольше А здесь мне надо это всё дело
579. 27:32смотреть ну чтобы нос не надо было
580. 27:34прижимать когда читаешь тоже
581. 27:36шестнадцатый текст это О'кей Ну советую
582. 27:39вам на мобильных телефонах вкратце
583. 27:41почему надо переводить из процентов В
584. 27:45абсолютные значения как бы самый простой
585. 27:48ответ который я могу вам дать это то что
586. 27:49верстальщики требуют наверное прямо
587. 27:51сходу Почему они требуют я вам не
588. 27:54скажу они сами потом все эти размеры
589. 27:57переводят
590. 27:58Ну в зависимости от того как у вас
591. 28:00устроено масштабирование и скейлинг
592. 28:03элементов на экране либо в ремы Либо они
593. 28:06их переводят в пункты ну то есть для
594. 28:08каждой системы по-разному и когда им
595. 28:11надо переводить в пункты если они вот р
596. 28:13Не используют там проценты Не используют
597. 28:15вот это скалирование то они сами
598. 28:17пересчитывают вот эти проценты в
599. 28:19абсолютные значения для себя и ну как бы
600. 28:22могут и неправильно пересчитать и Может
601. 28:24у вас где-то стиль поехать да короче мы
602. 28:27облегчаем работу разработчику чтобы они
603. 28:28не сделали криво Ну то есть да то есть
604. 28:31это требование для передачи в разработку
605. 28:33и плюс к этому когда вы
606. 28:36проектирует ну какие-то Контрол это
607. 28:39помогает вам
608. 28:41содержать систему в порядке потому что
609. 28:44вот этот вот размер текста Да ну то что
610. 28:47тут 24 Что такое 24 это в том числе ещё
611. 28:51и гарантия того что у меня вот эта
612. 28:53высота этой строки она будет 24 и то
613. 28:56есть я могу планировать что у меня вот
614. 28:58иконка Для текста такого размера тоже
615. 29:01будет 24 то что я смогу фрейм выровнить
616. 29:04одинаково то что я смогу в этом фрейме
617. 29:09там какую-нибудь иконку которая у меня
618. 29:10есть с позиционировать Так как мне надо
619. 29:12чтобы она была там ровно по тексту РАО
620. 29:15бан чтобы я мог там с позиционировать и
621. 29:17прочие вещи понимаете то есть вот эти
622. 29:19штуки они должны быть взаимосвязаны в
623. 29:23том числе поэтому мы задам
624. 29:25здесь кие значения не просто какие-то
625. 29:29процентные
626. 29:30истории проценты нужны нам чисто для вот
627. 29:34этой вот пропорциональной работы чтобы
628. 29:35быстро можно было прикинуть Ну вообще
629. 29:39как будет выглядеть текст не высчитывать
630. 29:41это сразу в
631. 29:43формуле так тут пятёрка тут вот
632. 29:47это звёздочки поправили наверное сразу
633. 29:50скажу то что я бы поправил и цвет
634. 29:53звёздочек Потому что сейчас он находится
635. 29:56в такой вот границе ВиДи приближается к
636. 29:59серому цвету Ну то есть в лекции по
637. 30:02цветам Мы хоть и будем её скоро
638. 30:04переделывать но там там есть небольшое
639. 30:07обновление которое мы хотим сделать то
640. 30:09буквально через месяц оно наверное
641. 30:11появится
642. 30:13но примеры и зоны выбора цвета они
643. 30:15останутся актуальными Ну даже и для
644. 30:18следующей лекции и если вы хотите найти
645. 30:21цвет
646. 30:23который Ну как бы по современному такой
647. 30:25дофаминовый который Дофамин у людей
648. 30:28вызывает какие-то ощущения в мозгу то
649. 30:30ищите где-то вот в этом вот углу то есть
650. 30:33помните нашу лекцию про цвет типа выбор
651. 30:37Прай цвета Ну то есть искать не где-то
652. 30:39вот здесь а где-то вот в этой зоне и
653. 30:41по-моему в это будет ещё подробнее Эта
654. 30:45история вот такую картинку не встречали
655. 30:47Ладно Значит доберёмся до неё но сейчас
656. 30:50сейчас я быстренько про неё расскажу То
657. 30:53есть у вас когда вы работаете с ксом
658. 30:56есть такая вот подсказка безопасные зоны
659. 30:59для выбора цветов чтобы вы не
660. 31:03слишком Ну как бы не слишком убежали от
661. 31:06каких-то
662. 31:07таких
663. 31:09приятней которые тоже общепринято уже
664. 31:12стали в нашей интерфейсный практики так
665. 31:16потом После лекции я вам Её кину в чат
666. 31:18то чтобы она у вас была если кто-то не
667. 31:20видел то есть как эта картинка работает
668. 31:23вот здесь вот есть такая достаточно
669. 31:24небольшая зона Возле этого угла которая
670. 31:29Ну типа содержат в себе такие
671. 31:31более-менее яркие приятные брендовые
672. 31:34цвета Ну то есть чем ближе Мы двигаемся
673. 31:37в сторону серого цвета вот сюда вот в
674. 31:40центр тем более этот цвет становится
675. 31:42таким как бы
676. 31:44маргинальным ну в какой-то мере может
677. 31:47быть и необычным там и для веб-дизайна
678. 31:50сейчас это может быть даже модно но
679. 31:52Грязнова Вот Но в интерфейсе до сих пор
680. 31:55такие Грязнова цвета не любят То есть
681. 31:57если ищете себе цвет для вашего проекта
682. 32:00ищите где-то Вот в этих трёх зон Ну то
683. 32:03есть вот здесь вот здесь вот здесь вот
684. 32:05если вам нужен тёмный цвет а если вам
685. 32:08нужны светлые цвета для подложек для
686. 32:10серых то их надо искать вот здесь вот в
687. 32:12самом начале как Или вы можете ничего не
688. 32:15искать это всего два цвета F5 F5 F5 или
689. 32:20там сейчас как он
690. 32:22F или их цветные аналоги Ну то есть
691. 32:25когда вы меняете его там на более
692. 32:27голубой на
693. 32:28какой-то фиолетовый и так далее главно
694. 32:30чтобы не красный и не оранжевый Ну там
695. 32:32вот эти оттенки если вам нужна прайме
696. 32:40подложенным
697. 32:43чтобы он был тёмно-серый то он должен
698. 32:45быть не слишком чёрный и не слишком
699. 32:48светлый то есть вот здесь вот цвета
700. 32:49дурацкие посередине
701. 32:52ач вот эти вот вот
702. 32:56Прив тёмные становятся и в конце вот
703. 32:59здесь вот диапазон для цветов для шрифта
704. 33:02в чёрной палитре Ну то есть короче вот
705. 33:04эта картинка это такая как бы для для
706. 33:07начинающих хорошее подспорье чтобы не
707. 33:09выбирать слишком скучные цвета какие-то
708. 33:12старпёр ские цвета не
709. 33:15выбирать Ну там цвета с каблам не
710. 33:18выбирать грязные цвета то есть вот
711. 33:20можете пользоваться вот такой вот ской в
712. 33:22принципе так вернёмся к нашим баранам Ну
713. 33:25то есть хочу их повеселее сделать видите
714. 33:27Возвращаю
715. 33:28БК вот этому углу и сразу звездочки
716. 33:31становятся живыми Ну то есть Обратите
717. 33:34внимание Да вот здесь из-за того что
718. 33:35серый цвет примешивается то он теряет
719. 33:38как бы свою силу
720. 33:40И Ну а вот эта сила цвета вот эта вот
721. 33:42его яркость она как раз и воздействует
722. 33:45на эмоции людей Так теперь вопрос был о
723. 33:47том Надо ли фрейми звёздочки Конечно
724. 33:50надо Ну то
725. 33:52есть може реть
726. 33:58види в принципе так воре она тут
727. 34:00упирается
728. 34:01сверху
729. 34:03в вот эту штуку наверно Сейчас я её
730. 34:07немножко
731. 34:09подвинуться Ну короче кажется что
732. 34:11звёздочка будто Вот в такой штуке
733. 34:13существует Но я бы её ВС равно во фрейм
734. 34:15положил для простоты экспорта вот чтобы
735. 34:18можно было как-то её назвать Так ну и
736. 34:20естественно Если вы
737. 34:26ком которая находится в состоянии что
738. 34:30она ещё не заполненная то есть это либо
739. 34:33пустая либо серая либо бледно золотая
740. 34:36какая-нибудь Ну то есть вам нужно вот
741. 34:39эти состояния тоже предусмотреть но у
742. 34:41нас тут Пять звёзд и поэтому всё хорошо
743. 34:44Ещё со звёздами какие были
744. 34:46приколы Я видел то что многие
745. 34:50красили многие красили эту цифру в цвет
746. 34:52звезды и попали в такой небольшой как бы
747. 34:56просак потому
748. 34:58потому что звезда - это
749. 35:00иконок - это всё равно что иконой
750. 35:04поэтому Как
751. 35:05видите пятёрка выглядит намного более
752. 35:08бледной чем вот эта вот штука просто
753. 35:11из-за того что площади цвета не хватает
754. 35:13И вам для того чтобы сравнять вот эти
755. 35:15цвета нужно либо сделать
756. 35:19темнее вот этот цвет видите издалека
757. 35:22Смотрите Они вот примерно по весу стали
758. 35:25либо сделать
759. 35:28е эту штуку но ВС равно прид чуть-чуть
760. 35:30темнее сделать вот чтобы она у вас как
761. 35:32бы эта штука соответствовала Ну или
762. 35:34оставить её
763. 35:36ЧР Вот она тоже будет нормально
764. 35:40выглядеть
765. 35:42скобки со скобками Здесь такая штука то
766. 35:45что вообще мы стараемся скобки
767. 35:46раскрывать но я не слишком активно с
768. 35:49ними борюсь Но вообще лучше раскрывать
769. 35:53если вы оставляете вот эту ссылку рй то
770. 35:56даже в приложении
771. 35:58е прид вам подчеркнуть либо сделать эту
772. 36:01штуку
773. 36:02жирной иначе никто не поймёт что это
774. 36:05ссылка но видите когда вы будете делать
775. 36:07её жирной у вас будет другая проблема
776. 36:08пото что вы начинаете плодить стили
777. 36:11рядо вот кто-то сделал вкладки для для
778. 36:15отзывов отдельной то есть прям
779. 36:17переключение кто-то прям блок отзывов
780. 36:20сверл это тоже прикольно но если Мы
781. 36:23выполняем программу минимум Я наверное
782. 36:25бы добавил просто подчёркивание сюда Но
783. 36:28вообще идеи с
784. 36:32перевёрнуто прикольные получились с
785. 36:35иконками вышел самый
786. 36:37большой бардак у нас я прям очень много
787. 36:41скриншотов делал Сейчас посмотрим а ну
788. 36:45вот смотрите короче ну не только с
789. 36:47иконками начнём с иконок наверное потом
790. 36:49на все остальные штуки будем
791. 36:53переходить этими инками
792. 36:57что очень много людей сделали не
793. 37:01контрастные сочетания здесь то есть как
794. 37:04нам проверить насколько контрастное
795. 37:06сочетание мы берём плагин
796. 37:08контраст вот включаем Вот эту вот штуку
797. 37:12вот этот апка алгоритм потому что он
798. 37:16более точный чем vcg и просто начинаем
799. 37:21вот просто начинаем
800. 37:23красить Вот в эти вот и смотрим
801. 37:28у на ну на белом фоне вот этот вот серый
802. 37:31подходит для не текстовых элементов и
803. 37:34для крупного текста Ну то есть даже для
804. 37:37какого-то СПО текста Что
805. 37:39такое
806. 37:41с Ну то есть короче для элементов прочих
807. 37:46штук но явно не для чтения расположе
808. 37:48видите даже заголовки и нельзя писать
809. 37:50утек
810. 37:53помост на
811. 37:58точно такой же Контра то есть вот эти
812. 38:00штуки они для какого-то количества людей
813. 38:02будут не
814. 38:04читае вот и всё и
815. 38:07поехали та же самая
816. 38:09проблема вот здесь сейчас я тоже
817. 38:13покрашу этот серый цвет чуть-чуть
818. 38:16получше но тоже при мелком тексте видите
819. 38:19маленький текст не
820. 38:22прохо вот такие вот
821. 38:25туже ко
822. 38:27Белый такой фонет на сером цвете Ну то
823. 38:31есть это может В некоторых случаях
824. 38:33прикольно выглядеть когда кнопка
825. 38:34достаточно большая или у неё есть
826. 38:37маленькая тень какая-нибудь причём не
827. 38:41чёрная А вот Такого же цвета как вот это
828. 38:43просто немножко более Ну чуть-чуть
829. 38:45отделяющий её от фона или маленькая
830. 38:48обводок какая-то практически незаметная
831. 38:50Но когда у вас что-то происходит такое
832. 38:54что на
833. 38:55грани Ну как бы на ни сливание вот эти
834. 38:58вот цвета то есть если у элемента
835. 39:00площадь небольшая то это тоже заставляет
836. 39:03глаза напрягаться и я бы посоветовал Ну
837. 39:06вот это отделение сделать более чётким
838. 39:08причём там вот этот макет я его сейчас
839. 39:10не найду там есть ещё белые плашки на
840. 39:14этом фоне и они смотрятся круто Но
841. 39:16потому что они большого размера А вот
842. 39:19эта штука с маленьким размером она
843. 39:20теряется так вот эти вот штуки которые
844. 39:22мы с вами изготовили Вот они как бы на
845. 39:25грани находятся то есть кто-то увидит
846. 39:28кто-то не увидит Ну то есть вот эта вот
847. 39:30штука допустим вот это вот хорошо
848. 39:32читается Вот это достаточно хорошо
849. 39:34читается а здесь уже от фотографии будет
850. 39:37зависеть поэтому Ну вот даже то что мы с
851. 39:39вами там делали такой
852. 39:41блюрить и смотреть может быть незаметно
853. 39:45ну здесь белый на жёлтом Я думаю тоже он
854. 39:47не сможет у нас пройти А может и сможет
855. 39:50сейчас посмотрим ну вот этот Нижний
856. 39:52текст тонкий Мне кажется что вряд ли то
857. 39:55есть Вот видите тоже не проходит Вот ещё
858. 39:58кто отважился как бы сделать это прям
859. 40:01без каких-то подложек и положить эту
860. 40:04фотку наверх Ну то есть получилось
861. 40:05красиво на первый взгляд но видите здесь
862. 40:08вот этот маленький текст он нечитаемый
863. 40:10тут надо либо текст больше делать либо
864. 40:13какой-то Градиент накладывать и что-то в
865. 40:15этом роде так дальше я больше люблю
866. 40:18когда она другого цвета подчёркнута но
867. 40:20это не ссылка А тут у нас крупнейшего
868. 40:26Инга чипсы сделать светлее из чёрным
869. 40:30текстом Да ну то есть вам вообще не надо
870. 40:35было так много акцента довать на вот эти
871. 40:39вещи Ну то есть если Вы посмотрите в
872. 40:42принципе на вот этот вот экран то у нас
873. 40:45основное целевое действие то оно Где
874. 40:47находится основное целевое действие -
875. 40:49это наша кнопочка купить то есть Нам
876. 40:53нужно внимание человека обратить на вот
877. 40:57этот вот блок а сейчас по визуальной
878. 41:00иерархии У нас вот этот блок он занимает
879. 41:02как бы максимум Поэтому будем его пере
880. 41:05переделать так Илья написал что там есть
881. 41:08Градиент но видишь всё равно не хватило
882. 41:09текст тонкова там его плохо видно что бы
883. 41:14я сделал Я вообще бы не стал
884. 41:16красить вот эти там триггерные штуки в
885. 41:20какой-то яркий цвет Я бы наверное
886. 41:23покрасил их в серый использовал бы один
887. 41:25из стандартных вечных цветов
888. 41:28для всего подходят для начала Ну то есть
889. 41:30видите я таким образом как бы ослабил
890. 41:33вот этот контраст здесь и у нас кнопка
891. 41:34она опять вернула
892. 41:36себе какие-то позиции
893. 41:40цвет не знаю хотите если для прикола
894. 41:42можем выбрать какой-нибудь другой цвет
895. 41:45поинтересней с цветами тут же как тут же
896. 41:47какой прикол Вот из-за того что у меня
897. 41:49жёлтый цвет я не могу эту ссылку в
898. 41:51жёлтый цвет покрасить потому что е будет
899. 41:53не видно и поэтому мне прид Боро как-то
900. 41:56с этой истории Но в данном случае я
901. 41:59допустим вот это подчёркивание использую
902. 42:02так дальше следующая проблема которая
903. 42:05была тоже у большого количества людей
904. 42:08это разный стиль иконок вот здесь вот
905. 42:11максимально разный стиль иконок вы
906. 42:14починили Но починили не всё Вот давайте
907. 42:17посмотрим на эти иконки тоже Вот видите
908. 42:20допустим вот как бы вот это И вот это
909. 42:24можно сказать что из одного набора
910. 42:27То есть у вот этой иконки явно больше
911. 42:30веса чем у вот этих иконок То есть она
912. 42:32выглядит как будто инвертированные вот
913. 42:34эти иконки Вот это вообще из другого
914. 42:36набора здесь две из одного набора две из
915. 42:39другого набора то есть надо искать чтобы
916. 42:41все одинаковые были вот здесь вот видите
917. 42:43они ещё и разной толщины и очень важно
918. 42:47ещё что разное количество элементов Ну
919. 42:50то есть вот это
920. 42:52максимально дураки дурацкое будет слово
921. 42:55ноно
922. 42:58есть вот э иконка минималистичная в этой
923. 43:00иконке уже куда больше элементов в этой
924. 43:03иконке пря на порядок много элемент вот
925. 43:06а это другого стиля то есть Видите вот
926. 43:08это как бы плоская вот это как бы ну в
927. 43:12перспективе в какой-то находится Вот это
928. 43:14тоже плоская Ну то точнее Вот это
929. 43:16абсолютно плоская а здесь вот как бы
930. 43:18такой фронтальный вид То есть это просто
931. 43:22схематическая бы вот эту вот поме може
932. 43:26ими найти чтобы она соответствовала по
933. 43:29количеству элементов вот этим ну здесь
934. 43:31тоже здесь вот это вот выбивается вот
935. 43:33такие иконки я вам не советую
936. 43:34использовать с в интерфейсах с большим
937. 43:37количеством супер мелких элементов
938. 43:39во-первых вот это вот дело оно на любом
939. 43:42старом мониторе поедет Так что там не
940. 43:44душ будет а просто куча пикселей таких
941. 43:46грязных нагромождения во-вторых тоже вот
942. 43:48здесь вот это у вас с небольшим
943. 43:51количеством деталей вот эти вот ну как
944. 43:55бы вот здесь вот какое-то прерывание
945. 43:57один стиль вот здесь вот другого рода
946. 43:59прерывания другой стиль То есть
947. 44:01получается что они как будто все из
948. 44:03разной немножко оперы ну здесь вот то же
949. 44:06самое то есть вот это минималистичная
950. 44:07вот это минималистичная вот это как бы с
951. 44:11большим количеством детали Так что тут
952. 44:14ещё есть прикольно так Ну это тоже
953. 44:17невидимые невидимые иконки они ещё у вас
954. 44:20оказались разные по весу Ну то есть если
955. 44:23мы их Поставим все в один ряд и
956. 44:26посмотрим по вертикали потом по
957. 44:28горизонтали Ну то есть вот это вот будет
958. 44:30меньше весить вот это вот будет типа
959. 44:32меньше весить наверное даже чем вот это
960. 44:34вот это будет вообще больше всех то есть
961. 44:36этот домик надо было как-то уменьшать
962. 44:38чтобы он по весу был там плюс-минус в
963. 44:41одной опе Ну кажется что вот это И вот
964. 44:44это
965. 44:45вместе и вот эти вот
966. 44:49три тоже вместе И вот это вот отдельно
967. 44:52от них Короче надо с надо работать ну
968. 44:55проще всего один
969. 44:57просто подобрать Вот видите все иконки в
970. 44:59одном стиле но здесь конкретно мне не
971. 45:01понравилось то что они уж очень
972. 45:04маленькие по отношению к вот этому
973. 45:07квадрату в котором они расположены Ну то
974. 45:09есть здесь просится иконка Вот какого-то
975. 45:11вот такого размера примерно Или урезать
976. 45:14эту штуку вот до такого размера то я
977. 45:17понимаю что там может быть текст
978. 45:18какой-то длинный Но если он будет то
979. 45:20лучше наверно по-другому работать так
980. 45:22Озвучь пожалуйста задание что можно было
981. 45:24менять илит
982. 45:27можно было менять абсолютно всё То есть
983. 45:30сейчас я читаю
984. 45:32перерастает вот и всё было задание На
985. 45:36что обратить внимание Ну вот обратить
986. 45:38внимание на все вот эти вещи на которые
987. 45:39вам Полина намекнула то есть менять
988. 45:41можно было вообще всё как бы я вестал
989. 45:43вот эту историю
990. 45:45во-первых Я не знаю наверное практически
991. 45:48никто ну может там парочку людей
992. 45:49обратили внимание на текст который здесь
993. 45:54написан Ну типа потому что раз
994. 45:55английский можно не читать наверно Да но
995. 45:58кажется что то что написано в тексте и
996. 46:03то что как бы нарисовано здесь на этих
997. 46:07иконках оно может быть связано Вот
998. 46:09давайте посмотрим так вот здесь вот есть
999. 46:11такая штука Как четыре человека вот
1000. 46:14кажется что вот эта вот история про
1001. 46:16четыре человека - это тоже
1002. 46:18какая-то как бы тема сколько людей может
1003. 46:21э разместиться здесь что тут ещё есть
1004. 46:24Так Experience там бла-бла-бла
1005. 46:27кабин Первое - это точно описание мы его
1006. 46:31не будем трогать а второе может спать
1007. 46:33четыре
1008. 46:36человека сауна и полностью оборудованные
1009. 46:40полностью оборудованная
1010. 46:42кухня Ну то есть короче что можно было
1011. 46:44сделать Ну мы сейчас не будем этот текст
1012. 46:46трогать Но вообще как идея для вас в
1013. 46:48следующем то есть всегда читайте текст
1014. 46:50вы всегда можете вопервых вот эту штуку
1015. 46:52преобразовывать в текст и обратно
1016. 46:55какие-то
1017. 46:57надо было
1018. 46:58делать В этом ряду Ну то есть допустим
1019. 47:01то что это хаос хаос как бы здесь вот
1020. 47:03история про количество А здесь история
1021. 47:05про тип возможно этот тип надо было
1022. 47:08куда-то в другое место засунуть Ну то
1023. 47:10есть я по-моему видел даже как кто-то
1024. 47:12засовывал это
1025. 47:13в вот сюда вот на картинку типа делал
1026. 47:16тут вот иконку что это дом Ну
1027. 47:19подразумеваю что там может быть иконка
1028. 47:20что это квартира Что это там АТ там или
1029. 47:23е что-нибудь или какой-нибудь
1030. 47:25тоже можете так ещ что бы я сделал
1031. 47:28Наверное я бы стал экономить место вот
1032. 47:30как многие здесь экономили место для вот
1033. 47:35этой истории так я хотел туда засунуть
1034. 47:37сауну четыре человека но не нашла саму
1035. 47:39иконку сауны вот молодец То есть можно
1036. 47:42было попробовать сэкономить вот это вот
1037. 47:45место я хочу сейчас посмотреть я там
1038. 47:47отбирал поему некоторые макеты где это
1039. 47:49было прикольно сделано Ну вот здесь вот
1040. 47:52видите здесь они оставили такой же
1041. 47:55дизайн который
1042. 47:57Ну который предполагал то есть с
1043. 47:59большими квадратами но иконки привели
1044. 48:01примерно к одному виду и шрифты привели
1045. 48:03к одному виду вот этот макет Мне
1046. 48:06понравился то есть вот этот макет вот
1047. 48:09мне тоже понравился Единственное что
1048. 48:10здесь вот есть парочку лишних вещей и Ну
1049. 48:13вот эта вот деталька невидимая обводка
1050. 48:16но тоже я бы его хотел выделить хорошо
1051. 48:18получилось ещё Ребята
1052. 48:21кто выбирал делать Вот такие
1053. 48:25теги то есть с тегами там что было важно
1054. 48:29короче когда вы верста вот эти теги то
1055. 48:31что если вы ставите текст рядом с
1056. 48:33иконкой у вас должна быть толщина похожа
1057. 48:36на вертикальный штрих
1058. 48:39у иконки Ой у у текста то есть здесь вот
1059. 48:43это соблюдено и мне ещё здесь вот
1060. 48:45понравилось то
1061. 48:46что как бы всё уместилось в один ряд Ну
1062. 48:51то есть Прямо вместе с количеством
1063. 48:53потому что я видел там такие же истории
1064. 48:55со слайдерами Вот видите то есть то же
1065. 48:57самое
1066. 48:58только как бы менее компактно Ну то есть
1067. 49:01просто понимаете здесь м ну вот эти
1068. 49:04иконки Они они достаточно говорящие Вот
1069. 49:06кроме слова Хаус потому что не совсем
1070. 49:08понятно что здесь означает Вот эту вот
1071. 49:09штуку с домам так да тут это дом Ну что
1072. 49:12это дом целиком это Это имеется в виду а
1073. 49:15там иконка же кровати двух спальных две
1074. 49:18двухспальные равно четыре человека Да
1075. 49:20тоже тоже логично можно было подписать
1076. 49:22это кстати рядом с кроватью потому что
1077. 49:24Вот кто-то видите подобрал иконку а э
1078. 49:27кровать она односпальная на иконке Ну то
1079. 49:29есть люди же они вообще как бы все эти
1080. 49:31вещи могут по-разному понимать Ну то
1081. 49:35есть в целом в целом вот эти подходы Вот
1082. 49:38кстати я вижу то что кто-то добавлял
1083. 49:40сюда ещё вот пул Ну типа Пула тут нет но
1084. 49:45есть сауна но в целом логика такая Да
1085. 49:48вот это вот кстати тоже симпатичный
1086. 49:50экран с заголовком т проблемы его поз
1087. 49:54разм болье количество
1088. 49:57в целом Ну кто-то пошл в историю с
1089. 50:00тегами практически все сделали два ряда
1090. 50:03это нормально Это прикольно но у
1091. 50:06большинства коче Короче ещё сейчас
1092. 50:07проблемы которые мы будем разбирать
1093. 50:09появились с иконками у меня по-моему
1094. 50:11больше всего был скриншотов так ещё
1095. 50:13проблемы с иконками очень много Кто
1096. 50:18использовал вокруг иконок достаточно
1097. 50:20жёсткие
1098. 50:22обводки по поводу обводок По поводу
1099. 50:25короче
1100. 50:26вот этих вот всех
1101. 50:28разделителей действуют следующие правила
1102. 50:30Ну то есть Первое правило использование
1103. 50:33разделителей а Попробуй брать
1104. 50:34разделители если без них не сломается то
1105. 50:37разделители значит не нужны вот допустим
1106. 50:40берём вот этот дизайн убираем
1107. 50:42разделители и ничего не изменяется Ну то
1108. 50:44есть можно даже подвинуть поближе эту
1109. 50:46штуку вот разделитель по сути не
1110. 50:49отделяет вам здесь ничего потому что у
1111. 50:51кнопки у неё есть своя достаточно
1112. 50:54жёсткая Верхняя граница вот здесь вот
1113. 50:57тоже самое то есть вот я убираю
1114. 50:58разделители просто добавляю немножечко
1115. 51:02больше воздуха и становится чище Ну то
1116. 51:05есть Видите вот эта штука ну как бы это
1117. 51:07лишние детали которые остались от
1118. 51:09конструктора Lego и просто тестируйте
1119. 51:12вот если используете всё-таки
1120. 51:13разделители я вам не советую брать
1121. 51:16двухпильный тёмные Ну вообще двухпильный
1122. 51:19очень редко используются потому что мы
1123. 51:22не хотим чтобы они всё время торчали эти
1124. 51:24борде наружу как бы они являются не
1125. 51:27Основной частью композиции Ну чтобы мы
1126. 51:30их там рассматривали эти борде они
1127. 51:32являются вспомогательными инструментами
1128. 51:34то есть они должны быть невидимы и при
1129. 51:36этом держать конструкцию то есть нам
1130. 51:39помогать ещё с бордера Какие приколы
1131. 51:41есть вот здесь вот когда вы делаете
1132. 51:43здесь вот такие жёсткие бордера и
1133. 51:45делаете вот эти теги м похожими на
1134. 51:49кнопки люди будут на них нажимать потому
1135. 51:51что это выглядит как ну как secondary
1136. 51:54кнопка вот для того чтобы не выглядело
1137. 51:57кликабельно вам надо вот эту обводку
1138. 52:00сделать бледной Ну то есть вы можете
1139. 52:02сделать яркий текст и внутренний
1140. 52:04содержимое а об водочку сделать Как
1141. 52:06какой-нибудь светло серой тогда тыкать
1142. 52:08так много не буду ещё одна проблема с
1143. 52:11бордера это когда поверх плашек ещё и
1144. 52:15обводит их какой-то штукой Ну то есть
1145. 52:18плашка она и сама по себе выделяется на
1146. 52:21фоне и нет смысла делать Вот это двойное
1147. 52:23выделение то есть вот этих вещей Ну в
1148. 52:25целом практически никогда обводка не
1149. 52:27нужна так здесь ещё жёсткие обводки Ну
1150. 52:31короче постарайтесь их как-то потушить
1151. 52:33Вот и старайтесь
1152. 52:35Ну не
1153. 52:39использовать разделители лишний раз Ну
1154. 52:41то есть как когда когда вы можете просто
1155. 52:44расстоянием допустим обойтись Попробуйте
1156. 52:46сначала просто отодвинуть подальше если
1157. 52:48никак не
1158. 52:49получается ну как бы не знаю если Полина
1159. 52:52ваш макет увидит она все борде сразу по
1160. 52:53удаляет Потому что все кто вви работали
1161. 52:56их их там заставляли короче вообще без
1162. 52:58бордера
1163. 52:59проставить так и вот это наверное я бы
1164. 53:02тоже куда-то
1165. 53:04сюда вот куда-то вот сюда вот
1166. 53:07поместил вот это слово
1167. 53:11мо вот и кстати Раз уж мы вот этот вот
1168. 53:14макети
1169. 53:15смотрим Если вы используете бр то
1170. 53:19Добавляйте в BL ещё белый цвет
1171. 53:22примешивается туда внутрь потому что
1172. 53:25иначе у вас будет Вот
1173. 53:26такая грязь Ну как поверх текста видите
1174. 53:30такой серый грязей цвет вот как снег вот
1175. 53:32этот вот сейчас когда всё таят тоже
1176. 53:35стараетесь от этой штуки избавиться
1177. 53:37Артур Если останется время можешь
1178. 53:39конкретный экран разобрать Ну нет нас
1179. 53:41много вот поэтому мы Разбираем ошибки
1180. 53:44Так будет честно так разделитель
1181. 53:46делается с помощью шейпа прямоугольник а
1182. 53:49не линии
1183. 53:50да то есть Перо для разделителей Не
1184. 53:55используют
1185. 53:56по той причине
1186. 53:58что когда линию вы рисуете пером Она
1187. 54:01проходит между двух пикселей То есть
1188. 54:03когда браузер будет рендерить эту линию
1189. 54:05он сделает её бледно серой и она будет
1190. 54:08толщиной в д пикселя Ну то есть а если
1191. 54:10вы нарисует если вы рисуете с помощью
1192. 54:14шейпа то она ровно в пиксель
1193. 54:16попадает Вот видите А это между торчит и
1194. 54:20это и это не очень хорошо в шепах есть
1195. 54:23инструмент линия Ну это всё равно что
1196. 54:26а Ну кстати Ну такая тоже нормальна
1197. 54:29видите Она же в этом находится внутри
1198. 54:34находится внутри пиксельной сетки самое
1199. 54:36главное короче чтобы у вас она не
1200. 54:37торчала за пределом ну я не знаю Ну я на
1201. 54:40самом деле ректа рисую специальный
1202. 54:43инструмент для этой штуки вот как быть с
1203. 54:45обводкой не у обводки есть специальное
1204. 54:48свойство это строк то есть вот эта штука
1205. 54:51с обводкой не переживайте Поехали дальше
1206. 54:54Ну вот е Давайте посмотрим контрастные
1207. 54:57штуки обводка
1208. 54:59Исай обычно Ну то есть мы стараемся
1209. 55:02сделать чтобы у нас ну когда вы
1210. 55:05расстояние мерили до элемента чтобы она
1211. 55:07оно вас не обманывала Потому что если
1212. 55:08обводка будет асай она как бы не
1213. 55:11считается Ну когда вы до неё расстояние
1214. 55:14измеря вот допустим я сделал асай и
1215. 55:16сделал прямоугольник и видите я измеряю
1216. 55:18а он мне показывает 10 а по фак не 10 а
1217. 55:22потому
1218. 55:25с короче м популярная история Ну вот про
1219. 55:28текст я сказал про то что слишком серый
1220. 55:31цвет текста Вот это ещё Кстати мы ещё не
1221. 55:34дошли до этого серого текста Ну базово
1222. 55:37но многие использовали серый цвет и если
1223. 55:40вы этот цвет проверите через плагин он у
1224. 55:43вас тоже не пройдёт
1225. 55:45м вот этот зелёный Скорее всего тоже не
1226. 55:49пройдёт очень бледный а очень бледные
1227. 55:52звёздочки вот ну здесь вот не очень
1228. 55:55хорошо видно
1229. 55:57видно Циферки тоже есть проблема с
1230. 55:59контрастом вот здесь вот ещё такая штука
1231. 56:01по что вот проверьте тоже У кого вот
1232. 56:03этот вот зелёный на
1233. 56:04сером Ещё ещё какой-то цвет такой серый
1234. 56:08с чем-то проверьте тоже не факт что он у
1235. 56:11вас виден хорошо вот тут вот тут ну
1236. 56:16прове короче это такая штука которую
1237. 56:19которую вам реально Всем надо проверять
1238. 56:21Ну типа там очень небольшого количества
1239. 56:23макетов вообще не было проблем с
1240. 56:25контрастом осно
1241. 56:28так по контрасту посмотрели про разное
1242. 56:31оформление
1243. 56:33посмотрели рде
1244. 56:35посмотрели сейчас останется самое самое
1245. 56:39сложное Так ну что мне сделать Я тут
1246. 56:42буду сейчас потихонечку Перерва эту
1247. 56:43историю наверное украду у кого-нибудь
1248. 56:46классные иконки чтобы я не тратил ваше
1249. 56:48время на
1250. 56:53[музыка]
1251. 56:55по есть текста У меня много текст у меня
1252. 56:58будет уходить вниз если у меня текст
1253. 57:02Будет уходить вниз моя задача какая моя
1254. 57:05задача сделать так чтобы у меня не
1255. 57:10сейчас чтобы он у меня короче
1256. 57:13скрывался за ну какой-то
1257. 57:26Ну то есть самый простой способ вот там
1258. 57:29было много способов люди применяли
1259. 57:31делали небольшую прозрачность чтобы было
1260. 57:34видно что текст куда-то вниз уходит но
1261. 57:37это может быть Ну чревато вот таким как
1262. 57:40бы вот такой вот грязью там каким-то
1263. 57:42наложением ещё какие были способы
1264. 57:45использованы сегодня был бр Но если
1265. 57:49делать бр бр должен быть
1266. 57:51прям ну короче такой
1267. 57:54белый чтобы он не сильно пачкался когда
1268. 57:56под ним проходит текст вот этот цвет То
1269. 58:00есть если у вас будет Вот здесь мало
1270. 58:03прозрачности а вот здесь вот блюра будет
1271. 58:05много ну чем больше блюра И чем меньше
1272. 58:07прозрачность тем больше тем грязнее
1273. 58:09будет вот этот вот фон Поэтому если
1274. 58:12используете то тогда сочетание здесь вот
1275. 58:14под Ну под 90 надо выкручивать эту штуку
1276. 58:16и всё
1277. 58:17Или есть ещё одна история но просто в
1278. 58:20чём как бы страх самый то что Вот текст
1279. 58:22как-то вот так сложится что будет
1280. 58:24казаться что он закончился Вот на этом
1281. 58:26дальше ничего нет Когда у вас белый на
1282. 58:28белом и То есть Вам либо надо делать
1283. 58:30здесь другой цвет отделить
1284. 58:35Это что это может
1285. 58:38быть Ну я много разных приколов там
1286. 58:41видел и при этом я у вас там видел супер
1287. 58:44контрастные штуки то есть там Чёрная
1288. 58:46такая вот
1289. 58:47Бах как бы вот просто просто чёрного
1290. 58:51цвета вот эта плашка и я не советую вам
1291. 58:56мо Контра врубать есть это тоже очень
1292. 58:58сильно глаз
1293. 59:00режет на кнопке большой контраст
1294. 59:02позволите то есть бахнуть там большую
1295. 59:04кнопку там в пол экран или там на весь
1296. 59:06экран и сделать её акцентом это
1297. 59:09нормальная история но ещё делать вокруг
1298. 59:12неё какую-то там тёмно тёмно серую
1299. 59:14подложку я бы не стал Как решить
1300. 59:17проблему с вот этим вот невидимым
1301. 59:19текстом и чтобы дать понять людям что
1302. 59:21там можно читать дальше можно ложить
1303. 59:24тень белую Да вот минусовой Y короче вам
1304. 59:28либо либо такую тень сделать либо вам
1305. 59:31нужно сделать э ну небольшую такую
1306. 59:34градиентную плашку Ну то есть короче это
1307. 59:37не сильно портит э ну как бы ваш дизайн
1308. 59:41и не сильно Ну как бы размешивает цвета
1309. 59:44но при этом помогает сделать вам да Дать
1310. 59:48человеку понять что там всё-таки
1311. 59:50какой-то текст ещё есть так можешь ещё
1312. 59:54раз сказать На какие ке ты нажимаешь
1313. 59:57изменить ближайший цвет на хесе А что ты
1314. 1:00:01имеешь в виду ближайший цвет вверх-вниз
1315. 1:00:04просто да Вот видите вверх-вниз А с
1316. 1:00:07шифтом сразу по 10 значений вот ну
1317. 1:00:10короче Короче я делаю небольшое отте но
1318. 1:00:13здесь вот какое-то больно жирное
1319. 1:00:14получилось наверно лю поменьше Вот но в
1320. 1:00:17целом в целом какая-то Вот такая вот
1321. 1:00:19система долж быть 12 как у меня здесь 12
1322. 1:00:24там 12
1323. 1:00:26Есть какой-то прикольный
1324. 1:00:28цвет кайто
1325. 1:00:33необычный и дальше что мы делаем Ну то
1326. 1:00:36есть дальше мы смотрим Ну во-первых надо
1327. 1:00:38всё выровнять Да вот и дальше будем
1328. 1:00:42делать
1329. 1:00:44отступы Что кто вчера приходил на
1330. 1:00:46отступы на новые записи не будет Вот ну
1331. 1:00:51шучу
1332. 1:00:53сломалось звук Короче плохо записался
1333. 1:00:56вчерашней лекции придётся ещё раз
1334. 1:00:57переделывать
1335. 1:00:59вот поэтому Кто был тот Да тот получит
1336. 1:01:02тот получил знания уже 3 часа Да ну
1337. 1:01:05будет короткая сороками нутная примеров
1338. 1:01:07не будет на следующей лекции всё так
1339. 1:01:10м кнопочку мы починили сделали немножко
1340. 1:01:13такой более
1341. 1:01:16представительской здесь текст у нас всё
1342. 1:01:18равно ни фига не видно что там есть ещё
1343. 1:01:21видимо придётся всё-таки больше эту
1344. 1:01:23штуку сделать
1345. 1:01:26Так сколько стилей я пока использовал в
1346. 1:01:28тексте два Да вот могу сказать что вот
1347. 1:01:34этот ну короче то что я делаю допустим
1348. 1:01:37для цветных шрифтов медиум толщину Это
1349. 1:01:40не
1350. 1:01:41считается почему это не считается потому
1351. 1:01:44что вот это ну мы мы же не просто ну я
1352. 1:01:48же не просто издеваюсь над вами говорю
1353. 1:01:50что надо два стиля делать мы экономим
1354. 1:01:52количество толщин линий на экране типа
1355. 1:01:56чем больше у нас разных толщин на экране
1356. 1:01:59тем грязнее кажется макет и то есть
1357. 1:02:02когда я делаю допустим Ну вот когда вы
1358. 1:02:05смотрите на вот допустим я захочу белым
1359. 1:02:08цветом сделать вот эту вот эту кнопочку
1360. 1:02:12вот видите что вот этот текст он
1361. 1:02:13выглядит тоньше чем вот этот текст И
1362. 1:02:17точно также с цветным текстом на
1363. 1:02:19каком-то фоне нам для того чтобы он
1364. 1:02:21выглядел той же толщины как и чёрной
1365. 1:02:24надо сделать его
1366. 1:02:26Дим Вот видите и вот здесь вот точно
1367. 1:02:29такая же логика Это для белого текста на
1368. 1:02:31Цветном фоне и для цветного текста Вот с
1369. 1:02:33ним часто такая такая беда для тонкого
1370. 1:02:36для светлого цветного текста Вот если
1371. 1:02:38чёрный то в принципе нормально Ну и
1372. 1:02:40здесь кстати позволите на его немножко
1373. 1:02:42там поть так что нам тут не хватает
1374. 1:02:45Давайте вот расставлять Ну вот здесь вот
1375. 1:02:48наверху я пока расставляю я здесь не
1376. 1:02:51парюсь сейчас ну здесь можно было бы
1377. 1:02:54конечно нарисовать там Вот эту вот штуку
1378. 1:02:56от Айфона здесь вот снизу посмотреть
1379. 1:02:59какого размера будет у меня экран вообще
1380. 1:03:02в принципе м вот но пока можно не
1381. 1:03:06париться вот здесь вот кстати вместо вот
1382. 1:03:07этой вот
1383. 1:03:09истории вы могли сделать вот такого рода
1384. 1:03:13слайдер если у вас будет проблема что
1385. 1:03:16люди не видят э ну что там есть ещё
1386. 1:03:20изображение значит Придётся делать Ну
1387. 1:03:23слайдер более Понятный
1388. 1:03:26то есть ставить его прямо вот
1389. 1:03:27сюда то есть и и показывает как эта
1390. 1:03:31штука листается то есть но пока у нас
1391. 1:03:33такой проблемы нету Ну мы же не выдува
1392. 1:03:35их с головы мы всё это делаем ещё Кстати
1393. 1:03:39у вот этой вот этой картинке должно быть
1394. 1:03:42какое-то определённое соотношение
1395. 1:03:45сторон Ну не хочется чтобы оно было
1396. 1:03:48случайно Какие бывают соотношение
1397. 1:03:51Рон То есть к нам здесь я боюсь кдт не
1398. 1:03:54потто
1399. 1:03:56тогда будет отнимать очень большое
1400. 1:03:59количество места а может и не будет так
1401. 1:04:02вот это вот квадрат Какие ещё есть
1402. 1:04:04соотношения сторон 2 к 3 3 к че ну в
1403. 1:04:08нашем случае 3 КД и 4 К3 как это
1404. 1:04:11проверить вот берёте просто такой
1405. 1:04:13квадратик 300х 200 и ну как бы делаете У
1406. 1:04:17него вот здесь вот замочек и просто
1407. 1:04:18ставите ему такую же ширину как у нас
1408. 1:04:20есть то есть 375 на 250 Ну мне кажется
1409. 1:04:24немножко маловато
1410. 1:04:26Давайте попробуем вот такую ещё 400 на
1411. 1:04:30300
1412. 1:04:31замочек 375 вот эту Ну вот эти вот дроби
1413. 1:04:36Все стираем за один пиксель нас никто не
1414. 1:04:39побьёт Вот и я бы выбрал что-то вот из
1415. 1:04:42этого ну то есть либо квадрат либо Ну
1416. 1:04:45либо вот этот скорее всего то есть
1417. 1:04:47случайные размеры Ну они как бы лучше
1418. 1:04:51чтобы это было Хоть какой-то пропорции
1419. 1:04:55привязано
1420. 1:04:56то есть так будет красивее так здесь 16
1421. 1:04:59Здесь 16 я попробую сверстать с
1422. 1:05:01квадратом вдруг мне хватит места всё
1423. 1:05:03равно у меня текст вниз уходит люблю
1424. 1:05:05большие картинки Ну и что и Давайте уж
1425. 1:05:08Ну как бы костан вчерашнюю лекцию
1426. 1:05:11построим здесь эту нашу линеечка базовую
1427. 1:05:13для тех кто не был вот я считаю наш
1428. 1:05:16базовый отступ единичка он у нас здесь
1429. 1:05:20получился аж 13 я наверное для простоты
1430. 1:05:24счёта сделаю его чётным пускай будет 14
1431. 1:05:27тогда вот этот будет 7
1432. 1:05:31половинка
1433. 1:05:3371 здесь
1434. 1:05:35полтора потом два Потом
1435. 1:05:39три вот потом
1436. 1:05:42пять вот вот это моя Визуальная линейка
1437. 1:05:45так та же самая штука которую я вам
1438. 1:05:46давал Просто теперь я ещё рассказываю
1439. 1:05:49как я как е строить чтоб вы не просто
1440. 1:05:52пользовались готовой
1441. 1:05:54штукой всё и этими отступами пользуемся
1442. 1:05:57дальше чтобы работать то есть нам
1443. 1:05:59надо что нам надо сделать у нас здесь
1444. 1:06:02какой-то гигантский абзацный отступ
1445. 1:06:04кстати Ну огромный обза сный отступ
1446. 1:06:08Давайте мы его сделаем ну такого же
1447. 1:06:11размера Как наш Ну как одна строка потом
1448. 1:06:14поправлю Вот эту вот
1449. 1:06:16историю так и начну Я наверное с
1450. 1:06:19каких-то маленьких
1451. 1:06:21элементов сначала соберу группы что я
1452. 1:06:24хочу в группу
1453. 1:06:26вот с группами тут са самый большой
1454. 1:06:28прикол был вот сейчас начинается сложная
1455. 1:06:31тема у нас ну в большом количестве
1456. 1:06:35макетов вот это вот тоже практически у
1457. 1:06:37всех есть проблема
1458. 1:06:40с пятнами смотрите сечас сейчас будет
1459. 1:06:43сложно вот
1460. 1:06:45внимательно проблема с
1461. 1:06:47пятнами я вам сейчас буду
1462. 1:06:51покае макетов
1463. 1:06:55э кусо макета мне
1464. 1:06:57сказали что вы видите Ну типа макеты
1465. 1:07:01сразу скажу что они Ну что там есть
1466. 1:07:04проблема сейчас я ещё отвечу на вопрос
1467. 1:07:07подчёркивание тоже стиль Ну
1468. 1:07:09подчёркивание как бы стиль но стиль
1469. 1:07:11текста тот же самый Какие размеры и для
1470. 1:07:14вертикальных СТ брать и вертикальных и
1471. 1:07:16горизонтальных так линейка универсальная
1472. 1:07:19истро каждый под размер в проекте
1473. 1:07:22нука
1474. 1:07:24зави вашего базового текста Вот который
1475. 1:07:27я построил вот здесь ну то есть если у
1476. 1:07:29вас в проекте воздушный текст то тогда
1477. 1:07:32Ну вам лучше под него посмотреть но в
1478. 1:07:34целом так как размер шрифтов у всех
1479. 1:07:36практически одинаковый и интерлиньяж
1480. 1:07:38тоже то у вас и сетка будет очень
1481. 1:07:41похожая Ну то есть это нужно для того
1482. 1:07:44чтобы ваш вот этот вот отступ который у
1483. 1:07:47вас вот здесь вот между текстом
1484. 1:07:49затесался чтобы он повторялся в проекте
1485. 1:07:53в других местах это и делает ваш дизайн
1486. 1:07:56как бы
1487. 1:07:57более консистентной вот даже если вы все
1488. 1:08:01одну и ту же линейку будете использовать
1489. 1:08:02это всё равно будет лучше чем если
1490. 1:08:04никакую А если вы будете строить ещё под
1491. 1:08:06свой проект Ну такую визуальную линейку
1492. 1:08:09и потом подгонять это всё под
1493. 1:08:11общепринятую то это вообще цены вам не
1494. 1:08:14будет
1495. 1:08:15так
1496. 1:08:17поехали Теперь напишите мне пожалуйста
1497. 1:08:20ответы Проходили ли вы уже потому что
1498. 1:08:23блин там Саша открывает материал
1499. 1:08:25Ну теперь я теперь не знаю из за это
1500. 1:08:28смотрели ли вы всё Или ещё не всё лекцию
1501. 1:08:31про
1502. 1:08:33движение воздух и напряжение по-моему
1503. 1:08:36Сейчас я найду это тот материал Да вот
1504. 1:08:39такую вот штуку видели вот такие вот
1505. 1:08:42вещи молодцы Отлично вот смотрите
1506. 1:08:46смотрите и сегодня вам ещё расскажу и
1507. 1:08:49потом посмотрите вот сегодня будет
1508. 1:08:51практическая история про Вот про
1509. 1:08:56про вот этот вот слайд короче для тех
1510. 1:08:59кто не смотрел я вам сейчас поясню такую
1511. 1:09:01штуку То есть когда вы располагаете
1512. 1:09:04элементы Ну то есть вот мы рисуем с вами
1513. 1:09:06да на экране У нас есть там текст У нас
1514. 1:09:10есть какие-то картинки элементы иконки и
1515. 1:09:14прочее Если вы на вот эти все картинки
1516. 1:09:19Посмотрите Ну вот любой макет видите
1517. 1:09:25че текста каждый блок Каждая фотография
1518. 1:09:28она представляет собой ну по сути
1519. 1:09:31какое-то пятно Ну то есть какой-то
1520. 1:09:34прямоугольник или какую-то линию и вот
1521. 1:09:38эти вот Вещи все вместе они образуют Ну
1522. 1:09:41вот допустим вот мы поставили много
1523. 1:09:43текста здесь вместе и они образовали
1524. 1:09:45пятно вот здесь вот здесь вот тоже пятно
1525. 1:09:48определённой формы и вот э форма
1526. 1:09:57они эти пятна они вот эти пятна
1527. 1:10:01они подчиняются тем же самым законом Ну
1528. 1:10:05законом рисования по сути законом
1529. 1:10:07живописи То есть когда вы делаете
1530. 1:10:09какой-то интерфейс воли неволи даже
1531. 1:10:11этого не осознавая вы создаёте
1532. 1:10:14определённые движения вот Ну почему-то
1533. 1:10:18кстати людям проще движение по крайне
1534. 1:10:20ремне знаю как вам проще понимать
1535. 1:10:22движение
1536. 1:10:24кода рион Ну то есть вот Представьте Да
1537. 1:10:27что у нас есть какая-то там волна
1538. 1:10:30которая движется там слева направо и по
1539. 1:10:32сути Вот она у нас идёт вот так потом
1540. 1:10:35вот так то есть у нас то большой такой
1541. 1:10:38пик то маленький то большой и так далее
1542. 1:10:41То есть вот эта вот штука это как бы
1543. 1:10:43получается
1544. 1:10:44перепады Ну вот этого контраста То есть
1545. 1:10:46вы видели маленькое пятно потом большое
1546. 1:10:48пятно потом опять маленькое потом опять
1547. 1:10:50большое И вот вот это вот как раз
1548. 1:10:53изменение то что вы смотрите на
1549. 1:10:55боо потом на маленькое оно Дат движение
1550. 1:10:58динамическое Вот видите эту штуку А если
1551. 1:11:01у вас идт
1552. 1:11:04постоянно повторение одного и того же Ну
1553. 1:11:07вот допустим я возьму вот этот кусочек
1554. 1:11:09Да и буду его повторять одинаковый много
1555. 1:11:13раз то вы никакого движения здесь уже ну
1556. 1:11:17как бы особо не увидите потому что вот
1557. 1:11:20это статическая композиция то есть
1558. 1:11:22видите повторение одного и того же
1559. 1:11:25называется метр Ну то есть в рисовании а
1560. 1:11:28повторение Ну как бы а а
1561. 1:11:31различные Ну изменение параметров по
1562. 1:11:34цвету по размеру по интервалу то есть
1563. 1:11:37вот это это называется ритм то есть метр
1564. 1:11:40- это статическая композиция а ритм -
1565. 1:11:42это динамическая композиция и вы когда
1566. 1:11:45рисуете вы создаёте своим дизайном и
1567. 1:11:48статические композиции и динамические
1568. 1:11:50композиции нет ничего плохого в том
1569. 1:11:52чтобы использовать там только те или
1570. 1:11:54только
1571. 1:11:55эти другое дело что интерфейс он
1572. 1:11:59старается прийти к такому как бы ну
1573. 1:12:03привести привести Вот эту вот картинку
1574. 1:12:06перед вами к балансу Потому что когда у
1575. 1:12:09вас когда у вас картинка метрическая Ну
1576. 1:12:12то есть статическая то тогда у вас
1577. 1:12:14особых проблем с вот этим восприятием
1578. 1:12:16нету ничего не скачет лишний раз но так
1579. 1:12:18как мы живём в мире победившего
1580. 1:12:20швейцарского дизайна и всё Ну как бы всё
1581. 1:12:23выравнивается налево всё такое рваное
1582. 1:12:26Там и так далее то вот этот вот Ну вот
1583. 1:12:29этот ритмический рисунок вашего
1584. 1:12:31интерфейса Вы тоже
1585. 1:12:33должны успокаивать и как его Вот его
1586. 1:12:37успокаивать А здесь У вас есть допустим
1587. 1:12:40вот такая штука Как простая динамика Да
1588. 1:12:42ну то есть от больш от маленького до
1589. 1:12:46Большого Ну то есть она спокойна А
1590. 1:12:49бывает динамика рвана когда от
1591. 1:12:50маленького к большому к маленькому опять
1592. 1:12:52к большому к супер большому к супер
1593. 1:12:54маленькому или то же самое с цветами там
1594. 1:12:57типа от яркого к бледному потом к супер
1595. 1:13:00тёмному Потом к какому-то супер светлому
1596. 1:13:03и то есть вот когда у вас постоянно в
1597. 1:13:06рамках одного маленького блочка меняется
1598. 1:13:09вот этот вот рисунок Э ритмический Ваш
1599. 1:13:12Ну часто А и он не простой формы как вот
1600. 1:13:16здесь допустим там от маленького к
1601. 1:13:18большому от цвето к тёмным А когда он
1602. 1:13:20постоянно меняется вот тогда дизайн
1603. 1:13:23выглядит грязным
1604. 1:13:25И теперь мы переходим обратно к примерам
1605. 1:13:28вот эта лекция вот эта лекция Кстати она
1606. 1:13:30была экспериментальной на Первом потоке
1607. 1:13:33вот Ну никто это никто это короче не
1608. 1:13:36объясняет вообще вот я пытаюсь пытаюсь
1609. 1:13:40ва вам объяснить эту штуку Вот надеюсь
1610. 1:13:43мы сегодня постигнем как бы эту истину
1611. 1:13:46вот смотрите я вам заготовил целую кучу
1612. 1:13:49примеров на эту тему с
1613. 1:13:52пятнами давайте мы с вами посмотрим на
1614. 1:13:55вот эти пятна я Вам лучше сам покажу вот
1615. 1:13:59у нас есть два вида динамик Ну то есть
1616. 1:14:01ВС Вот это ВС что вы видите это всё
1617. 1:14:03динамические композиции Ну то есть есть
1618. 1:14:06у нас два вида динамики вот Представьте
1619. 1:14:09Да
1620. 1:14:10[музыка]
1621. 1:14:11спокойная и супер беспокойны Ну то есть
1622. 1:14:15где большое маленькое Там и так далее
1623. 1:14:17вот ну всё время какая-то типа там
1624. 1:14:18странная
1625. 1:14:19штук вот здесь У вас есть большое пятно
1626. 1:14:25вам буду просто рядом
1627. 1:14:27рисовать вот эту штуку на Дракуле тоже
1628. 1:14:29покажу Не
1629. 1:14:32забуду вот потом Ну вот это просто самое
1630. 1:14:34рвано такой который нашёл вот здесь у
1631. 1:14:37вас идёт большое пятно яркое потом идёт
1632. 1:14:42маленькая но очень яркая точка Вот такая
1633. 1:14:44Видите вот эта штука потом ещё одна
1634. 1:14:47такая яркая точка потом опять какая-то
1635. 1:14:50Длинная тонкая Вот такая колбаса
1636. 1:14:55Вот это было жир Да вот это тонкая
1637. 1:14:57колбаса и потом идт вот такой вот
1638. 1:15:00большой
1639. 1:15:02прямоугольник и получается
1640. 1:15:04что из-за того
1641. 1:15:06что как бы все эти элементы они
1642. 1:15:10находятся друг от друга плюс-минус на
1643. 1:15:12одинаковом расстоянии видите да то есть
1644. 1:15:16они здесь ну как бы равномерно размазаны
1645. 1:15:20по макету Ну то есть вот эти вот штуки
1646. 1:15:23ну тут вот плюс-минус Похоже да то наш
1647. 1:15:25мозг Это Воспринимает как как единую
1648. 1:15:27группу объектов То есть он говорит Вот
1649. 1:15:29это всё это одна группа Ну они же все на
1650. 1:15:32на одном расстоянии находятся значит они
1651. 1:15:34вместе Ну то есть между ними одинаковые
1652. 1:15:36как бы пространстве отношения и внутри
1653. 1:15:39вот этой вот единой группы которую мы
1654. 1:15:41воспринимаем внутри вот этого маленького
1655. 1:15:43как бы квадратика появляется бешеная
1656. 1:15:46динамика ну типа то туда то сюда то
1657. 1:15:49большое то маленькое то цветное торое то
1658. 1:15:52бледное то жирное то ЧР то серое Ну
1659. 1:15:55короче вот эта вот Тема вот то что оно
1660. 1:15:58перескакивает вот когда вам говорят не
1661. 1:16:01надо много разных стилей текста рядом
1662. 1:16:03ставить ни у кого же не возникает
1663. 1:16:05вопроса Почему нельзя это делать Вот Ну
1664. 1:16:08вот вот поэтому то есть потому что пятно
1665. 1:16:11становится неоднородным и на него
1666. 1:16:13смотреть становится Ну сложнее чем на
1667. 1:16:16пятно однородным так если вы живы
1668. 1:16:19Напишите пожалуйста
1669. 1:16:23плюс потому что на этом месте люди
1670. 1:16:26умирают очень часто Да спасибо да ну
1671. 1:16:29просто час 46 перерыва не было как бы
1672. 1:16:31можем сделать перерыв чтобы вы пописали
1673. 1:16:33там
1674. 1:16:35и можем дальше двигаться да давайте
1675. 1:16:37перерыв кстати сделаем реально на на это
1676. 1:16:40на 5 минут хотя бы вы же понимаете Я
1677. 1:16:42могу об этом часами
1678. 1:16:45разговаривать да давайте давайте на 5
1679. 1:16:48минуточка сходим на перерыв и и вернёмся
1680. 1:16:51Так Кирилл в сних много начертаний Ну
1681. 1:16:55потому что там когда тебе нужно в одном
1682. 1:16:57месте разместить целую кучу
1683. 1:17:01контента Ну тебе придётся использовать
1684. 1:17:03разные начертания чтобы друг от друга их
1685. 1:17:06отделять хоть как-то Но вот нарисовать
1686. 1:17:09нормальный снит где у себя пять-шесть
1687. 1:17:11разных строчек подряд Ну то есть разных
1688. 1:17:14по смыслу это большое искусство на самом
1689. 1:17:16деле Ладно вернёмся через 5 минут Да
1690. 1:17:18пока пока ь
1691. 1:17:20во э
1692. 1:17:25активно
1693. 1:17:26преподавателей потому что невозможно
1694. 1:17:29знать всё абсолютно идеально Ну то есть
1695. 1:17:32моя основная специализация как
1696. 1:17:35преподавателя - это обучение визуал Ну
1697. 1:17:37то есть мне очень нравится эта история
1698. 1:17:39То есть я как дизайнер умею делать и
1699. 1:17:41кнопки и исследования проводить Но вот
1700. 1:17:44здесь мой как бы основной
1701. 1:17:46исследовательский интерес находится и
1702. 1:17:48короче самое сложное в поиске
1703. 1:17:50преподавателей это то что ты начинаешь
1704. 1:17:52короче общаться С каким-то крутым
1705. 1:17:54чуваком
1706. 1:17:55или или там с какой-нибудь крутой
1707. 1:17:57девушкой не обязательно чуваком Вот и
1708. 1:17:58начинаешь как бы вот там клини подбивать
1709. 1:18:02с точки зрения типа А вот а как вот мы
1710. 1:18:06возьмём и обучим людей там не знаю
1711. 1:18:09делать красивые отступы внутри кнопок и
1712. 1:18:13люди Они на таких вопросах Короче они
1713. 1:18:15начинают съезжать потому что я говорю А
1714. 1:18:18как ты делаешь красивый отступ она такая
1715. 1:18:20ну я 10 лет работаю поэтому я делаю
1716. 1:18:21красивый отступ в кнопках Я говорю ты же
1717. 1:18:24делаеш одни те отступ во всех кнопках
1718. 1:18:26правильно типа она такая ну да я говорю
1719. 1:18:29а вот а Вот в такой ситуации ты как
1720. 1:18:31действуешь она такай вот так вот де а в
1721. 1:18:33такой ситуации вот так действуешь
1722. 1:18:34говорит Ну я вот так делаю Я говорю а на
1723. 1:18:36чём основана твоя вот это вот что ты в
1724. 1:18:39одной ситуации так действуешь а в другой
1725. 1:18:41Так я говорю есть же какие-то
1726. 1:18:43закономерности и люди Короче они
1727. 1:18:45начинают понимать в этот момент что
1728. 1:18:47закономерности есть но они не понимают
1729. 1:18:49Почему они так делают И вот короче самое
1730. 1:18:52сложное наверное во всём
1731. 1:18:55преподавании это пойти дальше то есть
1732. 1:18:58вот есть уровень когда вам преподаватель
1733. 1:19:01говорит просто почувствуйте
1734. 1:19:03как ну как красиво и сделайте как
1735. 1:19:06красиво Это плохо он вообще не осознаёт
1736. 1:19:08то есть никаких закономерностей потом
1737. 1:19:11люди начинают переходит на следующий
1738. 1:19:13уровень это уровень вот ководство
1739. 1:19:14Лебедева да типа список из 878 Советов
1740. 1:19:19То есть у меня есть ну как бы темы в
1741. 1:19:22которых я нахожусь на уровне совета это
1742. 1:19:25значит То что я уже какой-то свой опыт
1743. 1:19:28который у меня был смог обобщить в
1744. 1:19:31какие-то Ну типа в набор каких-то вещей
1745. 1:19:34которые
1746. 1:19:35надо ну которые соблюдая соблюдая вот
1747. 1:19:38этот вот набор правил и в принципе оно
1748. 1:19:40всё будет нормально работать и следующий
1749. 1:19:44уровень как бы после Советов до который
1750. 1:19:46никто не хочет дальше заморачиваться Ну
1751. 1:19:49потому что если прочитаете книжку но по
1752. 1:19:52графику сборник Советов руководство
1753. 1:19:55Лебедева сборник совета и только как бы
1754. 1:19:59следующий уровень на который практически
1755. 1:20:01никто не попадает - это система вот
1756. 1:20:03когда
1757. 1:20:04м появляется Вот все вот эти советы
1758. 1:20:07собираются в систему то некоторые советы
1759. 1:20:09они просто сгорают потому что допустим
1760. 1:20:13Если вы поймёте как работают пятна то
1761. 1:20:16вам не нужно будет заучивать 300 видов
1762. 1:20:20сниппетов которые можно нарисовать и и
1763. 1:20:23делать насмотренность Ну как бы на все
1764. 1:20:24виды снипет потому что вы просто будете
1765. 1:20:27понимать что если я вот текст вот так
1766. 1:20:30вот поставлю Ну и у меня в середине
1767. 1:20:32будет серый или в середине будет синий
1768. 1:20:34то скорее всего ну это будет пятно
1769. 1:20:36нарушать и вы уже как-то будете более Ну
1770. 1:20:40понимая как они строятся просто меньше
1771. 1:20:43ошибок совершать и и быстрее учиться это
1772. 1:20:47делать Вот с отступами вот эта вот штука
1773. 1:20:49с визуальной линейкой Ну то есть я шёл к
1774. 1:20:52ней 2 года к этой простой вещи То есть
1775. 1:20:56это действительно лекция которая
1776. 1:20:57занимает 40 минут и у людей практически
1777. 1:20:59исчезли проблемы с отступами до этого ну
1778. 1:21:02Вы не представляете Сколько времени мы
1779. 1:21:04тратили на отступ это просто
1780. 1:21:06кошмар
1781. 1:21:08вот так
1782. 1:21:11читаю работу разбирались на кусочке
1783. 1:21:14учиться явно есть чему но года два назад
1784. 1:21:16меня просили в яндекспрактикум в
1785. 1:21:17качестве
1786. 1:21:18препода типа ну там да там ну типа ну ко
1787. 1:21:21мне приходили из Яндекс практикума
1788. 1:21:23ругаться я ругал яндекспрактикум раньше
1789. 1:21:26приходили ко мне ругать меня типа мы там
1790. 1:21:28работаем у вас тут шарага у них там
1791. 1:21:30круто вот Ну ещё кстати преподаватели
1792. 1:21:35уже 2 минуты сейчас закончу мысль ещё
1793. 1:21:38кстати преподаватели часто они в
1794. 1:21:41такую в такую тему играют они такие Ну
1795. 1:21:44вот у вас курс для новичков поэтому мы
1796. 1:21:46не будем крутую инфу
1797. 1:21:48давать Я вообще не понимаю ну типа
1798. 1:21:51почему вот сегодня тоже разговаривал там
1799. 1:21:54про Дин систе я говорю надо написать про
1800. 1:21:56то Ну про то что когда кнопки
1801. 1:21:59проектируется надо фронтенде написать
1802. 1:22:03что ну что в кнопке даже если ла нету
1803. 1:22:07Сверху его всё равно надо подписать
1804. 1:22:10текстом какой он будет чтобы они его
1805. 1:22:12сверстать невидимый Потому что люди
1806. 1:22:14которые ничего не видят и пользуются
1807. 1:22:16Voice им Ну как бы программа прочитает
1808. 1:22:20название этого поля даже если вы в
1809. 1:22:22дизайне этого названия сверху смотрели
1810. 1:22:25Она говорит ну это для сеньоров на хера
1811. 1:22:27это рассказывать я говорю Ну в смысле на
1812. 1:22:32херасков
1813. 1:22:34информация чтобы её не давать ну короче
1814. 1:22:37понимаете да то есть они сами
1815. 1:22:39ограничивают уровень знаний который Вам
1816. 1:22:41выдают вот я Я Ну типа у нас новый
1817. 1:22:44продуктовый блог сейчас пишется
1818. 1:22:46А типа там придёт придёт чел который в
1819. 1:22:50100 раз лучше чем я разбирается в
1820. 1:22:51продукте Вот и расскажет вам ещё больше
1821. 1:22:53всяких вещей мы это всё Ну всё это
1822. 1:22:57пошарить ну что там курс для новичков Я
1823. 1:22:59говорю не жадничай типа я говорю и не
1824. 1:23:01жалей никого Ну типа есть сложные вещи
1825. 1:23:04очень сложные и их надо объяснять Ну то
1826. 1:23:08есть их надо не просто объяснять и надо
1827. 1:23:10объяснять хорошо и Понятно Пускай лучше
1828. 1:23:13вы будете Ну вы будете страдать у меня
1829. 1:23:15на уроках но потом вам будет легко на
1830. 1:23:17работе Ну то есть короче я ну я через
1831. 1:23:21такую как бы логику иду да да жоп вам
1832. 1:23:27инфу чтобы Вы снова из интернета читали
1833. 1:23:29короче статей просто в удобоваримый
1834. 1:23:31форме в учебнике Яндекс практику вот
1835. 1:23:34Ладно поехали
1836. 1:23:35дальше
1837. 1:23:37так демонстрация
1838. 1:23:41демонстрация
1839. 1:23:44короче вернёмся к нашим пятнышка то есть
1840. 1:23:48раз у нас вот эта штука в одной группе
1841. 1:23:50Ну то есть ну во-первых что бы я сделал
1842. 1:23:52я бы для того чтобы
1843. 1:23:55Ну как-то работать с таким количеством
1844. 1:23:58типографики Ну даже вот давайте я сес не
1845. 1:24:01буду менять стили а а буду Ну не буду
1846. 1:24:03менять этот шрифт не буду менять стили а
1847. 1:24:05просто попробую починить это с помощью
1848. 1:24:07отступов Ну как минимум мне надо
1849. 1:24:10определиться что у меня к чему
1850. 1:24:14относится то есть Возможно я бы
1851. 1:24:16здесь убил
1852. 1:24:25вот этих вот пятен Ну то есть от чего бы
1853. 1:24:27я мог избавиться вот допустим у меня
1854. 1:24:28есть Over вот эти Ну табы Кстати они
1855. 1:24:31очень часто используются как заголовки к
1856. 1:24:35контенту То есть если мне нужно вот сюда
1857. 1:24:37поставить вот этот обязательно Ну то
1858. 1:24:39есть Я так понял что это есть Ну это
1859. 1:24:41относится к ауту Я бы наверное либо вот
1860. 1:24:44так вот сделал либо здесь поставил
1861. 1:24:49типа и от одной точки бы я тогда
1862. 1:24:51избавился Почему я хочу от неё
1863. 1:24:53избавиться
1864. 1:24:54потому что у меня здесь идёт перепад
1865. 1:24:58размеров смотрите маленький шрифт
1866. 1:25:01большой шрифт маленький шрифт большой
1867. 1:25:05шрифт Ну то есть вот из-за того что то
1868. 1:25:08маленький то большой то маленький то
1869. 1:25:09большой то маленький то большой Вот они
1870. 1:25:12сразу приобретают как бы ну такую
1871. 1:25:15неаккуратность вот даже смотрите вот
1872. 1:25:17если бы я короче вот эти штуки местами
1873. 1:25:21поменял Ну то есть мы тут смотрим сейчас
1874. 1:25:23ну может быть сложно потому что мы
1875. 1:25:25смотрим сразу на три параметра как бы на
1876. 1:25:28размер вот этого пятна Ну то есть в
1877. 1:25:30ширину на как бы его вот эту вот темноту
1878. 1:25:34ну на на два параметра Ладно на размер
1879. 1:25:36короче и и на яркость вот так вот это
1880. 1:25:40уже даже могло быть немножко получше
1881. 1:25:43потому что у нас вот это Чёрное пятно
1882. 1:25:46которое есть сверху оно начинает
1883. 1:25:48собираться в что-то одно а вот это
1884. 1:25:50собирается во что-то другое видите в
1885. 1:25:52большое серое какое-то пятно то есть но
1886. 1:25:55но это я вам сейчас без логики просто
1887. 1:25:58набрасываются то есть видите А так оно
1888. 1:26:01как бы прерывает То есть у вас есть вот
1889. 1:26:03Большая чёрная штука ещё одна большая
1890. 1:26:05чёрная штука и её вот посередине
1891. 1:26:06разрезает там вот это вот
1892. 1:26:09Зелёная как бы история то есть Поэтому
1893. 1:26:12если мы вот от этого избавимся И просто
1894. 1:26:14вот даже поставим вот это вот
1895. 1:26:18так вот смотрите у нас уже будет
1896. 1:26:21Аккуратнее это пятно
1897. 1:26:25видите я избавился как бы от перепада
1898. 1:26:27который был вот здесь в середине То есть
1899. 1:26:29у меня здесь есть большая жирная чёрная
1900. 1:26:31точка И ещё одна большая серая теперь
1901. 1:26:34вот и это как бы там ну более-менее
1902. 1:26:37выглядит Дальше я бы работал с вот этим
1903. 1:26:40блоком Ну то есть Может быть я это
1904. 1:26:42как-то местами поменял чтобы у меня вот
1905. 1:26:43это стало ещё серее как бы Всё
1906. 1:26:46[музыка]
1907. 1:26:48вместе Ну то есть видите это становится
1908. 1:26:50ещё более серым пятном то есть потому
1909. 1:26:52что сейчас здесь тоже между Серым и
1910. 1:26:55Серым есть посередине Вот такое
1911. 1:26:58прерывание Чёрное вот этого вот
1912. 1:27:01пятна Вот и смотрите просто переставляя
1913. 1:27:04местами блоки оно исчезает То есть я вам
1914. 1:27:06сейчас не говорю про то есть видите в
1915. 1:27:08чём сложность в том что есть другие слои
1916. 1:27:10есть иерархия что надо выше поставить
1917. 1:27:12что ниже А мы здесь на другом уровне
1918. 1:27:14немножко Вот на уровне Ну простых фигур
1919. 1:27:17как бы сейчас
1920. 1:27:18работаем то есть вот и ещ важно Вот что
1921. 1:27:21вот здесь вот изменилось я вот эти групы
1922. 1:27:23оче
1923. 1:27:25то есть вот смотрите е раз как здесь
1924. 1:27:29было здесь Было так то что вот заголовок
1925. 1:27:33он как бы не сюда не сюда он был оторван
1926. 1:27:37он был отдельной группой вот эта штука
1927. 1:27:39не сюда не сюда она тоже была оторвана
1928. 1:27:42Она была отдельной группой то есть и
1929. 1:27:44плюс ещё ну здесь ещё вот такая вот
1930. 1:27:46динамика есть то что типа дыра
1931. 1:27:55убирая убирая вот эти прерывания внутри
1932. 1:27:59пятна Ну то есть устраняя их ставя
1933. 1:28:02похожие рядом с похожими вещи мы как бы
1934. 1:28:04правим вот эту
1935. 1:28:06историю так не знаю открывать ли пока
1936. 1:28:09сообщение то отвлеку лучше посмотрю пока
1937. 1:28:11ещё на вампирском замке Вот про
1938. 1:28:13вампирский замок вот ну как бы тоже
1939. 1:28:17самое ров то есть видите у вас есть два
1940. 1:28:22активных пятна
1941. 1:28:25вот первое вот второе и посередине есть
1942. 1:28:30бледная штука То есть получается Какой
1943. 1:28:32рисунок ритмический у вас большая такая
1944. 1:28:36яркая блямба потом маленькая серая
1945. 1:28:38невозвратная штука потом опять Вот такая
1946. 1:28:40яркая блямба тоже длинная и вот смотрите
1947. 1:28:44ну э динамика получается от большого к
1948. 1:28:47маленькому и опять к большому Ну то есть
1949. 1:28:49она двойная вот смотрите Я просто опять
1950. 1:28:52вам делаю меняю места вот эти две
1951. 1:28:57вещи и у вас пятно Ну и сама динамика
1952. 1:29:00становится равномерной видите от очень
1953. 1:29:02большой короче вот такой штуки она
1954. 1:29:05падает падает падает падает и становится
1955. 1:29:07Ну как бы простой
1956. 1:29:09динамикой то есть ещё раз да вот это по
1957. 1:29:13горизонтали вам сейчас покажу Ну то есть
1958. 1:29:15вот это вот это сложно а вот просто
1959. 1:29:18горка Ну как бы всего всего от большого
1960. 1:29:20к меньшему это простая понятно Напишите
1961. 1:29:24в чат если Понятно Так я после карточки
1962. 1:29:27с машинкой начала интуитивно
1963. 1:29:28использовать теру размеров и отступов
1964. 1:29:31м Если вам что-то не нравится смотрите
1965. 1:29:35брум Короче вы увидите Ну вы можете
1966. 1:29:38увидеть такие проблемы которыми глазами
1967. 1:29:39не видно потому что вы глазами
1968. 1:29:42фокусируется на деталях а здесь вы
1969. 1:29:44фокусируется не на деталях А на пятнах
1970. 1:29:47по смыслу не очень получается Ну может и
1971. 1:29:49по смыслу не очень получается ваша
1972. 1:29:51задача как дизайнеров - это собрать так
1973. 1:29:54чтобы и по смыслу и по визуальной
1974. 1:29:56иерархии и по бизнес иерархии и по пятну
1975. 1:30:00было красиво в этом сложность Работа
1976. 1:30:02дизайнера Тото Что вам надо сочетать
1977. 1:30:04огромное количество требований То есть у
1978. 1:30:06вас должно быть Ну много всего понимаете
1979. 1:30:10То есть я вот именно то что я вам
1980. 1:30:12показываю это
1981. 1:30:14короче ну работа вот с этими дырами
1982. 1:30:16пятнами и прочим то есть вот смотрите
1983. 1:30:18ещё одна ещё один Прикол Да Вот я вот
1984. 1:30:21этот текст сейчас наверх Перенесу
1985. 1:30:24и тоже будет комфортный дизайн потому
1986. 1:30:27что здесь есть большое пятно и здесь
1987. 1:30:29типа просто маленькая такая штука Да
1988. 1:30:31здесь есть длинная середина Ну как
1989. 1:30:34большое пятно но в целом вот это как бы
1990. 1:30:35однородная хрень она ничем не
1991. 1:30:38прерывается А вот это просто к нему
1992. 1:30:40примыкает и что разве плохо выглядит Ну
1993. 1:30:43по-моему нормально Ну типа можно тут с
1994. 1:30:45отступами поработать и так
1995. 1:30:48далее
1996. 1:30:52вот при что вы можете не бр использовать
1997. 1:30:55Вы можете глаза расфокусировать
1998. 1:30:57и смотреть тоже самое так возвращаю всё
1999. 1:31:02обратно чтобы у меня были плохие примеры
2000. 1:31:05Мне нужны плохие примеры так цель Ну да
2001. 1:31:09то есть дизайн он короче стремится к
2002. 1:31:11однородности и статично Ну поначалу
2003. 1:31:13потом вы в какой-то момент когда как бы
2004. 1:31:15освоите все эти приёмы и будете ими
2005. 1:31:18интуитивно пользоваться вы сможете с
2006. 1:31:21помою динамики даже людей вз место
2007. 1:31:24направлять Ну то есть при вёрстке
2008. 1:31:27конечно в веб-дизайне это намного проще
2009. 1:31:29делать Ну потому что там много места на
2010. 1:31:31десктопе там туда-сюда
2011. 1:31:33вот но но в целом потом это Ире Ну вот
2012. 1:31:37эта ломаная динамика она может как
2013. 1:31:38средство выразительности использоваться
2014. 1:31:40То есть это уже ну как бы другой уровень
2015. 1:31:43совершенно Вот здесь догадаетесь
2016. 1:31:47Да всё тоже самое видите про вредине
2017. 1:31:52вот петно Ну то есть как лечить либо
2018. 1:31:56делать чёрным этот текст это к сожалению
2019. 1:31:58скриншот я сделаю либо делать чёрным
2020. 1:32:00этот текст раздвигать это всё чтобы это
2021. 1:32:04не было одним пятном А чтобы это было
2022. 1:32:05Там два независимых пятна Ну то есть
2023. 1:32:08короче Когда Вы начинаете смешивать
2024. 1:32:10много разнородных стилей которые разные
2025. 1:32:13по весу с разными цветами вот с серыми
2026. 1:32:17вот этими прога в середине в одну группу
2027. 1:32:19сплите то чаще всего вы здесь накося
2028. 1:32:24вчерашний допустим макет по сним вот
2029. 1:32:27Точнее я вот по сним смотрел свои
2030. 1:32:30примеры вчера Ну вот допустим как вот
2031. 1:32:33это работает почему вот это работает
2032. 1:32:36Почему здесь можно в середину воткнуть
2033. 1:32:38синюю штуку потому что они отделили её
2034. 1:32:41они сделали вот это вот одно пятно Вот
2035. 1:32:45это типа отдельное и вот это отдельно
2036. 1:32:47Хотя если вот эти два склеить тоже будет
2037. 1:32:51прикольно вот ВиДи
2038. 1:32:54то есть вот это как бы от тёмного к
2039. 1:32:55синему Вот это от тёмного к синему и ещ
2040. 1:32:57здесь ну прикол в том что оно кастует
2041. 1:33:00как бы повторение то есть вот хочу вам
2042. 1:33:04блин реально сегодня на эту тему как
2043. 1:33:06прёт меня хочется нормально её объяснить
2044. 1:33:10времени достаточно прошло видимо новые
2045. 1:33:12объяснение приходят в голову то есть
2046. 1:33:15видите Короче они у них тут композиция
2047. 1:33:17динамическая но они пытаются вам продать
2048. 1:33:19что как будто это ритм типа жирное пятно
2049. 1:33:22плю си
2050. 1:33:24но пятно плю синяя точка по факту текст
2051. 1:33:28разный но он пытается сделать вид что он
2052. 1:33:31одинаковый и поэтому нормально выглядит
2053. 1:33:34Несмотря на то что всё разнородное и
2054. 1:33:36куча видов текста в одном месте
2055. 1:33:39находится то есть ну здесь вот тоже
2056. 1:33:42самое вот здесь вот почему вот вчера на
2057. 1:33:44разборе спрашиваю почему график
2058. 1:33:46приделали к улице Ленина и
2059. 1:33:47[музыка]
2060. 1:33:52Ди Зато пятно делает как бы хорошее
2061. 1:33:55однородное Чёрное Вот это всё вместе и
2062. 1:33:58видите здесь динамика такая достаточно
2063. 1:34:00простая то что
2064. 1:34:03идёт большая серая Вот такая вот блямба
2065. 1:34:06как бы более-менее однородная Да вот
2066. 1:34:08снизу вверх и она просто становится от
2067. 1:34:10яркого более серой Ну тут динамика
2068. 1:34:13простая примитивная ти Вот такая
2069. 1:34:17вот вот по цвету вот ну и везде тоже
2070. 1:34:21самое дальше вот здесь вот отдельная
2071. 1:34:23Груп Разде
2072. 1:34:25Ладно вернёмся обратно то мы так не
2073. 1:34:27закончим
2074. 1:34:28никогда так ещё Ну тоже самое видите
2075. 1:34:31синий и жёлтый Ну будет в разрез идти
2076. 1:34:34вот эта штука от цветов поэтому надо
2077. 1:34:37избавляться сделайте чёрный сразу сразу
2078. 1:34:39проблема пропадёт Здесь тоже самое ну
2079. 1:34:43вот этот серый подзаголовок он короче
2080. 1:34:44почти у всех был и здесь ещё есть Ну вот
2081. 1:34:47это бледная Вот это серая Вот это чёрная
2082. 1:34:50Ну то есть что-то куда-то надо менять
2083. 1:34:52здесь отодвигать одно другого чтобы оно
2084. 1:34:55вместе не
2085. 1:34:56воспринималось этот пример наверное не
2086. 1:34:58сюда Надо было
2087. 1:35:00положить это не сюда это не пятна это
2088. 1:35:05[музыка]
2089. 1:35:07короче где эта
2090. 1:35:10проблема это вот сюда проблема Ну ну
2091. 1:35:13естественно то есть все вот эти вот
2092. 1:35:15проблемы с кучей стили они ну по сути
2093. 1:35:18имеют под собой Вот эту вот новую
2094. 1:35:20структуру есть изза того что у многого
2095. 1:35:23какой-то жирный какой-то Маленький
2096. 1:35:25какой-то большой какой-то тонкий
2097. 1:35:26какой-то толстый и ну и вот здесь вот та
2098. 1:35:29же самая история только вот здесь вот
2099. 1:35:30кстати пятна ещё видите они как бы
2100. 1:35:32внутри одной строчки бродят То есть у
2101. 1:35:35вас здесь вот есть вот такая
2102. 1:35:37динамика здесь вот такая и ещё вот это
2103. 1:35:41вот сюда и ещё типа ну короче то что
2104. 1:35:45здесь вот есть два ярких как бы иерархи
2105. 1:35:48такие вот точки они в разном месте Ну то
2106. 1:35:50есть короче здесь вот будет брожение
2107. 1:35:53Старайтесь это всё ну как-то
2108. 1:35:55стандартизировать а мы вообще мы вообще
2109. 1:35:58короче я забыл что мы отступы делали Вот
2110. 1:36:00давайте отступы быстренько сделаем и
2111. 1:36:03пойдём остальные проблемы разбирать Так
2112. 1:36:06у нас тут что сейчас я их
2113. 1:36:09соберу они у нас
2114. 1:36:11были
2115. 1:36:15вместе
2116. 1:36:17Так вот это у нас базовый отступ второй
2117. 1:36:20Значит нам надо следующий попробовать
2118. 1:36:22использовать до контент вот
2119. 1:36:26так здесь
2120. 1:36:29тоже сейчас попробуем Сначала
2121. 1:36:32маленький здесь я до звёздочек меряю
2122. 1:36:35Несмотря на то что у
2123. 1:36:37них ну как бы острый верх могу померить
2124. 1:36:40вот досюда будет
2125. 1:36:44честно сейчас посмотрим
2126. 1:36:47прилипает почти не
2127. 1:36:50прилипает вот Единственное что здесь ну
2128. 1:36:52здесь тоже есть немножко странное вот
2129. 1:36:54это вот
2130. 1:36:55место кто-то удалял кстати звёздочки
2131. 1:36:58чувствуя что местечко
2132. 1:37:00странное и пятно получается странно вот
2133. 1:37:03так вот пятно больше ну как бы оно более
2134. 1:37:05однородное вот так вот в вот в этом
2135. 1:37:07чёрном пятне есть как бы слабая вот эта
2136. 1:37:09вот жёлтая точка она Ну не сильно плохая
2137. 1:37:12но в принципе нормально но мне
2138. 1:37:14интуитивно кстати хочется отзывы вот
2139. 1:37:16сюда вот куда-то передвинуть чтобы оно
2140. 1:37:18было поят Вот это
2141. 1:37:21пятнышко то есть впе Ну не знаю Давайте
2142. 1:37:24я вот одну
2143. 1:37:25оставлю либо я бы как-то местами поменял
2144. 1:37:29эти вещи чтобы у меня не
2145. 1:37:33было ещё вот какого эффекта
2146. 1:37:37кстати вот ещё один эффект про который я
2147. 1:37:40вам хотел сказать
2148. 1:37:41сегодня а где мой
2149. 1:37:44бр потерял
2150. 1:37:49р Ну ладно сейчас быстро создам
2151. 1:37:55короче
2152. 1:38:00смотрите вот когда вы смотрите тоже на
2153. 1:38:05ваш макет У вас есть определённая такая
2154. 1:38:08штука как ну как бы вот линия
2155. 1:38:11выравнивания Да линия выравнивания к
2156. 1:38:13которой Мы возвращаемся для того чтобы
2157. 1:38:15читать
2158. 1:38:17наш Наш текст я сейчас прочитаю все
2159. 1:38:20вопросы отвечу нать попозже вот ко
2160. 1:38:23делаете блок Ну вот такой блок который
2161. 1:38:27начинается с чего-то цветного бледного
2162. 1:38:29или серого то у вас вот эта линия Ну по
2163. 1:38:32которой можно изучать контент она может
2164. 1:38:33вот так вот скакать но здесь это ещё ну
2165. 1:38:37здесь это не так потому что здесь очень
2166. 1:38:39яркие звёзды Но если бы они были
2167. 1:38:43бледнее Ну даже половину то Видите вот
2168. 1:38:47эта вот линия выравнивания она бы она бы
2169. 1:38:50короче ломалась ну визуально просто
2170. 1:38:52визуально был бы провал здесь и вот этот
2171. 1:38:55провал я наблюдал на некоторых макетах
2172. 1:38:58вот
2173. 1:39:00смотрите
2174. 1:39:02вот вот здесь вот вот вот такой вот
2175. 1:39:06пример то что фактически мы как бы
2176. 1:39:08соблюдали вот эту штуку но по факту Ну
2177. 1:39:11чёрная тут Тёмная тут Тёмная тут Тёмная
2178. 1:39:13тут и потом большой как бы кусок здесь
2179. 1:39:16то есть тоже следите за этими вещами и
2180. 1:39:19как-то сокращай их количество Ну то есть
2181. 1:39:22как бы можно было вот здесь вот это
2182. 1:39:24решить можно было местами все эти штуки
2183. 1:39:26поменять
2184. 1:39:27просто поставить здесь вот отзывы типа
2185. 1:39:30пятёрку там сюда вот в середину Ну так
2186. 1:39:35вот не очень опять какая-то Дора А я
2187. 1:39:37видел то что люди они интуитивно
2188. 1:39:39переносили отзывы короче куда-то в конец
2189. 1:39:41строки вот сюда вот сюда Ну то есть в
2190. 1:39:44разные места кто-то блок сделал всё
2191. 1:39:46чисто для того что ну чтобы короче
2192. 1:39:50сохранить Вот эту форму то есть они не
2193. 1:39:52знали Для чего но в принципе как бы
2194. 1:39:54сохранили её так я сейчас верну пока на
2195. 1:39:57место Ну вот у меня быстрый способ это
2196. 1:40:00сверстать чтобы мы с вами тут не
2197. 1:40:01остались ночевать это короче одну
2198. 1:40:07звёздочку так
2199. 1:40:10отступ
2200. 1:40:12минималка Мне кажется что будет не очень
2201. 1:40:16потому что текст всё-таки не ну не
2202. 1:40:20однородный поэтому мы его сейчас отдели
2203. 1:40:24а так слишком много
2204. 1:40:28получается Ну видимо придётся ставить
2205. 1:40:31всё-таки
2206. 1:40:32минимальный минимальный отступ - это
2207. 1:40:34такой как был бы интерлиньяж А между
2208. 1:40:37двумя
2209. 1:40:38текстами такого размера Ну то есть как
2210. 1:40:40вот здесь вот ну не интерлиньяж точнее
2211. 1:40:42Вот этот межстрочный просвет так Ну
2212. 1:40:46понятно Это всё
2213. 1:40:49поближе немножко подальше
2214. 1:40:56подчёркивание мне тоже не нравится Оно
2215. 1:40:58ломает немножко
2216. 1:41:02структуру Вот но делать я это наверное
2217. 1:41:05сейчас не буду с этим ничего можно
2218. 1:41:06короче ещё дальше
2219. 1:41:08ковыряться Но кажется что время лучше на
2220. 1:41:12другие штуки потратить сейчас помери а
2221. 1:41:15интерлиньяж от этого текста Вот я часто
2222. 1:41:17складываю Вот так и просто выравниваю по
2223. 1:41:23вот этой границе или вот этой вот
2224. 1:41:25границе просто
2225. 1:41:27смотрю Вот так вот кажется
2226. 1:41:31что тесновато
2227. 1:41:34сейчас
2228. 1:41:41попробуем такой
2229. 1:41:44отступ ну выглядит
2230. 1:41:48хорошо так Ну конечно не Перфект но но в
2231. 1:41:52принципе нормально
2232. 1:41:57и всё и дальше Поехали между блоками Я
2233. 1:42:00думаю что такой отступ будет Маловато
2234. 1:42:02ставить Ну такой же как типа Между этим
2235. 1:42:06Хотя можно попробовать можно попробовать
2236. 1:42:08отсюда Можно попробовать
2237. 1:42:18отсюда Ну смотрится не очень хорошо
2238. 1:42:20потому что всё как будто в одну группу
2239. 1:42:23собирается Значит надо отступ побольше
2240. 1:42:35попробовать хватает этого чтобы их
2241. 1:42:39разделить Ну вообще кажется хватает если
2242. 1:42:43не хватает можем ещё больше
2243. 1:42:47сделать и тоже посмотреть Ну я обычно
2244. 1:42:50всё это двигаю
2245. 1:42:53смотрю по-разному
2246. 1:42:57Ну так вот слишком дофи дофига
2247. 1:43:01возвращаем
2248. 1:43:04обратно теперь надо понять сколько до
2249. 1:43:06верху нам сделать Ну наверное столько же
2250. 1:43:09сколько сколько у этой группы до
2251. 1:43:19низу Так ну верхнюю с верхней
2252. 1:43:22разобрались
2253. 1:43:23всё равно вот это место мне не очень
2254. 1:43:25нравится наверное я сделал ошибку что
2255. 1:43:29звёздочки удалил потому что теперь у
2256. 1:43:31меня строчка короткая какая-то
2257. 1:43:32некрасивая уж лучше так так А если эту
2258. 1:43:39убрать
2259. 1:43:41получается сложное задание вам
2260. 1:43:44дал так сейчас посмотрим так
2261. 1:43:49тва леци бы длях
2262. 1:43:53бы
2263. 1:43:54сообщений по не кратно четырём и двум
2264. 1:43:56потом после после того как Вы всё
2265. 1:43:59поставили потом приводите это к нужным
2266. 1:44:01размерам здесь будет четыре или во Ну то
2267. 1:44:05есть тут будет там ну короче всё это
2268. 1:44:08приводите к линейке общепринятых
2269. 1:44:10размеров которые есть я сейчас не
2270. 1:44:13это не парюсь я строю сейчас доках всё
2271. 1:44:17если что так Меня смущает абзацный СТ
2272. 1:44:20Который больше чем все на страни
2273. 1:44:23Да есть
2274. 1:44:24такое Он кстати может быть меньше чем Ну
2275. 1:44:29это 16 Он может быть вообще
2276. 1:44:31минимальный Вы можете его даже подогнать
2277. 1:44:34под ваши как бы вот такие приколы вот
2278. 1:44:37сейчас воем - это
2279. 1:44:40полтора и здесь у нас будет полтора вот
2280. 1:44:44ну короче если по-быстрому то так
2281. 1:44:46А ещё бы я разобрался с вот этой вот
2282. 1:44:49плашкой но тоже иногда кажется
2283. 1:44:51непонятным Какого размера её делать Вы
2284. 1:44:53можете использовать отступы Ну ва ваши
2285. 1:44:56плашки размеров для того чтобы и размеры
2286. 1:44:58элементо создавать Ну если они у вас
2287. 1:45:01конечно
2288. 1:45:02чётные у меня было тут 70 А тут 70 но я
2289. 1:45:05её как-то интуитивно
2290. 1:45:07сделал сделать там 72 или
2291. 1:45:1074
2292. 1:45:15Сейчас может быть вот эту уменьш в
2293. 1:45:18сторону
2294. 1:45:19до а нижнюю увеличу до
2295. 1:45:23чтобы была какая-то
2296. 1:45:25[музыка]
2297. 1:45:29система и ещё короче важная штука вот у
2298. 1:45:33кого-то я там заметил Старайтесь не
2299. 1:45:36делать так чтобы у вас текст прям жёстко
2300. 1:45:38упирался в границу выравнивания То есть
2301. 1:45:41это не естественно выглядит то что вам
2302. 1:45:44надо как бы вот с правой стороны всея
2303. 1:45:53никогда Жёстко не упирался вот в эту вот
2304. 1:45:55границу то есть здесь вы можете Вообще
2305. 1:45:57его как бы отцентровать
2306. 1:46:00можете прижать к этой стране можете сюда
2307. 1:46:03Но главное чтобы он не сильно
2308. 1:46:08прилипал так можете акцент на цене
2309. 1:46:10сделать Ну там здесь ну здесь вот
2310. 1:46:13позволительно ещё один стиль бахнуть
2311. 1:46:14Потому что потому что цена-то всё-таки
2312. 1:46:16нам важна Ну если влез вот там были
2313. 1:46:20прикольные варианты были короче с ценой
2314. 1:46:23на кнопки
2315. 1:46:24типа там забронировать за
2316. 1:46:2822999 были двухуровневые кнопки Вот это
2317. 1:46:31всё тоже прикольно ну в базе короче
2318. 1:46:34вёрстка такая ну то есть Обычно просто
2319. 1:46:36понимаете над самым незатейливый экраном
2320. 1:46:38можно сидеть не то что там 20 минут
2321. 1:46:41можно сидеть там и час и два Ну хотя вы
2322. 1:46:43это как раз
2323. 1:46:44понимаете потому что
2324. 1:46:47да Потому что я
2325. 1:46:50вас потому что вы сидели как бы столько
2326. 1:46:53времени Вот Но если по-быстрому то
2327. 1:46:55экранчик наверное был бы таким на чем бы
2328. 1:46:58я ещё тут поработал в своём экране я бы
2329. 1:47:00подумал вот над этими вещами ещё раз над
2330. 1:47:03толщина иконок я бы подумал ещё раз над
2331. 1:47:05вот этим вот местом мне оно не очень
2332. 1:47:08нравится и я бы всё-таки
2333. 1:47:11посмотрел Ну то есть какие-то более
2334. 1:47:13интересные варианты для кнопки ну то
2335. 1:47:16есть попробовал бы длинную кнопку с
2336. 1:47:18ценой И сейчас я наверно отмечу Какие
2337. 1:47:21штуки вот что сказа е с что у тебя текст
2338. 1:47:24не выровнен Ну вот так вот сделай просто
2339. 1:47:28чуть-чуть там место оставь внутри и и
2340. 1:47:33выров я обычно так
2341. 1:47:37делаю я скажу у меня тут ну какой-нибудь
2342. 1:47:40там сейчас вот кстати интересно вот если
2343. 1:47:43мы
2344. 1:47:44прижмёт ную
2345. 1:47:46зафи коче Смотри это зат
2346. 1:47:54чётко в границу Ну то есть лучше
2347. 1:47:56Немножко оставить если у вас прям с этим
2348. 1:47:59жёстко Ну не дадут Вам эти д пикселя 4ре
2349. 1:48:01пикселя оставить Ну ничего страшного как
2350. 1:48:03бы вот этот бой Мы проиграли Но
2351. 1:48:06следующий выиграем можете можете
2352. 1:48:07центральное выравнивание
2353. 1:48:09сдела тоже кстати видите оно в
2354. 1:48:12определённых рамках здесь же цена Может
2355. 1:48:14быть там 1200 там и прочее до куда-то
2356. 1:48:17она у вас дост вот максимально А так она
2357. 1:48:21как бы делает такой отступ
2358. 1:48:23здесь можно по-разному эту штуку делать
2359. 1:48:25можно подумать типа Какого размера у
2360. 1:48:27меня кнопка Какого размера у меня цена
2361. 1:48:30То есть как они могут себя вести будут
2362. 1:48:33ли они себя вести ну как бы одинаково
2363. 1:48:35будут они вести себя по-разному то есть
2364. 1:48:37короче я поэтому пишу то что я над этим
2365. 1:48:39ещё бы наверное подумал вообще мне
2366. 1:48:42нравится типа
2367. 1:48:48прямо вот просто хочется е хочется не
2368. 1:48:51выжи перед вами типа что потом я прям
2369. 1:48:53супер супер экран там сверстать А
2370. 1:48:55хочется больше разобрать
2371. 1:48:56э
2372. 1:48:59этих больше разобрать ошибок которые ещё
2373. 1:49:02были так что у нас тут
2374. 1:49:06ещё так пятна тоже мы
2375. 1:49:10прошли много стилей текста тоже
2376. 1:49:15посмотрели прочее Ну вот прочее тоже
2377. 1:49:18быстро можно посмотреть про вампирский
2378. 1:49:20замок Я сказал что Шериф не всегда может
2379. 1:49:23соответствовать вашей тематике про
2380. 1:49:26грязный р тоже сегодня
2381. 1:49:28сказал вот здесь вот короче вот этот вот
2382. 1:49:31экран достаточно много ошибок ну плюс за
2383. 1:49:34то что
2384. 1:49:35креативно за то что креативная работа Ну
2385. 1:49:38такой я не видел это правда но было
2386. 1:49:41много ошибок видно кстати прошлое
2387. 1:49:43графического дизайнера вот у этой штуки
2388. 1:49:46самый большой вес на страни а должен
2389. 1:49:49быть у вот этой это
2390. 1:49:52штука на которую я обратил внимание
2391. 1:49:55вторая штука за которую тебя любой
2392. 1:49:57дизайнер в продукте наругает прямо сразу
2393. 1:49:59это нерационально использовани
2394. 1:50:01пространства Ну то есть я вижу что ты
2395. 1:50:02сделал вот этот вот
2396. 1:50:04прямоугольник как бы композиции вот у
2397. 1:50:07тебя здесь один вот у тебя верх закрыт
2398. 1:50:09Вот у тебя низ закрыт Но вот этот текст
2399. 1:50:13его может быть много и он будет всегда
2400. 1:50:15вот в таком столбце как бы ну не знаю
2401. 1:50:18даже если вот так верстать я бы наверно
2402. 1:50:20дал ему побольше места немножко ну как
2403. 1:50:22бы креативная
2404. 1:50:24но ну короче на тебя будут нападать за
2405. 1:50:27неми Вот поэтому я бы как-то попроще
2406. 1:50:29свеста скажет попроще надо попроще более
2407. 1:50:33попроще так и ещё в этом же макете
2408. 1:50:36Обрати внимание на то как у тебя иконки
2409. 1:50:38сделаны там
2410. 1:50:39нету не было этих фреймов чтобы их
2411. 1:50:45верстать Да вот здесь вот не было
2412. 1:50:47фреймов А ну вот да Или были сейчас
2413. 1:50:54Нет не было фреймов короче были только
2414. 1:50:56фигурки надо фреймы поставить надо вот
2415. 1:50:58это поставить вот это вот тоже тебе
2416. 1:51:01скажут что это такое типа тут надо всё
2417. 1:51:03это вычистить Ну и вот этот текст
2418. 1:51:07невидимый Так что ещё избегайте короче
2419. 1:51:11грязных сочетаний цветов потенциально
2420. 1:51:13которые у Вас могут появиться вот
2421. 1:51:15допустим серый ну серый он если будет
2422. 1:51:18там с каким красным с бледном там ещ с
2423. 1:51:21чем-то
2424. 1:51:23очень грязные сочетание Поэтому лучше
2425. 1:51:26использовать Ну какие-то производные от
2426. 1:51:28чёрного там с прозрачностью допустим
2427. 1:51:30чёрные полупрозрачные плашки белые
2428. 1:51:32полупрозрачные плашки или непрозрачные
2429. 1:51:35белые чёрные плашки потому что они более
2430. 1:51:37нейтральные будут так вот здесь вот
2431. 1:51:40короче кнопка Шера немножко отвалилась
2432. 1:51:41от вот этой штуки часто думают что ну
2433. 1:51:45как бы ты там пальцем можешь не туда
2434. 1:51:46попасть Поэтому в страхе их отодвигают
2435. 1:51:50ноде Чучу сдвину 24 должен быть 16 или
2436. 1:51:5612 так вот здесь вот короче вот в этой
2437. 1:51:59мелочи не надо Когда делаете теги
2438. 1:52:01упирать текст в правый край вот как там
2439. 1:52:04так и здесь то есть видите здесь какой
2440. 1:52:06отступ А здесь отступ меньше они должны
2441. 1:52:09быть одинаковые даже если вот этот
2442. 1:52:11искусственно придётся меньше сделать чем
2443. 1:52:13вот
2444. 1:52:15этот ет
2445. 1:52:20[музыка]
2446. 1:52:22Я видел Вот с иерархией
2447. 1:52:25проблемы у нас на странице обычно должен
2448. 1:52:28быть главный заголовок всегда Ну то есть
2449. 1:52:31главный заголовок это что ну здесь это
2450. 1:52:34вот этот горный ретрит есть такая
2451. 1:52:37популярная как бы ошибка делать и второй
2452. 1:52:40уровень и третий уровень таким же
2453. 1:52:42заголовком но первый заголовок он всегда
2454. 1:52:45должен быть как бы больше для того чтобы
2455. 1:52:47потому него чи намдо показать яда я
2456. 1:52:52сечас пока из-за того что вот это место
2457. 1:52:56имеет большой вес потому что у тебя
2458. 1:52:57заголовок плюс вот эта вот вся фигня вот
2459. 1:53:00этот кажется главным Ну то есть сейчас
2460. 1:53:03из-за веса на него первое внимание
2461. 1:53:04обращается вот я советую вот этот
2462. 1:53:06увеличить потому что в целом вёрстка
2463. 1:53:08аккуратно здесь вот просто не хватает
2464. 1:53:10как бы букв побольше
2465. 1:53:11так
2466. 1:53:14здесь вот здесь вот короче тоже есть
2467. 1:53:17небольшая проблема с иерархией здесь вот
2468. 1:53:19эти иконки они по весу примерно такие же
2469. 1:53:21как заво То есть тут много ного и тут
2470. 1:53:24много ного здесь иконки надо ослабить
2471. 1:53:27чтобы иерархия была
2472. 1:53:29[музыка]
2473. 1:53:31по получше здесь
2474. 1:53:34работал
2475. 1:53:35так вот здесь вот Ну вот этот вот пример
2476. 1:53:38когда очень Тяжеловес подложка была под
2477. 1:53:41кнопкой и цвет кнопки кстати выбран
2478. 1:53:43Такой типа какой
2479. 1:53:44безрадостный Оно такое знае можно
2480. 1:53:47сказать с небы сонора
2481. 1:53:52облегчи вки подложку и больше акцента
2482. 1:53:55сделал на кнопке а не на подложке потому
2483. 1:53:57что сейчас у тебя вот это самое яркое
2484. 1:53:58место в
2485. 1:54:01макете
2486. 1:54:04так дальше что композиция и
2487. 1:54:08отступы вот ещё одна проблема которая
2488. 1:54:11часто встречается это перепады плотности
2489. 1:54:14вёрстки вот здесь допустим интж 100% е
2490. 1:54:18Проблема в том что тек
2491. 1:54:20бго сде ярче Даже если он серый
2492. 1:54:23останется Но у тебя вот здесь вот супер
2493. 1:54:25маленькие отступы А вот здесь вот такая
2494. 1:54:28свобода Ну как бы они немножко не
2495. 1:54:31соответствуют друг другу то есть такое
2496. 1:54:33ощущение что ты вообще в целом не
2497. 1:54:35экономишь Но вот в этом блоке текста
2498. 1:54:37очень жёстко экономи то есть надо чтобы
2499. 1:54:39было равномерно к такой вёрстке подойдёт
2500. 1:54:41свободный интерлиньяж 140
2501. 1:54:44150% Вот ещё классическая проблема
2502. 1:54:48Новика это е маленький риче
2503. 1:54:53ито типа того и очень-очень налеп Ну то
2504. 1:54:56есть прям очень маленькие отступы вот
2505. 1:54:59здесь вот надо ВС расслабить добавить
2506. 1:55:00везде там минимум Поче пикселя лучше
2507. 1:55:03даже пово чтобы это по высоте не бойся
2508. 1:55:07не надо пытаться всё вместить всегда
2509. 1:55:09потому что ты же на это не влияешь у
2510. 1:55:10тебя здесь может быть длинный текст как
2511. 1:55:13бы тут это прижимать Не
2512. 1:55:16надо так здесь вот таже самая проун
2513. 1:55:22вот ти очень плотно а вот здесь очень
2514. 1:55:25вольготно И вот здесь вот очень
2515. 1:55:28вольготно то есть вот здесь вот явно
2516. 1:55:30хочется отступов сделать Ну побольше
2517. 1:55:33немножко потому что у тебя в принципе
2518. 1:55:35Это соответствует макету макет кстати
2519. 1:55:37красивый вот чуть-чуть надо только здесь
2520. 1:55:40прям са Самую малость
2521. 1:55:44поправить так вот здесь вот тоже
2522. 1:55:47показало что вот тут вот очень при вот
2523. 1:55:49тут вот очень при у тебя ВиДи до блока
2524. 1:55:54больше чем следующий до верха То есть
2525. 1:55:57получается что у тебя сейчас картинка с
2526. 1:55:58вот этим с вот этой вот линией Она
2527. 1:56:00собирается в единую группу А так быть
2528. 1:56:04как бы не должно Так ну и вот тут тоже
2529. 1:56:06здесь вот льготный отступ А здесь вот
2530. 1:56:08очень-очень мелкий то есть надо ещё
2531. 1:56:10чуть-чуть прибавить как бы их все кроп с
2532. 1:56:12дрожание был да сейчас погодите я там
2533. 1:56:15про прочитаю комментарии так оптическая
2534. 1:56:19компенсация отвечаю на всё оптическая
2535. 1:56:21компенсация
2536. 1:56:23избыток вертикали не создаст Я уже не
2537. 1:56:25помню
2538. 1:56:26проче наверно про то что я там текст не
2539. 1:56:29прижимал
2540. 1:56:31Ну вот как бы если если опять вернуться
2541. 1:56:34к этой истории про прижимание текста Ну
2542. 1:56:37видите как бы правый край он свободный
2543. 1:56:39то есть у него есть какая-то вот эта вот
2544. 1:56:41зона но когда что-то прям жёстко
2545. 1:56:43прилегает
2546. 1:56:44Ну вот допустим у нас есть вот такая вот
2547. 1:56:47линия вот э вот эния СМИ когда чётко
2548. 1:56:52что-то прямо к ней Вот текст очень
2549. 1:56:54сильно прижимается то это неестественно
2550. 1:56:56выглядит так что такое кроп с
2551. 1:56:57дребезжания
2552. 1:56:59сейчас
2553. 1:57:00покажу кроп с др
2554. 1:57:08[музыка]
2555. 1:57:09бежаницах пикселей каких-то Вот то есть
2556. 1:57:13Если уж вы накладывает одну картинку на
2557. 1:57:15другую но обрежьте её как-то смело чтобы
2558. 1:57:18вот этого уголка не было чтобы вот этого
2559. 1:57:20там мини вот этой штуки до колеса Потому
2560. 1:57:22что видите вот здесь вот еле касается
2561. 1:57:24Вот эту вот историю Ну то есть надо
2562. 1:57:27резать Ну чтобы чтобы не было мелких
2563. 1:57:31деталей так то есть на мобилке не надо
2564. 1:57:33оставлять квадрат 40 пикселей с
2565. 1:57:35контролом посередине это я про то что
2566. 1:57:37Шер отвалится это про Вот эту вот штуку
2567. 1:57:41там не
2568. 1:57:42всегда Ну как бы смотрите вот этим вот
2569. 1:57:45правилом то что там ровно должно быть 40
2570. 1:57:48им частенько пренебрегают как это делают
2571. 1:57:50Ну типа вот так вот делают 40
2572. 1:57:52И вот так вот делают
2573. 1:57:554 и всё и ваша задача просто ну если вы
2574. 1:57:58совсем близко придвинье Бывает такое то
2575. 1:58:00что ну как бы можно Пальцем в другую
2576. 1:58:02иконку попасть но эта проблема она не
2577. 1:58:04частая так здесь короче про вот эту
2578. 1:58:07штуку объяснил так здесь вот собрать
2579. 1:58:09пятна вот здесь вот мне ну здесь такая
2580. 1:58:12же штука то что когда у вас много групп
2581. 1:58:15в целом на страни То есть вы там
2582. 1:58:17много-много групп сделали это тоже Ну та
2583. 1:58:21вот как бы через
2584. 1:58:23и я поэтому везде на всех макетах
2585. 1:58:26старался
2586. 1:58:27чтобы короче групп было меньше вот
2587. 1:58:30допустим даже вы не хотите чтобы это вот
2588. 1:58:32прям
2589. 1:58:35чётко Ну чтобы это прям чётко прилепа на
2590. 1:58:38одинаковом расстоянии но подвинь его
2591. 1:58:40Поближе это будет как бы одна группа
2592. 1:58:42отдель и вот смотрите сейчас я вот всё
2593. 1:58:44вот это подниму и оно
2594. 1:58:51ВМТ сечас они смотрятся прям как
2595. 1:58:53солдатики такие типа 1 2 3 вот да про 40
2596. 1:58:58пикселей это да это про то чтобы пальц
2597. 1:59:00сарделькой чтобы было удобно
2598. 1:59:03попадать
2599. 1:59:05так контраста не хватает Ну вот на этом
2600. 1:59:08макете здесь заголовок надо побольше
2601. 1:59:10сделать тоже потому что ему немножко
2602. 1:59:13мощи не хватает по отношению к вот этим
2603. 1:59:16элементам даже то есть они спорить
2604. 1:59:18начинают вот эта штука И вот эта штука
2605. 1:59:21что важнее а заголовок здесь вот явно
2606. 1:59:24главнее находится так вот ещё вот про
2607. 1:59:27этот макет это легендарный сегодня макет
2608. 1:59:29я на нём всю теорию U объяснил ну
2609. 1:59:31реально очень хорошо когда такое
2610. 1:59:33попадается здесь заголовок у него что до
2611. 1:59:35верха что до низа примерно одинаковые
2612. 1:59:38расстояние Но это просто нарушение
2613. 1:59:39группировки то есть заголовок должен был
2614. 1:59:42вот с этим группироваться так здесь на
2615. 1:59:44макете с дракой две дыры вы скажете А
2616. 1:59:47что же делать когда длинный текст Ну
2617. 1:59:49придётся сверстать по-другому
2618. 1:59:53Ну весь блок чтобы не было чтобы при
2619. 1:59:57удлинении текста не образовывались Дыры
2620. 1:59:58в в вот здесь вот две дыры вот здесь вот
2621. 2:00:02на этом макете ещё тоже сверху Ну при
2622. 2:00:05просмотре вот кажется большая дырка
2623. 2:00:07такая ну типа там почти 40 пикселей или
2624. 2:00:09там 50 м и Это норм если у тебя здесь
2625. 2:00:13будет заголовок и на других страницах
2626. 2:00:16будет заголовок вот в этом месте такое
2627. 2:00:18часто бывает но больше наверное по
2628. 2:00:21недосмотру
2629. 2:00:22Ну когда ты такое в приложениях
2630. 2:00:24встречаешь то что на каких-то страницах
2631. 2:00:26типа заголовка просто нет а кнопка
2632. 2:00:28возврата есть вот я бы здесь ну либо
2633. 2:00:31сюда либо сюда что-нибудь написал То
2634. 2:00:33есть как-то это пространство бы
2635. 2:00:37использовал так вот это я вам показывал
2636. 2:00:39сегодня уже про слом вот этой линии
2637. 2:00:41выравнивания линия выравнивания линии
2638. 2:00:43чтения ещё тоже Мы же к ней возвращаемся
2639. 2:00:45от неё начинаем читать классные макеты
2640. 2:00:47тоже показывал Ну вот ещё раз бордера
2641. 2:00:50лишние не ставим
2642. 2:00:52У нас есть Бордер вот здесь вот этот
2643. 2:00:55Бордер лишний сами борде немножко поярче
2644. 2:00:59Ну когда они прям совсем невидимые то
2645. 2:01:01надо напрягаться что мне тут понравилось
2646. 2:01:03мне понравились короче шрифты размеры
2647. 2:01:07Мне понравилось сочетание вот этот
2648. 2:01:09зелёный цвет вот этот фиолетовый и в
2649. 2:01:12самом Ну как бы как этот макети выглядит
2650. 2:01:15вот этот макети тоже очень понравился ещ
2651. 2:01:18один макет Вот который я поправил где
2652. 2:01:20просто придвинул
2653. 2:01:23вот этот блок тоже хороший вот этот вот
2654. 2:01:26хороший Ну я выбрал здесь макет где я
2655. 2:01:29вообще бы ничего не стал менять Ну даже
2656. 2:01:32вот эту штуку В итоге я ну как бы
2657. 2:01:34оправдал в начале этого вот может
2658. 2:01:37кого-то ещё забыл не обижайтесь я ну
2659. 2:01:39по-быстрому выбрал вот при бегом
2660. 2:01:41просмотре те на которых вообще никаких
2661. 2:01:42косяков не так что всё что ли всё
2662. 2:01:47вот СБО
2663. 2:01:52кто будет смотреть эту
2664. 2:01:54лекцию Ну вот вот такая штука Даже даже
2665. 2:01:57ну как бы должны быть лекции и к ним
2666. 2:02:00должны быть ещё живые все объяснения
2667. 2:02:02чтобы это всё работало так как надо Ну
2668. 2:02:04всё давайте мы скоро с вами увидимся
2669. 2:02:08вновь вот ждите ждите наши новые эфиры
2670. 2:02:11ждите новые материалы которые скоро
2671. 2:02:13будут
2672. 2:02:15выходить короче по дизайн системам
2673. 2:02:18лекции будут будем читать вживую новые
2674. 2:02:22вот Даша будет читать вживую Ну вы у нас
2675. 2:02:25пилотная группа вот будем на вас
2676. 2:02:27обкатывать новые классные штуки про
2677. 2:02:29которые вообще никто не знает Вот ну
2678. 2:02:31типа в открытом
2679. 2:02:33Интернете Так что Так что да Ну всё
2680. 2:02:36спасибо всем большое на связи идите
2681. 2:02:39отдыхать всё всем пока в записи будет
2682. 2:02:41тоже Ну да мы просто проводить будем
2683. 2:02:43живую лекции са ми Всё спокойной ночи