Категории

Каналы

X разрывается от новостей про Google Stitch (пост)

Meet the new Stitch, your vibe design partner. Here are 5 major upgrades to help you create, iterate and collaborate: 🎨 AI-Native Canvas 🧠 Smarter Design Agent 🎙 Voice ⚡️ Instant Prototypes 📐 Design Systems and DESIGN.md Я уже писал про Stitch несколько раз, потому что он на слуху. Сейчас они удивили сообщество тем, что теперь можно «вайбдизайнить» и сразу получать production-ready код Видно, что прогресс есть, но заголовки формата «DESIGNERS ARE COOKED» или «ITS SO OVER FOR DESIGNERS», которыми засран твиттер, пока что слишком громкие Дизайн выглядит все еще слабовариативным, я посмотрел, чего там эксперты нагенерили (возможно, поможет правильная работа с промптами и рефами) То, что презентуется как «дизайн-система», выглядит как простой ui-kit на переменных (к слову, вообще-то у самого подход к использованию дизайн-системы — то еще дерьмо, можно несколько экранов их продуктов собрать и сильно удивиться) Мне оч нравится направление, куда идет Stitch. Они могут соревноваться с фигмой, факт! Но давайте по-честному: Чуваки решили проблему «как нам быстро задизайнить что-то» Они не решили такие вопросы (и шанс, что решат, не очень велик): → Почему высокий процент отказов с главной страницы → Почему пользователи игнорят СТА, хотя ее видно → Как нам сделать конвертящий онбординг-флоу Разве когда-то проблема была только в пикселях? Stitch просто сделал думающих дизайнеров более ценными Короче, не переживаем, работу пока ai не заберет!

Video is not supported

Дизайнер, привет

Блоги

23 д.

@jun_hi

🕶 Почему интерфейс для умных очков нельзя просто взять с телефона

На телефоне у дизайнера есть экран. В очках его как будто нет. Интерфейс живет поверх реального мира, а пользователь должен физически перевести фокус примерно на метр перед собой, чтобы вообще начать его читать. Уже из за этого привычные паттерны начинают ломаться. Дэвид Аллин Риз из Google рассказал, как команда собирала Jetpack Compose Glimmer для очков с прозрачным дисплеем. Самый сильный инсайт: черный цвет здесь не черный, а прозрачность. Насыщенные цвета теряются на фоне реального мира, обычные шрифты читаются хуже, а слишком быстрая анимация просто моргает в периферии. Поэтому интерфейс пришлось пересобирать почти с нуля: темные контейнеры вместо привычных поверхностей, нейтральная палитра, новая система глубины и очень осторожная работа с движением. Внутри: – Почему интерфейс в очках воспринимается не на линзе, а примерно на расстоянии вытянутой руки; – Что меняется в дизайне, когда черный цвет становится полностью прозрачным; – Почему привычные компоненты и тени плохо работают на прозрачных дисплеях; – Как команда подбирала размер текста через угловой размер, а не пиксели; – Зачем в интерфейсе почти отказались от насыщенных цветов; – Почему уведомления появляются почти две секунды, а не мгновенно; – Как устроены глубина, перекрытия и темные контейнеры в Jetpack Compose Glimmer; – Что значит проектировать интерфейс, который должен появляться только тогда, когда он реально нужен. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

СПбГУПТД | NEWS

Новости

27 д.

@spsutd

💻 Продукция с символикой профессиональной конференции для IT-сообщества в нефтегазовой отрасли – проект студентки Института графического дизайна СПбГУПТД Дарьи Кришталь

Студентка разработала систему сувенирной продукции, предложила новые позиции и подобрала реальные производственные компании для реализации. В основе концепции лежит цилиндр – базовый элемент системы, своеобразный "пиксель" физического и цифрового мира. На конференции он формирует волну – метафору трансформации отрасли. В мерч-продукции – становится модулем для создания новых форм, подобно данным, из которых рождаются решения, связи и энергия. Цилиндр в проекте трактуется как единица данных, кода или молекула энергии – простая и универсальная форма, из которой выстраивается все от алгоритмов до нефтяных платформ. Взаимодействие фигур формирует новые структуры – спирали, кольца, звезды и другие динамичные композиции, – сообщила Дарья. 🏆 С этим проектом студентка заняла третье место в федеральном конкурсе «Дизайн молодых». Напомним, что в этом сезоне победителями стали 9 студентов СПбГУПТД в 8 номинациях. Подробнее читайте на Дзене. 👻MAX | 📲ВК | 📝Дзен

Журналус лайт

Гайды

28 д.

@zhurnalus_lite

🇬🇧 How to Design for Transparent Screens

Дэвид Аллин Риз рассказал, как команда Google проектирует интерфейсы для прозрачных дисплеев в ИИ-очках и почему для этого пришлось пересмотреть многие базовые принципы UI-дизайна. В статье он объяснил, как работают такие дисплеи, почему на них чёрный цвет, тени и насыщенные цвета ведут себя иначе и какие решения легли в основу фреймворка Jetpack Compose Glimmer для XR-интерфейсов. Получился подробный разбор того, как меняется цвет, типографика, глубина и анимация, когда интерфейс существует не на экране, а поверх реального мира. Главное: • Интерфейс в ИИ-очках не размещается на поверхности линзы, а проецируется примерно на расстоянии одного метра. Поэтому пользователь должен сознательно перевести фокус с реального мира на UI • Дисплеи очков могут только прибавлять свет к уже имеющейся картинке реального мира. При таком подходе чёрный цвет выполняет функцию прозрачности, а не заливки • Чёрный цвет выступает в качестве гарантированно читабельной подложки для контента • Светлые интерфейсы не получается использовать, потому что они создают отвлекающие блики на экранах и сильнее расходуют батарею • Типографика измеряется не в пикселях, а в углах зрения. Текст делают таким, чтобы его можно было прочитать одним взглядом. Минимальный размер для читаемости — около 0,6 градусов • Пространственная дистанция становится ключевым параметром при проектировании • Анимации медленнее, чем в привычных интерфейсах. Уведомления появляются почти за две секунды, мягко привлекая внимание пользователя • При действиях пользователя, наоборот, требуется мгновенная обратная связь. Для этого применяются фокус-индикаторы и подсветки • Вся система построена вокруг идеи «спокойного интерфейса». Информация появляется только тогда, когда она действительно нужна, и не мешает восприятию реального мира #статья @zhurnalus_lite

Retro Figma

Гайды

29 д.

@retrofigma

Distribute Layers — плагин распределяет выбранные слои влево, вправо, вверх или вниз по указанному смещению пикселя

Install

Дизайнер, привет

Блоги

30 д.

@jun_hi

🎓 Стажер потратил месяц на исследование, нашел 2 респондентов из 250 опрошенных и забыл включить запись разговора

Сергей Федоричев пришел практикантом UX-проектировщиком в команду S3 в Selectel. Первое представление о работе было романтизированным: главное уметь проектировать интерфейсы, знать паттерны, аккуратно работать с макетами. Практика расставила всё по местам. Реальные пользователи вели себя не как в учебных кейсах, любое решение требовало учитывать ограничения продукта, бизнеса и инфраструктуры. Первая задача: паттерн Show More для скрытия информации. Сергей собрал примеры использования по всем продуктовым панелям, сгруппировал по целям, обсудил с дизайнерами. Результат неожиданный: полный отказ от паттерна. Show More стал антипаттерном, который не рекомендуется использовать. Незачем скрывать информацию от пользователей и заставлять их совершать дополнительные действия. Первое полноценное исследование: изучение пользовательского пути при подключении утилит к S3. Сергей искал новых пользователей, которые заходили на страницу создания бакета. Опросил примерно 250 человек, нашел только двоих потенциальных собеседников, причем не самых репрезентативных. В обоих случаях забыл включить запись разговора. На рекрутинг и два интервью ушел месяц. Исследование пришлось прекратить. Сергей не зафиксировал результат своей работы, это была ошибка. Внутри: – Первые дни практики: подключал утилиты к бакетам, проходил основные сценарии, разбирался в терминологии вместо чтения документации; – Паттерн Show More: собрал все варианты использования, сгруппировал по целям, пришел к выводу что это антипаттерн; – Дизайн-система это не про пиксели, это про коммуникацию и синхронизацию между разными продуктами; – SSL/TLS сертификаты в S3: построил user flow, выявил места где пользователь терял контекст, предложил интеграцию с менеджером секретов; – Рекрутинг респондентов: 250 опрошенных, 2 собеседника, забыл включить запись, месяц работы без результата; – Даже неудачное исследование нужно фиксировать: отклик ЦА, использованные каналы рекрутинга, риски, что можно улучшить; – Факт отсутствия ответа от ЦА это данные, а не провал. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

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

Друзья, поздравляю вас с первыми днями этого прекрасного времени года. 🌱 Наконец официально зима закончилась, скоро будет всё зелено, ярко, можно будет гонять на велике, бегать по улице, кайф. А еще эта весна началась с приятной новости. ⚡️⚡️⚡️ Сегодня пришло уведомление от DProfile 🔥, что нам дали награду «Лучшие интерфейсы»🔥 за кейс для проекта ЕлиПили. Поздравляю нашу команду дизайнеров с очередной небольшой, но очень важной наградой. Это кейс, как мы создавали мобильное приложение для компании. Бренд объединяет несколько ресторанов с единой системой программы лояльности. Короче, это здоровый кейс на какое-то нереальное количество пикселей. Приложение реальное, сейчас работает, можно в Москве скачать, сходить в ресторан, заказать еду либо забронировать столики. Для нас это очень приятная награда, потому что кейсы на DProfile мы выкладываем редко. Руки пока до них не доходят. Тем ценнее такие печеньки 🔥🔥. Если вы ещё не видели этот кейс, вот ссылочка 👉🏼 https://dprofile.ru/case/160408/eli-pili-prilozenie Зайдите, оцените, ставьте нам лайки, а мы пошли дальше работать. У нас проектов еще больше прибавляется. Да, на этой неделе буду уже вакансии публиковать. Надеюсь, что год пройдёт так же ударно, как и начался. Мы с командой, по крайней мере, будем прикладывать все силы к тому, чтобы делать ещё больше, ещё лучше. Всё, обнял, пока. 🏆 Саша из Анкоры

в этот раз сделала лонгрид, посвященный истории нинтендо! безумно люблю всю их вселенную и не смогла пройти мимо при выборе темы в основе концепции лежит метафора "пиксель - маленькая точка, из которой выросла целая культура". графика построена на сочетании пиксель-арта и 3D, объединяя прошлое и настоящее. а ещё большая часть визула была сгенерирована! проект можно посмотреть на dprofile и behance

В macOS Tahoe компания добавила иконки к каждому пункту меню. Проблема: если иконка есть у всего, ничто не выделяется. Главная функция иконки в том, чтобы помочь быстрее найти команду. Но когда все пункты с иконками, это работает наоборот. Ник Тонский, программист и дизайнер интерфейсов, разобрал все ошибки и сравнил их с рекомендациями из собственного руководства Apple 1992 года. Оказалось, что идеальное знание уже было доступно 30 лет назад, но его полностью проигнорировали. Внутри: — Пятьдесят оттенков «Создать»: собрал все иконки для новых документов, папок, записей в одну картинку, абсурдность стала очевидной; — Одинаковые иконки для разных действий: стрелка может означать импорт, обновления, быстрый просмотр или показать выполненное; — Детализация в 12×12 пикселей: иконки размером 0,09 дюйма (2,4 мм) содержат камеру с видоискателем, окно с кнопками закрытия, букву i высотой 2 пикселя; — Нет консистентности: «Сохранить» имеет разные иконки в разных приложениях, стрелки указывают в разные стороны; — Текст вместо метафор: иконки Abc, BIU выглядят как текст, а не как символы; — Игра без подписей: убрать названия команд и попытаться угадать по иконке, что она делает. Провал. Apple взялась за невыполнимую задачу: добавить иконку к каждому пункту меню. Хороших метафор на всё не хватает. Но даже с учётом этого работа сделана плохо: нет консистентности, детали не видны, одинаковые иконки означают разное. Как вам иконочки? ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Часто слышал на собесах вопрос «Ты командный игрок или одиночка?» (и даже сам спрашивал) Наверняка есть роли, где перекос в одну из сторон — вполне ок. Но дизайн не про это. Думаю, дизайнерам важно уметь вовремя переключаться между этими режимами Всю деятельность дизайнера можно поделить на 5 слоев и выбирать нужный в зависимости от контекста: 1. Solo Скетчинг, сборка макетов, поиск рефов и дизайн-решений — все это лучше делать самому. Если пытаться штормить каждый пиксель толпой, получится франкенштейн, еще и ответственность размоется 2. Trio Дизайнер + Продакт + Техлид/Аналитик Здесь идет более глубокая работа над продуктом. Менеджер приносит проблему и цифры, дизайнер — UX, техлид или аналитик сразу говорит, где мы упремся в ограничения 3. Team Когда концепт/флоу готов, мы идем к разработчикам и QA для груминга. Тут нужно убедиться, что всё доедет до прода в том виде, как было задумано (или предстоит найти какие-то компромиссы) 4. Cross-functional group Если вы делает что-то новое/большое, то стоит сходить к сейлзам, маркетингу, саппорту и смежным командам. Порой 1 разговор с подобными ролями может заменить 10 интервью с клиентами, и вы можете узнать детали, которых нет в метриках 5. Visibility for company Демо, посты в общие чаты, рассылки. Нужно показывать, что вы делаете, почему и зачем. Не чтобы похвастаться, а чтобы команды в компании понимали, куда движется продукт и как это может на них повлиять Нет какого-то правила и верного порядка, как нужно перемещаться по этим слоям. Обычно с опытом мы просто начинаем понимать: - тут я закопался, надо идти к продакту - слишком много разговоров, надо пойти порисовать просто - надо сделать рассылку внутри, чтобы подсветить фичу

Потратили кучу времени на иконку, придумали классную метафору, отрисовали. Показали коллегам, спросили, для чего эта иконка. Если вы рисовали колокольчик, а вам говорят «нос» — смиритесь. Первая ассоциация самая верная. Цель коммуникации — реакция. Если реакция не совпадает с ожидаемой, значит коммуникация провалилась. Александр Никитин, UX/UI-дизайнер в Экзон, создал набор из 250 иконок и написал про весь процесс. Главный тезис: начинать нужно с конца. Сначала сформулировать, какая библиотека нужна в итоге, потом рисовать. От этого зависит всё: нейминг, структура, формат, насколько легко масштабировать и поддерживать. Парадокс работает: когда знаешь финальную картину, не наломаешь дров. Внутри: — Хинтинг и пиксельная сетка: почему иконка размывается, если поставить не в край пикселя; — Сохраняйте базы: векторные объекты до их преобразования, чтобы потом не переделывать с нуля; — JTBD для иконок: когда делаю макет, хочу быстро вставить нужную иконку, чтобы не отвлекаться на правки; — Все иконки одинаково важны: не делите на главные и второстепенные; — Иконки не должны быть красивыми, а должны работать: не отвлекать, а дополнять интерфейс. Статья с конкретными горячими клавишами Фигма, примерами структуры, проверками на дубли и ошибки. Если делаете библиотеку иконок, почитайте до создания, а не после переделок. А вы когда-нибудь создавали иконку, которую никто не понял? ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Рассказываем про релиз декабря — Baltica Pixel 13. Это новый бесплатный шрифт нашей студии. Baltica Pixel 13 — пиксельная версия шрифта Балтика. Она хорошо работает в экспериментальном графическом дизайне, особенно если шрифт растянуть или наклонить. А ещё подойдёт в качестве основы для вязания и вышивки крестиком. Сама Baltica — гарнитура на основе рисунков шрифта Candida фирмы Ludwig & Mayer, 1936 (дизайнер Якоб Эрбар). Шрифт разработал коллектив дизайнеров под руководством Веры Чиминовой при участии Исая Слуцкера в Отделе наборных шрифтов НПО Полиграфмаш в 1951-52. А цифровую версию создал Александр Тарбеев в 1988. Форма знаков Балтики близка к брусковым шрифтам, но засечки гораздо более тонкие. Прописные — достаточно широкие, а строчные — крупные, что делает шрифт хорошо читаемым в мелких кеглях. В основе нового шрифта — хинтинг Балтики в формате Black & White, который сделала Галина Кунарёва. История создания: В операционных системах 1990-х–начала 2000-х шрифты отображались попиксельно, без сглаживания. И чтобы векторный шрифт хорошо работал на экране, для каждого кегля технолог вручную создавал пиксельную версию. На основе одной из этих версий, для размера 13 ppem (пикселей на кегль), мы и разработали Baltica Pixel 13. Это один из самых мелких размеров, высота прописных знаков в нём 9 пикселей, а строчных 6. Естественно, в современных условиях можно использовать пиксельную версию в любом кегле, а также произвольно растягивать, сжимать и наклонять — так будет даже веселее. Знаковый состав шрифта такой же, как в Балтике — базовая кириллица и расширенная латиница, минускульные цифры, капитель, а ещё бонусом мы добавили стрелки. Скачать шрифт ⚡️

И началась война против пикселей и тряски в кадре И вышло новое видео на нашем канале Инструменты внутри — надежда человечества на 4K 120 FPS 😐 СМОТРИМ ФУЛЛ НА ЮТУБЕ 😐

У Фигмы в начале месяца вышла любопытная заметка про будущее взаимодействия с интерфейсами. Там ретроспективно пробежались по знаковым фичам от щипка для приближения до общения с нейро-чатиками. Заметка наводит на размышления, что нас ждёт на горизонте лет так в 5–10? Все интерфейсы станут чатами для команд? Или двигать пиксели на экране можно будет силой мысли? Да и нужно ли вообще будет двигать эти пиксели и во что трансформируется профессия дизайнера? Делитесь размышлениями. #почитать @vestochka_design

27.01 — 05.02 ОШД — это??? Наш шрифтовой курс от Вовы Аносова: знакомимся с теорией, осваиваем работу в редакторах и параллельно создаём собственный шрифт с нуля. Приходите придумывать буквы Задание Текст на плакате: Sholotch fonts world ТЗ: Создайте плакат-specimen для 3 шрифтов из коллекции шрифтов учеников курса ОШД. Не зацикливайтесь только на глифах, загляните во всю шрифтовую кассу. Разделите плакат на 3 части любым способом и отразите настроение букв с помощью дополнительной графики, цветов или эффектов. Дедлайн: 05.02, 18 вечера МСК Формат: 1400 на 2000 пикселей, jpeg, название файла: your_name_poster_games_week_06. Отправляйте работы в комментарии к этому посту. Призы Первое место получает от Щёлочи 5к Второе и третье место получают книжки от DW + Щ Все участники получают 10% скидку на курсы СВД и ОШД Стрим-просмотр с Вовой Аносовым в четверг 5 февраля, 19:00 по МСК

Декадентский шрифт с низким контрастом. Выразительный, уверенный, дерзкий и манерный. Очень плотный в наборе, Blavatsky близок к фотонаборной типографике второй половины ХХ века. Примечательные детали: тонкие гладкие засечки, переходящие в основной штрих; низкий контраст штрихов, как в рекламе 80-х, и сумасшедший контраст в пропорциях букв. За счет низкого контраста и хорошей хинтовки шрифт прекрасно читается в мелком кегле на экранах с крупными пикселями. Стилистический сет 01 — Witchcraft открывает портал в оккультную эстетику Америки 90-х. Шрифтовой дизайнер: Эльвира Байбикова Арт-директор: Дмитрий Голуб Скачать пробную версию и купить шрифт

Это вторая серия, посвящённая акцидентным шрифтам, первая вышла в ноябре прошлого года

app.streamlinehq.com/icons/streamline-mini-line

Гайды

Раздачи

Кейсы

Блоги

Вакансии

Новости

Каналы

Дизайн молодых / Young Design

Designdealer

Шрифтовики и сочувствующие 2.0 | TypeType

Координата

type.today

Союз архитекторов России

Design Twist

X разрывается от новостей про Google Stitch (пост)

Дизайнер, привет

🕶 Почему интерфейс для умных очков нельзя просто взять с телефона

СПбГУПТД | NEWS

Журналус лайт

🇬🇧 How to Design for Transparent Screens

Retro Figma

Distribute Layers — плагин распределяет выбранные слои влево, вправо, вверх или вниз по указанному смещению пикселя

Дизайнер, привет

🎓 Стажер потратил месяц на исследование, нашел 2 респондентов из 250 опрошенных и забыл включить запись разговора

DSGNERS!

Это нормально

Саша из Анкóры. Дальше дизайна

Первые новости начала весны 🔥

Перасперадастра

второй проект по обучению в @perasperagram

Дизайнер, привет

🍎 Apple в 1992: «Плохие иконки отвлекают и раздражают». Apple в 2025: добавила именно такие иконки везде

Design Twist

Баланс между соло и командной работой

Retro Figma

Плагин «vga dithercore.exe» by 𝕵𝕮𝕹 А этот плагин использует пиксельные узоры и цветовые схемы 80-90-х годов, для создания эффекта старой компьютерной графики

Дизайнер, привет

🔔 Вы рисовали колокольчик, а вам говорят, что это нос

Паратайп

🐶 Шрифтовые динозавры рекомендуют

ЦЁХ.ДИЗАЙН

И восстали видео из пепла ядерного мыла

весточка: новости дизайна

Кем вы видите себя через 5 лет?

Щёлочь

SHOLOTCH POSTER GAMES '25 — WEEK 6 x ОШД

Шрифтовая студия Bolditalic

Blavatsky

type.today

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

Профессия Дизайнер

Free Icon Set — иконки с открытым исходным кодом, основанные на сетке 14 пикселей.