Mockup.io — сервис для демонстрации макетов iOS интерфейсов

    image

    Коллеги, за последние 2.5 года я со своей командой работали над более чем 40 iOS приложениями и более 100-и их версий. За это время мы увидели тясячи заготовок, макетов и финальных дизайнов. С каждым проектом мы все больше усваиваем важность части дизайна в процессе разработки. В связи с чем мы рискнули создать свой продукт, о котором я хочу рассказать сегодня.

    Mockup.io — сервис для демонстрации макетов интерфейсов под iOS


    С его помощью можно действительно удобно демонстрировать мокапы в броузере или сразу на iPhone и iPad
    • Режимы просмотра автоматически подстраиваются под устройство клиента
    • В веб версии для десктопа есть 3и режима просмотра: Grid, Realistic, Fullsize
    • Быстрая навигация с помощью клавиатуры (hot keys)
    • Переименование, перестановка, добавление и удаление макетов на лету (ajax, drag&drop)
    • Для большей реалистичности на iOS устройстве можно добавить проект, как WebApp на спрингборд
    • Для демонстрации клиенту достаточно выслать короткую ссылку, например, mockup.io/9859

    В первую очередь мы стремились решить наши внутренние насущные проблемы. Уже сейчас мы используем Mockup.io – показываем мокапы как внутри команды, так и заказчикам и друзьям для получения фидбекa.

    В планах:

    • iOS приложение в App Store
    • QR–коды для быстрого просмотра с мобильных устройств
    • Drag&drop новых версий макетов поверх старых
    • Версионность макетов
    • Комментарии
    • API
    Текущая версия простая, но уже полезная. Для начала работы нужен Google Account.
    Будем рады услышать ваше мнение и пожелания.

    Mockup.io

    Средняя зарплата в IT

    120 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 9 250 анкет, за 1-ое пол. 2021 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 37

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

      Спаисибо.
        +2
        Зашел, авторизировался, cl.ly/AVVM и чего делать дальше?
        Нажал Mockup cloud, и мне предлагают войти снова.
        Непорядок.

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

            Похоже, что редактирование более важная операция на этом экране.
          0
          Похоже, что вы в режиме просмотра пустого проекта. Нужно перейти в писок проектов и нажат Карандашик для редактирования проекта.

          ПС. Будем дорабатывать :)
            0
            Перетягивание, это конечно хорошо и в стиле iOS, но добавьте пожалуйста еще и выбор файла по клику.
              0
              Для чего выбор файла? что бы переставлять или удалять сразу несколько?
                0
                Нет :) Чтобы добавлять один или сразу несколько (я о снимках экрана).
                  0
                  В Safari и Chrome можно бросать любое количество макетов в нужную область для добавления в проект. Должны подгрузится :)
              0
              нажал карандаш, и что дальше?

                0
                Нужно перетащить файлы на блок с надписью «drop files here to add». По-русски это переводится как «что бы добавить файлы бросайте сюда <-»
                  +1
                  сходил по ссылке на mockup.io/9859, как я понял — сервис просто показывает скриншоты UI в обертке устройства? интерактива нет?
                    0
                    В текущей версии демонстрация это скриншоты в обертке или без в зависимости от устройства с которого смотрят.

                    Что еще нужно для демонстрации?
                    Какой именно интерактив?
                      +3
                      можно добавить некоторой обработки на тапы, сделать поддержку хотя бы стандартных navigationbar и tab bar.

                      дизайнер рисует 5 экранов, и размечает на них области (или же predefined стандартных размеров в зависимости от количества кнопок) где пользователь будет тапать. и соответственно указать на какую картинку перейти.

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

                      в будущем можно сделать минимальный конструктор, чтобы tab bar был отдельно от картинок, т.к. даст возможность реализовать некоторые скроллируемые части интерфейса, navbar с back кнопкой и т.п. всё равно нормальный дизайнер в фотошопе когда рисует, части GUI раскладывает по папкам.

                      имхр такой сервис более интересный.
                      сейчас я пользуюсь тем, что отправляю full size макеты клиенту на почту, он сохраняет их в галерею и смотрит через просмоторщик.
                        +1
                        Когда я заходил в тему я именно этого и ожидал, например.
                          0
                          1. Да, такой конструктор это интересно. Похоже, что самый интересный и универсальный вариант это задавать области тапов, по которым делать переходы на другие экраны. Может тип анимации потом добавить.

                          Вообщем мы думаем в этом направлении, но эти сложные фичи не в первой десятке. :)

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

                          Вместо этого мы отсылаем линк для просмотра один раз всем, кому надо. И при поступлении новых макетов только пишем сообщение об обновлении. И теперь даже если итераций 10 и больше, то для повторного просмотра нужно открыть тот же линк на любом девайсе. Причем на iOS это особенно удобно, если добавить иконку-линк на спрингборд.
                            0
                            Примерно тоже самое делал в Axure. Только смотреть можно было из браузера на компьютере.

                            Если бы такой функционал был на iOS-девайсе, цены бы ему небыло! ;)
                              0
                              Да, это все реально. Нам бы то же такого хотелось, но реадко и дорого делать.
                              0
                    +1
                    Понравилось, надеюсь проект будет развиваться и дальше.
                      0
                      Обязательно будет. Он же нужен нам самим.
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        Вот такой вопрос: Зачем версионность? Сидели-сидели, думали-думали и пока не понятно зачем таки делать версионность. Только для понтов.
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            Спасибо. Примерно такие и у меня мысли. Я пока не уверен насколько это критично.

                            Хороших выходных! :)
                        +1
                        Идея хорошая! Предлагаю еще несколько функций:
                        — кнопочка «распечатать» — собирает все макеты в единую страницу (или несколько страниц, если макетов много)
                        — может быть сделать не только комментарии, но и какие-то элементы с помощью которых можно указывать на то, к чему относится комментарий. Типа «смести эту фиговину на полпальца ниже» (ну а стрелочка будет указывать на ту «фиговину»)
                          0
                          Классно! Впишите их в систему фидбеков, пожалуйста.
                          +1
                          Приятный дизайн, но у вас картинка айфона в горизонтальном положении отзеркалена почему-то. Кнопки звука и камера с другой стороны, блик на кнопке «хоум» сбивает с толку. Вы боитесь, что выступы из корпуса помешают вам красиво положить айфон на пол? :)
                            0
                            И правда, вот прикол :)
                            Спрошу у дизайнер, может таки такая задумка.
                            0
                            Народ, топик попал на первую. Может открыть его для всех?
                              +2
                              не хватает видео — как пользоватся…
                                0
                                Это 100%! Как только доделаем план минимум, то сразу будет видео.
                                Просто не хочется после каждой классной фичи переделывать.

                                В связи с этим вопрос: ЕСТЬ ТУТ ТАЛАНТЫ ПО ИЗГОТОВЛЕНИЮ ПРОМО РОЛИКОВ?
                                0
                                Нравится не только сервис, но и приложения которые вы делаете. Спасибо! ;)
                                  0
                                  О, замечательно!

                                  По секрету всему свету, нашей основной деятельность есть бизнес приложения, т.е. «enterprise market». Но мы на пути к модели 70/30, где 30% времени будет сфокусировано уделяться своим проектам. Будем надеятся что уже к концу года будет качественных сдвиг по этому вопросу.

                                  Пользуясь случаем: мы всегда рады новым талантливым коллегам. Если есть желание поработать, присылайте мотивационное письмо с примерами работ. Можно и резюме.
                                    0
                                    Собственными проектами интереснее заниматься и развивать. Удачи!

                                    Желание есть. Обязательно напишу после 10-го октября.
                                    p.s. Уже выложил в ваш сервис новый проект (: http://www.mockup.io/fe17#!/
                                  0
                                  Авторизовался. Создал проект. Зашел редактировать, а там пусто — clip2net.com/s/1d12R
                                  FF последней версии под Win XP.
                                    0
                                    А точно нажали на Карандашик для перехода в режим редактирования?
                                    Просмо мы пользоемся Chrome и Safari. До остального пока не добрались.

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

                                  Самое читаемое