Головна » UI / UX » Створюйте макети пристроїв у браузері за допомогою DeviceMock

    Створюйте макети пристроїв у браузері за допомогою DeviceMock

    Ви можете знайти безліч макетів безкоштовних пристроїв в Інтернеті, починаючи від PSD до файлів Sketch. Але, що, якщо б ви могли швидко створювати макети пристроїв на льоту у вашому браузері?

    Добре, завдяки людям у rm-labo, ви можете! Їх безкоштовний плагін jQuery, DeviceMock.js, дозволяє оберніть векторний пристрій навколо будь-якого елемента сторінки, використовуючи прості JavaScript і SVG.

    Отже, як саме це працює?

    Ну, спочатку вам потрібно копію jQuery і версія плагіна DeviceMock від GitHub. Цей файл поставляється з файлом JS, файлом CSS і деякими файлами SVG для створення реальних пристроїв.

    Ти можеш націлювання на будь-який тип елемента на сторінці, від простого зображення до цілого div або навіть вбудованого елемента, такого як iframe. Це означає, що ви можете навіть створити класний міні-браузер прямо на вашому сайті з вказівкою iframe на іншу сторінку.

    Цей плагін підтримує п'ять різних типів пристроїв:

    1. веб-браузер
    2. Смартфон
    3. Планшет
    4. Робочий стіл
    5. Ноутбук

    Всі ці макети використовуються плоский стиль дизайну оскільки вони побудовані з SVG. І всі вони виглядають дуже схожими на пристрої Apple, наприклад, смартфон є клоном iPhone, а настільний монітор виглядає яскраво, як iMac.

    Всі ці вектори легко додати, і вони працюють в кожен браузер з підтримкою SVG.

    Можна навіть зміна властивостей такі як розмір макету, тема (білий / чорний) та орієнтація (портретний пейзаж).

    Якщо ви використовуєте макет браузера, ви можете навіть вкажіть фіктивний URL в адресному рядку. Це цікавий спосіб додати додаткові налаштування.

    Ця бібліотека не буде корисною для всіх, крім неї не вирішує проблему ніші що багато розробників UI / UX стикаються при створенні прототипів.

    Щоб дізнатися більше, відвідайте веб-сторінку Сторінка GitHub або перевірте живий сайт для активної демонстрації.