Створюйте макети пристроїв у браузері за допомогою DeviceMock
Ви можете знайти безліч макетів безкоштовних пристроїв в Інтернеті, починаючи від PSD до файлів Sketch. Але, що, якщо б ви могли швидко створювати макети пристроїв на льоту у вашому браузері?
Добре, завдяки людям у rm-labo, ви можете! Їх безкоштовний плагін jQuery, DeviceMock.js, дозволяє оберніть векторний пристрій навколо будь-якого елемента сторінки, використовуючи прості JavaScript і SVG.
Отже, як саме це працює?
Ну, спочатку вам потрібно копію jQuery і версія плагіна DeviceMock від GitHub. Цей файл поставляється з файлом JS, файлом CSS і деякими файлами SVG для створення реальних пристроїв.
Ти можеш націлювання на будь-який тип елемента на сторінці, від простого зображення до цілого div або навіть вбудованого елемента, такого як iframe. Це означає, що ви можете навіть створити класний міні-браузер прямо на вашому сайті з вказівкою iframe на іншу сторінку.
Цей плагін підтримує п'ять різних типів пристроїв:
- веб-браузер
- Смартфон
- Планшет
- Робочий стіл
- Ноутбук
Всі ці макети використовуються плоский стиль дизайну оскільки вони побудовані з SVG. І всі вони виглядають дуже схожими на пристрої Apple, наприклад, смартфон є клоном iPhone, а настільний монітор виглядає яскраво, як iMac.
Всі ці вектори легко додати, і вони працюють в кожен браузер з підтримкою SVG.
Можна навіть зміна властивостей такі як розмір макету, тема (білий / чорний) та орієнтація (портретний пейзаж).
Якщо ви використовуєте макет браузера, ви можете навіть вкажіть фіктивний URL в адресному рядку. Це цікавий спосіб додати додаткові налаштування.
Ця бібліотека не буде корисною для всіх, крім неї не вирішує проблему ніші що багато розробників UI / UX стикаються при створенні прототипів.
Щоб дізнатися більше, відвідайте веб-сторінку Сторінка GitHub або перевірте живий сайт для активної демонстрації.
