📝 Как правильно работать с кеглем и интерлиньяжем?

Привет! На связи Маргарита куратор и дизайнер студии UPROCK 👋🏼 Ранее вы видели разбор по типографике в мобильных интерфейсах, а сегодня предлагаю пойти глубже и посмотреть на типографику в вебе. ⚡️В этом видео я разбираю один из самых тонких и недооцененных этапов в дизайне сайтов: работу с кеглем, интерлиньяжем и трекингом. Очень часто на этапе детализации макетов у дизайнеров возникает ступор: вроде шрифт хороший, сетка есть, отступы расставлены, а страница все равно не читается. Пользователю сложно понять, за что зацепиться взглядом и с чего начать. 📌 А ведь типографика – это основа любого веб-проекта. Заголовки, тексты, кнопки, формы, подписи – все это работает как единая система. Даже без цвета, графики и декора можно собрать сильную страницу, если типографика настроена правильно. 🎥 В видео на примерах студенческих работ я показываю: • как кегль формирует визуальную иерархию и помогает выделять главное; • почему без проработки размеров текста даже аккуратный макет становится хаотичным; • как контраст кеглей может стать фишкой проекта; • почему интерлиниаж нельзя оставлять «auto» и как он влияет на группировку смысла; • как трекинг делает шрифт либо стильным и собранным, либо уставшим и разряженным; • на что особенно важно обращать внимание при работе с популярными шрифтами вроде Inter или Playfair Display. А также делюсь подборкой проектов наших студентов и выпускников для вашего вдохновения: ⚡️Михаил Зубец – Anya Hindmarch ⚡️Александр Тимошин – MAIDEN HOME ⚡️Анастасия Зайцева – OpenAI ⚡️Виктория Ким – Tadao Ando ⚡️Юлия Беляева – BLUE ORIGIN

👩‍🎨 @cgfreelance - вакансии и проекты по CG. 🤖 @cgAIFreelance - вакансии и проекты по AI в CG 🎬 @cgnews - новости из мира CG. 🤠 @darkmax3d - короткие уроки и секреты по 3dsMax. 🛸 @tyflowevent - проекты TyFlow, качай и юзай. 🫥 @polymodel - примеры построения сетки в 3d. 🍩 @blender_tricks - короткие уроки и секреты по Blender. 🚠 @geometrynodes - проекты для Blender, качай и юзай. 😎 @threeDailys - ваши работы CG. ⚖️ @cgblacklist - черный список в CG. 😀 Можно добавить все каналы одной удобной папкой https://t.me/addlist/0bFapsjsiQ9lYmIy 😘 Забираем в копилку!  #art

1. В режиме Total новые опции для создания большой ячейки Hero Сell (случайным размером 40-65% от габаритов сетки) и её центрирование Center It. 2. Ввод чисел в поля зазора между ячейками Gutter и радиуса скругления Corner Radius обновляет последнюю сгенерированную сетку. 3. Генерация сеток происходит без раздражающего «моргания» с новым методом перерисовки сеток на экране. Обновление отправил на электронную почту покупателям (могло попасть в папку «Спам»). Подробнее о скрипте #illustrator #draw #paid

В Швейцарии давно поняли, что красота — в ясности. Поэтому их дизайн выглядит как свежий утренний воздух в горах: холодный, прозрачный и чистый. Если вам нравится порядок без скуки, минимализм без пустоты и типографика, которая дышит — согревайтесь эстетикой и вдохновляйтесь примерами в статье медиа. #польза @contented

T2 подробно делится опытом внедрения: какие проблемы возникают, когда у разных команд свой UI-кит, почему дизайн-система нужна не как «продукт ради продукта», а как способ синхронизировать визуальный язык и код. В основе их DS — foundation-слой с токенами (цвета, сетки, типографика) и унифицированными компонентами, одинаковыми для разных платформ. Такой подход снижает расхождения между дизайнерами и разработчиками, ускоряет сборку интерфейсов и делает продукты визуально цельными. Это пример зрелой дизайн-системы, которая работает в большой компании.

Казалось бы, уже все вокруг для упрощения задач по инфографике сделали и раздали.. Но такого еще точно не было 👏🏻 Считаю, это поможет и скрасит работу каждому: от новичков до профи Готовые сетки по золотому сечению, правилу третей, модульной сетке и еще 6 разных решений, используйте! ( Разрешение: 1200x1600 ) 🔗 Забрать сетки По классике {🔥} на этот пост за скачивание! 🐡 Теперь отдаю удочку, а не рыбу!

#уроки

У меня все, как всегда позитивно💔 Понравилась и идея и реализация. Ну вот как не хмурьтесь такие кейсы редкость — со смыслом, с довольно плавной адаптацией, не типичной сеткой. И то, что это не концепт, а полностью рабочая штука. Круто! С профессиональной архитектурной точки зрения этот сайт разобрал Сергей Гуров в своем посте. Что тоже круто! Смотреть предпочтительнее с веба — ссылка на сайт. Жаль, у меня нет реакции со словом ✅Круто

🌺Вечернее платье для Анастасии создала выпускница СПбГУПТД, модельер Ольга Малярова в стенах родного вуза в своей мастерской. 🌞Платье из сетки и кружева розового и лимонного оттенков украсили тончайший корсет, крупные кристаллы и драпировки. Все расшивали вручную, количество камней - более 150 тысяч. ❤️По словам дизайнера, ей хотелось создать воздушный, практически невесомый образ, в котором Настя напоминала бы нимфу.

Автор собрал подробный справочник базовых элементов интерфейса, разделив их на четыре группы: навигация, ввод данных, обратная связь и отображение данных. Каждый элемент объясняется простым языком с практическими примерами использования. Особенно интересны нюансы терминологии. Например, Bottom navigation в мобильных приложениях называется по-разному: Navigation bar в Material Design и Tab bar в Human Interface Guidelines. А меню из трёх точек имеет сразу три варианта: кебаб (вертикальные точки), фрикадельки (горизонтальные точки) и бенто (сетка квадратиков как в сервисах Google). Автор также объясняет важные различия: радио-кнопки позволяют выбрать только один вариант, а чекбоксы несколько; тост исчезает автоматически, а уведомление может быть постоянным. Внутри: – Почему аккордеон и коллапс это разные элементы; – Как три точки превратились в кебаб и фрикадельки; – Зачем нужны хлебные крошки и откуда такое название; – Чем селект отличается от дропдауна; – Почему минимальный размер кнопки 44×44 пикселя; – Какие шесть типов диаграмм чаще всего используют в интерфейсах. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Редактируемые карточки в стиле бенто можно сделать вручную, используя неразрушающие эффекты Иллюстратора. Вы сможете менять ширину отступов, количество ячеек и радиус скруглений в любой момент. 1. Рисуем поверх формы разделительные линии с обводкой. 2. Группируем линии и применяем Effect → Path → Outline Stroke и Pathfinder → Merge. 3. Группируем их с нижней формой и применяем Pathfinder → Subtract и Stylize → Round Corners. Если нужны отдельные объекты, то разбираем группу с эффектами через Object → Expand Appearance. И после ещё можно сделать плавные скругления бесплатным скриптом Round Corners Customization. — А автоматически генерировать разные сетки с настройкой количества ячеек, отступов и скруглений можно моим платным скриптом BentoGrid. #learn #illustrator #draw #paid

Делаю коллективный доступ и сохраняю туда сокровища, которые идеально подойдут в текущий проект. Может быть, все дело в том, что мои личные папки перевалили за 100+ сохраненок и мне практически физически больно, когда классный предмет уходит из-под носа, потому что мне некуда его пристроить? Решила разделить эту свою страсть и с вами тоже❤️ ⭕️ Все началось с основательного буфета, который был распространен в СССР в 40-50х годах. Интересный момент, что по форме он напоминает крестьянские шкафы-поставцы, где в начале XX века крестьяне демонстрировали самую ценную посуду. ⭕️ К нему за компанию как-то сами прыгнули изящные стулья в стиле модерн. ⭕️ Стол решила взять современный, для баланса. ⭕️ Ироничная люстра Гжель периода 70-80х совпала по времени с возвращением интереса к национальному в дизайне. ⭕️ И, конечно, не обойтись без скатерти ришелье и кобальтовой сетки ЛФЗ. Сохраняйте себе готовый интерьер столовой, а лучше заберите буфет и пришлите мне фото, что он живет свою лучшую жизнь в счастливом доме☺️ [Дизайнер в кокошнике]

С помощью нейросети Replicate, автор создал сетку изображений своего лица, смотрящего во всех направлениях 🖼️ Концепты интерфейсов

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

• Элегантный и современный дизайн • Полностью редактируемый • 5 различных вариантов • Подробная информация об использовании • Демонстрационный дизайн веб-сайта #фоны #узор #сетка Открыть в Figma

Мы — студия продуктового дизайна и разработки red cat. Разрабатываем продукты, меняющие мир вокруг. С кем мы уже работали и продолжаем работать: РЖД-медицина, Free Age, ВДНХ, Росмолодёжь, FishStat. Мы сейчас ищем дизайнера на проект. Растёт объём задач и расширяется сам продукт. Поэтому в помощь нашему ведущему дизайнеру теперь нужен молодой, талантливый и амбициозный спец, который готов развиваться и вырасти в своих скиллах и грейде на реальных задачах. Чем предстоит заниматься: • Отрабатывать в макетах правки от стейкхолдеров и разработки • Помогать делать адаптив под мобилку • Другие задачи, возникающие по ходу работы над продуктом и беклогом Что нужно уметь: • Работать с дизайн-системой • Знать и уметь в компоненты, варианты, переменные И, конечно: • Базовые навыки — композиция, сетки, пропорции, типографика, колористика • Уверенное владение Figma • Отличная насмотренность • Способность самостоятельно организовать свою работу, четко оценивать задачи и укладываться в сроки • Умение уважительно давать и получать фидбек, открытость к изменениям и готовность учитывать чужую точку зрения • Продуктовое мышление и ориентированность на бизнес-цели клиента, сфокусированность на конечном результате и продукте Особенно важно: • Уметь работать быстро • Быть на связи • Коммуникабельность • Ответственность • Желание и стремление расти и развиваться в профессии В плане вывода на проект у нас всё чётко. С онбордингом, поддержкой от старшего диза и арт-дира. Если вдруг нужно будет чему-то дообучить — научим. Что предлагаем: • Удалёнка Работай из любой точки мира • Гибкий график Можешь выбирать удобное время начала • Работа в продукте • Комфортные условия Работаем в Телемосте, Figma, Telegram и Notion • Менторство и рост внутри студии • Молодой и амбициозный коллектив, комфортный арт-дирекшн У нас все на одной волне и нет начальников • Интересные проекты Сможешь с гордостью взять их к себе в портфолио • Зарплата в рынке Что дальше: Сперва, нам важно встретиться с человеком. Понять, сходимся ли мы по вайбу и подходу к работе. Поэтому сначала нам нужно будет познакомиться на небольшом интервью. ОТКЛИК Чтобы откликнуться на вакнсию, напишите @evmfadeeva Она поставит встречу

Скульптурную люстру Meshmatics для бренда moooi дизайнер Рик Тегелаар (Rick Tegelaar) создал … из обычной проволочной сетки. Многослойность создает завораживающую игру света и тени, делая любое пространство особенным.

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

Изучаем Material Design 2: взгляд на статью №3 из 6 Читать на дизайнерс | #статья

Изучаем Material Design 2: взгляд на статью №3 из 6 Читать на дизайнерс | #статья