Development Frameworks: что это такое и зачем они дизайнеру

Когда дизайнер создает интерфейс, разработчики собирают его с помощью кода. Чтобы делать это быстрее и стабильнее, они используют development frameworks.

Development framework — это набор готовых компонентов и правил, которые помогают быстрее собирать интерфейсы и поддерживать единый стиль продукта.

Frameworks бывают разных типов:

▪️Web — для сайтов и веб-приложений (Bootstrap, Tailwind, React)
▪️Mobile — для мобильных приложений iOS и Android (SwiftUI, Jetpack Compose)
▪️Cross-platform — для запуска одного приложения сразу на нескольких платформах (Flutter, React Native)

Что важно дизайнеру:

▪️узнать у разработчиков, какой framework используется
▪️найти его официальную документацию в интернете — обычно это сайт, где всё подробно описано
▪️часто в документации есть ссылка на Figma Community с UI-китом этого framework
▪️изучить готовые компоненты и их ограничения
▪️использовать готовые паттерны вместо выдумывания новых

Это поможет дизайнеру говорить с разработчиками на одном языке и избежать лишних проблем 👌

Про Development Frameworks, и про то, как дизайнеру выжить в 2026 году,
я подробно рассказываю на своём курсе UX/UI & AI.

В рамках подготовки к запуску курса
я решил провести персональные консультации.

На консультации мы:

— обсудим ваши перспективы в профессии
— посмотрим, какие цели вы хотите достичь
— разберём, с чего лучше начать именно вам

Консультацию провожу лично я 😎

Для участия нужно заполнить короткую форму — здесь

Это хороший шанс задать вопросы практикующему дизайнеру и преподавателю и получить честный взгляд на ваши возможности.

Human Interface Guidelines

Любой мобильный интерфейс существует внутри конкретной платформы — чаще всего iOS или Android.

У каждой платформы есть свои привычные правила поведения, к которым пользователи давно привыкли.

Human Interface Guidelines (HIG) — это набор правил и рекомендаций, которые определяют, как интерфейс должен выглядеть, ощущаться и работать на конкретной платформе.

Самые известные примеры HIG:

• Apple Human Interface Guidelines — правила для iOS, iPadOS и macOS..
• Material Design — правила от Google для Android

В них описаны:

• структура экранов и навигации
• размеры и поведение элементов
• жесты и взаимодействия
• принципы визуального оформления

Что важно дизайнеру:

• узнать, под какую платформу создается продукт
• найти официальные ресурсы этой платформы
• изучить базовые компоненты и паттерны
• учитывать эти правила при проектировании интерфейса

Это помогает делать интерфейсы привычными для пользователей и понятными для разработки.

8 бесплатных коллекций иконок.

Это проверенные наборы, которые можно сразу использовать в своих проектах.

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

1. Heroicons
2. Lucide. Мой личный фаворит — чаще всего использую именно его.
3. Phosphor
4. Tabler
5. Remix
6. Material Icons
7. Bootstrap Icons
8. Feather

Исходники можно найти на официальных сайтах или сразу в Figma Community.

Часто там есть не только сами иконки, но и плагины, которые позволяют быстро находить и вставлять нужные иконки прямо в макет.

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

(с) Алан Купер

Вот как должен выглядеть логотип на современном сайте 👀

Сразу скачать SVG.
Сразу перейти к brand assets.

Делайте так. Это намного удобнее, чем танцы с бубном, когда дизайнер пытается вытащить логотип из кода сайта.

И хорошо, если логотип там вообще окажется в SVG, а не PNG-картинкой без прозрачного фона.

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

В сети завирусился пиксельный MS PAINT стиль 90x от Image 2.0, prompt:

Redraw the attached image in the most clumsy, scribbly, and utterly pathetic way possible. Use a white background, and make it look like it was drawn in MS Paint with a mouse. It should be vaguely similar but also not really, kind of matching but also off in a confusing, awkward way, with that low-quality pixel-by-pixel feel that really emphasizes how ridiculously bad it is. Actually, you know what, whatever, just draw it however you want.

Как отображается интерфейс приложения на телефоне? 📱

Когда вы устанавливаете Instagram, Telegram или любое другое нативное приложение, то на устройство скачивается:

• код приложения
• UI-компоненты
• логика интерфейса
• анимации
• системные файлы

Поэтому приложение может быстро запускаться, плавно работать и частично работать даже без интернета

Но сами данные всё равно приходят с сервера.

Например в Instagram интерфейс лайков уже находится внутри приложения, а посты, комментарии и сообщения загружаются через API.

На телефоне хранится своего рода «движок приложения», а контент подтягивается из интернета.

Но приложения бывают разными. Например web apps — интерфейс собирается прямо в браузере из HTML, CSS и JavaScript

Именно поэтому разные приложения ведут себя по-разному при слабом интернете или полном офлайне.

Работа с Legacy — это искусство постепенных улучшений 👀

Когда дизайнер приходит в новую компанию, он часто сталкивается с legacy: старым интерфейсом и привычками пользователей, которые годами работают в этой системе.

Главная ошибка здесь — попытаться сразу всё «сделать современно».

Пользователи обычно не любят изменения. Они привыкли к текущему интерфейсу и не хотят тратить время на переобучение.

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

Что помогает при работе с legacy:

• провести дизайн аудит
• пообщаться с разработкой
• отметить старые дизайн файлы как deprecated
• постепенно выстраивать новую дизайн-систему
• и внедрять изменения в продукт по мере появления новых задач и фич

Работа с legacy — важная часть продуктового дизайна. Здесь нужно учитывать старую систему, привычки пользователей и постепенно двигать продукт вперёд.

Как вы знаете, я преподаю в университете, и недавно у меня закончился очередной курс.

Интересное наблюдение: возраст совсем не мешает получать новые знания.

Разброс студентов на курсе был примерно от 20 до 40 лет. И самые дисциплинированные, мотивированные и старательные студенты чаще всего были именно в категории 30+.

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

А если вам ещё нет 30 — всё впереди. Но рекомендую присмотреться к своим старшим товарищам и коллегам.

У них часто можно научиться не только профессиональным навыкам, но и отношению к обучению, работе и жизни в целом.