Здесь могло бы быть долгое вступление про то, как современные веб-приложения прошли путь от простых макетов, ограниченных технологиями своего времени, до способных подстраиваться даже не под ограничения технологий, а под ограничения самих пользователей. Но сейчас важно совсем другое. Как ни крути, все пользователи разные, и иногда ограничения касаются их физических возможностей. Этими вопросами занимается адаптивный дизайн и, в частности, инклюзивный. Но обо всем по порядку.
Веб-дизайн *
Дизайн спасет мир
Новости
Автостопом по дизайн-системе. Путеводитель с оглавлением
Эта статья поверхностна, как водная гладь, по которой скачет камушек-блинчик. Каждый прыг — развилка на Пути дизайн-системы.
- Делать свою или взять готовую? Прыг.
- Платформенная или универсальная? Прыг.
- Версионировать компоненты или всю библиотеку? Прыг...
И ещё много таких «прыгов».
Давайте подготовимся к сложному контенту. Закроем глаза, успокоимся и представим идеальную дизайн-систему. Представили? Умные компоненты, продуманные паттерны, подробная документация. Автоматическая генерация кода. Кайф? А то! Только такая дизайн-система оставит нас без работы.
Сидит себе бизнес, кормит нейросетевой движок дизайн-системы джобс-ту-би-данами да си-джи-эмами и на выходе получает готовые экраны. Ни дизайнеров, ни фронтов нанимать не нужно.
Как быстро находить идеальные дизайн-решения в сложных задачах?
В этой статье я чётко и структурировано показываю, как можно использовать концепции ТРИЗ в дизайне. А именно, что такое ТРИЗ, плюсы и минусы этой теории, как она помогает решить любую проблему, какие концепции ТРИЗ бывают и как их использовать в дизайне
Тосты – всплывающие уведомления. Как создать идеальный тост
Тост – это маленькое информационное окно, которое присутствует в большинстве приложений, сайтов для ПК и телефонов. Но когда начинаешь вспоминать в каких приложениях видел их в последний раз, на ум приходит разве что яндекс почта и какой-нибудь маркет плейс.
Истории
Как случайно баллотироваться на пост президента Исландии?
Чтобы баллотироваться на должность президента Исландии, нужно быть гражданином этой страны в возрасте от 35 лет и собрать от 1 500 до 3 000 подписей избирателей.
Впервые в истории Исландии этот процесс сбора подписей стал цифровым. Теперь, избегая традиционной бумажной волокиты, кандидаты отправляют граждан на вот такой портал.
Это изменение также впервые за всю историю страны позволило обеспечить полную прозрачность относительно того, кто конкретно баллотируется на пост президента. Получилось очень много желающих — на сегодня подписи собирают 82 кандидата, включая комика, модель, мою тётю Хельгу и первого в мире человека, пережившего пересадку двух рук.
Многие из этих людей действительно конкурируют за пост президента (да, среди них моя тётя Хельга), некоторые явно подали заявку в качестве шутки (нет, не упомянутый выше комик), и не менее 11 из них зарегистрировались случайно, понятия не имея о том, что начали сбор подписей в поддержку своего выдвижения.
Как мы «подружили» цифровые продукты холдинга «Финам» с помощью дизайн-системы
Всем привет! Я Дима Курамшин, директор по бизнес-процессам в AGIMA. Сегодня расскажу, как мы вместе с командой «Финам» придумали единый визуальный стиль для всех продуктов холдинга и создали UI Kit с набором готовых дизайн-решений. Как бесшовно интегрировать новый стиль в большой компании, зачем вообще нужна дизайн-система и как она может стать фундаментом для развития бизнеса — читайте в статье.
Эволюция в мире UX: как мы создали паттерн проектирования и упростили прогулки пользователей по панели управления
Привет, Хабр! Меня зовут Витя, я проектировщик интерфейсов в Selectel. Так вышло, что мне поручили разработать интерфейс формы создания облачного сервера. Задача не из самых простых: конфигуратор достаточно функционален и гибок, но должен оставаться понятным.
Было сложно, но задачу я осилил. А после решил доработать ее и переложить наработанный опыт в паттерн, который смогут переиспользовать другие проектировщики. В этой статье расскажу, что из этого получилось и какие цели мы ставили перед собой при подготовке паттерна. Добро пожаловать под кат!
Сложнейшая проблема компьютерных наук: центрирование
Заявляю: «Мы, как цивилизация, разучились использовать центрирование». Ну то есть мы, конечно, знаем, как это делать — очень просто:
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: погружение, персонализация и инновации
Инновационные способы взаимодействия с аудиторией стали неотъемлемой частью веб-дизайна в 2024 году. Интерфейсы онлайн-сервисов впечатляют и вдохновляют пользователя на конкретные действия и покупки. О том, как именно изменится ниша и какими навыками стоит овладеть, чтобы остаться востребованным специалистом, расскажу я, Даша Кропотова, дизайнер интерфейсов Kokoc Group.
Анимация в веб-интерфейсе
Привет, родные! 😁
Сегодня я хотел бы поделиться с вами интересной темой — анимацией в веб-интерфейсе. Многие из нас, возможно, никогда не задумывались о том, как анимация влияет на пользовательский опыт. Однако, она играет ключевую роль в создании уникального и привлекательного интерфейса, способного улучшить взаимодействие пользователей. Давайте вместе разберемся, что такое анимация в веб-дизайне и какие преимущества она может принести, особенно тем, кто только начинает свой путь в этой области или стоит перед выбором внедрения анимации в свой проект.
Как мы применили нейросеть Stable Diffusion в создании контента для интернет-магазина
Что делать, если то самое классное изображение никак не удается найти, а у заказчика пока нет ресурса предоставить нужный контент? Что можно придумать для разделов каталога, когда есть только фото для продуктовых карточек, чтобы это выглядело красиво? Как при этом не забыть о метафорах и ассоциациях бренда и создать необходимое настроение на сайте? Да еще и чтобы заказчик все это согласовал без правок…
Ближайшие события
Смартфон для джаваскриптера-олдфага: стоит ли гику брать дешманские девайсы на KaiOS? Смотрим на Nobby 240 LTE
Друзья! Много ли платформ вы знаете, где для написания пользовательских приложений используется стек… веб-технологий, причём это единственный нативный способ писать программы? Услышав о HTML5 + CSS + JS, на ум приходит разве что webOS — которая используется в современных телевизорах от LG (а ранее использовалась ещё и в Palm Pre — уникальный смартфон, единственный в своём роде), а олды вспомнят ещё и про FireFox OS, в которой вся оболочка (включая многозадачность, шторку уведомлений и все приложения) также была реализована на JS. Но ни webOS, ни FFOS в своё время не суждено было стать массовыми ОС на смартфонах: сказывались аппаратные ограничения устройств, да и проблемы с портированием уже существующих приложений с других платформ (например, игр). Однако несколько лет назад, проект FireFox OS был форкнут и на свет появилась новая система, предназначенная для… умных кнопочных телефонов с LTE! И имя ей — KaiOS. Вероятно, многие мои читатели слышали о ней и о новых умных кнопочниках от Nokia. Но что из себя представляет система под капотом и чем она может быть интересна гику? Читайте в новом материале!
UI. Нюансы реализации маркера в редакторе блок-схем DGRM.net
Задача маркера - комментирование скриншотов.
В интерфейсе должно быть как можно меньше кнопок.
Чем меньше кнопок, полей для ввода и меню, тем лучше. Все должно работать “как надо” сразу, без настройки.
Скрытые сокровища интерфейсного дизайна: 10 не популяризованных UI элементов, способных улучшить взаимодействие
Обзор недооцененных UI компонентов, которые могут значительно улучшить взаимодействие пользователя с продуктом.
Как UX/UI дизайнеру улучшить UI Kit: 10 конкретных советов
В этой статье мы рассмотрим практические шаги и советы, которые помогут вам обновить ваш UI Kit, делая его не только более удобным и функциональным, но и вдохновляющим инструментом для создания великолепных пользовательских интерфейсов.
«Верните всё как было», или Как большие корпорации делают редизайн
На сайт Альфа-Банка заходят миллионы посетителей. Кто-то оформит карту или кредит сразу, кто-то пойдёт сравнивать предложения на сайты других банков. Дизайн продаёт продукт и доносит ценность пользователю. Но как визуально выделиться, если за несколько лет дизайн раскопировали конкуренты?
В конце 2022 года мы взялись за редизайн. Получилось ли у нас, а главное — как вам подстелить соломку уже на старте проекта, расскажу в статье. Будет интересно не только дизайнерам, но и продактам, UX-исследователям и всем, кто собирал правки дизайна в десятки итераций.
На светлом-светлом Хабре появилась тёмная-тёмная тема
Привет, Хабр! Мы приготовили для вас долгожданный подарок (из заголовка вы уже поняли, какой), но мы вам его просто так, как говорится, не отдадим 😃
4.04 — день, когда можно найти потерянное
Поздравляем вас с днем 4.04! Сегодня не только красивая дата, но и день интернета по версии Папы Римского. Отличный повод поговорить о роли страницы с ошибкой 404 и полюбоваться на лучшие образцы креативности. Под катом — немного истории и много картинок: смешных, красивых и интерактивных.