Moqups — новый сервис для создания макетов UI

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



    Для Chrome есть отдельное приложение.

    На данный момент доступно более 60 шаблонов элементов, экспорт в PDF и PNG, клавиатурные шорткаты, группировка объектов, привязка к сетке и проч.

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

    Подробнее
    Реклама
    Комментарии 95
    • 0
      На маке у кого-нибудь шорткаты работают в сафари??? Тоже самое у меня с мокингбердом…
      • 0
        Работают (10.6.8, 5.1.7 (6534.57.2))
      • +1
        регистрация через что-то известное (твиттер, fb, google, yandex, итд), кажется уже стандарт.
        • 0
          Да, вход через соц сети был бы очень кстати.
          И еще, люди, не делайте уникальным имя пользователя! Это доставляет массу проблем при регистрации. Есть же email уникальный у каждого!
          • 0
            Кстати, да.
            Но при регистрации исключительно через уже имеющуюся учетную запись другого сервиса этот вопрос вообще не встает.

            Зачем делать свою отдельную базу пользователей, я не понимаю уже несколько лет.

            Разве что, что бы было откуда утащить хеши?
            • 0
              Чтобы связывать информацию из разных соцсетей?
              • 0
                Ага, а потом мне разные сайты говорят «вот сначала зарегистрируйтесь во вконтактике, а потом приходите». Ну я и ухожу. Совсем.
                • 0
                  конечно, если авторы сайта выбрали в качестве «провайдера учетной записи» исключительно вконтакте, то очевидно они решили, что аудитории этого ресурса им достаточно.

                  Я тоже ухожу с сайтов, которые требуют наличие у меня регистрации на сервисах, которыми я не пользуюсь.
                  Но точно так-же мне нужна сильная мотивация, что бы регистрироваться на «еще одном сайте», при наличии учетных записей в гугле, фейсбуке, твиттере, яндексе. Кого забыл?
                  • 0
                    А если у меня нету учетки в гугле, фейсбуке, твиттере, а яндекс аккаунт я не хочу палить лишний раз, так как там деньги лежат?
                    • 0
                      Если у вас нет учетки, вам всё равно её нужно где-то сделать.

                      Лично я гуглю/яндексу доверяю больше, чем молодцам ребятам, которые делают клевые сервисы.

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

                      Решающий момент не в вас, и не во мне, а в выборе аудитории и сервисе для пользователя. Со стороны разработчиков, это такой-же выбор, как и у вас — заводить ли где-то учетку (хоть в этом сервисе, хоть на стороне) или нет.
                      • 0
                        Я совсем не против, если сольют хеш от моего пароля на конкретном сайте. Гораздо хуже, если будет скомпрометирована «корневая» учетка.

                        Или вы говорите о тех клинических случаях, когда 1 пароль используется на массе сайтов?

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

                        Я реально не понимаю, на что расчитывают создатели сайтов, которые заставляют регистрироваться, а порой еще и чиркнуть пару сообщений на форуме, скажем, для простого скачивания. Такой ресурс ничего не получит кроме огромной базы мертвых душ, засранного форума и разгневанных пользователей, которые будут искать прямую ссылку на 3 минуты дольше. Я же про этот ресурс забуду через 15 минут.
                        • 0
                          Нет, я говорю о том, что при авторизации через другой сайт, пароль у сервиса вообще не хранится.

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

                              В любом случае, мы уходим в странные дебри. Я хотел обратить внимание на два момента
                              1. удобство аутентификации на сайте (не требуется регистрация)
                              2. потенциально более высокая защищенность учетных данных

                              Если для вас эти моменты не важны (или вы такие возможности наоборот считаете минусом), то вашу ситуацию я могу понять, но обсуждать смысла не вижу.
                              • 0
                                Скажу проще: мне гораздо проще зарегать фейкоаккаунт на очередном говносайте, чем зарегать фейк на всяких там гуглях / вконтактиках (ну не купил я килограмы симок). Поэтому на таких сайтах, которые НЕ предоставляют своей регистрации, я вообще никогда не регистрируюсь. Банально не могу. К счастью, в 2012 году такие сайты не особенно и нужны.
                                • 0
                                  Да о чём спор? Должно быть и то и то и OpenID :-)
                                  Сайты, которые не дают зарегистрировать аккаунт с помощью классической пары email+пароль, явно отдают несерьёзностью.
                                  С другой стороны дополнить классический вариант авторизацией через соц.сети мало кому мешает.
            • 0
              Отличный сервис ) нравится и очень удобно ) жалко при создании страницы нельзя сразу указать размеры ((.
              • 0
                Ну почему же comic sans обязательно надо было сувать?
                • +2
                  Comic Sans там не первый:
                  html.font-handwritten .stencil, html.font-handwritten .stencil-grouped, .preview-font.font-handwritten {
                    font-family: "Chalkboard", "ChalkboardSE-Regular", "Comic Sans MS", sans-serif;
                  }
                  

                  А вообще подобные шрифты обычно используют, чтобы было видно, что это набросок, а не дизайн.
              • +1
                похоже что нет элементов интерфейса android
                • +1
                  Хороший старт, главное, что бы в подписку за космическую цену не скатились! Уже в закладках.
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • +1
                      Это не визуальный редактор формочек, а инструмент для создания прототипов, если что… Вы не поняли сути, за это и минусы.
                      • 0
                        Кроме Делфи, кстати за 15 лет придумали много других дизайнеров форм для ОС-ных приложений. Не слышали? :)
                      • +2
                        Йеееес, наконец-то нашелся нужный сервис, спасибо, будем юзать и улучшать!)
                        • +1
                          Посмотрите еще на www.balsamiq.com/products/mockups
                          • 0
                            И веб-версию Balsamiq mockups
                            • 0
                              Она же урезанная если не платная, а эта пока бесплатная, поэтому и выигрывает (наверное :)
                          • 0
                            Я использую mockflow.com/
                            4 страницы можно сделать бесплатно.
                            • 0
                              Ну и лидер в этой области — Pencil Project конечно же.
                            • +4
                              Отличный сервис, на первый взгляд.
                              Надеюсь, будет не хуже чем Бальзамик мокапс и если выпустят iPad клиента — вообщу будет сказка ))
                              • 0
                                У mockups.me/ кроме десктопной и браузерной есть ipad-версия. Разработчик обещал апдейт под ретину выкатить в ближайшее время. Экспорт/импорт в balsamiq присутствует.
                              • +1
                                а почему нет собственно экспорта в html?

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

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

                                  Надеюсь, они еще добавят кнопочки социальных сетей для интеграции, что бы их можно было драг-н-дроп'нуть на макет, ибо сегодня они есть на многих сайтах (ФБ, ВК, ОК и т.п.).
                                  • +2
                                    «Надеюсь, они еще добавят кнопочки социальных сетей для интеграции, что бы их можно было драг-н-дроп'нуть на макет, ибо сегодня они есть на многих сайтах (ФБ, ВК, ОК и т.п.).»
                                    Посмотрите в элементе icon там достаточно большой выбор в том числе и иконки соц. сетей.
                                    • 0
                                      Да, действительно, не заметил. Спасибо
                                  • +1
                                    Немного поклацала. Сразу смутил шрифт, не люблю подобные, создают ощущение «мультяшности», но это вкусовщина. :)
                                    Не понравилось, что структура проекта не видна. Мне удобно сразу видеть список страниц и иметь возможность в один клик переключаться между ними. Еще бы добавила возможность их группировать и структурировать. Часто есть потребность скрыть какой-то блок, над которым уже работа завершена. Может это и есть в настройках, но я не нашла.
                                    И да, хотелось бы сразу при создании указывать размер и структуру страницы.

                                    А в целом, конечно, интересно и для начала сойдет. Добавлю в закладки, еще поизучаю вечером.
                                    • 0
                                      у них там есть раздел, где можно проголосовать за фичу/оставить пожелание. Думаю, им это будет полезно.
                                      • 0
                                        Шрифт можно заменить на какой угодно, просто переопределите CSS, который я выше указывал.
                                        Хотя по моему опыту ощущение «мультяшности» просто необходимо для прототипов, если вы собираетесь показывать их заказчику.
                                        • 0
                                          Ну это смотря какой проект и какой заказчик. Вряд ли для внутренних систем компании, у которой строгий корпоративный стиль подойдут «мультяшные» прототипы. :)

                                          А вообще я в большей степени имела ввиду то, что мне мультяшным показалось само приложение, а не нарисованные в нем прототипы. И хотя проект интересный и будет интересно последить за развитием (может в будущем и перейду на него, чем черт не шутит), пока буду юзать более «строгий» и лично для меня более удобный MockFlow.
                                          • 0
                                            Вряд ли для внутренних систем компании, у которой строгий корпоративный стиль подойдут «мультяшные» прототипы. :)

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

                                            пока буду юзать более «строгий» и лично для меня более удобный MockFlow

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

                                              Хм, а мне казалось, что наоборот. Когда все строго и схематично, прототип и воспринимается исключительно как расположение элементов. А когда начинается «мультяшность» — начинаются и разговоры о дизайне. :))
                                              • 0
                                                Значит нам попадались разные по восприятию заказчики :-)
                                      • –8
                                        Не впечатлило. Или может идеи не понял? Я думал прототипирование подразумевает не только разработку взаиморасположения элементов интерфейса, но и элементарное программирование их реакции / поведения. А тут получилось что-то вроде MS Visio с урезанным набором элементов. Даже в HTML не экспортнуть результат. Буэээ
                                        • +2
                                          Знаете, почему-то русские люди особенно негативно относятся ко всему, что делают другие.
                                          Основные постановщики однозвездочных отзывов в appstore — русские, которые совсем не первые по продажам. Вы своим же негативным отношением делаете свою свою жизнь не такой легкой и приятной какой она могла бы быть.
                                          Подумайте, что бы изменилось, если бы вы либо оставили позитивный комментарий и поддержали стартап, либо не оставляли его вообще и не портили бы себе карму (во всех смыслах)?
                                          • +1
                                            Да, всегда удивляло, заходишь в google play к примеру, и видишь рейтинг к программе.
                                            5 балов — 50 человек,
                                            4 бала — 20 человек,
                                            3 бала — 10 человек,
                                            2 бала — 5 человек
                                            1 бал — 40 человек
                                            • 0
                                              Я где-то недавно читал что это один из признаков «накрутки».
                                              Дескать, реальные рейтинги всегда смещены либо вверх либо вниз.
                                              Когда приложение фиговое основная масса голосует 1 балл, возможно немного средних баллов. Боты всегда ставят 5 баллов.
                                              • 0
                                                В том то и дело, что подобное чаще встречал у хороших приложений.
                                            • +3
                                              «либо не оставляли его вообще» — вы агитируете за одобряюще-сопливое улюлюканье в отсутствии конструктивного скепсиса? Бросьте, откройте глаза и смело оглянитесь по сторонам, а не трепещите над своей кармой. Мне плевать на 99% юнцов-хабродрочеров.
                                              • +1
                                                Критиковать может каждый, делать пока почти никто, а поддерживать здесь не принято почему-то.
                                                Кстати, что сделали вы?
                                                • +1
                                                  «Критиковать может каждый, что сделали вы» (с)
                                                  Простите меня, но это аргументация ребенка. Сударь, вы меня утомили.
                                                  • +1
                                                    Добра вам побольше )
                                                    • 0
                                                      Ваш лучик добра рассеял тьму во мне. Простите, если обидел.
                                          • 0
                                            Приятно видеть здоровую конкуренцию! Успехов вам!
                                            • 0
                                              как создать новую страницу и привязать её к проэкту?
                                              • 0
                                                и как добавить свои картинки?
                                                • 0
                                                  В палитре есть вкладка images и там внизу кнопка для аплоада
                                                • 0
                                                  В верху справа от название есть икнока «древовидная структура» (правда в данном случае структура проекта пока линейная) там вот можно добавить(удалить) новые страницы и перемещать их по списку перетягиванием.
                                                • 0
                                                  Нету экспорта :(
                                                  • 0
                                                    Упс. После сохранения все пашет. Оличный сервис! Буду пользоваться.
                                                  • 0
                                                    Это gomockingbird.com с Comic Sans?
                                                    Всегда мечтал.
                                                    • 0
                                                      не сохраняет проекты на русском языке в pdf
                                                      сервис понравился
                                                      • 0
                                                        Кто сравнивал с balsamiq.com, что лучше? :)
                                                      • 0
                                                        Вот бы еще стандартные 12 (16) колоночные сетки указывать с привязкой элементов к ним. Было бы совсем замечательно! Сейчас можно указать параметры сетки, но привязка к ней работает только при перемещении объекта, при ресайзе — привязки нет.
                                                        • 0
                                                          Не хватает сохранение собственных модулей, например новостной блок и чтобы можно было изменить ширину этого блока в зависимости от ширины колонки.
                                                          Так бы наделал своих заготовок и клепал предварительные схемы макетов на согласование.
                                                          • +1
                                                            Еще бы добавить возможность вносить комментария в готовом макете. К приму я скинул ссылку на макет заказчику, заказчик поставил крестики и подписал что ему не понравилось.
                                                            • 0
                                                              Да, очень не хватает комментирования как у mockflow.com
                                                            • 0
                                                              Выглядит немного мультяшно, но красиво. Было бы интересно узнать с помощью чего реализован сервис.
                                                              • –1
                                                                R-сожалению, такие вещи не прокатывают для 99% моих клиентов — они не могут представить что это будет в реале
                                                                • +7
                                                                  Спасибо. Добавил в закладки к своим остальным:

                                                                  justproto.com
                                                                  invisionapp.com
                                                                  mockflow.com
                                                                  mockupbuilder.com
                                                                  gomockingbird.com
                                                                  balsamiq.com
                                                                  hotgloo.com
                                                                  • 0
                                                                    Ничего лучше Axure пока не выпустили. В этих онлайн-сервисах невозможно работать с такой скоростью.
                                                                    • 0
                                                                      зато данный сервис бесплатен, а вот axure… ех.
                                                                    • 0
                                                                      нахера это все если есть бумага с карандашом
                                                                      • +3
                                                                        Зачем вообще WWW, если есть книги?
                                                                        • 0
                                                                          Кому-то так удобнее, видимо.

                                                                          По мне, так это попытка сделать телевизор из бамбуковых стеблей и соломы.
                                                                          Есть такое понятие — кинестетический контакт. Визуальным он не заменим.
                                                                          • 0
                                                                            Поддерживаю. Вероятно я ещё просто не дорос, но не очень понимаю зачем нужны такие штуки (тем более за деньги — не знаю как этот, но я встречал платные и в то же время неудобные) если они не генерят на основе нарисованного код (как это делают WYSIWYG GUI дизайнеры). Если речь о создании концепта, то бумага и карандаш (или графический планшет/редактор) по-моему дают гораздо больший простор для дизайнерской мысли вместе с быстротой-лёгкостью использования.
                                                                            • 0
                                                                              попробую объяснить в двух словах:

                                                                              — вы нарисовали концепт
                                                                              — показали заказчику
                                                                              — заказчик посмотрел, сказал «круто, делаем».

                                                                              Следующие шаги какие?
                                                                            • 0
                                                                              … Вам нужно передвинуть нарисованный элемент — с карандашом и листом это сложней чем с драг-н-дропа.
                                                                              • 0
                                                                                а еще есть Почта России :))

                                                                                у нас разработчики в других городах и даже других странах. Им бумагу с эскизом почтой высылать?
                                                                            • +1
                                                                              На первый взгляд многое сделано очень правильно. Поддерживаю!
                                                                              Сейчас на рынке сильно не хватает средств прототипирования с возможностью одновременной работы нескольких (хотя бы двух) человек.
                                                                              Насколько мне удалось понять, у вас такой возможности нет.
                                                                              Правда ли это? Планируете ли?
                                                                              • 0
                                                                                Я обычно такие макеты в блокноте в клеточку рисую – прямо на глазах клиента, – так быстрее получается и ловче. Но приложение понравилось, попробую пустить в дело.
                                                                                • 0
                                                                                  блин, это очень круто. первый раз вижу настолько качественное, красивое и понятное приложение для создания макетов. тем более в браузере.
                                                                                  • 0
                                                                                    понравилось, хороший сервис, сразу заюзал себе под макет. 2 просьбы/пожелания:
                                                                                    • +1
                                                                                      рано отправилось
                                                                                      итак:
                                                                                      1. чтобы были общие на все макеты элементы (меню, лого)
                                                                                      2. скачать в html
                                                                                      ну и список страниц пошире бы, названия не влазят. либо сделать более сложную иерархию страниц
                                                                                      • 0
                                                                                        Подписываюсь под первым пунктов.
                                                                                    • 0
                                                                                      Что-то я не понял на счет приватности проекта.

                                                                                      Можно нагуглить парочку проектов: www.google.com/search?q=site%3Amoqups.com
                                                                                      На второй странице результатов как раз парочка:
                                                                                      moqups.com/Rockwill/HDohnjG2/

                                                                                      Не уверен, что владельцы проектов об этом подозревают :(
                                                                                      • 0
                                                                                        На самом деле только пара проектов:
                                                                                        site:moqups.com --site:community.moqups.com --site:blog.moqups.com
                                                                                        Ну всё равно странно :)
                                                                                        • 0
                                                                                          Под ссылкой – интересная штучка :) сам такое хотел запилить как-то, но всё руки не дошли.
                                                                                          В общем, благодарю.
                                                                                        • 0
                                                                                          А на чем написан проект? Техническая часть

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