Евгений Кузьмин (CEO & Art-director студии UPROCK, топ-26 в рейтинге веб-дизайнеров по версии Tagline) берёт интервью у самых ярких представителей digital-индустрии, а также делится своим опытом, рисует крутой дизайн в режиме online, разбирает типичные ошибки и портфолио участников вебинаров.
Присоединяйтесь и прокачивайте свой скилл веб-дизайнера.
Во-первых, верстка сеткой делается не только с помощью бутстрапа. В 2017 году стали доступны css-grid layouts и это реально упрощает верстку и сокращает кол-во кода, так что очень громкие заявления, что разработчики больше не пользуются сетками. Во-вторых, подход, когда сначала создается сетка, а потом под нее все подгоняется - сам по себе неверный. Сначала собирается композиция, балансирует масса, расставляются нужные акценты, а уже после проектируется под это решение сетка. Да, пользователи её не видят, но она помогает дизайнеру и разработчику. Но при этом это не отменяет, что работы классные, просто можно было бы поменьше вы*бонов )
В вёрстке сетки реализуются с помощью css grid и css flex свойств. С помощью какого css свойства реализуют "направляющие"? Я понимаю что направляющие можно реализовать с помощью визуала, правильно выстроить блоки, что бы они вместе создавали ту самую линию. Но тут ты изменяешь размер окна и блоки съезжают. Используя сетки - блоки всегда идут по рядкам, адаптация под разные экраны не сложно реализуется. Как подобный функционал реализовать, когда сетки нет, а есть только визуальные направляющие? Я над этим не долго думал, но в данный момент вижу достаточно сложный процесс адаптации, где вам нужно собрать точную инфу о размерах экранов потенциальных пользователей и заточить статичный, +- резиновый, дизайн именно под популярные разрешения экранов. ( Сложен он именно для заказчика, который не разбирается во всём этом, ему нет дела до каких то там исследований, ему нужно быстрее результат ). В кейсах где заказчик адекватный и процесс разработки не кастрирован - вопросов нет.
Все что было в вебе после 2010 это треш. Такой дизайн страниц напоминает то, как будто CSS файлы еще не прогрузились. HTML таблицы топ, а ваши творения это отсутствие дизайна.
😂 отдуши посмеялся, но не с автора, а с шизы, которая реально есть в дизайне и вёрстке. Хочу заметить, что я не дизайнер, а fullstack, но даже я давно отказался от 12 колоночной системы. Да, на bootstrap бывают проекты, но я стараюсь брать именно 5ю версию, потому что B5 более гибкий чем B4, про B3 вообще молчу... Сейчас в тренде TailWind, MUI, Framework7, Material Design и Ant Design. Все эти решения более или менее активно используются при формировании страниц веб-приложений, потому что сайты начинают вымирать. Кто не знает, сайты - это про статику. Поэтому, сейчас либо делают веб-приложения, либо веб-сервисы. Когда говорят про ИИ, которое заменит программистов, тут скорее всего про тех, кто делают сайты. Сайты коммерчески не выгодны из-за отсутствия динамического контента. Ещё один минус сайтов, они ОЧЕНЬ медленные. Я смотрю подобные видео, чтобы понимать, как лучше будет выглядеть проект, предлагать интересные решения, аргументируя, почему так лучше. Так я стал программистом с навыками дизайнера. Смотрю как программисты делают страницы, и понимаю, что некоторым лучше идти в Backend. Иногда попадается мусорный дизайн. Вроде выглядит всё понятно, но есть какое-то ощущение скованности, как-будто пихают в какие-то рамки, заставляют заглядывать в щель. Несмотря на то что я начинал свой путь с табличной вёрстки без CSS, я прошёл довольно большой эволюционный путь. Общее впечатление, веб-дизайн сейчас здорового человека. Дизайны курильшика ещё есть, но они либо на кладбище интернета (сложно найти в поиске), либо вымерли. Сайты и компании этого типа больше не существуют. В общем, эволюция веб-дизайна идёт по верному пути, но иногда, с художественной точки зрения, перебарщивают с "детством", либо используют кричащие несочетаемые цвета, либо забывают про отступы, либо намеренно или неосознанно делают неадекватно большие пустые пространства, как будто озоновые дыры в атмосфере. В целом согласен с автором, посмотрел дизайны, сделал выводы 🙃😉
Скажу как разраб... Да, Bootstrap устарел, но только лишь потому, что ему на смену пришли более совершенные дизайн-системы. И в большинстве проектов для бизнеса мы используем Ant Design или Material UI - 24-колоночная и 12-колоночная сетка "из коробки" соответственно. Догма ли это? Нет, можно считать что колонка всего одна на весь экран, и работать лишь в её пределах, вот вам свободный дизайн. Но в верстке мы опираемся на CSS media queries, и чаще всего на значение ширины экрана. Для одной ширины мы расположим элементы так, для другой - иначе. И есть несколько эмпирически выведенных breakpoints (точек отсечения) для ширин экранов, когда мы должны перепрыгивать на другой вариант расположения элементов. Проще говоря, когда 2 колонки, которые были отданы под элемент, становятся слишком узкими, мы отдаем элементу уже 4 колонки, 6 колонок и т.д. И мы связываем media queries и прописанные нами правила, в каком промежутке ширин экрана сколько колонок нужно отдавать элементу. Поверьте, когда у вас в системе 100 экранов и 20 элементов форм на каждом, прописывать адаптивную верстку для каждой кнопочки весьма трудозатратно. Что же касается презентационной верстки для лендингов, на мой взгляд, это своего рода искусство и мастерство выстраивать композицию, соблюдать веса и объемы, цветовой контраст и баланс... Тут нужно просто много пробовать пока не наблатыкаешься.
Евгений, спасибо Вам за лекцию! меня учили 12 колонкам, но они реально, порой, подбешивают, нужно больше усилий прилагать, чтоб всё на них классно ложилось, а отступиться от этого, как начинашке, страшновато. Ваш разбор - прямо гора с плеч) уже занималась по Вашим видосам с направляющими и буду дальше ломать сетку во имя сочной композиции)
В каждом видео, которое смотрела на эту тему, обязательно упоминалось про 12 колонок. Не раз задумывалась: «А точно ли это нужно, ведь иногда кажется бесполезным?» Чувствовала свою некомпетентность из-за таких мыслей, ведь если говорят многие и куда более опытные, значит надо. А оказалось, что не всегда это так необходимо) Спасибо, Евгений - начинаю снова доверять собственному чувству и насмотренности)
12 колонок универсальны, потому что они одновременно 6 колонок, 4, 3, 2. Зачем мне делать отдельную модульную сетку на 4 или 3 колонки? Нужно в три столбца? Ну по 4 колонки поделил.
@@bogdandvorzeckij Имелось ввиду, что это не железобетонное правило и не обязательно себя этим ограничивать. К сожалению, не все так считают и загоняют часто в рамки, которые потом боишься нарушить, особенно в процессе обучения, когда задаешь вопросы, а тебе отвечают: «Потому что так надо»
@@Cape_Hope А что именно не железобетонное правило? Вот наше пространство. мы его делим... ну на сколько хотите? давайте на 18 частей? Зачем вообще что-то делить? Потому что дизайн упорядочивает смыслы, упрощает для восприятия, создаёт ритмику, иерархию смыслов. Так можно доскакать до того, что заголовки мы будем набирать тем же кеглем что и обычный текст. Почему нет? Зачем нам какие-то рамки!? Пусть заголовок у нас будет в конце. Мы вольны от рамок. От Библии Гутенберга люди пытаются как-то работать со сложным, систематизировать, облегчить восприятие. А потом хоба. "Сетки пошли от бутстрапа (жесть само сопоставление), на дворе 2024, давайте стрелять в луну".
Давно об этом думаю и переодически делаю просто по композиции. Но что делать, если верстальщик с которым ты работаешь, сопротивляется и вечно пытается тыкать этими сраными колонками?
Колонки ускоряют процесс разработки и облегчают адаптацию дизайна под разные разрешения. Есть вероятность что разработчику попросту не выделили достаточно времени на адаптацию. Если делаешь дизайн по композиции - этот процесс нужно согласовывать с менеджером. Если дизайн сделан по колонкам - хватает сделать дизайн для desktop и остальные разрешения достаточно интуитивно адаптируются без участия дизайнера. Если дизайн по композиции - есть вероятность того что только дизайнер сможет правильно адаптировать его под разные разрешения устройств. А значит это то, что нужно проводить исследования того, какие разрешения устройств популярнее всего у потенциальных пользователей и делать дизайн строго опираясь на исследования. Вывод: Колонки нужны для кастрированного процесса разработки, где ни у кого нет ни компетенции, ни времени что бы правильно реализовывать продукт
@@UPROCK Думаю что он имеет как раз прямое отношение к сеткам и для чего они на самом деле существуют. Несчастный бутстрап просто воспользовался этими знаниями. Сегодняшний дизайнеры с сетками то работать не умеют, а вы им говорите - сетки не нужны. Малевич до того как квадрат нарисовать, рисовал в разных стилях и действительно умел это делать. Научите ребят работать по принципам, как достигнут в этом вершин, сами найдут свой ритм. Не стоит давать неокрепшим умам свободу.
нечестный пример с луной. если оставить черный фон то она везде плохо будет смотреться, что с колонками что без. выровнять луну без фона по колонкам тоже просто. вообще не поняла почему этому столько внимания. не считаю колонки врагом дизайна, а новичкам которые текст в колонке умудряются расставить змейкой так вообще полезным
Салют! Когда мне не нужно привязываться к колонкам - могу не учитывать рамки фотографии) Я рассказывал про это. Но даже если я верну эти рамки в моём примере, то ситуация не изменится. Пересмотрите, пожалуйста, внимательно лекцию: я никого не назначаю врагами. Я даю людям возможность взглянуть на процесс создания дизайна по-новому. Как человек, который успешно обучает большое количество новичков - могу сказать, что лучше сразу учить актуальным вещам и не нагружать устаревшими правилами👍
я не веб-дизайнер, просто смотрю несколько каналов на эту тему, очень интересно. И когда смотрела дизайны сайтов, подумала, что 12и колоночную систему используют для того, чтобы макет было легче переделывать под планшетные и мобильные форматы, где уже сокращают до 2-3 колонок. и тут будто в основном и рассматривались только дизайны сайтов на пк. И я задумывалась, а как же оно на телефоне будет выглядеть? Неужели там блоки с чистого листа надо будет компоновать, не оглядываясь на широкий формат.
Действительно, бутстрап изначально был придуман именно с этой целью. Но на текущий момент нет технической необходимости привязывать всё в одном разрешении к логике другого разрешения. Сейчас можно даже добавлять и убирать отдельные элементы в адаптивах, в зависимости от необходимости их наличия для пользователяна том или ином устройстве.
Евгений, довольно классный вебинар. Очень полезен. Интересно, у меня, как дизайнера интерфейса в игровой сфере преобладает больше UX, чем UI. Всегда надо предоставить весь функционал максимально удобно и продумывать как именно пользователь будет пользоваться интерфейсом.
Даже не представляла, что дизайнеры до сих пор привязаны к 12 колонкам. Я фронтендер с 2000 года (с перерывами, но не важно), тогда еще и слова такого не было. Бутстрап с 12 колонками для меня остался где-то в середине десятых, несмотря на то, что поддерживаю сайт, в основе которого лежит третий бутстрап в качестве легаси кода, от которого тяжело избавиться, но даже и там мы уже давно не пользуемся двенадцатиколоночной системой. Современный CSS настолько гибок, а экраны настолько разные, что смысла нет делать контент насколько-то колонок. Тексты должны быть нормально читаемы, то есть ширина их должна быть 60-75 ch, а не сколько-то колонок. Куча свойств в css сейчас крутится вокруг минимальных и максимальных значений. На одном экране умещается 5 карточек товаров, на экране поуже - 4, а на мелких мобилах вообще всего одна, тут главное чтобы нужная инфа помещалась и нормально читалась. Так что да, жесткими колонками никто не думает во фронтенде.
Повангую :-). Рынок очистится со временем - останутся лучшие и Апрок непременно будет в списке первых. При таком подходе - это просто неизбежно. Конкуренции меньше - цена на курс выше. Так что самое время брать курс сейчас, пока не началось)
Женя, а я боюсь без 12 колонок - использую как шпаргалку больше, но ориентируюсь на силовую) Следующий проект буду пробовать без них) Они и вправду сковывают - так бесит, когда что-то не умещается в заданную ширину, и ты думаешь что если увеличишь, то все сломаешь)) Мои чувства описал точь-в-точь)
@@andreybaykovv 12 это высшее составное число. Его можно поделить на половинки, трети, четвёртые, шестые, двенадцатые и на одиночный блок. Я не могу представить что там за ситуация когда этих делителей нам мало, но если вопрос стоит остро, используйте 24 колоночную модульную сетку. И всё.
🚀Получить доступ на сутки к платным материалам и забронировать скидку www.school.uprock.ru/sale-grids 🔥Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot ⚡Чат дизайнеров UPROCK t.me/uprock_chat
Чтобы не делать одинаковый сайдбар во всех интернет магазинах достаточно необходимую ему ширину положить в 13ую колонку, а 12 сместить в сторону для контента
@@yellowshoess2850 а что мелочиться, давай пусть будет 15 колонок, вместо одной направляющей и еще 12 колонок для сетки из 4х товаров в ряду, действительно почему нам недостаточно 4х колоночной сетки. Пересмотри, пожалуйста, лекцию, мне кажется ты все таки не понял мою главную мысль, что надо избавляться от сложностей, а не искать способ, как их обосновывать.
