Переверстка. Чиним визуальную иерархию, работа с «пятном», чистота — Transcript

Full transcript

1. 0:00Привет ребята так вот
2. 0:02это
3. 0:04убираем обводки убираем
4. 0:10зелёные это
5. 0:13перекрашиваем логи
6. 0:15убираем скобки убираем Тут что-то
7. 0:20недоделанные они они
8. 0:25разрываются давай Это как-то соберём в
9. 0:28одну те не обязательно всё растя на всю
10. 0:30страницу ты можешь спокойно там
11. 0:32определённые текстовые блоки в половину
12. 0:34страницы верстать если у тебя Ну много
13. 0:38места остаётся
14. 0:39пустого сверстать всё вот здесь и будет
15. 0:43аккуратно Вот это тоже на разные строчки
16. 0:46разнеси может быть здесь ну смотреть
17. 0:49прес лист тебе не надо пытаться это всё
18. 0:52как бы впихнуть одно в другое Так давай
19. 0:56начнём сначала тут много много проблем
20. 0:59во-первых у тебя вот здесь вот дыра
21. 1:01из-за кнопки назад потому что с этой
22. 1:03стороны ничего нет вопрос настолько ли
23. 1:06она тебе сильно нужна Если сильно нужна
24. 1:09сделай её вот тут иконкой
25. 1:11Пускай возвращаются
26. 1:14отсюда то есть вот вот это можно убрать
27. 1:17куда-то вот сюда вот
28. 1:19поставить потом карточка Профи Павел и
29. 1:23полито у тебя один и тот же размер
30. 1:25шрифта Просто разная толщина этого не
31. 1:28хватает для того чтобы визуально
32. 1:29иерархию здесь сделать То есть вот эта
33. 1:31штука она либо сильно больше должна быть
34. 1:34но так как у тебя везде заголовки такого
35. 1:36размера те проще Вот это уменьшить
36. 1:40потом у тебя видишь где-то отступы вот
37. 1:44здесь вот очень маленькие потом сразу
38. 1:45очень большие у тебя есть место ты
39. 1:48можешь вполне сделать отступы побольше
40. 1:51везде вот
41. 1:53здесь так не балуйтесь с разными
42. 1:57размерами внутри одной строки
43. 2:00Это тоже не
44. 2:02добавляет Ну как бы аккуратности вёрстки
45. 2:05ещё в сочетании с тем что куча цветов
46. 2:07Всё это в одной строчке лучше писать
47. 2:10короче тогда не будет вот этой вот
48. 2:14проблемы то что видишь у тебя вот здесь
49. 2:16вот такая вот как бы ну не очень
50. 2:19красивая
51. 2:20справа форма у текста с разрывами с
52. 2:24дырками Ну то есть она должна стреми к
53. 2:27прямоугольни
54. 2:30можешь местами поменять некоторые пункты
55. 2:33вот даже если я не буду ничего делать А
56. 2:35вот сделаю как ты
57. 2:37А ну вот не не буду менять структуру
58. 2:41просто сделаю как это как ты хотела
59. 2:43Возможно
60. 2:45я отсортировать бы их по длинее и оно бы
61. 2:49лучше смотрелось Ну то есть если тебе
62. 2:52цену надо прямо выделить
63. 2:54то может я бы её как-то в другое место
64. 2:57поставил
65. 3:02я забираю
66. 3:06всё это кайфово так это заголовок
67. 3:10карточка Профи не лишний как будто без
68. 3:11него Смысла не потеряется Ну может
69. 3:15кстати
70. 3:16и можно и попробовать и без него можно с
71. 3:19ним ну то есть Может быть Павел и
72. 3:21Политов будет и будет короче заголовкам
73. 3:24этой страницы такое тоже возможно так
74. 3:28ещё раз
75. 3:30Это что за размер кстати
76. 3:32[музыка]
77. 3:40Двадцатый Короче я бы с этим работал
78. 3:43наверное вот так так лист Я бы
79. 3:48убрал более 4.000 выполненных
80. 3:53заказов Вот вот эта вот штука типа
81. 3:56успешно выполненных
82. 3:58заказ 3000 вот А мы откуда взяли это
83. 4:02слово то есть если мы в сервисе считаем
84. 4:04мы наверное знаем точное число
85. 4:074.87 например и можем короче и проще
86. 4:12написать выполнил 487
87. 4:16заказов Или просто вообще 4.87
88. 4:22заказов сделал завершил
89. 4:33вот кажется что вот эта история
90. 4:37это сейчас опыт
91. 4:40работы Вот это одна
92. 4:43группа Вот это тоже Похоже что эта
93. 4:46группа такая что это как бы в одной
94. 4:48группе должно
95. 4:51быть стоимость от 14400 руб выезжает
96. 4:56ЮВАО вот у меня такое ощущение что
97. 4:58короче
98. 5:00вот эти теги и вот эти теги похожи много
99. 5:05отзывов вот это вот это короче как будто
100. 5:07они похожи и если есть какие-то штуки
101. 5:11похожие наверное их надо объединять в
102. 5:14одну
103. 5:16сущность вот что такое средняя стоимость
104. 5:19работы допустим то есть здесь вот есть
105. 5:21стоимость работы 1.400 руб просто
106. 5:23средняя стоимость работы - это не
107. 5:24информативно средняя для кого средняя по
108. 5:28рынку
109. 5:29типа тогда надо писать там стоимость в
110. 5:31рынке короче тоже надо вот на над этой
111. 5:34штукой подумать Так ладно я уже
112. 5:37закопался выезжает Москва опыт работы
113. 5:41вот Давайте по флагу Вот так вот
114. 5:45[музыка]
115. 5:58свеста здесь можно кстати без без
116. 6:01рейтинга
117. 6:03обойтись так тут
118. 6:0617
119. 6:12ай-ай-ай так сейчас онлайн опыт
120. 6:23работы Павел Ипполит
121. 6:3015 16 16
122. 6:4316 так тут какие-то дробные
123. 6:48размеры что-то там с вёрст кой прямо
124. 6:51надо
125. 7:06се ребята сорян ну хочется короче
126. 7:10помочь немножко с этой карточкой
127. 7:13я там ещё где-то теги
128. 7:16перевёл уда их Забрать здесь у нас
129. 7:21двенадцатый шрифт вот мы возьмём два или
130. 7:25три размера здесь
131. 7:29Ну просто реально сложное место и очень
132. 7:31много деталей Так что мне делать с этой
133. 7:35квадратной фоткой написать
134. 7:55Позвонить Нет не
135. 7:58прокатит Вот что я пытаюсь сейчас
136. 8:00сделать я пытаюсь уменьшить количество
137. 8:02сущностей типа в вёрстке вот у меня есть
138. 8:05вот это вот это вот это и мне надо с
139. 8:08этим совсем разобраться чтобы было
140. 8:10меньше элементов сейчас элементов у нас
141. 8:121 2 3 4 5 6 7 8 9 10 для одного блока
142. 8:18это перебор потому что должно быть около
143. 8:20семи
144. 8:25вот какую-то инфу вот там предлагают
145. 8:27тегами написать
146. 8:30возможно что-то из этого должно в теги
147. 8:33уйти 1487 заказов опыт 14
148. 8:40лет на сервисе с 2016 года вот что из
149. 8:44этого мне даёт
150. 8:46А что тут самое
151. 8:49полезное куда
152. 8:51выезжает кат материал сейчас свободен
153. 8:54средняя стоимость работы
154. 9:03много отзывов Да я ну типа как будто это
155. 9:07и так понятно из
156. 9:13контекста короче кандидат на вылет вот
157. 9:16эта
158. 9:18штука опыт 14 лет нормально сделал 400
159. 9:22вот это вот это короче я не уверен что
160. 9:25эта цифра понимаешь у большинства людей
161. 9:27она будет типа три
162. 9:30Ну то есть можно её скрывать
163. 9:35а но возможно мы можем
164. 9:40вот типа вот так вот
165. 9:46сделать Ну тоже непонятно короче много
166. 9:50будем пытаться сейчас
167. 9:53сэкономить это место
168. 9:59вот короче 2016 год как так как кандидат
169. 10:02на на
170. 10:06вылет переедет пока в
171. 10:13теге Вот это вообще
172. 10:15[музыка]
173. 10:17убираем Я думаю что вот это И вот это
174. 10:20должно коррелировать заказы должны быть
175. 10:22связаны с
176. 10:23отзывами И от этого мы совсем
177. 10:27избавимся так опыт сейчас онлайн
178. 10:3349
179. 10:35А я стараюсь ставить штуки которые
180. 10:38фиксированной длины в
181. 10:42одну ну наверх короче чтобы они у меня
182. 10:46не бегали по
183. 10:47странице потому что вот это может там
184. 10:50скакать
185. 10:51А так сейчас
186. 10:54онлан вот эту штуку возможно надо
187. 10:57соединить с
188. 11:00написать либо под фотку поставить да то
189. 11:03что-нибудь короче такое онлайн 20 минут
190. 11:07назад Ну
191. 11:12да а выбрать А что значит выбрать
192. 11:16выбрать - это значит То что я вот в этот
193. 11:18сценарий
194. 11:21проваливаюсь просто выбрать это не
195. 11:25Ну короче я думаю что я не выбрать его я
196. 11:28его я ему заказ делаю ну то есть
197. 11:31получается я создать заказ для этого
198. 11:34чувака или как Ой видите я как всё
199. 11:36сократил у меня дырка
200. 11:38появилась
201. 11:40[музыка]
202. 11:43беда один из моих любимых приёмов по
203. 11:47избавлению от
204. 11:54дырки один из моих любимых приёмов - это
205. 11:57перенос
206. 11:59перенос фотки
207. 12:08направо так написать позвонить сейчас
208. 12:11онлайн
209. 12:34Ну короче смотрите ещё вариант Если по
210. 12:36тупому то можно вот так прямо сделать
211. 12:38это вот максимально тупая
212. 12:42вёрстка Ну а сейчас мы попробуем
213. 12:45по-тупому и по-умному
214. 12:49по-разному
215. 12:55попробуем типа так-то Можно вот так
216. 12:57сделать
217. 13:01Вот и вот эта штука Пускай ездит
218. 13:06м но не хочется поэтому давайте думать
219. 13:11значит
220. 13:19головой Вот это можно
221. 13:23сложить это можно вытянуть а что такая а
222. 13:29длинная
223. 13:33штука здесь дыра тогда будет чтобы не
224. 13:37было
225. 13:41дыры мы либо увеличиваем
226. 13:49фотографию либо да часть контента
227. 13:53переносим правый
228. 13:56столбец написать позвонить
229. 14:08Ну вроде как-то прилично уже более-менее
230. 14:10начинает
231. 14:14выглядеть Это история ещё прайслист мы
232. 14:17забыли сделать не Ну я имею в виду
233. 14:22кнопка написать
234. 14:24позвонить вот ещ всегда короче продукты
235. 14:29то что здесь много целевых действий Ну
236. 14:32вот это понятно это мы
237. 14:36Уменьши Но вот эта
238. 14:41история написать
239. 14:43Позвонить Короче как
240. 14:47вариант Вот от этого
241. 14:51избавиться и сделать вот
242. 14:57так Ну кнопки ссылки короче
243. 15:03сделать Ну тут даже я пожертву словом
244. 15:12смотреть и сделаю такую вот историю
245. 15:15допустим сколько там
246. 15:1750 нет
247. 15:2280 же 100
248. 15:30Вот это кстати единственный случай когда
249. 15:32я использую разделители вот так вот в
250. 15:35таком контексте когда мне ну надо
251. 15:37сделать из
252. 15:38трёх кнопок
253. 15:40э ну примерно одинакового размера три
254. 15:45ссылки
255. 15:54поставить Ну короче вариант один
256. 16:01может быть это будут маленькие
257. 16:04кнопочки если они есть в дизайн системе
258. 16:09то это могут быть маленькие кнопочки
259. 16:14ещё Ну вот это исчезнет Ну потому что то
260. 16:18что они одного размера Ну мне честно
261. 16:21говоря не очень
262. 16:24нравится кажется что как-то ту мач для
263. 16:27них
264. 16:59Ну короче если бы мне надо было прям
265. 17:01столько кнопок приделать Наверное я бы
266. 17:03по иерархии как-то Вот что-то вот в эту
267. 17:06сторону бы
268. 17:15думал Ну мне всё равно не очень нравится
269. 17:18но тут явно надо дольше сидеть либо
270. 17:20выбрасывать одну из кнопок Ну типа
271. 17:22написать позвонить или прайс-лист от
272. 17:24чего-то избавляться либо прайс-лист
273. 17:26переносить куда-то вниз
274. 17:30то есть вот здесь вот есть стоимость
275. 17:31услуг от 1.400 руб можно сделать из
276. 17:34этого
277. 17:36заголовок стоимость от 1.400 руб и прям
278. 17:39Короче пошёл прайслист Ну вот наверное
279. 17:44наверное я бы вот так бы это сделал да
280. 17:47карточка это Это всегда типа всегда
281. 17:51боль особенно такие многокомпонентные
282. 17:55сложные
283. 18:00вещи
284. 18:12верстать Ну короче как наверное куда-то
285. 18:15вот в эту сторону Я бы
286. 18:17двигался либо вообще попробовал это
287. 18:21[музыка]
288. 18:22всё по-тупому сверстать в большой
289. 18:25плашке Ну по-тупому потому что по-тупому
290. 18:29это когда без плашки всё держится а
291. 18:32по-тупому - это когда с
292. 18:37плашки Ну
293. 18:40кстати можно немножко умерить размер
294. 18:43этих кнопок если будет плашка и ничего
295. 18:46не будет
296. 18:49разваливаться Вот Ну а вот это
297. 18:54[музыка]
298. 18:59Ну короче если хотите бента будет Вот
299. 19:02вам бента если без бента Можно
300. 19:06попробовать
301. 19:10одну сделать одну вот такую
302. 19:14штуку она в принципе работу этой плашки
303. 19:18будет выполнять Ну держать как бы верх
304. 19:21карточки за эту историю вот если хотите
305. 19:24бенту То бенту будет вот и дальше дальше
306. 19:29кстати можно без бента уже верстать
307. 19:30тогда будет нормально меня больше всего
308. 19:33смешит что слово бента придумали типа
309. 19:35спустя там не знаю 5 лет как все верстат
310. 19:38уже так вот а бента почему-то только
311. 19:44сейчас Ну да с кнопками короче со стилем
312. 19:48кнопок тут совсем надо поработать если
313. 19:49мы кнопочки приведём в порядок будет
314. 19:52Получше сейчас мне кажется что они
315. 19:55немножко там жирнова для этого размера
316. 19:58шрифта в
317. 19:59высоту Ну и чуток рве
318. 20:04глазный
319. 20:06кстати вот вам ещё один
320. 20:11варианти вот и всегда стараемся
321. 20:14поставить в в угол что-нибудь
322. 20:20тяжкое Ну можно и так конечно оставить
323. 20:25но мне как-то
324. 20:27приятнее Да вот эта история есть