Как установить craft в invision

Sketch + Craft: союз, созданный на цифровых небесах

Sketch недавно обзавелся новым лучшим другом, имя которого Craft*

*Продукт создан талантливыми парнями из InVision Lab.

В прошлом я был ярым поклонником парочки плагинов Sketch, которые сэкономили мне уйму времени при работе с живыми данными – Content Generator и Unsplash It. Эти два плагина значительно облегчали труд огромного количество дизайнеров, которым нужно было вставить текст или картинки в их дизайны внутри Sketch.

Но с Craft все эти возможности собраны в маленький, аккуратный и быстрый инструмент. Я сделаю быстрый обзор этого потрясающего инструмента…

Скачайте Craft

Сначала перейдите на http://labs.invisionapp.com/craft и скачайте копию Craft. Установите его и дайте волю реальным данным!

1

Вернитесь в Sketch, вы увидите новую панель возле панели инспектора, а также новый пункт в панели меню.

1 jbOsOHQrf6i2yBGc4kLAIQ

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

Горячие клавиши для фото

Примечание: для папки и Dropbox вам, конечно же, придется указать папку из главной панели перед началом использования этих горячих кнопок.

Я создал простой экран News Feed для iPhone 6, который можно скачать здесь, и попробовать Craft в деле.
Теперь пройдемся по крутым возможностям Craft…

Текст

Прощай, Lorum Ipsum. И да здравствует плейсхолдерный текст обо всем, что есть в вашем дизайне. Заголовки, текст статей, даты и т.д… Вы можете даже добавить дополнительное действие в опцию добавления текста. Хотите, чтобы заголовки в блоге отображали все фильмы с Биллом Мюрреем? Не вопрос!

Горячая клавиша для быстрого перехода по текстовым фрагментам будет очень кстати в следующем обновлении.

1 pkYcLl7frInRZzADKwtHQQ

Импортируйте снимки из Dropbox, приватной папки или веб сайтов, прямо в ваш дизайн.

В Craft вы можете легко добавлять изображения в с дизайн Sketch. Craft предоставляет множество опций на выбор. Мой личный любимчик – возможность вставлять рандомные изображения из Unsplash. Но вы также можете довольно легко брать картинки из собственной папки на Dropbox, или даже из веба. Например, в прошлом я использовал картинки из UIFaces для аватарок.

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

1

1 uMOix8Hz1kI99XU BXBy w

Duplicate

А это еще одна действительно удобная опция для экономии времени. Я использовал в прошлом инструмент Grid (сетка), чтобы сделать дубликаты элемента нужное количество раз, предусмотреть нужные расстояния и т.д. или просто Alt + Drag. Опция Duplicate в Craft делает все вышеперечисленное, но автоматически заменяет изображения и текст теми, которые вы только что сделали. Не нужно вручную заменять картинки и текст.

1 bKHjSIEWk6eNh7

Styles

Возможность генерировать красивые руководства по стилю одним нажатием клавиши. Эксклюзивно для Sketch!

Я впечатлен работой InVision LABS и тем, что привнес в мою работу Craft. Нужно добавить всего несколько штришков. Нужно больше горячих клавиш, несколько улучшений в интерфейсе, чтобы он выглядел 100% родным в Sketch.

Источник

14 советов по использованию Sketch и InVision в работе дизайнера

image loader

Инвижн позволяет дизайнеру продемонстрировать заказчику прототип дизайна приложения, сделав его интерактивным. Кроме того, благодаря Инвижн, можно организовать слаженную работу внутри команды, между дизайнером, менеджером проекта, верстальщиком и программистами, независимо от платформы (macOs, Windows, Linux). Предлагаю вашему вниманию удобные сценарии использования связки Sketch + InVision.

Советы по подготовке прототипов в Sketch

1. Установите набор плагинов «Craft»

Craft — это великолепный набор плагинов, созданный компанией InVison LABS. Нас интересует плагин Sync, который позволяет прямо из редактора Скетч загружать артборды в Инвижн. Для этого, вначале нужно создать проект на сайте Инвижн, указав тип интерфейса (приложение для десктопа, планшета, телефона или часов).

image loader

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

image loader

Кроме того, дизайн можно выгружать в разрешениях @1x или @2x. Благодаря этому, ваш прототип будет великолепно смотреться на устройствах с ретина-дисплеями.

image loader

2. Один раздел — одна страница

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

image loader

3. Модальные окна на отдельных артбордах

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

image loader

Обратите внимание, что если у окна есть тень, то она должна быть внутри артборда, иначе она «обрежется» и не будет видна.

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

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

4. Состояния элементов

Если вы разрабатываете интерфейс для десктопа, то для выпадающих списков, и других элементов интерфейса нужно изобразить состояние «hover» (наведение курсором). Для этого, так же как и с модальными окнами, на отдельном артборде изобразите список в раскрытом виде и загрузите в Инвижн. У вас создастся отдельный экран с этим списком.

image loader

Далее, создаём область над заголовком списка, при наведение на который будет отображаться развёрнутое меню, выбираем «Screen as overlay» и экран со списком в раскрытом состоянии. Для того чтобы всё размещалась ровно, выбираем «Position — Top Left», «Transition — Fade in» и указываем координаты, которые можно подсмотреть в Скетче в панели Position.

image loader

5. Статусбар рисовать не нужно

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

image loader

6. Подготавливайте иконки и графику для экспорта

Благодаря недавним нововведениям в Инвижн появился Inspect Mode, через который верстальщики и программисты могут смотреть описание любых элементов, а так же экспортировать их. Какие элементы будут доступны для экспорта из Инвижн, и их размеры, определяет дизайнер в редакторе Скетч. Просто выберите элемент, укажите форматы и размеры для экспорта. Теперь этот элемент можно скачать в указанных форматах прямо из Инвижн.

image loader

Забыли настроить экспорт для какого-либо объекта? Не беда. Идём в Скетч, настраиваем экспорт элемента и синхронизируем артборд через плагин «Craft Sync». Готово, объект можно экспортировать из Инвижн.

Советы по работе в InVision

Инвижн весьма демократичны в ценовой политике. Для того, чтобы ознакомиться с функционалом, платить ничего не нужно, создание одного прототипа — бесплатно. Если вы фрилансер, который одновременно ведёт не больше трёх проектов, то вам подойдёт «Стартовый» тариф, за 15 долларов в месяц. На этом тарифе можно создавать до 3 активных прототипов. Причем, сколько прототипов у вас в архиве — не важно, главное, чтобы активных было не больше трёх. Я использую тариф «Professional» за 25 долларов в месяц. Он позволяет создавать неограниченное количество проектов. Более дорогие планы нужны для компаний, в которых над прототипами работает больше одного дизайнера.

image loader

7. Создавайте иконку приложения

Для прототипов мобильных приложений в Инвижн можно добавить иконку. Для этого нажмите на «Плюс» около названия проекта и выберите вашу иконку. Она будет отображаться при просмотре в браузере, а так же если «установить» приложение на мобильный (об этом в следующем совете).

image loader

8. «Устанавливайте» приложения на iOs

Если скопировать ссылку на проект в «Public share link» и вставить в браузере Сафари на мобильном, то в нём откроется ваше приложение. Нажмите на иконку «Поделиться» в браузере и выберите «На экран „Домой“». Теперь у вас на рабочем столе мобильного появилась иконка приложения, а само приложение можно посмотреть без адресной строки браузера. Трудозатрат — минимум, заказчик — в восторге, он может перемещаться между экранами на своей мобилке.

image loader

9. Создавайте хедер и футер в приложениях

Зачастую контент занимает больше одного экрана, и при его прокрутке необходимо закрепить хедер и футер. Для этого в режиме «Build Mode» перемещайте ползунки «Fixed Header» и «Fixed Footer». Теперь контент проматывается между ними.

image loader

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

10. Используйте шаблоны (templates) для навигации

Долгое время я не обращал внимания на эту мега-полезную возможность и для каждого экрана по новой создавал «кликабельные» области. На самом деле, для сквозных меню (тех, что есть на всех страницах сайта) нужно «кликабельные» области добавлять в «Шаблоны». Создаём область, выбираем куда ведёт клик по ней и добавляем в шаблон, например, «Sidebar».

image loader

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

image loader

11. Inspect Mode

Ранее я упоминал об этом нововведении Инвижн, но оно достойно отдельного пункта. Невозможность открыть файл в Виндоус до недавнего времени было большой проблемой для дизайнеров, вынуждающей использовать Фотошоп вместо Скетча. Для передачи файлов использовались различные сервисы, например Avocode или плагин Marketch. Также, недавно появилось бесплатное решение от ребят из Icons8, позволяющее открывать Скетч-файлы из-под Виндоус, за что им отдельное спасибо!

Как вариант решения проблемы подойдёт Inspect Mode в Инвижн. Он предоставляет такой же функционал как и перечисленные решения.

image loader

Для того чтобы он правильно работал — используйте плагин Craft Sync для выгрузки экранов. Добавляйте разработчиков к проекту и они получат доступ к этому режиму.

image loader

Причём, разработчику достаточно иметь бесплатный аккаунт, чтобы получить доступ в режиме Inspect Mode к любому количество ваших прототипов.

12. Создавайте комментарии и туры

Когда проектов и экранов много, масса времени уходит на выяснение в каком именно экране интерфейса нужно внести правки. Эта проблема легко решается если предоставить заказчику доступ к комментариям. Он кликает в нужном месте, и создает текстовый комментарий. Уведомление о нём упадёт вам на почту и будет доступно в Инвижн во вкладке «Comments». На комментарий можно написать ответ или уточняющий вопрос, а можно выполнить задачу и отметить комментарий как выполненный (Mark as resolved).

image loader

Бывает, нужно сделать не полноценный интерфейс, а обзорный тур по нему. Для этого в Инвижн есть функционал создания туров. Он работает по принципу комментариев. Вы создаёте одну или несколько точек на экране с текстовым описанием. Точки последовательно «проведут» пользователя по экранам, при помощи кнопок «Prev» и «Next». Пример маленькой презентации.

13. Храните историю версий

Если у вашей комнады нет необходимости в Inspect Mode и достаточно загрузки экранов в виде картинок, то есть возможность использовать хранилище версий в Инвижн. Для этого загружайте макеты при помощи программы «Desktop Sync App», а не плагина «Craft Sync». Вся история изменений вашего макета с возможностью скачать предыдущие версии будет доступна в разделе «Assets». Вот короткое видео об этом функционале.

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

14. Презентуйте дизайн онлайн (LiveShare)

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

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

Источник

Как передать дизайн в Sketch и InVision

4a27d1ac86b2aedca15f8f5313b7a0e2

Передача дизайна — это передача веб-дизайна или приложения из рук дизайнера в руки разработчика, который затем его кодирует. Это не всегда было легко. Разработчики обычно не используют программное обеспечение для дизайна, такое как Photoshop или Sketch, но им все равно нужно знать все о дизайне.

Какие цвета используются, в частности? Какие шрифты? Сколько места находится между этим элементом и этим элементом?

b4b97b597c70ae9dc06807c8ec139847

Почему InVision теперь мечта дизайнеров

И через некоторое время они добавили возможность:

И теперь вы можете синхронизировать свои проекты в InVision, и разработчики могут проверять их (и генерировать из них реальный код). Прототипирование, совместная работа, передача дизайна — круг завершен, все по одной подписке. Мечта дизайнеров, верно?

Установка Craft

b5ba25d18be87440c5a9ae85a240ff9d

После установки Craft for Sketch вы сможете переключать панель инструментов Craft с помощью команды + P.

5c2adc6838302d8ce06d0a12e2365303

Организация ваших слоев

Но прежде чем мы начнем поспешно передавать наш дизайн, мы должны сначала организовать его. Помните: разработчики могут не иметь под рукой инструментов дизайна из Sketch, но они по-прежнему видят дизайн таким, каким вы видите дизайн — это означает, что мы должны переименовать слои с неоднозначными именами, например, «Rectangle 41», во что-то вроде «Button Background», и удалить лишние / неиспользуемые слои.

Вот сочетания клавиш Sketch, которые вы должны знать:

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

3d64f31d88ab1599649ba118a428c787

Маркировка ваших экспортеров

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

Как обычно, выберите объекты, которые вы хотите экспортировать в качестве графических ресурсов, и нажмите «Make Exportable» в инспекторе, указав формат и разрешение файла, пока вы там.

Источник

Как установить craft в invision

Никакой «воды» – только ценная информация и работающие лайфхаки по веб-дизайну и программированию

mini img 1

Советы по использованию Sketch и InVision в работе дизайнера

tilda vertikalnyj

Сегодня хочу поделиться с вами знаниями о приложении Sketch и InVision. Эти советы помогут вам выбрать для себя необходимый набор инструментов для работы с дизайном интерфейсов.

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

Как подготовить прототип в Sketch

1. Устанавливаем набор плагинов «Craft»

Craft представляет собой набор плагинов компании InVison LABS. Хочу более подробно остановиться на плагине Sync, который позволяет загружать артборды из Sketch прямо в InVision. Для этого создаем проект на сайте Invision, указав тип интерфейса (приложение для десктопа, планшета, телефона или часов).

0 hmaKYXGsoF2KwIW

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

0pqErIOqupU79JbyF

Его можно выгружать в разрешении @1x так и «2x. Это обеспечит отличное отображение дизайна на устройствах с ретина-дисплеями.

09O7QqiXHT3k hKmG

2. Отдельная страница для каждого раздела

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

0 TUhNwj2WzWg708s

3. Создайте модальное окно на каждом артборде

InVision позволяет отображать модальные окна «перекрывая» контент. Раньше, чтобы показать модальное окно, необходимо было копировать артборд с контентом, сверху рисовался полупрозрачный оверлей, сверху которого создавалось модальное окно. Теперь все стало гораздо проще. Создавайте модальное окно непосредственно на артборде. Настройки слоя (положение, цвет, прозрачность оверлея) можно указать в InVision.

0FsSjKS8xOihEfsnA

Обращаю ваше внимание, что если у окна есть тень, то она должна находиться внутри артборда. В противном случае она «обрежется» и не будет заметна.

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

4. Состояния элементов

При разработке интерфейса для десктопа, выпадающие списки и прочие элементы нужно изобразить состоянием «hover» (наведение курсором). Для этого, так же как и с модальными окнами, на отдельном артборде изобразите список в раскрытом виде, который далее загружается в InVision. При этом создается отдельный экран с таким списком.

0nkfXXNfPZCr qhUr

На следующем этапе создаем область над заголовком списка, при наведении на который будет отображаться меню. Выбираем «Screen as overlay» и экран со списком в раскрытом виде. Чтобы все отобразилось красиво, выбираем «Position — Top Left», «Transition — Fade in» и указываем координаты, которые можно подсмотреть в Скетче в панели Position.

0lfj HfiIvTqo Wc0

5. Не рисуем статусбар

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

0JZ8u 2KGyTQPrNPY

6. Готовим графику и иконки для экспорта

0FrKXJ2w6jJdnFqdp

Если вы забыли настроить экспорт для конкретного элемента, просто перейдите в Sketch, настройте там экспорт элемента и синхронизируйте через плагин «Craft Sync».

Советы по работе в InVision

Ценовая политика Инвижн довольно демократична. Бесплатно они предлагают только создание одного прототипа и знакомство с функционалом. Фрилансерам, которые ведут не более трех проектов, подойдёт «Стартовый» тариф. Он обойдется за 15$ в месяц. Такой тариф позволяет создать не более трех прототипов. И не имеет значения, сколько у вас прототипов в архиве, активных должно быть три.

0oGkFwoGB6od3Rlxw

Существует тариф «Professional», который обойдется за 25$ в месяц. В нем доступно неограниченное число проектов.
Остальные тарифы подойдут исключительно для крупных компаний, где работает штат дизайнеров.

Инвижн позволяет разработчикам из под Windows верстать макеты или приложения, созданные в Скетче. 25$ в месяц это гораздо дешевле, чем купить всему штату Маки =)

7. Иконка приложения

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

0FOkM1Z3v3jh77pgm

8. «Устанавливайте» приложения на iOs

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

0hx3f1MbcKGDDjUYR 666x1185

9. Создаем футер и хедер в приложении

Очень часто весь контент не помещается на один экран, при его прокрутке нужно закрепить футер и хедер. В режиме «Build Mode» перетащите ползунки «Fixed Header» и «Fixed Footer». Теперь контент размещен между ними.

0ZN7wTOU1Fg KJtri

Пока в Инвижн нет такой возможности закреплять сайдбар слева или справа в прототипе.

10. Шаблоны для навигации

Чтобы не создавать для каждого экрана кликабельные области, их нужно добавлять в «Шаблоны». Создавайте область, выбирайте куда ведет клик по ней и добавьте в шаблон, например, «Sidebar».

0l5l865fs9BlPA7O

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

11. Inspect Mode

Невозможность открыть файл на Windows — совсем недавно это было реальной проблемой для дизайнеров. Это обязывало их использовать Photoshop вместо Sketch. Для передачи файлов нужно было использовать различные плагины или сервисы, например Avocode или плагин Marketch. Но недавно появилось решение от ребят из Icons8, которое дает возможность открывать Скетч-файлы из-под Windows.

Как вариант решения проблемы подойдёт Inspect Mode в Инвижн. Он предоставляет такой же функционал как и перечисленные решения.

0CKu5yNhS1 F4acrA 666x506 1

Для корректной работы плагина используйте плагин Craft Sync для выгрузки экранов. Добавляйте разработчиков к проекту и они получат доступ к этому режиму.

0FOkM1Z3v3jh77pgm 666x72 1

Разработчику достаточно иметь бесплатный аккаунт и он получит доступ в режиме Inspect Mode к любому количеству ваших прототипов.

12. Предоставьте заказчику доступ к комментариям

Когда много проектов, а экранов в каждом из них еще больше, масса времени уходит на то, где именно нужно внести правки. Чтобы устранить эту проблему предоставьте заказчику доступ к комментариям. Он кликает в определенном месте и создает комментарий. Уведомление об этом приходит к вам на почту и будет доступно во вкладке «Comments» в Инвижн. Можно написать ответ на комментарий или выполнить правку, при этом отметить комментарий как выполненный.

0z4qq2fKKhpNA5QQb

13. Хранилище версий

Если у вас нет необходимости в Inspect Mode, и достаточно загрузки экранов в виде картинок, то есть возможность использовать хранилище версий в Инвижн. С помощью программы «Desktop Sync App» загрузите макеты, а не плагина «Craft Sync». Это даст возможность сохранить всю историю изменений в проекте, которые доступны в разделе «Assets».

История версий не создаётся при выгрузке данных плагином «Craft Sync», очень жаль.

14. Онлайн презентация дизайна

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

Sketch и InVision дают возможность создавать и улучшать пользовательские интерфейсы. В Инвижн, однозначно, есть что доработать, при этом это хороший вариант для презентации дизайн-задач. А если учесть, что над Инвижн постоянно ведётся осмысленная работа и регулярно внедряются отличные решения, то стоит попробовать его в своей работе!

Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна для начинающих, и учиться Вам теперь станет в удовольствие!

Источник

Adblock
detector