Chulakov Design
Дизайн
Подписаться

CJM

После того, как вы тем или иным образом сформировали персонажей, разумным решением будет составить customer journey map, он же
- пользовательский сценарий.

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

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

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

У Максима заболел живот. Это его беспокоит, и он включает приложение. В нем есть доктор Мария, к которому Максим уже ходил. Он заходит в приложение и видит, что врач сейчас доступен для связи. Он отправляет сообщение с жалобой. Доктор Мария видит на экране телефона входящее уведомление из своего приложения. Она отвечает, что выпишет ему препараты для снятия симптомов и назначит приём. Мария вспоминает, что Максим когда-то приходил на приём, но подробностей она не помнит. Она заходит в профиль Максима и видит, что полгода назад он приходил к ней с подобной жалобой, и она поставила ему диагноз гастрит, сделала пометку о жалобах и выписала такие-то лекарства. Она смотрит, делает выводы из этого и назначает Максиму лекарства для снятия симптомов. Мария выбирает заготовленный заранее и проверенный курс из своей виртуальной аптечки, но приложение предупреждает, что у Максима есть аллергия на один из препаратов. Она заменяет его на подходящий аналог, корректирует некоторые параметры курса и делает назначение. Максиму приходит уведомление. Он соглашается с курсом. В расписании приёма лекарств теперь есть напоминания, благодаря которым он не будет забывать пить таблетки. Если Максим захочет, он сможет их отключить. Исходя из ранее поставленного диагноза, Мария решает что нужно проверить Максима с помощью специального оборудования, смотрит свой список назначенных приемов и выбирает время для Максима. Максиму приходит уведомление, он заносит его в свои предстоящие события. Завтра он получит уведомление о приеме ровно за 2 часа.

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

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

Другие статьи канала Chulakov Design

Chulakov Design
Дизайн
Подписаться

Отличные новости для читателей нашего канала! Если вы занимаетесь дизайном интерфейсов и мечтаете попасть в команду Студии, у вас есть шанс.

Покажите нам все ваше мастерство, выполнив тестовое задание. Принимаем работы до 7 апреля.

Все подробности по ссылке: https://chulakov.ru/career/designer-6

Chulakov Design
Дизайн
Подписаться
10 правил хорошего юзабилити

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

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

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

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

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

ЧитабельностьШрифт и текст легко читаются согласно контексту использования. На пробежке человек видит крупные цифры своей активности, а когда читает длинный текст, то не напрягает глаза.

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

АнимацияАнимация подсказывает пользователю, что произошло, и что с этим делать.

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

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

Chulakov Design
Дизайн
Подписаться
Манипуляции Средний попкорн придумали для того, чтобы продавать большой.

Многие люди покупают в кинотеатрах огромные ведра подслащенной кукурузы с мыслью о выгодной покупке: всего 20 рублей разницы со средним стаканом, а попкорна в два раза больше! Уберите из меню среднюю порцию, и продажи больших резко сократятся из-за сильного контраста цен. У этого явления есть термин
- «синдром упущенной выгоды». И он также работает в дизайне интерфейсов.

Как часто, выбирая гостиницу на предстоящий отпуск, вы натыкаетесь на красное сообщение «Осталось всего 2 номера!»? Параллельно с этим где-то в углу вы видите ненавязчивую, но заметную плашку «Прямо сейчас этот номер смотрят 6 человек» или «Похожий номер был забронирован минуту назад». Вам начинает казаться, что этот прекрасный номер с личным бассейном и кондиционером вот-вот выскользнет у вас из рук. Спустя минуту вы уже вбиваете номер своей карты в блок оплаты, пытаясь «перегнать» мифических конкурентов. Главное
- не заходить после этого на сайт, иначе есть возможность расстроиться, увидев этот же номер, но дешевле.

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

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

Chulakov Design
Дизайн
Подписаться
Контраст.

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

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

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

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

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

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

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

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

Chulakov Design
Дизайн
Подписаться

Это уже было

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

Новые «фишки» можно искать в разных сферах.

Визуальное: новое сочетание цветов, стиля фотографий, 3D.

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

UX: идеи в навигации, подсказках, формах ввода
- все, что сможет по достоинству оценить пользователь.

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

Такой подход сделает ваше портфолио интересным и разнообразным. Это позволит привлечь внимание ваших потенциальных клиентов и убедит их выбрать вас исполнителем.

Chulakov Design
Дизайн
Подписаться

Модальные окна

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

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

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

СодержаниеКопирайт модальных окон должен соответствовать tone of voice бренда, для которого вы проектируете сайт или приложение. Если конкретных требований по текстам у заказчика нет, создайте впечатление общения приложения с пользователем. Составляйте закрытые вопросы, на которые можно ответить «Да» или «Нет», и тогда у посетителя никогда не возникнет мысли «Что от меня хотят?» и «Что нажимать?»

РасположениеЦель модального окна
- сохранение контекста той страницы, на которой пользователь находился. Поэтому «всплывашка» не должна быть слишком большой или слишком маленькой. Она должна быть легкой во взаимодействии и хорошо заметной (но без фанатизма). Если в какой-то момент вы понимаете, что без скролла не обойтись, подумайте об отдельной странице.

Пути отходаСамое важное
- дайте пользователю возможность беспрепятственно закрыть окно. Это может быть кнопка отмены, перекрестие «закрыть», клик (тап) за пределами окна. Также можно добавить возможность закрытия по клавише «Escape».

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

Chulakov Design
Дизайн
Подписаться
UI KIT vs DESIGN SYSTEMПочему дизайн-системы стали так популярны?

UI KIT vs DESIGN SYSTEM

Почему дизайн-системы стали так популярны? Потому что это едва ли не единственная возможность сделать качественный дизайн крупного сервиса и поддерживать его.

UI Kit в том виде, в котором его привыкли видеть, морально устарел и всё меньше используется дизайнерами в качестве инструмента. Но часто про дизайн-систему говорят как про «сложный UI kit». Рассмотрим основополагающие отличия и преимущества.

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

Но главное отличие дизайн-системы от UI Kit-а не в сложных компонентах и даже не в реализации их в коде, а в принципах и правилах, на которых она построена.

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

Начинайте работу над дизайн-системой после утверждения концепции и включайте в неё всё необходимое по мере продвижения проекта. Это позволит упорядочить работу над сложным сервисом и упростит жизнь дизайнеру и разработчику.

Chulakov Design
Дизайн
Подписаться
Еще быстрее Для успешного развития всегда необходимо повышать производительность.

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


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

Лайфхак: клавиша CapsLock довольно большая, находится в удобном месте на клавиатуре, но не используется. Ее можно переназначить, например, на Ctrl и использовать для равнения слоев сочетанием Ctrl(CapsLock) + W / A / S / D, которое очень легко запомнить)


2. Уделяйте внимание системной организации материалов.Разделяйте входящие материалы от клиента и те, которые создаете вы сами. Внутри этих двух папок тоже можно разграничить файлы по типам: графика / тексты / прототипы / дизайн.


3. Создавайте версии.Чтобы не раздувать размер файла, периодически очищайте от мусора, но имейте возможность вернуться к любой из версий.


4. Используйте плагины, если работаете в Sketch.Они значительно расширяют функционал, а также позволяют назначить хоткеи на недоступные ранее команды. Например Efficiency позволит назначить блокировку на пропорции слоя.


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


6. Создайте библиотеку иконок.Самые часто используемые иконки храните в отдельном файле или специальном софте (например, Iconjar). Туда могут войти иконки соц.сетей, стандартные material / ios иконки (профиль, звонки, почта, фильтр и т.д.), навигационные стрелки, загрузить и скачать и т.д. В результате вам не придется каждый раз тратить время на поиск нужных пиктограмм.


7. Отключите уведомления.На время работы старайтесь избавиться от информационного шума и бесцельных разговоров. Если вы срочно понадобитесь кому-то из знакомых, они вам позвонят. В противном случае вы можете даже не заметить, что уже третий час не занимаетесь задачей, а переписываетесь в дизайнерском чатике и листаете dribbble.


8. Тестируйте идеи быстро, не углубляясь в детали.


9. Старайтесь меньше переключаться с проекта на проект.

Chulakov Design
Дизайн
Подписаться
Push me Скорее всего, вы узнали о новой заметке в канале благодаря push-уведомлению.

Этот нехитрый прием
- один из основных нативных приемов удержания внимания пользователей.

Это микровзаимодействие может быть как полезным, так и паразитирующим. Полезными являются уведомления о списании средств с карты, о прибытии такси по адресу, о новом письме на почту (если это не спам). Как только приложение начинает злоупотреблять вниманием, посылая бесполезные сообщения вроде «Эй, тебя давно не было! Скорее возвращайся и захвати еще пару замков!», это в определенный момент начнет раздражать пользователя. В лучшем случае, он отключит уведомления в настройках, в худшем
- избавится от приложения навсегда.

Уведомление должно быть кратким. Если вы получили sms с кодом подтверждения какой-либо операции, а нужный код находится в самом конце сообщения, он не попадет в превью на пуше. Это неудобно. Емкий информативный вариант «Ваш код – ХХХХ» будет значительно лучше.

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

Chulakov Design
Дизайн
Подписаться
Быстрый доступ8 способов ускорить взаимодействие с интерфейсом и упростить жизнь человека.

Быстрый доступ

8 способов ускорить взаимодействие с интерфейсом и упростить жизнь человека.

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

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

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

Полноценный блокИногда быстрые действия могут быть не кнопкой, а полноценным функциональным элементом. Например, на главной странице банка может быть расположен блок перевода денег с карты на карту.

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

ПовторениеШаблон или история действий позволяют не вбивать каждый раз всю информацию.

ПоискЗдесь речь не только о главном поиске на сайте, но и об обычном поиске по списку. Например, в iOS быстрый поиск есть практически в каждом нативном приложении, содержащем списки.

ИзбранноеИногда стоит давать пользователю самому управлять быстрыми действиями
- кастомизировать панель инструментов или помечать звездочкой определенные сущности.

Быстрые действия могут не только упростить жизнь пользователя, но и существенно увеличить прибыль компании ?

Chulakov Design
Дизайн
Подписаться
Поведение пользователя

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

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

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

Chulakov Design
Дизайн
Подписаться

60/30/10

Определившись с цветовой палитрой, дизайнер приступает к созданию дизайн-концепции сервиса. Чаще всего он использует цвета интуитивно, не догадываясь, что у процесса окрашивания есть свое «золотое сечение».

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

60%
- доминирующий оттенок;
30%
- вторичный цвет;
10%
- акцентный цвет.

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

Chulakov Design
Дизайн
Подписаться
Обратная реакция

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

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

может служить также для эмоциональной связи с пользователем и выходить за пределы визуальной составляющей. Так в игровых приставках производители часто внедряют характерную вибрацию джойстика, и тактильное взаимодействие становится частью игры, подогревая эмоции. Компания Apple пошла тем же путём и внедрила отдачу в виде вибрации. Айфон реагирует микровибрациями на Force touch и многие другие действия. Это упрощает взаимодействие с интерфейсом, делая его более «живым». Кстати, те же задачи может выполнять и звук.

Обратная связь является неотъемлемой частью любого интерфейса, но порой она недооценивается дизайнерами. Рассматривайте вопрос взаимодействия как отдельный этап в создании интерфейса, чтобы ваш интерфейс был «вежливым» и отвечал человеку взаимностью❤️.

Chulakov Design
Дизайн
Подписаться
Поиграйте со шрифтами Человек воспринимает окружающий мир образами, которые он уже видел.

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

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

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

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

Chulakov Design
Дизайн
Подписаться
H1 От качества типографики зависит восприятие 80% дизайна интерфейса.

Типографика задает ритм повествования, настроение и характер страницы. Чтобы пользователь не терялся от страницы к странице, важно продумать Style page. Разберем базовые принципы построения типографики в интерфейсах.

Основа типографики может отличаться от сайта к сайту, но структура чаще всего общая:

Заголовок (H1). Его задача привлечь читателя и направить на второй уровень. Большинство людей прочитают этот заголовок, и гораздо меньшее
- прочитают остальной текст. Поэтому заголовок должен быть максимально контрастным, броским и информативным.

Дополнительные заголовки (H2, H3, по необходимости
- до H6). Цели дополнительных уровней схожи с целями главного заголовка, но в меньшем масштабе. Они направляют читателя и удерживают его внимание. Все эти уровни должны заинтересовать посетителя сайта, стимулировать его читать дальше. В то же время дополнительные заголовки должны быть достаточно контрастными с основным текстом и друг с другом.

Основной текст. Важнейший его параметр
- удобочитаемость. Текст не должен сливаться с фоном, не должен быть слишком мелким, и точно не должен быть написан апперкейсом (капсом). Рекомендуемая ширина столбца для длинных текстов
- до 600 px в зависимости от размера кегля.

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

Списки (нумерованные и маркированные). Приветствуется использование стиля обычного текста, но следует проверить межстрочные интервалы и параграфы для удобного чтения и визуального разделения каждого из пунктов списка.

Ссылки и кнопки. Разработать кликабельный стиль ссылки недостаточно, нужно также продумать обычное состояние, ховер, в частных случаях нажатое и неактивное (некликабельное) состояние.

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

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

Рейтинг авторов

  • "Записки Дизайнера" (про дизайн и только про него 157 157 157
  • (Не) только немецкий 157 157 157
  • #анямастерконтента 157 157 157
  • #Фудтех 157 157 157
  • 10 идей и трендов дня 157 157 157
Показать весь рейтинг
Загрузка ...