Как стать автором
Обновить
40.06

Веб-дизайн *

Дизайн спасет мир

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

Летающий Санта и танцующие снегири: опыт реализации и оптимизации CSS-анимации

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

Привет! На связи Кристина, фронтенд-разработчик в KTS.

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

Рассказываю, как создавала CSS-анимации для игры из внутреннего спецпроекта, какие SCSS-фичи использовала для оптимизации кода и как сделала CSS-анимации более производительными.

Читать далее
Всего голосов 30: ↑30 и ↓0+31
Комментарии4

Новости

Непроизвольная тирания пользовательских интерфейсов

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

Посыл этой статьи заключается в том, что одержимость лёгкими, «интуитивными» и, возможно, даже эффективными пользовательскими интерфейсами формирует слой мягкой тирании. Такой слой я бы создал, будучи диктатором, стремящимся усладить общественность в подготовке к лишению её свобод в будущем. Я бы так сильно привязал людей к нелепым ограничениям при использовании разных вещей, что подобное издевательство стало бы нормой.
Читать дальше →
Всего голосов 72: ↑65 и ↓7+80
Комментарии110

Дитер Рамс: дизайнер, определивший современность

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

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

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

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

Тема оказалась под моим критическим взглядом не случайно. Как начиналась карьера немецкого дизайнера? Что могло вдохновить человека создать такие бескомпромиссные и в то же время человекоцентричные продукты? Как визионерство немецкого дизайнера оказывает влияние на нашу жизнь десятки лет спустя? На эти темы мне хотелось бы порассуждать.

Читать далее
Всего голосов 7: ↑7 и ↓0+9
Комментарии5

Законы UX-дизайна: что делает пользователей счастливее, а продукт лучше

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

Всем привет! Меня зовут Антон, и я аналитик Mad Brains. Сегодня расскажу о законах человеческой психологии и восприятии, помня о которых можно создать действительно хороший UX‑дизайн. Погнали.

Читать далее
Всего голосов 1: ↑1 и ↓0+1
Комментарии5

Истории

Как дизайнеру и разработчику понимать друг друга

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

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

Читать далее
Всего голосов 7: ↑6 и ↓1+6
Комментарии5

Что делать если отключат Figma? Есть ли альтернативы?

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

Существуют ли альтернативы Figma? Обзор основных конкурентов. Есть ли те, которые способны потеснить дизайн-гегемона с первого места?

Читать далее
Всего голосов 16: ↑16 и ↓0+18
Комментарии23

Wireframe vs. mockup vs. prototype: в чем разница?

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

От переводчика. Привет! Цель перевода этой статьи проста - провести четкие границы между обозначенными выше терминами. При проектировании новых сценариев для B2B CRM я столкнулся с тем, что каждый человек в команде понимал "макет" или "прототип" по-своему. Также выяснилось разное понимание, кто в команде за какие технологии прототипирования должен отвечать. Я провел исследование материалов по теме и хочу поделиться тем материалом, после которого для меня "все встало по полочкам".

Читать далее
Всего голосов 3: ↑3 и ↓0+5
Комментарии0

Анимации CSS, основанные на времени

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

Демонстрация анимаций

В моем предыдущем посте Time Uniform For CSS Animation я рассказал о способе создания CSS-анимации с использованием тиков вместо ключевых кадров. Он был ограничен в применении, поскольку в CSS отсутствовала возможность выполнять сложные математические вычисления.

После долгих лет ожидания в CSS теперь поддерживается достаточное количество математических функций, в частности, mod(), round() и тригонометрические функции. Пришло время вернуться к анимации, основанной на времени, надеюсь, на этот раз она будет более полезной.

Читать далее
Всего голосов 15: ↑15 и ↓0+16
Комментарии0

Про важность дизайн-ревью в продуктовом процессе

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

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

Читать
Всего голосов 2: ↑1 и ↓1+2
Комментарии0

Тенденции адаптивного и инклюзивного дизайна: доступность для всех пользователей

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

Здесь могло бы быть долгое вступление про то, как современные веб-приложения прошли путь от простых макетов, ограниченных технологиями своего времени, до способных подстраиваться даже не под ограничения технологий, а под ограничения самих пользователей. Но сейчас важно совсем другое. Как ни крути, все пользователи разные, и иногда ограничения касаются их физических возможностей. Этими вопросами занимается адаптивный дизайн и, в частности, инклюзивный. Но обо всем по порядку.

Читать далее
Всего голосов 7: ↑6 и ↓1+7
Комментарии0

Автостопом по дизайн-системе. Путеводитель с оглавлением

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

Эта статья поверхностна, как водная гладь, по которой скачет камушек-блинчик. Каждый прыг — развилка на Пути дизайн-системы.

- Делать свою или взять готовую? Прыг.

- Платформенная или универсальная? Прыг.

- Версионировать компоненты или всю библиотеку? Прыг...

И ещё много таких «прыгов».

Давайте подготовимся к сложному контенту. Закроем глаза, успокоимся и представим идеальную дизайн-систему. Представили? Умные компоненты, продуманные паттерны, подробная документация. Автоматическая генерация кода. Кайф? А то! Только такая дизайн-система оставит нас без работы.

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

DON'T PANIC!
Всего голосов 108: ↑106 и ↓2+111
Комментарии26

Как быстро находить идеальные дизайн-решения в сложных задачах?

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

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

Читать →
Всего голосов 8: ↑4 и ↓4+2
Комментарии2

Тосты – всплывающие уведомления. Как создать идеальный тост

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

Тост – это маленькое информационное окно, которое присутствует в большинстве приложений, сайтов для ПК и телефонов. Но когда начинаешь вспоминать в каких приложениях видел их в последний раз, на ум приходит разве что яндекс почта и какой-нибудь маркет плейс.

Читать далее
Всего голосов 6: ↑5 и ↓1+4
Комментарии7

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

Конференция HR API 2024
Дата14 – 15 июня
Время10:00 – 18:00
Место
Санкт-ПетербургОнлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область

Как случайно баллотироваться на пост президента Исландии?

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

Чтобы баллотироваться на должность президента Исландии, нужно быть гражданином этой страны в возрасте от 35 лет и собрать от 1 500 до 3 000 подписей избирателей.

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

Это изменение также впервые за всю историю страны позволило обеспечить полную прозрачность относительно того, кто конкретно баллотируется на пост президента. Получилось очень много желающих — на сегодня подписи собирают 82 кандидата, включая комика, модель, мою тётю Хельгу и первого в мире человека, пережившего пересадку двух рук.

Многие из этих людей действительно конкурируют за пост президента (да, среди них моя тётя Хельга), некоторые явно подали заявку в качестве шутки (нет, не упомянутый выше комик), и не менее 11 из них зарегистрировались случайно, понятия не имея о том, что начали сбор подписей в поддержку своего выдвижения.
Читать дальше →
Всего голосов 68: ↑65 и ↓3+83
Комментарии49

Как мы «подружили» цифровые продукты холдинга «Финам» с помощью дизайн-системы

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

Всем привет! Я Дима Курамшин, директор по бизнес-процессам в AGIMA. Сегодня расскажу, как мы вместе с командой «Финам» придумали единый визуальный стиль для всех продуктов холдинга и создали UI Kit с набором готовых дизайн-решений. Как бесшовно интегрировать новый стиль в большой компании, зачем вообще нужна дизайн-система и как она может стать фундаментом для развития бизнеса — читайте в статье.

Читать далее
Всего голосов 9: ↑8 и ↓1+7
Комментарии0

Эволюция в мире UX: как мы создали паттерн проектирования и упростили прогулки пользователей по панели управления

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

Привет, Хабр! Меня зовут Витя, я проектировщик интерфейсов в Selectel. Так вышло, что мне поручили разработать интерфейс формы создания облачного сервера. Задача не из самых простых: конфигуратор достаточно функционален и гибок, но должен оставаться понятным.

Было сложно, но задачу я осилил. А после решил доработать ее и переложить наработанный опыт в паттерн, который смогут переиспользовать другие проектировщики. В этой статье расскажу, что из этого получилось и какие цели мы ставили перед собой при подготовке паттерна. Добро пожаловать под кат!
Читать дальше →
Всего голосов 43: ↑43 и ↓0+53
Комментарии4

Сложнейшая проблема компьютерных наук: центрирование

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

Заявляю: «Мы, как цивилизация, разучились использовать центрирование». Ну то есть мы, конечно, знаем, как это делать — очень просто:

display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

Не спрашивайте, почему вам нужно запомнить четыре слова вместо просто горизонтальное/вертикальное; всё равно лучше, чем было до этого.

Ещё можно использовать сетку:

display: grid;
justify-items: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

Также не спрашивайте, почему выражение justify-content стало justify-items.
Читать дальше →
Всего голосов 194: ↑189 и ↓5+227
Комментарии56

Изменить цвета и кнопки сервиса — и не сломать дизайн-систему

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

Меня зовут Алексей Афонин, я старший дизайнер продукта в Yandex Cloud. В прошлом году нам понадобилось полностью изменить внешний вид нашего сервиса для бизнес‑аналитики DataLens перед его выходом в опенсорс. Разработчики и дизайнеры интерфейсов часто сталкиваются с подобными задачами: есть уже работающий сервис, но его нужно стилизовать, например, в случае ребрендинга или при необходимости учесть специфический пользовательский опыт.

В наших продуктах мы пользуемся дизайн‑системой и библиотекой компонентов Gravity UI — это проект Yandex Cloud, который не так давно тоже вышел в опенсорс. В этой статье я поделюсь опытом, как мы решили задачу «перекрашивания DataLens» с её помощью. Но даже если вы не используете DataLens и ещё не знакомы с Gravity UI, наши наработки могут пригодиться командам разработчиков и дизайнеров, которые хотят стилизовать свои продукты быстрее и удобнее.

Читать далее
Всего голосов 12: ↑12 и ↓0+13
Комментарии10

Микроанимация и ховер-эффекты в интерфейсе: как улучшить пользовательский опыт

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

Привет, р0дные! Сегодня я хочу рассказать вам о том, как микроанимация и ховер-эффекты могут значительно улучшить пользовательский опыт на вашем веб-сайте или веб-приложении. Эти маленькие, но важные элементы интерфейса могут сделать взаимодействие пользователя с вашим продуктом более приятным, интуитивным и запоминающимся.

Читать далее
Всего голосов 15: ↑7 и ↓8+1
Комментарии16

Тренды веб-дизайна 2024: погружение, персонализация и инновации

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

Инновационные способы взаимодействия с аудиторией стали неотъемлемой частью веб-дизайна в 2024 году. Интерфейсы онлайн-сервисов впечатляют и вдохновляют пользователя на конкретные действия и покупки. О том, как именно изменится ниша и какими навыками стоит овладеть, чтобы остаться востребованным специалистом, расскажу я, Даша Кропотова, дизайнер интерфейсов Kokoc Group.

Читать далее
Всего голосов 12: ↑9 и ↓3+10
Комментарии3
1
23 ...

Вклад авторов

Работа

Веб дизайнер
27 вакансий