[Перевод] Практическое руководство по иконкам в веб-проектах — Часть 1

Сегодня почти каждый веб-проект использует иконки. Это отличный инструмент визуальной коммуникации, который помогает акцентировать внимание на элементах интерфейса. Существует хорошая статья о том, почему стоит использовать иконки — "Icons in Web Design". Но эта статья отвечает на другой вопрос — как их использовать ?

https://habr.com/ru/articles/919516/

#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss

Психологический дизайн в брендинге: как микровзаимодействия формируют восприятие

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

https://habr.com/ru/articles/915852/

#микровзаимодействия #дизайн #дизайнсистема

Горизонты развития продуктового дизайнера: взлеты, плато и новые пути

Застрял между макетами и расплывчатым фидбеком вроде «что-то не то»? В этой статье — почему это нормально, как выглядит кривая развития дизайнера, чем полезен T-shaped подход и что помогает выйти за рамки интерфейсов, чтобы по-настоящему влиять на продукт.

https://habr.com/ru/articles/914592/

#дизайн #дизайн_интерфейсов #дизайн_сайтов #дизайнеры #дизайнсистема #продукт_менеджмент #продуктивная_работа #продуктивная_деятельность #интерфейсы #интерфейсы_и_юзабилити

Дизайн за 5 минут. Дайджест мая

Привет, Хабр! Это Андрей, продуктовый дизайнер Погнали

https://habr.com/ru/companies/garage8/articles/914066/

#config #Microsoft #Material_Design #дизайнсистема #google #редизайн #Codex #openai

[Перевод] Как использовать любой CSS-фреймворк в вашем проекте. Часть 5

Компоненты Bootstrap удобны, но не всегда соответствуют нужному дизайну. Чтобы избежать несогласованности и ручного редактирования в каждом проекте, важно выстроить чёткую систему кастомизации. В этой статье рассматривается пошаговая настройка компонента Alert — с использованием SCSS-переменных и структуры дизайн-системы.

https://habr.com/ru/articles/910972/

#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss

Нейминг без боли: архитектура токенов в дизайн-системах через библиотечную структуру

Привет, Хабр. Я Илья Сластен, продуктовый дизайнер интерактивной карты ПГК Диджитал. Ранее в своих статьях я рассказывал о ключевых аспектах работы с локальными переменными в Figma и подход Atomic Design и о минимализме в дизайне . Сегодня поговорим о нейминге. Когда создаешь дизайн-систему, кажется, что главное — создать компоненты, настроить сетки, собрать библиотеку в Figma. Но на деле одна из самых сложных частей — это разобраться с токенами: как их называть, как их организовать, и как всё это выстроить так, чтобы было удобно и дизайнерам, и разработчикам. Без этого система быстро превращается в кашу. В этой статье я покажу, как на практике организовать токены и Figma-библиотеки так, чтобы масштабирование не превращалось в хаос. Мы разберём уровни абстракции токенов, способы нейминга, таксономию и подход к построению библиотек на 4-х уровнях:

https://habr.com/ru/companies/pgk/articles/912192/

#дизайнсистема #токены #uxui #uxui_design #uxui_дизайн #figma #figma_design

Как мы делали таблицы для производственных интерфейсов

Таблица для цеха отличается от обычной таблицы. Очень сильно: — «Модные» тонкие шрифты — сразу на свалку. Числа должны читаться даже в маске сварщика. — Освещение в цехах адаптировано под специфику задач— почти всегда нужна ночная тема. — Минимум цветов, новый цвет — только привлечь внимание к реально критичной вещи. — Таблицы почти никогда не пролистывают, на них смотрят на больших экранах часами, поэтому они компактные и без отступов между ячейками, чтобы всё уместилось без скролла. При этом они не должны сливаться в кашу. Есть ещё много принципов, когда вы начинаете делать интерфейс для цеха, и примерно половину нам подсказали сами же заводчане. Мы с командой детально изучали, как работают с таблицами их пользователи в производственных условиях, с какими проблемами они сталкиваются. Ходили в цеха, спрашивали на местах, как они это всё смотрят, что делают, что им удобно, что неудобно. Cтандартные подходы не всегда решали эти задачи. Не сказать, что разработка таблиц далась нам легко: были проблемы и спорные моменты, когда приходилось выкручиваться. Но нам удалось получить результат, который подходит нашему производству и удобен пользователям. Сейчас расскажу детали.

https://habr.com/ru/companies/nlmk/articles/890878/

#дизайнсистема #дизайн_интерфейсов #таблицы

[Перевод] Как использовать любой CSS-фреймворк в вашем проекте. Часть 4

В четвертой части мы рассматриваем процесс кастомизации кнопки Primary в Bootstrap с точки зрения построения дизайн-системы. Пошагово описаны уровни кастомизации, а также способы внесения изменений через переменные и стили для сохранения чистой архитектуры.

https://habr.com/ru/articles/901474/

#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss

[Перевод] Как использовать любой CSS-фреймворк в вашем проекте. Часть 3

Цвета — одна из самых важных частей любой дизайн-системы — и также одна из самых сложных. Если с ними обращаться неправильно, это приведёт к путанице и несогласованности в дальнейшем. Чтобы этого избежать, вам нужна чёткая, хорошо структурированная цветовая система, которая остаётся согласованной во всём проекте. Если всё сделано правильно, вы сможете разрабатывать и поддерживать весь проект, используя только 6–8 основных цветов и их оттенков.

https://habr.com/ru/articles/898600/

#css #bootstrap #дизайнсистема #фронтендразработка #ui_библиотека #angular #scss #less

От хаоса к системе: как мы создавали корпоративный фронтенд-фреймворк

Как справляться с огромной сложностью программного обеспечения в условиях крупной компании, где множество отделов и управлений, множество проектов? Корпоративный фреймворк — один из ответов. Эта статья не совсем обычная. Мы будем смотреть на тему создания платформенных решений с разных ракурсов: управление, дизайн, проектирование, разработка и так далее. Чтобы передать вам как можно больше мыслей из первых рук, мой рассказ будут разрезать небольшие вставки-интервью от реальных участников нашей команды. Меня зовут Сергей Шахов, я долгое время занимался развитием корпоративного фреймворка в нашей компании. Наш фреймворк помогает создавать командам пользовательские интерфейсы, иными словами, это фронтенд-фреймворк. Статья адресована особенно тем, кто неравнодушен к разработке платформенных решений, а также может быть интересна всем, кто имеет отношение к фронтенд-разработке, проектированию интерфейсов, созданию дизайн-систем или комплексных модульных веб-приложений. Вы узнаете, стоит ли затевать разработку корпоративного фреймворка, а также о том, как неопределённое может быть управляемым, а скучное — прекрасным. В качестве бонуса дадим вам запретный рецепт, как спасти демонстрацию вашим заказчикам за десять минут до её начала, которому ни в коем случае нельзя следовать. Поехали!

https://habr.com/ru/companies/gnivc/articles/896636/

#управление_продуктом #фреймворк #дизайнсистема #devrel #проектирование #uikit #микрофронтенды #api #ux #фронтендразработка