Илья Бир­ман

Пользовательский интерфейс

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Илья Бир­ман

Пользовательский интерфейс

Изда­тель­ство Бюро Гор­бу­нова
2017
Илья Бирман

Пользовательский интерфейс

Издательство Бюро Горбунова
2017
удк 655.262
ббк 85.15
Б64
Бир­ман И. Б.
Б64
Поль­зо­ва­тель­ский интер­фейс. —
М.: Изд‑во Бюро Гор­бу­нова, 2017
ISBN 978‑5‑9907024‑1‑7

Пред­став­ляем книгу Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по поль­зо­ва­тель­скому интер­фейсу. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров, руко­во­ди­те­лей, раз­ра­бот­чи­ков и всех, кто при­ча­стен к созда­нию продуктов.

УДК 655.262
ББК 85.15

Оглавление

удк 655.262
ббк 85.15
Б64
Б64
Бирман И. Б.
Пользовательский интерфейс. —
М.: Изд‑во Бюро Горбунова, 2017
ISBN 978‑5‑9907024‑1‑7

Представляем книгу Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по пользовательскому интерфейсу. Учебник предназначен для дизайнеров, редакторов, руководителей, разработчиков и всех, кто причастен к созданию продуктов.

УДК 655.262
ББК 85.15

Оглавление

Скрыто 410 разворотов

Боко­вые поля у андро­ид­ных при­ло­же­ний — по 16 пк, а отступ слева до основ­ной колонки тек­ста — 72 пк.

Вер­ти­каль­ные раз­меры также регла­мен­ти­ро­ваны. Строка ста­туса имеет высоту 24 пк, тул­бар — 56 пк, заго­ло­вок и эле­менты списка — по 72 пк, под­за­го­ло­вок — 48 пк, отступ между груп­пами эле­мен­тов — 8 пк.

Раз­меры всех обла­стей кратны 8 пк.

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

Здесь и на предыдущем развороте — иллюстрации из гайдлайнов «Материал‑дизайна»

Боковые поля у андроидных приложений — по 16 пк, а отступ слева до основной колонки текста — 72 пк.

Вертикальные размеры также регламентированы. Строка статуса имеет высоту 24 пк, тулбар — 56 пк, заголовок и элементы списка — по 72 пк, подзаголовок — 48 пк, отступ между группами элементов — 8 пк.

Размеры всех областей кратны 8 пк.

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

Здесь и на предыдущем развороте — иллюстрации из гайдлайнов «Материал‑дизайна»

Поддельный

Студенческая работа

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

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

Настоящий

Приложение Эпла

Поддельный

Студенческая работа

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

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

Настоящий

Приложение Эпла

Тест

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

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

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

В светофорной программе из предыдущего вопроса наконец‑то добавится функция просмотра видео с камеры на конкретном перекрёстке. Предполагается, что операторы будут ей постоянно пользоваться. Какой из вариантов интерфейса лучше всего?

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

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

Пользователь попал в форму и кликнул в поле электронной почты. Перечислите недостатки в дизайне формы.

Поле почты подписано по‑английски, хотя вся форма — на русском языке, причём по‑разному в двух местах
Поле электронной почты должно быть недоступно, пока пользователь не заполнил поле имени
Сообщение об ошибке выведено преждевременно
Сообщение об ошибке неинформативно
Некоторые подписи под полями низкоинформативны и малополезны

Подпись e‑mail надо перевести: «электронная почта» или «эл. почта». Конечно, поле должно быть доступно: пользователь может заполнять форму в любом порядке. Сообщение об ошибке выведено преждевременно: пользователь ещё даже не начал печатать. Сообщение неинформативно: если человек ошибётся при вводе адреса, оно не поможет понять, в чём именно ошибка. Приводить пример имени, тем более, дважды — полный абсурд.

Перечислите недостатки в дизайне формы.

Cрок действия придётся указывать в формате, отличном от используемого на карте
Подписи к полям выровнены по правому краю
Номер карты должен быть написан шрифтом с засечками, в отличие от остальной формы
В полях отсутствует внятная группировка
Кнопка стоит в нижней части формы, что непривычно для взгляда новичка

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

Перечислите недостатки в дизайне формы.

Используется «кирпичная кладка»
Сетка визуально связывает несвязанные по смыслу элементы
У чекбоксов не вынесены за скобку общие части подписей
Слишком мало полей вопреки правилу семи элементов
Обязательные поля формально обозначены звёздочками без полезных пояснений

Чем меньше полей, тем лучше. А всё остальное — действительно недостатки.

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

Ссылка
Чекбокс
Кнопка
Иконка
Фальшпедаль

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

В веб‑приложении — планировщике задач есть страница задачи. Какой адрес страницы наиболее удачен с точки зрения приведённых рекомендаций?

example.com/tasks.php?sessionID=83258425&taskID=523899
example.com/523899/Сверстать_каталог
example.com/tasks/Сверстать_каталог
example.com/task/Сверстать_каталог
example.com/modules/tasks.php?id=523899
example.com/task/523899
example.com/task=Сверстать_каталог
Все варианты равнозначны

Варианты с числовыми идентификаторами технозависимы, а без текстовой части ещё и неинформативны. Запись переменной через знак равенства следует превратить в иерархическую через слеш. Задач много, а не одна, поэтому родительской страницей должен быть tasks, а не task. Получается, что наилучший вариант — example.com/tasks/Сверстать_каталог

Перечислите недостатки иерархической навигации для пользователя.

Пользователь может представлять себе взаимосвязь функций или страниц иначе, чем автор
Не существует хоть сколько‑то распространённых интерфейсных решений для такой навигации, приходится изобретать непонятные элементы
В иерархической системе найти что‑либо перебором труднее, чем в линейной: нужно держать в голове, в каких ветках ты уже был
Устроенные иерархически приложения невозможно адаптировать к мобильным экранам
Кнопка «Назад» двусмысленна: может означать и «на предыдущий экран», и «на родительский экран»

Для иерархической навигации полно привычных интерфейсных решений, в том числе работающих на мобильных экранах. А всё остальное — действительно проблемы.

Что из перечисленного поможет навести порядок в форме и соответствует приведённым рекомендациям по использованию сетки?

Выровнять поля левыми краями
Сделать ширину каждого поля равной ширине его подписи
Привести размеры и отступы между полями к кратным восьми пикселям
Сделать ширину каждого поля кратной общему для всей формы шагу ширины

Если поля выровнять левыми краями, они встанут по сетке, а последовательность заполнения станет очевиднее. Размеры полей нужно подбирать под размеры их содержимого, а зону подписей делать компактной. Восьмипиксельная сетка — действительно один из способов наведения порядка. Другой способ — сделать ширины полей кратными «модулю» — общему для всей формы шагу ширины.

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

Даже если вы незнакомы с сеткой Фейсбука, чтобы правильно ответить на вопрос, достаточно найти два варианта, свёрстанных одинаково. Это оба левых варианта. В правом верхнем варианте имя Трампа подпрыгнуло вверх, картинка слишком прилипла к тексту, поле комментария не дотянулось до правого края. В правом нижнем варианте имя Родиона «отвалилось» от фотографии, кнопки реакций разъехались, а поле комментария прилипло к низу.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

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

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

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

В светофорной программе из предыдущего вопроса наконец‑то добавится функция просмотра видео с камеры на конкретном перекрёстке. Предполагается, что операторы будут ей постоянно пользоваться. Какой из вариантов интерфейса лучше всего?

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

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

Пользователь попал в форму и кликнул в поле электронной почты. Перечислите недостатки в дизайне формы.

Поле почты подписано по‑английски, хотя вся форма — на русском языке, причём по‑разному в двух местах
Поле электронной почты должно быть недоступно, пока пользователь не заполнил поле имени
Сообщение об ошибке выведено преждевременно
Сообщение об ошибке неинформативно
Некоторые подписи под полями низкоинформативны и малополезны

Подпись e‑mail надо перевести: «электронная почта» или «эл. почта». Конечно, поле должно быть доступно: пользователь может заполнять форму в любом порядке. Сообщение об ошибке выведено преждевременно: пользователь ещё даже не начал печатать. Сообщение неинформативно: если человек ошибётся при вводе адреса, оно не поможет понять, в чём именно ошибка. Приводить пример имени, тем более, дважды — полный абсурд.

Перечислите недостатки в дизайне формы.

Cрок действия придётся указывать в формате, отличном от используемого на карте
Подписи к полям выровнены по правому краю
Номер карты должен быть написан шрифтом с засечками, в отличие от остальной формы
В полях отсутствует внятная группировка
Кнопка стоит в нижней части формы, что непривычно для взгляда новичка

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

Перечислите недостатки в дизайне формы.

Используется «кирпичная кладка»
Сетка визуально связывает несвязанные по смыслу элементы
У чекбоксов не вынесены за скобку общие части подписей
Слишком мало полей вопреки правилу семи элементов
Обязательные поля формально обозначены звёздочками без полезных пояснений

Чем меньше полей, тем лучше. А всё остальное — действительно недостатки.

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

Ссылка
Чекбокс
Кнопка
Иконка
Фальшпедаль

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

В веб‑приложении — планировщике задач есть страница задачи. Какой адрес страницы наиболее удачен с точки зрения приведённых рекомендаций?

example.com/tasks.php?sessionID=83258425&taskID=523899
example.com/523899/Сверстать_каталог
example.com/tasks/Сверстать_каталог
example.com/task/Сверстать_каталог
example.com/modules/tasks.php?id=523899
example.com/task/523899
example.com/task=Сверстать_каталог
Все варианты равнозначны

Варианты с числовыми идентификаторами технозависимы, а без текстовой части ещё и неинформативны. Запись переменной через знак равенства следует превратить в иерархическую через слеш. Задач много, а не одна, поэтому родительской страницей должен быть tasks, а не task. Получается, что наилучший вариант — example.com/tasks/Сверстать_каталог

Перечислите недостатки иерархической навигации для пользователя.

Пользователь может представлять себе взаимосвязь функций или страниц иначе, чем автор
Не существует хоть сколько‑то распространённых интерфейсных решений для такой навигации, приходится изобретать непонятные элементы
В иерархической системе найти что‑либо перебором труднее, чем в линейной: нужно держать в голове, в каких ветках ты уже был
Устроенные иерархически приложения невозможно адаптировать к мобильным экранам
Кнопка «Назад» двусмысленна: может означать и «на предыдущий экран», и «на родительский экран»

Для иерархической навигации полно привычных интерфейсных решений, в том числе работающих на мобильных экранах. А всё остальное — действительно проблемы.

Что из перечисленного поможет навести порядок в форме и соответствует приведённым рекомендациям по использованию сетки?

Выровнять поля левыми краями
Сделать ширину каждого поля равной ширине его подписи
Привести размеры и отступы между полями к кратным восьми пикселям
Сделать ширину каждого поля кратной общему для всей формы шагу ширины

Если поля выровнять левыми краями, они встанут по сетке, а последовательность заполнения станет очевиднее. Размеры полей нужно подбирать под размеры их содержимого, а зону подписей делать компактной. Восьмипиксельная сетка — действительно один из способов наведения порядка. Другой способ — сделать ширины полей кратными «модулю» — общему для всей формы шагу ширины.

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

Даже если вы незнакомы с сеткой Фейсбука, чтобы правильно ответить на вопрос, достаточно найти два варианта, свёрстанных одинаково. Это оба левых варианта. В правом верхнем варианте имя Трампа подпрыгнуло вверх, картинка слишком прилипла к тексту, поле комментария не дотянулось до правого края. В правом нижнем варианте имя Родиона «отвалилось» от фотографии, кнопки реакций разъехались, а поле комментария прилипло к низу.

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

Напоследок

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

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

Тема вёрстки в гра­фи­че­ском интер­фейсе шире главы «Сетка» — важно пони­мать пра­вило внут­рен­него и внеш­него, пра­вило якор­ных объ­ек­тов; уметь соби­рать экраны из базо­вых эле­мен­тов, таких как точка, линия и пря­мо­уголь­ник. В главе «Пик­то­граммы» мы кос­ну­лись их функ­ции, но не гра­фи­че­ского дизайна.

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

Напоследок

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

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

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

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

Ещё инте­рес­нее ста­но­вится, когда интер­фейс выхо­дит за экран, напри­мер для управ­ле­ния умным домом, дро­ном, подъ­ём­ным кра­ном или когда интер­фейс вли­яет на без­опас­ность людей. Каким дол­жен быть вид и форма физи­че­ских рыча­гов и педа­лей? Как улуч­шить голо­со­вые интер­фейсы сегодня и какими они ста­нут в буду­щем, когда тех­но­ло­гии разо­вьются? Как эффек­тивно исполь­зо­вать вир­ту­аль­ную реаль­ность для повсе­днев­ных задач?

У интер­фейса есть и ком­мер­че­ская задача. Воз­ни­кает вопрос не только о том, как сде­лать удобно, но и как пора­до­вать, при­учить, затя­нуть. Как моти­ви­ро­вать чело­века поль­зо­ваться сер­ви­сом чаще?

Десять лет назад про­ек­ти­ров­щики решали задачу «сде­лать удобно», а сегодня — задачу «улуч­шить жизнь»: зани­маться спор­том, регу­лярно учиться, разумно тра­тить деньги, сор­ти­ро­вать мусор. Как интер­фей­сом холо­диль­ника помочь чело­веку пра­вильно питаться?

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

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

У интерфейса есть и коммерческая задача. Возникает вопрос не только о том, как сделать удобно, но и как порадовать, приучить, затянуть. Как мотивировать человека пользоваться сервисом чаще?

Десять лет назад проектировщики решали задачу «сделать удобно», а сегодня — задачу «улучшить жизнь»: заниматься спортом, регулярно учиться, разумно тратить деньги, сортировать мусор. Как интерфейсом холодильника помочь человеку правильно питаться?

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

Скрыт 1 разворот

Бир­ман Илья Борисович

Поль­зо­ва­тель­ский интерфейс

  • Арт‑дирек­тор и изда­тель Артём Горбунов

  • Дизай­нер обложки и фото­граф
    Вла­ди­мир Колпаков

  • Иллю­стра­тор Андрей Кокорин

  • Раз­ра­бот­чики Рустам Кул­ма­тов
    и Васи­лий Половнёв

  • Мет­ран­паж и тести­ров­щик Сер­гей Фролов

  • Помощ­ники Юрий Мазур­ский
    и Алек­сандра Шабалдина

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

Бирман Илья Борисович

Пользовательский интерфейс

  • Арт‑директор и издатель Артём Горбунов

  • Дизайнер обложки и фотограф
    Владимир Колпаков

  • Иллюстратор Андрей Кокорин

  • Разработчики Рустам Кулматов
    и Василий Половнёв

  • Метранпаж и тестировщик Сергей Фролов

  • Помощники Юрий Мазурский
    и Александра Шабалдина

  • Книга набрана шрифтами
    «Бюросериф» и «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015