Привет! На связи Кристина, фронтенд-разработчик в KTS.
Большое количество графики и анимаций потребляет достаточно много ресурсов. Однако благодаря оптимизации можно сделать так, чтобы всё работало без глюков и тормозов.
Рассказываю, как создавала CSS-анимации для игры из внутреннего спецпроекта, какие SCSS-фичи использовала для оптимизации кода и как сделала CSS-анимации более производительными.
Мы живём в мире, где дизайн тихо, но уверенно влияет на каждый аспект нашей жизни. Уверен, вы сталкиваетесь с этим ежедневно. Дизайн везде: от лопаты, лежащей в вашей кладовке, до интерфейса любого приложения на телефоне. Меня до сих пор удивляет мысль о том, что дизайн определяет не только то, как что-то выглядит, но и как это работает, как мы это используем и как это влияет на нашу повседневность. Да, дизайн решает задачи, но ещё он создаёт связь между нами и миром вокруг.
Огромное влияние на индустрию дизайна, наш мир и наше ежедневное взаимодействие со всем вокруг оказал немецкий дизайнер Дитер Рамс. Для опытных дизайнеров имя Рамса давно стало синонимом иконического дизайна и принципов, которые легли в основу современной эстетики продуктов. Но цель данного материала — не повторение давно известных фактов для знатоков, а освещение его наследия для тех, кто может быть не знаком с его работой и значением его подходов для мира современного дизайна.
В этой статье я хочу рассмотреть, как именно принципы Рамса влияют на текущее состояние дизайна, как они помогают формировать пользовательский опыт и проникают в экологическую этнику компаний. Возможно, вы уже замечали, как принципы минимализма и функциональности воплощаются в современных гаджетах, продуктах и интерьерах. Всё это во многом заслуга Рамса. Дитер всегда искал гармонию между визуальной эстетикой и функциональностью, которая способна не просто решать проблемы, но и приносить радость использования вещей.
Тема оказалась под моим критическим взглядом не случайно. Как начиналась карьера немецкого дизайнера? Что могло вдохновить человека создать такие бескомпромиссные и в то же время человекоцентричные продукты? Как визионерство немецкого дизайнера оказывает влияние на нашу жизнь десятки лет спустя? На эти темы мне хотелось бы порассуждать.
Всем привет! Меня зовут Антон, и я аналитик Mad Brains. Сегодня расскажу о законах человеческой психологии и восприятии, помня о которых можно создать действительно хороший UX‑дизайн. Погнали.
Порой разработчик просто делает дизайн, который ему дают. Молча. Он не то чтобы глупый и подневольный специалист, но время, которое разработчику выделяют на оценку задачи, не всегда позволяет всмотреться в мелочи. Поэтому особенно важно, чтобы дизайнер владел азами вёрстки сайта.
Существуют ли альтернативы Figma? Обзор основных конкурентов. Есть ли те, которые способны потеснить дизайн-гегемона с первого места?
От переводчика. Привет! Цель перевода этой статьи проста - провести четкие границы между обозначенными выше терминами. При проектировании новых сценариев для 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дные! Сегодня я хочу рассказать вам о том, как микроанимация и ховер-эффекты могут значительно улучшить пользовательский опыт на вашем веб-сайте или веб-приложении. Эти маленькие, но важные элементы интерфейса могут сделать взаимодействие пользователя с вашим продуктом более приятным, интуитивным и запоминающимся.