Дизайн и UX
Разработка, инфраструктура, SEO, ИИ и IT для бизнеса — коротко и по делу.
70 статей
- Дизайн и UX3 мин
Сетка 8pt: как выстроить систему отступов в интерфейсе
Сетка 8pt — правило, по которому все отступы и размеры кратны 8 (иногда 4): это даёт ровный ритм, ускоряет решения дизайнера и превращается в короткий набор токенов для кода.
Основы - Дизайн и UX3 мин
Доступность в дизайне: основы для каждого дизайнера
Доступный дизайн — это интерфейс, которым могут пользоваться люди с плохим зрением, дальтонизмом, без мыши или со скринридером. Основа для дизайнера: достаточный контраст, читаемый текст, видимый фокус, смысл не только в цвете, alt-тексты и понятная структура.
Основы - Дизайн и UX3 мин
Как спроектировать онбординг, который пользователи проходят
Лучший онбординг — самый короткий путь к первому полезному результату: вместо карусели из слайдов дайте человеку сразу сделать главное действие, подсказывайте в контексте, а разрешения запрашивайте в момент, когда их польза очевидна.
Практика - Дизайн и UX3 мин
Тон голоса бренда: что это и как его определить
Голос — постоянный характер бренда в текстах, тон — то, как этот характер звучит в конкретной ситуации; голос фиксируют 3–4 атрибутами с примерами «так / не так» и затем настраивают тон под каждый канал и язык.
Основы - Дизайн и UX3 мин
Как создать дизайн-систему с нуля
Дизайн-система строится по шагам: аудит существующего интерфейса, основы (токены цвета, типографики, отступов), базовые компоненты, документация и понятные правила развития. Без внедрения в работу команды даже идеальная библиотека остаётся мёртвым файлом.
Продвинутое - Дизайн и UX4 мин
Дизайн кнопок в интерфейсе: размеры, состояния, тексты
Хорошая кнопка показывает свою важность через иерархию, заметно реагирует в каждом состоянии (наведение, фокус, нажатие, неактивность, загрузка), достаточно крупная для попадания и подписана глаголом, который называет результат.
Практика - Дизайн и UX3 мин
Карточная сортировка и tree testing: как проверить навигацию
Карточная сортировка показывает, как пользователи сами группируют контент, а tree testing проверяет, находят ли они нужное в получившейся структуре; сначала сортировка, затем дерево, затем правки и повторный тест.
Практика - Дизайн и UX4 мин
Как проверить контраст цветов по WCAG
По WCAG 2 обычному тексту нужен контраст не ниже 4.5:1 (AA) или 7:1 (AAA), крупному — 3:1 или 4.5:1, элементам интерфейса и значимой графике — 3:1; проверяйте каждую реальную пару текста и фона и затемняйте или увеличивайте то, что не проходит.
Практика - Дизайн и UX4 мин
Основы теории цвета для UI-дизайнеров
В UI цвет — инструмент смысла и фокуса, а не украшение: выберите один основной цвет бренда, постройте широкую шкалу нейтральных для большей части интерфейса, добавьте семантические цвета для статусов и используйте акцент редко. Мышление в HSL помогает получать согласованные оттенки.
Основы - Дизайн и UX3 мин
CJM: что такое карта пути клиента и как её построить
CJM (customer journey map) — визуальная карта всего, через что проходит клиент, чтобы достичь цели с вашим продуктом: этапы, действия, точки контакта, мысли, эмоции и боли. Её задача — показать, где опыт ломается, чтобы команда знала, что чинить в первую очередь.
Основы - Дизайн и UX4 мин
Как спроектировать тёмную тему для сайта и приложения
Тёмная тема — это не инверсия цветов: используйте тёмно-серый вместо чистого чёрного, показывайте глубину более светлыми поверхностями, берите для акцентов светлые и менее насыщенные оттенки, проверяйте контраст в обеих темах и стройте всё на семантических токенах.
Практика - Дизайн и UX4 мин
Дизайн дашбордов: как сделать сложные данные понятными
Понятный дашборд начинается не с графиков, а с вопроса, на который он отвечает: 3–5 ключевых метрик наверху, детали ниже, тип графика под задачу сравнения или динамики, а таблицы и фильтры — для тех, кому нужно действовать.
Продвинутое - Дизайн и UX4 мин
Дизайн таблиц в интерфейсе: сортировка, фильтры и плотность
Удобная таблица помогает быстро сравнивать и действовать: числа выровнены вправо, текст влево, важные колонки первыми, шапка закреплена, плотность настраивается, а на мобильных строки превращаются в карточки.
Практика - Дизайн и UX3 мин
Управление дизайн-системой: версии, вклад команд и внедрение
Дизайн-система живёт, только если у неё есть владелец, понятный процесс вклада, версии по SemVer с changelog для Figma и кода, правила устаревания компонентов и метрики, которые показывают реальное использование в продуктах.
Продвинутое - Дизайн и UX3 мин
Дизайн-токены: что это и как их структурировать
Дизайн-токены — это именованные значения дизайна (цвета, отступы, шрифты), которые хранятся в одном источнике и используются и в Figma, и в коде; их строят в три слоя — примитивы, семантика и компоненты, — чтобы тема или ребрендинг менялись правкой нескольких ссылок, а не сотен экранов.
Продвинутое - Дизайн и UX4 мин
Как проектировать интерфейсы ИИ-чатов: UX-паттерны для LLM
Хороший ИИ-чат показывает ответ по мере генерации, помогает начать запрос, раскрывает источники и границы уверенности, позволяет править и перегенерировать, честно обрабатывает ошибки и отказы — и применяется только там, где диалог действительно удобнее формы.
Продвинутое - Дизайн и UX3 мин
Дизайн с учётом дальтонизма: практические приёмы
Не передавайте смысл только цветом: дублируйте его иконкой, текстом, формой или паттерном и обеспечьте разницу по яркости. Проверяйте макеты в симуляторах протанопии, дейтеранопии и тританопии и в оттенках серого.
Продвинутое - Дизайн и UX4 мин
Дизайн пустых состояний: как превратить пустой экран в подсказку
Пустое состояние должно объяснить, что появится на экране, почему сейчас пусто и что сделать дальше, с одним понятным действием; первому запуску, пустому поиску, ошибке и очищенному экрану нужны разные сообщения.
Практика - Дизайн и UX4 мин
Auto Layout в Figma: практическое руководство
Auto Layout превращает фрейм в контейнер, который сам расставляет содержимое по заданным направлению, отступам и правилам размеров. Освоив Hug, Fill и Fixed плюс вложенность, вы получаете кнопки, карточки и списки, которые сами подстраиваются под текст и ширину экрана.
Практика - Дизайн и UX3 мин
Компоненты и варианты в Figma: как их настроить
Компонент в Figma — это главный элемент, все копии которого (экземпляры) обновляются при его изменении. Варианты объединяют состояния и размеры в один набор, а свойства компонентов (текст, boolean, instance swap) позволяют настраивать экземпляры без отвязки.
Практика - Дизайн и UX4 мин
Передача дизайна разработчикам через Dev Mode в Figma
Хорошая передача начинается до Dev Mode: назовите слои и компоненты, соберите макет на auto layout и переменных, нарисуйте все состояния, отметьте ассеты для экспорта и опишите поведение; тогда разработчики открывают готовые секции в Dev Mode и сразу видят размеры, отступы, токены и заметки.
Практика - Дизайн и UX4 мин
Figma для начинающих: интерфейс и первый макет
Figma — браузерный редактор интерфейсов, где всё строится из фреймов, фигур и текста; освоив эти элементы, слои, constraints и кнопку Share, вы сможете собрать свой первый мобильный экран за один вечер.
Основы - Дизайн и UX4 мин
Как сделать интерактивный прототип в Figma
Во вкладке Prototype вы связываете фреймы взаимодействиями (триггер, действие, анимация), задаёте стартовую точку флоу, добавляете оверлеи и скролл, а затем отправляете ссылку тестировщикам.
Практика - Дизайн и UX3 мин
Переменные и режимы в Figma для тем и брендов
Переменные в Figma хранят значения цвета, чисел, строк и логических флагов, а режимы дают каждой переменной несколько значений. Разведите примитивы, бренды и темы по отдельным коллекциям, привяжите компоненты только к семантическим переменным — и смена темы или бренда будет делаться одним переключением режима.
Продвинутое - Дизайн и UX3 мин
Figma, Sketch или Penpot: какой инструмент дизайна выбрать
Figma — стандарт для командной работы в браузере, Sketch — нативное приложение для macOS с локальными файлами, Penpot — открытый инструмент, который можно развернуть на своём сервере; выбор зависит от платформы, бюджета, требований к данным и того, в чём работают ваши подрядчики.
Основы - Дизайн и UX3 мин
Принципы гештальта в UI-дизайне с примерами
Принципы гештальта описывают, как мозг автоматически группирует элементы: по расстоянию, похожести, общей рамке и направлению. В UI их используют, чтобы пользователь без подсказок понимал, что с чем связано и куда смотреть.
Основы - Дизайн и UX4 мин
Дизайн первого экрана: как сделать hero-блок, который работает
Хороший hero за несколько секунд отвечает на три вопроса — что это, зачем это мне и что сделать дальше — и для этого ему нужны ясный заголовок, одна главная кнопка, поясняющий визуал и быстрая загрузка.
Практика - Дизайн и UX4 мин
Как собрать цветовую палитру для бренда и продукта
Выберите один основной цвет с понятным смыслом, разверните его в шкалу оттенков, добавьте слегка тонированные нейтральные и семантические цвета, оформите всё токенами и проверьте на реальных экранах и по контрасту.
Практика - Дизайн и UX3 мин
Как проводить пользовательские интервью для UX-исследований
Хорошее интервью — это разговор о том, что человек уже делал, а не о том, что он думает или сделал бы; наберите участников из реальной аудитории, задавайте открытые вопросы без подсказок и сводите заметки в темы с доказательствами.
Практика - Дизайн и UX3 мин
Как сделать вайрфрейм: пошаговая инструкция
Начните с цели страницы и списка реального контента, набросайте серые схемы, где блоки расставлены по приоритету, подпишите поведение элементов и обсудите с командой до визуального дизайна.
Практика - Дизайн и UX4 мин
Как подобрать и сочетать шрифты для сайта
Сначала выберите читаемый шрифт для основного текста, затем шрифт заголовков, который отличается от него одним явным признаком и подходит по настроению бренду; до утверждения проверьте лицензию, кириллицу и вес файлов.
Практика - Дизайн и UX3 мин
Как провести юзабилити-тестирование: пошагово
Юзабилити-тест — это когда реальные пользователи выполняют типичные задачи в вашем интерфейсе, а вы молча наблюдаете, где они спотыкаются. Нужны 4–6 подходящих участников, задания в виде сценариев, нейтральный ведущий и приоритизация проблем по частоте и тяжести.
Практика - Дизайн и UX3 мин
Как составить бриф на дизайн сайта или логотипа
Хороший бриф отвечает на шесть вопросов: зачем нужен дизайн, для кого он, с кем вы конкурируете, что вам нравится и почему, что именно нужно сдать и какие есть ограничения по срокам, бюджету и технике.
Практика - Дизайн и UX4 мин
Как писать понятные сообщения об ошибках
Хорошее сообщение об ошибке говорит простым языком, что случилось, почему и что сделать, чтобы это исправить, — без обвинений, кодов и технических терминов, и появляется там, куда пользователь уже смотрит.
Практика - Дизайн и UX4 мин
Иконки в интерфейсе: стили, размеры и наборы
Возьмите один готовый набор иконок с одним стилем и толщиной линии, используйте его на сетке 24 px с размерами 16, 20, 24 и 32, а для неочевидных действий всегда добавляйте текстовую подпись.
Практика - Дизайн и UX3 мин
Частые ошибки в дизайне лендинга и как их исправить
Большинство лендингов теряют посетителей из-за одних и тех же ошибок: непонятного первого экрана, конкурирующих кнопок, сплошного текста, сломанной мобильной версии и безликих стоковых картинок. Каждая из них исправляется конкретным действием, без полного редизайна.
Практика - Дизайн и UX3 мин
Дизайн лендинга: структура эффективной страницы
Эффективный лендинг отвечает на вопросы посетителя в том порядке, в каком они возникают: что это, зачем мне, почему вам верить, как это работает, а что если, и что делать дальше. Каждый блок решает одну задачу и ведёт к одному целевому действию.
Практика - Дизайн и UX3 мин
Модульные сетки в UI-дизайне: колонки, отступы, поля
Модульная сетка — это невидимая разметка из колонок, межколонных отступов и полей, по которой выравниваются все элементы; она делает макеты единообразными, а их перенос в код — предсказуемым.
Основы - Дизайн и UX3 мин
Состояния загрузки: спиннеры, скелетоны и прогресс-бары
Индикатор загрузки выбирают по ожидаемому времени ожидания: до секунды — ничего, несколько секунд — скелетон или спиннер, дольше — прогресс-бар с понятным статусом. Плюс обязательно продумывают ошибку, таймаут и частичную загрузку.
Практика - Дизайн и UX4 мин
Как создаётся логотип: от брифа до финальных файлов
Логотип проходит бриф, исследование, множество быстрых эскизов, две-три проработанные концепции, аккуратную векторную отрисовку и тесты в мелком размере и в одном цвете, а заканчивается набором векторных и растровых файлов с базовыми правилами использования.
Практика - Дизайн и UX4 мин
Навигация в мобильном приложении: таббар, бургер и другие
Если в приложении 3–5 основных разделов, между которыми часто переключаются, нужен нижний таббар; редкие пункты уходят в меню или вкладку «Профиль», верхние вкладки делят контент внутри раздела, а жесты служат только ускорителями.
Практика - Дизайн и UX4 мин
Модальные окна, тосты и подсказки: что и когда использовать
Выбирайте паттерн по степени прерывания: модальное окно — когда без решения пользователя дальше нельзя, тост — для короткого подтверждения без остановки работы, подсказка — для необязательного пояснения по наведению или фокусу.
Практика - Дизайн и UX3 мин
Анимация в интерфейсе: принципы, длительность и easing
Анимация в интерфейсе должна объяснять, что произошло, а не украшать: короткие длительности, ease-out для появления, ease-in для исчезновения, одна точка внимания за раз. Обязательно уважайте настройку уменьшения движения и передавайте разработчикам анимацию как токены с точными параметрами.
Продвинутое - Дизайн и UX4 мин
Дизайн для кириллицы и латиницы: мультиязычная типографика
Выбирайте гарнитуру с полноценной кириллицей, включая расширенную, и проверьте на ней узбекские o‘, g‘ и апостроф, проектируйте под самый длинный язык без фиксированных ширин и тестируйте макет на реальных переводах, а не на английском черновике.
Практика - Дизайн и UX3 мин
10 эвристик юзабилити Нильсена с примерами
Эвристики Нильсена — 10 общих принципов удобного интерфейса: показывать статус, говорить языком пользователя, давать отменять действия, быть последовательным, предотвращать ошибки и так далее. По ним можно за час найти очевидные проблемы в макете без тестирования на пользователях.
Основы - Дизайн и UX4 мин
Растровая и векторная графика: форматы и применение
Растр хранит изображение как сетку пикселей и подходит для фотографий, а вектор описывает его формулами и масштабируется без потерь, поэтому логотипы и иконки делают в векторе, а фото — в JPG или WebP.
Основы - Дизайн и UX3 мин
Ребрендинг: когда он нужен компании и как его провести
Ребрендинг оправдан, когда бренд перестал отражать бизнес: сменилась стратегия, аудитория, рынок или произошло слияние. Если проблема только в устаревшем виде, достаточно рестайлинга; в любом случае начинайте с исследования и сохраняйте узнаваемые элементы.
Продвинутое - Дизайн и UX3 мин
Адаптивный дизайн для дизайнеров: брейкпоинты и сетки
Проектируйте сначала мобильную версию, задайте 3-4 брейкпоинта по тому, где ломается контент, опишите для каждого сетку и поведение блоков, а в Figma стройте макеты на auto layout, чтобы разработчик видел правила, а не только картинки.
Практика - Дизайн и UX3 мин
UX поиска и фильтров: как спроектировать удобный каталог
Удобный каталог — это заметный поиск, который прощает опечатки и подсказывает варианты, фильтры по реальным свойствам товаров с видимыми выбранными значениями и выдача, которая никогда не заканчивается тупиком.
Практика - Дизайн и UX4 мин
Шрифты с засечками и без: когда что использовать
На современных экранах и шрифты с засечками, и гротески хорошо читаются в обычных размерах — выбор в основном про характер и контекст. Гротеск подходит интерфейсам и мелкому тексту, антиква — длинному чтению и редакционному или премиальному тону, а пары из двух шрифтов хватает большинству проектов.
Основы - Дизайн и UX3 мин
Размер тач-зон и зона большого пальца в мобильном дизайне
Делайте область нажатия не меньше 44×44 pt на iOS и 48×48 dp на Android (минимум WCAG уровня AA — 24×24 CSS px), оставляйте между элементами зазор, а частые и главные действия размещайте в нижней части экрана, куда легко дотянуться большим пальцем.
Практика - Дизайн и UX4 мин
Виды логотипов: шрифтовой, знак, эмблема и другие
Логотипы делятся на шрифтовые, буквенные, знаки-изображения, абстрактные знаки, маскоты, эмблемы и комбинированные; новому бизнесу чаще всего подходит шрифтовой или комбинированный логотип, потому что название ещё никто не знает.
Основы - Дизайн и UX3 мин
Основы типографики для веб- и интерфейсного дизайна
Хорошая экранная типографика держится на нескольких решениях: основной текст от 16px, интерлиньяж около 1,4–1,6, строка примерно 45–75 знаков, ограниченная шкала размеров и два-три начертания. Если эти параметры выставлены верно, интерфейс читается ещё до всякой декорации.
Основы - Дизайн и UX3 мин
UI и UX дизайн: в чём разница
UX-дизайн определяет, что делает продукт и каким путём пользователь проходит к цели, а UI-дизайн — как выглядит и реагирует каждый экран на этом пути. UX без UI — рабочий скелет, UI без UX — красивый экран, который никому не помогает.
Основы - Дизайн и UX3 мин
Что такое user flow и как построить его пошагово
User flow — схема шагов, экранов и развилок, через которые пользователь проходит к одной цели; её строят до макетов, чтобы заранее увидеть лишние шаги, тупики и забытые сценарии.
Основы - Дизайн и UX4 мин
Чек-лист UX-аудита: как проверить сайт или приложение
UX-аудит — это проход по ключевым сценариям пользователя с чек-листом по навигации, контенту, формам, доступности, мобильной версии и доверию; каждую проблему фиксируйте со скриншотом, оценкой серьёзности и рекомендацией, а исправляйте сначала то, что блокирует целевые действия.
Практика - Дизайн и UX3 мин
UX-метрики: SUS, успешность задач и как измерять UX
Удобство интерфейса измеряют поведенческими метриками (успешность задач, время, ошибки) и метриками восприятия (SEQ после каждой задачи, SUS в конце теста). Сравнивать итерации можно только при одинаковых задачах, критериях успеха и сопоставимых участниках.
Продвинутое - Дизайн и UX4 мин
Методы UX-исследований: какой выбрать и когда
Метод выбирают по вопросу: «почему» и «что люди думают» — интервью и дневники, «сколько» и «как часто» — опросы и аналитика, «могут ли люди этим пользоваться» — юзабилити-тесты, «как устроить навигацию» — карточная сортировка.
Основы - Дизайн и UX3 мин
Визуальная иерархия в дизайне: как управлять вниманием
Визуальная иерархия — порядок, в котором взгляд считывает экран, и им управляют размером, контрастом, цветом, отступами и положением. Выберите один главный элемент на экране, сделайте его самым сильным и намеренно ослабьте всё остальное.
Основы - Дизайн и UX3 мин
Как проектировать формы: лучшие практики UX
Удобная форма просит только необходимое, подписывает каждое поле видимой меткой над ним, использует правильные типы ввода для мобильной клавиатуры и сообщает об ошибках сразу после заполнения поля, рядом с ним и понятным языком.
Практика - Дизайн и UX3 мин
Что такое брендбук и что в нём должно быть
Брендбук — документ, который описывает идентичность бренда и правила её использования: от миссии и тона коммуникации до логотипа, цветов, шрифтов и примеров на носителях. Логобук описывает только логотип, а гайдлайн — только правила визуального оформления.
Основы - Дизайн и UX3 мин
Что такое дизайн-система и зачем она продукту
Дизайн-система — это общий набор дизайн-решений: токены, переиспользуемые компоненты в макетах и коде, правила применения и документация. Она помогает быстрее собирать единообразные интерфейсы и окупается, когда над интерфейсом работают несколько человек или продуктов.
Основы - Дизайн и UX3 мин
Что такое мудборд и как собрать его для дизайн-проекта
Мудборд — это подборка цветов, шрифтов, изображений и референсов, которая задаёт визуальное направление проекта и помогает согласовать «настроение» с клиентом ещё до того, как нарисован первый макет.
Основы - Дизайн и UX3 мин
Что такое персона пользователя и как её составить
Персона — короткий реалистичный портрет типичной группы пользователей, собранный по исследованиям: цели, контекст, поведение и препятствия. Она полезна, только если влияет на решения, поэтому фокус — на потребностях и болях, а не на декоративной биографии.
Основы - Дизайн и UX3 мин
Что такое фирменный стиль и из чего он состоит
Фирменный стиль (айдентика) — это система визуальных и словесных элементов: логотип, цвета, шрифты, графика и тон голоса, которые по единым правилам применяются во всех точках контакта. Логотип — лишь одна его часть, а бренд — то, что люди думают о компании в итоге.
Основы - Дизайн и UX3 мин
Что такое дизайн-мышление: этапы и примеры
Дизайн-мышление — подход к решению задач, который начинается с понимания людей и проходит пять этапов: эмпатия, фокусировка, генерация идей, прототип и тест. Его ценность — в дешёвой проверке гипотез на реальных пользователях до разработки, а не в воркшопах со стикерами.
Основы - Дизайн и UX3 мин
Что такое информационная архитектура в UX
Информационная архитектура — это то, как контент продукта разложен по разделам, как эти разделы называются и как между ними перемещаться; хорошая IA позволяет человеку найти нужное, не задумываясь.
Основы - Дизайн и UX4 мин
Что такое юзабилити-тестирование и зачем оно нужно
Юзабилити-тестирование — это наблюдение за тем, как реальные люди выполняют задачи в вашем продукте; оно показывает, где они путаются и ошибаются, и для этого часто достаточно пяти участников на один раунд.
Основы - Дизайн и UX4 мин
Что такое UX-райтинг и почему текст в интерфейсе важен
UX-райтинг — это проектирование слов внутри интерфейса: кнопок, подписей, подсказок, ошибок, пустых состояний и онбординга. Хороший микротекст понятный, короткий и последовательный по тону, и он помогает людям выполнить задачу, не угадывая, что делать дальше.
Основы - Дизайн и UX3 мин
Вайрфрейм, макет и прототип: в чём отличия
Вайрфрейм — серая схема структуры экрана, макет (мокап) — тот же экран в финальном визуале, а прототип — кликабельная версия, которая имитирует работу продукта. Они отвечают на разные вопросы: что где стоит, как выглядит и как себя ведёт.
Основы
Есть идея или задача? Расскажите нам
Ответим в течение рабочего дня и предложим решение. Консультация бесплатная.