Привет, Хабр! Я – Михаил Суворов, ведущий дизайнер коммуникаций в X5 Tech. В статье я ставлю эксперименты над ИИ, пока у них нет возможности “дать сдачи” человеку. Если серьёзно, то проверим гипотезу, может ли нейросеть, генерирующая изображения, иметь собственный “авторский стиль”.
Дизайн
Дизайн спасёт мир
Интерактивные и документированные диаграммы для сложных систем
Мой первый on-call выдался нелегким. Недели тренингов и обучения не подготовили меня к тому что придется бегать по Slack каналам различных команд и искать того, кто может что либо знать о какой-то из частей системы. Оказалось что многие страницы в корпоративной Wiki уже не обновлялись несколько лет. Команды хранили свою документацию кто где хотел: кто в Wiki, кто в Google Docs, кто в GitHub и т.д. Наш on-call был не идеален: 2 человека выходили на дежурство 24/7. Один был ответственен за всю инфраструктуру (MySql, Cassandra, Kafka, ElasticSearch, Nomad и т.д.), второй же был Developer on-call и отвечал за все микросервисы и различные легаси системы, что в сумме давало около 300 различных сервисов от 7 команд на самых различных стеках и фреймворках (Java, Scala, Node, Go). Но что меня больше всего раздражало - так это невозможность быстро оценить на высшем уровне как проходит и обрабатывается запрос от пользователя. Диаграммы для разных бизнес частей точно также были либо устаревшими, либо без прилегающей документации, либо для какой-то бизнес логики не было ничего. И вот тогда мне пришла идея, что было бы неплохо иметь диаграммы, в которых можно не только нажать на любой элемент и добыть о нем более детальную информацию, но также получить ссылки на другие диаграммы и динамически их подгружать. Мне хотелось иметь возможность быстро разобраться в неизвестной распределенной системе, не переключаясь между диаграммой и документацией в Google Docs или Wiki. Именно так я начал работать над проектом Schem.io.
Предупреждение: в статье содержится большое количество GIF-изображений.
Как обойтись без UX-редактора и сделать текст в интерфейсе понятным?
В процессе разработки продукта или фичи неизбежно возникает необходимость работы с текстом. Если в команде есть UX‑редактор, то именно ему поручается этот этап. Он играет роль дополнительного «мозга» для создания удобного и бесшовного флоу. Кроме того, UX‑редактор обладает высокой продуктовой насмотренностью — через его руки проходит множество макетов, что позволяет ему выявлять потенциальные риски, последствия и пересечения с другими продуктами в компании и на рынке.
Но бывает и такое, что в команде нет UX‑редактора и работу с текстом приходится брать в свои руки. Для таких случаев я решил поделиться своими принципами при работе с текстом, которые помогут вам самостоятельно проверять текст на качество
Line height в Android TextView: где не сходится с Figma, как мешает pixel-perfect, и как это решить
В крупных проектах уделяется большое внимание деталям: дизайнеры, аналитики и продуктовые менеджеры продумывают все до мелочей, чтобы максимально улучшить пользовательский опыт. В дизайне такой важной деталью становится pixel-perfect-вёрстка. Разработчики реализуют тонкости дизайна, но иногда происходит расхождение платформенного рендеринга Android TextView и Figma Text.
Эволюция главного экрана: хаос, исследования и редизайн
Всем привет! Меня зовут Анна Бугрий, я старший продуктовый дизайнер и работаю в сфере шесть лет. Последние два года создаю совершенный опыт и дизайн для пользователей СберМаркета. Команда, в которой я работаю, отвечает за главный экран приложения и навигацию на всех платформах.
В этой статье я расскажу, как мы решились полностью переделать главный экран, какие исследования для этого потребовались и как мы проходили этот сложный путь.
Впихнуть невпихуемое: как в НИЦ «Технологии» разрабатывали корпуса для IP-камер
Максим Тулов в своем обзоре удивился нашим "самодельным" корпусам и спросил почему бы не воспользоваться готовым китайским решением. IP-камера довольно типовой продукт, и подходящих решений на любой площадке — хоть отбавляй. Так зачем изобретать велосипед?
О причинах, а также о том как по пути изобрести пару велосипедов с треугольными колесами и пойдет сегодня речь.
Инклюзивность и цифровая доступность в дизайне: почему это важно для всех
Всем привет! Меня зовут Юля Алёхина, я дизайнер в AGIMA. В этой статье поговорим об инклюзивном дизайне, о том, почему он касается не только людей с инвалидностью и как правильно аргументировать важность доступности в общении с заказчиком. Еще расскажу, как наш дизайн-отдел учился работать с доступностью, о наших новых целях и планах на будущее.
История «Dark Mode»: как «баг» стал «фичей»
«Темная тема», «темный режим», «ночной режим», «дарк мод» — опция, которая сейчас есть практически в каждой операционной системе, приложении, браузере, сайте. Она окрашивает фоновые элементы графического интерфейса в темный цвет, а текст — в белый.
Многие текстовые редакторы и интегрированные среды разработки (IDE) предлагают темную тему по умолчанию. Например, популярный в веб-разработке (и не только) Sublime Text.
Нельзя сказать точно, когда именно появился термин «темный режим», однако за последние несколько десятков лет темный вариант графического интерфейса превратился в набирающую обороты функцию в самых популярных приложениях, сайтах и операционных системах.
Тем не менее отображение информации белым по темному существует очень давно — еще до появления технологии ЭЛТ, на смену которой впоследствии пришли ЖК и OLED.
Как сделать универсальный компонент List Cell в Figma
Я покажу свой способ сборки компонента List Cell, объясню, почему считаю его гибким, а также приложу ссылку на Figma. Я решил рассказать об этом потому, что не нашёл подходящих материалов, как собрать свой List Cell.
Интерфейсы для производств — это не сайты штамповать
Стоит только коснуться производственной специфики, как стандартные подходы разваливаются на куски — даже если у вас уже есть огромная дизайн-система на основе популярной методологии Material Design. Я — Аня Труфанова, делаю дизайн для MES (manufacturing execution system). Нам пришлось взять дизайн-систему и наполнить ее уникальными фичами и кастомными компонентами, адаптированными под нестандартные условия. Сейчас я поделюсь, что именно мы переосмыслили и какие фичи добавили.
Как складывался «анимешный» стиль в играх (и не только) и какую роль во всём этом сыграл Такабатакэ Касё
Большеглазые тонкие красавицы и изящные, андрогинного вида юноши уже стали маркером аниме-индустрии, особенно сегмента, рассчитанного на девушек («сёдзё»). В Японии эти образы имеют вполне конкретные названия — «бисёдзё» для прекрасных дев, и «бисёнен» — для хрупких красивых юношей.
Как дизайнеру найти работу?
Большинство дизайнеров (81%) работают по найму. Их средняя зарплата, по оценкам «Тинькофф Журнала», составляет 120 тысяч рублей. При этом начинающие сотрудники получают 50–60 тысяч независимо от направления и сферы деятельности компании. Только 21% специалистов довольны местом работы и не планируют его менять.
Меня зовут Аня, я Lead дизайнер в WIM.Agency. В этой статье я расскажу, как найти работу, не ошибиться с выбором компании и почему важно постоянно повышать квалификацию.
6 прекрасных и 6 упоротых идей в промышленном дизайне: чем был интересен прошлый год
Как сделать самодвижущиеся шахматы, работающие с помощью ИИ, как очистить пляж с помощью простой картонки или как сделать простое «аналоговое» устройство для напоминания о приеме таблеток? А если подойти к делу абсурдно: как сделать подушку безопасности для мотоциклистов, вмонтировав ее в джинсы? Или как сделать вертикальную камеру для сна в офисе. Это и многое другое в дайджесте независимых дизайн-проектов, которые я собирал целый год.
Я пишу про промышленный дизайн более 8 лет. Каждый год я подвожу некоторые итоги на Хабре (спасибо компании Timeweb за то, что они меня терпят). Вот результаты прошлого года: подборка отличных проектов и подборка "как минимум странных". В этом году я решил не делить номинантов, а пустить все единым текстом. Проходите, будет интересно :)
Ближайшие события
Основы литья под давлением: проектирование литых деталей
Дисклеймер: это достаточно вольный перевод статьи с protolabs.com, в который мы добавили немного отсебятины. Но не просто так, а для лучшего понимания, потому что соотношение терминов «там» и «здесь» — отдельный адский котелок. Заметите что-то не то (или у вас так не говорят), без стеснения отпишитесь в комментариях, исправим вместе.
Почему навигация в Google, Booking и Spotify именно такая, и какую лучше выбрать вам
При работе над паттерном навигации моя команда выяснила интересный факт — мало материалов для дизайнеров. Я провела своё исследование: поговорила с разработчиками, проанализировала множество приложений и заглянула в гайдлайны.
В статье покажу три самых популярных вида навигации, которые есть на рынке на начало 2024 года. Я выкладывала этот материал на английском языке и собрала 25 тысяч просмотров. Теперь делюсь ей с русскоязычным комьюнити.
Вы узнаете:
• какие основные виды навигации существуют,
• как логически работает навигация,
• некоторые особенности и различия платформенных решений (iOS vs Android).
Расскажу, почему найти что-то в приложении бывает так трудно. Вы сходу будете отличать, где хорошая навигация, а где продуктовая команда недоработала.
Как заменить фотостоки на нейронки в коммерческих проектах: личный опыт и промпты
Зачем нужны фотостоки, если нейросети готовы производить бесконечное количество нужных вам изображений? Расскажу, как мы получили несколько несколько сотен фотореалистичных изображений людей и пакет иконок для коммерческого сайта с помощью нейронок, потратив ~50 часов дизайнеров и $60 на Pro Plan Midjourney.
Плюс, конечно, наша насмотренность и опыт, которым я сейчас поделюсь с вами!
Шаг за шагом: как добиться синхронности в дизайн-команде за 9 месяцев
Привет, меня зовут Артём Говердовский, и я дизайн-директор в Сбер Домклик. В моëм подчинении 49 дизайнеров, среди которых 6 лидов. Хочу рассказать, как у нас получилось переформатировать дизайн-отдел, распределить зоны ответственности, настроить процессы, справиться с легаси и полностью синхронизироваться по всем проектам за 9 месяцев работы.
Интерфейс под один палец. Концепция ONE TOUCH
Сталкивались ли вы с проблемой, когда вам не хватает рук при использовании телефона? Например, у вас одна рука занята пакетами или испачкана в чипсах, а до кнопки "назад" не дотянуться.
Точка касания, или Как выстроить коммуникацию между командами внутри компании
Работа в крупных компаниях — это не только ДМС и корпоративный мерч. Это большой поток информации, связанный и не очень с дизайном.
Чтобы приступить к проекту, нужно раскопать документацию, пообщаться с командой, поисследовать гипотезы. В корпорациях проект может длиться несколько месяцев и даже лет. Документация устаревает, носители знаний выходят из команд...
Помимо информации вам нужен большой инструментарий: Figma, Framer, Miro, а ещё дизайн-система.
Я лид дизайн-системы. В статье расскажу, как мы наладили диалог с дизайнерами в 100 продуктовых командах. Читайте, если вы уже заняты в продукте, или хотите работать в корпорации и не знаете, чего ждать. Также будет интересно всем, кто хоть раз пытался собрать комьюнити или встречу более чем на три участника.
Дизайн-разбор ссылок в вёрстке
Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее.
Начнём со ссылок, которые обозначаются в HTML тегом <a></a>
.
Вклад авторов
Mordatyj 2995.0alizar 1893.4ivansychev 1338.8anti1869 1104.0anatoly_rr 977.0Adrior 953.0limmm 703.0baragol 579.2podust 537.0denissidak 510.0