—

Топ-10 дизайн-решений: как мы проектируем сложные сайты и сервисы

Бизнес и эффективность

Дизайн

07 сентября 2026

Содержание

1. Эмоция как основа коммуникации
2. Архитектурная эстетика как визуальный язык бренда
3. Лаконичность как концентрация смысла
4. Минимализм как инструмент упрощения
5. Визуальная иерархия как навигация
6. Модульность как инструмент масштабирования
7. Дизайн-система как основа масштабирования продукта
8. 3D как инструмент визуализации продукта
9. Визуализация данных как инструмент принятия решений
10. ИИ как новый исполнитель ключевых задач
Подведем итоги

Мы делаем сайты и интерфейсы для промышленности, госсектора, медицины, медиа и брендов. В каждом проекте ищем решение под конкретную задачу клиента. Ведущий дизайнер Атвинты Ирина Жукова собрала топ-10 решений, которые мы внедряем для наших заказчиков.

1. Эмоция как основа коммуникации

Эмоция для нас — это то, ради чего пользователь также возвращается в продукт. На старте мы формулируем ожидания и чувства от работы с сервисом и уже под это подбираем механику, текст, цвет, форму и иллюстрации.

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

СМИТАП — платформа подготовки к ЕГЭ, которую мы развиваем уже шестой год. Курс идет пять-девять месяцев, и к середине ученик устает от гонки за результатом.

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

Уровни представляют собой карту из 36 ступеней, как в настольной приключенческой игре. Ученик видит весь путь и свое место на нем.

С достижениями было сложнее, потому что система обычно фиксирует стандартные события: просмотренные уроки, сданные работы и заполненный профиль. Эмоцию мы вложили в нейминг и иконки. К примеру, за прохождение пяти уроков ученик получает значок «Преданный зритель», а за просмотр урока в записи — «Назад в будущее».

Основная аудитория платформы — это школьники 16-17 лет, поэтому 25 иконок мы отрисовали в мягком стиле: плавные формы, крылышки, короны, облака и флажки. Ради заметности ушли от пастельной палитры платформы и взяли более яркие оттенки, но оставили их в общей гамме.

Момент вручения спроектировали отдельно, иконка появляется в модальном окне с анимацией. Так награда считывается как подарок.

Также добавили персонажа-помощника, который поддерживает учеников короткими фразами. За форму и цвет команда прозвала его Фасолинкой.

2. Архитектурная эстетика как визуальный язык бренда

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

Мы делали сайт для архитектурного бюро, которое проектирует и реставрирует объекты культурного наследия. 90% клиентов приходят по рекомендации, то есть человек открывает сайт, уже зная о компании. Такому посетителю интересно, как бюро работает с объектом.

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

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

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

Мы перенесли в интерфейс обозначения из чертежей. Границы этапов работы на шкале отбиты наклонными засечками, которыми на чертеже отмечают размер, а границы колонок — крестиками для разметки полей.

На страницах объектов расположены рабочие чертежи: фасады, планы этажей и детали декоративных элементов. Мы перерисовали их под стиль сайта, поэтому раздел представлен в формате визуального портфолио. Руководитель изучает карту объектов, а главный архитектор открывает конкретный чертеж и смотрит детализацию.

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

3. Лаконичность как концентрация смысла

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

ГК ФСК входит в топ-4 застройщиков России по объему строительства. Покупатели часто меняли планировку под себя — например, им нужно было сделать комнату под мастерскую или обустроить на балконе зимний сад. Для этого клиенты шли к дизайнеру или разбирались в профессиональной программе.

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

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

В каталоге дано 113 предметов мебели, и у 31 из них размер зафиксирован. Потому что в жизни такие объекты выпускают по стандарту, а остальное можно сделать на заказ. К примеру, холодильник, стиральная машина и плита по размеру занимает 60 на 60 сантиметров, шкаф и диван можно растянуть.

Сам интерфейс мы собрали в фирменных цветах ГК ФСК, а управление вынесли в иконки, которые показывают, как выбрать, переместить и удалить объект. При наведении на предмет появляется подсказка — например, как правильно поставить дверь.

4. Минимализм как инструмент упрощения

Минимализм — это способ снизить нагрузку на человека. На экране мы оставляем только то, что помогает выполнить конкретную задачу. Это необходимо тогда, когда у человека заняты руки и мало времени.

«Плазморан» — российская хирургическая установка для лечения острых и хронических ран, она работает в больницах, операционных и полевых условиях.

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

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

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

5. Визуальная иерархия как навигация

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

Мы разработали сервис «Фабрика идей» для производственно-добывающего холдинга с выручкой более 300 млрд рублей. Сотрудник предлагает улучшение или сообщает о проблеме в цехах, а руководители оценивают предложения и запускают в работу. Отдельный сервис понадобился для небольших идей, с экономическим эффектом до 1 млн рублей.

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

Запрос на идеи и протокол комитета читают как документ, поэтому для них мы сделали карточки.

6. Модульность как инструмент масштабирования

Мы также выстраиваем интерфейсы из самостоятельных модулей, которые сочетаются между собой и работают в разных сценариях. Так новые страницы и форматы собираются быстро, а визуальный язык остается единым.

Наша команда разработала игровой модуль Forbes Games. В стартовой линейке представлено три игры:

Quiz с вопросами на эрудицию.
Match на поиск соответствий.
Billionaire, в которой читатель принимает решения в роли предпринимателя.

Каркас у всех игр сделан по единому принципу — стартовый экран с описанием, блок с вопросами и окно с результатами.

Основу мы выстроили на фирменном стиле Forbes: темный фон, черно-белая графика с золотыми акцентами и крупные заголовки.

Мы спроектировали модуль со слотами под новые игры и спецпроекты, поэтому линейка расширяется без участия разработчиков. Админпанель собрали по образцу редакционной системы Forbes. Специалист заводит игру, добавляет вопросы и варианты ответов, ставит подсказку со ссылкой на статью, пишет итоговые сообщения и задает диапазоны баллов для финального экрана.

7. Дизайн-система как основа масштабирования продукта

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

REUZEit — калифорнийская платформа для торговли новым и подержанным промышленным оборудованием. Компания зарабатывает на том, что технику перепродают и перераспределяют вместо утилизации.

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

Состояние оборудования на такой платформе — главный параметр, от него зависят цена, гарантия и решение о покупке. Мы выстроили состояния в шкалу от «как новое» до «как есть, без гарантий», где цвет идет от темно-зеленого к красному, а у каждой ступени своя иконка. Одна и та же шкала показана в фильтре, карточке товара и списке заявок.

Библиотеку собирали из готовых состояний платформы. Рядом добавили формы и таблицы, поэтому команда клиента берет элемент целиком и не собирает его заново.

8. 3D как инструмент визуализации продукта

Мы используем 3D, чтобы показать конструкцию и объяснить, как работает устройство. Фотография объекта при этом тоже используется, чтобы передать фактуру и условия производства.

ТПП «Титан» создает крупногабаритное оборудование для нефтегазовой и энергетической промышленности. Теплообменный аппарат с плавающей головкой достигает 10,5 метра в длину и 22 тонн массы, поэтому снять его целиком так, чтобы понять всю конструкцию, сложно. К тому же стандартных изделий у завода почти нет, каждый аппарат создают под запросы клиента.

На новом сайте клиента мы показали оборудование. На старте аппарат показан линиями, как в конструкторской документации, а затем обретает объем, и на экране остается цельная 3D-модель вакуумного конденсатора с логотипом на корпусе.

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

Категории каталога мы тоже показали 3D-моделями аппаратов, потому что снимки собранных изделий сняты в разных цехах и при разном освещении. С такими моделями все восемь направлений выглядят как одна линейка.

9. Визуализация данных как инструмент принятия решений

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

В информационной системе досудебного обжалования граждане оспаривают действия органов власти при получении госуслуг. С дашбордами работают региональные инспекторы и федеральные министры.

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

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

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

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

Один и тот же интерфейс работает и на мониторе аналитика, и на большом экране в зале заседаний, поэтому команде не нужно готовить отдельные презентационные материалы.

10. ИИ как новый исполнитель ключевых задач

Мы отдаем нейросетям типовые работы, которые повторяются из проекта в проект. Идея и концепция остаются за дизайнером.

Мы делали сайт для компании, которая поставляет профессиональный инструмент. У заказчика уже был свой слоган — «Пили, кроми, сверли», и он же стал основой идеи.

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

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

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

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

Подведем итоги

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

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

Если собрать десять пунктов в одну мысль, то ограничения проекта и есть источник решения.