Все потоки
Поиск
Написать публикацию
Обновить

Дизайн

Сначала показывать
Порог рейтинга
Уровень сложности

Виджеты в Figma без знаний кода: мой путь от вопроса до решения

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров1.3K

Создание виджетов в Figma — задача нетривиальная, особенно если ты не разработчик...

Привет, Хабр! Меня зовут Султан, я продуктовый дизайнер в PIX Robotics, где работаю над продуктом PIX Процессы.

Недавно, листая ТГ-канал друга, я наткнулся на интересный виджет в Figma. В голове сразу промелькнула мысль: «Вау, а как это вообще сделать? Это же крутая штука, и она точно нужна моей команде!»— и меня затянуло в воронку изучения темы.

Я попробовал несколько способов, чтобы создать виджет, который будет полезен моей команде, и сегодня поделюсь своим опытом. Спойлер: выбрал вариант, в котором для 800 строк кода мне понадобилось несколько дней. Конечно, без ИИ не обошлось.

Читать далее

Liquid Glass и цикличность в UI-дизайне

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров7K

Когда я смотрел эстетичные Frutiger Aero картинки, либо эстетичные UI-концепты со стекломорфизмом в Пинтересте, я не думал, что оно снова станет реальностью, а останется приятной ностальгией..

Читать далее

Какой подход для вёрстки карточек товара выбрать

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров3.6K

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

Читать далее

От идеи до реализации: опыт внедрения Web 3D и AR в проект «Гараж ЦОДД»

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров709

Привет, меня зовут Глеб Любавский, и я руковожу отделом web‑дизайна Инновационного центра «Безопасный транспорт». Сегодня хочу рассказать, как мы впервые столкнулись с web 3D и AR, создали и продвинули несколько интересных проектов совместно с ЦОДД. Путь был не самым простым, но мы остались довольны результатом и зарядились энергией для того, чтобы работать над новыми амбициозными задачами и стать лучше, быстрее, сильнее!

Очень захотелось рассказать обо всем в деталях, поэтому я решил разделить статью на две части. Сегодня о том, как зародилась идея, как мы искали решение и как мы его реализовывали.

Читать далее

Цель есть. Смысла — нет

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров8.5K

Рефлексия дизайнера о целеполагании в российских IT-компаниях

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

Читать далее

Сделай удобно: подборка UI/UX-кейсов из цифровых и нецифровых продуктов (#16)

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров2.1K

Продолжаю изучать различные UI/UX/CX кейсы в мобильных приложениях, веб-сайтах и в реальном мире. Дизайнерам и менеджерам по продукту, чтобы вдохновиться и добавить в заметки.

Под катом: Сбер и другие банки РФ, Vivid, Slack.

Читать далее

Не лайком единым, или как получить от пользователей максимальный feedback?

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров551

Несомненно, появление концепции лайка открыло новую страницу в механизме feedback. Не только для крупных компаний, но и для мелких девчушек, которые гоняются за лайками от своих сверстников. Однако, в какой‑то момент времени, лайки стали тормозить развитие механизмов получения того самого feedback. Зачем что‑то выдумывать новое, если уже есть лайк, понятный даже макаке‑резус и регулярно повсеместно используемый? Концепция лайков противоречит количественной социологии? Да ну ее на фиг, эту социологию! Одним лайком сложно получить качественный feedback? Зато лайк это уже традиция — так еще наши прадеды делали, деды, отцы делали, и мы делать будем, и наши дети и правнуки, ну Вы поняли. В данной статье не только делается попытка поиска следующего за лайком механизма feedback. Но и приводится вместе с исходным кодом действующий компонент на React TypeScript. Если кому интересна тема поиска новых механизмов feedback, добро пожаловать под кат!

Читать далее

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

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров1.3K

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

В этой статье я решил показать на реальных примерах, как микровзаимодействия влияют на восприятие бренда.

Читать далее

Горизонты развития продуктового дизайнера: взлеты, плато и новые пути

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров549

Застрял(а) между макетами и расплывчатым фидбеком вроде «что-то не то»? В этой статье — почему это нормально, как выглядит кривая развития дизайнера, чем полезен T-shaped подход и что помогает выйти за рамки интерфейсов, чтобы по-настоящему влиять на продукт.

Читать далее

Порядок в Figma: секреты дизайнеров t2

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров4.6K

Всем привет! Меня зовут Аля, и уже больше года я являюсь частью дизайн-команды t2.digital и работаю над интерфейсами мобильного приложения t2.

Когда я только пришла в компанию, первое, что бросилось в глаза, — как неудобно были организованы макеты в Figma. Рабочее пространство больше напоминало шкаф подростка, где вперемешку лежали чистая одежда и грязные носки, по классике у половины из них не было пары. Было трудно отыскать нужные экраны для задач и ещё сложнее определить их актуальность. В такие моменты важно говорить уверенно: да, было.

Поэтому, вооружившись поддержкой тим-лида и стукнув крепким женским кулаком по столу, я приняла решение заняться «уборкой». Совместными с командой усилиями мы прописали правила работы с макетами, которые были удобны сразу всем дизайнерам и не требовали в моменте больших трудозатрат. Всё-таки цель была облегчить работу, а не усложнить!

На протяжении последних шести месяцев мы проверяли жизнеспособность этих правил. Спойлер: они отлично себя показали! Все макеты теперь структурированы и консистентно оформлены, значительно сократилось время на поиск нужных экранов.

Итак, давайте по порядку, что это за правила.

Читать далее

Изучай и властвуй: как с помощью одного UX-исследователя, этнографии и тестов мы разработали систему управления складами

Время на прочтение7 мин
Количество просмотров2.2K

Привет! Меня зовут Саша – я ведущий исследователь пользовательского опыта в операционных продуктах ecom.tech. На наших технологиях работают Самокат и Мегамаркет. В этой статье расскажу, как я оказалась на огромных складах и как мои исследования помогли разработать собственную систему управления склада. Внутри вас ждёт этнография, много тестирования и живые фото. Поехали!

Читать далее

Редизайн Яндекс Карт: почему мы перекрасили дороги

Уровень сложностиПростой
Время на прочтение16 мин
Количество просмотров87K

Не выразить словами, как волнительно и, чего уж там, страшно презентовать редизайн Яндекс Карт!

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

Угодить всем тяжело, так что отслеживание и пропуск через себя «болей» тех, кому наши изменения поломали привычки или просто пришлись не по вкусу, — не самая приятная, но важная часть нашей работы. Однако страх и желание любой ценой никого не обидеть способны парализовать, и порой надо быть смелым, чтобы внести изменения, необходимость которых уже назрела.

Сегодня мы обновили внешний вид Яндекс Карт. Одно из главных изменений затронуло отображение дорог: они обзавелись детальной разметкой и сменили привычный жёлтый цвет на серый — как в реальной жизни. Хочу рассказать о процессе поиска дизайн‑решений и раскрыть, почему были сделаны эти и другие изменения, а их в редизайне довольно много.

Читать далее

Секреты изнанки музыкальных инструментов

Время на прочтение4 мин
Количество просмотров7.8K

Привет, Хабр! Как думаете, что на этом фото? Нет, это не современная урбанистика или галлюцинации нейросетей. Это фотография... концертного органа изнутри. Предлагаем отвлечься от архитектуры ПО, инфраструктур, нейронок и погрузиться в архитектуру музыкальных инструментов.

Читать далее

Ближайшие события

Три горьких правды о моей профессии

Время на прочтение3 мин
Количество просмотров2.8K

Я уже двадцать лет проектирую интерфейсы. Делаю интерактивные прототипы, готовлю проектную документацию, вот это всё. Получается, я сочетаю в себе компетенции системного аналитика, UX-дизайнера и ещё всякого по мелочи.

Итак.

Правда №1: я не знаю объективного способа подтвердить, что с проектированием продукты делаются быстрее и дешевле, чем без него.

То есть, для меня это очевидно. Это логично и рационально. Но не проверить.

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

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

Правда №2: никто не читает…

Читать далее

UX/UI портфолио. Часть 2: «Ковристость» или ничего не понятно, но очень интересно

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров1.8K

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

За год изучения вопроса и погружения в тематику посмотрел большое количество текстов и видео. Если все эти материалы сжать в одну эмоцию, то это однозначно будет «страдание». Дизайнеры страдают… Недавно попалось видео в котором молодая дизайнерка рассказывала трагическую и поучительную историю своего трудоустройства, сравнимую по накалу страстей ни много ни мало с самим Гамлетом. Фабула: заказчики дураки, а я в белом пальто стою красивая. Ну, и конечно, не обошлось без советов космического масштаба и космической же глупости…

Высокая конкуренция — это всегда стресс, но это не значит, что действовать нужно наугад в надежде, что в итоге количество перейдет в качество… может не перейти. Про графический дизайн не берусь судить, но в дизайне интерфейсов, UX/UI главная задача — сделать удобно, понятно и эстетично. Ровно эти же требования предъявляются и к хорошему портфолио т. е. умелый UX/UI дизайнер вынужден подходить к своему портфолио «юиксово», но к сожалению так бывает далеко не всегда.

Я задумал написать серию небольших статей в жанре «что такое хорошо и что такое плохо» в отношении портфолио UX/UI дизайнера. Надеюсь, эти скромные труды хотя бы немного снизят градус страданий от отказов и игнора со стороны потенциальных работодателей.

Читать далее

Хроники фрустрации продуктового дизайнера

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров699

— А тебе нормально, что твои продукты не релизятся?

Я честно зависла. Не потому что не знала ответа, а потому что не поняла вопрос. Нормально… в смысле — как? Физиологически? Психологически? Или по корпоративной этике?

Этот вопрос задал мне тимлид просто между делом, с лёгкой интонацией делового удивления.
Как будто есть два типа дизайнеров: тех, у кого всё релизится, и тех, кто просто любит красивые фигмы «для галочки».

Я тогда промолчала. Но внутренне отметила: вот она, формула фрустрации. Не в том, что проект не выжил. А в том, что кто-то спрашивает — а зачем ты вообще все это наделала?

Читать далее

Сделай удобно: подборка UI/UX-кейсов из цифровых и нецифровых продуктов (#15)

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров2.4K

Продолжаю изучать различные UI/UX/CX кейсы в мобильных приложениях, веб-сайтах и в реальном мире. Дизайнерам и менеджерам по продукту, чтобы вдохновиться и добавить в заметки.

Под катом: Wise, Sporify, Intsagram, Wolt.

Читать далее

Тестовое на стажировку в Т-Банк

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров3.8K

Недавно подавала заявку на стажировку в Т‑Банк по направлению «Продуктовый дизайн». Задание — придумать интерфейс, который поможет новичку быстрее освоиться в первые дни работы. Не нужно было делать что‑то громоздкое, но важно, чтобы решение можно было при желании расширить. Хочу поделиться своей работой, которая привела меня к двум интервью с командами Т‑Банка.

Читать далее

Создание вращающейся ручки на основе Input Range

Время на прочтение4 мин
Количество просмотров1.3K

Рад приветствовать тебя,%username%. В этой статье я поделюсь тем, как создать вращающуюся ручку (в зарубежной литературе именуемой Knob). Далее по тексту я её буду называть «кноб». Перейдём к сути вопроса.

Что меня сподвигло на написание данной статьи, или как я докатился до жизни такой

Когда‑то давно, будучи ещё совсем зелёным и несмышлёным кодером, мне взбрело в голову сделать своё приложение. Моих знаний хватало на какой‑нибудь «Hello, World!», но кое‑что выдать я мог. И на тоот момент мне позарез нужно было реализовать кноб — тот самый круглый регулятор, который можно крутить и он будет менять значения. И как любой уважающий себя программист, я сразу же полез гуглить стековерфлоу и прочее непотребство, дабы найти тот самый рецепт хлеба сладкого ответ на вопрос, который так долго меня волновал. Однако перешерстив весь интернет, ничего путёвого я не нашёл. Расстроившись, я забил на эту идею. Но какие‑то угольки веры в то, что у меня получится это сделать, тлели в моей охолодевшей к этому миру душонке. И вот на днях, когда я начал работать над своим проектом (небольшая программка, если она найдёт отклик в народных массах, то и по ней напишу парочку руководств, но пока что спустимся на землю), мне опять ударила моча в голову с этими кнобами. Тем более, что все предпосылки ведут именно к этому. Они нужны в интерфейсе. Забравшись в православный яндекс и одновременно в бездуховный гугл, я опять наткнулся на мель отсутствия нужной мне информации. Были только решения с какими‑то библиотеками и интересными историями на jQuery. Плюнув на всё и засучив рукава, я вдруг осознал, что этот мир нуждается в моём компетентном и всем так очень нужном мнении (спойлер: нет). Тогда я принялся за gehirnsturm и молниеносно придумал пару решений. Первое заключалось в SVG на основе path, но оно показалось мне чересчур геморройным. Там много JS надо написать, но не надо никаких стилей зато. И вот второе решение отчасти продолжает идею первого, но с некоторыми отличиями: оно немножко проще в том плане, что начальное, конечное и текущее значение, а также шаг уже вмонтированы в него, что существенно сокращало труды мои праведные. Но, как гласит закон сохранения энергии, энергия не приходит и не уходит, она лишь изменяется. Поправьте, если не так. А это значит, что если где‑то стало проще, то где‑то стало сложнее.

Читать далее

Дизайн в эпоху однообразия: рамки, ограничения и чувства

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров1.7K

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

Читать далее