UI/UX разбор FormFactor: дизайн ошибки, визуальная иерархия, отступы, работа с цветом и выравнивание — Transcript

Full transcript

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