Веб-дизайн *

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

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

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

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

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

Что делать, если то самое классное изображение никак не удается найти, а у заказчика пока нет ресурса предоставить нужный контент? Что можно придумать для разделов каталога, когда есть только фото для продуктовых карточек, чтобы это выглядело красиво? Как при этом не забыть о метафорах и ассоциациях бренда и создать необходимое настроение на сайте? Да еще и чтобы заказчик все это согласовал без правок…

Редактор схем DGRM.net

Задача маркера - комментирование скриншотов.

В интерфейсе должно быть как можно меньше кнопок.
Чем меньше кнопок, полей для ввода и меню, тем лучше. Все должно работать “как надо” сразу, без настройки.

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

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

На сайт Альфа-Банка заходят миллионы посетителей. Кто-то оформит карту или кредит сразу, кто-то пойдёт сравнивать предложения на сайты других банков. Дизайн продаёт продукт и доносит ценность пользователю. Но как визуально выделиться, если за несколько лет дизайн раскопировали конкуренты?

В конце 2022 года мы взялись за редизайн. Получилось ли у нас, а главное — как вам подстелить соломку уже на старте проекта, расскажу в статье. Будет интересно не только дизайнерам, но и продактам, UX-исследователям и всем, кто собирал правки дизайна в десятки итераций.

Привет, Хабр! Мы приготовили для вас долгожданный подарок (из заголовка вы уже поняли, какой), но мы вам его просто так, как говорится, не отдадим ?

Поздравляем вас с днем 4.04! Сегодня не только красивая дата, но и день интернета по версии Папы Римского. Отличный повод поговорить о роли страницы с ошибкой 404 и полюбоваться на лучшие образцы креативности. Под катом — немного истории и много картинок: смешных, красивых и интерактивных.

Привет! Сегодня хочу поделиться опытом разработки многостраничного сайта и на конкретном примере рассказать, как действую, чем руководствуюсь и на что обращаю внимание с самого начала. Погнали.

Сегодня трудно найти веб сайт, на котором нету хотя бы одного изображения, может быть у вас есть такой пример? На странице в интернете можно сразу увидеть много разных изображений: фото пользователя в личном кабинете, фото товара на маркетплейсе, иконка на вкладке браузера, иконка корзины на кнопке «добавить в корзину», анимированное изображение‑открытка от бабушки в мессенджере, [и еще тысяча примеров].

Если вы как‑то связаны с вебом то вам будет полезно иметь общее представление об этих images, как минимум, и уметь с ними работать как максимум. Давайте попробуем разобраться с этим вопросом?

Всем привет! В этой статье я хотел бы поделиться своими мыслями о том, почему виртуального DOM можно избежать при создании реактивности сегодня. Я работаю со всем этим уже около полутора лет, создавая фреймворк Cample.js, и у меня есть некоторые соображения по этому поводу.

Всем привет! Меня зовут Юля Алёхина, я дизайнер в AGIMA. В этой статье поговорим об инклюзивном дизайне, о том, почему он касается не только людей с инвалидностью и как правильно аргументировать важность доступности в общении с заказчиком. Еще расскажу, как наш дизайн-отдел учился работать с доступностью, о наших новых целях и планах на будущее.

Большинство дизайнеров (81%) работают по найму. Их средняя зарплата, по оценкам «Тинькофф Журнала», составляет 120 тысяч рублей. При этом начинающие сотрудники получают 50–60 тысяч независимо от направления и сферы деятельности компании. Только 21% специалистов довольны местом работы и не планируют его менять.

Меня зовут Аня, я Lead дизайнер в WIM.Agency. В этой статье я расскажу, как найти работу, не ошибиться с выбором компании и почему важно постоянно повышать квалификацию.

Зачем нужны фотостоки, если нейросети готовы производить бесконечное количество нужных вам изображений? Расскажу, как мы получили несколько несколько сотен фотореалистичных изображений людей и пакет иконок для коммерческого сайта с помощью нейронок, потратив ~50 часов дизайнеров и $60 на Pro Plan Midjourney.

Плюс, конечно, наша насмотренность и опыт, которым я сейчас поделюсь с вами!

Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее.

Начнём со ссылок, которые обозначаются в HTML тегом <a></a>.

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

В этой статье я объясню основы CSS, управляющие внешним видом веб-страниц при печати, и дам пару советов, которые могут вам помочь в этом.