Как подготовить макет к верстке? За что верстальщики не любят дизайнеров? Стрим #15
HTML-код
- Опубликовано: 9 июл 2024
- #alexeybychkov #ityoutubersru #webdesign
Совместный стрим с верстальщиком: как подготовить макет к верстке? За что верстальщики не любят дизайнеров?
Дария - веб разработчик, фул-тайм и фриланс, опыт работы 6 лет в общей сложности, ранее работала сео-специалистом. Любит писать чистый код без костылей:)
👉 Инстаграм: / rilelbeauty
👉 Почта: dariialelyukh@gmail.com
Доступ к закрытом чату: советы, лайфхаки, ответы на вопросы, ранний доступ к видео и тд:
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: / alexeybychkov_
👉 Беханс: www.behance.net/alexeybychkov_
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: / dsgn.tips
👉 Твитор: / _alexeybychkov
0:00 - начало
5:40 - про Datepicker
11:45 - дизайн сверстали, а заказчик заменил фото и...
14:40 - про цветовые стили
19:38 - сохраняйте исходники изображений
27:45 - почему 1440, а не 1920? wtf?
33:05 - разнообразие форматов
35:08 - нужен ли Style Guide?
42:42 - про универсальность блоков
44:50 - нет размеров контейнеров
48:10 - про perfect pixel
52:28 - как называть слои?
58:45 - про внутренние страницы (заказчикам)
1:00:40 - как показать анимацию
1:01:50 - ховеры на мобилках
1:09:30 - про цветопередачу мониторов
1:13:30 - замена картинок заказчиком
1:19:19 - отсутствие дизайна дроп-даун меню
1:30:45 - самые популярные косяки в дизайне
1:31:55 - про сетки
1:39:59 - адаптивная верстка блоков
1:43:30 - подписывайтесь на инстаргам Дарьи
1:45:50 - как обговаривается цена на верстку?
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 35 лет, женат на прекрасном человеке и у нас чудесная дочка. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 17 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
Подробнее обо мне - alexeybychkov.com/about/
17 лет опыта - alexeybychkov.com/experience/
Пишу - alexeybychkov.com/blog/
Дизайню - alexeybychkov.com/cases/
Отзывы - clck.ru/K5Mcc
Мои книги:
«Дизайн и фриланс. Начало» - clck.ru/JE8ku
«Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
Хелп по Фигме: уроки, видео, советы, фишки - figma.help
Мир фейсов: faces.world/
#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance
ПРОСТИТЕ за первых 10 минут технических косяков со звуком, громкостью и доступом по ссылке)
Спасибо Дарье за стрим! 👉 Инстаграм: instagram.com/rilelbeauty/
Пишите в комментах какие еще вопросы по верстке вас интересуют!
Этот тип видео - просто маст хев для тех, кто учится дизайну, особенно самостоятельно. Искала подобное очень давно, спасибо за хороший контент) Еще было бы круто сделать разбор дизайнов с верстальщиком, хотя бы 2-3 штуки
спасибо за просмотр)
Осторожно! Если будете часто заходить на этот канал и видосики смотреть, а потом еще после этого и кнопки в фигме нажимать, можете нарваться на то, что станете хорошим дизайнером!
есть такое дело)
Контент настолько классный, что 10 минут проблем со звуком - совсем не проблема. Спасибо вам!
звучит круто)
Работать и параллельно слушать стрим - сплошное удовольствие :) спасибо
Как подкаст 🤟
Спасибо за проделанную работу и исчерпывающие объяснения. Ваш труд помогает мне найти свое место в профессии.
Спасибо за просмотр)
Большое спасибо за возможность пересмотреть стрим в записи и что-то освежить в памяти
спасибо за комменты)
ОЧЕНЬ, ОЧЕНЬ, ОЧЕНЬ, прям гиперполезный стрим!!! Дизайнер, действительно, должен думать о верстальщике, когда создает проект.
Ну класс) Спасибо за просмотр!
Большое спасибо за возможность посмотреть стрим в записи, Даша молодец
спасибо за просмотр)
Суть в том, что верстальщикам удобно когда их работа упрощается и им не приходится делать "лишнюю" по их мнению работу, НО та же самая работа является лишней и для дизайнера и он тоже не хочет делать её считая, что это работа верстальщика.
и кто же тогда должен ее делать?)) Ну вот по инструкции если)
Хотелось бы серию таких стримов, или постоянные. Это же важно!
Спасибо вам, Алексей и Дарья
Будем что-то думать)
Отличное и очень полезное видео! Слушать одно удовольствие, спасибо, хочу еще!))
Супер) Рад, что нравится!
Спасибо за интересный стрим, буду ждать еще)
спасибо за просмотр)
Очень интересно было послушать верстальщика! Спасибо за такой эфир
Ну класс)
Как всегда полезная инфа) Спасибо.
Супер)
Спасибо Вам большое за полезный контент. У вас учиться - одно удовольствие!)
большое пожалуйста!
Тема важна, чтобы с верстальщиками дружить) спасибо!)
100%
Спасибо за эфир, очень полезно и интересно . 🔥
спасибо за просмотр)
Очень полезный стрим! Спасибо в очередной раз за столько полезной инфы)
рад, что понравилось) Спасибо, что смотришь!
полезно знать, что думают верстальщики, и как сделать дизайн так, чтобы они не говорили о вас плохого👍
100%)
Алексей, спасибо! Крутой стрим ! То что нужно для начинающих дизайнеров ! Будет здорово увидеть ещё совместные видео с верстальщиками !
пожалуйста) как-нибудь проведем снова
Спасибо большое- интересно и поучительно :)
Спасибо за просмотр)
Очень интересно посмотреть на другую сторону работы с сайтом) Спасибо за стрим🙌
пожалуйста)
Очень хорошо. Прям насладилась❤️
супер)
Огонь! Спасибо очень полезно
супер)
Наконец-то посмотрела этот супер полезный стрим, спасибо!
спасибо за просмотр)
Класс! очень полезный выпуск! Почаще гостей приглашай!
Договорились)
Вот таких бы стримов побольше!
Звучит хорошо)
Видос ооочень крутой! Леха и Дарья спасибо!
Ну класс) Спасибо за просмотр!
Пересмотрел.
Освежил.
Спасибо.
Леха - молодец. Дарья - класс.
Даже захотел снова к верстке вернуться.)
Супер) Спасибо за просмотр!
Крутой формат. Спасибо большое Дарье и Леше за классный обзор важнейший вопросов взаимодействия верстальщика и дизайнера. Очень полезно. Лайк
пожалуйста!
О, спасибо!! Крутое видео записали!
пожалуйста!
Класс)) Очень полезное видео, было интересно послушать про все моменты) и девушка такая приятная 🤗
супер)
Фил Хуг! Кажды совет- на вес золота!🥇🥇🥇
Фил Хуг!
Спасибо огромное за видео - оч крутой стрим! Интересно было посмотреть с точки зрения верстальщика - много полезного для себя вынесла 👍👍👍
супер) рад, что полезно!
Спасибо! Очень полезно
пожалуйста!
Многое не знал, класс, спасибо!)
спасибо за просмотр)
очень полезно спасибо!
Пожалуйста)
Классный выпуск получился🔥
круто) Спасибо за просмотр!
Спасибо за интересный стрим, посмотрел полностью, правда в записи. Можно будет еще сделать совместный стрим, где дизайнер собирает макет, скажем пару-тройку различных блоков, а верстальщик потом верстает эти пару-тройку блоков.
Спасибо за просмотр)
Лютое видео как и всегда 👋🔥
Нет не как всегда а новый уровень уже
ну класс)
Нормальный стрим, нормальный верстальщик. Не понимаю, чего бухтят в комментариях. Было бы интересно записать новый стрим, ведь фигма обновилась. Я подключаю к ноуту монитор Dell с регулируемой высотой. Что бы выставлять на уровне глаз, что бы шея не болела. Подключить второй монитор проблематично. Пробовала подключить один монитор через порт HDMI, а второй через USB. Не работает. Для второго все равно нужен переходник. Сложно. Или ноут не тянет.
Спасибо за просмотр)
Очень полезный ролик!
супер
Спасибо Алексей и Дарья 👏 очень интересно было узнать мнение верстальщика в отдельных случаях) хороший дизайнер должен учитывать, по возможности, нюансы верстки, я так думаю)
пожалуйста! 🥳
1:18:32 А я бы смотрел и 5 часовой стрим в записи)) Особенно когда работаешь, а на фоне ваш стрим
Знаю, что многие мои прямые эфиры в инстаграме слушают как подкасты)
Спасибо!!!🤗
пожалуйста!
Про цветопередачу мониторов - у звукорежиссёров это зовётся shit control. Тестирование на ужасных устройствах. Думаю в дизайне тоже очень хорошая практика !
нууу лучше не на ужасных, а хотя бы на среднестатистических))
Днем увидел анонс, что стрим в 19:00, нажал "напомнить" и даже навел будильник, захожу в 19:05, а стрима то нету.
Захожу на канал, тоже ничего, обновил спустя 10 минут, тоже самое.
Теперь смотрю "Трансляция началась 2 часа назад", значит все-таки он был, а ютуб меня решил сегодня обделить))
Не, это я протупил =( Впервые проводил совместный стрим, слишком много всего нужно было запустить и нажать. Я же еще и стримы всегда проводил в 1 микрофон. А тут 2 источника. В итоге первых минут 10 оказывается Дарью слышно не было, потом включил - оказалось громко. Причем мы два раза созванивались, все протестировать. Но мы то друг друга изначально и слышали, а третьего у нас не было, чтобы со стороны послушать) А потом прочитал, что стрим у меня в доступе по ссылке стоит почему-то. Я еще думал - где все ) В общем первых минут 10-15 одни косяки =(
Выбирать размер макета десктопной версии, нужно исходя из целевой аудитории. Если большой процент юзеров заходят на сайт с 1366x768, то логично же проработать этот брэкпоинт, плюс не все юзеры на разрешении 1920 открывают браузер на весь экран. А возможно вообще стоит применить подход mobile first, если большинство ЦА идет на сайт с мобильного трафика.
Выбирать нужно ширину контента, а не ширину файла. Это огромная разница. Как только дизайнеры это понимают -- они переходят на следующий уровень. Да и прорабатывать 1366 никто же и не запрещает) Только к проработанному контенту добавятся адекватные фоны под 1920, а не огрызки)
@@alexeybychkov_ Про ширину контента я и не писал, так как по умолчанию это должно быть понятно. На стриме была затронута тема, почему не все дизайнеры создают на 1920, вот я и попытался ответить. Любой дизайн сайта нужно создавать исходя из целей и глубокого анализа, а не потому, что у вас большой монитор и макет на 1920 выглядит лучше)))
Ааа да, это правильно))
@@serusok 3840 это и есть 1920 только с коэффициентом х2
@@serusok Для этого и проводят исследования перед проектом, конкуретные исследования, создают портреты ЦА, проектируют user Flow, на основе этого уже можно предположить ЦА и из каких устройств чаще всего будут попадать на сайт.
Спасибо за видео) иногда даже кажется что мечта стать дизайнером не такая уж и не достижимая🙏🏻🙏🏻🙏🏻
Пожалуйста) Да, главное желание и практика! :)
@@alexeybychkov_ а где можно узнать про ваши курсы? все-таки кажется на курсе быстрее и качественнее можно сделать портфолио пока сама придумаешь темы и дойдешь как сделать
@@mymir7445 вот тут alexeybychkov.study/
По мониторами искренне удивилась и расстроилась. Ибо мне изначально повезло видимо. Сначала был филипс телевизор с функцией монитора, и на нём сидела лет 10. А потом приобрела 21 дюйм ЛОС тогда почти неизвестный и ничего не потеряла в передаче цвета. Я вышла из печатки, там цветопередача крайне важна и тем кто с цветом работает прям совет изучить какой цвет в какую какашку может перейти. Но расстроило то что я морочась и радуясь цветам, которые сделала могу не встретить того же восторга тупо из-за говноноута у заказчика, на что повлиять не в силах))
спасибо за коммент)
Очень крутое видео )))))
супер)
Полезный стрим. Спасибо и Лехе, и Дарье.
Критиков - на мыло...
Спасибо))
хотим еще такой же стрим с таким красивым верстальщиком)
и мне стрим понравился)
Про 1440 и 1920 :) Я работаю на маке 15-inch, всегда делаю макеты от 1920 и ниже. Меня повеселило, как по разному работают дизайнеры. Я не представляю себе работу в 100% масштабе. Как коллаж на ватмане собирать, так получается? Палец постоянно на command+скролл мыши, я по другому не могу:) И были у меня большие мониторы dell, моноблоки, но я все время возвращаюсь к мобильности ноута:)
Про это и речь. Дизайнер делает так как ему удобно. А пользоваться сайтом будут другие на других мониторах
До недавнего времени я сама рисовала сайт и сама его верстала. Рисовала так, как потом смогла бы сама сверстать и часто в вёрстке было то, чего не было в "картинке". Меня это устраивало, устраивало и руководство компании. Недавно в компаниб взяли несколько программистов, и одиному пришлось отдать свою лицензию на VS. Теперь к вёрстке у меня досиупа нет. Верстаеет по моим картинкам программист-вебовец. И тут вышел основной затык....
По вашим урокам учусь делать все понятные элементы, анамирую кнопки и переключатели, прорисовыааю все, что можно порисовать. Но верстальщик все равно Верстаеет так, как ему удобно. Отступы делает свои и часто даже не одинаковые по всем страницам. Вплоть до того, что кнопки у него разные...
И вот вопрос руководства почему-то ко мне, как к дизайнеру.....
Это какой сюр.
Алексей, у вас был опыт общения с верстальщика и по вашим проектам? На сколько Ваши проекты в вёрстке соответствуют картинке?
Вы учите своих студентов отходить даже от собственных прототипов. Может и отклонение верстальщика от макета тоже норм и я зря нервничаю?
смотря кто верстает) есть двое постоянных верстальщиков - все чудесно получается. А бывает верстальщик со стороны, там беда))
Спасибо за запись стрима, благодарю Дарью и Алексея за полезные советы💗
Если я правильно поняла, то если я привыкла использовать текстовые стили, то не надо их отдельно во фрейме для верстальщика показывать? Здесь такая же логика, как и с цветами?
и тебе спасибо) вроде того, так верстальщику будет легче
Я новичок случайно нашел ваш канал, хочу попробовать себя в дизайне сайтов. Подскажите в каких программах это делаете, или может у вас есть курс обучения
в фигме делаю
тут подробности о курсе alexeybychkov.study/
input date и input time в последних версиях всех браузеров уже имеет аналог datepicker.
т.е. ничего показывать не нужно?
супер)
Подскажите пожалуйста - везде говорят что контейнер должен быть 1200 и для 1400 и для 1920, но как правильно отрисовать, если я хочу расположить контент от края до края экрана, с маленькими отступами по краям? Все равно брать контейнер 1200, а верстальщик потом масштабирует на весь экран? Или мне нужно брать другой контейнер в макете?
На канале есть ролики про секту (новый курс по Фигме) - подробно все рассказал
@@alexeybychkov_ посмотрю, спасибо!
1920 макеты не всегда отображаются корректно на ноутбуках после верстки, если не отрисовать 1440 (возможно просто верстальщики не хотят заморачиваться с этим), а когда рисуешь на 1440 то каким-то волшебным образом все ок на всех разрешениях. Обычно рисую мобильную версию и 1440, проблем не наблюдаю.
ну так нужно же не контент делать 1920, а фоны :) А контент оставлять в пределах 1200, тогда все везде будет корректно отображено
проблема только в том, что нужно еще уметь себя продавать :) сделать только 320 - это сделать в 3 раза меньше адаптивов = в 3 раза меньше денег за адаптивы заработать. Ну и сайт резинить без перестроений контента = делать его неудобным
Всегда делаю текстовые стили в фигме. Мало того, иногда я сам верстаю что-то простое, и делаю отдельную страницу со всеми классами.
круто!
Спасибо за видео!
У смартфонов цвета тоже очень сильно отличаются...
Смотришь в фигме одно, а на телефоне другой цвет как будто совсем. Еще у самсунгов, например, есть настройки экрана, что цвета делает сочнее...
Спасибо за просмотр)
Спасибо за просмотр)
Работая в компании, где заключаются договора на оказание услуги по вёрстке сайта, крайне опрометчиво верстать не по Pixe lPerfect, так при возникновении спорных вопросах, заказчик будет ссылаться на приложении к договору, где присутствуют соответствующие превьюшки. И если превью не будет соответствовать, компания заказавшая сайт будет сравнивать результат под лупой (а договоре указывается порог несовпадения +- 5, 10px), то есть основания отказаться от проделанной вами работы, так как она не соответствует приложению к договору, и такая компания любо физлицо будут правы.
Нужно верстать по pixel perfect, если делаешь не для себя или не по договору
Спасибо за коммент!
Не во всех компаниях требуют пиксель перфект, пиксель перфект, на самом деле, это издевательство и над дизайнером, и над разработчиком. В хороших современных компаниях достаточно налажены процессы разработки и есть понимание, как работают сайты и адаптивная верстка
Не во всех компаниях требуют пиксель перфект, пиксель перфект, на самом деле, это издевательство и над дизайнером, и над разработчиком. В хороших современных компаниях достаточно налажены процессы разработки и есть понимание, как работают сайты и адаптивная верстка
Как можно заполучить текстовый файл с тем, как правильно называть блоки/слои и тд на английском?)
Поставить на паузу и сделать скриншот :)
Внимание, есть способ не ужимать прототип до экрана разрешения 1400. Справа сверху есть настройка fill to screen(что-то подобное) эта штука экрана.. с помощью этой штуки я делал макет сайта 1920х1080. На мониторе с разрешением 1280.720
Если что, эта штука находится в прототипировании
этим нельзя пользоваться, ведь все искажается и воспринимается совершенно в других размерах. Проверять макет надо только в 100% зуме
@@alexeybychkov_ прошу прощения, я не знал об этом. но макет всёже получился неплохим по моим меркам
Привет. По поводу 1440 пик. Это заложено в Фигме. Нет возможности показать скриншот.
привет. В фигме любой ширины макет можно создать
Так я так и не понял, 1920 - это позволительно или нет?)
Лично для меня имеет разницу тогда, когда мне нужен широкий или узкий сайт...т.е. если мне хочется широкий сайт, много контента - ставлю 1980, а если узкий и минимальное кол-во контента - 1440..вот думаю, это глупо или тут дело в удобстве?
ты говоришь про ширину контента (от края текста до края текста). А 1920 - это ширина файла)
Не поняла, где 1980 выставляется?
Вторую часть изображения с девушкой можно было за пару кликов продлить в фотошопе)
фотошоп магёт)
Можно звук погромче, ведущего вообще не слышно
да я там накосячил со звуком)
Что значит не любят. Да чтобы они делали без дизайнеров)))))
Хороший вопрос))
Зарабатывали бы больше, раньше сайты без дизайнеров верстали)
@@civic6127 верстальщик вымирающая профессия.
@@astrology_money а кто макеты с фигмы верстать будет?
@@civic6127 я имею ввиду, верстальщик, как единственный навык. Сейчас нужно быть либо дизайнером-верстальщиком, либо программистом-верстальщиком. Просто верстальщиком на икорку не заработать)))
В стриме, часто мелькает макет с иллюстрацией стола с людьми - эти иллюстрации заказчик предоставлял, или Алексей сам их рисовал, или Алексей по заданию заказчика передавал эту работу иллюстратору? Как это вообще обычно бывает?
Алексей не умеет рисовать иллюстрации)) он совсем не иллюстратор) Обычно на стоках покупаются изображения для макета, либо с бесплатных
как верстальщик она чет не нрава. А так спасибо вам Алексей за этот контент
Стрим старый, может что не актуально уже стало. А в чем не права?
@@alexeybychkov_ на пару моментах уловила! скажу вам
Мне кажется в некоторых местах Дарья не смогла правильно изложить суть проблемы, особенно с дроп даунами и сетками...
Может переволновалась)
Почему фигма а не XD?
не знаю, так сложилось)
@@alexeybychkov_ А фигма поддерживает XD
Team people MANS? Чего:) men
ага
@@alexeybychkov_ извини) я просто так выделила ошибку, это не ор:)
Профессиональный верстальщик называет разрешение экрана "расширением"... мда...
Ой да ладно тебе, бывает в разговоре слова путаются и ты не замечаешь. А потом монтируешь ролик и смешно со стороны, когда смотришь)
Не смог досмотреть до конца. Очень бесит постоянные "ааа" верстальщицы...
Слушай, я иногда свои первые ролики смотрю, там совсем все плохо) На камеру общаться с непривычки - это стресс. Многие вообще боятся или стесняются показаться и что-то рассказать. А Дарья молодец!
Согласен, Дарья молодец. Все обсуждения по делу. Я сам front-end developer так что понравилась такая коллаборация. Тут речь в целом о впечатлениях. А так мне очень нравятся Ваши разборы работ. Спасибо за контент!)
рад, что нравится)
очень извиняюсь, Александр) сама такое не люблю, тоже со стороны вижу это, но пока говорю - плохо контролирую речь
а зачем кто-то делает дизайн в фотошопе, когда есть фигма?
Фигма же не всегда была) ролик старый
Спасибо, очень познавательно!
пожалуйста!