От переводчика. Привет! Цель перевода этой статьи проста - провести четкие границы между обозначенными выше терминами. При проектировании новых сценариев для B2B CRM я столкнулся с тем, что каждый человек в команде понимал "макет" или "прототип" по-своему. Также выяснилось разное понимание, кто в команде за какие технологии прототипирования должен отвечать. Я провел исследование материалов по теме и хочу поделиться тем материалом, после которого для меня "все встало по полочкам".
В моем предыдущем посте Time Uniform For CSS Animation я рассказал о способе создания CSS-анимации с использованием тиков вместо ключевых кадров. Он был ограничен в применении, поскольку в CSS отсутствовала возможность выполнять сложные математические вычисления.
После долгих лет ожидания в CSS теперь поддерживается достаточное количество математических функций, в частности, mod(), round() и тригонометрические функции. Пришло время вернуться к анимации, основанной на времени, надеюсь, на этот раз она будет более полезной.
Расскажу про важнейший этап в процессе релиза, который отсутствует у многих продуктовых команд. Подсвечу, какие проблемы это решает. Дам рекомендации, как интегрировать этот этап в процесс. Поделюсь своим опытом и бонусом приложу пример шаблона оформления итогов дизайн-ревью.
Здесь могло бы быть долгое вступление про то, как современные веб-приложения прошли путь от простых макетов, ограниченных технологиями своего времени, до способных подстраиваться даже не под ограничения технологий, а под ограничения самих пользователей. Но сейчас важно совсем другое. Как ни крути, все пользователи разные, и иногда ограничения касаются их физических возможностей. Этими вопросами занимается адаптивный дизайн и, в частности, инклюзивный. Но обо всем по порядку.
Эта статья поверхностна, как водная гладь, по которой скачет камушек-блинчик. Каждый прыг — развилка на Пути дизайн-системы.
- Делать свою или взять готовую? Прыг.
- Платформенная или универсальная? Прыг.
- Версионировать компоненты или всю библиотеку? Прыг...
И ещё много таких «прыгов».
Давайте подготовимся к сложному контенту. Закроем глаза, успокоимся и представим идеальную дизайн-систему. Представили? Умные компоненты, продуманные паттерны, подробная документация. Автоматическая генерация кода. Кайф? А то! Только такая дизайн-система оставит нас без работы.
Сидит себе бизнес, кормит нейросетевой движок дизайн-системы джобс-ту-би-данами да си-джи-эмами и на выходе получает готовые экраны. Ни дизайнеров, ни фронтов нанимать не нужно.
В этой статье я чётко и структурировано показываю, как можно использовать концепции ТРИЗ в дизайне. А именно, что такое ТРИЗ, плюсы и минусы этой теории, как она помогает решить любую проблему, какие концепции ТРИЗ бывают и как их использовать в дизайне
Тост – это маленькое информационное окно, которое присутствует в большинстве приложений, сайтов для ПК и телефонов. Но когда начинаешь вспоминать в каких приложениях видел их в последний раз, на ум приходит разве что яндекс почта и какой-нибудь маркет плейс.
Всем привет! Я Дима Курамшин, директор по бизнес-процессам в AGIMA. Сегодня расскажу, как мы вместе с командой «Финам» придумали единый визуальный стиль для всех продуктов холдинга и создали UI Kit с набором готовых дизайн-решений. Как бесшовно интегрировать новый стиль в большой компании, зачем вообще нужна дизайн-система и как она может стать фундаментом для развития бизнеса — читайте в статье.
display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */display: grid;
justify-items: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */justify-content стало justify-items.
Меня зовут Алексей Афонин, я старший дизайнер продукта в Yandex Cloud. В прошлом году нам понадобилось полностью изменить внешний вид нашего сервиса для бизнес‑аналитики DataLens перед его выходом в опенсорс. Разработчики и дизайнеры интерфейсов часто сталкиваются с подобными задачами: есть уже работающий сервис, но его нужно стилизовать, например, в случае ребрендинга или при необходимости учесть специфический пользовательский опыт.
В наших продуктах мы пользуемся дизайн‑системой и библиотекой компонентов Gravity UI — это проект Yandex Cloud, который не так давно тоже вышел в опенсорс. В этой статье я поделюсь опытом, как мы решили задачу «перекрашивания DataLens» с её помощью. Но даже если вы не используете DataLens и ещё не знакомы с Gravity UI, наши наработки могут пригодиться командам разработчиков и дизайнеров, которые хотят стилизовать свои продукты быстрее и удобнее.
Привет, р0дные! Сегодня я хочу рассказать вам о том, как микроанимация и ховер-эффекты могут значительно улучшить пользовательский опыт на вашем веб-сайте или веб-приложении. Эти маленькие, но важные элементы интерфейса могут сделать взаимодействие пользователя с вашим продуктом более приятным, интуитивным и запоминающимся.
Инновационные способы взаимодействия с аудиторией стали неотъемлемой частью веб-дизайна в 2024 году. Интерфейсы онлайн-сервисов впечатляют и вдохновляют пользователя на конкретные действия и покупки. О том, как именно изменится ниша и какими навыками стоит овладеть, чтобы остаться востребованным специалистом, расскажу я, Даша Кропотова, дизайнер интерфейсов Kokoc Group.
Привет, родные! ?
Сегодня я хотел бы поделиться с вами интересной темой — анимацией в веб-интерфейсе. Многие из нас, возможно, никогда не задумывались о том, как анимация влияет на пользовательский опыт. Однако, она играет ключевую роль в создании уникального и привлекательного интерфейса, способного улучшить взаимодействие пользователей. Давайте вместе разберемся, что такое анимация в веб-дизайне и какие преимущества она может принести, особенно тем, кто только начинает свой путь в этой области или стоит перед выбором внедрения анимации в свой проект.
Что делать, если то самое классное изображение никак не удается найти, а у заказчика пока нет ресурса предоставить нужный контент? Что можно придумать для разделов каталога, когда есть только фото для продуктовых карточек, чтобы это выглядело красиво? Как при этом не забыть о метафорах и ассоциациях бренда и создать необходимое настроение на сайте? Да еще и чтобы заказчик все это согласовал без правок…
Задача маркера - комментирование скриншотов.
В интерфейсе должно быть как можно меньше кнопок.
Чем меньше кнопок, полей для ввода и меню, тем лучше. Все должно работать “как надо” сразу, без настройки.
Обзор недооцененных UI компонентов, которые могут значительно улучшить взаимодействие пользователя с продуктом.
В этой статье мы рассмотрим практические шаги и советы, которые помогут вам обновить ваш UI Kit, делая его не только более удобным и функциональным, но и вдохновляющим инструментом для создания великолепных пользовательских интерфейсов.
