Эта история прежде всего для родителей первоклашек, которые летом должны много прочитать. Программирования тоже немного будет, но главное — хотелось просто поделиться инструментом, надеюсь, полезным.
Первоклашке за лето нам нужно прочитать 39 произведений. Объём довольно приличный, поэтому подумалось, что нужно применить планирование, мониторинг и прочие технологии управления.
Привет, Хабр!
Я в течение нескольких лет рассказываю вам, как сделать интерфейс лучше для пользователя. Например, в прошлом месяце я поделился простыми HTML и CSS лайфхаками, которые помогают сделать интерфейс дружелюбнее к пользователю.
А недавно я подумал: а вдруг есть фронтендеры, которые хотят сделать ужасный интерфейс? Ну не любят они пользователей. Или хотят сделать пакость работодателю, который их обидел. Где им взять советы?
Надо помочь! Я собрал вредные HTML и CSS техники. Они супер простые, но очень действенные. Я уверен на сто процентов, что благодаря им интерфейс вашего проекта заставит пользователя вспомнить несколько «ласковых» слов.
Давайте посмотрим, что я вам подготовил.
Одна из наиболее востребованных и горячих тем, связанных с дизайном — это, конечно же, трудоустройство, портфолио, собеседования и все, что связано с профессиональной реализацией. На Youtube такие видео набирают просмотры даже на небольших каналах.
За год изучения вопроса и погружения в тематику посмотрел большое количество текстов и видео. Если все эти материалы сжать в одну эмоцию, то это однозначно будет «страдание». Дизайнеры страдают… Недавно попалось видео в котором молодая дизайнерка рассказывала трагическую и поучительную историю своего трудоустройства, сравнимую по накалу страстей ни много ни мало с самим Гамлетом. Фабула: заказчики дураки, а я в белом пальто стою красивая. Ну, и конечно, не обошлось без советов космического масштаба и космической же глупости…
Высокая конкуренция — это всегда стресс, но это не значит, что действовать нужно наугад в надежде, что в итоге количество перейдет в качество… может не перейти. Про графический дизайн не берусь судить, но в дизайне интерфейсов, UX/UI главная задача — сделать удобно, понятно и эстетично. Ровно эти же требования предъявляются и к хорошему портфолио т. е. умелый UX/UI дизайнер вынужден подходить к своему портфолио «юиксово», но к сожалению так бывает далеко не всегда.
Я задумал написать серию небольших статей в жанре «что такое хорошо и что такое плохо» в отношении портфолио UX/UI дизайнера. Надеюсь, эти скромные труды хотя бы немного снизят градус страданий от отказов и игнора со стороны потенциальных работодателей.
Всем привет!
Меня зовут Катя Громова. Я работаю руководителем продуктового дизайна в Ozon Travel.
Сложно коротко рассказать о своём опыте — за что я только не отвечала в Travel. Мои основные обязанности — формирование единого визуала продукта и развитие продуктовой команды. Одним словом, делаю всё, чтобы пользователь возвращался к нам.
В этой статье я отвечу на следующие вопросы. Возможно ли вырасти от стажёра до руководителя в одной компании? Как сделать так, чтобы бизнес считался с дизайном? Что должен делать руководитель дизайн-команды? Или это всё простые истины, и вы уже заряжены на успех и готовы закрыть эту статью? Нет? Значит, пристегните ремни — и поехали!
В последние годы интерфейсы цифровых продуктов стали почти одинаковыми — похожие цвета, шрифты, компоненты и навигация. Это не случайность, а результат множества ограничений: от личных предпочтений дизайнеров до технологических трендов и ожиданий пользователей. В этой статье мы разберёмся, почему стандартизация так важна и даже полезна.
Меня зовут Артём Говердовский, я дизайн-директор Домклик Сбера. Год назад я выпустил статью «Шаг за шагом: как добиться синхронности в дизайн-команде за 9 месяцев», где описал структуру нашего отдела, ключевые направления работы и процессы, которые мы выстроили. С тех пор команда и доверие к нам только растут, а значит, пора двигаться дальше. Сейчас мы фокусируемся на стратегических задачах: прокачиваем не только дизайн, но и влияние на продукт в целом. В этой статье подведём итоги 2024 года, расскажем о новых целях и планах, а также о ключевых инициативах, которые мы запускаем. Среди них:
Стратегические задачи дизайна: как сделать вклад дизайна в бизнес измеримым и системным, внедряя delivery-driven подход и ускоряя циклы обновлений.
Влияние на продукт: через анализ метрик дизайн-системы и единый Look & Feel продукта во всех точках контакта с пользователем.
Эту статью можно считать прямым продолжением предыдущей — в ней я делюсь своим видением развития дизайн-команды и продукта, а также рассказываю, как мы ежегодно наращиваем темп, внедряя изменения в дизайн продукта на всех уровнях. Для полного понимания контекста советую сначала прочитать первую часть.
Мы команда проектировщиков интерфейсов Экзона, а Экзон — это продукт для цифровизации строительства.
В статье расскажем, как переработали навигацию и шапку в сложной системе для управления строительными проектами. Расскажем, как и почему обросли легаси дизайном и кодом. Что изменили, как подходили к проектированию и тестированию. Поговорим про факапы, про паттерны проектирования сложных продуктов и рассмотрим технические нюансы.
Статья будет вам полезной, если вы работаете с высоконагруженными продуктами или планируете редизайн крупной системы.
Привет, меня зовут Федоров Кирилл, я менеджер продукта компании Forecast NOW!. Мы делаем систему для прогнозирования спроса, автозаказа и управления запасами. В конце прошлого года мы выпустили новую версию с обновленным интерфейсом. В статье расскажу о том, почему решили менять интерфейс, как тестировали новые наработки и с какими сложностями столкнулись в процессе.
Привет, Хабр! Я Оксана Артемьева, UX/UI дизайнер. Недавно наткнулась в литературе на термин «эффект обманутого ожидания» — средство усиления выразительности текста, основанное на нарушении предположений, ожиданий и предчувствий читателя. Это то, что усиливает текст, делает его лучше, хотя сам термин звучит максимально негативно.
Я начала копать дальше и выяснила, что с эффектом обманутого ожидания мы регулярно сталкиваемся в психологической плоскости. Например, рассчитываем на что‑то одно, а потом видим реальность, и вот — наши ожидания не оправдались. Так случается, когда трейлер фильма или сериала обещает захватывающий сюжет и яркие сцены, а сам фильм оказывается скучным или неинтересным. Вы покупаете новый гаджет или одежду, основываясь на ярких рекламных материалах и отзывах, но получаете продукт низкого качества, это вызывает разочарование. И это уже что‑то негативное. А как насчет термина «эффект обманутого ожидания» в дизайне?
Негативный эффект обманутого ожидания в UX/UI дизайне
Как эффект обманутого дизайна представлен в дизайне? Я решила рассмотреть эффект с позитивной и негативной сторон для практических целей — чтобы понять, как избегать отрицательного воздействия и умножать положительное. Дизайн — эта та сфера, в которой психологические эффекты могут стать или троянским конём, или мощным инструментом, способствующим улучшению пользовательского опыта.
Предлагаю начать с негативной стороны эффекта и рассмотреть ситуации, в которых у пользователя появляется раздражение от невозможности достичь своей цели и возникают вопросы «А что дальше?», «Как получить ожидаемый результат?».
Дизайн-ревью —достаточно важная вещь, которая требует внимания, когда фронтенд-разработчик сверстал новую фичу, блок или целую страницу. Вовсе не для pixel perfect, который «как задизайнили, так и сверстали» — пиксель в пиксель. Pixel perfect в десктопе — это чушь, потому что нельзя сверстать так, чтобы с разных браузеров (привет, Safari) и разрешений всё смотрелось идеально. Но ошибки, которые сразу бросаются в глаза, сразу подмечаю, структурирую и обсуждаю это с разработчиком, может, появились какие-либо ограничения и прочее. Поэтому никогда не жалею время на дизайн-ревью и через DevTools сам проверяю то, что сверстал разработчик.
Все инструменты и функциональность, о которых пойдёт речь в этой статье, можно найти в браузере в «Инструментах разработчика» (клавиша F12 / Ctrl + Shift + I (на Windows) или ⌘ + ⌥ + I (на Mac), или клик правой кнопкой мыши в любом месте страницы -> Выбор пункта меню — «Просмотр кода страницы» (или «Исходный код страницы») — это и есть DevTools).
Основной элемент для работы с девтулзами — «Инспектор» (Ctrl + Shift +C на Windows и ⌥+⌘+I на MacOS) — это инструмент поиска элементов на странице браузера.
Привет. Я занимаюсь реализацией UI в нашей небольшой команде, разрабатывающей игры. Долгое время занимался 3D-моделированием, моушн-дизайном, UX/UI-дизайном, построением дизайн-систем. Позже жизнь привела меня в игровую индустрию, где я применил предыдущие навыки.
Команда разрабатывала гиперказуальные игры, и на момент моего присоединения к ней происходила перестройка — переход от гиперказуальных игр к хардкорным проектам. Тогда рассматривались два варианта новых проектов:
Компоненты Bootstrap удобны, но не всегда идеально вписываются в дизайн вашего проекта. Чтобы избежать хаоса и ручного редактирования каждого компонента, важно выстроить систему кастомизации.
В этой статье мы пошагово разбираем настройку компонента Alert через SCSS-переменные и структуру дизайн-системы. Вы увидите, как централизованно управлять стилями и при этом не потерять гибкость. Такой подход экономит время и облегчает жизнь команде разработчиков.
Работа в рамках "Известные неизвестные" помогает нащупать новые зоны роста, выстроить карту развития, понять, чего тебе действительно не хватает, чтобы сдвинуться с мёртвой точки в продуктовой задаче.
Ваши пользователи не боятся нового. Они боятся зря потраченного времени. Почему даже лучшие продукты терпят неудачу — и как сделать так, чтобы ваше обновление захотели попробовать?
Привет, Хабр! Меня зовут Дмитрий Переверза, я Frontend Team Lead в компании Just AI. В рамках платформенного стрима мы занимаемся разработкой и развитием платформы для создания своих чат‑ботов. Cделать хорошего и полезного бота временами бывает сложно, поэтому для помощи разработчикам мы создаем инструменты, которые помогают ускорить разработку и упростить работу с ботами. В этой статье я расскажу, как реализовать изолированный UI, грамотно организовать код на примере виджета чата, и какие проблемы могут возникнуть в процессе разработки.
Компания Saleae производит логические анализаторы и предоставляет программу Saleae Logic 2 для отображения, анализа и логгирования данных. Logic 2 поддерживает разнообразные интерфейсы и протоколы и их декодирование.
Для расширения функций анализатора в Logic 2 появилась возможность создания своих обработчиков и декодеров протоколов.
В представляемом материале рассматривается создание своего декодера - анализатора верхнего уровня (HLA).
Зачем?
Например, есть последовательность передаваемых по SPI байт. Стандартно, при правильной настройке, вы увидите значения этих байт. Но, может возникнуть вопрос интерпретации полученных данных.
Декодер может помочь в выводе данных в удобном виде и/или упростить анализ (reverse engineering) неизвестного протокола.
Таблица для цеха отличается от обычной таблицы. Очень сильно:
— «Модные» тонкие шрифты — сразу на свалку. Числа должны читаться даже в маске сварщика.
— Освещение в цехах адаптировано под специфику задач— почти всегда нужна ночная тема.
— Минимум цветов, новый цвет — только привлечь внимание к реально критичной вещи.
— Таблицы почти никогда не пролистывают, на них смотрят на больших экранах часами, поэтому они компактные и без отступов между ячейками, чтобы всё уместилось без скролла. При этом они не должны сливаться в кашу.
Есть ещё много принципов, когда вы начинаете делать интерфейс для цеха, и примерно половину нам подсказали сами же заводчане. Мы с командой детально изучали, как работают с таблицами их пользователи в производственных условиях, с какими проблемами они сталкиваются. Ходили в цеха, спрашивали на местах, как они это всё смотрят, что делают, что им удобно, что неудобно.
Cтандартные подходы не всегда решали эти задачи.
Не сказать, что разработка таблиц далась нам легко: были проблемы и спорные моменты, когда приходилось выкручиваться. Но нам удалось получить результат, который подходит нашему производству и удобен пользователям. Сейчас расскажу детали.
Почти три года назад мы выложили в опенсорс DivKit — наш BDUI‑фреймворк для отрисовки интерфейса приложения из ответа сервера. С его помощью вы можете описать элементы, состояния и анимации на бэкенде. Приложение получит это JSON‑описание и отобразит его.
Мы не перестаём развивать DivKit и за последние месяцы добавили несколько важных функций. О них расскажем в статье.
Не так давно мы успешно портировали проект CryptoTradingFramework на Avalonia UI с использованием библиотеки визуальных контролов EMX Controls. На примере клиентского приложения CryptoMarketClient мы хотели бы рассказать о возможностях библиотеки EMX Controls для разработки GUI для финансовых приложений.
Почему мозг любит деревья, а пользователи — простые интерфейсы
Фракталы — это не просто красивые узоры, а мощный инструмент в дизайне UX. Как природные паттерны помогают создавать гармоничные интерфейсы, улучшать навигацию и усиливать визуальное восприятие? В статье разбираем реальные примеры, принципы работы с фракталами и их влияние на пользовательский опыт.
Для дизайнеров, разработчиков и всех, кто хочет сделать интерфейсы естественными и удобными.
