Как стать автором
Поиск
Написать публикацию
Обновить
100.44

Веб-дизайн *

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

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

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

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

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

Читать

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

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

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

Читать далее

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

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

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

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

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

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

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

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

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

DON'T PANIC!

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

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

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

Читать →

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

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

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

Читать далее

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

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

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

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

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

Многие из этих людей действительно конкурируют за пост президента (да, среди них моя тётя Хельга), некоторые явно подали заявку в качестве шутки (нет, не упомянутый выше комик), и не менее 11 из них зарегистрировались случайно, понятия не имея о том, что начали сбор подписей в поддержку своего выдвижения.
Читать дальше →

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

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

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

Читать далее

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

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

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

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

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

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

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

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

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

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

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

Также не спрашивайте, почему выражение justify-content стало justify-items.
Читать дальше →

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

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

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

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

Читать далее

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

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

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

Читать далее

Как мы применили нейросеть Stable Diffusion в создании контента для интернет-магазина

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

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

Читать далее

Смартфон для джаваскриптера-олдфага: стоит ли гику брать дешманские девайсы на KaiOS? Смотрим на Nobby 240 LTE

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

Друзья! Много ли платформ вы знаете, где для написания пользовательских приложений используется стек… веб-технологий, причём это единственный нативный способ писать программы? Услышав о HTML5 + CSS + JS, на ум приходит разве что webOS — которая используется в современных телевизорах от LG (а ранее использовалась ещё и в Palm Pre — уникальный смартфон, единственный в своём роде), а олды вспомнят ещё и про FireFox OS, в которой вся оболочка (включая многозадачность, шторку уведомлений и все приложения) также была реализована на JS. Но ни webOS, ни FFOS в своё время не суждено было стать массовыми ОС на смартфонах: сказывались аппаратные ограничения устройств, да и проблемы с портированием уже существующих приложений с других платформ (например, игр). Однако несколько лет назад, проект FireFox OS был форкнут и на свет появилась новая система, предназначенная для… умных кнопочных телефонов с LTE! И имя ей — KaiOS. Вероятно, многие мои читатели слышали о ней и о новых умных кнопочниках от Nokia. Но что из себя представляет система под капотом и чем она может быть интересна гику? Читайте в новом материале!
Читать дальше →

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

UI. Нюансы реализации маркера в редакторе блок-схем DGRM.net

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

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

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

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

Читать далее

Скрытые сокровища интерфейсного дизайна: 10 не популяризованных UI элементов, способных улучшить взаимодействие

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

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

Читать далее

Как UX/UI дизайнеру улучшить UI Kit: 10 конкретных советов

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

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

Читать далее

«Верните всё как было», или Как большие корпорации делают редизайн

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

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

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

Читать далее

На светлом-светлом Хабре появилась тёмная-тёмная тема

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

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

Читать далее

4.04 — день, когда можно найти потерянное

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

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

Читать далее

Разработка сайта на Тильде на примере реального проекта — подход и разбор решений по UX и UI

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

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

Читать далее

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