Лёгкий способ оптимизировать широкие таблицы

Объединение связанных столбцов и уменьшение внутренних отступов помогает... 💳 Читать полный перевод на Boosty #uxmovement #таблицы

Динамика, смелость, нестандартный подход — всё это в чётких формах, насыщенных цветах и акценте на движении. 🟢Концепция «UX-мутации» — в визуальном стиле мы отразили идею трансформации и поиска новых форм. Гибкие элементы, неожиданные сочетания и динамика показывают, как интерфейсы могут адаптироваться и эволюционировать. 🟢Анимация как часть айдентики — движения элементов не просто «украшают» дизайн, а усиливают смысл. Мы использовали смещение, растяжение и «глич» в анимации, чтобы передать ощущение мутации. 🟢Типографика, которая провоцирует — отказ от стандартной сетки, контрастные размеры и нестандартные отступы создают ощущение нестабильности, но при этом всё остаётся читаемым и логичным. 🟢Мэппинг и динамическая графика — вместо статичных изображений мы внедрили принципы генеративного дизайна, где визуал подстраивается под контекст, сохраняя при этом единый стиль. Подробно о кейсе рассказали в статье здесь: [ссылка]

В этом видео я покажу как сделать обводку с отступом от объекта в фотошопе. Простой урок для начинающих как создать обводку с отступом от края объекта в программе фотошоп. 👀 Смотреть 😄 Графика и дизайн

1. Размещаем пересекающийся текст, логотип, кликкер-кнопку и парочку иконок. 2. Добавляем прямоугольник с усеченными углами, заливаем черным и добавляем глубокую тень. 3. Рисуем круг и заливаем его фотографией. Не забудьте про равные отступы и будет вам успех :) #топ

Микро модификация для того, чтобы растянуть стандартные вкладки Тильды на всю ширину экрана: 🔸 Код работает от разрешения 961рх и более, а на брейкпоинтах меньше 960рх вы устанавливаете внешний вид вкладок в настройках блока. 🔸 Код растягивает вкладки с отступами по 40рх по бокам. Если вам нужны другие отступы — поменяйте соответствующие значения в коде. #модификации #тильда

Модуль помогает автоматически упорядочить элементы по сетке. Для этого нужно выделить объекты, задать ширину отступа и количество столбцов, а затем нажать «Применить». Если ничего не выделять, то инструмент выровняет сразу все элементы верхнего уровня на странице. В плагине есть функция сортировки, чтобы расположить объекты в алфавитном порядке. Готовую сетку можно сохранить и в дальнейшем применять ее к проектам в один клик. #Plugin ОТКРЫТЬ 👨 Дизайн-телега

Вернёмся к вопросу о планировании, но сначала важное отступление Я не из адептов культа продуктивности. Всё, что я делаю в плане планирования — это не для продуктивности Вообще не понимаю этих культистов, которые на трекеры тратят времени больше, чем на реальные дела, и которые ходят бля «у меня 20 часов в сутки продуктивные». Я в это не верю. Это либо показуха, либо у людей какое-то расстройство. Не осуждаю, но и не понимаю. Если им (вам) кайф, то кайф Я начал трекать своё время и дела по двум основным причинам: • чтобы нихуя не забывать больше, потому что я забываю всё • чтобы можно было в любой момент посмотреть где-то, а чё я делал и сделал, и сколько времени я на это убил У меня нет проблем с тем, что я могу целый день нихуя не делать. Я себя за это не осуждаю. Точно так же у меня нет проблем с тем, что ебашить работу всю ночь. Не потому что продакт сказал, что пиздец завтра надо, иначе нам пиздец, а потому что в какой-то момент меня прёт и мне это надо и мне это интересно Я одновременно и трудоголик, и проеблан. Важно никого не подставить и выполнять обещания, как рабочие, так и личные Света и Максим в комментах писали, что есть трудность принять ситуации, когда план сыпется. Я для себя принял, что план никогда не железобетонный. Для меня план — это набросок, что и когда хочу сделать. Если по плану не получается, меня это не тревожит, я двигаю прямоугольник в календаре из одного слота в другой Не могу подвинуть я только созвоны, где много людей, или люди такие важные, что их слот хуй подвинешь. Аналогично для меня неподвижными являются штуки, в которых на меня рассчитывают другие люди. И то, если у меня прям очко, я прихожу к этим людям и говорю «Братан, у меня очко, норм, если подвинем? Если у тебя тоже очко и ты на меня рассчитываешь, то я готов по плану» Мораль какая-то нужна. Она простая — отъебитесь от себя. Будьте продуктивными, когда вам это в кайф или у вас очко и очень надо. Если надо отдохнуть, отдохните Я вот, пока солнышко, катаюсь на скейте 2 часа посередине рабочего дня, потому что вечером будет темно и холодно, и лучше этим вечером я дома поработаю надеюсь меня за это не уволят

Такое простое понятие, которое многие почему-то забывают, когда сталкиваются с первыми трудностями. Вспомните картинку лестницы карьеры, где первая ступенька самая высокая и недосягаемая. Кажется, что она так далеко и вскарабкаться на нее очень сложно. Но преодолев эту пугающую и сложную преграду, замечаешь, что остальные ступеньки простые и по ним можно легко бежать наверх. Как много тех, кто, увидев первую ступень, отступят от своей цели? Из-за недостатка мотивации и уверенности в себе. И это главная ошибка всех новичков. Пока вы не поверите в себя и перестанете слушать тех, кто говорит, что ничего не получится, чуда не случится. Да, первый шаг самый сложный — Решиться, перестать слушать окружающих, найти в себе силу воли не сойти с пути из-за трудностей. Но ваши труды и попытки будут вознаграждены 👌 После того, как вы приняли решение действовать, найдите единомышленников, которые также горят желание двигаться вперед. Начать путь в мир дизайна и инфографики можно вместе с нами, придя на курс Bek.Five 🔥 Там вас ждет и поддержка, и понятная информация с подробным разбором домашних заданий, и даже предоставление клиентов!

Простой способ как посчитать идеальный радиус скругления для вложенных объектов. Радиус вложенного объекта + отступ между объектами = внешний радиус скругления объекта. 📘 Design Lessons

Привет, друзья! Знаете, что я заметил за 20 лет работы с презентациями? Правильно подобранные шрифты могут «сделать» всю презентацию. А неправильные — загубить даже самый крутой дизайн! Недавно в одном из наших чатов прозвучал отличный вопрос о выборе и сочетании шрифтов. И я точно знаю, что этот вопрос мучает многих из вас, когда вы садитесь делать новую презентацию 😅 «Добрый день. У меня вопросик по шрифтам. Правильно же, чтобы работа была аккуратной в презентации можно использовать не более 2 шрифтов и не более 3-х начертаний?» (Анастасия) Знакомая ситуация? - Хочется найти что-то современное и модное - Нужно передать правильные эмоции через шрифты - Важно, чтобы зрители легко воспринимали информацию - И чтобы презентация произвела нужное впечатление А потом начинается водоворот мыслей: какие шрифты выбрать? Сколько их нужно? Как сочетать между собой? И вместо продуктивной работы вы погружаетесь в пучину сомнений. У меня для вас есть отличный первый шаг к мастерству! Я подготовил специальный промпт для нейросети DeepSeek. Она бесплатная, работает без VPN и по некоторым параметрам даже круче GPT-4 и Claude 3.5! ⚠️Подойдёт даже для тех, кто ни разу в глаза не видел нейросети! От вас потребуется сделать только четыре шага: 1 — регистрация в DeepSeek — всё бесплатно, без впн и на любую почту в том числе российскую. 2 — Скопировать промпт (это инструкция для нейронки) из первого комментария под постом. 3 — переписать свою тему в промпте — там где курсивом в кавычках. 4 — Отправить сообщение нейронке. Всё! Дальше она сама со всем разберётся и выдаст вам результат. Что умеет этот промпт: ✅ Подбирает три готовых сочетания шрифтов под ваш проект ✅ Находит только бесплатные шрифты с кириллицей ✅ Дает прямые ссылки на скачивание ✅ Объясняет, почему именно эти шрифты подойдут вашему проекту ✅ Помогает разобраться в базовых принципах сочетаемости шрифтов Как использовать: 1. Заходите в DeepSeek (регистрация на обычную почту) Вот ссылка: https://www.deepseek.com/ 2. Вставляете мой промпт (он в первом комментарии к посту 👇) 3. Заполняете в кавычках: - тему презентации - желаемую стилистику И voilà! Отличное начало для создания профессиональной презентации. А теперь внимание! Для таких же душнил, как я (да-да, признаю), у меня есть бонус: Прямо в том же чате можете устроить нейросети допрос с пристрастием: - Расскажи историю этого шрифта! - Кто его создал и зачем? - В каких проектах лучше использовать? И знаете что? Это только верхушка айсберга в мире типографики (область знаний по работе с текстом и шрифтами). На наших курсах мы погружаемся гораздо глубже: изучаем тонкости интерлиньяжа, узнаём какой длины должны быть строчки текста, для чего нужны абзацные отступы и постоянно на каждом уроке отрабатываем всё на практике. Постепенно у вас в голове будет формироваться собственная база знаний. Сначала может быть информационный шок, но со временем всё встанет на свои места 🧩 — это 💯 процентов. Важное примечание: иногда нейросети могут немного пофантазировать или выдать нерабочую ссылку. Но сами сочетания шрифтов будут точно огонь! 💡 Лайфхак: сохраните этот пост в закладки — пригодится не раз. Если пост реально полезный: • Поставьте реакцию • Поделитесь с коллегами • Расскажите в комментариях о своем опыте использования • Подпишитесь на канал чтобы получать больше профессиональных секретов Давайте вместе создавать презентации, которые продвигают ваши идеи, восхищают клиентов и вызывают Wow-эффект! P.S. Если интересно и нужно, запишу видеоинструкцию. Пишите в комментариях, что нужно видео. Если будет достаточно огонёчков🔥 и запросов, то запилю подробное пошаговое видео.

Или где грань между кривизной и коррекцией в дизайне на примере логотипа Google. В картинке к этому посту комментарий к видео, в котором я показываю как исправила корявости в логотипе Mazda. Девушка написала гениальную фразу, которую можете смело забирать на случай, если клиент скажет вам “Дизайн какой-то корявый”. Теперь вы знаете, что ответить. Новая версия “Я художник, я так вижу”. Но ссылаясь на логотип Google она путает тёплое с мягким. Визуальное восприятие удивительная штука. И частенько бывают ситуации, когда решение построенное строго по сетке выглядит корявым. В силу вступают оптические иллюзии. Так, например, в любом хорошем шрифте вы с лёгкостью обнаружите, что буквы О, Ю и С больше по размеру, чем другие буквы. Потому что квадрат и круг одного и того же размера кажутся разными. Работа дизайнера включает в себя умение править оптические иллюзии, отступая от сетки. Как это сделал Google кладу в комментарии. У лого Mazda в свою очередь необоснованно много размерностей, которые не являются контрастами. Это делает “сырым” любой дизайн. И это никак не связано с коррекцией оптических иллюзий. Я за баланс между творческим подходом и крепкой базой. И это моё мнение.

Поэтому при построении 3д модели,непосредственно в самой программе я наношу все отметки. Строительство модели дома для нового проекта «Эко-дом Гуси». #ландшафтныйдизайн #ландшафтный_дизайн #ландшафтныйдизайнер #ландшафтныйдизайн #ландшафтныйпроект #ландшафт #landscapedesign #garden #дизайнинтерьера #сад #landscape #дача #ландшафтный #ландшафтныйархитектор #landscapes #ландшафтныеработы #декингпрофи #дизайнсада #ландшафткраснодар #забор #ланшафтныйдизайн #озеленение #терасса #ландшафтныйдекор #ландшафтныйдизайнучастка #ландшафтныйдизайнкраснодар #краснодарпроект #благоустройствокраснодар #благоустройство #проектблагоустройства #генплан #генпланкраснодар

помните, осенью я много рассказывала о том, что словила выгорание от текущей работы в агентстве. я много тогда размышляла о том, что с этим сделать, и одной из мыслей было «а может, попробовать что-то новое?». после этой мысли я думала, а что же может быть этим «новым» и нашла несколько сфер, которые для меня потенциально интересны {про них пока ничего не расскажу}. потом выгорание постепенно начало отступать {потому что я уменьшила нагрузку в агентстве — мы поменяли наше «устройство» и вместо скучных организационных задач я стала больше заниматься творческими}. В целом сейчас мое выгорание {или что это там было} почти сошло на нет {считаю, что нахожусь в периоде «отходняка после выгорания»}, а вот идея «попробовать что-то новое» осталась. При этом я понимаю, что прям вот открывать что-то с нуля у меня не хватит ресурса, потому что в агентстве все еще много задач, и его тоже надо развивать + я еще учусь каждый день по 4 часа, а в сутках их всего 24 😅 В общем я подумала, что хорошим решением для меня было бы вписаться в какой-то существующий бизнес {из интересующих меня сфер} и принести туда мои компетенции по упаковке, маркетингу и продвижению. И вот такой проект сам меня нашел. Сегодня обсудили условия и мои задачи, буду заниматься упаковкой одного продукта и его продвижением с нуля. Вот такая интересная задача пока без конкретики, по ходу развития буду больше рассказывать 👀

Возможно, вызовет вопрос обилие не всегда нужной анимации. Ссылка на проект Ui Web Design

Алоха! Первый релиз в новом году. Улучшили работу компонентов и добавили новый пропс 📙 atomaro/vue-ui-kit 1.2.0 и atomaro/ui-kit 1.5.0 — Select: добавлен новый prop deselectEnabled, переключающий возможность отмены выбора при повторном клике на опцию — Modal: Изменены css-стили в компоненте. Убраны статически заданный отступ в контейнере и скругление — Drawer, Modal, Floating Action Button: исправлена работа Overlay. Tеперь при использовании нескольких компонентов на странице оверлеи не накладываются друг на друга — InputDate: При повторном клике на иконку не закрывался календарь. Исправлено — Slider: При включённом disabled можно было выбрать значение по клику на трек. Исправлено 📗 atomaro/vue-ui-kit 1.2.0 — DropdownMenu: Исправлена ошибка, при которой divider выбирался как значение в Select — Tabs: исправлена ошибка рендера табов при использовании цикла

Как строилась работа и что в результате получилось. Рассказала в предыдущем посте какая была задача и что я делала на старте проекта. Определив все сложности, проблемы и задачи я начала с быстрого прототипа сценариев. А теперь конкретика!😊 UX ✦ Сократила на 2 экрана сценарий выбора песен. ✦ Переработала экран меню, основные разделы будут доступны в нижней навигационной панели. ✦ Добавила новый функционал, который обсуждали на старте. ✦ Переработала логику выбора игроком сложности игры. Игроков мотивирует, в том числе, просмотр рейтинга игроков и статистики конкретных игроков. На основании данных игрок может принять решение будет он соперничать с кем-либо на основании этой статистики или нет. Это возможная основа для развития в дальнейшем мультиплеерной игры. Фичи ✦ Придумала новую фичу для большего вовлечения в игру: когда игрок выигрывает, ему предлагается продолжить игру с новыми песнями того же уровня сложности. ✦ Добавила экран «get ready» с отчетом старта, чтобы игрок успел приготовиться к игре. ✦ Предложила решение с длинными названиями песен и авторов. В старом дизайне высота карточки менялась из-за длины названия. Теперь высота одинаковая и длинные названия будут показываться бегущей строкой. Были еще некоторые изменения и все остальное, что планировалось изначально в UX (и о чем я писала ранее). Дизайн Теймур хотел все темное, игровое, без детских элементов) Подобрала референсы и на их основе сделала концепцию дизайна. Обсудили ее с Теймуром и решили поберечь глаза пользователей и делать не такой яркий дизайн в той же концепции ). Убрала избыточные цвета и акценты. В процессе решали обычные точечные вопросы по дизайну, например, Теймур хотел сократить отступ, которое выделяется под челку (он же динамический остров). Показала почему его невозможно занять контентом игры. Глобальных вопросов и комментариев по дизайну не было, поэтому дизайн сделался быстро). Результат работы в цитате от Теймура: «Крутая работа, мне очень нравится» 💪 Экраны прилагаю, игру себе оставляю для развития моторики и просто для развлечения :)🎮 #проект #мобильноеприложение #игра Дизайнер на всю голову

Сегодня у нас практика по Bento-верстке. У нас уже есть контент, который мы сгенерировали нейросетью и использовали в прошлом макете в швейцарском стиле. Сегодня мы переиспользуем этот текст, но сделаем уже Bento-верстку. 1. Возвращаемся к основам Самое простое – это взять то же расположение модулей, что было при швейцарском стиле, но сделать шаг назад. Те подложки, которые мы использовали для закрытия блоков с контентом, теперь используем как фон, в котором будем располагать контент. 2. Скругление углов и выбор цветов Добавляем небольшие, но важные изменения: скругляем углы у этих блоков и выбираем нейтральные цвета, которые будут контрастировать с основным фоном. Сам текст делаем чуть меньше и добавляем отступы от краёв. Фон делаем контрастным по отношению к блокам. 3. Пространство между блоками Между блоков оставляем небольшой, но заметный отступ. Всё пустое пространство, которое ещё осталось, заполняем такими же блоками. Блоки выравниваем по вертикали и горизонтали, а также выравниваем контент внутри них. 4. Итого: простой но эффектный дизайн Это наш первый заход в Bento-верстку, и первая операция завершена успешно! Дизайн это просто. Выкладываем свои дизайны по практике бенто-верстки в комментариях к этому посту🫡

1. Введение в Декомпозицию Ура, мы уже научились декомпозиции! Мы разбиваем рефы, как лего на фрагменты и собираем из них новый дизайн. Мы быстро и круто разбираем композицию в любых рефах и делаем ресайз. Каждый элемент, каждую картинку или текст — мы закрываем плашкой и понимаем, как построена композиция. Это не просто процесс, это метод. Мы учимся не только разбирать, но и пересобирать заново. 2. Композиция и Масса Когда мы говорим о декомпозиции, мы говорим о масса и объеме. Мы расставляем элементы по-новому, сохраняя при этом общее композиционное решение. Это как в математике: от переменны мест слагаемых сумма не меняется. 3. Переход к Контенту Теперь, когда мы расставили все по местам, вместо плашек мы ставим наш контент — текст, изображения. Убираем плашки и наблюдаем, как возникает новая композиция. Это момент, когда дизайн делает первый вздох, когда он становится живым. 4. Альтернативный Подход: Оставляем Плашки Но что если мы оставим плашки? Если они станут фоном для текста? Уменьшим размер текстовых блоков и добавим им отступы от краев. Это создаст прекрасный вариант bento сетки. Такой подход позволяет нам играть с пространством и формой, создавая уникальные визуальные решения. 5. Преимущества Карточек и bento cards Карточки — это универсальное решение. Они так же удобны, как швейцарский дизайн. Берите любой текст, разбивайте его на блоки и размещайте в карточках. Это простое действие открывает перед вами мир возможностей. Формат становится гибким и адаптивным. 6. Пример от Apple Apple прекрасно понимает силу карточек. Их страницы состоят из чистых, понятных блоков, которые упрощают восприятие информации. Это не просто стиль — это метод, который работает на пользователя. 7. Применение Метода Мы возьмем этот метод на вооружение. Мы становимся крутыми дизайнерами, и нам осталось всего лишь один шаг — начать создавать сайты в стиле Apple. Это не просто задача, это вызов. Смотри примеры в комментариях. Страница эпла построчная полностью из карточек. Завтра практика.

на этой неделе сразу несколько наших менти спросили про дизайн-системы — как их создавать, внедрять и развивать. в этом посте мы пройдёмся по верхам и расскажем, как сделать дизайн-систему рабочим инструментом и больше никогда не спорить о кнопочках (ну если только чуть-чуть). а если захотите погрузиться в тему с головой или у вас есть другие точки роста — #form">оставляйте заявку и мы подберём для вас ментора мечты. ✦ бывало такое: открываешь макеты, а там у каждого дизайнера свои кнопки, отступы и даже цвета? или ещё веселее — разработчики уже сверстали одни компоненты, а дизайнеры успели придумать другие? в какой-то момент количество утверждённых, полуутверждённых и почти утверждённых стилей становится неуправляемым. тут-то и приходит на помощь дизайн-система. что такое дизайн-система? если совсем просто — это общий язык для всей команды. дизайнеры договариваются с разработчиками об основных элементах: как выглядят кнопки, поля ввода и таблицы, какие используются цвета и шрифты — всё это живёт в одном месте. почему это важно? во-первых, команда перестаёт спорить о мелочах и тратит время на реальные задачи. во-вторых, новые фичи собираются из готовых блоков — не нужно рисовать с нуля. пользователи не теряются в интерфейсе, потому что знакомые элементы везде выглядят одинаково. а ещё дизайнеры с разработчиками наконец-то начинают говорить на одном языке, когда обсуждают компоненты 😊 что входит в дизайн-систему начнём с готовых компонентов — это кнопки, формы, таблицы и другие часто используемые элементы. нарисовал один раз — используй везде. дальше идут стили и правила: цвета, шрифты, отступы. если нужно поменять основной цвет, достаточно сделать это в одном месте, и он обновится во всём проекте. и конечно, нужна документация, которая объясняет, как всем этим пользоваться. она помогает новичкам быстро влиться в проект, а команде — не забыть о правилах. если хотите посмотреть, как это работает в жизни, загляните в material design от google — одну из самых известных дизайн-систем. если вы пользуетесь android-приложениями, то уже видели её в действии. она задаёт не только внешний вид, но и то, как ведут себя элементы интерфейса. как создать дизайн-систему 🥴 для начала соберите все элементы интерфейса и посмотрите, где начинается хаос. обычно дизайнеры удивляются, когда видят, сколько разных вариантов одной кнопки гуляет по макетам. следующий шаг — выделить основные стили: цвета, шрифты, отступы. это фундамент, на котором будет стоять всё остальное. потом можно приступать к библиотеке компонентов. начните с простых элементов, постепенно добавляя более сложные. обязательно документируйте каждый шаг. каждый член команды должен знать, где найти нужный компонент и как его использовать. и конечно, важно договориться об инструментах: дизайнеры обычно работают в figma, а разработчики — например, в storybook. если хотите почитать по теме, советуем начать с atomic design брэда фроста — он отлично объясняет, как собирать сложные интерфейсы из простых компонентов. и обязательно изучите документацию material.io — на примере material design можно многому научиться. дизайн-система — живой организм, а не догма. она должна развиваться вместе с продуктом. удаляйте неиспользуемое, добавляйте новое, следите, чтобы документация всегда оставалась актуальной и у вас всё получится 👍