Новая концепция сеток в UX/UI -дизайне💻

[@UPROCK]

🚀Получить доступ на сутки к платным материалам и забронировать скидку www.school.uprock.ru/sale-grids 🔥Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot ⚡Чат дизайнеров UPROCK t.me/uprock_chat

[@yellowshoess2850]

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

[@UPROCK]

@@yellowshoess2850 а что мелочиться, давай пусть будет 15 колонок, вместо одной направляющей и еще 12 колонок для сетки из 4х товаров в ряду, действительно почему нам недостаточно 4х колоночной сетки. Пересмотри, пожалуйста, лекцию, мне кажется ты все таки не понял мою главную мысль, что надо избавляться от сложностей, а не искать способ, как их обосновывать.

[@4EPHblN]

Композицию можешь делать любую, использовать любое количество колонок или не использовать вообще - плевать. Колонки в верстке (сетка Twitter Bootstrap, Tailwind и еще полмиллиона CSS-фреймворков) - это вообще не про дизайн и композицию - это, в первую очередь про адаптацию, и ничего тебе не мешает, верстая элемент шириной в определенное количество колонок делать его больше или меньше используя, например, отступы или трансформации, при этом он буде по прежнему адаптироваться согласно определенной сетке. Pixel-perfect верстке сетка никак не мешает, но UI-дизайнер, при разработке адаптивного макета должен руководствоваться определенной сеткой, хоть в 3 колонки, хоть в 103, иначе не понятно, по каким правилам его макет предполагается адаптировать. Это таких учеников выпускает школа UPROCK?? Пользователю/клиенту наплевать на колонки - он вообще о них в 98% случаев не подозревает.

[@4EPHblN]

Как ты относишься к концепции mobile-first, когда адаптивный макет нацелен на экраны с низким разрешением и с компактного вида разворачивается уже на широкие экраны?? Сейчас уже около 90% трафика - это трафик с мобильных устройств, а ты за ролик ни одного макета под мобилу не показал.

[@Slavaru81]

Как долго я ждал этого видео!)) Как меня эти колонки иногда бесили! Но ВСЕ говорили, что без колонок этих некуда, раз ты сделал без колонок, значит ты не профессионал!

[@UPROCK]

Салют, Слава! Да, в этих областях нашей профессии, к сожалению, высокая инертность и с ней не так легко бороться

[@viktoriyapluschikova3353]

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

[@UPROCK]

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

[@mariaskvortsova2399]

Большое спасибо за это видео и в целом за ваш канал, сайт и всë, что вы делаете. Очень круто, что вы пропускаете дизайн через голову, задаваясь вопросами зачем и почему. А когда я увидела, что вы позвали Дубынина с лекцией, это ваще прям шах и мат) Желаю вам всяческих творческих успехов, незамедленного ютуба и креативных учеников.

[@UPROCK]

Спасибо большое, что отметили эти моменты, Мария! 👍🙏

[@katerinazeliantsova8437]

Очень импонирует ваша подача. Идеальный пример опытного дизайн мышления! Спасибо! ❤

[@UPROCK]

Очень рад, Катерина) Пожалуйста☺️

[@olgakozlova1981]

Женя, а я боюсь без 12 колонок - использую как шпаргалку больше, но ориентируюсь на силовую) Следующий проект буду пробовать без них) Они и вправду сковывают - так бесит, когда что-то не умещается в заданную ширину, и ты думаешь что если увеличишь, то все сломаешь)) Мои чувства описал точь-в-точь)

[@UPROCK]

Салют, Ольга! Рад, что лекция помогла) Всё верно, шпаргалка должна быть такой чтобы увеличивать количество доступных действий, а не уменьшать😉

[@andreybaykovv]

@@bogdandvorzeckij тут речь не о 12 колонках, а если чтото не уместилось в 2 колонки и нужно сделать 2.5 колонки что уже не так перфекционистично

[@АннаДронова-ж9ш]

Орнула с момента «я ж 3 года по сеткам делал, что ж он за с*ка»🤣🤣 золотой фонд цитат

[@UPROCK]

Постарался передать всю гамму эмоций реальной ситуации)

[@vadimhivrich302]

Все верно сказанно! Сетка, просто должна помогать вам а не ограничивать вас,

[@UPROCK]

Спасибо за комментарий, Вадим) Так и есть👍👍

[@olgakozlova1981]

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

[@UPROCK]

Я все делаю для этого, дело времени.

[@Serega_UXD]

нет слов просто))) я давно интересовался дизайном UX и вот начал немного глубже его касаться, но везде что то мне не нравилось))) посмотрев это видео я понял что!!! мне не нравятся ограничения вездесущие с этими 12 колонками. Я так и думал что главное это композиция и правильно выбранные направляющие! Еще приятно то, что это моё первое видео на просторах youtube, где сразу понятно что для автора UX это не просто сочетание букв P.S. пардон за много букв)

[@UPROCK]

Салют, Сергей! Спасибо большое, что поделились🙏👍 Очень рад, что лекция Вам помогла)

[@pavelmelnik9952]

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

[@UPROCK]

Спасибо большое за ваш комментарий, Павел👍👍

[@Cape_Hope]

В каждом видео, которое смотрела на эту тему, обязательно упоминалось про 12 колонок. Не раз задумывалась: «А точно ли это нужно, ведь иногда кажется бесполезным?» Чувствовала свою некомпетентность из-за таких мыслей, ведь если говорят многие и куда более опытные, значит надо. А оказалось, что не всегда это так необходимо) Спасибо, Евгений - начинаю снова доверять собственному чувству и насмотренности)

[@Cape_Hope]

@@bogdandvorzeckij Имелось ввиду, что это не железобетонное правило и не обязательно себя этим ограничивать. К сожалению, не все так считают и загоняют часто в рамки, которые потом боишься нарушить, особенно в процессе обучения, когда задаешь вопросы, а тебе отвечают: «Потому что так надо»

[@UPROCK]

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

[@UPROCK]

@@bogdandvorzeckij вы смотрели лекцию? Зрители подтвердили, что пользователь не видит эти 12 колонок. Вы просто привыкли к ним, вот и защищаете. Вобщем, пересмотрите, пожалуйста, лекцию, и попробуйте выйти за рамки привычных 12-и колонок

[@aliciajc4985]

Спасибо большое, что рассмотрели и ответили на вопросы, которые задавали ранее по сеткам!! Лекция супер! ❤

[@UPROCK]

Всегда пожалуйста) Очень рад, что лекция зашла👍👍

[@НатальяЯна-г5и]

Больше спасибо! Информация ценная! Действительно, по сеткам я находила только базовую инфу, а нюансы мало кто рассказывает (а может плохо искала). Столкнулась со сложностями 12-к.сетки на курсе по креативной верстке. Интуитивно стала работать по силовым линиям. И по процессам теперь больше понимания. "Крутить-вертеть, пока не получиться" - 🎯 💥😁 СПАСИБО! 🤝💓

[@UPROCK]

Спасибо за доверие и за вашу историю, Наталья👍 Очень рад, что лекция Вам помогла☺️

[@Romanov_SD]

Женя, спасибо за классный вебинар. Просто пушка 💥

[@UPROCK]

Всегда пожалуйста, Сергей👍⚡️

[@RedMist33Rus]

Работаем, работаем, 1к лайков всего для повторения материала!

[@RedMist33Rus]

Молодцы! Как всегда справились 😊

[@ЮлияБардина-щ8ф]

У меня муж верстальщик и он мне тоже иногда говорит про сетки😅Видимо у них в компании работают по олдскулу)) Он у меня не консерватор в этом плане, но говорит так реально удобнее верстать (но думаю сможет и без нее, только разобраться как и всё). Мне самой иногда нравится, когда всё по сетке, в каких-то случаях она прямо уместна (у перфекционистов будет оргазм глаз🤣), а где-то ее действительно хочется нарушить. Я думаю, что должна быть какая-то золотая середина, не совсем открещиваться от сетки, а использовать её во благо, когда она действительно нужна. Ну и конечно же клиенту всё это аргументировать) Чтобы он тоже мхом не покрывался, а видел внедренные в его продукт тренды. Как обычно спасибо за лекцию❤Всё доступно и понятно. Использование мата на уровне "мэтр" 🤣👍

[@UPROCK]

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

[@Ann-km8cn]

Крутой материал, спасибо. Про размер кнопки в начале очень смешно было))

[@UPROCK]

Всегда пожалуйста) Рад, что понравилось☺️

[@iw1519]

Classные проэкты и информация наиценнейшая.

[@UPROCK]

Спасибо🙏

[@YanasChanell]

Даже не представляла, что дизайнеры до сих пор привязаны к 12 колонкам. Я фронтендер с 2000 года (с перерывами, но не важно), тогда еще и слова такого не было. Бутстрап с 12 колонками для меня остался где-то в середине десятых, несмотря на то, что поддерживаю сайт, в основе которого лежит третий бутстрап в качестве легаси кода, от которого тяжело избавиться, но даже и там мы уже давно не пользуемся двенадцатиколоночной системой. Современный CSS настолько гибок, а экраны настолько разные, что смысла нет делать контент насколько-то колонок. Тексты должны быть нормально читаемы, то есть ширина их должна быть 60-75 ch, а не сколько-то колонок. Куча свойств в css сейчас крутится вокруг минимальных и максимальных значений. На одном экране умещается 5 карточек товаров, на экране поуже - 4, а на мелких мобилах вообще всего одна, тут главное чтобы нужная инфа помещалась и нормально читалась. Так что да, жесткими колонками никто не думает во фронтенде.

[@UPROCK]

Салют, Яна! Спасибо большое за ваше развёрнутое и подробное экспертное подтверждение🙏👍

[@RodHord]

В вёрстке сетки реализуются с помощью css grid и css flex свойств. С помощью какого css свойства реализуют "направляющие"? Я понимаю что направляющие можно реализовать с помощью визуала, правильно выстроить блоки, что бы они вместе создавали ту самую линию. Но тут ты изменяешь размер окна и блоки съезжают. Используя сетки - блоки всегда идут по рядкам, адаптация под разные экраны не сложно реализуется. Как подобный функционал реализовать, когда сетки нет, а есть только визуальные направляющие? Я над этим не долго думал, но в данный момент вижу достаточно сложный процесс адаптации, где вам нужно собрать точную инфу о размерах экранов потенциальных пользователей и заточить статичный, +- резиновый, дизайн именно под популярные разрешения экранов. ( Сложен он именно для заказчика, который не разбирается во всём этом, ему нет дела до каких то там исследований, ему нужно быстрее результат ). В кейсах где заказчик адекватный и процесс разработки не кастрирован - вопросов нет.

[@UPROCK]

Вот вы накрутили на вполне простой задаче)) У меня такое ощущение, что я действительно открываю Америку на такой банальной теме. Уточните, вы верстальщик? Сейчас резиновую верстку почти нигде не делают. Проанализируйте сами адаптивы сайтов, возьмите для примере штук 20-30. Почти везде страницы статичные и перестраиваются на брекпоинтах, в редких случаях резина для пустых пространств или в каталоге увеличивается количество рядов за счет этого резина.

[@art.kornilov]

Я вам советую проинспектировать сайты с нестандартной сеткой у топ студий (например AVA), вы удивитесь на что способен CSS, причём ванильный.

[@IlyaTakov]

Напрвляющие это теже гриды или просто ширина дивов )))

[@maksim.mukharev]

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

[@roman_osypenko]

@@UPROCK Жень ты не ответил на основной вопрос по поводу css grid и css flex, и этот момент по идее должен был быть освещен в видео достаточно хорошо, так как как это по сути основной момент. Я хоть и поддерживаю такую концепцию и сам не только проектирую но и верстаю, но не понимаю как верстать направляющие? Как это систематизировать?

[@kulmarsdigital8567]

Огромное спасибо за лекцию. Вы сделали меня свободным от этих с(т)раных сеток)

[@UPROCK]

Всегда пожалуйста)😄

[@doctortt5060]

Вообще не дизайнер, и даже не программист. Никакой. Но почему блин так все это интересно? Какого хрена Ютуб мне подсвечивает эти видео уже сколь раз?

[@UPROCK]

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

[@АнтонЛебидь-ь2о]

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

[@UPROCK]

А мое мнение, что так учат, потому что сами не могут переучиться и учат этому других. В видео я подробно объяснил, откуда появились эти 12 колонок и почему в них нет практической пользы в 2024.

[@psychea9902]

Спасибо большое за Ваш труд и ролики!

[@UPROCK]

Пожалуйста☺️

[@antonfedotov6125]

Всё это верно, конечно, что вы говорите, Евгений. Но дело в цене разработки ещё. Я однажды показал знакомому разрабу вордпресс один из ваших проектов.. Он мне сказал что верстка подобной сетки будет в 3 раза дороже чем по обычной ровной сетке, т.к. при адаптиве всё нужно переверстывать кастомно. (В частности, на вордпресс, есть такая фишка как перестроение колонок одна под другой при адаптиве.)

[@UPROCK]

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

[@Nata_Nataria]

Только закончила учебу, где рассказывали про сетку в 12 колонок, что "удобно, практично, так надо", а тут - такооееее! Женя, ну что же ты делаешь)) ломаешь всю схему 😁 И конечно, ты прав на все 1000%! Когда не привязываешься к рамкам, то и креатива больше, и оригинальности.

[@UPROCK]

Салют! Спасибо большое, что поделились) Рад, что моя лекция Вас убедила☺️

[@christinaavsyanik9272]

Ооооооочень крутая лекция! Учусь в вашей школе! Огромнейшее спасибо за вашу работу Евгений! 💥💯

[@UPROCK]

Всегда пожалуйста, Кристина! Классно, что Вам понраилось👍✨

[@vlada3236]

Колонки нужны в первую очередь для аккуратного респонсива без дополнительной самостоятельной проработки отдельных экранов. Если вам не лень отрисовывать все брейкпоинты, а разработчикам их верстать, то можно и без колонок, конечно. Но опять, одно дело лендинги с минимумом компонентов, а другое админки, сложные дашборды, в которых для каждого пользователя разое количество символов и элементов и без сетки все просто свалится в хаос. Дальше, пример с кнопкой вообще некорректный на 19:20 - в данном случае ваше решение увеличить кнопку не противоречит сеткам, она просто будет выровнена по центру 4 центральных колонок и гибко менять ширину в зависимости от длины текста. Вообще, все эти сетки нужны для новичков в первую очередь и сложных интерфейсов, чтобы макет не разъезжался от разных правил для одних и тех же элементов. Если вы делаете лендинги и вы хаотичную композицию можете сделать аккуратно, то молодцы, но это не касается новичков и продолжающих. И наконец, сетки это не только Boolstrad, вы можете сделать свою любую сетку, но все равно это будет сетка.

[@UPROCK]

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

[@allo_Alen]

Спасибо за эфир👍🏿

[@UPROCK]

Пожалуйста, Алёна☺️

[@Yakovlevsky-mj7sk]

Спасибо! Интересно очень

[@UPROCK]

Салют! Всегда пожалуйста)

[@gym_shark-k3u]

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

[@UPROCK]

Пожалуйста, очень рад👍

[@Serega_UXD]

по качеству и ценности 15 из 10)

[@UPROCK]

Супер! Спасибо большое⚡️

[@daniel_black_vrode]

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

[@UPROCK]

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

[@НиколайЛеухин-ф5ь]

Интересная тема, спасибо!

[@UPROCK]

Пожалуйста, Николай⚡️

[@alsu891-v6e]

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

[@UPROCK]

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

[@КатеринаФедорова-ь9ч]

Спасибо, вы озвучили мои мысли.

[@UPROCK]

Пожалуйста, Катерина! Очень рад)

[@daniel_black_vrode]

Что насчёт оставить колонки, но детализировать - сделать 24 колонки? Свободы на порядок больше, но остаются плюсы колоночной верстки. Более понятные и простые правила адаптивов. Более консистентная структура макетов

[@UPROCK]

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

[@UPROCK]

Салют, Михаил! Идея интересная, но предлагаю развить её дальше и не останавливаться на 24 колонках. Как насчёт 1920 колонок, из которых можно выделить в качестве основных 3 или более и назвать "направляющими", к примеру) Понятные и простые правила на месте и свобода максимальная😉

[@Falko-v]

Если вы создали что-то не по правилам, но это выглядит круто, то значит вы создали новые парила )

[@UPROCK]

Ну это не всегда так работает, но звучит отлично👍👍

[@kan1811]

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

[@UPROCK]

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

[@kan1811]

@@UPROCK Спасибо за то, что потратили время на ответ такому "неособенному" мне, это даже льстит. А людей я уже учил, так как педагог по профессии, поэтому немного в теме разбираюсь. А тон вашего ответа характерен в целом, наступил на больную мозоль?)) Не надо так, это всего лишь сетки)

[@UPROCK]

@@kan1811 круто, что вы еще психолог и слышите мою тональность через текст.

[@АнтонСорокин-ц4т]

Евгений, довольно классный вебинар. Очень полезен. Интересно, у меня, как дизайнера интерфейса в игровой сфере преобладает больше UX, чем UI. Всегда надо предоставить весь функционал максимально удобно и продумывать как именно пользователь будет пользоваться интерфейсом.

[@UPROCK]

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

[@antonkalmysh3396]

Спасибо больше, что поделился! Очень интересно было слушать/ смотреть. Вопрос: Как с такими сетками делать адаптивный дизайн. Больше половины польователей (не всегда, но часто это так) заходят на сайт через мобилу.

[@UPROCK]

Всегда пожалуйста, Антон! С адаптивами нет ничего сложного, у меня есть отдельное видео в котором я заострял на этом внимание kzbin.info/www/bejne/b5Smi2R_qJypn6csi=BsNIki1ag-aRispk а так в каждом разборе какого-то проекта я стараюсь показывать адаптивы. Можно также посмотреть кейсы студентов на www.behance.net/uprockclan

[@vick4692]

1:46:23 всё бы хорошо, но тут есть синдром макетов на бихансе, вроде с виду всё с силовыми линиями чётко и красиво, но пользователь не смотрит всю портянку сразу, а только окно экрана, есть вероятность, возвращаясь к опросу про 12 колонок, ему насрать на силовую линию в пределах всего макета, важно что в фокусе одного смыслового блока/экрана, таблицы и тд, хотя переходы и скролы с акцентированным направлением взгляда тоже нужны, согласен.

[@UPROCK]

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

[@deepouterspace]

Дотянем до 1000 лайков, чуть-чуть осталось! 🔥

[@UPROCK]

Спасибо за поддержку✨

[@greydoor709]

Я работал веб-дизайнером с 2007 года. В 2017 бросил, потому что очень уставал морально и физически от того, что не мог сделать как мне понравится. Насмотренность всегда была высокая, читал книги по ux, разбирал сложные системы и постеры. До сих мне это интересно. Мог улучшать работу с интерфейсом. Но сделать красиво ни в какую. Что то как то, чуть чуть вроде, а нет, показалось, и я выжитый как лимон, когда делал для себя мог неделями мучаться и все равно лажа. Злился капец. Проблемы с ритмом и мне кажется это не лечится. Как в искусстве, "типа потомственный художник", но я как и предки могу только полностью срисовать любую картину, а сделать что то свое никак, как бы не старался. Человек AI.

[@UPROCK]

Я думаю все решаемо, просто не с того ракурса зашли.

[@veraurbanovich1816]

спасибо за видео

[@UPROCK]

Пожалуйста, Вера! ⚡️

[@DD-yv3tt]

Давайте добьем 2к лайков!!

[@UPROCK]

Спасибо за такую поддержку✊

[@DD-yv3tt]

@@UPROCK и вам за такие полезные лекции!

[@denpol9956]

Почитал комменты - никто не написал про магическое число 12, для чего оно вообще пригодилось тем кто работал с версткой в 2010 и раньше. В css флексы только начали появляться в 2009 (первый релиз 23 07 2009 - до поддержки всеми браузерами было еще далеко), до этого момента твиттер уже имели бэст прэктис в этом вопрсе, и решили опубликовать их в виде бутстрап - и оно тогда действительно показалось удобным, т.к. 12 делится без остатка на 1,2,3,4,6,12. Но позже в css появились флексы и гриды, но принцип разделения на колонки [и сетки в современной верстке] остался (не обязательно на 12, а на сколько угодно, теперь можно в процентах, фракциях и т.д. - теперь это легко описывается через css без привязки к числу 12). Я думаю, об этом в курсе все, кто не юзает бутстрап сегодня.

[@UPROCK]

Салют! Спасибо большое за это дополнение👍👍

[@irinatostanovskaya3717]

Можно ссылку на проект SELENE loft location? Что-то не нашла на Behance. Благодарю!!!

[@UPROCK]

Салют! На данный момент работа над этим кейсом ещё не завершена) Следите за обновлениями!

[@selenasova]

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

[@UPROCK]

Здравствуйте, Елена! Посмотрите, пожалуйста, вот это видео kzbin.info/www/bejne/b5Smi2R_qJypn6csi=p2fVz9a83Rl8OyRV на канале есть ещё примеры отрисовки проектов в которых показывается адаптив, можете убедиться, что ничего сложного в этом нет. Откуда информация о том, что не социалки и приложения, а именно сайты посещаются только с мобилок, я не знаю)

[@zemlyaknorge]

Мне кажется, когда ты делаешь сайт с карточками (магазин или туры, отели) тебе необходимо 12 колоночная система. Когда мы говорим о сайте для фотографа или ресторана и т.д что то фешн фешн тогда можно и даже нужно отойти от этого формата

[@UPROCK]

привет, для массива карточек не обязательно себя ограничивать вариантом использования только 12-и колонок, например у тебя 5 или 7 колонок это самое удачное расположение контента, а мы себя искусствено ограничиваем только кратностью на 2,3 и 4

[@sleepspacepiece]

Благодарю)

[@UPROCK]

Всегда пожалуйста👍

[@ДимаВолынец-э1ш]

вот у меня вопрос, вы сразу рисуете под 1920? не могу никак понять

[@UPROCK]

Салют, Дима! Да, сейчас все проекты рисуются под 1920

[@ДимаВолынец-э1ш]

@@UPROCK получается под ноут просто зумиться, а меньше уже меняем макет?

[@sergeyezhov2469]

Мне немного странным показались негодования "дизайнера" где-то на 20 минуте, когда речь зашла о ширине кнопки. Это ведь один элемент в строке и он по центру! Какая разница, по сетке он или нет? Будь там две кнопки, еще можно было бы говорить о чем-то (и то скорее волновало бы расстояние между ними). А в остальном да, хорошо слышать про отсутствие острой необходимости привязываться к этим сеткам. Системы отступов достаточно.

[@UPROCK]

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

[@sergeyezhov2469]

@UPROCK 20:25 - 20:33: "Я же всю ночь выравнивал... А вы не можете ему объяснить, что тут 12 колонок". Я вот про это.

[@UPROCK]

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

[@sergeyezhov2469]

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

[@UPROCK]

@@sergeyezhov2469 тогда мы вместе негодуем по одному поводу)

[@AlanaQwer]

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

[@UPROCK]

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

[@lildandy2839]

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

[@UPROCK]

Салют! Всё верно, но пришлось уделить весомую часть лекции 12 колонкам, так как их неуместное использование является наиболее распространённой проблемой по теме

[@ЮлияАрхип]

Так это бесит: не используйте "comic sans". прям мир рухнет от этого. Я когда-то(давно) проходила обучение и поставила этот шрифт в свой учебный сайт, потому что я видела, что он хорошо там смотрелся. И это лицо преподователя, до сих пор помню, какая же я непрофессиональная и не умею слушать и т. д. Зациклились все одновременно на какой-то х..не, простите. А важные вещи в дизайне пропускают. Сайт гавно, но без комик санса, конечно, мы ж дизайнеры.

[@UPROCK]

Салют, Юлия! Так и есть, мир полон стереотипов и инерции, бороться с этим всегда было крайне сложно🤔

[@АнастасияКим-ш7г]

Интересно как должна верстаться страница vynil records дизайна Кати Фоминых, какая там логика расположений элементов? Я правильно поняла, что это динамичный контент? Нужно понять как это будет потом жить: появляться новые элементы. С одной стороны это больше программист просчитает, но дизайнер же тоже должен какую-то логику закладывать. Ну вот как в дизайне каталога, где есть три размера и они взаимосвязаны: 2 размер это два первых размера и тд Вижу, что самые маленькие изображения идут с нулевым отступом друг от друга, но не понимаю как они дружат со средним размером и как средний размер дружит с большим. Высота маленького изображения это половина большого. А, нет, между маленькими изображениями не нулевой отступ, показалось. Короче не понимаю логики расположения элементов и как это будет работать в динамичном контенте)

[@UPROCK]

Привет, сейчас не могу конкретно понять о каком вы проекте. Во-первых, вы должны учитывать контекст, в данном случае это учебный проект и его задача на каждом блоке научить человека композиции, визуальными приемам, развить вкус и креативность, поэтому отношению к сайту, как к бутиковому и все это можно реализовать технически. Например, в каталоге не сложно задать динамическую логику расположения контента, нужно создать соответсвующие классы. Когда товаров немного, как в бутике, это не сложно поддерживать. Про простую базовую сетку каталога мы рассказываем на курсе, ее не сложно сделать если умеешь такие. То есть мы учим с запасом. Про методологии обучения можно рассказывать много, так как их там заложено большое количество. Главное, что мы фактически единственная школа, которая потом берет ответственность за учеников и совместно с ними потом делаем их коммерческие проекты, то есть наша методология работает. Каждый месяц мы помогаем зарабатывать больше миллиона рублей нашим ученикам, количество коммерческих проектов наших учеников это значительная часть проектов которые они делают наряду с учебными. Посмотреть часть можно по ссылке www.uprock.ru/?commercial=%D0%9A%D0%BE%D0%BC%D0%BC%D0%B5%D1%80%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5

[@АннаПетрова-у2й]

А wire frames уже не надо?

[@UPROCK]

Салют, Анна! В процессе обучения мы обязательно проходим этот этап

[@hackersclubru]

История шведского дизайна не начинается с Twitter Bootstrap. Она примерно на век-полтора старше. Сорри =)

[@UPROCK]

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

[@hackersclubru]

@@UPROCK в какие аргументы? Вы про исторические факты? Баухаус?

[@webmechanic-kz]

Я веб разработчик без сетки можно для этого используются flex box и гриды )

[@UPROCK]

Спасибо за комментарий👍👍

[@Вацлав-н2ю]

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

[@UPROCK]

По проектам их учеников это не особо заметно www.behance.net/search/projects/%D1%8F%D0%BD%D0%B4%D0%B5%D0%BA%D1%81%20%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA%D1%83%D0%BC?tracking_source=typeahead_search_direct

[@Вацлав-н2ю]

@@UPROCK Теперь иду в Uprock, чтобы уйти от сетки)

[@krosss8471]

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

[@UPROCK]

Привет, думаю со второго видео втянетесь)

[@krosss8471]

Да, не дай Бог!! )))))

[@UPROCK]

@@krosss8471 забыли перекреститься) для вас у меня есть полезные тик токи или предзаписанные видео.

[@LilitO-yl5rs]

⁠@@UPROCK а для меня одно удовольствие слушать, все понятно и интересно. Вообще канал находка и Евгений тоже находка

[@Pelenev1]

А ты как думал?) бесплатно на ютубе тебе расскажут как нужно, а как не нужно делать? 😅

[@Чучо-э4х]

Не, бро, хорош про 12 колонок, понял я понял уже на 10 минуте.

[@UPROCK]

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

[@Чучо-э4х]

@@UPROCK Ты в общем то прав вдалбливать надо некоторым по 100 раз. по работе своей знаю. Извини, если, что не так

[@Анастасия-л3н6е]

Давно об этом думаю и переодически делаю просто по композиции. Но что делать, если верстальщик с которым ты работаешь, сопротивляется и вечно пытается тыкать этими сраными колонками?

[@RodHord]

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

[@Анастасия-л3н6е]

@@RodHord спасибо за подробный ответ! Это очень даже похоже на правду, про отсутствие времени

[@UPROCK]

Чаще всего верстальщик просто не умеет верстать по другому, так как последние 10 лет делает все на бутстрапе, но будет доказывать, что именно так и должно быть и все верно.

[@АнтонЛебидь-ь2о]

Этому видео не хватает магии монтажа и хрона в 20-30 минут)

[@UPROCK]

Салют, Антон! Ну, это трансляция, такая специфика) Но предложение принято, подумаем что можно с этим сделать, спасибо👍

[@ДмитрийДремов-я3ч]

Салют)

[@UPROCK]

Хеллоу)

[@1yoj13]

как программист говорю что да, мы можем сверстать что угодно, не сильно не ахуевайте) (творчески)

[@UPROCK]

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

[@RedoxarYT]

бля, я теперь на верстку стал смотреть по новому

[@UPROCK]

Это очень круто👍👍

[@00plac00]

Революционер🫡 Очень здравый посыл и трезвая логика! Самого бесит это правило 12 колонок. Будет ли реакция консерваторов? Посмотрим)

[@UPROCK]

Спасибо) Очень рад, что попал в точку☺️

[@DimaSemenoff]

Информация нужная. Спасибо! Но слушать сложно.

[@UPROCK]

Салют, Дмитрий! Всегда пожалуйста👍 А в чём сложность?

[@DimaSemenoff]

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

[@0000pik]

82к просмотров 3.2 к лайков за рил хорошую инфу супер странно

[@UPROCK]

Салют! 82к это подписчиков на канале, на данный момент у лекции 45к просмотров и 3.2к лайков это маловато конечно, согласен, но в среднем для такого узконаправленного контента приемлемо)

[@squeezerua]

на 4:10 - что не так?

[@UPROCK]

Салют, Ярослав! Уточните пожалуйста, в чём состоит вопрос?

[@squeezerua]

@@UPROCK в размещении экранов в mockup без статусбара. Сайтов на макбуках без интерфейса браузера) Ну это наверное не важно, не по теме, но глаз дернуло)

[@22cryptocoin]

Обучайте ?

[@UPROCK]

Будем✊

[@manuelwife4060]

спасибо господь что ты такой ахуенный

[@UPROCK]

Ты тоже)

[@misterdi3681]

Твсяча лайков!!

[@UPROCK]

Спасибо✨🙏

[@Jollery]

Я училась на Яндекс.практикуме в 2023 году и там дрочат за эти 12 колонок. Меня они бесили, нужно подтягивать под них контент и уже не выглядит так эффектно, чистенько это да, но не вдохновляет. Обосновывают необходимостью фронтендера верстать проект. Обязательно все учат делать кратно базовой единице 4-8 px. Теперь понимаю, что я была права в направляющих и неправа в выборе школы. Сейчас специализируюсь на ux-аудитах. Приду к вам на курс, если есть отдельный UX mega hard😊😊

[@UPROCK]

Для сайтов не нужна кратность 4/8 это тоже пришло с бутстрапа и с мобильной разработки приложений. Я отношусь ко всему так: всему свое место, тащить правила из другой среды потому что там вроде это устоялось не рационально. По поводу ULTRA UX обратите внимание на курс мобильных приложений у нас www.school.uprock.ru/ux-mobile

[@nrmlnyi]

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

[@UPROCK]

Привет, спасибо за пожелания, я все это делаю, но вроде нашел ту золотую середину с экспрессией и контентом. Более 27 000 просмотров полуторачасовой онлайн трансляции не дадут соврать.

[@ShamanoffMichael]

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

[@UPROCK]

Если посмотришь комментарии под этим видео, то еще много людей.

[@ShamanoffMichael]

@@UPROCK афигеть... ну ты молодец что записал такое видео... не думал что кто то ещё пользуется этим. вообще я помню когда они появились там была связка в общем то со старой идей вёрстки в типографиях газет и журналов. идея оттуда и это чисто полиграфический приём именно поэтому он не подходил изначально для веба. так как в типографии есть проблема и задача с ограниченным пространством. чего в вебе нет. и они взяли приём который в принципе не нужен был и не подходил и стали его популизировать. началось все ещё с такого сайта 960px кажется он назывался там были примеры вёрстки сайтов по сеткам ещё на 960px экраны. и вот пошло это в народ.. и бустрап и как его... ещё там был фреймворк один они все это разнесли как пиздец... я сам попал сначала в эту ловушку когда начинал дизайнить... но быстро очухался... но это было лет 15-20 назад...

[@coast89100]

Жиза. я понял бессмысленность этих сеток в 2014

[@UPROCK]

Салют, Алексей! Спасибо за поддержку👍🙏

[@meg3658]

Вот Евгений, опять обманул, обещал что будет материться, и ни одного мата....

[@UPROCK]

Вот ведь, негодяй!)

[@ДмитрийДремов-я3ч]

Золотое сечение.. Правило Ахилеса😂

[@UPROCK]

Точно, у Ахиллеса же не было правил🤔

[@КамиллаМилованова]

Половина успеха автора, видимо, в его умении смачно материться на весь Ютьюб. Зачем уважать себя и других? Матюкнулся- значит, 100% правду говорит... Такая логика? Как же это отвратительно!

[@UPROCK]

Работает же?)

[@susipusy]

Сам себя не похвалишь, никто не похвалит. А топовый дизайнер действительно будет 5 минут петь себе дифирамбы в начале видео?

[@UPROCK]

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

[@businessmarketingskills214]

2 года назад заплатил 2500 евро за курс который еще и продвигается государством, 1 любой стрим UPROCK более информативен и полезен чем 300 часовой курс за 2500 евро. мдааа

[@UPROCK]

Спасибо за отзыв🙏 Да, к сожалению, в текущих реалиях это весьма реалистичный сценарий(

[@pom001]

Этот человек называет мракобесием всякие правила и систему. 🤦🏻‍♂

[@UPROCK]

Мракобесие находить логику там, где ее нет и жить с этим не пытаясь меняться. А я всего лишь отталкиваюсь от того, как мы потребялем информацию и нейробилогии. Гляньте кстати у меня есть лекция Дубынина на канале.

[@danil-old-web]

Все что было в вебе после 2010 это треш. Такой дизайн страниц напоминает то, как будто CSS файлы еще не прогрузились. HTML таблицы топ, а ваши творения это отсутствие дизайна.

[@UPROCK]

Согласен, раньше и трава была зеленее.