Очень интересно послушать про вёрстку сайтов которые готовятся для awwwards. Как дизы сотрудничают с верстальщиками. Как устроены сетки и есть ли они вообще, т.к. ощущение что их там вообще нет. В каких прогах верстают ребята, ток в vs или ещё в других. В каких прогах делают анимации и кто их делает. Какие то мелочи, именно в сложных и сочных сайтах. Так же, было бы интересно послушать про то как устроена система работы таких студий. У тебя уже было интервью с Obys, но хотелось бы узнать подробнее про то что написал выше. Кто ещё хочет такой видосик напишите вопросы в ответы, что бы Further было легче понять на какие вопросы можно было поспрашивать ребят. Очень надеюсь то что снимешь такой видос)

@nevmyr

2 жыл бұрын

Интересно, как решаются вопросы с анимациями на таких сайтах, (чтобы разработчики понимали, где и как они должны работать). Дизайнер делает анимацию макета после утверждения дизайна или поэтапно в процессе работы над проектом? Анимирует всё дело тот же дизайнер, который создавал юай или отдельный человек, как они в свою очередь, согласуют свою работу? 🤔

@enotbert

2 жыл бұрын

@@nevmyr мне кажется, кто как хочет, так и др... налаживает рабочий процесс. Например у нас на проекте за анимацию отвечает тот же дизайнер, которые ее придумал. Более того, он должен предоставить раскадровку и референс или собрать анимацию где ему будет удобно. Мой личный опыт подсказывает, что доверять верстальщикам самим придумывать правила поведения для элементов сайта или анимацию - очень плохая идея. Все что для дизайна важно, должно быть так или иначе жестко определено и задокументированно, а все что не задукоментированно - не важно и может быть изменено в угоду удобства\валидности\семантичности верстки.

@kaihoso2677

2 жыл бұрын

Согласна, очень интересно, просто если делать все по правилам верстки, дизайн получается скучноватый

@ktoya..

2 жыл бұрын

Обычно верстает и дизайнит на таких сайтах один человек. Readymag или Webflow

@user-yd3yr1pw3x

2 жыл бұрын

Верстают в том, что удобно. От VSCode и Sublime до Emacs и Vi, и обратно)

А в чем проблема посмотреть отступ зажав alt? Зачем на глаз? В чем проблема экспортировать изображение из группы, чтобы слои слились в один? Лень делать параллакс? Ну там давайте вообще без эффектов делать деревянные сайты просто чтобы верстальщикам было меньше работы). В дизайне есть понятие оптическая компенсация, если вам оно не знакомо изучите, тогда поймете почему круглые иконки могут быть на пару пикселей больше квадратных. Их обычно оборачивают в одинакового размера фреймы, но если вы лезете прям до самой иконки, как это понятно из видео, то видимо сами не умеете пользоваться фигмой и экспортить объекты правильно))

@petroniusarbiter4193

2 жыл бұрын

Это не твой ли макет я верстал, где header был просто растровой картинкой? И мне пришлось чуть ли не линейкой вымерять расстояние элементов?)

@art.kornilov

2 жыл бұрын

По факту всё

@DoFurther

2 жыл бұрын

пахахахахаха

@dmitry_kejana

2 жыл бұрын

@@petroniusarbiter4193 Врядли, и причем тут это?

Я сам начинал с верстки на html css, понял что это не мое и начал заниматься дизайном и тут мне здорово помогли навыки html, чтобы верстальщику было удобно работать и он не вставал в ступор после каждого блока, со словами что за ***дец

@ArtemKobyakov

2 жыл бұрын

Тоже самое, зачёт

@user-nz5co1gr3n

2 жыл бұрын

тоже самое)

@aau8

2 жыл бұрын

Плиз, дизайнеры, будьте все такими)))

@Beast8833

2 жыл бұрын

проблема в том, что многие дизайнеры не умеют в базовый html+css, отсюда все проблемы но в то же время, каждый верстальщик умеет в базовый "дизайн".... вывод: дизайнерам нужно проходить курсы базовой верстки

@ReaperArcheon

2 жыл бұрын

Много раз такое слышал, а на практике вы абсолютно не понимаете взаимовзязей элементов в верстке

Это, кстати, работает и в обратную сторону) Если слишком бояться загрузить верстальщика, то появятся примитивные макеты. Круто, когда дизайнер знает все возможности платформы, для которой дизайнит

@user-xm3dc9fo5h

2 жыл бұрын

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

@Headik

2 жыл бұрын

@@user-xm3dc9fo5h Получается круто если верстальщик делает дизайн вместе с вёрсткой, за зарплату верстальщика

@DoFurther

2 жыл бұрын

Круто когда решения дизайнера обоснованы: логикой, выполнением поставленных задач и соблюдением технических требований.

@Konichel

Жыл бұрын

Тогда можно делать простецкий дизайн на уровне 00 ых или начала 10 х годов, вот тогда, да верстальщиков загружать не будут, надеюсь они там еще сериальчик будут смотреть параллельно, а дизайнеры не будут заморачиваться над дизайном, выгодно? Выгодно. Прогрессивно? Нет.

@NuBreakz1990

11 ай бұрын

@@DoFurther вы упомянули поп апы, типа столько геморроя с ними, неужели на вебфлоу нет какого то плагина или решения для таких по сути стандартных блоков? в этом плане получается, даже с учетом всех ограничений, тильда рулит.

Ох сколько я за все время встречал дизайнеров, которые творческие люди :) Ничего не имею против, них :) Но если это сложно для условного недельно/месячного проекта, то представте как это. сложно на более сложных и обьемных проектах! Меня часто вот выносили люди которые на больших проектах где мы сами пилили по сути UI либу для приложение под наш дизайн. Так вот когда они добавляют к примеру поведение кнопки на новой странице или какой-то модалке при наведении не темнее от главного цвета а к примеру, светлее... Казалось бы тю да что там, но по факту это уже другой компонент :) Новая кнопка которой еще не было :) Приходишь к ним и такой, "Че за фигня, походу бага", а тебе в ответ "Нет фича, а мы что так не можем?" И начинаешь обьяснять что всему должно быть аргументация, у нас утвержденный дизайн и UX тоже :) Ну в общем тратишь уйму времени чтобы обьяснить что надо использовать готовые компоненты и из них собирать мокапы а если нужна кнопка то нужно ее добавлять глобально и в UiKit тоже :) А не тупо типа сделай модалку а там вообще другое поведение... И все эстимации коту под хвост :) Ну в общем я никогда особо не злился на джунов, только если они на контакт ну совсем не идут. Мне более печально от опытных такой кейс ловить. ПС В целом думаю дизайнеру полезно немного разбираться в технической части, понимать как с этим дальше работать будут. Я хоть и фронт но смежные области иногда ресерчу. Дизайн, менеджмент, бэкенд. Настолько глубоко, чтобы понимать как это работает и чтобы это приносило пользу для моей основной деятельности. Спасибо за видео :)

@aau8

2 жыл бұрын

Охохо, как мед на душу))) Некоторые дизайнеры не только не думают о тех. части, но и не учитывают то, как юзер будет пользоваться их дизайном. Одно слово - красиво. А толку от этого красиво, если не понять как этим пользоваться??? Мне один раз дизайнер, в ответ моим правкам по дизайну, привел в пример сайты awwwards. Типа, вон как у них все нестандартно, у нас также будет. Ага, ради бога, только не за верстку за 20к. После слов о цене и пару тонн аргументов, желание "сделать как на awwwards" сразу ушло. Кстати, дизайн там был далек от awwwards

@sergeytomkovich2741

2 жыл бұрын

@@aau8 ну если сайт делается для того чтобы попасть на awwwards, то там обычно удобство уходит на второй план. Ведь основная цель не удобство юзера - а получить награду>стать чуточку знаменитей>получить новых клиентов. Частая практика у молодых дизайн агентств, хотя есть некоторые которые на этом только и специализируются. Но у них и разработчики обычно свои, которые шарят всякие либы для всяких модных вау эффект. Другая беда - когда дизайнеры пытаются awwwards стиль применить везде. Сам раньше грешил этим, когда пытаешься аккуратность дизайна заместить креативом. С опытом переобулся наоборот в максимально аккуратные, минималистичные и понятные сайты. Ну и знать тех.часть для дизайнера я считаю мастхэв. Во-первых ты приходишь к верстальщику не с идеей в голове, а уже с референсами с codepen) Плюс доводить дизайн до идеала проще не условным "подвинь на 5 пикс тут", а через инспектор глянуть реально нужный отступ для элемента и скинуть уже куском CSS.

@grechaa82

2 жыл бұрын

Странно, почему верстальщик, у которого свои задачи ходит и делает правки дизайнеру, который делал макет. Просто Если макет сделан, его утвердили выше стоящие люди, значит надо делать его (само собой если те для кого это все устраивает и это хоть немного нужно). Но приходи какой-то верстальщик, который говорит что это делать не будет, потому что испльзуется цвет которого он не видел раньше.. весьма странно, может тогда тебе стать дизайнером? Однако не исключенно что челики (дизайнеры), просто ничего не понимающие ду*рочки

@grechaa82

2 жыл бұрын

Странно, почему верстальщик, у которого свои задачи ходит и делает правки дизайнеру, который делал макет. Просто Если макет сделан, его утвердили выше стоящие люди, значит надо делать его (само собой если те для кого это все устраивает и это хоть немного нужно). Но приходи какой-то верстальщик, который говорит что это делать не будет, потому что испльзуется цвет которого он не видел раньше.. весьма странно, может тогда тебе стать дизайнером? Однако не исключенно что челики (дизайнеры), просто ничего не понимающие ду*рочки

@D_o_m_i_n_u_S

2 жыл бұрын

@@grechaa82вопрос вы работали на больших проектах? На самом деле такие кейсы вполне реальны. И все очень просто. Когда уже проведён бизнес анализ, написана спека, сделан UX, нарисовали UI. Расшили задачи и накидали спринтов на всю команду. И основной функционал допилили и сделали первый релиз. Тогда появляется время для второстепенных фичей. И чаще всего с проекта могут снять опытных дизайнеров на другой проект, особенно если это аутсорсовая компания. На проект могут поставить джуна, это не только дизайнеров касается. Но все же речь о них. Так вот как раз в таком случае это плодотворная среда для джуна. И не только джуна. Например просто челика который дизайнил раньше на фрилансе. Толковый, взяли на мидла к примеру. Но у него очень мало опыта в больших проектах и в команде. На счёт ‘ходит делать правки дизайнеру’ думаю вы не совсем внимательно прочитали мой коммент. ‘Что делать не будет, потому что используется цвет которого раньше не видел’ - комментарий на уровне челика который не шарит о чем говорит. Ну во первых я не про цвет говорил а его поведения. Думаю если бы вам знакома была эта тема такую хрень не писали бы. Во вторых да не буду верстать и не должен этого делать по нескольким причинам. Цвет должен быть утверждён, внесён в документацию как минимум UIKit. В эстимации задачи должен учитываться кейс реализации дополнительного компонента. Я писал выше что этого не учитывали. Но думаю тебе это все не знакомо, так что рекомендации свои оставь себе. Плюс есть такое понятие как софт скилы. В нормальных компаниях это учитывают и токсичных людей могут и кликнуть с команды какой бы крутой он спец не был бы. Так вот про софт скилы, одним из них является имя коммуникация. Ну объясню для маленьких, все делают ошибки. И дизайнеры и верстальщики и фронты ну тенденцию ты понял надеюсь. И в нормальной команде тот кто замечает ошибку должен о ней заявится на митах. В зависимости от проекта миты могут отличатся. Вот к примеру я на дейлике заявился и мы обсудили этот вопрос. Или ты думал я пешком к нему ходил дядя?

Еще есть "веселые" заказчики. Был опыт сотрудничества с заказчицей, которая умеет в дизайн полиграфии и решила что умеет в веб. Нужно было ее готовые макеты с шириной овер 4к рабочей области и в цмуке привести к более-менее верстабельному виду. У нее в макетах было все: разные отступы и в т.ч. вертикальные, десятичные размеры шрифтов, разной формы кропаные изображения, логически одинаковые заголовки, которые разные визуально от макета к макету. Вишенка на торте - исходники обязательно в ФШ и у нее ретина, а у меня нет) Работаю в фш, для показа джипеги макетов гружу в фигму))) Я просто проклинал все на свете, 10 раз ей пытался объяснить что принципы размещения и решения в ее макетах это просто неверстабельное *авно, показывал примеры моих макетов и результат их верстки, но она просто непробиваемая была. В итоге я просто сделал как она просила и на этом мои полномочия все. Оч жаль того, кто согласился это все верстать

@DoFurther

2 жыл бұрын

Ожидается день оффигительных историй в комментах 😅

@vgenm2457

2 жыл бұрын

🤣

@user-ge8gc5uu9v

2 жыл бұрын

Была похожая ситуация, дизайн сайта выглядел, как рекламная листовка с акцией. Я сразу понял, что его делал дизайнер по полиграфии.

@sergeytomkovich2741

2 жыл бұрын

в 2022 году если приносят дизайн в ФШ - можно сразу отказываться как по мне) Так как это либо дизайн собранный полиграфистом, либо каким-то древним динозавром.

@vgenm2457

2 жыл бұрын

@@sergeytomkovich2741 А если за него хорошую сумму плотят 😁

Спасибо за видео. Интересно послушать как всегда. Про «капусту» в слоях хорошее замечание. Но когда у тебя 100 фоток постеров или шмоток для онлайн магазина и все разных пропорций - кропать их в ручную… ну сам понимаешь) но совет хороший, прислушался. А по поводу кодинга, тяну до последнего 😅 Ошэнь страшна лезть туда. Да и когда долгое время работаешь с одними разработчиками мотивация изучать код как-то пропадает.

Как дизайнер скажу так: да, многие вещи нарисовать значительно проще, чем реализовать на верстке, но в этом и фишка современных сайтов - сейчас важно чтобы сайт смотрелся свежо на фоне конкурентов, а не был простым унылым говном с простыми заезженными статичными блоками без анимаций. А ты, как верстальщик, соответственно можешь просить более высокую оплату за верстку сложного дизайна.

Дизайнер, стань верстальщиком, и отними работу у ленивых верстальщиков

@luxarmiger5729

2 жыл бұрын

Точно, стань верстальщиком, изучи html, css, js и еще вагон сопутствующих технологий, потрать на это пару лет и тогда поймешь: это верстальщик ленивый или может наоборот. А может получиться так, что изучение верстки приведет к тому, что станешь реально хорошим дизайнером.

@WERWOLION

11 ай бұрын

@@luxarmiger5729 а потом 4 года изучай на практике архитектцрную-семантику. И Гори с того какой говно код ты писал вчера.

@WERWOLION

11 ай бұрын

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

Спасибо за видео) Хотелось бы прокомментировать и поспорить с некоторыми моментами. В целом, с проблематикой согласен. Далеко не все дизайнеры, очевидно, грамотно работают с макетами. И всегда легко накреативить трендовые красивые штуки, не подумав о разработчиках... Тем не менее, к середине видео я стал несогласен с выдвигаемыми аргументами. Да, верстать куда легче, когда все красиво и четко расположено в контейнерах, но и верстальщик не должен злиться, что ему нужно добавить один паддинг) Это если я правильно понял суть вопроса, конечно. Также не соглашусь по поводу отвлекающих иллюстраций - да, может быть, в конкретном примере это не выглядит привлекательно. Но что же это получается, что надо сайты сугубо из текста делать, чтобы ничего не отвлекало? Вот такой посыл у вас получился в этом моменте, понимаю, что ненамеренно, но хотел обратить внимание. С чем категорически не согласен - это с критикой всплывающих окон, разработчик не должен ругаться на такое, я считаю. Если с точки зрения UX не предусмотрена фиксированная контактная форма на главной, то есть какие-то аргументы для таких решений. И это важная часть сайта, и критиковать попап - все равно что критиковать наличие любой дополнительной внутренней страницы только потому, что это +работа. Предельно важно тут не вселить в дизайнеров страх делать полноценный функционал)) Нужно делать все необходимые элементы, и мобильную версию дизайнить тоже, кстати. Еще раз спасибо)

@DoFurther

2 жыл бұрын

Главный посыл для дизайнеров, который я хотел донести - принимать взвешенные решения, которые помогают добиться поставленных задач.

@WERWOLION

11 ай бұрын

Просто если дизайн сложнее то и стоимость работы уже не 50$ а 200$

Спасибо за полезный, простой и ясный контент с примерами ❤❤

Игорь, привет. Спасибо за классный ролик, как всегда на высоте! Я как раз учусь верстать на WF, чтобы делать лендосы под ключ без верстальщиков. И то что ты рассказал в этом видео типичная история, вообще верстать чужие макеты, это всегда кот в мешке. ))

Считаю, что в нашем время веб дизайнер должен знать основы html/css/js Чтобы понимать, как будет реализовываться тот или иной элемент/функционал и возможно ли, вообще, это сделать

@markgober5969

Жыл бұрын

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

8 минут нытья от junior верстальщика, на junior дизайнера. Единственная реальная проблема в видео - полное отсутсвие привязки к сетке. На все остальное мне было бы совершенно насрать, клиент всеравно платит почасовую ставку.

@DoFurther

2 жыл бұрын

Я не поверю, что ты не понял, что «нытьё» здесь только для иронии. Задача же была показать дизайнерам, что некоторые вещи делать не обязательно и наоборот, есть важные нюансы, которые должны быть учтены. Я стараюсь не использовать подход в работе: мне насрать что делать, если клиент платит. Мне как клиенту было бы страшно обратиться к: врачу, юристу, строителю, дизайнеру - с таким подходом в работе.

@d1namis

2 жыл бұрын

@@DoFurther если ты хочешь именно научить дизайнера как правильно нарисовать сайт за счет зананий смежной профессии, то для начала посмотри гайд по верстки книги или брошуре, и увидешь что там точно такая же база. Совершенно идентичная, любую хорошую книгу можно сверстать в сайт как бы безумно она не выглядела по своему устройству, потому что там человек продумал ее структуру. Так вот, если дизайнер получил образование и до сих пор не может нормально сверстать сайт - то ты никогда его уже ничему не научишь, он уже давно проф. непригодный. И это я не к тому что книга или брошура сложней, но я не поверю что человек который зарабатывает дизайном на жизнь никогда не трогал inDesign.

Отличный ролик. И тема противостояния дизайнеров и верстальщиков, она наверное неиссякаема)) Сам я дизайнер и версткой полноценно никогда не занимался. Если не считать за вёрстку сайты на Тильде)) Но, очень плотно общался с коллегами верстальщиками и старался погрузиться в специфику их работы. И могу ответственно заявить! Дизайнер не обязан уметь верстать, но принципы знать должен. Если конечно хочет, чтоб его дизайн был хорошо свёрстан. Многие из моих коллег (дизайнеров) часто недоумевают, почему они сдают макеты для верстки в фигме в одном виде, а на выходе получается ,мягко говоря, не совсем то. А получается так зачастую не потому, что верстальщик "рукожоп" или ему чего-то там не охота делать, а потому, что ты задизайнил так, что хрен нормально это сверстаешь!!!)) Поэтому, когда ты знаешь основные, базовые принципы верстки, то ты никогда(ну, или почти никогда) не задизайнишь так, чтоб верстальщик потом тебя проклинал))

В такие моменты я рада что в начале я и дизайн делала и верстала сама. Пара раз помучалась с вёрсткой и потом все оступы-элементы делала одинкаовые/пропорциональные))) а уж иконки не поместить в компоненты в фигме это вообще как то ..

Классно было бы послушать, как ты используешь Notion в работе. Слышал в паре роликах упомянания, но не увидел что внутри. Сам им не пользовался, ибо визуальщик, но интересно услышать, что за инструмент такой

@DoFurther

2 жыл бұрын

Я notion использую по большей части для ведения канала. Лучше глянуть что есть на ютубе по этой теме, особенно если знаешь английский.

Очень классно !!! Спасибо я начинающий дизайнер, очень полезно!!

3:41 здравствуйте, подскажите что за прозрачные «листы» и маркеры?

Спасибо за видео! Всплывающие формы вообще лучше избегать в дизайне? Но они же постоянно встречаются в лендингах, например. Как с ними лучше поступать?

@DoFurther

2 жыл бұрын

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

@wov2004

2 жыл бұрын

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

@MyNameIsChira

2 жыл бұрын

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

@David_Bowman

Жыл бұрын

@@MyNameIsChira сейчас бы все в одну кучу сваливать. Как насчёт окна с подтверждением удаления? Тоже бесит?

@MyNameIsChira

Жыл бұрын

@@David_Bowman Сейчас бы отвечать на комменты, не читая их. Нет не бесит, я не об этом писал.

Дякую за відео. Було б цікаво ще дізнатися, які часті помилки зустрічаються при дизайні апок.

@jullfill6256

2 жыл бұрын

Дуже цікаво було б послухати.

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

@ElenkaZP

2 жыл бұрын

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

@vgenm2457

2 жыл бұрын

Такой человек и в жизни.

@MaxDuran-gf3gi

2 жыл бұрын

@@ElenkaZP з автолейаутами це прямо в яблучко)))

Очень полезное видео! Часто говорят что верстальщики ругаю дизайнеров, а за что конкретно было не ясно)) У меня случается дробление размеров элементов когда я в Auto Layout их засовываю. Буду рада если подскажешь почему это происходит.

@user-yc7tn4ro3x

2 жыл бұрын

Spacing mode поменяй, либо у тебя не четные размеры областей.

Мужик спасибо тебе за золотые истины! Я как фронт разработчик видел такие макеты что и страшном сне не приснятся) надеюсь те кто делает их посмотрят тебя и научатся уважать труд других. Спасибо!

Спасибо за качество видосов

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

Хорошая тема для ролика, сенк ю! Возможно расширить тематику и показать на одном примере/макете тру подход и не тру?

@DoFurther

2 жыл бұрын

Это буквально тема следующего видео )

А можно комплимент? Ты крутой и круто рассказываешь. Круто показываешь.

Полезно, спасибо)

1. По большей части со всем согласен. Но претензии по всплывающим окнам с формами, если честно, не понял. Вроде до сих пор довольно часто данный приём встречается и если хорошо задизаннен и свёрстан то проблем не вызывает. 2. По сложным анимациям: да, в примере акцент с текста теряется (ну там вроде задумка с движением руки и лампочки, типа работа с идеей, и тут ошибка скорее в акцентах, что запихав туда эту анимацию забили на текст, с ним надо было тогда поработать), но надеюсь это был не в общем и целом камень в огород на сложных и красивых анимаций? Иначе мы придём к тому, что все сайты будут похожи один на другой и будут отличаться только картонками, текстом и соотношениями между блоками. И иногда анимации наоборот позволяют сделать акцент и компактным образом разместить информацию, увести взгляд пользователя туда, куда тебе надо, сделать акцент на UI элементах активных… 3. Ну а что не понятно, как адаптировать последний кусок - так наверное дизайнер должен был ещё сделать макет для мобильной версии, после десктопной, если в макете подобная перегруженность экрана или я не прав?

@DoFurther

2 жыл бұрын

Пришлось работать с тем что было. Клиента поджимали сроки. С попап формами выкрутились на остальное временно оставили так. По анимации и фото. Всё должно работать для решения задач, а не во вред. Есть множество примеров уместной анимации. Я показывал такие примеры в разборах сайтов с awwwards (видео есть на канале).

Насчет чисел с десятичными значениями: чаще всего причина - это использование autolayout, который растягивает элементы внутри контейнера. Получается, с точки зрения вестальщиков надо вообще отказываться от использования fill в лейауте? А если это календарь, например, который должен быть адаптивным? Тогда надо делать отдельный варианты для экрана ширины? Тогда наверняка будет жалоба, что прислали 100500 вариантов, и в них фиг разберешься.

@DoFurther

2 жыл бұрын

Автолейаута в макете не было. Но да, такая проблема есть. Параметры fill в автолейауте и scale в constraints делают делов.

Люди, помогите советом дизайнеру! Вот если я делаю дизайн по минимальным размерам 1400*1024, 320*480, то как сделать, чтобы при верстке качество картинок было хорошее? Потом смотришь на мобильном или десктоп 1920 и все картинки растянутые в пикселях! Хотя они есть в большом размере, но как их передать на верстку. Верстают то макет, не смотрят ничего. Никакие доп материалы не просят и не видят.

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

@DoFurther

2 жыл бұрын

Круто что мне хоть до кого-то донести суть видео.

Все ок, нр последнюю придирку не поняла. Почему страница с табами должна на мобилке выглядеть как на пк 1в 1? В таких случаях для мобилки рисуется другой вид страницы с табами. Разве нет?

По поводу сеток - не уверена. Общалась со многими дизайнерами, которые делали макеты по сеткам и не по сеткам - никогда не было у них проблем с верстальщиками. А если не возможно запихнуть дизайн в сетку 12 колонок, если нужна кастомная? Пофиг? Главное чтобы верстальщику было удобно?

@DoFurther

2 жыл бұрын

Дело не в кастомности сетки, а в том что нужно быть системным. Сетка может быть кастомной, но тогда ее нужно придерживаться, а не делать дизайн решения на основе «просто-потому-что».

@ThePirateHistory

2 жыл бұрын

Нашли """радость"""""", которая видать веб дизайном занимается и не выкупает за сетку, систему, да и просто головой думать, за сроки за всё ост. Ведь накуивертить на листе бумаге может каждый, засунул туда сюда норм

01:55 Какой может быть баг из-за несовпадения в один пиксель или при дробных значениях? Чота чушь. Берешь блок с иконкой и конвертируешь в SVG - задача решена. 02:25 Только юным подаванам нужна сетка для вёрстки, джедаи пользуются относительным расположением. Выравнивание по сетке для лохов. 3:50 А не хер пользоваться Webflow для вёрстки. Для вёрстки нужен браузер и текстовый редактор, если редактор с подсветкой синтаксиса то просто приятнее будет. 4:20 Используйте именование классов и вёрстку по БЭМ - будет вам щастье. 05:40 для изображений есть фильтры, при нормальной вёрстке проблем никаких. А можно картинку фоном, а поверх полупрозрачный пиксель. ----------- Согласен, что дизайнер должен своей шкуре испробовать вёрстку. Но только не на Webflow...

@user-dv9fk1hd3s

2 жыл бұрын

Хоть один голос разума)

@user-tw3or3zc7e

2 жыл бұрын

Можно подробнее про чудесные фильтры, которые могут добавить синий цвет, как в видео? Про картинку фоном - это большая глупость.

Надо за подготовку к верстке отдельный прайс выставлять 😄

@DoFurther

2 жыл бұрын

Верстальщикам или дизайнерам?

@kirf2

2 жыл бұрын

@@DoFurther верстальщикам) им же приходится разгребать

@vgenm2457

2 жыл бұрын

Что бы ваш кривой гемор разбирать 😅

То чувство, когда мой лид собирает макеты именно с этими ошибками, так ещё и без компонентов, в каждом блоке элементы новых размеров, про отступы вообще молчу 😭 и мне приходится также делать, иначе будет дудос атака(

ох, как знакомо. есть у меня один коллега такой (более 4-х лет в дизайне, к слову), от которого иногда переходят проекты на доработку. там еще похлеще косяки, чем на видео. в такие моменты хочется обматерить его и уволиться, чем работать с проектом после него. что в принципе, в скором времени и сделаю))

@DoFurther

2 жыл бұрын

Оооо, я такое говно делал с 5 летним опытом работы дизайнером, что страшно вспомнить 😂

Ищу хороший курс по Webflow. возможно кто-то сможет подсказать где искать или к кому обратиться?

@slcmslv

2 жыл бұрын

uprock

Как junior UX/UI вообще не пойму как такое реально. Еще к тому же недавно прошел подготовительный для фронтендщика (и пошел дальше, если кому интересно все бесплатно), так теперь стал сразу в дизайне все подписывать и готовить как будто потом верстать буду. Кстати нам на курсе где-то такие макеты и давали, ох у меня и подгорало под конец когда пытаешься систематизировать как-то, а приходиться костылизировать Единственное, что считаю оправданной некую вложенности, когда макет сделан полностью на autolayout, тогда быстрее верстать, потому что он уже как будто на флексбоксах собран

@DoFurther

2 жыл бұрын

Круто что у тебя такой подход к самообучению.

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

@Beast8833

2 жыл бұрын

"сетка" не ограничивается 12-колоночной системой, это более обширное понятие элементы могут быть за пределами этой сетки на определенных брейкпоинтах, но это если используется общий принцип на всем сайте или приложухе а не так, что при появлении новой страницы в будущем, всю сетку шлют на хер и лепят элементы, отходя от первоначального принципа в схожих блоках

@DoFurther

2 жыл бұрын

Начинающий и что-либо «кастомное» - плохо сочетаемые понятия )

Ко всему перечисленному еще можно накинуть: 1) Беспорядок в цветах(когда в макете в схожих элементах используются очень близкие, но все-таки разные оттенки, будто бы на глаз подбирались) 2) Беспорядок в шрифтах (Использование отдельных шрифтов для каких-то единичных мест или использование в макете платных шрифтов/шрифтов которые не поддерживают язык целевого пользователя) 3) Беспорядок в иконках (Использование в макете не векторных иконок). Если вы начинающий веб дизайнер, и только начинаете свой путь пожалуйста избегайте подобных вещей. Меньше будут гореть уши.

@bloha1929

9 ай бұрын

спасибо за совет)

Надо создать нормы для входа, где четко прописано для дизайнера, что и как должно быть в макете, что бы работать с ним было нормально . А кто не проходит нормы хай дальше совершенствуется . Что бы всем было хорошо работать а не работать в мука.

@DoFurther

2 жыл бұрын

Гипотетически это могло бы помочь.

@vgenm2457

2 жыл бұрын

@@DoFurther Оно то помогает, а то будет у каждого 100500 методов и седи голову ломаешь на вся кую фигню

@Irenicus33

2 жыл бұрын

@@vgenm2457 тогда и получать они должны в разы больше.

@liisaification

Жыл бұрын

Иногда и верстальщику не мешает идти проштудировать как что либо сверстать.

@vgenm2457

Жыл бұрын

@@liisaification Что зацепило . 😅

Привет, все отлично рассказал. А еще сталкиваюсь с такими вещами, за которые дизайнеру хочется выразить "особую благодарность": в макете для десктопа элемент находится в одном месте, например, корзина товаров в header___top, затем при адаптиве (разрешение планшет) она перескакивает в header__center, а в мобильной версии эта же корзина должна быть в header__bottom. Это полностью нарушает логику верстки. Ну или как вариант дублировать эти корзины товаров в разных дивах, скрывать на каких-то разрешениях, на каких-то показывать. Короче, вывод: дизайнер должен понимать логику верстки.

@ThePirateHistory

2 жыл бұрын

Брат, мой родной брат, мне знакома твоя боль, и я рот еб дизайнеров те что никогда не смотрели что такое компухтер. Решение такой проблемы на js, на пасте бин в бей GdewNRZC там нужно будет подправить потому что я сразу бахнул на меньше 980 и ок

@user-ed7wi6xn5n

2 жыл бұрын

Да, это жесть. Или бывает что элемент с абсолютным позиционированием в пяти разных разрешениях расположен в пяти рандомных местах без всяких причин. На маленьком экране книга где-то справа сверху блока, на экране чуть побольше она слева в центре, на следующем экране она опять слева, но чуть ниже, на следующем экране её нет вообще, а на следующем она опять возникает там же была на первом экране, но на пять пикселей левее и на два выше. Верстаешь это и думаешь: какого хуя, блядь!

@ThePirateHistory

2 жыл бұрын

@@user-ed7wi6xn5n жизааа

@vintprox

2 жыл бұрын

это писец, согласен

@ksenyaD

2 жыл бұрын

Да это просто бееесииит😑

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

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

@DoFurther

2 жыл бұрын

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

@Poofikate

2 жыл бұрын

@@DoFurther мы сейчас про фигму?) если да, то нет (после обновы примерно 1.5-2 года назад), при смешивании пикчи и маски, они становятся едины, при экспорте, можно только выбрать брать ли в экспорт фон сзади, если ошибаюсь, буду рад узнать решение этого очень неприятного, как по мне, казуса

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

@DoFurther

2 жыл бұрын

Случаи бывают разные. Главное чтобы сам дизайнер не становился причиной ненужных проблем 🙂

Занимаюсь кухнями, что то похожее происходит при проектировании. И не объяснишь, что технически будет сложно, но я сделаю, но потом то через какое то время замучаетесь переделывать и не нужно оно вам окажется.

@DoFurther

2 жыл бұрын

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

@serhiis_

2 жыл бұрын

@@DoFurther А что электрики делают такого? Там начинка розеток, щитков и люстр вся скрыта и удобна для обслуживания.Вы разве розетку и люстру ни когда не меняли сами? Что там сложного и где подвох? Дизайн розетки и люстры может быть какой угодно, но внутри они все одинаковые

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

@DoFurther

2 жыл бұрын

Так если сразу делать нормально, то таких проблем не возникнет.

@madbrother1987

2 жыл бұрын

@@DoFurther что значит нормально? типа увеличивать не скейлом? да конечно, по хорошему надо нормально увеличивать) ПРосто какой размер устроит заказчика никто не знает))))

@DoFurther

2 жыл бұрын

Явно не тот размер, который усложняет работу над проектом.

Не совсем поняла комментария касательно параллакс эффекта: а если о нем попросил клиент, то причем тут дизайнер?

@DoFurther

2 жыл бұрын

У дизайнера на этот счет есть замечательный вопрос для клиента, если у него есть какие-то предложения по дизайну: «Что мы получим/выиграем, если это сделаем?» И тут же на ответ клиента есть контр аргумент с усложенением и удорожанием работы верстальщика.

@olenadobravska6353

2 жыл бұрын

@@DoFurther Но это не всегда работает. Иногда у клиентов есть свое виденье дизайна и никакие советы и аргументы им не нужны. Возможно это именно тот самый кейс, где так решил клиент и ему не важно, будет это работать или нет.

@DoFurther

2 жыл бұрын

Да, такое бывает, но не в этом случае. Я работаю с клиентом напрямую и ряд изменений удалось легко отстоять при минимальной аргументации.

Есть смысл, дело говоришь 😅

ну чувак ты в чемто прав конечно и интересно было но ты и усложняешь. Например ты предлагаешь сделать из картинки с маской и слоями одну растровую картинку, хотя фигма это векторный редактор. И в этом случае ты не думаешь о том как юзать дальше этот макет дизайнерам. Если захотят его изменить или поддерживать. На счет десятичных значений я уже слышал это, но это происходит из-за того, что ты масштабируешь элементы. Для того чтобы потом убрать десятичные значение тратиться уйму времени. Может кто знает какой-то плагин или пункт в настройках?

@serhiis_

2 жыл бұрын

в чем проблема при верстке игнорировать дробное значение? если это CSS стили то там автоматом фигма округляет. Для мобилок тоже самое все округляется. Это проблемы у неопытного верстальщика, который не умеет верстать

@DoFurther

2 жыл бұрын

Картинки же находятся в векторном шейпе с параметром fill 🤷🏻‍♂️. По десятичным значениям нужно будет покопаться, так как заметил что и в автолейауте вылетает тоже самое при адаптиве.

Говоря про padding и margin с ними вообще никогда неудобно работать. НО! С другой стороны верстальщик должен уметь работать с такими "неструктурированными элементами", а они чаще всего реализуются через margin и padding. Ну, и поскольку порой нестандартные элементы могут быть самыми захватывающими, но этот самый "нестандартный элемент" должен быть хорошо продуман дизайнером изначально, и он должен уметь его объяснять. Я не профессиональный дизайнер с миллионом рабочего стажа. Просто исходя из своего опыте в вёрстке и опыта в дизайне в целом делюсь. Тут важно понимание и того, как может это сверстать человек, и то как дизайнер придумает концепцию. Не уверен, что правильно донёс свою мысль, но да ладно

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

Фразу "Я дизайнер - я так вижу", можно использовать лишь профи, которые пол жизни делали все как надо

@DoFurther

2 жыл бұрын

Даже им приходится аргументировать свои решения.

Веб флоу конечно хорошо, но лучше попробовать чистую вёрстку. Дизайнер обязан знать что умеет чистый html/css, пишу как Дизайнер/Верстальщик.

@DoFurther

2 жыл бұрын

Думаю да, главное разобраться с приоритетами особенно джунам. Вебфлоу мне видится, как правильный шаг в этом направлении. Со временем так или иначе захочется делать более сложные проекты и без умения фигачить в «чистый код» уже будет сложно. Поэтому в какой-то момент это станет необходимостью, а значит и учить будет легче.

@DoFurther

2 жыл бұрын

Может еще что-тоо добавишь к сказанному в видео?

@flashback6836

2 жыл бұрын

@@DoFurther 1. Перестать делать лендинги с рандомно разбросанными блоками. 2. Выносите повторяющиеся элементы (Кнопки, шрифты, поля ввода, палитру) и их состояния в отдельный фрейм uikit. Верстальщик прописывает это в первую очередь. 3. Не старайтесь делать по 5 разновидностей кнопок и других интерактивных элементов. 4. Забудьте про параллакс с кучей не прибитых pngшек. 5. Не делайте странных отступов ( верх 5, низ 3, лево 9, право 1). 6. Старайтесь соблюдать квадратное соотношение сторон у контейнера иконок. Особенно если делаете сложные масштабируемые системы. 7. Не делайте больше 4-6 размеров шрифта: Заголовок; Под заголовок; Основной шрифт; Мелкий тест. 8. Учитывайте изменения размера контейнеров и их содержимого.

@vgenm2457

2 жыл бұрын

У них тогда мозги потекут, 😅

@MaxDuran-gf3gi

2 жыл бұрын

@@flashback6836 Привіт, питання по 7 пункту: чи допускається використання декількох стилів для одного розміру шрифта, наприклад regular, medium, semibold. Чи краще використовувати чим по менше стилів?

Я думаю, что при правильной архитектуру и подходе, даже такие костыльные макеты можно верстать без особой зарара и бомбежки пс. Такие кейсы твои

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

Работаю в полиграфии допечатником, от 99% дизайнеров приходит полная лажа, которую приходится переделывать. Вывод у меня такой: дизайнером может назваться любой, кто открыл фотошоп/ корел/иллюстратор/индизайн, еще в более худшем случае "специализированный" сайт, где он сделает визитку/открытку/буклет/листовку для печати.

@user-sc9xe4dm6m

2 жыл бұрын

Так и есть, фигма своей простотой освоения создала иллюзию сотням людей, что ты за день ее освоения успел стать дизайнером. Они ж на серьезных щах бегут создавать резюме на ХХ.... С чего ты это вообще решил, что ты можешь претендовать на роль в профессии, о которой, по сути еще ничего не знаешь? Самообман какой-то. Реальность таких людей охлаждает, к счастью, очень быстро и жестко

@caramellame

10 ай бұрын

А под словами полная лажа, что имеется ввиду? По подготовке к печати, по цветам или по сетке...?

Верстал недавно макет новичка. У него табы, в мобильной версии превращались в выпадающие списки. Это же совсем другая вложенность.

@ThePirateHistory

2 жыл бұрын

Сегодня верстал, в декстопе таблица, в мобиле список при этом внутренность изменилась полностью, сама структура, появились новые заголовки которых не было вообще в десктопе и не должно быть в мобиле. И всё это буду скоро натягивать.

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

Разные паддинги у кнопок это просто всюду, уже не обращаю внимание и просто привожу к одному виду. Немного удивляет когда дизайнер забывает отрисовать кнопку сабмита на форме или просто кнопку действия 🫠🫠🫠

Пожалуйста ставь триггер ворнинг для таких фигма макетов: рандомные имена для элементов, группы вместо фреймов, маски в 2022м, отсутствие и намёка на ауто лайоут. Брр, у меня валерьянки столько нет. Но по поводу элементов, действительно не факт что всё от дизайнера зависело. У нас(продуктовая компания) пару лет назад отдел маркетинга решил заняться обновлением сайта, вместо того что бы нанять проверенную Украинскую студию с которой уже работали, нашли кого-то подешевле и готового выполнять все прихоти CMO. Получился мягко говоря пиздец, особенно в плане вёрстки. После того как мой фидбек по этому поводу проигнорировали чуть более чем полностью, я решил сидеть в сторонке и запастись попкорном. В итоге: верстальщик был найден с третьей попытки, первые два бросили не доделав и хом-пейдж, разработка затянулась на несколько месяцев. Но смешнее всего итог: в изначальном виде хом прожил всего месяц от силы, после чего был заменён на что-то более адекватное и поддающееся A/B-тестам и стилистически теперь несколько отличается от всего остального.

@DoFurther

2 жыл бұрын

Опыт командой успешно получен 😅

Честно очень похоже на стоковый макет. Вот сколько их открывал - всегда там шляпа по верстке и иерархии. Что в былые времена для фотошопа, что сейчас для фигм и скетчей.

Это всё просто идёт в счёт работы. Легко увидеть что одинаковые модули не вынесены и добавить Прайс за работу. Насчет выравнивания бред. На ПК делаем быстро сетку и кидаем пудинги. Так что если дизайнер сделал криво вообще без разницы. Дальше при адаптиве обнуляем пудинги и всё.

Ох, чувак ты триггернул. Конечно, аккуратный и грамотный хендофф никто не отменял, вопросы к применению тех или иных эффектов и решений на этапе дизайна - тоже, но все остальные твои претензии - это ной верстальщика, который делает наотъебись.Размеры иконок разные? Покажи мне верстака, который не будет тупо через контрол выделять и экспортить кривые из иконки даже если эта иконка вставлена как компонент из библиотеки (с унифицированными размерами и отступами), я ему лично пожму мужественную руку. Модульная сетка? Верстаки делятся на два типа: одни вообще не в курсе как ее включать и что это такое, а у других бутстрап головного мозга, и они не знают что делать с блоком если он вдруг не списан четко в сетку (и не приведи ктулху, если сетка у тому же не двенадцатиколоночная). Это уже не говоря о том, что модульная сетка это инструмент для облегчения организации композиции и унификации, а не незыблемые рельсы, от которыхнельзя отступать. Подблоки с иконками расположены на разных уровнях? ЭТО НЕВОЗМОЖНО ТЕХНИЧЕСКИ РЕАЛИЗОВАТЬ!!!! ← моя любимая отговорка у верстаков, которым просто впадлу хоть немного шевелить мозгом, при этом они будут делать все что угодно, вплоть до прикладывания к экрану прозрачных пленок с картинками, лишь бы не включать мозг и не делать свою работу, которая заключается в реализации дизайна на фронтэнде. Параллакс? Оказывается, в 2022 году реализовать простейший параллакс оказывается сложно, трудоемко и вообще ТЕХНИЧЕСКИ НЕВОЗМОЖНО для реализации адаптивности. Придирка на тему впихивания всех эффектов в один слой имеет место быть только в случае, когда тебе самому еще надо редактировать макет, потому как вынесенная на отдельный слой полупрозрачная заливка отдельно от картинки скорее всего означает, что в верстке поверх картинки должен накладываться корректирующий слой чтобы условно любая картинка встявлялась на это место без предварительной обработки. Если все это впихнуть слоями внутри объекта в 99,9% случаев верстак экспортнет этот объект целиком, даже не подумав о слоях внутри и зачем они там. А вот на тему адаптивности и мобильной версии получается странно - макет был что ли без проработанных базовых брейкпойнтов? Не, ну тогда все что выше конечно можно и простить)

@DoFurther

2 жыл бұрын

я думаю пусть будет такое «спорное» видео для новичков: как думать что ты делаешь, потому что еще после тебя будут работать люди - чем вообще никаких видео на эту тему.

position: relative - всему ответ. Ну или transform: translate 🤔

@ThePirateHistory

2 жыл бұрын

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

Честно говоря это мой самый большой страх, на курсах про верстку говорят мало и вообще не делают акцент на этом. Пройдя 4 курса я толком не понимала, только когда начинаешь работать с реальными проектами потихоньку доходит.

@vgenm2457

2 жыл бұрын

А зачем вам все знать, главное вас много на выпускать, а к финишу мало доходят .

@kaihoso2677

2 жыл бұрын

@@vgenm2457 согласна, сейчас пошла на "профессиональный курс" думала там будет прям супер подробно и глубоко рассмотрены разные темы. В итоге будто для новичков курс, настолько сыро и устарело. Хотя описания были многообещающие.

@vgenm2457

2 жыл бұрын

@@kaihoso2677 Профессионалом нужно стать самому и на своём опыте , Курсы это только в водной инструктаж, а дальше человек должен сам развиваться .

@kaihoso2677

2 жыл бұрын

@@vgenm2457 да, полностью согласна, жаль чт о я это поняла только после покупки курса, дальше они бесполезны

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

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

@DoFurther

2 жыл бұрын

Если прочитать коммент без контекста, то да - чушь полнейшая. Я имел в виду, что в вебфлоу для класса можно задать дополнительный тэг (не путать с html тэгом), в котором отдельно можно задать параметр padding.

@user-mz4nk3ob2i

2 жыл бұрын

@@DoFurther Это комбо класс называется

- ну попводу не целых значений, это скорее вопрос к Фигма. Меня это просто выносит. Зачем это делать? Может из-за того что Фигма хочет быть редактором и для графдизайнеров? - по поводу блоков и сетки, дизайнеров нужно и можно заставлять рисовать по сетке (как минимум бутстрап) и делать 3 версии (лучше 4) экрана для разных ширин (Десктоп ФулХД, ХД , планшет и смартфон). Тогда он сам увидет как его "красота" адаптируется.))) - про картинки с эфектами - это по моему не изличимо, )))) - ну поэтому есть джуны - которые это все причесывают. Мидлы и сеньйоры страдают вирусом мальнькой власти))) По моему мненеию, для лечения этих болячек у дизайнеров, в Фигме есть автолеаут. Когда фигачиш макет используя эту фичу, претензий у кодеров поменьше. Спасибо за видос. Все классно рассказал.

@DoFurther

2 жыл бұрын

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

И теперь представить, что к этому всему заказчик требует пиксель перфект, ммм)

@DoFurther

2 жыл бұрын

Только с линейкой, которую нужно будет держать прислоняя к монитору 😂

Дизайн прям грустный. Рискну предположить, что делал его или сам клиент, или его племянник, или джун-фрилансер за копейки. И верстальщика нанял наверняка ж не самого дорогого, ибо дизайнер, который умеет фронтенд, дешевле, чем настоящий опытный фронтендщик. Вот и вышло, что на всех этапах попаболь, ибо дёшево же. А вы любите выходить из зоны комфорта, я погляжу )) Я тоже дизайнер и тоже умею верстать, но всегда стараюсь отпетлять от вёрстки, ибо скучно очень, плюс кроссбраузерная совместимость печалит иногда) По опыту (верстальщики а разрабы приложений могут со мной общаться если им надо) могу сказать, что больше всего неприятностей верстальщикам доставляют странные фоновые картинки, которые вылазят за границы фрейма и при сохранении получается фигня какая-то. Кроме того я один раз протупила и использовала режим наложения для плашки, который в цсс нереализуем. Ну и последнее: разработчики очень не любят кастомные элементы вроде красивый календарей с альтернативной логикой , которые сложно и долго реализовывать.

@vgenm2457

2 жыл бұрын

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

@ThePirateHistory

2 жыл бұрын

"но всегда стараюсь отпетлять от вёрстки, ибо скучно очень" всё говорит само за себя.

@vgenm2457

2 жыл бұрын

@@ThePirateHistory ну да а другие пускай е..б

Я даже ещё не Джуниор, но глаза у меня от этого всего болят сильно

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

Капец верстальщики обленились)

@DoFurther

2 жыл бұрын

Так-то можно подумать что тебе по телефону рассказывал суть видео 🤣

Забавно *Красиво тупить не запретишь* дизайнеру 😂😮

+ 100500 по всем фронтам (хоть и не верстальщик, а ПМ и техдир) а, особо люто лучи "доброты и благорасположения" вызывают именно авторы подобного возомнившие себя при этом "без трёх минут профи". И, с непоколебимой уверенностью демонстрирующие это. Классические идейные дилетанты по Даннингу-Крюгеру, не желающие учиться, без системного мышления и с ЧСВ размером с галактику. Это треш... (а, особый треш, когда подобное проехало по ушам заказчику, и/или выступает с его стороны. в таких случая, зачастую целесообразнее отказать клиенту в сотрудничестве вообще, т.к. нередко это может являться индикатором и дальнейших "увлекательных приключений" с данными персонажами и тратой времени в пустую (при чём впустую несмотря на вроде бы "деньги"))

нужно набратся смелости и обнулить все вы..оны "дизайнера" . а если возмущается, то пусть переделывает свой халтурный шлак. иначе ни как.

а что с непрозрачностью текста? а то мне прилетало

@z1mmex

2 жыл бұрын

Вроде в дизайне всегда нужно использовать определенные цвета. Например, серый цвет может быть как оттенок, а может быть просто чёрный с 50% прозрачностью. Так вот, нужно брать именно серый, а не чёрный с прозрачностью. Посмотри в инете, я где-то давно видел небольшую статью про это

@serhiis_

2 жыл бұрын

@@z1mmex Нет. серый и полупрозрачный это совершенно разные вещи. Под полупрозрачным текстом можно видеть другию картинку. А под серым ты ни чего не увидишь. Цвета с альфа каналами еще 10 лет назад поддерживаются в мобилках и тем более в хроме. Только у криворукихх верстальщиков могут быть проблемы с цветам с альфа каналами

Ладно все по группам оккуратно расписать , шапка и.т.д . Но что теперь делать сайты 2010 годов что бы верстальщику меньше работы было при этом испортить свою работу?

@DoFurther

2 жыл бұрын

Можешь кинуть таймкод, где я к этому призываю?

"ненавижу, блять, дизайнеров" уже привык слушать мой муж дизайнер) Слышит и понимает что пришёл в работу говняный макет)))

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

@DoFurther

2 жыл бұрын

Гыгыгыг. В следующем видео как раз буду исправлять такой макет.

Слава богу я больше практически не верстаю. В таких случаях имеешь полное право делать все на глаз. Если такого дизайнера взяли на работу, значит во всем остальном заказчик, менеджер разбирается примерно так же. Также плохо. Не нужно с такими работать.

да всё сохранить картинкой и замапить линками =)

@DoFurther

2 жыл бұрын

Смотрю староверы здесь? 😅

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

@Beast8833

2 жыл бұрын

дизайнер ответит "потому что потому" или "че я должен делать, чтобы верстальщику было удобно?"

Поржал с проблем автора, показанный дизайн ради дизайна даже разбирать нечего, верятно такую хрень лучше всего вообще каким-нибудь tailwind’ом верстать, попутно немного округляя отступы, управлять таким контентом все равно нереально. Реальная беда, когда есть набор простых и функциональных элементов, а дизайнер придумывает кастомную вундервафлю на ровном месте. Или забывает, что контент динамический, высота и ширина элементов может меняться и гриды с флексами не справляются, приходится откапывать js костыли времен флоатов.

Что за херню ты несёшь? 150 на 150.88? Вы что там верстаете? 0.88 пикселей realy? Браузер некоторые макеты вообще не сможет отобразить идеально пиксель в пиксель. Хоть усрись.Пиксель перфект для жёстких косяков используется щас. Проблема дизайнеров это произвольные отступы от балды для адаптива. И разные ваще абсолютные отступы от балды на однотипных страницах . Вот это гемор. Или произвольные размеры на 4х медиа запросах. Это хороший пример как ты говоришь что ты когда верстаешь картины пишешь. Щас востребованы сайты с хорошей бизнес логикой. Ну или если красоты то это канвас с крутыми анимациями а не лендинг пиксель в пиксель.

Через 3 месяца оканчиваю курсы ui|ux диза... И чувствую, буду учиться ещё и вёрстке... 👌

@DoFurther

2 жыл бұрын

Хорошее решение

1:02 что это?

@DoFurther

Жыл бұрын

потороченное межбуквенное расстояние в словах

Можно про ленивых front end разрабов 😂

веб-дизайн всё ещё актуально на 2022?

@DoFurther

Жыл бұрын

Как посмотреть. На этом еще точно можно зарабатывать.

@user-wr7lj7wq6h

Жыл бұрын

@@DoFurther но эта ниша уже занята?

Кто, скажите. заказывает работы у настолько криворуких дизайнеров, которые даже базовых вещей не понимают. И ладно дизайнер не до конца понимает, как готовить макет к верстке, но криворукий, пожёванный дизайн отдавать, это жесть. Если только это не стоит 3 копейки...

@xezdx

2 жыл бұрын

Ну все-таки примеры в видео скорее для сайтов типа презентации, там акцент как раз на вот этот разброс, так что требовать чтобы там было всё выравнено как в экселе неправильно. Да и картинки можно самому подрезать под нужные размеры. Я не верстальщик, я программист, я бы большинство этих картинок просто задним фоном положил и никто бы не узнал 150 там пикселей или 151.

@maximmaslennikov4038

2 жыл бұрын

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

@serhiis_

2 жыл бұрын

@@maximmaslennikov4038 Этот человек что делает прикольно - называется дищайнер в IKEA. Там они получают по миллиону евро/год. И делают как раз фигню, которая максимально дешевая по материалам. А технари должны разработать тех процесс изготовления, дизайнеру все равно что технарь с этим не справляется, значит выгонят технаря и пойдут к китайцам. Китайцы сделают любую прихоть дизайнера с IKEA. Так что не будь плохим технарем, а то в рашку отправят с швейцарии быстро, там будешь за 3к долларов работать это потолок по зарплате. Ну пока доллар не упадет....

@maximmaslennikov4038

2 жыл бұрын

@@serhiis_ ну кто считает, что это все правильно, пусть и становится верстаком и пашет на таких идиотов)

Столкновение двух парадигм, ну или понимание кто такой дизайнер. В СНГ дизайнер - это художник, вольная птица, я так вижу, нарисовал - досвидания и т.п. Европа, америка -- дизайнер это тот кто и придумал, и сделал. По факту этой теме -- сделать как дизайнер нарисовал, сраку верстальщик рвет против сделать как верстальщик хочет, по факту говно дизайн -- 1000 лет в обед. Креатив и инженерия это борьба двух разных полушарий, не возможно думать сразу в этих двух направлениях. Ну или разве на опыте перекрывать одно другим, но по факту не всегда получается. Говорю как UX&UI дизайнер с образованием программиста. Истина по середине. И дизайнер должен знать основы, и верстальщик пробовать креатив. Ну и коммуникация решает, а не в ракушках сидеть

@DoFurther

2 жыл бұрын

Кстати, дизайнер на этом проекте был из Европы 😅 Неопытность - понятие интернациональное 🙂

@EvgOk

2 жыл бұрын

@@DoFurther ну я бы сказал что разрыв в экспертизе американско-европейских дизов и украинских сокращается. Ну а уникумы везде есть, как и идиоты

в 2022 еще используют слово верстальщик ?

@DoFurther

2 жыл бұрын

Да, старые пердуны, типа меня XD

как я тебя понимаю... ненавижу дизайнеров

на самом деле не дизайнер решает а менеджер или клиент.

@DoFurther

2 жыл бұрын

Но в силах дизайнера консультировать клиента о лучших решениях, подкрепляя их очевидной аргументацией.

Для меня, как для дизайнера, это было бы личным позором.

Устал ждать новое видео