Очень интересно послушать про вёрстку сайтов которые готовятся для awwwards. Как дизы сотрудничают с верстальщиками. Как устроены сетки и есть ли они вообще, т.к. ощущение что их там вообще нет. В каких прогах верстают ребята, ток в vs или ещё в других. В каких прогах делают анимации и кто их делает. Какие то мелочи, именно в сложных и сочных сайтах. Так же, было бы интересно послушать про то как устроена система работы таких студий. У тебя уже было интервью с Obys, но хотелось бы узнать подробнее про то что написал выше. Кто ещё хочет такой видосик напишите вопросы в ответы, что бы Further было легче понять на какие вопросы можно было поспрашивать ребят. Очень надеюсь то что снимешь такой видос)
Интересно, как решаются вопросы с анимациями на таких сайтах, (чтобы разработчики понимали, где и как они должны работать). Дизайнер делает анимацию макета после утверждения дизайна или поэтапно в процессе работы над проектом? Анимирует всё дело тот же дизайнер, который создавал юай или отдельный человек, как они в свою очередь, согласуют свою работу? 🤔
@@nevmyr мне кажется, кто как хочет, так и др... налаживает рабочий процесс. Например у нас на проекте за анимацию отвечает тот же дизайнер, которые ее придумал. Более того, он должен предоставить раскадровку и референс или собрать анимацию где ему будет удобно. Мой личный опыт подсказывает, что доверять верстальщикам самим придумывать правила поведения для элементов сайта или анимацию - очень плохая идея. Все что для дизайна важно, должно быть так или иначе жестко определено и задокументированно, а все что не задукоментированно - не важно и может быть изменено в угоду удобства\валидности\семантичности верстки.
А в чем проблема посмотреть отступ зажав alt? Зачем на глаз? В чем проблема экспортировать изображение из группы, чтобы слои слились в один? Лень делать параллакс? Ну там давайте вообще без эффектов делать деревянные сайты просто чтобы верстальщикам было меньше работы). В дизайне есть понятие оптическая компенсация, если вам оно не знакомо изучите, тогда поймете почему круглые иконки могут быть на пару пикселей больше квадратных. Их обычно оборачивают в одинакового размера фреймы, но если вы лезете прям до самой иконки, как это понятно из видео, то видимо сами не умеете пользоваться фигмой и экспортить объекты правильно))
8 минут нытья от junior верстальщика, на junior дизайнера. Единственная реальная проблема в видео - полное отсутсвие привязки к сетке. На все остальное мне было бы совершенно насрать, клиент всеравно платит почасовую ставку.
Я не поверю, что ты не понял, что «нытьё» здесь только для иронии. Задача же была показать дизайнерам, что некоторые вещи делать не обязательно и наоборот, есть важные нюансы, которые должны быть учтены. Я стараюсь не использовать подход в работе: мне насрать что делать, если клиент платит. Мне как клиенту было бы страшно обратиться к: врачу, юристу, строителю, дизайнеру - с таким подходом в работе.
@@DoFurther если ты хочешь именно научить дизайнера как правильно нарисовать сайт за счет зананий смежной профессии, то для начала посмотри гайд по верстки книги или брошуре, и увидешь что там точно такая же база. Совершенно идентичная, любую хорошую книгу можно сверстать в сайт как бы безумно она не выглядела по своему устройству, потому что там человек продумал ее структуру. Так вот, если дизайнер получил образование и до сих пор не может нормально сверстать сайт - то ты никогда его уже ничему не научишь, он уже давно проф. непригодный. И это я не к тому что книга или брошура сложней, но я не поверю что человек который зарабатывает дизайном на жизнь никогда не трогал inDesign.
Я сам начинал с верстки на html css, понял что это не мое и начал заниматься дизайном и тут мне здорово помогли навыки html, чтобы верстальщику было удобно работать и он не вставал в ступор после каждого блока, со словами что за ***дец
проблема в том, что многие дизайнеры не умеют в базовый html+css, отсюда все проблемы но в то же время, каждый верстальщик умеет в базовый "дизайн".... вывод: дизайнерам нужно проходить курсы базовой верстки
Точно, стань верстальщиком, изучи html, css, js и еще вагон сопутствующих технологий, потрать на это пару лет и тогда поймешь: это верстальщик ленивый или может наоборот. А может получиться так, что изучение верстки приведет к тому, что станешь реально хорошим дизайнером.
@@luxarmiger5729 нужно 3 года верстать по тому чтобы стать норм дизайнером. Поэтому не надо, для норм дизайнера нужно не учить верстку а взять контакт верстальщика и просто услышать пожелания и советы.
Это, кстати, работает и в обратную сторону) Если слишком бояться загрузить верстальщика, то появятся примитивные макеты. Круто, когда дизайнер знает все возможности платформы, для которой дизайнит
Тогда можно делать простецкий дизайн на уровне 00 ых или начала 10 х годов, вот тогда, да верстальщиков загружать не будут, надеюсь они там еще сериальчик будут смотреть параллельно, а дизайнеры не будут заморачиваться над дизайном, выгодно? Выгодно. Прогрессивно? Нет.
@@DoFurther вы упомянули поп апы, типа столько геморроя с ними, неужели на вебфлоу нет какого то плагина или решения для таких по сути стандартных блоков? в этом плане получается, даже с учетом всех ограничений, тильда рулит.
Еще есть "веселые" заказчики. Был опыт сотрудничества с заказчицей, которая умеет в дизайн полиграфии и решила что умеет в веб. Нужно было ее готовые макеты с шириной овер 4к рабочей области и в цмуке привести к более-менее верстабельному виду. У нее в макетах было все: разные отступы и в т.ч. вертикальные, десятичные размеры шрифтов, разной формы кропаные изображения, логически одинаковые заголовки, которые разные визуально от макета к макету. Вишенка на торте - исходники обязательно в ФШ и у нее ретина, а у меня нет) Работаю в фш, для показа джипеги макетов гружу в фигму))) Я просто проклинал все на свете, 10 раз ей пытался объяснить что принципы размещения и решения в ее макетах это просто неверстабельное *авно, показывал примеры моих макетов и результат их верстки, но она просто непробиваемая была. В итоге я просто сделал как она просила и на этом мои полномочия все. Оч жаль того, кто согласился это все верстать
в 2022 году если приносят дизайн в ФШ - можно сразу отказываться как по мне) Так как это либо дизайн собранный полиграфистом, либо каким-то древним динозавром.
Ох сколько я за все время встречал дизайнеров, которые творческие люди :) Ничего не имею против, них :) Но если это сложно для условного недельно/месячного проекта, то представте как это. сложно на более сложных и обьемных проектах! Меня часто вот выносили люди которые на больших проектах где мы сами пилили по сути UI либу для приложение под наш дизайн. Так вот когда они добавляют к примеру поведение кнопки на новой странице или какой-то модалке при наведении не темнее от главного цвета а к примеру, светлее... Казалось бы тю да что там, но по факту это уже другой компонент :) Новая кнопка которой еще не было :) Приходишь к ним и такой, "Че за фигня, походу бага", а тебе в ответ "Нет фича, а мы что так не можем?" И начинаешь обьяснять что всему должно быть аргументация, у нас утвержденный дизайн и UX тоже :) Ну в общем тратишь уйму времени чтобы обьяснить что надо использовать готовые компоненты и из них собирать мокапы а если нужна кнопка то нужно ее добавлять глобально и в UiKit тоже :) А не тупо типа сделай модалку а там вообще другое поведение... И все эстимации коту под хвост :) Ну в общем я никогда особо не злился на джунов, только если они на контакт ну совсем не идут. Мне более печально от опытных такой кейс ловить. ПС В целом думаю дизайнеру полезно немного разбираться в технической части, понимать как с этим дальше работать будут. Я хоть и фронт но смежные области иногда ресерчу. Дизайн, менеджмент, бэкенд. Настолько глубоко, чтобы понимать как это работает и чтобы это приносило пользу для моей основной деятельности. Спасибо за видео :)
Охохо, как мед на душу))) Некоторые дизайнеры не только не думают о тех. части, но и не учитывают то, как юзер будет пользоваться их дизайном. Одно слово - красиво. А толку от этого красиво, если не понять как этим пользоваться??? Мне один раз дизайнер, в ответ моим правкам по дизайну, привел в пример сайты awwwards. Типа, вон как у них все нестандартно, у нас также будет. Ага, ради бога, только не за верстку за 20к. После слов о цене и пару тонн аргументов, желание "сделать как на awwwards" сразу ушло. Кстати, дизайн там был далек от awwwards
@@aau8 ну если сайт делается для того чтобы попасть на awwwards, то там обычно удобство уходит на второй план. Ведь основная цель не удобство юзера - а получить награду>стать чуточку знаменитей>получить новых клиентов. Частая практика у молодых дизайн агентств, хотя есть некоторые которые на этом только и специализируются. Но у них и разработчики обычно свои, которые шарят всякие либы для всяких модных вау эффект. Другая беда - когда дизайнеры пытаются awwwards стиль применить везде. Сам раньше грешил этим, когда пытаешься аккуратность дизайна заместить креативом. С опытом переобулся наоборот в максимально аккуратные, минималистичные и понятные сайты. Ну и знать тех.часть для дизайнера я считаю мастхэв. Во-первых ты приходишь к верстальщику не с идеей в голове, а уже с референсами с codepen) Плюс доводить дизайн до идеала проще не условным "подвинь на 5 пикс тут", а через инспектор глянуть реально нужный отступ для элемента и скинуть уже куском CSS.
Странно, почему верстальщик, у которого свои задачи ходит и делает правки дизайнеру, который делал макет. Просто Если макет сделан, его утвердили выше стоящие люди, значит надо делать его (само собой если те для кого это все устраивает и это хоть немного нужно). Но приходи какой-то верстальщик, который говорит что это делать не будет, потому что испльзуется цвет которого он не видел раньше.. весьма странно, может тогда тебе стать дизайнером? Однако не исключенно что челики (дизайнеры), просто ничего не понимающие ду*рочки
Странно, почему верстальщик, у которого свои задачи ходит и делает правки дизайнеру, который делал макет. Просто Если макет сделан, его утвердили выше стоящие люди, значит надо делать его (само собой если те для кого это все устраивает и это хоть немного нужно). Но приходи какой-то верстальщик, который говорит что это делать не будет, потому что испльзуется цвет которого он не видел раньше.. весьма странно, может тогда тебе стать дизайнером? Однако не исключенно что челики (дизайнеры), просто ничего не понимающие ду*рочки
@@grechaa82вопрос вы работали на больших проектах? На самом деле такие кейсы вполне реальны. И все очень просто. Когда уже проведён бизнес анализ, написана спека, сделан UX, нарисовали UI. Расшили задачи и накидали спринтов на всю команду. И основной функционал допилили и сделали первый релиз. Тогда появляется время для второстепенных фичей. И чаще всего с проекта могут снять опытных дизайнеров на другой проект, особенно если это аутсорсовая компания. На проект могут поставить джуна, это не только дизайнеров касается. Но все же речь о них. Так вот как раз в таком случае это плодотворная среда для джуна. И не только джуна. Например просто челика который дизайнил раньше на фрилансе. Толковый, взяли на мидла к примеру. Но у него очень мало опыта в больших проектах и в команде. На счёт ‘ходит делать правки дизайнеру’ думаю вы не совсем внимательно прочитали мой коммент. ‘Что делать не будет, потому что используется цвет которого раньше не видел’ - комментарий на уровне челика который не шарит о чем говорит. Ну во первых я не про цвет говорил а его поведения. Думаю если бы вам знакома была эта тема такую хрень не писали бы. Во вторых да не буду верстать и не должен этого делать по нескольким причинам. Цвет должен быть утверждён, внесён в документацию как минимум UIKit. В эстимации задачи должен учитываться кейс реализации дополнительного компонента. Я писал выше что этого не учитывали. Но думаю тебе это все не знакомо, так что рекомендации свои оставь себе. Плюс есть такое понятие как софт скилы. В нормальных компаниях это учитывают и токсичных людей могут и кликнуть с команды какой бы крутой он спец не был бы. Так вот про софт скилы, одним из них является имя коммуникация. Ну объясню для маленьких, все делают ошибки. И дизайнеры и верстальщики и фронты ну тенденцию ты понял надеюсь. И в нормальной команде тот кто замечает ошибку должен о ней заявится на митах. В зависимости от проекта миты могут отличатся. Вот к примеру я на дейлике заявился и мы обсудили этот вопрос. Или ты думал я пешком к нему ходил дядя?
Спасибо за видео) Хотелось бы прокомментировать и поспорить с некоторыми моментами. В целом, с проблематикой согласен. Далеко не все дизайнеры, очевидно, грамотно работают с макетами. И всегда легко накреативить трендовые красивые штуки, не подумав о разработчиках... Тем не менее, к середине видео я стал несогласен с выдвигаемыми аргументами. Да, верстать куда легче, когда все красиво и четко расположено в контейнерах, но и верстальщик не должен злиться, что ему нужно добавить один паддинг) Это если я правильно понял суть вопроса, конечно. Также не соглашусь по поводу отвлекающих иллюстраций - да, может быть, в конкретном примере это не выглядит привлекательно. Но что же это получается, что надо сайты сугубо из текста делать, чтобы ничего не отвлекало? Вот такой посыл у вас получился в этом моменте, понимаю, что ненамеренно, но хотел обратить внимание. С чем категорически не согласен - это с критикой всплывающих окон, разработчик не должен ругаться на такое, я считаю. Если с точки зрения UX не предусмотрена фиксированная контактная форма на главной, то есть какие-то аргументы для таких решений. И это важная часть сайта, и критиковать попап - все равно что критиковать наличие любой дополнительной внутренней страницы только потому, что это +работа. Предельно важно тут не вселить в дизайнеров страх делать полноценный функционал)) Нужно делать все необходимые элементы, и мобильную версию дизайнить тоже, кстати. Еще раз спасибо)
Ох, чувак ты триггернул. Конечно, аккуратный и грамотный хендофф никто не отменял, вопросы к применению тех или иных эффектов и решений на этапе дизайна - тоже, но все остальные твои претензии - это ной верстальщика, который делает наотъебись.Размеры иконок разные? Покажи мне верстака, который не будет тупо через контрол выделять и экспортить кривые из иконки даже если эта иконка вставлена как компонент из библиотеки (с унифицированными размерами и отступами), я ему лично пожму мужественную руку. Модульная сетка? Верстаки делятся на два типа: одни вообще не в курсе как ее включать и что это такое, а у других бутстрап головного мозга, и они не знают что делать с блоком если он вдруг не списан четко в сетку (и не приведи ктулху, если сетка у тому же не двенадцатиколоночная). Это уже не говоря о том, что модульная сетка это инструмент для облегчения организации композиции и унификации, а не незыблемые рельсы, от которыхнельзя отступать. Подблоки с иконками расположены на разных уровнях? ЭТО НЕВОЗМОЖНО ТЕХНИЧЕСКИ РЕАЛИЗОВАТЬ!!!! ← моя любимая отговорка у верстаков, которым просто впадлу хоть немного шевелить мозгом, при этом они будут делать все что угодно, вплоть до прикладывания к экрану прозрачных пленок с картинками, лишь бы не включать мозг и не делать свою работу, которая заключается в реализации дизайна на фронтэнде. Параллакс? Оказывается, в 2022 году реализовать простейший параллакс оказывается сложно, трудоемко и вообще ТЕХНИЧЕСКИ НЕВОЗМОЖНО для реализации адаптивности. Придирка на тему впихивания всех эффектов в один слой имеет место быть только в случае, когда тебе самому еще надо редактировать макет, потому как вынесенная на отдельный слой полупрозрачная заливка отдельно от картинки скорее всего означает, что в верстке поверх картинки должен накладываться корректирующий слой чтобы условно любая картинка встявлялась на это место без предварительной обработки. Если все это впихнуть слоями внутри объекта в 99,9% случаев верстак экспортнет этот объект целиком, даже не подумав о слоях внутри и зачем они там. А вот на тему адаптивности и мобильной версии получается странно - макет был что ли без проработанных базовых брейкпойнтов? Не, ну тогда все что выше конечно можно и простить)
я думаю пусть будет такое «спорное» видео для новичков: как думать что ты делаешь, потому что еще после тебя будут работать люди - чем вообще никаких видео на эту тему.
Как дизайнер скажу так: да, многие вещи нарисовать значительно проще, чем реализовать на верстке, но в этом и фишка современных сайтов - сейчас важно чтобы сайт смотрелся свежо на фоне конкурентов, а не был простым унылым говном с простыми заезженными статичными блоками без анимаций. А ты, как верстальщик, соответственно можешь просить более высокую оплату за верстку сложного дизайна.
Считаю, что в нашем время веб дизайнер должен знать основы html/css/js Чтобы понимать, как будет реализовываться тот или иной элемент/функционал и возможно ли, вообще, это сделать
Сделать возможно всё, только вот зная основы дизайнер будет ограничивать себя, думая что такое не реализовать. Следовательно получится шаблонизированный дизайн. Мне кажется дизайнеру достаточно уметь систематизировать свой дизайн, а для этого не нужны знания в верстке.
01:55 Какой может быть баг из-за несовпадения в один пиксель или при дробных значениях? Чота чушь. Берешь блок с иконкой и конвертируешь в SVG - задача решена. 02:25 Только юным подаванам нужна сетка для вёрстки, джедаи пользуются относительным расположением. Выравнивание по сетке для лохов. 3:50 А не хер пользоваться Webflow для вёрстки. Для вёрстки нужен браузер и текстовый редактор, если редактор с подсветкой синтаксиса то просто приятнее будет. 4:20 Используйте именование классов и вёрстку по БЭМ - будет вам щастье. 05:40 для изображений есть фильтры, при нормальной вёрстке проблем никаких. А можно картинку фоном, а поверх полупрозрачный пиксель. ----------- Согласен, что дизайнер должен своей шкуре испробовать вёрстку. Но только не на Webflow...
Мужик спасибо тебе за золотые истины! Я как фронт разработчик видел такие макеты что и страшном сне не приснятся) надеюсь те кто делает их посмотрят тебя и научатся уважать труд других. Спасибо!
Спасибо за видео. Интересно послушать как всегда. Про «капусту» в слоях хорошее замечание. Но когда у тебя 100 фоток постеров или шмоток для онлайн магазина и все разных пропорций - кропать их в ручную… ну сам понимаешь) но совет хороший, прислушался. А по поводу кодинга, тяну до последнего 😅 Ошэнь страшна лезть туда. Да и когда долгое время работаешь с одними разработчиками мотивация изучать код как-то пропадает.
Если прочитать коммент без контекста, то да - чушь полнейшая. Я имел в виду, что в вебфлоу для класса можно задать дополнительный тэг (не путать с html тэгом), в котором отдельно можно задать параметр padding.
Отличный ролик. И тема противостояния дизайнеров и верстальщиков, она наверное неиссякаема)) Сам я дизайнер и версткой полноценно никогда не занимался. Если не считать за вёрстку сайты на Тильде)) Но, очень плотно общался с коллегами верстальщиками и старался погрузиться в специфику их работы. И могу ответственно заявить! Дизайнер не обязан уметь верстать, но принципы знать должен. Если конечно хочет, чтоб его дизайн был хорошо свёрстан. Многие из моих коллег (дизайнеров) часто недоумевают, почему они сдают макеты для верстки в фигме в одном виде, а на выходе получается ,мягко говоря, не совсем то. А получается так зачастую не потому, что верстальщик "рукожоп" или ему чего-то там не охота делать, а потому, что ты задизайнил так, что хрен нормально это сверстаешь!!!)) Поэтому, когда ты знаешь основные, базовые принципы верстки, то ты никогда(ну, или почти никогда) не задизайнишь так, чтоб верстальщик потом тебя проклинал))
Ко всему перечисленному еще можно накинуть: 1) Беспорядок в цветах(когда в макете в схожих элементах используются очень близкие, но все-таки разные оттенки, будто бы на глаз подбирались) 2) Беспорядок в шрифтах (Использование отдельных шрифтов для каких-то единичных мест или использование в макете платных шрифтов/шрифтов которые не поддерживают язык целевого пользователя) 3) Беспорядок в иконках (Использование в макете не векторных иконок). Если вы начинающий веб дизайнер, и только начинаете свой путь пожалуйста избегайте подобных вещей. Меньше будут гореть уши.
В такие моменты я рада что в начале я и дизайн делала и верстала сама. Пара раз помучалась с вёрсткой и потом все оступы-элементы делала одинкаовые/пропорциональные))) а уж иконки не поместить в компоненты в фигме это вообще как то ..
В UX не стоит верстальщикам лезть)) ладно когда какие-то технические споры, но не в свою область не стоит :) бывает, что заказчик говорит, хочу так-и хоть ты тресни, влияет это на конверсию или нет.
Что за херню ты несёшь? 150 на 150.88? Вы что там верстаете? 0.88 пикселей realy? Браузер некоторые макеты вообще не сможет отобразить идеально пиксель в пиксель. Хоть усрись.Пиксель перфект для жёстких косяков используется щас. Проблема дизайнеров это произвольные отступы от балды для адаптива. И разные ваще абсолютные отступы от балды на однотипных страницах . Вот это гемор. Или произвольные размеры на 4х медиа запросах. Это хороший пример как ты говоришь что ты когда верстаешь картины пишешь. Щас востребованы сайты с хорошей бизнес логикой. Ну или если красоты то это канвас с крутыми анимациями а не лендинг пиксель в пиксель.
+ 100500 по всем фронтам (хоть и не верстальщик, а ПМ и техдир) а, особо люто лучи "доброты и благорасположения" вызывают именно авторы подобного возомнившие себя при этом "без трёх минут профи". И, с непоколебимой уверенностью демонстрирующие это. Классические идейные дилетанты по Даннингу-Крюгеру, не желающие учиться, без системного мышления и с ЧСВ размером с галактику. Это треш... (а, особый треш, когда подобное проехало по ушам заказчику, и/или выступает с его стороны. в таких случая, зачастую целесообразнее отказать клиенту в сотрудничестве вообще, т.к. нередко это может являться индикатором и дальнейших "увлекательных приключений" с данными персонажами и тратой времени в пустую (при чём впустую несмотря на вроде бы "деньги"))
Это всё просто идёт в счёт работы. Легко увидеть что одинаковые модули не вынесены и добавить Прайс за работу. Насчет выравнивания бред. На ПК делаем быстро сетку и кидаем пудинги. Так что если дизайнер сделал криво вообще без разницы. Дальше при адаптиве обнуляем пудинги и всё.
Поржал с проблем автора, показанный дизайн ради дизайна даже разбирать нечего, верятно такую хрень лучше всего вообще каким-нибудь tailwind’ом верстать, попутно немного округляя отступы, управлять таким контентом все равно нереально. Реальная беда, когда есть набор простых и функциональных элементов, а дизайнер придумывает кастомную вундервафлю на ровном месте. Или забывает, что контент динамический, высота и ширина элементов может меняться и гриды с флексами не справляются, приходится откапывать js костыли времен флоатов.
То чувство, когда мой лид собирает макеты именно с этими ошибками, так ещё и без компонентов, в каждом блоке элементы новых размеров, про отступы вообще молчу 😭 и мне приходится также делать, иначе будет дудос атака(
Пожалуйста ставь триггер ворнинг для таких фигма макетов: рандомные имена для элементов, группы вместо фреймов, маски в 2022м, отсутствие и намёка на ауто лайоут. Брр, у меня валерьянки столько нет. Но по поводу элементов, действительно не факт что всё от дизайнера зависело. У нас(продуктовая компания) пару лет назад отдел маркетинга решил заняться обновлением сайта, вместо того что бы нанять проверенную Украинскую студию с которой уже работали, нашли кого-то подешевле и готового выполнять все прихоти CMO. Получился мягко говоря пиздец, особенно в плане вёрстки. После того как мой фидбек по этому поводу проигнорировали чуть более чем полностью, я решил сидеть в сторонке и запастись попкорном. В итоге: верстальщик был найден с третьей попытки, первые два бросили не доделав и хом-пейдж, разработка затянулась на несколько месяцев. Но смешнее всего итог: в изначальном виде хом прожил всего месяц от силы, после чего был заменён на что-то более адекватное и поддающееся A/B-тестам и стилистически теперь несколько отличается от всего остального.
1. По большей части со всем согласен. Но претензии по всплывающим окнам с формами, если честно, не понял. Вроде до сих пор довольно часто данный приём встречается и если хорошо задизаннен и свёрстан то проблем не вызывает. 2. По сложным анимациям: да, в примере акцент с текста теряется (ну там вроде задумка с движением руки и лампочки, типа работа с идеей, и тут ошибка скорее в акцентах, что запихав туда эту анимацию забили на текст, с ним надо было тогда поработать), но надеюсь это был не в общем и целом камень в огород на сложных и красивых анимаций? Иначе мы придём к тому, что все сайты будут похожи один на другой и будут отличаться только картонками, текстом и соотношениями между блоками. И иногда анимации наоборот позволяют сделать акцент и компактным образом разместить информацию, увести взгляд пользователя туда, куда тебе надо, сделать акцент на UI элементах активных… 3. Ну а что не понятно, как адаптировать последний кусок - так наверное дизайнер должен был ещё сделать макет для мобильной версии, после десктопной, если в макете подобная перегруженность экрана или я не прав?
Пришлось работать с тем что было. Клиента поджимали сроки. С попап формами выкрутились на остальное временно оставили так. По анимации и фото. Всё должно работать для решения задач, а не во вред. Есть множество примеров уместной анимации. Я показывал такие примеры в разборах сайтов с awwwards (видео есть на канале).
Все ок, нр последнюю придирку не поняла. Почему страница с табами должна на мобилке выглядеть как на пк 1в 1? В таких случаях для мобилки рисуется другой вид страницы с табами. Разве нет?
Я дизайнер в компании, и когда захожу в макеты коллег просто поражаюсь тому, какой там хаос в размерах элементов, в слоях. Папка в папке в папке в папке - это прям боль постоянная.
тоже столкнулась с подобным, работая с одной из дизайнерских фирм. у каждого дизайнера свой подход, и иногда правки вносить ну очень мучительно. один всё-всё-всё так сгруппировал, что уменьшить заголовок и поднять описание в пяти одинаковых блоках прям проблема, потому что каждый из 10 элементов надо отдельно выделять, ну или расгруппировывать всё )) другой очень сильно любит маски, и они везде. а я их вообще не юзаю, итого правки тоже неудобно. третий - фанат автолэйаута и у него все блоки в этих автолэйаутах. он прямоугольники совсем не использует, всё автолэйаутами )) поправить какой-то неудачный блок в такой системе нетривиальная задача, я расгруппировываю нафиг )) иначе не умею ) вообще у всех по-своему, ваши макеты тоже наверное многим неудобно менять, если у вас подходы и любимые инструменты разные.
Надо создать нормы для входа, где четко прописано для дизайнера, что и как должно быть в макете, что бы работать с ним было нормально . А кто не проходит нормы хай дальше совершенствуется . Что бы всем было хорошо работать а не работать в мука.
@@Irenicus33 Это у же на сколько мозгов хватает . Я и сам могу не больше проекты нарисовать опыт у же есть , Ато пришлют макет свертаешь, а пользоваться неудобно , на некоторых устройствах . И следишь ещё до ума даводешь.
Думаю да, главное разобраться с приоритетами особенно джунам. Вебфлоу мне видится, как правильный шаг в этом направлении. Со временем так или иначе захочется делать более сложные проекты и без умения фигачить в «чистый код» уже будет сложно. Поэтому в какой-то момент это станет необходимостью, а значит и учить будет легче.
@@DoFurther 1. Перестать делать лендинги с рандомно разбросанными блоками. 2. Выносите повторяющиеся элементы (Кнопки, шрифты, поля ввода, палитру) и их состояния в отдельный фрейм uikit. Верстальщик прописывает это в первую очередь. 3. Не старайтесь делать по 5 разновидностей кнопок и других интерактивных элементов. 4. Забудьте про параллакс с кучей не прибитых pngшек. 5. Не делайте странных отступов ( верх 5, низ 3, лево 9, право 1). 6. Старайтесь соблюдать квадратное соотношение сторон у контейнера иконок. Особенно если делаете сложные масштабируемые системы. 7. Не делайте больше 4-6 размеров шрифта: Заголовок; Под заголовок; Основной шрифт; Мелкий тест. 8. Учитывайте изменения размера контейнеров и их содержимого.
@@flashback6836 Привіт, питання по 7 пункту: чи допускається використання декількох стилів для одного розміру шрифта, наприклад regular, medium, semibold. Чи краще використовувати чим по менше стилів?
Просмотри макет перед версткой, поправь что не нравится, возьми дополнительный бюджет. Не хочешь - нафиг с пляжа. Можно подумать дизы капризничают по поводу кривого фирстиля клиента или отсутствия техзадания. Твоя задача - сверстать макет, который утвердил заказчик, тебе за это платят. Сомневаешься в чем-то - уточни. Не умеешь/не хочешь - делай для себя за лайки как считаешь нужным и выкладывай в соцсети. Ты горишь что сделал работы больше чем считаешь нужным за оплату. Но о чем ты думал когда брал заказ и обсуждал условия? Почему ты не уточнил у дизайнера как он видит адаптив этих блоков? Почему не объяснил заказчику что тут больше работы чем предполагалось и нужно доплатить? Ты же нашел слова и время чтобы ролик записать.. И сетки - не панацея. В идентичных блоках, безусловно, расстояния будут одинаковые. Но в сложном проекте вроде маркетплейса или новостного портала единственная постоянная сетка - пиксельная, так как очень много логик и подправил, а еще и визуальная подстройка. А представь что тебя на работу принимают, а тут это видео, где ты рассказываешь как тебе сложно справляться с технической работой, либо обсуждать и предлагать решения)) Почему-то ни дизы, ни верстальщики не хотят заработать и перекидывают ответственность за подготовку макета друг на друга)
Видео было не о жалобах, а том как не делать глупостей в дизайне. Конечно верстальщик может сделать все что попросили, скрипя зубами, даже если это вредит задачам клиента. И с чего ты решил, что я не предупредил клиента о всех найденных недочетах или что у меня не получилось справится с задачей? 🤦🏻♂️
Игорь, привет. Спасибо за классный ролик, как всегда на высоте! Я как раз учусь верстать на WF, чтобы делать лендосы под ключ без верстальщиков. И то что ты рассказал в этом видео типичная история, вообще верстать чужие макеты, это всегда кот в мешке. ))
Как junior UX/UI вообще не пойму как такое реально. Еще к тому же недавно прошел подготовительный для фронтендщика (и пошел дальше, если кому интересно все бесплатно), так теперь стал сразу в дизайне все подписывать и готовить как будто потом верстать буду. Кстати нам на курсе где-то такие макеты и давали, ох у меня и подгорало под конец когда пытаешься систематизировать как-то, а приходиться костылизировать Единственное, что считаю оправданной некую вложенности, когда макет сделан полностью на autolayout, тогда быстрее верстать, потому что он уже как будто на флексбоксах собран
Занимаюсь кухнями, что то похожее происходит при проектировании. И не объяснишь, что технически будет сложно, но я сделаю, но потом то через какое то время замучаетесь переделывать и не нужно оно вам окажется.
Я думаю если бы видео посмотрели, скажем, электрики тоже смогли бы провести параллели со своей профессией. Некоторые аспекты фундаментальны и встречаются повсеместно.
@@DoFurther А что электрики делают такого? Там начинка розеток, щитков и люстр вся скрыта и удобна для обслуживания.Вы разве розетку и люстру ни когда не меняли сами? Что там сложного и где подвох? Дизайн розетки и люстры может быть какой угодно, но внутри они все одинаковые
Говоря про padding и margin с ними вообще никогда неудобно работать. НО! С другой стороны верстальщик должен уметь работать с такими "неструктурированными элементами", а они чаще всего реализуются через margin и padding. Ну, и поскольку порой нестандартные элементы могут быть самыми захватывающими, но этот самый "нестандартный элемент" должен быть хорошо продуман дизайнером изначально, и он должен уметь его объяснять. Я не профессиональный дизайнер с миллионом рабочего стажа. Просто исходя из своего опыте в вёрстке и опыта в дизайне в целом делюсь. Тут важно понимание и того, как может это сверстать человек, и то как дизайнер придумает концепцию. Не уверен, что правильно донёс свою мысль, но да ладно
ну чувак ты в чемто прав конечно и интересно было но ты и усложняешь. Например ты предлагаешь сделать из картинки с маской и слоями одну растровую картинку, хотя фигма это векторный редактор. И в этом случае ты не думаешь о том как юзать дальше этот макет дизайнерам. Если захотят его изменить или поддерживать. На счет десятичных значений я уже слышал это, но это происходит из-за того, что ты масштабируешь элементы. Для того чтобы потом убрать десятичные значение тратиться уйму времени. Может кто знает какой-то плагин или пункт в настройках?
в чем проблема при верстке игнорировать дробное значение? если это CSS стили то там автоматом фигма округляет. Для мобилок тоже самое все округляется. Это проблемы у неопытного верстальщика, который не умеет верстать
Картинки же находятся в векторном шейпе с параметром fill 🤷🏻♂️. По десятичным значениям нужно будет покопаться, так как заметил что и в автолейауте вылетает тоже самое при адаптиве.
Как правило верстальщики даже не замечают разницы в макетах которые сверстаны филигранно с точки зрения организации и в макетах которые сделаны с допущениями и упрощениями иногда думаешь, зачем тратить время, если всем абсолютно безразлично.
Люди, помогите советом дизайнеру! Вот если я делаю дизайн по минимальным размерам 1400*1024, 320*480, то как сделать, чтобы при верстке качество картинок было хорошее? Потом смотришь на мобильном или десктоп 1920 и все картинки растянутые в пикселях! Хотя они есть в большом размере, но как их передать на верстку. Верстают то макет, не смотрят ничего. Никакие доп материалы не просят и не видят.
Разные паддинги у кнопок это просто всюду, уже не обращаю внимание и просто привожу к одному виду. Немного удивляет когда дизайнер забывает отрисовать кнопку сабмита на форме или просто кнопку действия 🫠🫠🫠
Знаешь есть золотое правило.Нарисованный дизайн как нибудь,будет сверстан как нибудь,а там пускай сам объясняет,что и как или сам идет исправлять свои косики ,я сними ваше не базарю)))
ох, как знакомо. есть у меня один коллега такой (более 4-х лет в дизайне, к слову), от которого иногда переходят проекты на доработку. там еще похлеще косяки, чем на видео. в такие моменты хочется обматерить его и уволиться, чем работать с проектом после него. что в принципе, в скором времени и сделаю))
Дизайн прям грустный. Рискну предположить, что делал его или сам клиент, или его племянник, или джун-фрилансер за копейки. И верстальщика нанял наверняка ж не самого дорогого, ибо дизайнер, который умеет фронтенд, дешевле, чем настоящий опытный фронтендщик. Вот и вышло, что на всех этапах попаболь, ибо дёшево же. А вы любите выходить из зоны комфорта, я погляжу )) Я тоже дизайнер и тоже умею верстать, но всегда стараюсь отпетлять от вёрстки, ибо скучно очень, плюс кроссбраузерная совместимость печалит иногда) По опыту (верстальщики а разрабы приложений могут со мной общаться если им надо) могу сказать, что больше всего неприятностей верстальщикам доставляют странные фоновые картинки, которые вылазят за границы фрейма и при сохранении получается фигня какая-то. Кроме того я один раз протупила и использовала режим наложения для плашки, который в цсс нереализуем. Ну и последнее: разработчики очень не любят кастомные элементы вроде красивый календарей с альтернативной логикой , которые сложно и долго реализовывать.
Кто, скажите. заказывает работы у настолько криворуких дизайнеров, которые даже базовых вещей не понимают. И ладно дизайнер не до конца понимает, как готовить макет к верстке, но криворукий, пожёванный дизайн отдавать, это жесть. Если только это не стоит 3 копейки...
Ну все-таки примеры в видео скорее для сайтов типа презентации, там акцент как раз на вот этот разброс, так что требовать чтобы там было всё выравнено как в экселе неправильно. Да и картинки можно самому подрезать под нужные размеры. Я не верстальщик, я программист, я бы большинство этих картинок просто задним фоном положил и никто бы не узнал 150 там пикселей или 151.
@@xezdx неважно, презентационный сайт или нет, работа дизайнер состоит не в том, чтобы просто накидать элементов, а и продумать, как это будет функционировать. Просто представьте человека, который делает чертеж какого-то механизма, пропускает кучу правил, лишь бы это выглядело прикольно, а уже пусть инженеры разбираются с тем, как это должно функционировать.
@@maximmaslennikov4038 Этот человек что делает прикольно - называется дищайнер в IKEA. Там они получают по миллиону евро/год. И делают как раз фигню, которая максимально дешевая по материалам. А технари должны разработать тех процесс изготовления, дизайнеру все равно что технарь с этим не справляется, значит выгонят технаря и пойдут к китайцам. Китайцы сделают любую прихоть дизайнера с IKEA. Так что не будь плохим технарем, а то в рашку отправят с швейцарии быстро, там будешь за 3к долларов работать это потолок по зарплате. Ну пока доллар не упадет....
Спасибо за видео! Всплывающие формы вообще лучше избегать в дизайне? Но они же постоянно встречаются в лендингах, например. Как с ними лучше поступать?
Модальные окна если и делать - то это должны быть только небольшие уведомляшки с краю экрана. Но точно ни как не полноэкранные элементы побуждающие совершить целевое действие. Вы даже собственную реакцию на них посмотрите. При всплытии модалки, да ещё и в не подходящее время - единственное действие которое она побуждает сделать - закрыть её.
Слава богу я больше практически не верстаю. В таких случаях имеешь полное право делать все на глаз. Если такого дизайнера взяли на работу, значит во всем остальном заказчик, менеджер разбирается примерно так же. Также плохо. Не нужно с такими работать.
Честно очень похоже на стоковый макет. Вот сколько их открывал - всегда там шляпа по верстке и иерархии. Что в былые времена для фотошопа, что сейчас для фигм и скетчей.
Классно было бы послушать, как ты используешь Notion в работе. Слышал в паре роликах упомянания, но не увидел что внутри. Сам им не пользовался, ибо визуальщик, но интересно услышать, что за инструмент такой
Работаю в полиграфии допечатником, от 99% дизайнеров приходит полная лажа, которую приходится переделывать. Вывод у меня такой: дизайнером может назваться любой, кто открыл фотошоп/ корел/иллюстратор/индизайн, еще в более худшем случае "специализированный" сайт, где он сделает визитку/открытку/буклет/листовку для печати.
Так и есть, фигма своей простотой освоения создала иллюзию сотням людей, что ты за день ее освоения успел стать дизайнером. Они ж на серьезных щах бегут создавать резюме на ХХ.... С чего ты это вообще решил, что ты можешь претендовать на роль в профессии, о которой, по сути еще ничего не знаешь? Самообман какой-то. Реальность таких людей охлаждает, к счастью, очень быстро и жестко
У дизайнера на этот счет есть замечательный вопрос для клиента, если у него есть какие-то предложения по дизайну: «Что мы получим/выиграем, если это сделаем?» И тут же на ответ клиента есть контр аргумент с усложенением и удорожанием работы верстальщика.
@@DoFurther Но это не всегда работает. Иногда у клиентов есть свое виденье дизайна и никакие советы и аргументы им не нужны. Возможно это именно тот самый кейс, где так решил клиент и ему не важно, будет это работать или нет.
Ладно все по группам оккуратно расписать , шапка и.т.д . Но что теперь делать сайты 2010 годов что бы верстальщику меньше работы было при этом испортить свою работу?
Ахаха бл ваще по кайфу, бахаешь всё в десктопе по одному, а тот же самый элемент в адаптиве, вообще другой и вообще не часть того блока что он был в декстопе, при этом это сук почти точная копия
Делал как то игру на фрилансе, нужен был дизайн, заказали дизайн. Выглядит вроде норм и выравнено все нормально, но с*ка не одного элемента не подписано, сгруппировать элементы дизайнер тоже бол клал и я потратил гребаные 3 часа на хоть какую то группировку что бы хоть как то ариентироваться в этой паутине.
Столкновение двух парадигм, ну или понимание кто такой дизайнер. В СНГ дизайнер - это художник, вольная птица, я так вижу, нарисовал - досвидания и т.п. Европа, америка -- дизайнер это тот кто и придумал, и сделал. По факту этой теме -- сделать как дизайнер нарисовал, сраку верстальщик рвет против сделать как верстальщик хочет, по факту говно дизайн -- 1000 лет в обед. Креатив и инженерия это борьба двух разных полушарий, не возможно думать сразу в этих двух направлениях. Ну или разве на опыте перекрывать одно другим, но по факту не всегда получается. Говорю как UX&UI дизайнер с образованием программиста. Истина по середине. И дизайнер должен знать основы, и верстальщик пробовать креатив. Ну и коммуникация решает, а не в ракушках сидеть
Сегодня верстал, в декстопе таблица, в мобиле список при этом внутренность изменилась полностью, сама структура, появились новые заголовки которых не было вообще в десктопе и не должно быть в мобиле. И всё это буду скоро натягивать.
Не всегда с дизайнеров начинается боль) Иногда заказчик дает впихнуть невпихуемое и приходиться спорить с ним и например придумывать как адаптировать табы в мой версии. Только замечу что дизайнер обязан спроектировать моб версию, планшетную если нужно. От себя задам вопрос) Насколько харит неподписанные слои? Обычно все в автолеяуте и частично в компонентах но меня харит подписывать слои, тратить свое время.
- ну попводу не целых значений, это скорее вопрос к Фигма. Меня это просто выносит. Зачем это делать? Может из-за того что Фигма хочет быть редактором и для графдизайнеров? - по поводу блоков и сетки, дизайнеров нужно и можно заставлять рисовать по сетке (как минимум бутстрап) и делать 3 версии (лучше 4) экрана для разных ширин (Десктоп ФулХД, ХД , планшет и смартфон). Тогда он сам увидет как его "красота" адаптируется.))) - про картинки с эфектами - это по моему не изличимо, )))) - ну поэтому есть джуны - которые это все причесывают. Мидлы и сеньйоры страдают вирусом мальнькой власти))) По моему мненеию, для лечения этих болячек у дизайнеров, в Фигме есть автолеаут. Когда фигачиш макет используя эту фичу, претензий у кодеров поменьше. Спасибо за видос. Все классно рассказал.
Насчет чисел с десятичными значениями: чаще всего причина - это использование autolayout, который растягивает элементы внутри контейнера. Получается, с точки зрения вестальщиков надо вообще отказываться от использования fill в лейауте? А если это календарь, например, который должен быть адаптивным? Тогда надо делать отдельный варианты для экрана ширины? Тогда наверняка будет жалоба, что прислали 100500 вариантов, и в них фиг разберешься.
Мнение так себе верстальщика. Который по старинке верстает сеткой и отступами... По принципам бутстрапа... Для такого человека верх идеала - упрощённые админ.панели и квадратные дешёвые лендинги. Удачи с бутстрапной концепцией верстки.
По поводу сеток - не уверена. Общалась со многими дизайнерами, которые делали макеты по сеткам и не по сеткам - никогда не было у них проблем с верстальщиками. А если не возможно запихнуть дизайн в сетку 12 колонок, если нужна кастомная? Пофиг? Главное чтобы верстальщику было удобно?
Дело не в кастомности сетки, а в том что нужно быть системным. Сетка может быть кастомной, но тогда ее нужно придерживаться, а не делать дизайн решения на основе «просто-потому-что».
Нашли """радость"""""", которая видать веб дизайном занимается и не выкупает за сетку, систему, да и просто головой думать, за сроки за всё ост. Ведь накуивертить на листе бумаге может каждый, засунул туда сюда норм
![NOSFERATU - Official Trailer [HD] - Only In Theaters December 25](http://i.ytimg.com/vi/nulvWqYUM8k/mqdefault.jpg)
Очень интересно послушать про вёрстку сайтов которые готовятся для awwwards. Как дизы сотрудничают с верстальщиками. Как устроены сетки и есть ли они вообще, т.к. ощущение что их там вообще нет. В каких прогах верстают ребята, ток в vs или ещё в других. В каких прогах делают анимации и кто их делает. Какие то мелочи, именно в сложных и сочных сайтах. Так же, было бы интересно послушать про то как устроена система работы таких студий. У тебя уже было интервью с Obys, но хотелось бы узнать подробнее про то что написал выше. Кто ещё хочет такой видосик напишите вопросы в ответы, что бы Further было легче понять на какие вопросы можно было поспрашивать ребят. Очень надеюсь то что снимешь такой видос)
Интересно, как решаются вопросы с анимациями на таких сайтах, (чтобы разработчики понимали, где и как они должны работать). Дизайнер делает анимацию макета после утверждения дизайна или поэтапно в процессе работы над проектом? Анимирует всё дело тот же дизайнер, который создавал юай или отдельный человек, как они в свою очередь, согласуют свою работу? 🤔
@@nevmyr мне кажется, кто как хочет, так и др... налаживает рабочий процесс. Например у нас на проекте за анимацию отвечает тот же дизайнер, которые ее придумал. Более того, он должен предоставить раскадровку и референс или собрать анимацию где ему будет удобно.
Мой личный опыт подсказывает, что доверять верстальщикам самим придумывать правила поведения для элементов сайта или анимацию - очень плохая идея. Все что для дизайна важно, должно быть так или иначе жестко определено и задокументированно, а все что не задукоментированно - не важно и может быть изменено в угоду удобства\валидности\семантичности верстки.
Согласна, очень интересно, просто если делать все по правилам верстки, дизайн получается скучноватый
Обычно верстает и дизайнит на таких сайтах один человек. Readymag или Webflow
Верстают в том, что удобно. От VSCode и Sublime до Emacs и Vi, и обратно)
А в чем проблема посмотреть отступ зажав alt? Зачем на глаз? В чем проблема экспортировать изображение из группы, чтобы слои слились в один? Лень делать параллакс? Ну там давайте вообще без эффектов делать деревянные сайты просто чтобы верстальщикам было меньше работы). В дизайне есть понятие оптическая компенсация, если вам оно не знакомо изучите, тогда поймете почему круглые иконки могут быть на пару пикселей больше квадратных. Их обычно оборачивают в одинакового размера фреймы, но если вы лезете прям до самой иконки, как это понятно из видео, то видимо сами не умеете пользоваться фигмой и экспортить объекты правильно))
Это не твой ли макет я верстал, где header был просто растровой картинкой? И мне пришлось чуть ли не линейкой вымерять расстояние элементов?)
По факту всё
пахахахахаха
@@petroniusarbiter4193 Врядли, и причем тут это?
8 минут нытья от junior верстальщика, на junior дизайнера.
Единственная реальная проблема в видео - полное отсутсвие привязки к сетке. На все остальное мне было бы совершенно насрать, клиент всеравно платит почасовую ставку.
Я не поверю, что ты не понял, что «нытьё» здесь только для иронии. Задача же была показать дизайнерам, что некоторые вещи делать не обязательно и наоборот, есть важные нюансы, которые должны быть учтены.
Я стараюсь не использовать подход в работе: мне насрать что делать, если клиент платит.
Мне как клиенту было бы страшно обратиться к: врачу, юристу, строителю, дизайнеру - с таким подходом в работе.
@@DoFurther если ты хочешь именно научить дизайнера как правильно нарисовать сайт за счет зананий смежной профессии, то для начала посмотри гайд по верстки книги или брошуре, и увидешь что там точно такая же база. Совершенно идентичная, любую хорошую книгу можно сверстать в сайт как бы безумно она не выглядела по своему устройству, потому что там человек продумал ее структуру. Так вот, если дизайнер получил образование и до сих пор не может нормально сверстать сайт - то ты никогда его уже ничему не научишь, он уже давно проф. непригодный. И это я не к тому что книга или брошура сложней, но я не поверю что человек который зарабатывает дизайном на жизнь никогда не трогал inDesign.
Я сам начинал с верстки на html css, понял что это не мое и начал заниматься дизайном и тут мне здорово помогли навыки html, чтобы верстальщику было удобно работать и он не вставал в ступор после каждого блока, со словами что за ***дец
Тоже самое, зачёт
тоже самое)
Плиз, дизайнеры, будьте все такими)))
проблема в том, что многие дизайнеры не умеют в базовый html+css, отсюда все проблемы
но в то же время, каждый верстальщик умеет в базовый "дизайн"....
вывод: дизайнерам нужно проходить курсы базовой верстки
Много раз такое слышал, а на практике вы абсолютно не понимаете взаимовзязей элементов в верстке
Дизайнер, стань верстальщиком, и отними работу у ленивых верстальщиков
Точно, стань верстальщиком, изучи html, css, js и еще вагон сопутствующих технологий, потрать на это пару лет и тогда поймешь: это верстальщик ленивый или может наоборот. А может получиться так, что изучение верстки приведет к тому, что станешь реально хорошим дизайнером.
@@luxarmiger5729 а потом 4 года изучай на практике архитектцрную-семантику.
И Гори с того какой говно код ты писал вчера.
@@luxarmiger5729 нужно 3 года верстать по тому чтобы стать норм дизайнером.
Поэтому не надо, для норм дизайнера нужно не учить верстку а взять контакт верстальщика и просто услышать пожелания и советы.
Это, кстати, работает и в обратную сторону) Если слишком бояться загрузить верстальщика, то появятся примитивные макеты. Круто, когда дизайнер знает все возможности платформы, для которой дизайнит
Получается круто когда верстальщик подрабатывает дизайнером
@@RodHord Получается круто если верстальщик делает дизайн вместе с вёрсткой, за зарплату верстальщика
Круто когда решения дизайнера обоснованы: логикой, выполнением поставленных задач и соблюдением технических требований.
Тогда можно делать простецкий дизайн на уровне 00 ых или начала 10 х годов, вот тогда, да верстальщиков загружать не будут, надеюсь они там еще сериальчик будут смотреть параллельно, а дизайнеры не будут заморачиваться над дизайном, выгодно? Выгодно. Прогрессивно? Нет.
@@DoFurther вы упомянули поп апы, типа столько геморроя с ними, неужели на вебфлоу нет какого то плагина или решения для таких по сути стандартных блоков?
в этом плане получается, даже с учетом всех ограничений, тильда рулит.
Еще есть "веселые" заказчики. Был опыт сотрудничества с заказчицей, которая умеет в дизайн полиграфии и решила что умеет в веб. Нужно было ее готовые макеты с шириной овер 4к рабочей области и в цмуке привести к более-менее верстабельному виду. У нее в макетах было все: разные отступы и в т.ч. вертикальные, десятичные размеры шрифтов, разной формы кропаные изображения, логически одинаковые заголовки, которые разные визуально от макета к макету. Вишенка на торте - исходники обязательно в ФШ и у нее ретина, а у меня нет) Работаю в фш, для показа джипеги макетов гружу в фигму))) Я просто проклинал все на свете, 10 раз ей пытался объяснить что принципы размещения и решения в ее макетах это просто неверстабельное *авно, показывал примеры моих макетов и результат их верстки, но она просто непробиваемая была. В итоге я просто сделал как она просила и на этом мои полномочия все. Оч жаль того, кто согласился это все верстать
Ожидается день оффигительных историй в комментах 😅
🤣
Была похожая ситуация, дизайн сайта выглядел, как рекламная листовка с акцией. Я сразу понял, что его делал дизайнер по полиграфии.
в 2022 году если приносят дизайн в ФШ - можно сразу отказываться как по мне) Так как это либо дизайн собранный полиграфистом, либо каким-то древним динозавром.
@@sergeytomkovich2741 А если за него хорошую сумму плотят 😁
Ох сколько я за все время встречал дизайнеров, которые творческие люди :)
Ничего не имею против, них :)
Но если это сложно для условного недельно/месячного проекта, то представте как это. сложно на более сложных и обьемных проектах!
Меня часто вот выносили люди которые на больших проектах где мы сами пилили по сути UI либу для приложение под наш дизайн. Так вот когда они добавляют к примеру поведение кнопки на новой странице или какой-то модалке при наведении не темнее от главного цвета а к примеру, светлее... Казалось бы тю да что там, но по факту это уже другой компонент :) Новая кнопка которой еще не было :)
Приходишь к ним и такой, "Че за фигня, походу бага", а тебе в ответ "Нет фича, а мы что так не можем?"
И начинаешь обьяснять что всему должно быть аргументация, у нас утвержденный дизайн и UX тоже :) Ну в общем тратишь уйму времени чтобы обьяснить что надо использовать готовые компоненты и из них собирать мокапы а если нужна кнопка то нужно ее добавлять глобально и в UiKit тоже :) А не тупо типа сделай модалку а там вообще другое поведение... И все эстимации коту под хвост :)
Ну в общем я никогда особо не злился на джунов, только если они на контакт ну совсем не идут. Мне более печально от опытных такой кейс ловить.
ПС В целом думаю дизайнеру полезно немного разбираться в технической части, понимать как с этим дальше работать будут. Я хоть и фронт но смежные области иногда ресерчу. Дизайн, менеджмент, бэкенд. Настолько глубоко, чтобы понимать как это работает и чтобы это приносило пользу для моей основной деятельности.
Спасибо за видео :)
Охохо, как мед на душу))) Некоторые дизайнеры не только не думают о тех. части, но и не учитывают то, как юзер будет пользоваться их дизайном. Одно слово - красиво. А толку от этого красиво, если не понять как этим пользоваться???
Мне один раз дизайнер, в ответ моим правкам по дизайну, привел в пример сайты awwwards. Типа, вон как у них все нестандартно, у нас также будет. Ага, ради бога, только не за верстку за 20к. После слов о цене и пару тонн аргументов, желание "сделать как на awwwards" сразу ушло. Кстати, дизайн там был далек от awwwards
@@aau8 ну если сайт делается для того чтобы попасть на awwwards, то там обычно удобство уходит на второй план. Ведь основная цель не удобство юзера - а получить награду>стать чуточку знаменитей>получить новых клиентов. Частая практика у молодых дизайн агентств, хотя есть некоторые которые на этом только и специализируются. Но у них и разработчики обычно свои, которые шарят всякие либы для всяких модных вау эффект.
Другая беда - когда дизайнеры пытаются awwwards стиль применить везде. Сам раньше грешил этим, когда пытаешься аккуратность дизайна заместить креативом. С опытом переобулся наоборот в максимально аккуратные, минималистичные и понятные сайты.
Ну и знать тех.часть для дизайнера я считаю мастхэв. Во-первых ты приходишь к верстальщику не с идеей в голове, а уже с референсами с codepen) Плюс доводить дизайн до идеала проще не условным "подвинь на 5 пикс тут", а через инспектор глянуть реально нужный отступ для элемента и скинуть уже куском CSS.
Странно, почему верстальщик, у которого свои задачи ходит и делает правки дизайнеру, который делал макет. Просто Если макет сделан, его утвердили выше стоящие люди, значит надо делать его (само собой если те для кого это все устраивает и это хоть немного нужно). Но приходи какой-то верстальщик, который говорит что это делать не будет, потому что испльзуется цвет которого он не видел раньше.. весьма странно, может тогда тебе стать дизайнером?
Однако не исключенно что челики (дизайнеры), просто ничего не понимающие ду*рочки
Странно, почему верстальщик, у которого свои задачи ходит и делает правки дизайнеру, который делал макет. Просто Если макет сделан, его утвердили выше стоящие люди, значит надо делать его (само собой если те для кого это все устраивает и это хоть немного нужно). Но приходи какой-то верстальщик, который говорит что это делать не будет, потому что испльзуется цвет которого он не видел раньше.. весьма странно, может тогда тебе стать дизайнером?
Однако не исключенно что челики (дизайнеры), просто ничего не понимающие ду*рочки
@@grechaa82вопрос вы работали на больших проектах?
На самом деле такие кейсы вполне реальны. И все очень просто. Когда уже проведён бизнес анализ, написана спека, сделан UX, нарисовали UI. Расшили задачи и накидали спринтов на всю команду. И основной функционал допилили и сделали первый релиз. Тогда появляется время для второстепенных фичей. И чаще всего с проекта могут снять опытных дизайнеров на другой проект, особенно если это аутсорсовая компания. На проект могут поставить джуна, это не только дизайнеров касается. Но все же речь о них.
Так вот как раз в таком случае это плодотворная среда для джуна. И не только джуна. Например просто челика который дизайнил раньше на фрилансе. Толковый, взяли на мидла к примеру. Но у него очень мало опыта в больших проектах и в команде.
На счёт ‘ходит делать правки дизайнеру’ думаю вы не совсем внимательно прочитали мой коммент.
‘Что делать не будет, потому что используется цвет которого раньше не видел’ - комментарий на уровне челика который не шарит о чем говорит. Ну во первых я не про цвет говорил а его поведения. Думаю если бы вам знакома была эта тема такую хрень не писали бы. Во вторых да не буду верстать и не должен этого делать по нескольким причинам. Цвет должен быть утверждён, внесён в документацию как минимум UIKit. В эстимации задачи должен учитываться кейс реализации дополнительного компонента. Я писал выше что этого не учитывали.
Но думаю тебе это все не знакомо, так что рекомендации свои оставь себе.
Плюс есть такое понятие как софт скилы. В нормальных компаниях это учитывают и токсичных людей могут и кликнуть с команды какой бы крутой он спец не был бы.
Так вот про софт скилы, одним из них является имя коммуникация. Ну объясню для маленьких, все делают ошибки. И дизайнеры и верстальщики и фронты ну тенденцию ты понял надеюсь. И в нормальной команде тот кто замечает ошибку должен о ней заявится на митах. В зависимости от проекта миты могут отличатся. Вот к примеру я на дейлике заявился и мы обсудили этот вопрос. Или ты думал я пешком к нему ходил дядя?
Спасибо за видео) Хотелось бы прокомментировать и поспорить с некоторыми моментами. В целом, с проблематикой согласен. Далеко не все дизайнеры, очевидно, грамотно работают с макетами. И всегда легко накреативить трендовые красивые штуки, не подумав о разработчиках...
Тем не менее, к середине видео я стал несогласен с выдвигаемыми аргументами. Да, верстать куда легче, когда все красиво и четко расположено в контейнерах, но и верстальщик не должен злиться, что ему нужно добавить один паддинг) Это если я правильно понял суть вопроса, конечно. Также не соглашусь по поводу отвлекающих иллюстраций - да, может быть, в конкретном примере это не выглядит привлекательно. Но что же это получается, что надо сайты сугубо из текста делать, чтобы ничего не отвлекало? Вот такой посыл у вас получился в этом моменте, понимаю, что ненамеренно, но хотел обратить внимание.
С чем категорически не согласен - это с критикой всплывающих окон, разработчик не должен ругаться на такое, я считаю. Если с точки зрения UX не предусмотрена фиксированная контактная форма на главной, то есть какие-то аргументы для таких решений. И это важная часть сайта, и критиковать попап - все равно что критиковать наличие любой дополнительной внутренней страницы только потому, что это +работа. Предельно важно тут не вселить в дизайнеров страх делать полноценный функционал)) Нужно делать все необходимые элементы, и мобильную версию дизайнить тоже, кстати.
Еще раз спасибо)
Главный посыл для дизайнеров, который я хотел донести - принимать взвешенные решения, которые помогают добиться поставленных задач.
Просто если дизайн сложнее то и стоимость работы уже не 50$ а 200$
Ох, чувак ты триггернул. Конечно, аккуратный и грамотный хендофф никто не отменял, вопросы к применению тех или иных эффектов и решений на этапе дизайна - тоже, но все остальные твои претензии - это ной верстальщика, который делает наотъебись.Размеры иконок разные? Покажи мне верстака, который не будет тупо через контрол выделять и экспортить кривые из иконки даже если эта иконка вставлена как компонент из библиотеки (с унифицированными размерами и отступами), я ему лично пожму мужественную руку. Модульная сетка? Верстаки делятся на два типа: одни вообще не в курсе как ее включать и что это такое, а у других бутстрап головного мозга, и они не знают что делать с блоком если он вдруг не списан четко в сетку (и не приведи ктулху, если сетка у тому же не двенадцатиколоночная). Это уже не говоря о том, что модульная сетка это инструмент для облегчения организации композиции и унификации, а не незыблемые рельсы, от которыхнельзя отступать. Подблоки с иконками расположены на разных уровнях? ЭТО НЕВОЗМОЖНО ТЕХНИЧЕСКИ РЕАЛИЗОВАТЬ!!!! ← моя любимая отговорка у верстаков, которым просто впадлу хоть немного шевелить мозгом, при этом они будут делать все что угодно, вплоть до прикладывания к экрану прозрачных пленок с картинками, лишь бы не включать мозг и не делать свою работу, которая заключается в реализации дизайна на фронтэнде. Параллакс? Оказывается, в 2022 году реализовать простейший параллакс оказывается сложно, трудоемко и вообще ТЕХНИЧЕСКИ НЕВОЗМОЖНО для реализации адаптивности. Придирка на тему впихивания всех эффектов в один слой имеет место быть только в случае, когда тебе самому еще надо редактировать макет, потому как вынесенная на отдельный слой полупрозрачная заливка отдельно от картинки скорее всего означает, что в верстке поверх картинки должен накладываться корректирующий слой чтобы условно любая картинка встявлялась на это место без предварительной обработки. Если все это впихнуть слоями внутри объекта в 99,9% случаев верстак экспортнет этот объект целиком, даже не подумав о слоях внутри и зачем они там. А вот на тему адаптивности и мобильной версии получается странно - макет был что ли без проработанных базовых брейкпойнтов? Не, ну тогда все что выше конечно можно и простить)
я думаю пусть будет такое «спорное» видео для новичков: как думать что ты делаешь, потому что еще после тебя будут работать люди - чем вообще никаких видео на эту тему.
Как дизайнер скажу так: да, многие вещи нарисовать значительно проще, чем реализовать на верстке, но в этом и фишка современных сайтов - сейчас важно чтобы сайт смотрелся свежо на фоне конкурентов, а не был простым унылым говном с простыми заезженными статичными блоками без анимаций. А ты, как верстальщик, соответственно можешь просить более высокую оплату за верстку сложного дизайна.
Считаю, что в нашем время веб дизайнер должен знать основы html/css/js
Чтобы понимать, как будет реализовываться тот или иной элемент/функционал и возможно ли, вообще, это сделать
Сделать возможно всё, только вот зная основы дизайнер будет ограничивать себя, думая что такое не реализовать. Следовательно получится шаблонизированный дизайн. Мне кажется дизайнеру достаточно уметь систематизировать свой дизайн, а для этого не нужны знания в верстке.
Капец верстальщики обленились)
Так-то можно подумать что тебе по телефону рассказывал суть видео 🤣
01:55 Какой может быть баг из-за несовпадения в один пиксель или при дробных значениях? Чота чушь. Берешь блок с иконкой и конвертируешь в SVG - задача решена.
02:25 Только юным подаванам нужна сетка для вёрстки, джедаи пользуются относительным расположением. Выравнивание по сетке для лохов.
3:50 А не хер пользоваться Webflow для вёрстки. Для вёрстки нужен браузер и текстовый редактор, если редактор с подсветкой синтаксиса то просто приятнее будет.
4:20 Используйте именование классов и вёрстку по БЭМ - будет вам щастье.
05:40 для изображений есть фильтры, при нормальной вёрстке проблем никаких. А можно картинку фоном, а поверх полупрозрачный пиксель.
-----------
Согласен, что дизайнер должен своей шкуре испробовать вёрстку. Но только не на Webflow...
Хоть один голос разума)
Можно подробнее про чудесные фильтры, которые могут добавить синий цвет, как в видео? Про картинку фоном - это большая глупость.
Мужик спасибо тебе за золотые истины! Я как фронт разработчик видел такие макеты что и страшном сне не приснятся) надеюсь те кто делает их посмотрят тебя и научатся уважать труд других. Спасибо!
Спасибо за видео. Интересно послушать как всегда. Про «капусту» в слоях хорошее замечание. Но когда у тебя 100 фоток постеров или шмоток для онлайн магазина и все разных пропорций - кропать их в ручную… ну сам понимаешь) но совет хороший, прислушался.
А по поводу кодинга, тяну до последнего 😅 Ошэнь страшна лезть туда. Да и когда долгое время работаешь с одними разработчиками мотивация изучать код как-то пропадает.
после слов "паддинг это тэг в вебфлоу" можно закрывать видос)
это лол, конечно)
достаточно сильно
Если прочитать коммент без контекста, то да - чушь полнейшая. Я имел в виду, что в вебфлоу для класса можно задать дополнительный тэг (не путать с html тэгом), в котором отдельно можно задать параметр padding.
@@DoFurther Это комбо класс называется
Думаю будет хорошо, когда дизайнеры смогут проект любой сложности собирать на конструкторе, чтобы не слышать постоянно эти сопли
Отличный ролик. И тема противостояния дизайнеров и верстальщиков, она наверное неиссякаема)) Сам я дизайнер и версткой полноценно никогда не занимался. Если не считать за вёрстку сайты на Тильде)) Но, очень плотно общался с коллегами верстальщиками и старался погрузиться в специфику их работы. И могу ответственно заявить! Дизайнер не обязан уметь верстать, но принципы знать должен. Если конечно хочет, чтоб его дизайн был хорошо свёрстан.
Многие из моих коллег (дизайнеров) часто недоумевают, почему они сдают макеты для верстки в фигме в одном виде, а на выходе получается ,мягко говоря, не совсем то. А получается так зачастую не потому, что верстальщик "рукожоп" или ему чего-то там не охота делать, а потому, что ты задизайнил так, что хрен нормально это сверстаешь!!!)) Поэтому, когда ты знаешь основные, базовые принципы верстки, то ты никогда(ну, или почти никогда) не задизайнишь так, чтоб верстальщик потом тебя проклинал))
Странные вы люди, правополушарные. Посмотрите, посмотрите на расстояние между буквами!!! Посмотрел, все норм...
Надо за подготовку к верстке отдельный прайс выставлять 😄
Верстальщикам или дизайнерам?
@@DoFurther верстальщикам) им же приходится разгребать
Что бы ваш кривой гемор разбирать 😅
Ко всему перечисленному еще можно накинуть:
1) Беспорядок в цветах(когда в макете в схожих элементах используются очень близкие, но все-таки разные оттенки, будто бы на глаз подбирались)
2) Беспорядок в шрифтах (Использование отдельных шрифтов для каких-то единичных мест или использование в макете платных шрифтов/шрифтов которые не поддерживают язык целевого пользователя)
3) Беспорядок в иконках (Использование в макете не векторных иконок).
Если вы начинающий веб дизайнер, и только начинаете свой путь пожалуйста избегайте подобных вещей. Меньше будут гореть уши.
спасибо за совет)
В такие моменты я рада что в начале я и дизайн делала и верстала сама. Пара раз помучалась с вёрсткой и потом все оступы-элементы делала одинкаовые/пропорциональные))) а уж иконки не поместить в компоненты в фигме это вообще как то ..
В UX не стоит верстальщикам лезть)) ладно когда какие-то технические споры, но не в свою область не стоит :) бывает, что заказчик говорит, хочу так-и хоть ты тресни, влияет это на конверсию или нет.
как я тебя понимаю... ненавижу дизайнеров
Что за херню ты несёшь? 150 на 150.88? Вы что там верстаете? 0.88 пикселей realy? Браузер некоторые макеты вообще не сможет отобразить идеально пиксель в пиксель. Хоть усрись.Пиксель перфект для жёстких косяков используется щас. Проблема дизайнеров это произвольные отступы от балды для адаптива. И разные ваще абсолютные отступы от балды на однотипных страницах . Вот это гемор. Или произвольные размеры на 4х медиа запросах. Это хороший пример как ты говоришь что ты когда верстаешь картины пишешь. Щас востребованы сайты с хорошей бизнес логикой. Ну или если красоты то это канвас с крутыми анимациями а не лендинг пиксель в пиксель.
+ 100500 по всем фронтам (хоть и не верстальщик, а ПМ и техдир)
а, особо люто лучи "доброты и благорасположения" вызывают именно авторы подобного возомнившие себя при этом "без трёх минут профи".
И, с непоколебимой уверенностью демонстрирующие это.
Классические идейные дилетанты по Даннингу-Крюгеру, не желающие учиться, без системного мышления и с ЧСВ размером с галактику.
Это треш...
(а, особый треш, когда подобное проехало по ушам заказчику, и/или выступает с его стороны. в таких случая, зачастую целесообразнее отказать клиенту в сотрудничестве вообще, т.к. нередко это может являться индикатором и дальнейших "увлекательных приключений" с данными персонажами и тратой времени в пустую (при чём впустую несмотря на вроде бы "деньги"))
Это всё просто идёт в счёт работы.
Легко увидеть что одинаковые модули не вынесены и добавить Прайс за работу.
Насчет выравнивания бред.
На ПК делаем быстро сетку и кидаем пудинги.
Так что если дизайнер сделал криво вообще без разницы.
Дальше при адаптиве обнуляем пудинги и всё.
нужно набратся смелости и обнулить все вы..оны "дизайнера" . а если возмущается, то пусть переделывает свой халтурный шлак. иначе ни как.
ну слегка зажрались ) отступы не те, а фигме слоев много. мне иногда приходится по фото с телефона верстать
Поржал с проблем автора, показанный дизайн ради дизайна даже разбирать нечего, верятно такую хрень лучше всего вообще каким-нибудь tailwind’ом верстать, попутно немного округляя отступы, управлять таким контентом все равно нереально. Реальная беда, когда есть набор простых и функциональных элементов, а дизайнер придумывает кастомную вундервафлю на ровном месте. Или забывает, что контент динамический, высота и ширина элементов может меняться и гриды с флексами не справляются, приходится откапывать js костыли времен флоатов.
То чувство, когда мой лид собирает макеты именно с этими ошибками, так ещё и без компонентов, в каждом блоке элементы новых размеров, про отступы вообще молчу 😭 и мне приходится также делать, иначе будет дудос атака(
Я думаю каждый веб дизайнер должен уметь верстать сайты или хотя бы знать основы разметки, чтобы таких казусов не случалось
Пожалуйста ставь триггер ворнинг для таких фигма макетов: рандомные имена для элементов, группы вместо фреймов, маски в 2022м, отсутствие и намёка на ауто лайоут. Брр, у меня валерьянки столько нет.
Но по поводу элементов, действительно не факт что всё от дизайнера зависело. У нас(продуктовая компания) пару лет назад отдел маркетинга решил заняться обновлением сайта, вместо того что бы нанять проверенную Украинскую студию с которой уже работали, нашли кого-то подешевле и готового выполнять все прихоти CMO. Получился мягко говоря пиздец, особенно в плане вёрстки. После того как мой фидбек по этому поводу проигнорировали чуть более чем полностью, я решил сидеть в сторонке и запастись попкорном. В итоге: верстальщик был найден с третьей попытки, первые два бросили не доделав и хом-пейдж, разработка затянулась на несколько месяцев. Но смешнее всего итог: в изначальном виде хом прожил всего месяц от силы, после чего был заменён на что-то более адекватное и поддающееся A/B-тестам и стилистически теперь несколько отличается от всего остального.
Опыт командой успешно получен 😅
1. По большей части со всем согласен. Но претензии по всплывающим окнам с формами, если честно, не понял. Вроде до сих пор довольно часто данный приём встречается и если хорошо задизаннен и свёрстан то проблем не вызывает.
2. По сложным анимациям: да, в примере акцент с текста теряется (ну там вроде задумка с движением руки и лампочки, типа работа с идеей, и тут ошибка скорее в акцентах, что запихав туда эту анимацию забили на текст, с ним надо было тогда поработать), но надеюсь это был не в общем и целом камень в огород на сложных и красивых анимаций? Иначе мы придём к тому, что все сайты будут похожи один на другой и будут отличаться только картонками, текстом и соотношениями между блоками. И иногда анимации наоборот позволяют сделать акцент и компактным образом разместить информацию, увести взгляд пользователя туда, куда тебе надо, сделать акцент на UI элементах активных…
3. Ну а что не понятно, как адаптировать последний кусок - так наверное дизайнер должен был ещё сделать макет для мобильной версии, после десктопной, если в макете подобная перегруженность экрана или я не прав?
Пришлось работать с тем что было. Клиента поджимали сроки. С попап формами выкрутились на остальное временно оставили так.
По анимации и фото. Всё должно работать для решения задач, а не во вред. Есть множество примеров уместной анимации. Я показывал такие примеры в разборах сайтов с awwwards (видео есть на канале).
Я думал это я верстать правильно не умею, а оказывается и правда дизайн кривой)
Все ок, нр последнюю придирку не поняла. Почему страница с табами должна на мобилке выглядеть как на пк 1в 1? В таких случаях для мобилки рисуется другой вид страницы с табами. Разве нет?
Я дизайнер в компании, и когда захожу в макеты коллег просто поражаюсь тому, какой там хаос в размерах элементов, в слоях. Папка в папке в папке в папке - это прям боль постоянная.
тоже столкнулась с подобным, работая с одной из дизайнерских фирм. у каждого дизайнера свой подход, и иногда правки вносить ну очень мучительно.
один всё-всё-всё так сгруппировал, что уменьшить заголовок и поднять описание в пяти одинаковых блоках прям проблема, потому что каждый из 10 элементов надо отдельно выделять, ну или расгруппировывать всё ))
другой очень сильно любит маски, и они везде. а я их вообще не юзаю, итого правки тоже неудобно.
третий - фанат автолэйаута и у него все блоки в этих автолэйаутах. он прямоугольники совсем не использует, всё автолэйаутами )) поправить какой-то неудачный блок в такой системе нетривиальная задача, я расгруппировываю нафиг )) иначе не умею )
вообще у всех по-своему, ваши макеты тоже наверное многим неудобно менять, если у вас подходы и любимые инструменты разные.
Такой человек и в жизни.
@@ElenkaZP з автолейаутами це прямо в яблучко)))
Надо создать нормы для входа, где четко прописано для дизайнера, что и как должно быть в макете, что бы работать с ним было нормально . А кто не проходит нормы хай дальше совершенствуется . Что бы всем было хорошо работать а не работать в мука.
Гипотетически это могло бы помочь.
@@DoFurther Оно то помогает, а то будет у каждого 100500 методов и седи голову ломаешь на вся кую фигню
Иногда и верстальщику не мешает идти проштудировать как что либо сверстать.
@@liisaification Что зацепило . 😅
@@Irenicus33 Это у же на сколько мозгов хватает . Я и сам могу не больше проекты нарисовать опыт у же есть , Ато пришлют макет свертаешь, а пользоваться неудобно , на некоторых устройствах . И следишь ещё до ума даводешь.
болтовни много, с дибильными вставками гифок, а конкретики как кот наплакал. Отстой
Для меня, как для дизайнера, это было бы личным позором.
Дякую за відео. Було б цікаво ще дізнатися, які часті помилки зустрічаються при дизайні апок.
Дуже цікаво було б послухати.
Забавно
*Красиво тупить не запретишь* дизайнеру
😂😮
Ужасный макет в фигме) по структуре
Фразу "Я дизайнер - я так вижу", можно использовать лишь профи, которые пол жизни делали все как надо
Даже им приходится аргументировать свои решения.
Веб флоу конечно хорошо, но лучше попробовать чистую вёрстку.
Дизайнер обязан знать что умеет чистый html/css, пишу как Дизайнер/Верстальщик.
Думаю да, главное разобраться с приоритетами особенно джунам. Вебфлоу мне видится, как правильный шаг в этом направлении. Со временем так или иначе захочется делать более сложные проекты и без умения фигачить в «чистый код» уже будет сложно. Поэтому в какой-то момент это станет необходимостью, а значит и учить будет легче.
Может еще что-тоо добавишь к сказанному в видео?
@@DoFurther
1. Перестать делать лендинги с рандомно разбросанными блоками.
2. Выносите повторяющиеся элементы (Кнопки, шрифты, поля ввода, палитру) и их состояния в отдельный фрейм uikit.
Верстальщик прописывает это в первую очередь.
3. Не старайтесь делать по 5 разновидностей кнопок и других интерактивных элементов.
4. Забудьте про параллакс с кучей не прибитых pngшек.
5. Не делайте странных отступов ( верх 5, низ 3, лево 9, право 1).
6. Старайтесь соблюдать квадратное соотношение сторон у контейнера иконок. Особенно если делаете сложные масштабируемые системы.
7. Не делайте больше 4-6 размеров шрифта:
Заголовок;
Под заголовок;
Основной шрифт;
Мелкий тест.
8. Учитывайте изменения размера контейнеров и их содержимого.
У них тогда мозги потекут, 😅
@@flashback6836 Привіт, питання по 7 пункту: чи допускається використання декількох стилів для одного розміру шрифта, наприклад regular, medium, semibold. Чи краще використовувати чим по менше стилів?
Просмотри макет перед версткой, поправь что не нравится, возьми дополнительный бюджет. Не хочешь - нафиг с пляжа. Можно подумать дизы капризничают по поводу кривого фирстиля клиента или отсутствия техзадания. Твоя задача - сверстать макет, который утвердил заказчик, тебе за это платят. Сомневаешься в чем-то - уточни. Не умеешь/не хочешь - делай для себя за лайки как считаешь нужным и выкладывай в соцсети.
Ты горишь что сделал работы больше чем считаешь нужным за оплату. Но о чем ты думал когда брал заказ и обсуждал условия? Почему ты не уточнил у дизайнера как он видит адаптив этих блоков? Почему не объяснил заказчику что тут больше работы чем предполагалось и нужно доплатить? Ты же нашел слова и время чтобы ролик записать..
И сетки - не панацея. В идентичных блоках, безусловно, расстояния будут одинаковые. Но в сложном проекте вроде маркетплейса или новостного портала единственная постоянная сетка - пиксельная, так как очень много логик и подправил, а еще и визуальная подстройка.
А представь что тебя на работу принимают, а тут это видео, где ты рассказываешь как тебе сложно справляться с технической работой, либо обсуждать и предлагать решения)) Почему-то ни дизы, ни верстальщики не хотят заработать и перекидывают ответственность за подготовку макета друг на друга)
Видео было не о жалобах, а том как не делать глупостей в дизайне.
Конечно верстальщик может сделать все что попросили, скрипя зубами, даже если это вредит задачам клиента.
И с чего ты решил, что я не предупредил клиента о всех найденных недочетах или что у меня не получилось справится с задачей? 🤦🏻♂️
Игорь, привет. Спасибо за классный ролик, как всегда на высоте! Я как раз учусь верстать на WF, чтобы делать лендосы под ключ без верстальщиков. И то что ты рассказал в этом видео типичная история, вообще верстать чужие макеты, это всегда кот в мешке. ))
Есть смысл, дело говоришь 😅
Как junior UX/UI вообще не пойму как такое реально.
Еще к тому же недавно прошел подготовительный для фронтендщика (и пошел дальше, если кому интересно все бесплатно), так теперь стал сразу в дизайне все подписывать и готовить как будто потом верстать буду.
Кстати нам на курсе где-то такие макеты и давали, ох у меня и подгорало под конец когда пытаешься систематизировать как-то, а приходиться костылизировать
Единственное, что считаю оправданной некую вложенности, когда макет сделан полностью на autolayout, тогда быстрее верстать, потому что он уже как будто на флексбоксах собран
Круто что у тебя такой подход к самообучению.
Занимаюсь кухнями, что то похожее происходит при проектировании. И не объяснишь, что технически будет сложно, но я сделаю, но потом то через какое то время замучаетесь переделывать и не нужно оно вам окажется.
Я думаю если бы видео посмотрели, скажем, электрики тоже смогли бы провести параллели со своей профессией. Некоторые аспекты фундаментальны и встречаются повсеместно.
@@DoFurther А что электрики делают такого? Там начинка розеток, щитков и люстр вся скрыта и удобна для обслуживания.Вы разве розетку и люстру ни когда не меняли сами? Что там сложного и где подвох? Дизайн розетки и люстры может быть какой угодно, но внутри они все одинаковые
Говоря про padding и margin с ними вообще никогда неудобно работать. НО! С другой стороны верстальщик должен уметь работать с такими "неструктурированными элементами", а они чаще всего реализуются через margin и padding. Ну, и поскольку порой нестандартные элементы могут быть самыми захватывающими, но этот самый "нестандартный элемент" должен быть хорошо продуман дизайнером изначально, и он должен уметь его объяснять. Я не профессиональный дизайнер с миллионом рабочего стажа. Просто исходя из своего опыте в вёрстке и опыта в дизайне в целом делюсь. Тут важно понимание и того, как может это сверстать человек, и то как дизайнер придумает концепцию. Не уверен, что правильно донёс свою мысль, но да ладно
А можно комплимент? Ты крутой и круто рассказываешь. Круто показываешь.
ну чувак ты в чемто прав конечно и интересно было но ты и усложняешь. Например ты предлагаешь сделать из картинки с маской и слоями одну растровую картинку, хотя фигма это векторный редактор. И в этом случае ты не думаешь о том как юзать дальше этот макет дизайнерам. Если захотят его изменить или поддерживать. На счет десятичных значений я уже слышал это, но это происходит из-за того, что ты масштабируешь элементы. Для того чтобы потом убрать десятичные значение тратиться уйму времени. Может кто знает какой-то плагин или пункт в настройках?
в чем проблема при верстке игнорировать дробное значение? если это CSS стили то там автоматом фигма округляет. Для мобилок тоже самое все округляется. Это проблемы у неопытного верстальщика, который не умеет верстать
Картинки же находятся в векторном шейпе с параметром fill 🤷🏻♂️.
По десятичным значениям нужно будет покопаться, так как заметил что и в автолейауте вылетает тоже самое при адаптиве.
Спасибо за полезный, простой и ясный контент с примерами ❤❤
position: relative - всему ответ. Ну или transform: translate 🤔
да давай бахни абсолют, и можешь вызывать 1 скорую и 1 катафалку, что куда поймёшь сам.
И теперь представить, что к этому всему заказчик требует пиксель перфект, ммм)
Только с линейкой, которую нужно будет держать прислоняя к монитору 😂
ахаха, просто ор)))
Как правило верстальщики даже не замечают разницы в макетах которые сверстаны филигранно с точки зрения организации и в макетах которые сделаны с допущениями и упрощениями иногда думаешь, зачем тратить время, если всем абсолютно безразлично.
Люди, помогите советом дизайнеру! Вот если я делаю дизайн по минимальным размерам 1400*1024, 320*480, то как сделать, чтобы при верстке качество картинок было хорошее?
Потом смотришь на мобильном или десктоп 1920 и все картинки растянутые в пикселях! Хотя они есть в большом размере, но как их передать на верстку. Верстают то макет, не смотрят ничего. Никакие доп материалы не просят и не видят.
Разные паддинги у кнопок это просто всюду, уже не обращаю внимание и просто привожу к одному виду. Немного удивляет когда дизайнер забывает отрисовать кнопку сабмита на форме или просто кнопку действия 🫠🫠🫠
Знаешь есть золотое правило.Нарисованный дизайн как нибудь,будет сверстан как нибудь,а там пускай сам объясняет,что и как или сам идет исправлять свои косики ,я сними ваше не базарю)))
Наверное очень сложно для меня, т к я запомнил только дробные значения, полупрозрачные слои и анимацию
ох, как знакомо. есть у меня один коллега такой (более 4-х лет в дизайне, к слову), от которого иногда переходят проекты на доработку. там еще похлеще косяки, чем на видео. в такие моменты хочется обматерить его и уволиться, чем работать с проектом после него. что в принципе, в скором времени и сделаю))
Оооо, я такое говно делал с 5 летним опытом работы дизайнером, что страшно вспомнить 😂
Спасибо за видео, только только сел в фигму, поэтому хотелось бы знать все подобные тонкости и не усложнять другим жизнь)
Дизайн прям грустный. Рискну предположить, что делал его или сам клиент, или его племянник, или джун-фрилансер за копейки. И верстальщика нанял наверняка ж не самого дорогого, ибо дизайнер, который умеет фронтенд, дешевле, чем настоящий опытный фронтендщик. Вот и вышло, что на всех этапах попаболь, ибо дёшево же.
А вы любите выходить из зоны комфорта, я погляжу )) Я тоже дизайнер и тоже умею верстать, но всегда стараюсь отпетлять от вёрстки, ибо скучно очень, плюс кроссбраузерная совместимость печалит иногда)
По опыту (верстальщики а разрабы приложений могут со мной общаться если им надо) могу сказать, что больше всего неприятностей верстальщикам доставляют странные фоновые картинки, которые вылазят за границы фрейма и при сохранении получается фигня какая-то. Кроме того я один раз протупила и использовала режим наложения для плашки, который в цсс нереализуем. Ну и последнее: разработчики очень не любят кастомные элементы вроде красивый календарей с альтернативной логикой , которые сложно и долго реализовывать.
Просто нарисовать то легко, а воплотить это другое дело когда не знаешь всех тонкостей дела .
"но всегда стараюсь отпетлять от вёрстки, ибо скучно очень" всё говорит само за себя.
@@ThePirateHistory ну да а другие пускай е..б
Очень классно !!! Спасибо я начинающий дизайнер, очень полезно!!
"ненавижу, блять, дизайнеров" уже привык слушать мой муж дизайнер) Слышит и понимает что пришёл в работу говняный макет)))
Можно про ленивых front end разрабов 😂
Кто, скажите. заказывает работы у настолько криворуких дизайнеров, которые даже базовых вещей не понимают. И ладно дизайнер не до конца понимает, как готовить макет к верстке, но криворукий, пожёванный дизайн отдавать, это жесть. Если только это не стоит 3 копейки...
Ну все-таки примеры в видео скорее для сайтов типа презентации, там акцент как раз на вот этот разброс, так что требовать чтобы там было всё выравнено как в экселе неправильно. Да и картинки можно самому подрезать под нужные размеры. Я не верстальщик, я программист, я бы большинство этих картинок просто задним фоном положил и никто бы не узнал 150 там пикселей или 151.
@@xezdx неважно, презентационный сайт или нет, работа дизайнер состоит не в том, чтобы просто накидать элементов, а и продумать, как это будет функционировать. Просто представьте человека, который делает чертеж какого-то механизма, пропускает кучу правил, лишь бы это выглядело прикольно, а уже пусть инженеры разбираются с тем, как это должно функционировать.
@@maximmaslennikov4038 Этот человек что делает прикольно - называется дищайнер в IKEA. Там они получают по миллиону евро/год. И делают как раз фигню, которая максимально дешевая по материалам. А технари должны разработать тех процесс изготовления, дизайнеру все равно что технарь с этим не справляется, значит выгонят технаря и пойдут к китайцам. Китайцы сделают любую прихоть дизайнера с IKEA. Так что не будь плохим технарем, а то в рашку отправят с швейцарии быстро, там будешь за 3к долларов работать это потолок по зарплате. Ну пока доллар не упадет....
@@serhiis_ ну кто считает, что это все правильно, пусть и становится верстаком и пашет на таких идиотов)
да всё сохранить картинкой и замапить линками =)
Смотрю староверы здесь? 😅
похоже на нытье, дельное конечно временами, до по подпору эпитетов - нытье. хоть как то чтоб заметили
Нашли дизайнера из видео, привет как мягкие стены?
Пхахахазазаз
Спасибо за видео! Всплывающие формы вообще лучше избегать в дизайне? Но они же постоянно встречаются в лендингах, например. Как с ними лучше поступать?
Так а зачем их делать? Почему сразу не сделать CTA блок, без всплывающего окна?
Потому что люди находятся в плену заблуждений, относительно эффективности разного рода "спецэффектов".
Модальные окна если и делать - то это должны быть только небольшие уведомляшки с краю экрана. Но точно ни как не полноэкранные элементы побуждающие совершить целевое действие. Вы даже собственную реакцию на них посмотрите. При всплытии модалки, да ещё и в не подходящее время - единственное действие которое она побуждает сделать - закрыть её.
@@MyNameIsChira сейчас бы все в одну кучу сваливать.
Как насчёт окна с подтверждением удаления? Тоже бесит?
@@David_Bowman Сейчас бы отвечать на комменты, не читая их. Нет не бесит, я не об этом писал.
Слава богу я больше практически не верстаю. В таких случаях имеешь полное право делать все на глаз. Если такого дизайнера взяли на работу, значит во всем остальном заказчик, менеджер разбирается примерно так же. Также плохо. Не нужно с такими работать.
Спасибо за качество видосов
3:41 здравствуйте, подскажите что за прозрачные «листы» и маркеры?
Я думаю, что при правильной архитектуру и подходе, даже такие костыльные макеты можно верстать без особой зарара и бомбежки
пс. Такие кейсы твои
Честно очень похоже на стоковый макет. Вот сколько их открывал - всегда там шляпа по верстке и иерархии. Что в былые времена для фотошопа, что сейчас для фигм и скетчей.
Классно было бы послушать, как ты используешь Notion в работе. Слышал в паре роликах упомянания, но не увидел что внутри. Сам им не пользовался, ибо визуальщик, но интересно услышать, что за инструмент такой
Я notion использую по большей части для ведения канала. Лучше глянуть что есть на ютубе по этой теме, особенно если знаешь английский.
Работаю в полиграфии допечатником, от 99% дизайнеров приходит полная лажа, которую приходится переделывать. Вывод у меня такой: дизайнером может назваться любой, кто открыл фотошоп/ корел/иллюстратор/индизайн, еще в более худшем случае "специализированный" сайт, где он сделает визитку/открытку/буклет/листовку для печати.
Так и есть, фигма своей простотой освоения создала иллюзию сотням людей, что ты за день ее освоения успел стать дизайнером. Они ж на серьезных щах бегут создавать резюме на ХХ.... С чего ты это вообще решил, что ты можешь претендовать на роль в профессии, о которой, по сути еще ничего не знаешь? Самообман какой-то. Реальность таких людей охлаждает, к счастью, очень быстро и жестко
А под словами полная лажа, что имеется ввиду? По подготовке к печати, по цветам или по сетке...?
Я даже ещё не Джуниор, но глаза у меня от этого всего болят сильно
Не совсем поняла комментария касательно параллакс эффекта: а если о нем попросил клиент, то причем тут дизайнер?
У дизайнера на этот счет есть замечательный вопрос для клиента, если у него есть какие-то предложения по дизайну: «Что мы получим/выиграем, если это сделаем?» И тут же на ответ клиента есть контр аргумент с усложенением и удорожанием работы верстальщика.
@@DoFurther Но это не всегда работает. Иногда у клиентов есть свое виденье дизайна и никакие советы и аргументы им не нужны. Возможно это именно тот самый кейс, где так решил клиент и ему не важно, будет это работать или нет.
Да, такое бывает, но не в этом случае. Я работаю с клиентом напрямую и ряд изменений удалось легко отстоять при минимальной аргументации.
Про модульную сетку полная херь, есть направляющие и все. Не нужно быть гением чтобы поставить две-три направляющие. Это вам не газета.
Та да. Можно поставить направляюще слева и справа 😆
Устал ждать новое видео
Ладно все по группам оккуратно расписать , шапка и.т.д . Но что теперь делать сайты 2010 годов что бы верстальщику меньше работы было при этом испортить свою работу?
Можешь кинуть таймкод, где я к этому призываю?
Ахаха бл ваще по кайфу, бахаешь всё в десктопе по одному, а тот же самый элемент в адаптиве, вообще другой и вообще не часть того блока что он был в декстопе, при этом это сук почти точная копия
дизайнер ответит "потому что потому" или "че я должен делать, чтобы верстальщику было удобно?"
Делал как то игру на фрилансе, нужен был дизайн, заказали дизайн. Выглядит вроде норм и выравнено все нормально, но с*ка не одного элемента не подписано, сгруппировать элементы дизайнер тоже бол клал и я потратил гребаные 3 часа на хоть какую то группировку что бы хоть как то ариентироваться в этой паутине.
Гыгыгыг. В следующем видео как раз буду исправлять такой макет.
1:02 что это?
потороченное межбуквенное расстояние в словах
Полезно, спасибо)
~~Пошел в ... этот фронт энд~~🤣
Столкновение двух парадигм, ну или понимание кто такой дизайнер. В СНГ дизайнер - это художник, вольная птица, я так вижу, нарисовал - досвидания и т.п. Европа, америка -- дизайнер это тот кто и придумал, и сделал.
По факту этой теме -- сделать как дизайнер нарисовал, сраку верстальщик рвет против сделать как верстальщик хочет, по факту говно дизайн -- 1000 лет в обед.
Креатив и инженерия это борьба двух разных полушарий, не возможно думать сразу в этих двух направлениях. Ну или разве на опыте перекрывать одно другим, но по факту не всегда получается. Говорю как UX&UI дизайнер с образованием программиста.
Истина по середине. И дизайнер должен знать основы, и верстальщик пробовать креатив. Ну и коммуникация решает, а не в ракушках сидеть
Кстати, дизайнер на этом проекте был из Европы 😅 Неопытность - понятие интернациональное 🙂
@@DoFurther ну я бы сказал что разрыв в экспертизе американско-европейских дизов и украинских сокращается.
Ну а уникумы везде есть, как и идиоты
Верстал недавно макет новичка. У него табы, в мобильной версии превращались в выпадающие списки. Это же совсем другая вложенность.
Сегодня верстал, в декстопе таблица, в мобиле список при этом внутренность изменилась полностью, сама структура, появились новые заголовки которых не было вообще в десктопе и не должно быть в мобиле. И всё это буду скоро натягивать.
да картинкой вставил такие буквы поехавшие и все))
В формате tiff 😅🤝
Ищу хороший курс по Webflow. возможно кто-то сможет подсказать где искать или к кому обратиться?
uprock
Не всегда с дизайнеров начинается боль)
Иногда заказчик дает впихнуть невпихуемое и приходиться спорить с ним и например придумывать как адаптировать табы в мой версии.
Только замечу что дизайнер обязан спроектировать моб версию, планшетную если нужно.
От себя задам вопрос) Насколько харит неподписанные слои?
Обычно все в автолеяуте и частично в компонентах но меня харит подписывать слои, тратить свое время.
Случаи бывают разные. Главное чтобы сам дизайнер не становился причиной ненужных проблем 🙂
- ну попводу не целых значений, это скорее вопрос к Фигма. Меня это просто выносит. Зачем это делать? Может из-за того что Фигма хочет быть редактором и для графдизайнеров?
- по поводу блоков и сетки, дизайнеров нужно и можно заставлять рисовать по сетке (как минимум бутстрап) и делать 3 версии (лучше 4) экрана для разных ширин (Десктоп ФулХД, ХД , планшет и смартфон). Тогда он сам увидет как его "красота" адаптируется.)))
- про картинки с эфектами - это по моему не изличимо, )))) - ну поэтому есть джуны - которые это все причесывают. Мидлы и сеньйоры страдают вирусом мальнькой власти)))
По моему мненеию, для лечения этих болячек у дизайнеров, в Фигме есть автолеаут. Когда фигачиш макет используя эту фичу, претензий у кодеров поменьше.
Спасибо за видос. Все классно рассказал.
Да, использование автолейаута заставляет работать в ограничениях приближенных к тем, с которыми сталкивается кодер.
Насчет чисел с десятичными значениями: чаще всего причина - это использование autolayout, который растягивает элементы внутри контейнера. Получается, с точки зрения вестальщиков надо вообще отказываться от использования fill в лейауте? А если это календарь, например, который должен быть адаптивным? Тогда надо делать отдельный варианты для экрана ширины? Тогда наверняка будет жалоба, что прислали 100500 вариантов, и в них фиг разберешься.
Автолейаута в макете не было. Но да, такая проблема есть. Параметры fill в автолейауте и scale в constraints делают делов.
Мнение так себе верстальщика. Который по старинке верстает сеткой и отступами... По принципам бутстрапа... Для такого человека верх идеала - упрощённые админ.панели и квадратные дешёвые лендинги.
Удачи с бутстрапной концепцией верстки.
хахах, спасибо
А вы с какой работаете?
в 2022 еще используют слово верстальщик ?
Да, старые пердуны, типа меня XD
По поводу сеток - не уверена. Общалась со многими дизайнерами, которые делали макеты по сеткам и не по сеткам - никогда не было у них проблем с верстальщиками. А если не возможно запихнуть дизайн в сетку 12 колонок, если нужна кастомная? Пофиг? Главное чтобы верстальщику было удобно?
Дело не в кастомности сетки, а в том что нужно быть системным. Сетка может быть кастомной, но тогда ее нужно придерживаться, а не делать дизайн решения на основе «просто-потому-что».
Нашли """радость"""""", которая видать веб дизайном занимается и не выкупает за сетку, систему, да и просто головой думать, за сроки за всё ост. Ведь накуивертить на листе бумаге может каждый, засунул туда сюда норм