Тултип | UX UI

Прокачай свои тексты | Vol. 2

За красивой картинкой стоят строгие правила и невидимый каркас, который называется редакционной политикой. Сегодня будем разбираться, как топовые компании создают свои текстовые каноны, которые превращают простой контент в узнаваемый бренд. В этом нам поможет подборка редполитик российских гигантов (и не очень)

Т-Банк
Свежак, ребята дропнули её сегодня

Райффайзен
Красиво сделано. Радует, что все примеры проиллюстрированы

Сбер
Всего 1 страница. Краткость — сестра таланта

Госуслуги
Для тех, кому мало 1 страницы ребята из Госуслуг подготовили целый трактат

Модульбанк
Подготовлено Людмилой Сарычевой, что уже о многом говорит. Есть чек лист для проверки текста и парочка полезных ссылок

Лайфхакер
Редакторы журнала рассказывают, как написать статью, которую будут читать


🔙 Читать первую часть

#тексты
#материалы

💬 Тултип

Тестовое задание из Вкусвилла

Нашел на просторах телеграмма тестовое задания из Вкусвилла конца 2023 года. Ну да, не самый свежак, зато основано на реальном кейсе, так что всё настоящее — описание задачи, отзывы респондентов и гипотеза. Думаю, интересно в свободное время будет поломать голову

📱 Смотреть в Figma

#материалы
#тестовое

💬 Тултип

Давай, кабанчиком, обрисуй ситуацию

#мем

💬 Тултип

Мобильные анимации | Vol. 3

Сегодня только минимализм:
круговой таймер с ретро вайбом, анимация меню чатбота и флоу выбора активности в приложении для отслеживания трезвости

🔙Предыдущая подборка
Следующая подборка 🔜

#референсы
#анимации

💬 Тултип

Генерируем 3D модель онлайн

Существует уже много тулов, которые пытаются дать возможность создавать 3D модели по фото, но у большинства из них качество результата говно оставляет желать лучшего. Недавно на Hugginface наткнулся на новую демку Hunyuan3D-2, которая преследует эту же цель и решил попробовать. Результат на видео. Если вкратце, по картинке и текстовому промту получилось создать вполне приличную 3D модель, которую я успешно импортировал в Spline и накинул на нее материал. Со сложным объектами справляется хуже — хотел сгенирить лошадь и она получилась с явными артефактами (видно в начале видео). Но простые вещи делает вроде неплохо, можно юзать

Кстати, для тех, кто не знаком с Hugging Face — это огромное сообщество, где разработчики и исследователи делятся своими моделями ИИ, датасетами и приложениями. Главная фишка — это возможность протестировать многие модели прямо в браузере.То есть, если вы хотите попробовать сгенерировать фотку, убрать или добавить что-то в уже готовое изображение — просто заходите и пробуете, без установки чего-либо.

Нужно будет зарегаться, чтобы получить определенное количество дневных кредитов, которых хватает примерно на 10 генераций. Для тех, кто только знакомится с платформой или использует её для небольших проектов — это вполне достаточно. Каждые 24 часа ваши кредиты автоматически обновляются. Проснулся с утра, заварил кофейку — и снова можно творить

Попробовать тут 🔜

Посмотреть другие демки 🔜


#инструменты
#3D

💬 Тултип

«...рекомендуем поизучать крупные дизайн-системы и гайдлайны, чтобы понять, как правильно работают компоненты...»

Вспоминаю тестовое задание от Самоката. Одна из задач была улучшить дизайн мобильного приложения для менеджера даркстора. Я проанализировал возможные несостыковки и нарисовал свое удобное и правильное решение. Фидбек был таким: «...рекомендуем поизучать крупные дизайн-системы и гайдлайны, чтобы понять, как правильно работают компоненты...».
Мой дезигн с точки зрения логики был неплохим, но были допущены ошибки: title в navbar был расположен неправильно, шеврон для раскрытия шторки повернут не в ту сторону и тому подобное. Осознание этих ошибок пришло уже впоследствии, когда я изучил необходимые фундаментальные вещи, типа гайдов от Apple (Human Interface Guidelines) и Android (Material Design). Благодаря этому опыту, сейчас я могу точно сказать, что во время проектирования своих первых работ необходимо изучить гайдлайны.

Что мы узнаем из гайдлайнов:
Компоненты и их названия: если не понятно, что такое Floating Button или в каких 3 позициях может быть Bottom sheet, то точно стоит начать прямо сейчас

Механика компонентов: их состояния, реакции на жесты, анимация

Навигация в приложениях: в каких случаях нужен нижний тапбар, а в каких нет; как работает поиск

Принципы инклюзивного дизайна: рекомендуемый минимальный размер шрифта, цветовая контрастность, что такое скринридер и как он работает

Различия подходов Apple и Android в дизайне: полезно знать, хотя сейчас дизайн приложений часто становится более единообразным

Правила и антипаттерны: в Material Design детально описано, как нужно и как не нужно проектировать, с аргументацией на основе исследований

Эти знания повысят квалификацию и ценность как специалиста. Ниже ссылки на оригинальные ресуры на английском и на переведенный материал (спасибо @chim_mammedova )

Human Interface Guidelines 🍎(En)

Material Design 3 🤖(En)

Human Interface Guidelines 🍎(Ru)

Material Design 2 🤖(Ru)


#материалы
#дизайн_системы

💬 Тултип

Прокачай свои ИИ | Crea

Сегодня расскажу про Crea. Это одна из самых продвинутых нейросеток для генерации изображений и всего с этим связанного. Под капотом у нее Flux (продукт бывших разрабов Stable Diffusion), так что, по сути, это такая красивая оболочка с приятным интерфейсом для тех, кто не хочет запариваться изучением всех азов генерации через вышеупомянутый сервис.

Что нам доступно бесплатно?
Во-первых, можно генерить изображения с использованием референсов для стиля и для самого изображения. Во-вторых, получившуюся генерацию можно редактировать: удалять и добавлять элементы, менять фон и тому подобное. В-третьих, получившуюся конфетку можно про проапскейлить. На этом этапе нейронка добавит детализации и улучшит общее качество изображения. Самое главное — есть ежедневные бесплатные кредиты, которых хватит, чтобы поиграться и что-то да нагенерить этакого. Я, например, попробовал сделать Гарри Поттера в стиле Киберпанка (1 видео) и затем проапскейлил изображение (2 видео). Если не брать во внимание, что у Гарри не видно шрам, да и сам он смахивает на азиатскую версию, то результатом я остался доволен.

А что, если заплатить?
Если понравился инструмент, то можно взять платную версию и тогда нам становится доступно еще больше кредитов для генерации, а также генерации видеороликов, анимаций.

Самое вкусное
Самая главная киллер фича сервиса это Real time generation (3 видео). В этом случае рабочая область делится на левую и правую часть. Мы пишем промт, чтобы задать общую тональность генерации. Далее в левую часть закидываем фото, генерации или рисунки, которые нейросеть воспроизводит в правой части. Это помогает расположить элементы на изображении именно так, как мы этого хотим, а не как задумала машина. Недавно завезли возможность конвертации изображения в 3d модель, с помощью которой можно не только выставлять позиционирование в сцене, но и угол поворота (4 видео)

Начать играться ➡️


#инструменты
#ии

💬 Тултип

Мобильные анимации | Vol. 2

Сегодня в программе:
функциональный морфинг при раскрытии карточки товара;
Riveo в онбординге возрождает из могилы эффект замерзшего стекла;
залипательный онбординг у Revolut, который практически можно назвать короткометражкой

🔙 Предыдущая подборка
Следующая подборка 🔜

#референсы
#анимации

💬 Тултип

Прокачай свои исследования | Vol. 2

В прошлый раз я делился полезными материалами про AB тесты. Сегодня же в программе статьи, которые расскажут про то, какие есть виды карт пользовательского опыта, зачем они нужны и как подходить к их построению. На фотке CJM, который я делал для Авито в рамках тестового

Customer Journey Map — часть 1 (vpn)
Илона Саркисова, Lead designer VK, о том, что что такое CJM и почему ее часто применяют неправильно.

Customer Journey Map — часть 2 (vpn)
Опять же Илона, про то, как применять CJM для нового сервиса, у которого еще не сформирован «путь покупателя»

Customer Journey Map — часть 3 (vpn)
Заключительная часть трилогии, в которой Илона рассуждает о том, какая нужна карта, если ваш пользователь не является покупателем и какие есть альтернативы CJM (Blueprint, User Experience/Journey* Map, User Stories Map, Empathy Map)

Customer Journey Map. Марина Короткевич
Марина Короткевич, Senior Experience Designer в EPAM, расскажет в этом видео:
Цели и задачи этапов построения;
Когда строить и как использовать CJM;
Какие есть различия офлайн и онлайн карт.
Также мы послушаем о User Personas, иерархии метрик и рассмотрим реальную карту сервиса «Делимобиль».


Service Blueprint на помощь в создании классного клиентского опыта
Эксперты Usability Lab и Данила Максишко, лидер исследований в hh.ru обсуждают:
• что такое Service Blueprint,
• как проектировать клиентский опыт таким, чтобы он нравился,
• как выявлять проблемы на пользовательских сценариях и их причины, лежащие во внутренних бизнес-процессах.

🔙Предыдущий пост
Следующий пост 🔜

#материалы
#тексты

💬 Тултип

Геймифицируй это | Ю-Кай Чоу

Ю Кай Чоу — это один из первопроходцев в области геймификации. Консультировал Майкрософт, Убер, Ибэй и тому подобных, а также разработал целую систему Octalysis — октагон из 8 ключевых драйверов геймификации. Что же входит в этот ваш Октализ? Вот, что нас больше всего драйвит по мнению Чоу:
Эпическое значение и призвание (Epic Meaning & Calling)
Развитие и достижения (Development & Accomplishment)
Раскрытие креативности и обратная связь (Empowerment of Creativity & Feedback)
Владение и контроль (Ownership & Possession)
Социальное влияние и связь (Social Influence & Relatedness)
Непредсказуемость и любопытство (Unpredictability & Curiosity)
Уклонение от потерь (Loss & Avoidance)
Дефицит и нетерпение (Scarcity & Impatience)

Чоу показывает, как эти драйверы можно использовать в бизнесе для увеличения продаж, повышения лояльности клиентов и мотивации сотрудников. Еще рассказывает про белую и черную мотивацию, приводит примеры геймификации в разных сервисах и, конечно же, рассказывает про себя любимого. Задумался он, кстати, о геймификации, когда начал продавать на Ebay всякие вещи на аукционах.

В общем, основной посыл книги в том, что геймификация — это не только сделать ачивки и бейджики, а, в первую очередь, подумать о том, какая миссия нашей компании, кто наш юзер и чем можно его заинтересовать, а дальше уже выстраивать сам процесс.

Советую прочитать для того, чтобы понять, что же включает в себя понятие, которое мы слышим из каждого утюга. На фото действие Октализа на примере Facebook, Linkedinn и Revolut

#книги

💬 Тултип