Как подготовить макет к верстке? За что верстальщики не любят дизайнеров? Стрим #15

[@alexeybychkov_]

ПРОСТИТЕ за первых 10 минут технических косяков со звуком, громкостью и доступом по ссылке) Спасибо Дарье за стрим! 👉 Инстаграм: instagram.com/rilelbeauty/ Пишите в комментах какие еще вопросы по верстке вас интересуют!

[@annazlonska5821]

Этот тип видео - просто маст хев для тех, кто учится дизайну, особенно самостоятельно. Искала подобное очень давно, спасибо за хороший контент) Еще было бы круто сделать разбор дизайнов с верстальщиком, хотя бы 2-3 штуки

[@alexeybychkov_]

спасибо за просмотр)

[@obalatsun]

Осторожно! Если будете часто заходить на этот канал и видосики смотреть, а потом еще после этого и кнопки в фигме нажимать, можете нарваться на то, что станете хорошим дизайнером!

[@alexeybychkov_]

есть такое дело)

[@nexusway8640]

Контент настолько классный, что 10 минут проблем со звуком - совсем не проблема. Спасибо вам!

[@alexeybychkov_]

звучит круто)

[@hummer4superman]

Работать и параллельно слушать стрим - сплошное удовольствие :) спасибо

[@alexeybychkov_]

Как подкаст 🤟

[@47Wad]

Хотелось бы серию таких стримов, или постоянные. Это же важно! Спасибо вам, Алексей и Дарья

[@alexeybychkov_]

Будем что-то думать)

[@rakyshkarakyshka9193]

Большое спасибо за возможность посмотреть стрим в записи, Даша молодец

[@alexeybychkov_]

спасибо за просмотр)

[@СергейШимко-ю5о]

Очень интересно было послушать верстальщика! Спасибо за такой эфир

[@alexeybychkov_]

Ну класс)

[@juloyi1624]

Отличное и очень полезное видео! Слушать одно удовольствие, спасибо, хочу еще!))

[@alexeybychkov_]

Супер) Рад, что нравится!

[@Weselkoe]

Суть в том, что верстальщикам удобно когда их работа упрощается и им не приходится делать "лишнюю" по их мнению работу, НО та же самая работа является лишней и для дизайнера и он тоже не хочет делать её считая, что это работа верстальщика.

[@alexeybychkov_]

и кто же тогда должен ее делать?)) Ну вот по инструкции если)

[@НиколайГурков]

Спасибо за интересный стрим, буду ждать еще)

[@alexeybychkov_]

спасибо за просмотр)

[@ВластелинКолец-б7н]

Вот таких бы стримов побольше!

[@alexeybychkov_]

Звучит хорошо)

[@ГалинаПодсвирова-ъ5щ]

Спасибо за эфир, очень полезно и интересно . 🔥

[@alexeybychkov_]

спасибо за просмотр)

[@IvanLao]

Очень полезный стрим! Спасибо в очередной раз за столько полезной инфы)

[@alexeybychkov_]

рад, что понравилось) Спасибо, что смотришь!

[@olharoshchyna7238]

Как всегда полезная инфа) Спасибо.

[@alexeybychkov_]

Супер)

[@ZorianaStadnik]

Спасибо Вам большое за полезный контент. У вас учиться - одно удовольствие!)

[@alexeybychkov_]

большое пожалуйста!

[@csc_annem]

полезно знать, что думают верстальщики, и как сделать дизайн так, чтобы они не говорили о вас плохого👍

[@alexeybychkov_]

100%)

[@ВикторияГратте]

Алексей, спасибо! Крутой стрим ! То что нужно для начинающих дизайнеров ! Будет здорово увидеть ещё совместные видео с верстальщиками !

[@alexeybychkov_]

пожалуйста) как-нибудь проведем снова

[@dianakurbatova1461]

Тема важна, чтобы с верстальщиками дружить) спасибо!)

[@alexeybychkov_]

100%

[@veekotova7719]

Класс! очень полезный выпуск! Почаще гостей приглашай!

[@alexeybychkov_]

Договорились)

[@MaryiaLadutska]

Спасибо большое- интересно и поучительно :)

[@alexeybychkov_]

Спасибо за просмотр)

[@АннаПетрова-у1ы]

Наконец-то посмотрела этот супер полезный стрим, спасибо!

[@alexeybychkov_]

спасибо за просмотр)

[@andrew-pro85]

Спасибо за интересный стрим, посмотрел полностью, правда в записи. Можно будет еще сделать совместный стрим, где дизайнер собирает макет, скажем пару-тройку различных блоков, а верстальщик потом верстает эти пару-тройку блоков.

[@alexeybychkov_]

Спасибо за просмотр)

[@slava_po]

Видос ооочень крутой! Леха и Дарья спасибо!

[@alexeybychkov_]

Ну класс) Спасибо за просмотр!

[@sovsem_ryzhaya]

Спасибо огромное за видео - оч крутой стрим! Интересно было посмотреть с точки зрения верстальщика - много полезного для себя вынесла 👍👍👍

[@alexeybychkov_]

супер) рад, что полезно!

[@shadowstyle1116]

Огонь! Спасибо очень полезно

[@alexeybychkov_]

супер)

[@yevtiekhova_]

Очень хорошо. Прям насладилась❤️

[@alexeybychkov_]

супер)

[@irynamelnychenko88]

Спасибо, очень познавательно!

[@alexeybychkov_]

пожалуйста!

[@Татьяна-ю1р2м]

Крутой формат. Спасибо большое Дарье и Леше за классный обзор важнейший вопросов взаимодействия верстальщика и дизайнера. Очень полезно. Лайк

[@alexeybychkov_]

пожалуйста!

[@ТаисияМильман]

ОЧЕНЬ, ОЧЕНЬ, ОЧЕНЬ, прям гиперполезный стрим!!! Дизайнер, действительно, должен думать о верстальщике, когда создает проект.

[@alexeybychkov_]

Ну класс) Спасибо за просмотр!

[@BizSpark_Ideas]

Выбирать размер макета десктопной версии, нужно исходя из целевой аудитории. Если большой процент юзеров заходят на сайт с 1366x768, то логично же проработать этот брэкпоинт, плюс не все юзеры на разрешении 1920 открывают браузер на весь экран. А возможно вообще стоит применить подход mobile first, если большинство ЦА идет на сайт с мобильного трафика.

[@alexeybychkov_]

Выбирать нужно ширину контента, а не ширину файла. Это огромная разница. Как только дизайнеры это понимают -- они переходят на следующий уровень. Да и прорабатывать 1366 никто же и не запрещает) Только к проработанному контенту добавятся адекватные фоны под 1920, а не огрызки)

[@BizSpark_Ideas]

@@alexeybychkov_ Про ширину контента я и не писал, так как по умолчанию это должно быть понятно. На стриме была затронута тема, почему не все дизайнеры создают на 1920, вот я и попытался ответить. Любой дизайн сайта нужно создавать исходя из целей и глубокого анализа, а не потому, что у вас большой монитор и макет на 1920 выглядит лучше)))

[@alexeybychkov_]

Ааа да, это правильно))

[@alexeybychkov_]

@@serusok 3840 это и есть 1920 только с коэффициентом х2

[@BizSpark_Ideas]

@@serusok Для этого и проводят исследования перед проектом, конкуретные исследования, создают портреты ЦА, проектируют user Flow, на основе этого уже можно предположить ЦА и из каких устройств чаще всего будут попадать на сайт.

[@ЮляТимирязева-ф6ъ]

Очень полезный ролик!

[@alexeybychkov_]

супер

[@pridari]

Фил Хуг! Кажды совет- на вес золота!🥇🥇🥇

[@alexeybychkov_]

Фил Хуг!

[@ilmira8019]

Классный выпуск получился🔥

[@alexeybychkov_]

круто) Спасибо за просмотр!

[@mymir7445]

Спасибо за видео) иногда даже кажется что мечта стать дизайнером не такая уж и не достижимая🙏🏻🙏🏻🙏🏻

[@alexeybychkov_]

Пожалуйста) Да, главное желание и практика! :)

[@mymir7445]

@@alexeybychkov_ а где можно узнать про ваши курсы? все-таки кажется на курсе быстрее и качественнее можно сделать портфолио пока сама придумаешь темы и дойдешь как сделать

[@alexeybychkov_]

@@mymir7445 вот тут alexeybychkov.study/

[@innamurzina5240]

Про 1440 и 1920 :) Я работаю на маке 15-inch, всегда делаю макеты от 1920 и ниже. Меня повеселило, как по разному работают дизайнеры. Я не представляю себе работу в 100% масштабе. Как коллаж на ватмане собирать, так получается? Палец постоянно на command+скролл мыши, я по другому не могу:) И были у меня большие мониторы dell, моноблоки, но я все время возвращаюсь к мобильности ноута:)

[@alexeybychkov_]

Про это и речь. Дизайнер делает так как ему удобно. А пользоваться сайтом будут другие на других мониторах

[@Alexandraizotova727]

Спасибо Алексей и Дарья 👏 очень интересно было узнать мнение верстальщика в отдельных случаях) хороший дизайнер должен учитывать, по возможности, нюансы верстки, я так думаю)

[@alexeybychkov_]

пожалуйста! 🥳

[@sashasiniytsin8951]

Про цветопередачу мониторов - у звукорежиссёров это зовётся shit control. Тестирование на ужасных устройствах. Думаю в дизайне тоже очень хорошая практика !

[@alexeybychkov_]

нууу лучше не на ужасных, а хотя бы на среднестатистических))

[@nikstark1546]

очень полезно спасибо!

[@alexeybychkov_]

Пожалуйста)

[@bezpravok]

Лютое видео как и всегда 👋🔥

[@bezpravok]

Нет не как всегда а новый уровень уже

[@alexeybychkov_]

ну класс)

[@Няшная-ч5л]

хотим еще такой же стрим с таким красивым верстальщиком)

[@alexeybychkov_]

и мне стрим понравился)

[@II-ky4hi]

input date и input time в последних версиях всех браузеров уже имеет аналог datepicker.

[@alexeybychkov_]

т.е. ничего показывать не нужно?

[@alexeybychkov_]

супер)

[@liudmyla4706]

Нормальный стрим, нормальный верстальщик. Не понимаю, чего бухтят в комментариях. Было бы интересно записать новый стрим, ведь фигма обновилась. Я подключаю к ноуту монитор Dell с регулируемой высотой. Что бы выставлять на уровне глаз, что бы шея не болела. Подключить второй монитор проблематично. Пробовала подключить один монитор через порт HDMI, а второй через USB. Не работает. Для второго все равно нужен переходник. Сложно. Или ноут не тянет.

[@alexeybychkov_]

Спасибо за просмотр)

[@sergeyprostobean4521]

Полезный стрим. Спасибо и Лехе, и Дарье. Критиков - на мыло...

[@alexeybychkov_]

Спасибо))

[@lenast_888]

По мониторами искренне удивилась и расстроилась. Ибо мне изначально повезло видимо. Сначала был филипс телевизор с функцией монитора, и на нём сидела лет 10. А потом приобрела 21 дюйм ЛОС тогда почти неизвестный и ничего не потеряла в передаче цвета. Я вышла из печатки, там цветопередача крайне важна и тем кто с цветом работает прям совет изучить какой цвет в какую какашку может перейти. Но расстроило то что я морочась и радуясь цветам, которые сделала могу не встретить того же восторга тупо из-за говноноута у заказчика, на что повлиять не в силах))

[@alexeybychkov_]

спасибо за коммент)

[@gromovsergey7858]

1920 макеты не всегда отображаются корректно на ноутбуках после верстки, если не отрисовать 1440 (возможно просто верстальщики не хотят заморачиваться с этим), а когда рисуешь на 1440 то каким-то волшебным образом все ок на всех разрешениях. Обычно рисую мобильную версию и 1440, проблем не наблюдаю.

[@alexeybychkov_]

ну так нужно же не контент делать 1920, а фоны :) А контент оставлять в пределах 1200, тогда все везде будет корректно отображено проблема только в том, что нужно еще уметь себя продавать :) сделать только 320 - это сделать в 3 раза меньше адаптивов = в 3 раза меньше денег за адаптивы заработать. Ну и сайт резинить без перестроений контента = делать его неудобным

[@МарияКузьмина-з3б]

Спасибо за запись стрима, благодарю Дарью и Алексея за полезные советы💗 Если я правильно поняла, то если я привыкла использовать текстовые стили, то не надо их отдельно во фрейме для верстальщика показывать? Здесь такая же логика, как и с цветами?

[@alexeybychkov_]

и тебе спасибо) вроде того, так верстальщику будет легче

[@serhiisolovtsev1952]

Очень крутое видео )))))

[@alexeybychkov_]

супер)

[@kiryu_shin6651]

Всегда делаю текстовые стили в фигме. Мало того, иногда я сам верстаю что-то простое, и делаю отдельную страницу со всеми классами.

[@alexeybychkov_]

круто!

[@Анна-х6ц8ч]

Спасибо за видео! У смартфонов цвета тоже очень сильно отличаются... Смотришь в фигме одно, а на телефоне другой цвет как будто совсем. Еще у самсунгов, например, есть настройки экрана, что цвета делает сочнее...

[@alexeybychkov_]

Спасибо за просмотр)

[@alexeybychkov_]

Спасибо за просмотр)

[@ФабрикаКарт-й9х]

Я новичок случайно нашел ваш канал, хочу попробовать себя в дизайне сайтов. Подскажите в каких программах это делаете, или может у вас есть курс обучения

[@alexeybychkov_]

в фигме делаю тут подробности о курсе alexeybychkov.study/

[@ВалерияЗагребайлова]

Как можно заполучить текстовый файл с тем, как правильно называть блоки/слои и тд на английском?)

[@alexeybychkov_]

Поставить на паузу и сделать скриншот :)

[@wooddiy7974]

Можно звук погромче, ведущего вообще не слышно

[@alexeybychkov_]

да я там накосячил со звуком)

[@urmichk.7241]

Мне кажется в некоторых местах Дарья не смогла правильно изложить суть проблемы, особенно с дроп даунами и сетками...

[@alexeybychkov_]

Может переволновалась)

[@tishhhenko]

Вторую часть изображения с девушкой можно было за пару кликов продлить в фотошопе)

[@alexeybychkov_]

фотошоп магёт)

[@musicalhotel]

Так я так и не понял, 1920 - это позволительно или нет?) Лично для меня имеет разницу тогда, когда мне нужен широкий или узкий сайт...т.е. если мне хочется широкий сайт, много контента - ставлю 1980, а если узкий и минимальное кол-во контента - 1440..вот думаю, это глупо или тут дело в удобстве?

[@alexeybychkov_]

ты говоришь про ширину контента (от края текста до края текста). А 1920 - это ширина файла)

[@liudmyla4706]

Не поняла, где 1980 выставляется?

[@astrology_money]

Что значит не любят. Да чтобы они делали без дизайнеров)))))

[@alexeybychkov_]

Хороший вопрос))

[@civic6127]

Зарабатывали бы больше, раньше сайты без дизайнеров верстали)

[@astrology_money]

@@civic6127 верстальщик вымирающая профессия.

[@civic6127]

@@astrology_money а кто макеты с фигмы верстать будет?

[@astrology_money]

@@civic6127 я имею ввиду, верстальщик, как единственный навык. Сейчас нужно быть либо дизайнером-верстальщиком, либо программистом-верстальщиком. Просто верстальщиком на икорку не заработать)))

[@alex_magdich]

Не смог досмотреть до конца. Очень бесит постоянные "ааа" верстальщицы...

[@alexeybychkov_]

Слушай, я иногда свои первые ролики смотрю, там совсем все плохо) На камеру общаться с непривычки - это стресс. Многие вообще боятся или стесняются показаться и что-то рассказать. А Дарья молодец!

[@alex_magdich]

Согласен, Дарья молодец. Все обсуждения по делу. Я сам front-end developer так что понравилась такая коллаборация. Тут речь в целом о впечатлениях. А так мне очень нравятся Ваши разборы работ. Спасибо за контент!)

[@alexeybychkov_]

рад, что нравится)

[@RiLelBeautyBlogger]

очень извиняюсь, Александр) сама такое не люблю, тоже со стороны вижу это, но пока говорю - плохо контролирую речь

[@romanyako]

Почему фигма а не XD?

[@alexeybychkov_]

не знаю, так сложилось)

[@romanyako]

@@alexeybychkov_ А фигма поддерживает XD

[@karinamag393]

как верстальщик она чет не нрава. А так спасибо вам Алексей за этот контент

[@alexeybychkov_]

Стрим старый, может что не актуально уже стало. А в чем не права?

[@karinamag393]

@@alexeybychkov_ на пару моментах уловила! скажу вам

[@alekjaere]

Спасибо за проделанную работу и исчерпывающие объяснения. Ваш труд помогает мне найти свое место в профессии.

[@alexeybychkov_]

Спасибо за просмотр)

[@andrewstarcev]

1:18:32 А я бы смотрел и 5 часовой стрим в записи)) Особенно когда работаешь, а на фоне ваш стрим

[@alexeybychkov_]

Знаю, что многие мои прямые эфиры в инстаграме слушают как подкасты)

[@Убативмашине]

Днем увидел анонс, что стрим в 19:00, нажал "напомнить" и даже навел будильник, захожу в 19:05, а стрима то нету. Захожу на канал, тоже ничего, обновил спустя 10 минут, тоже самое. Теперь смотрю "Трансляция началась 2 часа назад", значит все-таки он был, а ютуб меня решил сегодня обделить))

[@alexeybychkov_]

Не, это я протупил =( Впервые проводил совместный стрим, слишком много всего нужно было запустить и нажать. Я же еще и стримы всегда проводил в 1 микрофон. А тут 2 источника. В итоге первых минут 10 оказывается Дарью слышно не было, потом включил - оказалось громко. Причем мы два раза созванивались, все протестировать. Но мы то друг друга изначально и слышали, а третьего у нас не было, чтобы со стороны послушать) А потом прочитал, что стрим у меня в доступе по ссылке стоит почему-то. Я еще думал - где все ) В общем первых минут 10-15 одни косяки =(

[@ВоинственныйХомяк-к8р]

Работая в компании, где заключаются договора на оказание услуги по вёрстке сайта, крайне опрометчиво верстать не по Pixe lPerfect, так при возникновении спорных вопросах, заказчик будет ссылаться на приложении к договору, где присутствуют соответствующие превьюшки. И если превью не будет соответствовать, компания заказавшая сайт будет сравнивать результат под лупой (а договоре указывается порог несовпадения +- 5, 10px), то есть основания отказаться от проделанной вами работы, так как она не соответствует приложению к договору, и такая компания любо физлицо будут правы. Нужно верстать по pixel perfect, если делаешь не для себя или не по договору

[@alexeybychkov_]

Спасибо за коммент!

[@outofrange9100]

Не во всех компаниях требуют пиксель перфект, пиксель перфект, на самом деле, это издевательство и над дизайнером, и над разработчиком. В хороших современных компаниях достаточно налажены процессы разработки и есть понимание, как работают сайты и адаптивная верстка

[@outofrange9100]

Не во всех компаниях требуют пиксель перфект, пиксель перфект, на самом деле, это издевательство и над дизайнером, и над разработчиком. В хороших современных компаниях достаточно налажены процессы разработки и есть понимание, как работают сайты и адаптивная верстка

[@rakyshkarakyshka9193]

Большое спасибо за возможность пересмотреть стрим в записи и что-то освежить в памяти

[@alexeybychkov_]

спасибо за комменты)

[@alexfry1107]

Профессиональный верстальщик называет разрешение экрана "расширением"... мда...

[@alexeybychkov_]

Ой да ладно тебе, бывает в разговоре слова путаются и ты не замечаешь. А потом монтируешь ролик и смешно со стороны, когда смотришь)

[@nata_nativ]

До недавнего времени я сама рисовала сайт и сама его верстала. Рисовала так, как потом смогла бы сама сверстать и часто в вёрстке было то, чего не было в "картинке". Меня это устраивало, устраивало и руководство компании. Недавно в компаниб взяли несколько программистов, и одиному пришлось отдать свою лицензию на VS. Теперь к вёрстке у меня досиупа нет. Верстаеет по моим картинкам программист-вебовец. И тут вышел основной затык.... По вашим урокам учусь делать все понятные элементы, анамирую кнопки и переключатели, прорисовыааю все, что можно порисовать. Но верстальщик все равно Верстаеет так, как ему удобно. Отступы делает свои и часто даже не одинаковые по всем страницам. Вплоть до того, что кнопки у него разные... И вот вопрос руководства почему-то ко мне, как к дизайнеру..... Это какой сюр. Алексей, у вас был опыт общения с верстальщика и по вашим проектам? На сколько Ваши проекты в вёрстке соответствуют картинке? Вы учите своих студентов отходить даже от собственных прототипов. Может и отклонение верстальщика от макета тоже норм и я зря нервничаю?

[@alexeybychkov_]

смотря кто верстает) есть двое постоянных верстальщиков - все чудесно получается. А бывает верстальщик со стороны, там беда))

[@ValerianDek]

Внимание, есть способ не ужимать прототип до экрана разрешения 1400. Справа сверху есть настройка fill to screen(что-то подобное) эта штука экрана.. с помощью этой штуки я делал макет сайта 1920х1080. На мониторе с разрешением 1280.720

[@ValerianDek]

Если что, эта штука находится в прототипировании

[@alexeybychkov_]

этим нельзя пользоваться, ведь все искажается и воспринимается совершенно в других размерах. Проверять макет надо только в 100% зуме

[@ValerianDek]

​@@alexeybychkov_ прошу прощения, я не знал об этом. но макет всёже получился неплохим по моим меркам

[@sergeyprostobean4521]

Пересмотрел. Освежил. Спасибо. Леха - молодец. Дарья - класс. Даже захотел снова к верстке вернуться.)

[@alexeybychkov_]

Супер) Спасибо за просмотр!

[@anku_onku]

Класс)) Очень полезное видео, было интересно послушать про все моменты) и девушка такая приятная 🤗

[@alexeybychkov_]

супер)

[@melonia7453]

а зачем кто-то делает дизайн в фотошопе, когда есть фигма?

[@alexeybychkov_]

Фигма же не всегда была) ролик старый

[@kseniyakseniya2400]

Подскажите пожалуйста - везде говорят что контейнер должен быть 1200 и для 1400 и для 1920, но как правильно отрисовать, если я хочу расположить контент от края до края экрана, с маленькими отступами по краям? Все равно брать контейнер 1200, а верстальщик потом масштабирует на весь экран? Или мне нужно брать другой контейнер в макете?

[@alexeybychkov_]

На канале есть ролики про секту (новый курс по Фигме) - подробно все рассказал

[@kseniyakseniya2400]

@@alexeybychkov_ посмотрю, спасибо!

[@ИринаКлимова-ф9ж]

Очень интересно посмотреть на другую сторону работы с сайтом) Спасибо за стрим🙌

[@alexeybychkov_]

пожалуйста)

[@AnastasiyaMD]

О, спасибо!! Крутое видео записали!

[@alexeybychkov_]

пожалуйста!

[@SigalitaSulmana]

Спасибо! Очень полезно

[@alexeybychkov_]

пожалуйста!

[@Polina_Vasilevskaya]

Спасибо!!!🤗

[@alexeybychkov_]

пожалуйста!

[@ЕвгенийХориков-щ8ю]

В стриме, часто мелькает макет с иллюстрацией стола с людьми - эти иллюстрации заказчик предоставлял, или Алексей сам их рисовал, или Алексей по заданию заказчика передавал эту работу иллюстратору? Как это вообще обычно бывает?

[@alexeybychkov_]

Алексей не умеет рисовать иллюстрации)) он совсем не иллюстратор) Обычно на стоках покупаются изображения для макета, либо с бесплатных

[@radadara4026]

Привет. По поводу 1440 пик. Это заложено в Фигме. Нет возможности показать скриншот.

[@alexeybychkov_]

привет. В фигме любой ширины макет можно создать

[@Илья-л7п2ъ]

Многое не знал, класс, спасибо!)

[@alexeybychkov_]

спасибо за просмотр)

[@kseniyaalive3772]

Team people MANS? Чего:) men

[@alexeybychkov_]

ага

[@kseniyaalive3772]

@@alexeybychkov_ извини) я просто так выделила ошибку, это не ор:)